/* ===========================================================================
   EL SELECTOR DE ELEMENTOS — ElegirElementos y su panel «Elegir…»
   (2026-10-14, docs/central/selector-de-elementos-2026-10-14.md)

   En la ficha: con pocos, fichas con «×»; con muchos, un RESUMEN de dos líneas
   («540 productos · de 12 familias» y los cinco primeros) y los botones. Nunca
   una pared de fichas. El panel es una hoja a la derecha (520 px) que en el
   teléfono (< 720 px) ocupa la pantalla entera; sus filas miden 44 px (táctil)
   y son las que virtualiza PanelElegirElementos (ALTO_DE_FILA).

   Sin fichas de color propias: las --limpia-* de hoja-limpia.css, así que el
   oscuro sale solo. Nada que se pulse es un óvalo (PastillasSinOvalosTests).
   =========================================================================== */

.elegir {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-inline-size: 0;
}

.elegir-vacio {
    color: var(--limpia-tinta-3);
    font-size: 14px;
}

/* Las fichas (hasta 8) ------------------------------------------------------ */

.elegir-fichas {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.elegir-ficha {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    max-inline-size: 100%;
    min-block-size: 30px;
    padding: 0 2px 0 10px;
    border-radius: 6px;
    background: var(--limpia-morado-aguada);
    color: var(--limpia-morado-hondo);
    font-size: 14px;
    font-weight: 600;
}

.elegir-ficha-nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elegir-ficha-quitar {
    display: grid;
    flex-shrink: 0;
    place-items: center;
    inline-size: 26px;
    block-size: 26px;
    border: 0;
    border-radius: 5px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 16px;
    cursor: pointer;
}

.elegir-ficha-quitar:hover {
    background: var(--limpia-hover);
}

/* El resumen (más de 8) ----------------------------------------------------- */

.elegir-resumen {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-cabecera);
}

.elegir-resumen p {
    margin: 0;
}

.elegir-resumen-cifra strong {
    color: var(--limpia-tinta);
    font-variant-numeric: tabular-nums;
}

.elegir-resumen-grupos {
    color: var(--limpia-tinta-2);
}

/* Sin recortar a dos líneas: son cinco nombres como mucho, y el recorte se comía el «y 535 más» en el teléfono. */
.elegir-resumen-muestra {
    color: var(--limpia-tinta-2);
    font-size: 14px;
    overflow-wrap: anywhere;
}

/* Los botones --------------------------------------------------------------- */

