/* =============================================================================
   LA LISTA DE PRODUCTOS DEL PATRÓN A (2026-10-14, docs/central/lista-de-productos-2026-10-14.md): lo PROPIO de
   productos encima de lo común (lista-con-panel.css): el selector «Precio de», la miniatura, el precio con la marca de
   su origen, los alérgenos en iconos, el estado y el panel de precios por tarifa. Solo fichas, ni un color a mano.
   ============================================================================= */

/* --- «Precio de»: un campo de la densidad compacta (docs/central/densidad-compacta-2026-10-14.md) ----------------------
   La etiqueta pequeña ENCIMA (12 px, 600) y la caja de 40 px (44 en el teléfono), como los demás campos de la central. Es un
   <select> nativo porque lleva grupos (por local y las especiales) y en el teléfono abre la rueda del sistema. */
:is(.productos-precio-de, .productos-lote-redondeo) {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    min-inline-size: 12rem;
    max-inline-size: 18rem;
}

:is(.productos-precio-de-rotulo, .productos-lote-redondeo > span) {
    color: var(--limpia-tinta-2);
    font-size: var(--densidad-rotulo, 0.75rem);
    font-weight: 600;
    line-height: 1.2;
}

:is(.productos-precio-de, .productos-lote-redondeo) select {
    inline-size: 100%;
    block-size: var(--densidad-campo, 40px);
    padding: 0 28px 0 10px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-size: var(--densidad-letra, 0.875rem);
    text-overflow: ellipsis;
    cursor: pointer;
}

:is(.productos-precio-de, .productos-lote-redondeo) select:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }
.productos-lote-redondeo { min-inline-size: 9rem; }

/* --- La tabla de escritorio: anchos fijos y una línea por fila ------------------------
   Con `table-layout: fixed` los anchos salen de la cabecera y no del texto más largo de la página: un nombre o una familia
   larga (las importadas del sistema anterior) se cortan con puntos suspensivos en vez de empujar la tabla fuera de la pantalla, y todas las filas
   miden lo mismo (48 px). El nombre se lleva lo que quede. */
@media (min-width: 720px) {
    .productos-lista .lista-tabla { table-layout: fixed; inline-size: 100%; }
    .productos-lista .lista-tabla :is(th, td) { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
    .productos-lista .lista-tabla tbody td { block-size: var(--limpia-fila, 40px); padding-block: 0; }
    .productos-lista .lista-tabla th.crud-celda-seleccion { inline-size: 40px; }
    .productos-lista .lista-tabla th[data-clave="foto"] { inline-size: 60px; }
    .productos-lista .lista-tabla th[data-clave="nombre"] { inline-size: auto; }
    .productos-lista .lista-tabla th[data-clave="familia"] { inline-size: 150px; }
    .productos-lista .lista-tabla th[data-clave="precio"] { inline-size: 132px; }
    .productos-lista .lista-tabla th[data-clave="iva"] { inline-size: 64px; }
    .productos-lista .lista-tabla th[data-clave="alergenos"] { inline-size: 112px; }
    .productos-lista .lista-tabla th[data-clave="estado"] { inline-size: 132px; }
    .productos-lista .lista-tabla th:is([data-clave="plu"], [data-clave="baja"]) { inline-size: 96px; }
    .productos-lista .lista-tabla th:is([data-clave="codigos"], [data-clave="categorias"], [data-clave="elaboracion"], [data-clave="pase"]) { inline-size: 132px; }
    .productos-lista .lista-tabla th:is([data-clave="precio-extra"], [data-clave="suplemento"]) { inline-size: 112px; }
    .productos-lista .lista-tabla th.crud-celda-acciones { inline-size: 112px; }
    .productos-lista .lista-tabla .producto-estado { flex-wrap: nowrap; }
    .productos-lista .lista-tabla .producto-alergenos { flex-wrap: nowrap; }
}

/* CON EL PANEL AL LADO la tabla tiene ~660 px: las columnas fijas se estrechan para que el nombre conserve ~150. */
@media (min-width: 1440px) {
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="foto"] { inline-size: 56px; }
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="familia"] { inline-size: 96px; }
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="precio"] { inline-size: 104px; }
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="iva"] { inline-size: 62px; }
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="alergenos"] { inline-size: 76px; }
    .productos-lista .lista-con-panel-abierto .lista-tabla th[data-clave="estado"] { inline-size: 92px; }
}

/* --- La miniatura ------------------------------------------------------------- */
.producto-miniatura {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: 6px;
    object-fit: cover;
    vertical-align: middle;
    background-color: var(--limpia-cabecera);
}

.producto-miniatura-sin {
    border: 1px dashed var(--limpia-borde);
    color: var(--limpia-tinta-3);
    font-size: 10px;
    font-weight: 600;
}

.producto-miniatura-grande { inline-size: 48px; block-size: 48px; border-radius: 8px; }

.lista-tabla td[data-papel="miniatura"] { inline-size: 32px; padding-inline: 8px 4px; }

