/* LA CAPA NÍTIDA (restyling del 2026-10-10; docs/central/restyling-nitido-2026-10-10.md).

   Va la ÚLTIMA en index.html, detrás de hoja-limpia.css, y gana por orden: no cambia ni una ficha de color de la marca
   (el morado, la tinta y los tres tonos de estado siguen siendo los de --limpia-* y --plano-*), cambia cómo se USAN.

   Qué hace, en una línea por bloque:
   1. Quita el relieve de «tecla» (canto de 2 px y hundido al pulsar): botones, pestañas y teclas planos, con hover suave.
   2. La barra de arriba deja de ser una píldora flotante con muro: banda blanca a todo el ancho con regla fina.
   3. Superficies (zonas, cajas, tarjetas): canto de 1 px, radio 12 y una sombra mínima; fuera la esquina de muro 20/6.
   4. En el teléfono (< 720 px): cabecera de página compacta (los iconos al lado del título), barra de las listas en
      dos filas (buscador a todo el ancho), pastillas en una fila que se desliza, cifras de dos en dos, tablas que se
      desplazan dentro de su caja, diálogos a pantalla completa y campos a 16 px para que Safari no haga zoom.
   Solo fichas --limpia-*: el oscuro sale solo. */

:root {
    --nitida-radio: 12px;
    --nitida-radio-control: 8px;
    --nitida-sombra-hoja: 0 1px 2px rgba(42, 26, 62, 0.05), 0 1px 3px rgba(42, 26, 62, 0.04);
    --nitida-sombra-flota: 0 12px 32px -8px rgba(42, 26, 62, 0.24);
    --nitida-transicion: 150ms ease;

    /* 1. EL RELIEVE SE VA: las fichas del canto y del hundido valen nada en toda la central. */
    --plano-tecla-canto: none;
    --plano-tecla-canto-hondo: none;
    --plano-tecla-hundida: none;
    --plano-tecla-hundida-honda: none;
    --plano-canto: 0px;

    /* 2. La barra: banda pegada al borde (sin el hueco de 12 px de la píldora) y 60 px de alto. */
    --plano-barra-hueco: 0px;
    --plano-barra-alto: 60px;
    --plano-esquina-muro: var(--nitida-radio);
    --plano-radio-zona: var(--nitida-radio);
    --plano-radio-zona-corto: var(--nitida-radio);
}

@media (prefers-color-scheme: dark) {
    :root {
        --nitida-sombra-hoja: 0 1px 2px rgba(0, 0, 0, 0.35);
        --nitida-sombra-flota: 0 12px 32px -8px rgba(0, 0, 0, 0.6);
    }
}

@media (max-width: 719.98px) {
    :root { --plano-barra-alto: 56px; }
}

/* ===================================================================================================================
   1. BOTONES Y CONTROLES SIN RELIEVE
   =================================================================================================================== */

.mud-button-root {
    border-radius: var(--nitida-radio-control);
    transition: background-color var(--nitida-transicion), color var(--nitida-transicion),
        border-color var(--nitida-transicion), box-shadow var(--nitida-transicion);
}

.mud-button-root:active:not(:disabled) { transform: none; }

.mud-button-filled:not(:disabled):not(.mud-disabled),
.mud-button-filled-error:not(:disabled):not(.mud-disabled),
.mud-button-filled-secondary:not(:disabled):not(.mud-disabled),
.mud-button-filled-warning:not(:disabled):not(.mud-disabled) {
    box-shadow: 0 1px 2px rgba(42, 26, 62, 0.12);
}

.mud-button-filled:hover:not(:disabled) { box-shadow: 0 2px 6px -1px rgba(42, 26, 62, 0.24); }
.mud-button-filled:active:not(:disabled) { box-shadow: none; }

.mud-button-outlined:not(:disabled):not(.mud-disabled) {
    box-shadow: none;
    border-width: 1px;
    border-color: var(--limpia-borde-control);
    background-color: var(--limpia-hoja);
}

.mud-button-outlined:hover:not(:disabled) {
    border-color: var(--limpia-morado);
    background-color: var(--limpia-hover);
}

.mud-button-outlined:active:not(:disabled) { box-shadow: none; background-color: var(--limpia-morado-aguada); }

.mud-icon-button:active:not(:disabled) { box-shadow: none; }

.admin-boton-periodo.mud-button-root[aria-pressed="true"] { transform: none; box-shadow: none; }

/* Las teclas (tira, pastillas, tiradores de la caja) planas: el estado lo dice el fondo, como ya mandaba DESIGN.md. */
.plano-pastilla:active,
.plano-pastilla[aria-current]:active { transform: none; }