.elegir-acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.elegir-boton,
.elegir-boton-lleno,
.elegir-boton-texto {
    min-block-size: 32px;
    padding: 0 12px;
    border-radius: var(--limpia-radio-control);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.elegir-boton {
    border: 1px solid var(--limpia-borde-control);
    background: var(--limpia-hoja);
    color: var(--limpia-morado);
}

.elegir-boton:hover {
    background: var(--limpia-morado-aguada);
}

.elegir-boton-lleno {
    border: 0;
    background: var(--limpia-morado);
    color: var(--limpia-sobre-morado);
}

.elegir-boton-texto {
    border: 0;
    background: transparent;
    color: var(--limpia-morado);
}

.elegir-enlace {
    padding: 0 2px;
    border: 0;
    background: transparent;
    color: var(--limpia-morado);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

.elegir-enlace:hover {
    text-decoration: underline;
}

.elegir-anadir {
    flex: 0 1 220px;
    min-inline-size: 160px;
}

.elegir-anadir .mud-input-control {
    margin: 0;
}

.elegir-anadir .mud-input {
    min-block-size: 32px;
    padding: 0 10px;
    border: 1px dashed var(--limpia-borde-control);
    border-radius: 6px;
}

/* UN SOLO BORDE (2026-10-15). Con la densidad compacta el campo es relleno, y hoja-limpia.css le pinta su canto con una sombra
   interior de 1 px: junto al discontinuo de aquí salían DOS cajas, una dentro de otra. Aquí manda el discontinuo («añadir»), y al
   enfocar se vuelve morado y continuo. Tres y cuatro clases: ganan a las dos y tres de hoja-limpia.css, que va después.
   Lo mismo para el «+ Añadir un producto al ticket» del simulador (.promo-anadir). */
.elegir-anadir .mud-input.mud-input-filled,
.elegir-anadir .mud-input.mud-input-filled:hover,
.promo-anadir .mud-input.mud-input-filled,
.promo-anadir .mud-input.mud-input-filled:hover {
    box-shadow: none;
    background-color: transparent;
}

.elegir-anadir .mud-input.mud-input-filled:focus-within,
.promo-anadir .mud-input.mud-input-filled:focus-within {
    box-shadow: none;
    border-style: solid;
    border-color: var(--limpia-morado);
}

.elegir-anadir .mud-input::before,
.elegir-anadir .mud-input::after,
.elegir-anadir .mud-input-adornment {
    display: none;
}

.elegir-anadir .mud-input-slot {
    font-size: 14px;
}

.elegir-opcion {
    display: block;
}

.elegir-opcion-detalle {
    display: block;
    color: var(--limpia-tinta-3);
    font-size: 12px;
}

.elegir-sugerencia {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    padding: 8px 12px;
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-aviso-fondo);
    color: var(--limpia-aviso-tinta);
    font-size: 14px;
}

.elegir-sugerencia span {
    flex: 1 1 260px;
}

.elegir-error {
    margin: 0;
    color: var(--limpia-error-tinta);
    font-size: 13px;
}

/* El panel ------------------------------------------------------------------ */

.elegir-velo {
    position: fixed;
    inset: var(--plano-banda-alto, 60px) 0 0 0;
    z-index: var(--limpia-z-velo, 40);
    background: rgba(23, 17, 31, 0.36);
}

.elegir-panel {
    position: fixed;
    inset-block: var(--plano-banda-alto, 60px) 0;
    inset-inline-end: 0;
    z-index: var(--limpia-z-sobre-velo, 41);
    display: flex;
    flex-direction: column;
    inline-size: min(520px, 100vw);
    background: var(--limpia-hoja);
    border-inline-start: 1px solid var(--limpia-borde);
    box-shadow: var(--limpia-sombra-menu);
    color: var(--limpia-tinta);
}

.elegir-panel-cabecera {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 10px 18px;
    border-bottom: 1px solid var(--limpia-borde);
}

.elegir-panel-titulo {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.elegir-panel-cuenta {
    margin-inline-start: auto;
    color: var(--limpia-tinta-2);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.elegir-panel-cerrar {
    flex-shrink: 0;
    inline-size: 40px;
    block-size: 40px;
    border: 0;
    border-radius: var(--limpia-radio-control);
    background: transparent;
    color: var(--limpia-tinta-2);
    font: inherit;
    font-size: 22px;
    cursor: pointer;
}

.elegir-panel-cerrar:hover {
    background: var(--limpia-hover);
}

.elegir-pestanas {
    display: flex;
    gap: 4px;
    padding: 8px 18px 0;
    border-bottom: 1px solid var(--limpia-borde);
}

.elegir-pestana {
    min-block-size: 36px;
    padding: 0 10px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--limpia-tinta-2);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}

.elegir-pestana[aria-selected="true"] {
    border-bottom-color: var(--limpia-morado);
    color: var(--limpia-morado);
}

.elegir-herramientas {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 8px 10px;
    padding: 10px 18px;
}

.elegir-buscar {
    flex: 1 1 100%;
    min-inline-size: 0;
    min-block-size: 36px;
    padding: 0 10px;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja);
    color: var(--limpia-tinta);
    font: inherit;
    font-size: 15px;
}

.elegir-buscar:focus-visible,
.elegir-filtro select:focus-visible {
    outline: 2px solid var(--limpia-morado);
    outline-offset: 1px;
}

.elegir-segmentos {
    display: flex;
    gap: 4px;
}

.elegir-segmento {
    min-block-size: 32px;
    padding: 0 10px;
    border: 1px solid var(--limpia-borde);
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja);
    color: var(--limpia-tinta-2);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.elegir-segmento[aria-checked="true"] {
    border-color: var(--limpia-tinta);
    background: var(--limpia-tinta);
    color: var(--limpia-hoja);
}

.elegir-filtro {
    display: flex;
    flex: 1 1 140px;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 0;
}

.elegir-filtro-rotulo {
    color: var(--limpia-tinta-3);
    font-size: 12px;
    font-weight: 600;
}

.elegir-filtro select {
    min-block-size: 32px;
    max-inline-size: 100%;
    padding: 0 6px;
    border: 1px solid var(--limpia-borde-control);
    border-radius: var(--limpia-radio-control);
    background: var(--limpia-hoja);
    color: var(--limpia-tinta);
    font: inherit;
    font-size: 14px;
}

.elegir-casilla-filtro {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-block-size: 32px;
    color: var(--limpia-tinta-2);
    font-size: 14px;
    white-space: nowrap;
}

.elegir-masivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px 12px;
    padding: 0 18px 8px;
    font-size: 14px;
}

