/* =============================================================================
   EL PATRÓN A DE LAS LISTAS (2026-10-14, docs/central/lista-de-productos-2026-10-14.md; boceto aprobado en
   reports/central/bocetos-lista-productos-2026-10-14, alternativa A): una lista con pocas columnas que se leen de
   un vistazo, filtros que se tocan de una vez (segmentos e interruptores), columnas opcionales en «Columnas», un
   PANEL LATERAL de 440 px al pulsar una fila y, en un teléfono, tarjetas con miniatura y una tercera línea.

   Es de TODAS las listas que lo quieran (productos la primera; categorías y las demás detrás), por eso va en su
   propia hoja y no dentro de una pantalla. Solo consume fichas (--limpia-*, --plano-*): ni un color escrito a mano.
   Va detrás de la hoja limpia y antes de la capa nítida (index.html).
   ============================================================================= */

/* --- Los segmentos: «En venta | De baja | Todos» ---------------------------- */
.lista-segmentos {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--plano-radio-control);
    overflow: hidden;
    background-color: var(--limpia-hoja);
}

.lista-segmento {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: calc(var(--tentalo-toque) - 2px);
    padding: 0 12px;
    background: none;
    color: var(--limpia-tinta-2);
    border: 0;
    border-inline-start: 1px solid var(--limpia-borde);
    font: inherit;
    font-size: var(--plano-t-13);
    white-space: nowrap;
    cursor: pointer;
}

.lista-segmento:first-child { border-inline-start: 0; }
.lista-segmento:hover:not([aria-pressed="true"]) { background-color: var(--limpia-hover); }

.lista-segmento[aria-pressed="true"] {
    background-color: var(--limpia-morado-aguada);
    color: var(--limpia-morado);
    font-weight: 600;
}

.lista-segmento:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: -2px;
}

/* --- El interruptor y la cuenta de una pastilla («Sin foto 12») ------------- */
.lista-chip-interruptor { display: inline-flex; align-items: center; gap: 6px; }

