/* ===========================================================================
   LA FICHA DE PRODUCTO ÚNICA (2026-11-10, docs/central/ficha-de-producto-unica-2026-11-10.md)

   Un producto se edita en dos pantallas (el alta y la ficha) con UNA fila de
   pestañas, la misma y en el mismo sitio en las dos. Las dos llevan la clase
   `ficha-producto` en su envoltorio; aquí está lo que esa fila tiene de propio
   frente a la de las demás fichas, y las piezas nuevas de la ficha («Imagen y
   botón», «Añadidos»). Solo fichas (`--limpia-*`, `--plano-*`); va detrás de la
   hoja limpia y antes de la capa nítida y de la densidad, como las demás.
   =========================================================================== */

/* --- Las pestañas de fuera: enlaces con la piel de la tecla ----------------- */

a.plano-caja-pestana { text-decoration: none; }

/* Apagada (un producto nuevo: «Guarda el producto para ver el resto»). Se ve,
   para decir lo que vendrá, pero no se pulsa. */
.plano-caja-pestana-apagada {
    opacity: 0.45;
    cursor: not-allowed;
}

/* --- La fila: todas a la vista ---------------------------------------------- */

/* POR ENCIMA DE 720 px: UN RENGLÓN SI CABE; SI NO, DOS EQUILIBRADOS (segunda tanda, 2026-11-10).

   Son diez pestañas (trece con el almacén). En la primera tanda la fila
   envolvía sin más y a 1.280 px «Tallas y colores» caía SOLA al segundo
   renglón. Ahora:
     - la letra de las teclas baja a 13,5 px y el hueco a 11: las diez de
       siempre piden 930 px (medido) y a 1.280 el carril mide 968, así que van
       en UN renglón, también con la barra de desplazamiento de Windows (17 px);
     - cuando el carril (contenedor «fila-del-producto») es más estrecho que lo
       que pide la fila en un renglón, se enciende el SALTO que las dos filas
       pintan detrás de la mitad (`plano-caja-salto`, CajaDePestanas y
       FilaDePestanasDelProducto): dos renglones de 5 + 5 (7 + 6 con almacén) y
       nunca una pestaña huérfana. Lo que pide cada fila lo dice
       `data-pestanas`, medido en las capturas (medidas.json, «necesario»);
     - si ni media fila cabe (720-800 px con almacén), envuelve como siempre.
   Sin «Más ▾» y nunca más de dos renglones a partir de 1.024 px. */
.ficha-producto .plano-caja-carril { container: fila-del-producto / inline-size; }

@media (min-width: 720px) {
    .ficha-producto .plano-caja-pestanas {
        flex-wrap: wrap;
        column-gap: 11px;
        row-gap: 0;
        overflow-x: visible;
    }

    .ficha-producto .plano-caja-pestana { font-size: 0.84375rem; }

    .ficha-producto .plano-caja-salto {
        display: block;
        flex: 0 0 100%;
        block-size: 0;
    }
}

/* Lo que pide cada fila en un renglón (medidas.json, «necesario»), con 6 px de
   holgura por el redondeo de la letra: 10 pestañas, 930 px; 13 (con almacén),
   1.281. */
@container fila-del-producto (min-width: 936px) {
    .ficha-producto .plano-caja-pestanas:is([data-pestanas="10"], [data-pestanas="9"]) > .plano-caja-salto { display: none; }
}

@container fila-del-producto (min-width: 1285px) {
    .ficha-producto .plano-caja-pestanas:is([data-pestanas="13"], [data-pestanas="12"], [data-pestanas="11"]) > .plano-caja-salto { display: none; }
}

/* POR DEBAJO DE 720 px, LA MISMA FILA Y NO EL ACORDEÓN. En las demás fichas la
   fila se esconde y cada zona enseña su tirador; aquí la pestaña 1 es OTRA
   pantalla (el alta) y un acordeón no puede tener un renglón que navega. Así
   que en el teléfono la fila sigue, plana como en el escritorio, y se desplaza
   con el dedo: es «lo que ya hace bien la fila» en estrecho. */
