/* ============================================================
   VISTA · Banco de imágenes
   Catálogo curado de elementos reusables (siluetas, elementos técnicos, fondos).
   Archivo aparte del index.html por el mismo criterio que panel-crear.css: la vista
   es autocontenida y el index ya pesa 70K+.

   Solo tokens de /tokens.css — cero hex hardcodeado.
   ============================================================ */

.banco-toolbar{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;
}
/* .spacer se define una sola vez en /base.css (con .cr-sp, .mk-sp y .fb-spacer como alias). */
.banco-toolbar .readonly{ color:var(--ink-3); font-size:12px; }

.banco-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:12px;
}

.banco-card{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; position:relative;
}
.banco-card figure{
  margin:0; aspect-ratio:1/1; background:var(--s2); display:flex;
  align-items:center; justify-content:center; overflow:hidden;
}
.banco-card img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Placeholder mientras cada thumbnail se baja: van con JWT, así que no se pueden
   pedir con un <img src> directo (ver cargarThumb en banco.js). */
.banco-card figure.cargando::after{
  content:"…"; color:var(--ink-3); font:var(--f-mono); font-size:18px;
}
.banco-card .cuerpo{ padding:9px 11px 11px; display:flex; flex-direction:column; gap:6px; }
.banco-card .nombre{
  font-size:13px; font-weight:600; color:var(--ink); line-height:1.25;
  overflow-wrap:anywhere;
}
.banco-card .chips{ display:flex; flex-wrap:wrap; gap:5px; }
.banco-card .instruccion{
  font-size:11px; line-height:1.35; color:var(--ink-3);
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}

/* Acciones al hover. Mismo patrón que la galería de tools/imagegen/
   (.gallery-item:hover .g-save): contenedor relative + botones absolutos con opacity 0. */
.banco-card .card-acciones{
  position:absolute; top:6px; right:6px; display:flex; gap:4px;
  opacity:0; transition:opacity .12s ease;
}
.banco-card:hover .card-acciones{ opacity:1; }
.banco-card .card-acciones button{
  font:500 10px/1 var(--f-mono); padding:4px 7px; border:none; border-radius:var(--r-xs);
  background:var(--velo); color:var(--ink); cursor:pointer;
}
.banco-card .card-acciones button:hover{ background:var(--turquesa); }

/* Aviso con "Deshacer" después de borrar. Se limpia solo a los 12s (ver banco.js). */
.banco-aviso{
  display:flex; align-items:center; gap:10px; margin-bottom:12px;
  padding:8px 12px; border-radius:var(--r-sm);
  background:var(--turquesa-dim); border:1px solid var(--turquesa-line);
  color:var(--ink-2); font-size:12px;
}
.banco-aviso[hidden]{ display:none; }
.banco-aviso button{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--turquesa-ink); font-size:12px; font-weight:600; text-decoration:underline;
}

.banco-chip{
  font:500 10px/1 var(--f-mono); padding:3px 6px; border-radius:20px;
  background:var(--s3); color:var(--ink-2); white-space:nowrap;
}
.banco-chip.cat{ background:var(--turquesa-dim); color:var(--turquesa-ink); }

/* ---------- modal de alta ---------- */

.banco-modal-overlay{
  position:fixed; inset:0; background:var(--velo); z-index:var(--z-overlay);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.banco-modal{
  background:var(--s1); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow); width:min(520px, 100%); max-height:90vh; overflow-y:auto;
  padding:18px 20px 16px;
}
.banco-modal h3{
  margin:0 0 14px; font-size:12px; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-2);
}
.banco-modal .field{ margin-bottom:12px; }
.banco-modal label{
  display:block; margin-bottom:4px; font-size:12px; font-weight:600; color:var(--ink-2);
}
.banco-modal .ayuda{ font-size:11px; font-weight:400; color:var(--ink-3); margin-top:3px; }
.banco-modal input[type=text], .banco-modal select, .banco-modal textarea{ width:100%; }
.banco-modal textarea{ resize:vertical; min-height:88px; font:inherit; }

.banco-drop{
  border:1px dashed var(--line); border-radius:var(--r-sm); padding:18px 12px;
  text-align:center; color:var(--ink-3); font-size:12px; cursor:pointer;
}
.banco-drop.over{ border-color:var(--turquesa); color:var(--turquesa-ink); }
.banco-drop.cargado{ border-style:solid; color:var(--ink-2); }
.banco-drop img{
  max-height:110px; max-width:100%; border-radius:var(--r-xs); display:block; margin:0 auto 6px;
}

.banco-modal .acciones{
  display:flex; align-items:center; gap:8px; margin-top:16px;
}
.banco-modal .estado{ font-size:12px; color:var(--ink-3); }
.banco-modal .estado.err{ color:var(--rojo-ink); }

/* ---------- picker: elegir una imagen del banco para un slide ----------
   Reusa .banco-modal / .banco-grid / .banco-card de arriba; lo único propio es que acá
   la tarjeta ES el botón (en el catálogo, en cambio, los botones aparecen al hover). */
.banco-modal.picker{ width:min(760px, 100%); }
.banco-modal.picker .banco-grid{
  margin-top:12px; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
}
.banco-card.elegible{ cursor:pointer; transition:border-color .12s, transform .12s; }
.banco-card.elegible:hover,
.banco-card.elegible:focus-visible{
  border-color:var(--turquesa); transform:translateY(-1px); outline:none;
}

/* ---------- campo de imagen del slide (editor de carrusel) ---------- */
.campo-imagen .fila{ display:flex; align-items:flex-start; gap:10px; }
.campo-imagen .fila input{ flex:1; min-width:0; }
.campo-imagen .miniatura{
  width:60px; height:60px; flex:none; border:1px solid var(--line);
  border-radius:var(--r-xs); background:var(--s2); overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; color:var(--ink-3); text-align:center; line-height:1.2; padding:2px;
}
.campo-imagen .miniatura img{ width:100%; height:100%; object-fit:cover; display:block; }