/* ============================================================
   KIT-FLANDES · PIEZA 6 · ADJUNTAR — estilos
   Pareja de kit/adjuntos.js.
   ============================================================ */

.kit-adj { display: block; }

.kit-adj__soltar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 16px;
  border: 2px dashed var(--k-linea);
  border-radius: var(--k-r-lg);
  background: var(--k-papel-2);
  cursor: pointer;
  transition: border-color .16s ease, background .16s ease, transform .12s ease;
  -webkit-tap-highlight-color: transparent;
}
.kit-adj__soltar:hover { border-color: var(--k-marca); background: rgba(var(--k-marca-rgb), .05); }
.kit-adj__soltar:active { transform: scale(.99); }
.kit-adj__soltar:focus-visible { outline: 2px solid var(--k-marca); outline-offset: 2px; }

.kit-adj--encima .kit-adj__soltar {
  border-color: var(--k-marca);
  border-style: solid;
  background: rgba(var(--k-marca-rgb), .10);
  transform: scale(1.01);
}

.kit-adj__icono { font-size: 26px; line-height: 1; flex: 0 0 auto; }

.kit-adj__texto { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.kit-adj__texto b { font: 600 14px/1.25 var(--k-fuente); color: var(--k-tinta); }
.kit-adj__texto span { font: 400 12px/1.3 var(--k-fuente); color: var(--k-apagado); }

/* ── lista de lo adjuntado ── */

.kit-adj__lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.kit-adj__lista:empty { margin: 0; }

.kit-adj__item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  background: var(--k-papel);
  border: 1px solid var(--k-linea);
  border-radius: var(--k-r-md);
  animation: kit-adj-entra .18s ease both;
}
@keyframes kit-adj-entra {
  from { opacity: 0; transform: translateY(-5px); }
  to   { opacity: 1; transform: none; }
}

.kit-adj__ico { font-size: 20px; line-height: 1; flex: 0 0 auto; width: 34px; text-align: center; }

.kit-adj__mini {
  width: 34px; height: 34px;
  object-fit: cover;
  border-radius: var(--k-r-sm);
  flex: 0 0 auto;
  background: var(--k-papel-2);
}

.kit-adj__nom {
  flex: 1 1 auto;
  min-width: 0;
  font: 500 13px/1.3 var(--k-fuente);
  color: var(--k-tinta);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kit-adj__peso { font: 500 11px/1 var(--k-fuente); color: var(--k-apagado); flex: 0 0 auto; }

.kit-adj__x {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--k-apagado);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  padding: 6px 8px;
  border-radius: var(--k-r-sm);
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.kit-adj__x:hover { background: var(--k-malo-fondo); color: var(--k-malo); }

@media (prefers-reduced-motion: reduce) {
  .kit-adj__item { animation: none; }
  .kit-adj__soltar, .kit-adj--encima .kit-adj__soltar { transition: none; transform: none; }
}

/* 4.6 · la casilla activa y el botón de pegar ───────────────────
   Con veinte casillas a la vista hay que ver CUÁL se va a quedar
   con el Ctrl+V. La activa se marca con el borde de la marca. */
.kit-adj__soltar { position: relative; }

/* 4.6.1 · LA CASILLA ACTIVA SE VE.
   Se quitó el botón "Pegar" (leía un portapapeles donde no están los
   archivos copiados del explorador y mentía). Ahora basta con poner el
   puntero encima: la casilla se marca y el Ctrl+V va ahí y en ningún otro
   sitio. En el móvil, el toque hace lo mismo. */
.kit-adj--activa .kit-adj__soltar {
  border-color: var(--k-marca, #06402B);
  border-style: solid;
  background: rgba(var(--k-marca-rgb, 6, 64, 43), .05);
  box-shadow: 0 0 0 3px rgba(var(--k-marca-rgb, 6, 64, 43), .14);
}
.kit-adj--activa .kit-adj__admite::after {
  content: ' · el Ctrl+V viene aquí';
  font-weight: 600;
  color: var(--k-marca, #06402B);
}
:root[data-tema="oscuro"] .kit-adj--activa .kit-adj__admite::after {
  color: var(--k-marca-clara, #4ea87b);
}
/* en pantalla táctil no hay puntero que se pose: ahí lo marca el toque */
@media (hover: none) and (pointer: coarse) {
  .kit-adj--activa .kit-adj__admite::after { content: ' · aquí se pega'; }
}

.kit-adj__admite { display: block; }