@media (max-width: 719.98px) {
    .ficha-producto .plano-caja-carril {
        display: flex;
        align-items: stretch;
        margin-block-end: 8px;
        background-color: var(--limpia-papel);
        border-block-end: 1px solid var(--limpia-borde);
    }

    .ficha-producto .plano-caja-pestanas {
        flex: 1 1 auto;
        gap: 18px;
        padding: 0 4px;
        border-block-end: none;
    }

    .ficha-producto .plano-caja-pestana,
    .ficha-producto .plano-caja-pestana:active {
        min-block-size: 44px;
        margin-block-end: 0;
        padding: 10px 0;
        background: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        transform: none;
        color: var(--limpia-tinta-3);
        font-weight: 600;
    }

    .ficha-producto .plano-caja-pestana.plano-caja-pestana-abierta {
        background: none;
        color: var(--limpia-morado);
        box-shadow: inset 0 -2px 0 var(--limpia-morado);
    }

    /* Sin acordeón: ni tiradores ni zonas cerradas a la vista. */
    .ficha-producto .plano-caja-tirador { display: none; }

    .ficha-producto .plano-caja-panel [data-pestana][hidden] { display: none !important; }
}

.producto-pestanas-nota { margin: 0 0 8px; }

/* Las notas de la ficha del producto, pequeñas y en tinta segunda, como la ayuda del bloque de la foto. */
.ficha-producto .campo-nota {
    margin: 4px 0 8px;
    color: var(--limpia-tinta-2);
    font-size: 0.8125rem;
    line-height: 1.4;
}

/* El carril del alta no está dentro de una caja: el aire con lo que sigue. */
.ficha-producto > .producto-carril { margin-block-end: 12px; }

/* --- «Imagen y botón» ------------------------------------------------------- */

.ficha-imagen-y-boton { align-items: start; }

.ficha-imagen-del-boton { margin-block-start: 8px; }

/* El pliegue «Usar otra imagen solo para el botón»: una línea que se pulsa, con
   el arco de puerta que gira al abrirse (el motivo de apertura del sistema). */
.ficha-imagen-del-boton-abrir {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-block-size: 36px;
    padding: 4px 0;
    border: none;
    background: none;
    color: var(--limpia-morado);
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
}

.ficha-imagen-del-boton-arco { transition: transform var(--plano-tiempo) var(--plano-curva); }

.ficha-imagen-del-boton-abrir[aria-expanded="true"] .ficha-imagen-del-boton-arco { transform: rotate(90deg); }

.ficha-imagen-del-boton-abrir:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 2px;
}

@media (pointer: coarse), (max-width: 1023.98px) {
    .ficha-imagen-del-boton-abrir { min-block-size: 44px; }
}

/* --- «Añadidos», editable (segunda tanda) -------------------------------------

   Cada grupo es una tarjeta: en la cabeza, el nombre (lo que sobra), el mínimo
   y el máximo (6 rem) y sus tres botones (subir, bajar, quitar); debajo, los
   dos modos en una fila de casillas; las opciones, en rejilla de renglones
   compactos (nombre y sus tres botones), y el buscador para añadir una. En el
   teléfono la cabeza envuelve: el nombre a todo el ancho y debajo los números
   y los botones. */

.ficha-anadidos {
    display: grid;
    gap: 8px;
    margin: 4px 0 8px;
    padding: 0;
    list-style: none;
}

.ficha-anadidos-grupo {
    display: grid;
    gap: 2px;
    padding: 8px 12px 10px;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
    min-inline-size: 0;
}

.ficha-anadidos-cabeza {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 12px;
}

.ficha-anadidos-nombre {
    flex: 1 1 14rem;
    min-inline-size: 0;
}

.ficha-campo-mini {
    flex: 0 0 6rem;
    min-inline-size: 0;
}

.ficha-anadidos-acciones {
    display: flex;
    gap: 2px;
    margin-inline-start: auto;
    align-self: flex-end;
    padding-block-end: 4px;
}

.ficha-anadidos-modos {
    display: flex;
    flex-wrap: wrap;
    gap: 0 20px;
}

.ficha-anadidos-modos > .campo-casilla { margin-block-end: 0; }

.ficha-anadidos-opciones {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 4px 12px;
    margin: 4px 0 0;
    padding: 0;
    list-style: none;
}

.ficha-anadidos-opcion {
    display: flex;
    align-items: center;
    gap: 2px;
    min-inline-size: 0;
    padding-inline-start: 10px;
    border-radius: 6px;
    background-color: var(--limpia-hover);
}

.ficha-anadidos-opcion-nombre {
    flex: 1 1 auto;
    min-inline-size: 0;
    font-size: 0.875rem;
    overflow-wrap: anywhere;
}

.ficha-anadidos-anadir { max-inline-size: 24rem; }

.ficha-anadidos-error { margin: 2px 0 0; }

.ficha-anadidos-pie { margin-block-start: 4px; }