.lista-chip-cuenta {
    display: inline-block;
    min-inline-size: 1.5em;
    padding: 0 6px;
    border-radius: 999px;
    background-color: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
    font-size: var(--plano-t-12);
    font-weight: 600;
    line-height: 1.6;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

[aria-pressed="true"] > .lista-chip-cuenta,
.lista-chip-on > .lista-chip-cuenta {
    background-color: var(--limpia-hoja);
    color: var(--limpia-morado);
}

/* --- El menú «Columnas» con grupos ------------------------------------------- */
.crud-columnas-grupo {
    margin: 6px 8px 2px;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.crud-columnas-grupo:first-child { margin-block-start: 2px; }
.crud-columnas-fija { color: var(--limpia-tinta-3); }

.crud-columnas-nota {
    margin: 6px 8px 2px;
    max-inline-size: 15rem;
    color: var(--limpia-tinta-3);
    font-size: var(--plano-t-12);
    line-height: 1.35;
}

/* --- Las filas que abren el panel -------------------------------------------- */
.lista-tabla tbody tr.lista-fila-pulsable { cursor: pointer; }

.lista-tabla tbody tr.lista-fila-activa :is(td, th) { background-color: var(--limpia-morado-aguada); }

/* Una fila de baja se lee en gris: sigue en la lista (las bajas no esconden historia), pero no se confunde con lo que se vende. */
.lista-tabla tbody tr.lista-fila-baja td { color: var(--limpia-tinta-3); }
.lista-tabla tbody tr.lista-fila-baja .crud-principal { color: var(--limpia-tinta-2); }

/* --- La barra del patrón A: los controles arriba y los filtros en su propia fila ---
   Como el boceto: buscador, lo propio de la pantalla («Precio de»), «Columnas» y «Nuevo» en la primera fila; las
   pastillas, los segmentos y los interruptores debajo, en una fila entera. En un teléfono esa fila se desliza en
   horizontal en vez de ocupar tres renglones antes de la primera tarjeta. El menú «Columnas» se abre hacia la izquierda
   (está a la derecha de la barra y se salía de la página). */
.lista-con-panel .crud-lista .crud-barra .lista-filtros { order: 10; flex: 1 1 100%; }
.lista-con-panel .crud-lista .crud-barra .crud-columnas-abierto .crud-columnas-panel {
    inset-inline-start: auto;
    inset-inline-end: 0;
    /* Por encima de las pastillas (que van sobre el velo): con los filtros en la fila de abajo, el menú cae encima de ellas. */
    z-index: var(--limpia-z-menu);
}

@media (max-width: 719.98px) {
    .lista-con-panel .crud-lista .crud-barra .lista-filtros {
        order: 10;
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        padding-block-end: 2px;
    }

    .lista-con-panel .crud-lista .crud-barra .lista-filtros > * { flex: none; }
}

/* CON EL PANEL AL LADO (≥ 1440 px) la tabla se estrecha: las acciones de la fila se van (lo mismo está en el panel, y
   al cerrarlo vuelven) y lo largo se corta con puntos suspensivos en vez de empujar la tabla. */
@media (min-width: 1440px) {
    .lista-con-panel-abierto .lista-tabla :is(th, td).crud-celda-acciones { display: none; }
}

/* --- La lista con su panel ---------------------------------------------------- */
.lista-con-panel { position: relative; min-inline-size: 0; }
.lista-con-panel-lista { min-inline-size: 0; }
.lista-con-panel-velo { display: none; }

.panel-lateral {
    display: flex;
    flex-direction: column;
    inline-size: 100%;
    max-block-size: 100%;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio);
    overflow: hidden;
}

.panel-lateral-asa { display: none; }

.panel-lateral-cabecera {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 12px 12px 16px;
    border-block-end: 1px solid var(--limpia-borde-fino);
}

.panel-lateral-imagen { flex: none; }
.panel-lateral-titulos { flex: 1 1 auto; min-inline-size: 0; }

.panel-lateral-titulo {
    margin: 0;
    font-size: var(--plano-t-17);
    font-weight: 650;
    line-height: 1.25;
    overflow-wrap: anywhere;
}

.panel-lateral-subtitulo {
    margin: 2px 0 0;
    color: var(--limpia-tinta-2);
    font-size: var(--plano-t-13);
}

.panel-lateral-cerrar {
    flex: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    inline-size: 36px;
    block-size: 36px;
    margin: -4px 0 0;
    padding: 0;
    background: none;
    color: var(--limpia-tinta-2);
    border: 1px solid transparent;
    border-radius: var(--limpia-radio-control);
    cursor: pointer;
}

.panel-lateral-cerrar:hover { background-color: var(--limpia-hover); }
.panel-lateral-cerrar:focus-visible { outline: 2px solid var(--limpia-morado); outline-offset: 1px; }

.panel-lateral-cuerpo {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    padding: 12px 16px 16px;
}

.panel-lateral-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-block-start: 1px solid var(--limpia-borde-fino);
    background-color: var(--limpia-cabecera);
}

.panel-lateral-pie > .panel-lateral-pie-hueco { flex: 1 1 auto; }

/* A PARTIR DE 1440 px: al lado de la tabla, que se estrecha. Pegado arriba al bajar la página. */
@media (min-width: 1440px) {
    .lista-con-panel-abierto {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 440px;
        gap: 16px;
        align-items: start;
    }

    .lista-con-panel-panel {
        position: sticky;
        inset-block-start: 12px;
        max-block-size: calc(100dvh - var(--plano-barra-alto, 56px) - 24px);
        display: flex;
    }
}

/* ENTRE 720 Y 1439 px: por encima de la tabla, pegado a la derecha, con sombra; el velo transparente lo cierra. */
@media (min-width: 720px) and (max-width: 1439.98px) {
    .lista-con-panel-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--limpia-z-velo);
        background: transparent;
    }

    .lista-con-panel-panel {
        position: fixed;
        inset-block: calc(var(--plano-barra-alto, 56px) + 8px) 8px;
        inset-inline-end: 8px;
        z-index: var(--limpia-z-menu);
        display: flex;
        inline-size: min(440px, calc(100vw - 16px));
    }

    .lista-con-panel-panel > .panel-lateral { box-shadow: var(--limpia-sombra-menu); }
}