/* --- El precio y la marca de su origen ------------------------------------------ */
.producto-precio { font-weight: 600; font-variant-numeric: tabular-nums; }
.producto-precio-nada { color: var(--limpia-tinta-3); }

.producto-precio-marca {
    display: inline-block;
    margin-inline-start: 6px;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-size: 11px;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
}

.producto-precio-marca-libre { background-color: var(--limpia-neutro-fondo); color: var(--limpia-neutro-tinta); }

/* --- Los alérgenos en iconos ------------------------------------------------------ */
.producto-alergenos-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }

.producto-alergenos { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.producto-alergeno {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--limpia-tinta-2);
}

.producto-alergeno svg {
    inline-size: 18px;
    block-size: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.producto-alergenos-con-nombre { gap: 6px 12px; }
.producto-alergenos-con-nombre .producto-alergeno { font-size: var(--plano-t-12); }
.producto-alergenos-mas, .producto-alergenos-ninguno { color: var(--limpia-tinta-3); font-size: var(--plano-t-12); }

/* --- El estado -------------------------------------------------------------------- */
.producto-estado { display: inline-flex; flex-wrap: wrap; gap: 4px; }

/* --- El panel de precios por tarifa --------------------------------------------------- */
.productos-panel-alergenos { margin-block-start: 6px; }

.productos-panel-seccion + .productos-panel-seccion { margin-block-start: 18px; }

.productos-panel-rotulo {
    margin: 0 0 8px;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Los tres precios base: «Suplemento en menú» no cabe entero en un tercio de 440 px, así que van de dos en dos. */
.productos-panel-base {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
    gap: 8px;
}

.productos-panel-nota { margin: 6px 0 0; color: var(--limpia-tinta-3); font-size: var(--plano-t-12); line-height: 1.35; }
.productos-panel-error { margin: 6px 0 0; color: var(--limpia-error-tinta); font-size: var(--plano-t-13); }
.productos-panel-guardado { color: var(--limpia-bien-tinta); font-size: var(--plano-t-13); font-weight: 600; }

.productos-panel-tabla {
    inline-size: 100%;
    border-collapse: collapse;
    font-size: var(--plano-t-13);
}

.productos-panel-tabla :is(th, td) {
    padding: 6px 6px;
    border-block-end: 1px solid var(--limpia-borde-fino);
    text-align: start;
    vertical-align: middle;
}

.productos-panel-tabla thead th { color: var(--limpia-tinta-3); font-size: var(--plano-t-12); font-weight: 600; }
.productos-panel-tabla tbody th { font-weight: 500; }
.productos-panel-tabla .productos-panel-cifra { text-align: end; font-variant-numeric: tabular-nums; white-space: nowrap; }

.productos-panel-grupo th {
    padding-block-start: 10px;
    background-color: var(--limpia-cabecera);
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-12);
    font-weight: 650;
}

.productos-panel-aparte td.productos-panel-cifra { color: var(--limpia-morado); font-weight: 650; }

.productos-panel-origen { color: var(--limpia-tinta-2); font-size: var(--plano-t-12); }

.productos-panel-quitar {
    margin-inline-start: 6px;
    padding: 0 6px;
    background: none;
    color: var(--limpia-morado);
    border: 0;
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    cursor: pointer;
}

.productos-panel-quitar:disabled { color: var(--limpia-tinta-3); cursor: default; }
.productos-panel-quitar:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }

.productos-panel-locales { margin: 0; padding: 0; list-style: none; }

.productos-panel-locales li {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.productos-panel-local { flex: 1 1 8rem; min-inline-size: 0; }

/* --- Las acciones en lote: «Subir o bajar un %» y «Agotar o desagotar en…» ---------- */
.productos-lote-nota { margin: 0 0 10px; color: var(--limpia-tinta-2); font-size: var(--plano-t-13); }

.productos-lote-campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 12px;
    margin-block-end: 12px;
}

.productos-lote-campos > .campo { flex: 1 1 10rem; }

.productos-lote-previa {
    max-block-size: 50vh;
    overflow-y: auto;
    margin-block-start: 8px;
    border: 1px solid var(--limpia-borde-fino);
    border-radius: var(--limpia-radio-control);
}

/* --- En un teléfono -------------------------------------------------------------- */
@media (max-width: 719.98px) {
    .productos-precio-de { flex: 1 1 100%; max-inline-size: none; }
    .productos-precio-de select { font-size: 16px; }
    .plano-papeles td[data-papel="miniatura"] .producto-miniatura { inline-size: 48px; block-size: 48px; border-radius: 8px; }
    /* «no se vende aquí» en el hueco de la cifra (5,5 rem): en dos renglones pequeños, sin pisar el nombre. */
    .plano-papeles td[data-papel="cifra"] .producto-precio-nada { font-size: 11px; font-weight: 500; line-height: 1.15; white-space: normal; text-align: end; }
    .productos-panel-quitar { min-block-size: 44px; }
}