.ficha-anadidos-pie .mud-button-root { min-block-size: var(--densidad-boton); }

/* Los botones de icono de la pestaña: 36 px con ratón, 44 con el dedo. */
.ficha-icono {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    padding: 0;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--limpia-tinta-2);
    cursor: pointer;
}

.ficha-icono:hover:not(:disabled) { background-color: var(--limpia-hover); color: var(--limpia-morado); }

.ficha-icono.ficha-icono-quitar:hover:not(:disabled) { color: var(--mud-palette-error); }

.ficha-icono:disabled { opacity: 0.3; cursor: default; }

.ficha-icono:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 1px;
}

/* En el teléfono, el nombre a todo el ancho y debajo, en UN renglón, el mínimo, el máximo y los tres botones (la punta a punta
   de la segunda tanda los vio caer a un renglón propio, con un hueco muerto encima). */
@media (max-width: 600px) {
    .ficha-anadidos-cabeza { gap: 0 8px; }
    .ficha-anadidos-nombre { flex-basis: 100%; }
    .ficha-campo-mini { flex: 1 1 3.75rem; }
    .ficha-anadidos-acciones { gap: 0; }
}

@media (pointer: coarse), (max-width: 600px) {
    .ficha-icono {
        inline-size: 44px;
        block-size: 44px;
    }
}

/* --- Bloques con rótulo dentro de una pestaña (segunda tanda) ---------------

   «Venta y cocina» tenía tres campos numéricos de media pantalla y siete
   casillas en una columna de 51 px por renglón: 780 px de alto a 1.280 para
   doce datos. Ahora cada pestaña densa se parte en BLOQUES con un rótulo
   pequeño («Venta», «Cocina», «Presentaciones»; en «Añadidos», cada
   presentación): los números en UNA fila de campos estrechos que envuelve en
   el teléfono, y las casillas en rejilla (tres columnas a 1.280, una a 390).
   Campos de 40 px con la etiqueta pequeña encima: la densidad de siempre. */

.ficha-bloques {
    display: grid;
    gap: 12px;
}

.ficha-bloque { min-inline-size: 0; }

.ficha-bloque + .ficha-bloque {
    padding-block-start: 12px;
    border-block-start: 1px solid var(--limpia-borde);
}

.ficha-bloque-rotulo {
    margin: 0 0 6px;
    color: var(--limpia-tinta-2);
    font-size: 0.875rem;
    font-weight: 650;
    line-height: 1.3;
}

/* Los números de un bloque, en una fila: cada campo entre 8,5 y 12 rem (un PLU
   de 14 cifras, «20 min»), y la nota que los explica al lado si cabe. En el
   teléfono caben dos campos por renglón y la nota baja. */
.ficha-fila-de-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}

.ficha-campo-corto {
    flex: 1 1 8.5rem;
    min-inline-size: 0;
    max-inline-size: 12rem;
}

.ficha-fila-de-campos > .ficha-fila-nota {
    flex: 1 1 14rem;
    margin: 0 0 6px;
}

/* Las casillas, en rejilla: tantas columnas de 17 rem como quepan. Sin el
   margen de abajo de cada casilla suelta: el renglón ya mide lo que el dedo. */
.ficha-casillas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(17rem, 100%), 1fr));
    gap: 0 16px;
    align-items: start;
}

.ficha-casillas > .campo-casilla { margin-block-end: 0; }

/* Una columna estrecha para lo que es corto por naturaleza: las líneas de la
   etiqueta (32-40 caracteres) y los códigos de barras (8-14 cifras). */
.ficha-columna-estrecha { max-inline-size: 34rem; }

/* «Añadir un código» se quedaba en 32 px: el alto de un botón de la densidad. */
.ficha-columna-estrecha .mud-button-root { min-block-size: var(--densidad-boton); }

/* --- Venta y cocina: las otras presentaciones --------------------------------

   Una fila por presentación —nombre, proporción y casillas— en vez de la tabla
   de antes, que estiraba la proporción a 270 px. En el teléfono la fila
   envuelve: el nombre arriba, la proporción y las casillas debajo. */
.ficha-presentaciones {
    display: grid;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ficha-presentacion {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 16px;
}

.ficha-presentacion-nombre {
    flex: 0 1 16rem;
    min-inline-size: 0;
    overflow-wrap: anywhere;
}

.ficha-presentacion-casillas {
    display: flex;
    flex-wrap: wrap;
    gap: 0 12px;
}

.ficha-presentacion-casillas > .campo-casilla { margin-block-end: 0; }