/* ===================================================================================================================
   2. LA BARRA DE ARRIBA: banda blanca con regla fina
   =================================================================================================================== */

.plano-barra-marco {
    padding: 0;
    background-color: var(--limpia-hoja);
    border-block-end: 1px solid var(--limpia-borde);
}

.plano-barra {
    border-radius: 0;
    border-block-end: 0;
    background-color: transparent;
    min-block-size: var(--plano-barra-alto);
    padding-inline: 16px;
    gap: 12px;
}

.plano-barra-logo img { block-size: 32px; }

.plano-barra-codigo {
    border-radius: 6px;
    background-color: var(--limpia-neutro-fondo);
    color: var(--limpia-neutro-tinta);
}

.plano-pase {
    min-block-size: 40px;
    border-radius: var(--nitida-radio-control);
    border-color: var(--limpia-borde);
    background-color: var(--limpia-papel);
}

.plano-pase:hover { background-color: var(--limpia-hover); border-color: var(--limpia-borde-control); }

.plano-pase-tecla { background-color: var(--limpia-hoja); border: 1px solid var(--limpia-borde); }

/* El contenido, con un poco más de aire arriba y un fondo uniforme. */
.plano-cuerpo { background-color: var(--limpia-papel); }

@media (max-width: 719.98px) {
    .plano-barra { padding-inline: 8px 12px; gap: 6px; }
    .plano-barra-logo img { block-size: 28px; }

    /* EL BUSCADOR, CAMPO Y NO LUPA: en el teléfono era un círculo de 44 px en mitad de la barra; ahora ocupa el hueco
       entre el logotipo y el usuario y dice «Buscar», que es lo que hace. */
    .plano-pase {
        flex: 1 1 auto;
        inline-size: auto;
        max-inline-size: none;
        min-inline-size: 0;
        margin-inline: 4px;
        padding-inline: 10px;
        justify-content: flex-start;
        border-radius: var(--nitida-radio-control);
    }

    .plano-pase .plano-pase-texto {
        display: block;
        position: static;
        inline-size: auto;
        block-size: auto;
        clip: auto;
        clip-path: none;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        font-size: 14px;
    }

    .plano-pase-tecla { display: none; }
}

/* ===================================================================================================================
   3. SUPERFICIES: canto fino, radio 12 y sombra mínima
   =================================================================================================================== */

.plano-zona,
.admin-tarjeta,
.locales-atajo,
.documento-tarjeta,
.salas-tarjeta,
.impresion-diseno-tarjeta {
    border: 1px solid var(--limpia-borde);
    border-radius: var(--nitida-radio);
    box-shadow: var(--nitida-sombra-hoja);
}

.plano-caja {
    border: 1px solid var(--limpia-borde);
    border-radius: var(--nitida-radio);
    box-shadow: var(--nitida-sombra-hoja);
}

/* La zona del alta de producto dibujaba su muro con una sombra interior de 2 px. */
.alta-zona {
    border: 1px solid var(--limpia-borde);
    background-color: var(--limpia-hoja);
    box-shadow: var(--nitida-sombra-hoja);
}

/* La hoja lateral (y la que sube desde abajo en el teléfono): canto fino en vez de muro. */
.mud-dialog-centerright .mud-dialog {
    border-inline-start: 1px solid var(--limpia-borde);
    border-block-start: 0;
}

.acceso-formulario {
    border: 1px solid var(--limpia-borde);
    box-shadow: var(--nitida-sombra-flota);
}

.lista-hoja,
.hoy-cifra,
.hoy-local,
.analisis-cifra {
    box-shadow: var(--nitida-sombra-hoja);
}

.mud-dialog {
    border-radius: 16px;
    box-shadow: var(--nitida-sombra-flota) !important; /* Mud escribe la suya en .mud-dialog.mud-paper (plano.css §7.8). */
}

.mud-dialog-title { padding-block: 18px 8px; }
.mud-dialog-actions { gap: 8px; }

.mud-popover { border-radius: 10px; }

/* LOS AVISOS EMERGENTES, OPACOS. Eran una aguada al 14-18 % sobre lo que hubiera debajo: el texto del aviso se leía
   montado encima del de la página («Aún sin vAlmacenes y compras…»). Ahora, el fondo sólido del tono. */
.mud-snackbar {
    border: 1px solid var(--limpia-borde);
    border-radius: 10px;
    background-color: var(--limpia-hoja);
    color: var(--limpia-tinta);
    box-shadow: var(--nitida-sombra-flota);
}