.elegir-masivo-texto {
    color: var(--limpia-tinta-3);
    font-variant-numeric: tabular-nums;
}

/* «Se marcan productos sueltos…» (2026-11-13): una línea pequeña en gris bajo «Marcar…», con una familia o categoría filtrada. */
.elegir-aviso-grupo {
    margin: 0;
    padding: 0 18px 8px;
    color: var(--limpia-tinta-3);
    font-size: 12px;
    line-height: 1.35;
}

.elegir-lista {
    flex: 1 1 auto;
    min-block-size: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-top: 1px solid var(--limpia-borde-fino);
}

.elegir-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
    block-size: 44px;
    padding: 0 18px;
    border-bottom: 1px solid var(--limpia-borde-fino);
    cursor: pointer;
}

.elegir-fila:hover {
    background: var(--limpia-hover);
}

.elegir-fila-marcada {
    background: color-mix(in srgb, var(--limpia-morado-aguada) 55%, transparent);
}

.elegir-fila input {
    flex-shrink: 0;
    inline-size: 18px;
    block-size: 18px;
    margin: 0;
    accent-color: var(--limpia-morado);
}

.elegir-fila-texto {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.2;
}

.elegir-fila-nombre,
.elegir-fila-detalle {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.elegir-fila-nombre {
    font-size: 14px;
}

.elegir-fila-detalle {
    color: var(--limpia-tinta-3);
    font-size: 12px;
}

.elegir-de-baja {
    flex-shrink: 0;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
    font-size: 12px;
}

.elegir-nada {
    margin: 0;
    padding: 18px;
    color: var(--limpia-tinta-3);
}

.elegir-panel-pie {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    padding: 10px 18px;
    border-top: 1px solid var(--limpia-borde);
}

.elegir-cambios {
    margin-inline-end: auto;
    color: var(--limpia-tinta-2);
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* En el teléfono: pantalla entera y los controles a 44 px ------------------- */

@media (max-width: 719.98px) {
    .elegir-panel {
        inset: 0;
        inline-size: 100vw;
        z-index: 1350;
        border: 0;
    }

    .elegir-velo {
        display: none;
    }

    .elegir-panel-cabecera {
        padding-inline-start: 16px;
    }

    .elegir-pestanas,
    .elegir-herramientas,
    .elegir-masivo,
    .elegir-aviso-grupo {
        padding-inline: 16px;
    }

    /* «Marcar toda la familia…» y «Quitar…» se pulsan con el dedo (2026-11-13): 44 px de alto, sin que crezca la línea. */
    .elegir-masivo .elegir-enlace {
        min-block-size: 44px;
    }

    .elegir-masivo {
        padding-block-end: 0;
        column-gap: 16px;
    }

    /* La cuenta ya va en el botón («Marcar toda la familia «CARNES» (24)»): en el teléfono, una fila menos. */
    .elegir-masivo-texto {
        display: none;
    }

    .elegir-panel-cerrar {
        inline-size: 44px;
        block-size: 44px;
    }

    .elegir-fila {
        padding-inline: 16px;
    }

    .elegir-buscar,
    .elegir-filtro select,
    .elegir-segmento,
    .elegir-boton,
    .elegir-boton-lleno,
    .elegir-boton-texto,
    .elegir-pestana,
    .elegir-casilla-filtro {
        min-block-size: 44px;
    }

    .elegir-ficha {
        min-block-size: 36px;
    }

    .elegir-ficha-quitar {
        inline-size: 34px;
        block-size: 34px;
    }

    .elegir-panel-pie {
        padding-block-end: calc(10px + env(safe-area-inset-bottom));
    }

    .elegir-panel-pie .elegir-boton-lleno {
        flex: 1 1 auto;
    }
}

/* El rótulo del campo, con su cuenta (cuando la pantalla no lo pone) -------- */

.elegir-cabecera {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.elegir-etiqueta {
    color: var(--limpia-tinta-2);
    font-size: 14px;
    font-weight: 600;
}

.elegir-cuenta {
    min-inline-size: 22px;
    padding: 0 6px;
    border-radius: 4px;
    background: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

/* EL TELÉFONO EN HORIZONTAL (844 × 390) Y CUALQUIER PANTALLA TÁCTIL (2026-11-13) ----------------------------------------------
   Por anchura (844 px) no es «teléfono» y el panel salía a 520 px con controles de 32-36 px y, con 390 px de alto menos la banda,
   la cabecera, las pestañas, el buscador, los filtros y el pie se comían la lista. Con poca altura: pantalla entera, el buscador
   y los filtros en una sola fila, y la lista con lo que quede. Con el dedo: 44 px. */
@media (pointer: coarse) {
    .elegir-buscar,
    .elegir-filtro select,
    .elegir-segmento,
    .elegir-boton,
    .elegir-boton-lleno,
    .elegir-boton-texto,
    .elegir-pestana,
    .elegir-casilla-filtro,
    .elegir-masivo .elegir-enlace {
        min-block-size: 44px;
    }

    .elegir-panel-cerrar {
        inline-size: 44px;
        block-size: 44px;
    }

    /* El «×» de una etiqueta se ve de 26-34 px (la etiqueta es compacta), pero con el dedo se acierta en 44 × 44 (2026-11-13): el
       blanco crece por fuera con un ::after, sin agrandar la etiqueta. */
    .elegir-ficha-quitar {
        position: relative;
    }

    .elegir-ficha-quitar::after {
        content: "";
        position: absolute;
        inset: 50% auto auto 50%;
        inline-size: 44px;
        block-size: 44px;
        transform: translate(-50%, -50%);
    }
}

@media (max-height: 520px) and (min-width: 720px) {
    .elegir-panel {
        inset: 0;
        inline-size: 100vw;
        z-index: 1350;
        border: 0;
    }

    .elegir-velo {
        display: none;
    }

    .elegir-panel-cabecera {
        padding-block: 2px;
    }

    .elegir-herramientas {
        flex-wrap: nowrap;
        padding-block: 6px;
    }

    .elegir-buscar {
        flex: 1 1 200px;
    }

    .elegir-filtro {
        flex: 0 1 170px;
    }

    /* Si aun así no cabe, se desplaza la hoja entera (la lista guarda cuatro filas) y el pie se queda abajo, a la vista. */
    .elegir-panel {
        overflow-y: auto;
    }

    .elegir-lista {
        min-block-size: 176px;
    }

    .elegir-panel-pie {
        position: sticky;
        inset-block-end: 0;
        padding-block: 4px calc(4px + env(safe-area-inset-bottom));
        background: var(--limpia-hoja);
    }
}