/* ============================================================
   UNA PIEZA DE UNA SOLA IMAGEN · el formulario de la infografía (infografia-editor.js)

   No inventa componentes: los grupos son los `.field-group` del formulario del carrusel, las
   columnas son `.comp-cols` y los botones son los `<button>` de siempre. Acá va lo que una
   imagen NO tiene (la tira de miniaturas, el ‹ 1 / 1 ›, el «+», «Mover elementos») y el
   acomodo de la lista de ítems, que a 390 tiene que seguir sin scroll lateral.

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

/* Una imagen no se desliza: la tira de miniaturas con su «+» y el navegador ‹ 1 / 1 › no
   tienen nada que recorrer (ARQUITECTURA-PANTALLA, regla 2: no está, no aparece apagado).
   «Mover elementos» tampoco: la composición de la infografía es por zonas fijas (título,
   cuerpo, cierre), no por bloques sueltos que se arrastran. La clase la pone aplicarForma()
   de carruseles-pieza.js. */
#carrusel-contenido.una-imagen .slide-nav,
#carrusel-contenido.una-imagen #toggle-mover,
#carrusel-contenido.una-imagen #reset-posicion-slide{ display:none; }

/* Las dos cards van una ABAJO de la otra y no lado a lado como en la imagen: la columna del
   formulario mide ~450px en Contenido, y partida en dos dejaba cada ítem en un campo de 70px
   donde no se leía lo que se escribía. Cada card se lee como un bloque aparte, con su título
   y una línea a la izquierda. */
.slide-block .ie-cols{ flex-direction:column; gap:var(--sp-5); }
.ie-col{
  min-width:0;
  border-left:2px solid var(--line-soft); padding-left:var(--sp-4);
}
.ie-col h5, .field-group h5{
  margin:var(--sp-3) 0 var(--sp-2); font-size:var(--fs-sm); font-weight:600; color:var(--ink-2);
}
.ie-col h5:first-child, .field-group .fg-head + h5{ margin-top:0; }

/* Un ítem: el número, los dos campos apilados (título y explicación) y «Quitar». */
.ie-item{
  display:flex; align-items:flex-start; gap:var(--sp-2);
  margin-top:var(--sp-2); padding-top:var(--sp-2); border-top:1px dashed var(--line-soft);
}
.ie-item-n{
  flex:0 0 auto; min-width:1.5em; padding-top:6px;
  font:600 var(--fs-micro)/1 var(--f-mono); color:var(--ambar-ink);
}
.ie-item-campos{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:var(--sp-1); }
.ie-item-campos input, .ie-item-campos textarea{ width:100%; box-sizing:border-box; }
.ie-quitar{ flex:0 0 auto; font-size:var(--fs-sm); }
.ie-agregar{ margin-top:var(--sp-3); }

/* Las notas del formulario (el conteo de ítems, el tope, R8) van SIEMPRE visibles: no son un
   .field-hint que «Ocultar ayudas» esconde, son lo que explica por qué falta un botón. */
.ie-nota{ margin:var(--sp-3) 0 var(--sp-3); font-size:var(--fs-sm); color:var(--ink-2); line-height:1.45; }

/* La miniatura de cada imagen de la infografía. Todas son dibujos técnicos con fondo
   transparente (R8), en grafito: sobre el --s2 del tema oscuro no se veía nada y parecía que
   la imagen no había cargado. Fondo claro fijo (el gris de la marca) en los dos temas, y
   ENTERA (contain): con cover, un esquemático de 800×408 se recortaba al centro y quedaba
   «33 34 35» sin contexto. */
#carrusel-contenido.una-imagen .campo-imagen .miniatura{ background:var(--fondo-figura); }
/* Los <select> del formulario (patrón, fondo, tipo de imagen) no pasan del ancho de su bloque:
   el del tipo trae «Dibujo técnico hecho a mano (svg_manual)» y a 390 se salía 17px por la
   derecha. Con max-width el texto largo se recorta adentro del control, que es lo normal. */
#carrusel-contenido.una-imagen .slide-block select{ max-width:100%; }
#carrusel-contenido.una-imagen .campo-imagen .miniatura img{ object-fit:contain; }

@media (hover: none), (max-width: 700px){
  .ie-quitar, .ie-agregar{ min-height:44px; }
  /* Con el dedo, en una lista de hasta 8 ítems: los campos a 44px de alto (medían 34) y más
     aire entre el título y la explicación de cada ítem (eran ~4px y era fácil tocar el de al
     lado). También los de cada card y los <select> del tipo de imagen. */
  .slide-block .ie-item-campos input,
  .slide-block .ie-col input,
  #carrusel-contenido.una-imagen .slide-block select{ min-height:44px; }
  /* Y el resto de los campos del formulario de la imagen: los «Datos generales» (título,
     datos duros), el archivo de cada imagen y el título de la pieza medían 34. Solo acá,
     colgando de .una-imagen: el formulario del carrusel institucional no se toca. */
  #carrusel-contenido.una-imagen input:not([type=checkbox]):not([type=radio]),
  #carrusel-contenido.una-imagen select,
  #carrusel-contenido.una-imagen textarea{ min-height:44px; }
  .slide-block .ie-item-campos{ gap:var(--sp-3); }
}

/* A 390 la ruta de la imagen quedaba en 86px entre la miniatura y «Elegir del banco» («img/
   esque…»): no se leía qué archivo era. Va en su propio renglón, abajo. */
@media (max-width: 480px){
  #carrusel-contenido.una-imagen .campo-imagen .fila{ flex-wrap:wrap; }
  #carrusel-contenido.una-imagen .campo-imagen .fila input{ flex:1 1 100%; order:3; }
}