.mud-snackbar.mud-alert-filled-success { background-color: var(--limpia-bien-fondo); color: var(--limpia-tinta); }
.mud-snackbar.mud-alert-filled-info { background-color: var(--limpia-morado-aguada); color: var(--limpia-tinta); }
.mud-snackbar.mud-alert-filled-warning { background-color: var(--limpia-aviso-fondo); color: var(--limpia-tinta); }
.mud-snackbar.mud-alert-filled-error { background-color: var(--limpia-error-fondo); color: var(--limpia-error-tinta); }

/* MIGAS Y «VOLVER» DICEN LO MISMO. En el escritorio se quedan las migas, que nombran también al abuelo; en el teléfono
   (§4.3) se queda «Volver», que es lo que se pulsa con el pulgar. */
@media (min-width: 720px) {
    .admin-cabecera:has(.admin-cabecera-migas) .admin-cabecera-volver { display: none; }
}

/* La cabecera de página: título algo más firme y menos aire debajo de la regla. */
.admin-cabecera-titulo { letter-spacing: -0.02em; }

/* ===================================================================================================================
   4. EL TELÉFONO
   =================================================================================================================== */

@media (max-width: 719.98px) {
    /* 4.1 CAMPOS A 16 PX. Safari amplía la página al enfocar un campo de menos de 16 px y no la devuelve: en cada
       formulario de la central el usuario tenía que pellizcar para volver. */
    input.mud-input-slot,
    textarea.mud-input-slot,
    .mud-select .mud-input-slot,
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="number"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="time"],
    select,
    textarea {
        font-size: 16px;
    }

    /* 4.2 MENOS PAPEL ALREDEDOR: el cuerpo pegado a 12 px del borde y 16 px arriba. */
    .plano-cuerpo { padding-inline: 12px; padding-block-start: 16px; }

    /* 4.3 LA CABECERA DE PÁGINA COMPACTA. La estrella y «recargar» iban en su propia fila con 60 px de aire vacío
       debajo del subtítulo en TODAS las pantallas. Ahora: migas y «Volver» arriba, el título con los iconos a su
       derecha, el subtítulo debajo a todo el ancho; y si hay botones con rótulo, en su fila al final. */
    .plano-cuerpo .admin-cabecera {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "migas migas"
            "volver volver"
            "titulo iconos"
            "sub sub"
            "acciones acciones";
        align-items: center;
        gap: 0 8px;
        padding-block-end: 12px;
        margin-block-end: 16px;
    }

    .plano-cuerpo .admin-cabecera > .admin-cabecera-texto { display: contents; }
    .plano-cuerpo .admin-cabecera-migas { grid-area: migas; margin-block-end: 2px; }
    .plano-cuerpo .admin-cabecera-volver { grid-area: volver; justify-self: start; margin-block-end: 2px; }

    /* Migas y «Volver» dicen lo mismo en un renglón de 360 px: se queda «Volver», que es lo que se pulsa. */
    .plano-cuerpo .admin-cabecera:has(.admin-cabecera-volver) .admin-cabecera-migas { display: none; }

    .plano-cuerpo .admin-cabecera-titulo,
    .plano-cuerpo .admin-cabecera-titulo-fila { grid-area: titulo; min-inline-size: 0; }
    .plano-cuerpo .admin-cabecera-titulo-fila > .admin-cabecera-titulo { grid-area: auto; }
    .plano-cuerpo .admin-cabecera-subtitulo { grid-area: sub; margin: 4px 0 0; max-inline-size: none; }

    .plano-cuerpo .admin-cabecera-titulo { font-size: 1.5rem; line-height: 1.2; overflow-wrap: anywhere; }

    /* Solo iconos (la estrella, recargar, «En vivo», el indicador de refresco): al lado del título. Se mira al revés
       —«no hay ningún hijo que no sea un icono»— porque los botones con rótulo no son todos MudButton. */
    .plano-cuerpo .admin-cabecera-acciones:not(:has(> :not(.mud-icon-button, .mud-tooltip-root, .hoy-en-vivo, .admin-refresco))) {
        grid-area: iconos;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-self: start;
        gap: 0;
        margin: 0;
        padding: 0;
        inline-size: auto;
    }

    /* Con botones de rótulo: toda la fila de acciones al final; plano.css ya deja los iconos a la derecha. */
    .plano-cuerpo .admin-cabecera-acciones:has(> :not(.mud-icon-button, .mud-tooltip-root, .hoy-en-vivo, .admin-refresco)) {
        grid-area: acciones;
        margin-block-start: 12px;
        flex-wrap: wrap;
        gap: 8px;
    }

    .admin-cabecera-acciones .mud-icon-button { inline-size: 40px; block-size: 40px; }

    /* 4.4 LA BARRA DE LAS LISTAS EN DOS FILAS: el buscador a todo el ancho arriba (antes se leía «Buscar y»), y
       debajo «Filtrar y ordenar», el resto y «Nuevo» al final. */
    .crud-lista .crud-barra { flex-wrap: wrap; gap: 8px; }
    .crud-lista .crud-barra .crud-buscador-caja { order: 0; flex: 1 1 100%; max-inline-size: none; }
    .crud-lista .crud-barra .filtro-movil { order: 1; }
    .crud-lista .crud-barra .crud-barra-mas { order: 2; }
    .crud-lista .crud-barra .crud-nuevo { order: 3; margin-inline-start: auto; }
    .crud-lista .crud-barra :is([data-testid="exportar"], .crud-exportar) { order: 2; }
    .crud-lista .crud-barra .lista-filtros { order: 4; }

    /* 4.5 LAS PASTILLAS EN UNA FILA QUE SE DESLIZA. En «Análisis» los once locales eran ocho renglones de botones
       antes de la primera cifra. */
    .analisis-pastillas {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        scroll-snap-type: x proximity;
        margin-inline: -12px;
        padding-inline: 12px;
        padding-block: 2px;
        inline-size: calc(100% + 24px);
        max-inline-size: none;
        -webkit-mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
        mask-image: linear-gradient(to right, transparent 0, #000 12px, #000 calc(100% - 24px), transparent);
    }

    .analisis-pastillas::-webkit-scrollbar { display: none; }
    .analisis-pastilla { flex: none; white-space: nowrap; scroll-snap-align: start; }
    .analisis-rotulo { flex: none; white-space: nowrap; }
    .analisis-barra-fila { flex-direction: column; align-items: stretch; gap: 8px; }
    .analisis-rango-comparado { flex: none; white-space: nowrap; }

    /* 4.6 LAS CIFRAS DE DOS EN DOS (antes, en «Hoy», una por fila y tres pantallas de desplazamiento). */
    .hoy-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .hoy-cifras > .hoy-cifra:first-child:nth-last-child(odd) { grid-column: 1 / -1; }
    .hoy-cifra { padding: 10px 12px; }
    .hoy-cifra-valor { font-size: 22px; }

    .analisis-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .analisis-cifra { padding: 10px 12px; min-inline-size: 0; }
    .analisis-cifra-valor { font-size: 22px; overflow-wrap: anywhere; }

    /* 4.7 TABLAS SUELTAS (las que no pasan por la lista común): se desplazan dentro de su caja en vez de aplastar
       las columnas o ensanchar la página. */
    .mud-table-container,
    .mud-table-root,
    .admin-tabla:not(.crud-tabla) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    main td.mud-table-cell { padding-inline: 10px; }

    /* 4.8 LOS DIÁLOGOS CENTRADOS, A PANTALLA COMPLETA: con el teclado abierto, un diálogo de 90 % de alto dejaba el
       botón de aceptar debajo del teclado. */
    .mud-dialog-container:not(.mud-dialog-centerright):not(.mud-dialog-bottomcenter) .mud-dialog:not(.mud-dialog-width-xs) {
        inline-size: 100%;
        max-inline-size: 100%;
        max-block-size: 100dvh;
        block-size: 100dvh;
        margin: 0;
        border-radius: 0;
        display: flex;
        flex-direction: column;
    }

    .mud-dialog-container:not(.mud-dialog-centerright):not(.mud-dialog-bottomcenter) .mud-dialog:not(.mud-dialog-width-xs) .mud-dialog-content {
        flex: 1 1 auto;
        overflow-y: auto;
    }

    .mud-dialog-container:not(.mud-dialog-centerright):not(.mud-dialog-bottomcenter) .mud-dialog:not(.mud-dialog-width-xs) .mud-dialog-actions {
        position: sticky;
        inset-block-end: 0;
        padding-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
        background-color: var(--limpia-hoja);
    }

    .mud-dialog-actions { flex-wrap: wrap; justify-content: flex-end; }

    /* 4.9 Pestañas de Mud (fuera de la ficha): se deslizan en una fila con la barra de desplazamiento escondida. */
    .mud-tabs-tabbar-wrapper { scrollbar-width: none; }
}

/* El buscador de las listas, alineado con los botones de su barra (Mud le pone 4 px de margen arriba). */
.crud-lista .crud-barra { align-items: flex-start; }
.crud-lista .crud-barra .crud-buscador.mud-input-control { margin-block-start: 0; }