/* EN UN TELÉFONO: una hoja que sube desde abajo, con su asa y un velo que oscurece lo de detrás. */
@media (max-width: 719.98px) {
    .lista-con-panel-velo {
        display: block;
        position: fixed;
        inset: 0;
        z-index: var(--limpia-z-velo);
        background-color: color-mix(in srgb, var(--limpia-tinta) 32%, transparent);
    }

    .lista-con-panel-panel {
        position: fixed;
        inset-inline: 0;
        inset-block-end: 0;
        z-index: var(--limpia-z-menu);
        display: flex;
        max-block-size: 88dvh;
    }

    .lista-con-panel-panel > .panel-lateral {
        border-radius: var(--limpia-radio) var(--limpia-radio) 0 0;
        border-block-end: 0;
        box-shadow: var(--limpia-sombra-menu);
        padding-block-end: env(safe-area-inset-bottom, 0px);
    }

    .panel-lateral-asa {
        display: block;
        inline-size: 40px;
        block-size: 4px;
        margin: 8px auto 0;
        border-radius: 999px;
        background-color: var(--limpia-borde-control);
    }

    .panel-lateral-cerrar { inline-size: 44px; block-size: 44px; }
    .panel-lateral-pie :is(button, a, .mud-button-root) { min-block-size: 44px; }
}

/* --- La tarjeta de un teléfono: miniatura y tercera línea ---------------------- */
/* Con el mismo :is() que la gramática de plano.css (§ 7.3 bis), para ganarle por orden y no por !important. */
@media (max-width: 719.98px) {
    /* LA MINIATURA, a la izquierda de las líneas: la fila deja su hueco. */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(> [data-papel="miniatura"]) {
        padding-inline-start: calc(48px + 0.15rem + 10px);
        min-block-size: calc(48px + 1rem);
    }

    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > [data-papel="miniatura"] {
        position: absolute;
        inset-block-start: 0.5rem;
        inset-inline-start: 0.15rem;
        display: block;
        inline-size: 48px;
        block-size: 48px;
        padding: 0;
    }

    /* CADA LÍNEA, UNA LÍNEA: el nombre, las secundarias y la tercera se cortan con puntos suspensivos. Así todas las
       tarjetas miden lo mismo y la lista se recorre con el pulgar sin saltos. */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(> [data-papel="miniatura"]) > [data-papel="principal"] {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(> [data-papel="miniatura"]) > [data-papel="secundaria"] {
        display: inline-block;
        max-inline-size: calc(100% - 3.5rem);
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        vertical-align: bottom;
    }

    /* LA TERCERA LÍNEA: los alérgenos y el estado, como iconos y pastillas, debajo de las secundarias. El salto es un
       hueco de ancho entero entre las dos (orden 3); los datos van en el 4. */
    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr:has(> [data-papel="pie"]:not([data-vacia]))::before {
        content: "";
        order: 3;
        flex: 1 0 100%;
        block-size: 4px;
    }

    :is(.plano-papeles, .admin-tabla:not(:has(tbody .mud-input-control:not(.mud-input-control-boolean-input)))) tbody > tr > [data-papel="pie"] {
        order: 4;
        display: inline-flex;
        align-items: center;
        flex-wrap: nowrap;
        max-inline-size: 100%;
        overflow: hidden;
        margin-inline-end: 8px;
        white-space: nowrap;
    }
}

/* La cruz del panel con el dedo (2026-11-05, medida en la ficha del socio con el teléfono tumbado, 844 × 390: 36 × 36): 44 px. */
@media (pointer: coarse) {
    .panel-lateral-cerrar { inline-size: 44px; block-size: 44px; }
}