/* ═══════════════════════════════════════════════════════════════════════════════
   Portal MapiPOS ToGo — lenguaje «fluido»

   Superficie gris agrupada con contenido blanco flotante, separadores de medio
   pixel, barras de material translúcido y una sola cifra que manda por pantalla.
   Los NOMBRES de token son los que ya usaba el portal (todo el CSS y el marcado
   los referencia); lo que cambia es su valor y su papel.
   ═══════════════════════════════════════════════════════════════════════════════ */

:root {
    /* ── Superficies ─────────────────────────────────────────────────────────── */
    --fondo:        #f2f2f7;                    /* gris agrupado, ya no blanco */
    --papel:        #ffffff;                    /* el contenido flota sobre el gris */
    --papel-rgb:    255 255 255;                /* el mismo, para degradados que se desvanecen */
    --papel-lavado: rgba(255,255,255,.62);      /* tarjeta de contexto: papel a media voz */
    --panel2:       rgba(118,118,128,.12);      /* relleno secundario translúcido */
    --material:     rgba(242,242,247,.80);
    --superficie-alta: rgba(118,118,128,.18);

    /* ── Texto: etiquetas translúcidas, no grises opacos ─────────────────────── */
    /* Las opacidades de iOS (.72 / .60) NO llegan a 4.5:1 — dan 4.47 y 3.29 sobre el gris
       agrupado. Como el propio lenguaje exige ese contraste, se suben al mínimo que lo
       cumple sobre AMBOS fondos, conservando la jerarquía de tres niveles. Medido, no
       estimado: 17.0 / 7.6 / 5.3 sobre blanco; 15.3 / 6.9 / 5.0 sobre #f2f2f7. */
    --tinta:        #1c1c1e;
    --tinta-suave:  rgba(60,60,67,.88);
    --tenue:        rgba(60,60,67,.76);
    --linea:        rgba(60,60,67,.18);         /* separador de medio pixel */
    --borde-control: rgba(60,60,67,.28);

    /* ── Marca (lo único que cambia entre apps del ecosistema) ───────────────── */
    --acento:        #0071b3;                   /* texto y enlaces */
    --acento-relleno: #0071b3;                  /* relleno del botón principal */
    --sobre-acento:  #ffffff;                   /* la tinta que va encima de ese relleno */
    --acento-fuerte: #005aaa;
    --acento-suave:  rgba(0,113,179,.12);
    --sobre-acento-suave: #005aaa;
    --bien:  #1c7d45;   --bien-suave:  rgba(28,125,69,.13);   --sobre-bien:  #155f34;
    --bajo:  #c0392b;   --bajo-suave:  rgba(192,57,43,.12);   --sobre-bajo:  #962d22;
    --aviso: #a15818;   --aviso-suave: rgba(161,88,24,.14);   --sobre-aviso: #7d4413;

    /* ── Datos: el primario de marca, validado para gráficas ─────────────────── */
    --dato:        #0071b3;
    --dato-2:      #a15818;
    --dato-lavado: rgba(0,113,179,.10);
    --guia:        rgba(60,60,67,.10);
    --abc-a: #00456e;  --abc-b: #0071b3;  --abc-c: #57a3d4;

    /* ── Tipografía del sistema ──────────────────────────────────────────────── */
    --font-sans: -apple-system, 'SF Pro Text', 'Segoe UI Variable', system-ui, sans-serif;
    --texto-meta:   .8125rem;
    --texto-base:   1rem;
    --texto-sub:    1.0625rem;
    --texto-titulo: 1.375rem;
    --texto-cifra:  2.75rem;

    /* ── Forma ───────────────────────────────────────────────────────────────── */
    --radius-pieza:   14px;
    --radius-boton:   16px;
    --radius-tarjeta: 18px;
    --radio:          18px;    /* alias histórico: los paneles son tarjetas */

    /* ── Elevación: sombra difusa, nunca borde + sombra dura ─────────────────── */
    --sombra:   0 1px 2px rgb(16 24 40 / .05), 0 10px 26px -18px rgb(16 24 40 / .28);
    --sombra-2: 0 2px 6px rgb(16 24 40 / .08), 0 -8px 40px rgb(16 24 40 / .18);

    /* La flecha del select se dibuja aquí para poder cambiarla de color con el esquema. */
    --flecha-campo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%233c3c43' stroke-opacity='.6' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");

    /* Que los controles del sistema (selects, scrollbars, el teclado de iOS) sigan al esquema. */
    color-scheme: light dark;
}

/* ═══ MODO OSCURO ════════════════════════════════════════════════════════════════
   Una app del sistema sigue la apariencia del sistema: en la bodega a las 11 de la
   noche, una lámina blanca deslumbra y delata que esto es una página.

   No es el claro invertido. Es el esquema agrupado oscuro de iOS: fondo NEGRO y
   tarjetas #1c1c1e —la jerarquía la da la claridad de la superficie, no la sombra,
   así que las sombras se apagan y queda un aro de medio pixel—. Los colores de
   estado suben de luminosidad porque el mismo verde que se lee sobre blanco
   desaparece sobre negro.

   Todos estos pares están MEDIDOS sobre sus dos fondos (tarjeta y fondo), como los
   del claro: tinta 17.0, tinta-suave 10.9, tenue 7.6 (5.9 sobre el renglón abierto),
   acento 7.9, blanco sobre el relleno del botón 5.3, y las insignias 5.5 a 7.8.
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (prefers-color-scheme: dark) {
    :root {
        --fondo:        #000000;
        --papel:        #1c1c1e;
        --papel-rgb:    28 28 30;
        --papel-lavado: rgba(255,255,255,.04);
        --panel2:       rgba(118,118,128,.24);
        --material:     rgba(28,28,30,.82);
        --superficie-alta: rgba(118,118,128,.36);

        --tinta:        #ffffff;
        --tinta-suave:  rgba(235,235,245,.86);
        --tenue:        rgba(235,235,245,.70);
        --linea:        rgba(84,84,88,.70);
        --borde-control: rgba(235,235,245,.35);

        /* El azul de marca se aclara para LEERSE sobre oscuro; el RELLENO del botón se
           queda oscuro, porque ahí lo que tiene que contrastar es el blanco de encima. */
        --acento:        #6cb8ef;
        --acento-relleno: #0a6ebd;
        --sobre-acento:  #ffffff;
        --acento-fuerte: #0a5f9f;
        --acento-suave:  rgba(108,184,239,.18);
        --sobre-acento-suave: #9fd0f5;

        --bien:  #4ade80;   --bien-suave:  rgba(48,209,88,.20);   --sobre-bien:  #7ceb96;
        --bajo:  #ff6f65;   --bajo-suave:  rgba(255,69,58,.20);   --sobre-bajo:  #ff8078;
        --aviso: #ffb340;   --aviso-suave: rgba(255,159,10,.20);  --sobre-aviso: #ffb340;

        --dato:        #5cb0e6;
        --dato-2:      #ffb340;
        --dato-lavado: rgba(92,176,230,.16);
        --guia:        rgba(235,235,245,.14);
        --abc-a: #0a6ebd;  --abc-b: #3d97d8;  --abc-c: #8ec6ef;

        /* Sobre negro una sombra no se ve: la separación la hace el aro. */
        --sombra:   0 0 0 .5px rgba(255,255,255,.07);
        --sombra-2: 0 0 0 .5px rgba(255,255,255,.09), 0 -10px 40px rgb(0 0 0 / .65);

        --flecha-campo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23ebebf5' stroke-opacity='.7' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    }

    /* El logo es un PNG sin transparencia: sobre negro sería un recuadro blanco pegado. Redondeado
       se lee como la TESELA de un icono de app, que es lo que de verdad es. */
    .marca-logo { border-radius: 6px; }
    .entrar-logo { border-radius: 16px; }
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: var(--texto-base);
    background: var(--fondo);
    color: var(--tinta);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

a { color: var(--acento); text-decoration: none; }

/* ── Utilidades ──────────────────────────────────────────────────────────────── */

/* Material de las barras. Respaldo primero: si no hay backdrop-filter, queda
   OPACO — nunca translúcido dejando ver el contenido por debajo. */
.material { background: var(--fondo); }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .material {
        background: var(--material);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
    }
}

.hairline { height: .5px; background: var(--linea); }

@keyframes scrIn { from { opacity: 0; transform: translate3d(0,10px,0) scale(.988) } to { opacity: 1; transform: none } }
.entra { animation: scrIn .36s cubic-bezier(.32,.72,0,1); }

/* Presión física en vez de capa de opacidad: lo que se toca se hunde. */
.estado, .boton, .boton-plano, .menu a, .mas-lista a, .mas > summary,
.tabla-datos > summary, .barra-fila {
    transition: transform .2s cubic-bezier(.32,.72,0,1), background-color .15s;
}
.estado:active, .boton:active, .boton-plano:active,
.menu a:active, .mas-lista a:active, .mas > summary:active:active { transform: scale(.978); }

.num { text-align: right; font-variant-numeric: tabular-nums; }
.tenue { color: var(--tenue); font-size: .92em; }
.sube { color: var(--bien); }
.baja { color: var(--bajo); }

/* ── Barra superior: material, no superficie opaca con sombra ────────────────── */

.barra {
    display: flex; align-items: center; gap: 1.25rem;
    padding-left: max(1.25rem, env(safe-area-inset-left));
    padding-right: max(1.25rem, env(safe-area-inset-right));
    height: 56px;
    position: sticky; top: 0; z-index: 10;
    padding-top: env(safe-area-inset-top);
    height: calc(56px + env(safe-area-inset-top));
    box-shadow: inset 0 -.5px 0 var(--linea);
    background: var(--fondo);      /* respaldo opaco */
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .barra {
        background: var(--material);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
    }
}

.marca { display: flex; align-items: center; gap: .55rem; color: inherit; min-width: 0; }
.marca-logo { height: 28px; width: auto; flex: none; }
.marca-texto { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.marca-texto strong { font-size: var(--texto-meta); font-weight: 600; letter-spacing: -.01em;
                      overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marca-texto small { color: var(--tenue); font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em; }

/* Sin overflow a propósito: un contenedor que se desplaza recorta los desplegables absolutos
   (el menú «Más» se abría vacío). Con Tablero, Corte y tres menús la barra cabe. */
.menu { display: flex; align-items: center; gap: .15rem; flex: 1; min-width: 0; }
.menu a, .mas-lista a {
    padding: .4rem .7rem; border-radius: var(--radius-pieza);
    color: var(--tinta-suave); font-weight: 500; font-size: .9375rem; white-space: nowrap;
}
.menu a:hover, .mas-lista a:hover { background: var(--panel2); color: var(--tinta); }
.menu a.active, .mas-lista a.active { background: var(--acento-suave); color: var(--sobre-acento-suave); font-weight: 600; }

.barra-fin { display: flex; align-items: center; gap: .6rem; margin: 0; }
.usuario { color: var(--tenue); font-size: var(--texto-meta); white-space: nowrap; }

.boton-plano {
    background: var(--panel2); border: 0; border-radius: var(--radius-pieza);
    padding: .5rem .85rem; color: var(--acento); cursor: pointer;
    font: inherit; font-size: .9375rem; font-weight: 500; min-height: 34px;
}
.boton-plano:hover { background: var(--superficie-alta); }

/* Un botón plano que abre algo: el mismo chevron que la hoja del menú, girando 90°. El triángulo
   de texto (▸) no gira, cambia de forma en cada plataforma y VoiceOver lo lee como «triángulo
   negro apuntando a la derecha». */
.boton-plano.con-chevron { display: inline-flex; align-items: center; gap: .35rem; }
.boton-plano.con-chevron .chevron {
    width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
    stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
}
.boton-plano.con-chevron.abierto .chevron { transform: rotate(90deg); }

.contenido {
    padding: 1.25rem max(1.25rem, env(safe-area-inset-right)) calc(3rem + env(safe-area-inset-bottom))
             max(1.25rem, env(safe-area-inset-left));
    max-width: 1180px; margin: 0 auto;
}

/* ── Cabecera de dos líneas ──────────────────────────────────────────────────── */

.titulo-pagina {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem;
}
.titulo-pagina h1 {
    font-size: var(--texto-titulo); font-weight: 700; letter-spacing: -.02em;
    margin: 0; line-height: 1.15;
}
/* Dos líneas: el contexto ARRIBA en versalitas tenues, el título abajo. */
.titulo-pagina > div {
    display: flex; flex-direction: column; align-items: flex-start;
    gap: .1rem; flex-wrap: wrap;
}
.titulo-pagina .sub, .titulo-pagina .en-vivo { order: -1; }
.titulo-pagina .sub {
    color: var(--tenue); font-size: .6875rem;
    text-transform: uppercase; letter-spacing: .05em; font-weight: 600;
}

/* ── Superficies de contenido: blancas, flotantes, SIN borde ─────────────────── */

.panel {
    background: var(--papel); border-radius: var(--radius-tarjeta);
    box-shadow: var(--sombra); margin-bottom: 1.1rem; overflow: hidden;
}
.panel > h2 {
    font-size: var(--texto-sub); font-weight: 600; letter-spacing: -.01em;
    margin: 0; padding: .9rem 1.1rem .55rem;
}
.panel-cuerpo { padding: 1.1rem; }
.panel-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem; margin-bottom: 1.1rem; }
/* Una tarjeta que es enlace (las operaciones de Movimientos). */
a.tarjeta-enlace { text-decoration: none; color: inherit; display: block; }
a.tarjeta-enlace:hover .etiqueta { color: var(--acento); }
/* Con quién se mueve el inventario, arriba de las operaciones. */
.sesion-movimientos { display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; margin-bottom: 1rem; color: var(--tenue); }
/* Un subtítulo entre bloques de tarjetas (el mes en el tablero). */
.titulo-seccion { font-size: var(--texto-sub); font-weight: 600; letter-spacing: -.01em; margin: 1.3rem 0 .6rem; }
.tarjeta {
    background: var(--papel); border-radius: var(--radius-tarjeta);
    box-shadow: var(--sombra); padding: .95rem 1.05rem;
}
.tarjeta .etiqueta {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tenue); font-weight: 600;
}
.tarjeta .cifra {
    font-size: 1.5rem; font-weight: 700; letter-spacing: -.025em; margin-top: .25rem;
}
.tarjeta .pie { font-size: var(--texto-meta); color: var(--tenue); margin-top: .15rem; }
.tarjeta-contexto { background: var(--papel-lavado); box-shadow: none; }
.tarjeta-contexto .cifra { color: var(--tinta-suave); }
.delta { font-weight: 600; }

/* ── La cifra que manda: sin caja, sin tabular-nums (se ve suelta a este tamaño) ─ */

.hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: .9rem; margin-bottom: 1.1rem; }
.hero-cifra {
    background: var(--papel); border-radius: var(--radius-tarjeta); box-shadow: var(--sombra);
    padding: 1.35rem 1.4rem; display: flex; flex-direction: column; justify-content: center;
}
.hero-cifra .etiqueta {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tenue); font-weight: 600;
}
.hero-cifra .cifra-hero {
    font-size: var(--texto-cifra); font-weight: 700; letter-spacing: -.035em;
    line-height: 1.05; margin: .3rem 0 .45rem;
}
.hero-cifra .pie { font-size: .9375rem; color: var(--tinta-suave); }
.hero-lado { display: grid; gap: .9rem; }
.hero-lado .tarjeta { margin: 0; }

/* ── Listas agrupadas: un solo blanco, separadores sangrados ─────────────────── */

table { width: 100%; border-collapse: collapse; font-size: .9375rem; }
th, td { text-align: left; padding: .7rem 1.1rem; white-space: nowrap; }
th {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tenue); font-weight: 600; padding-bottom: .45rem;
}
/* El separador se sangra hasta donde empieza el texto, no cruza la tarjeta entera. */
tbody tr + tr td { box-shadow: inset 0 .5px 0 var(--linea); }
tbody tr + tr td:first-child { box-shadow: inset 16px .5px 0 -15.5px var(--linea); }
tbody tr:hover { background: rgba(118,118,128,.06); }
tfoot td { box-shadow: inset 0 .5px 0 var(--borde-control); background: rgba(118,118,128,.05); font-weight: 500; }

.celda-nombre { display: block; }
.celda-sub { display: block; font-size: var(--texto-meta); color: var(--tenue); }

/* ── Campos: renglón de lista o pastilla, nunca subrayado flotante ───────────── */

.filtros { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; margin-bottom: 1.1rem; }
.campo { display: flex; flex-direction: column; gap: .3rem; }
.campo label {
    font-size: .6875rem; text-transform: uppercase; letter-spacing: .05em;
    color: var(--tenue); font-weight: 600;
}
.campo input, .campo select {
    border: 0; background: var(--panel2); color: var(--tinta);
    border-radius: var(--radius-pieza); padding: .6rem .8rem;
    font: inherit; font-size: 16px;              /* 16 px: menos, y iOS hace zoom */
    min-height: 48px; min-width: 160px;
    appearance: none; -webkit-appearance: none;
}
.campo select {
    background-image: var(--flecha-campo);
    background-repeat: no-repeat; background-position: right .8rem center; padding-right: 2.2rem;
}
.campo input:focus, .campo select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.ayuda { font-size: var(--texto-meta); color: var(--tenue); margin-top: .1rem; }
.ayuda em { font-style: normal; color: var(--acento); }

.boton {
    background: var(--acento-relleno); color: var(--sobre-acento); border: 0; border-radius: var(--radius-boton);
    padding: .7rem 1.15rem; font: inherit; font-size: var(--texto-base); font-weight: 600;
    cursor: pointer; min-height: 48px;
}
.boton:hover { background: var(--acento-fuerte); }
.boton:disabled { opacity: .5; cursor: default; }
.boton-bloque { display: block; width: 100%; text-align: center; text-decoration: none; margin-top: 1rem; }
/* Un enlace con cara de botón (Nuevo artículo): sin subrayado y con la misma altura. */
a.boton { display: inline-flex; align-items: center; text-decoration: none; }
/* La celda de un código equivalente, más ancha que las de cantidades. */
.tabla-edicion input.ancho-codigo { width: 14rem; text-align: left; }
.tabla-edicion input[type="checkbox"] { width: 22px; height: 22px; min-height: 0; padding: 0; accent-color: var(--acento); }
.tabla-edicion select {
    border: 0; background: var(--panel2); color: var(--tinta); border-radius: 10px;
    padding: .45rem .6rem; font: inherit; font-size: 16px; min-height: 44px; min-width: 12rem;
}
.tabla-edicion select:focus { outline: 2px solid var(--acento); outline-offset: 1px; }

/* ── Avisos ──────────────────────────────────────────────────────────────────── */

.aviso { padding: .85rem 1rem; border-radius: var(--radius-pieza); margin-bottom: 1.1rem; font-size: .9375rem; }
.aviso-error { background: var(--bajo-suave); color: var(--sobre-bajo); }
.aviso-info  { background: var(--acento-suave); color: var(--sobre-acento-suave); }
/* Los botones de una pregunta de la central («¿Guardar así?»), debajo del texto. */
.acciones-aviso { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: .6rem; }

.vacio, .cargando { padding: 2.5rem 1.1rem; text-align: center; color: var(--tenue); font-size: .9375rem; }
.nota { color: var(--tenue); font-size: var(--texto-meta); margin: -.5rem 0 1.1rem; }
.nota-grafica { font-size: var(--texto-meta); color: var(--tenue); margin: .6rem 0 0; }

/* ── Gráficas ────────────────────────────────────────────────────────────────── */

.grafica { margin: 0; }
.grafica figcaption { font-size: var(--texto-sub); font-weight: 600; letter-spacing: -.01em; padding: 0 0 .8rem; }

.grafica-cuerpo { display: flex; align-items: stretch; gap: .5rem; }
.ejey { position: relative; width: 52px; flex: none; }
.ejey-tick {
    position: absolute; right: 0; transform: translateY(50%);
    font-size: .6875rem; color: var(--tenue); font-variant-numeric: tabular-nums;
}
.lienzo { width: 100%; height: 200px; display: block; overflow: visible; flex: 1; }
.lienzo .col { fill: var(--dato); }
.lienzo .col-alta { fill: var(--dato-2); }
.lienzo .guia { stroke: var(--guia); stroke-width: 1; }
.lienzo .base { stroke: var(--linea); stroke-width: 1; }
.lienzo .zona { fill: transparent; }
.lienzo .marca:hover .zona { fill: rgba(0,113,179,.06); }
.lienzo .marca:hover .col { fill: var(--acento-fuerte); }

.ejex { display: flex; margin-top: .35rem; padding-left: 60px; }
.ejex-item { flex: 1; text-align: center; font-size: .6875rem; color: var(--tenue);
             white-space: nowrap; overflow: hidden; font-variant-numeric: tabular-nums; }

.linea-actual { fill: none; stroke: var(--dato); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.linea-previo { fill: none; stroke: rgba(60,60,67,.28); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.area-actual { fill: var(--dato-lavado); stroke: none; }
.punto-actual { fill: var(--dato); stroke: var(--papel); stroke-width: 2; }

.leyenda { display: flex; gap: 1.1rem; margin-bottom: .7rem; }
.leyenda-item { display: inline-flex; align-items: center; gap: .4rem; font-size: var(--texto-meta); color: var(--tinta-suave); }
.leyenda-marca { width: 14px; height: 3px; border-radius: 2px; flex: none; }
.leyenda-marca.marca-actual { background: var(--dato); }
.leyenda-marca.marca-previo { background: rgba(60,60,67,.28); }

/* Barras horizontales */
.barras { display: flex; flex-direction: column; }
.barra-fila {
    display: grid; grid-template-columns: minmax(90px, 26%) 1fr auto;
    align-items: center; gap: .75rem; padding: .5rem 0;
}
.barra-fila + .barra-fila { box-shadow: inset 0 .5px 0 var(--linea); }
.barra-nombre { font-size: .9375rem; color: var(--tinta-suave); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.barra-carril { background: var(--panel2); border-radius: 5px; height: 18px; overflow: hidden; }
.barra-marca { height: 100%; background: var(--dato); border-radius: 0 5px 5px 0; min-width: 3px; transition: width .3s cubic-bezier(.32,.72,0,1); }
.barra-valor { font-size: .9375rem; font-variant-numeric: tabular-nums; font-weight: 500; white-space: nowrap; }

/* Tabla de respaldo */
.tabla-datos { margin-top: .8rem; }
.tabla-datos > summary {
    cursor: pointer; font-size: .9375rem; color: var(--acento); list-style: none;
    padding: .5rem 0; min-height: 44px; display: flex; align-items: center;
}
.tabla-datos > summary::-webkit-details-marker { display: none; }
.tabla-datos > summary::before { content: "›"; display: inline-block; margin-right: .4rem; transition: transform .2s; }
.tabla-datos[open] > summary::before { transform: rotate(90deg); }
.tabla-datos table { margin-top: .4rem; font-size: var(--texto-meta); }
.tabla-datos th, .tabla-datos td { padding: .45rem .7rem; }

/* Composición apilada */
.apilada { display: flex; gap: 2px; height: 26px; border-radius: 7px; overflow: hidden; background: var(--panel2); }
.apilada-parte { height: 100%; transition: width .3s cubic-bezier(.32,.72,0,1); }
.apilada-parte.clase-a { background: var(--abc-a); }
.apilada-parte.clase-b { background: var(--abc-b); }
.apilada-parte.clase-c { background: var(--abc-c); }
.apilada-leyenda { display: flex; flex-wrap: wrap; gap: 1.1rem; margin-top: .8rem; font-size: var(--texto-meta); }
.leyenda-cuadro { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.leyenda-cuadro.clase-a { background: var(--abc-a); }
.leyenda-cuadro.clase-b { background: var(--abc-b); }
.leyenda-cuadro.clase-c { background: var(--abc-c); }

/* Pastillas: el desglose deja de ser lista */
.pastilla { display: inline-block; padding: .12rem .5rem; border-radius: 999px; font-size: .6875rem; font-weight: 700; color: #fff; }
.pastilla.clase-a { background: var(--abc-a); }
.pastilla.clase-b { background: var(--abc-b); }
.pastilla.clase-c { background: var(--abc-c); color: #0b2f4a; }   /* su fondo es claro en los dos esquemas */

/* ── Medidores ───────────────────────────────────────────────────────────────── */

.medidor { padding: .9rem 0; }
.medidor + .medidor { box-shadow: inset 0 .5px 0 var(--linea); }
.medidor-cabeza { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin-bottom: .5rem; }
.medidor-nombre { font-weight: 600; font-size: .9375rem; }
.medidor-cifra { font-variant-numeric: tabular-nums; font-size: .9375rem; }
.medidor-de { color: var(--tenue); font-weight: 400; }
.medidor-carril { position: relative; height: 12px; background: var(--panel2); border-radius: 999px; overflow: hidden; }
.medidor-relleno { height: 100%; background: var(--dato); border-radius: 999px; transition: width .3s cubic-bezier(.32,.72,0,1); }
.medidor-relleno.estado-bien { background: var(--bien); }
.medidor-relleno.estado-aviso { background: var(--aviso); }
.medidor-relleno.estado-bajo { background: var(--bajo); }
.medidor-ritmo { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--tinta); opacity: .4; }
.medidor-pie { font-size: var(--texto-meta); margin-top: .4rem; }
.medidor-pie .estado-bien { color: var(--bien); font-weight: 600; }
.medidor-pie .estado-aviso { color: var(--aviso); font-weight: 600; }
.medidor-pie .estado-bajo { color: var(--bajo); font-weight: 600; }
.medidor-acciones { display: flex; gap: .5rem; align-items: center; margin: -.2rem 0 .8rem; }
.meta-input {
    width: 130px; text-align: right; border: 0; background: var(--panel2);
    border-radius: var(--radius-pieza); padding: .5rem .7rem; font: inherit; font-size: 16px; min-height: 44px;
}

/* ── Menú «Más» y menú móvil ─────────────────────────────────────────────────── */

.mas { position: relative; flex: none; }
.mas > summary {
    list-style: none; cursor: pointer; padding: .4rem .7rem; border-radius: var(--radius-pieza);
    color: var(--tinta-suave); font-weight: 500; font-size: .9375rem; white-space: nowrap;
}
.mas > summary::-webkit-details-marker { display: none; }
.mas > summary::after { content: " ›"; display: inline-block; transform: rotate(90deg); font-size: .9em; }
.mas > summary:hover, .mas[open] > summary { background: var(--panel2); color: var(--tinta); }
.mas > summary.activo { background: var(--acento-suave); color: var(--sobre-acento-suave); font-weight: 600; }
.mas-lista {
    position: absolute; top: calc(100% + .4rem); left: 0; z-index: 20;
    background: var(--papel); border-radius: var(--radius-tarjeta);
    box-shadow: var(--sombra), 0 20px 40px -20px rgb(16 24 40 / .3);
    padding: .35rem; min-width: 200px; display: flex; flex-direction: column;
}
.mas-lista a { padding: .6rem .7rem; border-radius: var(--radius-pieza); font-size: .9375rem; }
.mas-grupo { display: flex; flex-direction: column; min-width: 0; }
.mas-titulo {
    padding: .55rem .7rem .3rem; font-size: .6875rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--tenue);
}
.mas:not(.mas-ancho) .mas-grupo + .mas-grupo { margin-top: .3rem; padding-top: .2rem; box-shadow: inset 0 .5px 0 var(--linea); }

/* Reportes: el desplegable toma el ancho de la barra (su bloque contenedor, por el sticky) y
   pone un área por columna; en una ventana angosta las columnas bajan solas. */
.mas-ancho { position: static; }
.mas-ancho > .mas-lista {
    top: calc(100% + .1rem); left: 1.25rem; right: 1.25rem; max-width: 1040px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .1rem .4rem;
}


/* ── Indicador en vivo ───────────────────────────────────────────────────────── */

.en-vivo {
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .6875rem; font-weight: 600; color: var(--bien);
    background: var(--bien-suave); border-radius: 999px; padding: .15rem .55rem;
    margin-left: .5rem; vertical-align: middle;
}
.en-vivo-punto { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.en-vivo:not(.en-vivo-off) .en-vivo-punto { animation: latido 2s ease-in-out infinite; }
.en-vivo-off { color: var(--tenue); background: var(--panel2); }
@keyframes latido { 0%, 100% { opacity: 1 } 50% { opacity: .35 } }

/* ── Entrar / activar ────────────────────────────────────────────────────────── */

.entrar-fondo {
    min-height: 100vh; min-height: 100dvh; display: grid; place-items: center;
    padding: calc(1.5rem + env(safe-area-inset-top)) max(1.25rem, env(safe-area-inset-right))
             calc(1.5rem + env(safe-area-inset-bottom)) max(1.25rem, env(safe-area-inset-left));
}
.entrar-caja {
    background: var(--papel); border-radius: 22px; box-shadow: var(--sombra);
    padding: 2rem 1.75rem; width: 100%; max-width: 390px;
}
.entrar-logo { display: block; height: 96px; width: auto; margin: 0 auto 1.35rem; }
.entrar-caja h1 { font-size: var(--texto-titulo); font-weight: 700; letter-spacing: -.02em; margin: 0 0 .3rem; text-align: center; }
.entrar-caja .sub { color: var(--tenue); font-size: .9375rem; margin: 0 0 1.5rem; text-align: center; display: block; }
.entrar-caja .campo { margin-bottom: .8rem; }
.entrar-caja .campo input { width: 100%; }
.entrar-caja .boton { width: 100%; margin-top: .6rem; }
.entrar-pie { text-align: center; color: var(--tenue); font-size: var(--texto-meta); margin-top: 1.25rem; }

.separador { display: flex; align-items: center; gap: .75rem; margin: 1.35rem 0 1.1rem; color: var(--tenue); font-size: var(--texto-meta); }
.separador::before, .separador::after { content: ""; flex: 1; height: .5px; background: var(--linea); }

/* ── Error de Blazor ─────────────────────────────────────────────────────────── */

#blazor-error-ui {
    background: var(--aviso-suave); color: var(--sobre-aviso);
    bottom: 0; left: 0; width: 100%; position: fixed; z-index: 1000;
    display: none; padding: .85rem 1.25rem calc(.85rem + env(safe-area-inset-bottom));
    box-shadow: var(--sombra-2); font-size: .9375rem;
}
#blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 1rem; top: .8rem; }

/* ═══════════════════════════════════════════════════════════════════════════════
   MÓVIL
   ═══════════════════════════════════════════════════════════════════════════════ */

/* ── Ficha de artículo (editor) ──────────────────────────────────────────────── */

.ficha-rejilla {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: .9rem 1rem; align-items: end;
}
.ficha-rejilla .campo input, .ficha-rejilla .campo select { min-width: 0; width: 100%; }
.campo-doble { grid-column: span 2; }
.campo-ancho { flex: 1 1 280px; }
.campo-ancho input { width: 100%; }
.campo input:disabled, .campo select:disabled { opacity: .55; cursor: default; }

.casillas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .1rem 1rem; }
.casilla {
    display: flex; align-items: center; gap: .65rem; min-height: 48px;   /* toda la fila se toca */
    cursor: pointer; font-size: var(--texto-base); color: var(--tinta);
}
.casilla input { width: 22px; height: 22px; flex: none; accent-color: var(--acento); margin: 0; }
.casilla input:disabled + span { color: var(--tenue); }

.con-boton { display: flex; gap: .5rem; }
.con-boton input { flex: 1; min-width: 0; }
.sugerencias {
    list-style: none; margin: .35rem 0 0; padding: 0; max-height: 260px; overflow-y: auto;
    background: var(--papel); border-radius: var(--radius-pieza);
    box-shadow: 0 0 0 .5px var(--linea), 0 8px 24px rgba(0,0,0,.08);
}
.sugerencias button {
    display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
    padding: .7rem .9rem; min-height: 44px; font: inherit; font-size: .9375rem; color: var(--tinta);
}
.sugerencias li + li button { box-shadow: inset 0 .5px 0 var(--linea); }
.sugerencias button:hover { background: var(--panel2); }

.tabla-edicion input {
    border: 0; background: var(--panel2); color: var(--tinta); border-radius: 10px;
    padding: .45rem .6rem; font: inherit; font-size: 16px; font-variant-numeric: tabular-nums;
    width: 7.5rem; min-height: 44px; text-align: right;
}
.tabla-edicion input:focus { outline: 2px solid var(--acento); outline-offset: 1px; }
.tabla-edicion input:disabled { opacity: .55; }

.dato-fijo { min-height: 48px; display: flex; align-items: center; font-variant-numeric: tabular-nums; }
.celda-enlace { display: block; color: inherit; text-decoration: none; }
.celda-enlace:hover .celda-nombre { color: var(--acento); }
.insignia {
    font-size: var(--texto-meta); color: var(--tenue); background: var(--panel2);
    border-radius: 999px; padding: .15rem .55rem; white-space: nowrap;
}
.aviso-bien { background: var(--bien-suave); color: var(--sobre-bien); }

/* Insignias con estado. El TEXTO dice qué es ("Vendida", "Vencida"); el color sólo acompaña, así
   que quien no distingue los tonos lee lo mismo. */
.insignia-bien { color: var(--sobre-bien); background: var(--bien-suave); }
.insignia-baja { color: var(--sobre-bajo); background: var(--bajo-suave); }
.insignia-aviso { color: var(--sobre-aviso); background: var(--aviso-suave); }

/* El detalle que se abre DEBAJO de su documento (Cotizaciones en detalle): los renglones del
   documento, en su propia tabla, sin el resaltado de renglón de la de arriba. */
.fila-detalle > td { padding: .2rem .6rem 1.1rem; box-shadow: none; background: var(--acento-suave); }
.fila-detalle:hover { background: var(--acento-suave); }
.tabla-anidada { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.tabla-anidada th, .tabla-anidada td { padding: .35rem .5rem; white-space: nowrap; }
.tabla-anidada thead th { font-size: var(--texto-meta); color: var(--tenue); font-weight: 600; text-align: left; }
.tabla-anidada tfoot th { border-top: 1px solid var(--linea); }

/* La respuesta que se teclea debajo de su renglón (Autorizaciones): el texto se parte y no se resalta al pasar. */
.fila-respuesta td { white-space: normal; padding-top: .2rem; padding-bottom: 1.1rem; box-shadow: none; }
.fila-respuesta:hover { background: none; }
.fila-respuesta .filtros { margin-bottom: .8rem; }

/* Guardar siempre a la mano: pegado abajo, con el mismo material que las barras. */
.barra-guardar {
    position: sticky; bottom: 0; z-index: 5;
    display: flex; align-items: center; justify-content: flex-end; gap: .6rem;
    margin: 1rem -1.25rem 0; padding: .75rem 1.25rem calc(.75rem + env(safe-area-inset-bottom));
    background: var(--fondo); box-shadow: inset 0 .5px 0 var(--linea);
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .barra-guardar {
        background: var(--material);
        backdrop-filter: blur(22px) saturate(180%);
        -webkit-backdrop-filter: blur(22px) saturate(180%);
    }
}
.estado-guardar { margin-right: auto; color: var(--tenue); font-size: var(--texto-meta); }

@media (max-width: 860px) {
    .menu { display: none; }
    .barra-fin { display: none; }       /* usuario, Ajustes y Salir van en la pestaña Cuenta */
    .barra { position: relative; }
    .barra { gap: .6rem; padding-left: max(.9rem, env(safe-area-inset-left)); padding-right: max(.9rem, env(safe-area-inset-right)); }
    .marca-texto small { display: none; }
    .usuario { display: none; }
    /* El contenido termina ARRIBA de la barra flotante, y la barra de guardar de la ficha también. */
    .contenido {
        padding: 1rem max(.9rem, env(safe-area-inset-right)) calc(6.5rem + env(safe-area-inset-bottom))
                 max(.9rem, env(safe-area-inset-left));
    }
    .barra-guardar { bottom: calc(5.4rem + env(safe-area-inset-bottom)); }
    .boton-plano { min-height: 48px; }
}

@media (max-width: 720px) {
    .hero { grid-template-columns: 1fr; gap: .75rem; }
    .hero-lado { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .hero-cifra { padding: 1.15rem 1.2rem; }
    .hero-cifra .cifra-hero { font-size: 2.4rem; }

    .tarjetas { grid-template-columns: 1fr 1fr; gap: .75rem; }
    .tarjeta { padding: .85rem .95rem; }
    .tarjeta .cifra { font-size: 1.3rem; }

    .filtros { flex-direction: column; align-items: stretch; gap: .6rem; }
    .filtros .campo { width: 100%; }
    .campo input, .campo select { width: 100%; }
    .boton { width: 100%; }

    .titulo-pagina h1 { font-size: 1.25rem; }
    .panel-cuerpo { padding: .95rem; }
    .panel > h2 { padding: .85rem .95rem .5rem; }
}

@media (max-width: 560px) {
    .campo-doble { grid-column: auto; }
    .barra-guardar { margin: 1rem -1rem 0; padding-left: 1rem; padding-right: 1rem; }
    .tabla-edicion input { width: 6.25rem; }
    .barra-fila {
        grid-template-columns: 1fr auto;
        grid-template-areas: "nombre valor" "barra barra";
        gap: .25rem .5rem; padding: .6rem 0;
    }
    .barra-nombre { grid-area: nombre; white-space: normal; }
    .barra-valor  { grid-area: valor; }
    .barra-carril { grid-area: barra; height: 12px; }

    .lienzo { height: 170px; }
    .ejey { width: 44px; }
    .ejex { padding-left: 50px; }

    .hero-lado { grid-template-columns: 1fr; }
    .hero-cifra .cifra-hero { font-size: 2.1rem; }
    .tarjetas { grid-template-columns: 1fr; }

    .panel-scroll { position: relative; }
    .panel-scroll::after {
        content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 24px;
        background: linear-gradient(to right, rgb(var(--papel-rgb) / 0), rgb(var(--papel-rgb) / .95));
        pointer-events: none;
    }
    table { font-size: .9375rem; }
    th, td { padding: .6rem .8rem; }

    .medidor-cabeza { flex-direction: column; align-items: flex-start; gap: .2rem; }
    .en-vivo { margin-left: 0; }
}

/* ── En el teléfono, la tabla ancha deja de ser tabla ────────────────────────────
   Una tabla de catorce columnas con scroll lateral es una superficie que un teléfono
   no tiene: se lee de reojo, se pierde el renglón y el dedo tapa la mitad. Con
   `tabla-lista` cada renglón se recompone como una FILA DE LISTA AGRUPADA —lo que
   identifica arriba a la izquierda, la cifra a la derecha, y lo demás debajo en
   pequeño— sin esconder un solo dato y sin duplicar marcado: los mismos <td>, con
   `data-campo` para los cuatro que mandan y `data-dato` para los que se van al pie
   con su etiqueta. Lo que vale cero se marca `vacio` y no se dibuja: una línea que
   dice «Descuento —» ocupa lo mismo que una que informa.
   A partir de 721px vuelve a ser la tabla de siempre, que en un escritorio sí se lee. */

.tabla-lista td.vacio, .tabla-lista th.vacio { display: none; }

@media (max-width: 720px) {
    .tabla-lista, .tabla-lista tbody, .tabla-lista tfoot { display: block; }
    .tabla-lista thead { display: none; }

    .tabla-lista tr {
        display: flex; flex-wrap: wrap; align-items: baseline;
        gap: .12rem .6rem; padding: .85rem 1.1rem;
    }
    .tabla-lista tbody tr + tr { box-shadow: inset 0 .5px 0 var(--linea); }
    .tabla-lista td, .tabla-lista th {
        padding: 0; white-space: normal; box-shadow: none; text-align: left;
        font-size: var(--texto-meta); color: var(--tinta-suave);
    }

    .tabla-lista [data-campo="principal"] { order: 1; flex: 0 1 auto; font-size: var(--texto-base); font-weight: 600; color: var(--tinta); }
    .tabla-lista [data-campo="cifra"]     { order: 2; margin-left: auto; text-align: right; font-size: var(--texto-base); font-weight: 700; color: var(--tinta); font-variant-numeric: tabular-nums; }
    .tabla-lista [data-campo="nombre"]    { order: 3; flex: 1 0 100%; font-size: .9375rem; color: var(--tinta); }
    .tabla-lista [data-campo="meta"]      { order: 4; flex: 1 0 100%; color: var(--tenue); }
    .tabla-lista [data-campo="estado"]    { order: 5; flex: 1 0 100%; margin-top: .3rem; }

    /* Los demás datos, con su nombre delante: sin encabezado no se sabría qué son. */
    .tabla-lista [data-dato]         { order: 6; color: var(--tinta-suave); }
    .tabla-lista [data-dato]::before { content: attr(data-dato) " "; color: var(--tenue); }

    /* El renglón abierto se tiñe COMPLETO. Con las celdas en flex, pintar cada <td> dejaba el
       fondo entre ellas sin teñir: se veía un parchado en vez de un renglón. */
    .tabla-lista tr.renglon-abierto { background: var(--acento-suave); }
    .tabla-lista tr.renglon-abierto > td { background: none; }

    .tabla-lista tfoot tr { background: var(--panel2); border-radius: var(--radius-pieza); margin: .4rem 1.1rem .1rem; padding: .7rem .9rem; }
    .tabla-lista tfoot th { font-weight: 600; text-transform: none; letter-spacing: 0; }
    .tabla-lista tfoot [data-campo="principal"] { flex: 1 1 auto; }
    /* Sin columnas no hay línea que rematar: el borde del pie salía como subrayados sueltos. */
    .tabla-lista tfoot th, .tabla-lista tfoot td { border-top: 0; }
    /* Nombre y clave comparten renglón: en bloque, la clave empezaba con un «·» suelto. */
    .tabla-lista .celda-nombre, .tabla-lista .celda-sub { display: inline; }
    .tabla-lista .celda-sub::before { content: " · "; }

    /* El folio es el TÍTULO del renglón, no una pastilla: en una lista de iOS lo que se toca es
       el renglón entero y el chevron sólo dice que hay más debajo. */
    .tabla-lista [data-campo="principal"] .boton-plano {
        background: none; padding: 0; min-height: 0;
        color: var(--tinta); font-size: var(--texto-base); font-weight: 600;
    }
    .tabla-lista [data-campo="principal"] .boton-plano:hover { background: none; color: var(--acento); }
    .tabla-lista [data-campo="principal"] .boton-plano .chevron { stroke: var(--tenue); }
    /* Sin scroll lateral no hace falta el velo que avisaba de él. */
    .tabla-lista ~ .panel-scroll::after, .panel-scroll:has(> .tabla-lista)::after { content: none; }
}

/* ── Los filtros, plegados en el teléfono ───────────────────────────────────────
   Nueve controles apilados empujan el primer número fuera de la pantalla: se abre la
   app para ver cuánto se vendió y lo que se ve son selects. En el teléfono la barra
   se guarda detrás de un renglón que dice qué está aplicado; en el escritorio, donde
   los filtros caben de lado, no cambia nada. */

.filtros-resumen { display: none; }

@media (max-width: 720px) {
    .filtros-resumen {
        display: flex; align-items: center; justify-content: space-between; gap: .6rem;
        width: 100%; min-height: 48px; margin-bottom: 1.1rem; padding: .6rem 1rem;
        background: var(--papel); border: 0; border-radius: var(--radius-pieza);
        box-shadow: var(--sombra); color: var(--tinta);
        font: inherit; font-size: .9375rem; text-align: left; cursor: pointer;
    }
    .filtros-resumen .etiqueta-filtros { color: var(--tenue); font-size: var(--texto-meta); display: block; }
    .filtros-resumen .chevron {
        width: 18px; height: 18px; flex: none; fill: none; stroke: var(--tenue);
        stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s;
    }
    .filtros-resumen.abierto .chevron { transform: rotate(90deg); }
    .filtros.plegable:not(.abiertos) { display: none; }
}

/* ── Menos movimiento: se apaga todo lo que se mueve ─────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .entra { animation: none; }
    .en-vivo .en-vivo-punto { animation: none; }
    .estado, .boton, .boton-plano, .menu a, .mas-lista a, .mas > summary,
    .barra-marca, .medidor-relleno, .apilada-parte, .tabla-datos > summary::before,
    .boton-plano.con-chevron .chevron, .filtros-resumen .chevron {
        transition: none;
    }
    .estado:active, .boton:active, .boton-plano:active,
    .menu a:active, .mas-lista a:active, .mas > summary:active:active { transform: none; }
}

/* ── Menú del teléfono: barra flotante abajo, como las apps de iOS ─────────────────────────
   Sólo en pantallas angostas. Las pestañas con submenú son <details>: su hoja sube desde abajo
   y el fondo oscurecido es el ::before del summary abierto, así que tocar fuera la cierra. El
   material va en un ::before de la barra y no en la barra: un backdrop-filter en ella sería el
   bloque contenedor de las hojas fijas y las encerraría dentro de la barra. */
.barra-inferior { display: none; }

@media (max-width: 860px) {
    .barra-inferior {
        display: flex; align-items: stretch; gap: 2px;
        position: fixed; z-index: 40;
        left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
        bottom: calc(10px + env(safe-area-inset-bottom));
        height: 64px; padding: 6px; border-radius: 32px;
        box-shadow: 0 12px 32px -10px rgb(16 24 40 / .32), 0 0 0 .5px var(--linea);
    }
    .barra-inferior::before {
        content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
        background: var(--papel);
    }
    @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .barra-inferior::before {
            background: var(--material);
            backdrop-filter: blur(24px) saturate(180%);
            -webkit-backdrop-filter: blur(24px) saturate(180%);
        }
    }

    .pestana-hoja { flex: 1; display: flex; min-width: 0; }
    .pestana {
        flex: 1; min-width: 0; display: flex; list-style: none; cursor: pointer;
        border-radius: 26px; color: var(--tenue); -webkit-tap-highlight-color: transparent;
    }
    .pestana::-webkit-details-marker { display: none; }
    .pestana-cara {
        position: relative; z-index: 2; flex: 1; min-width: 0;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
        border-radius: 26px; font-size: .6875rem; font-weight: 600; letter-spacing: .01em;
        transition: background-color .15s, color .15s, transform .2s cubic-bezier(.32,.72,0,1);
    }
    .pestana-cara > span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .pestana svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 1.8;
                   stroke-linecap: round; stroke-linejoin: round; }
    .pestana:active .pestana-cara { transform: scale(.94); }
    .pestana.active .pestana-cara, .pestana.activa .pestana-cara, .pestana-hoja[open] > .pestana .pestana-cara {
        color: var(--acento); background: var(--acento-suave);
    }

    /* Tocar fuera cierra: el fondo es parte del summary abierto. */
    .pestana-hoja[open] > .pestana::before {
        content: ""; position: fixed; inset: 0; z-index: 1;
        background: rgb(0 0 0 / .22);
        animation: hojaFondo .2s ease-out;
    }

    .hoja {
        position: fixed; z-index: 3;
        left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right));
        bottom: calc(84px + env(safe-area-inset-bottom));
        max-height: calc(100dvh - 150px); overflow-y: auto; overscroll-behavior: contain;
        padding: .5rem; border-radius: 26px; background: var(--papel);
        box-shadow: 0 24px 60px -18px rgb(16 24 40 / .45), 0 0 0 .5px var(--linea);
        animation: hojaSube .28s cubic-bezier(.32,.72,0,1);
    }
    .hoja-titulo {
        padding: .7rem .8rem .5rem; font-size: var(--texto-titulo, 1.25rem); font-weight: 700;
        letter-spacing: -.01em; color: var(--tinta);
    }

    /* Los grupos, colapsados: se abre el que se toca. */
    .grupo-hoja { border-radius: 18px; }
    .grupo-hoja + .grupo-hoja { box-shadow: inset 0 .5px 0 var(--linea); }
    .grupo-hoja > summary {
        list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between;
        min-height: 52px; padding: .2rem .8rem; font-size: var(--texto-base); font-weight: 600; color: var(--tinta);
        -webkit-tap-highlight-color: transparent;
    }
    .grupo-hoja > summary::-webkit-details-marker { display: none; }
    .grupo-hoja > summary.activo { color: var(--acento); }
    .grupo-hoja .chevron { width: 18px; height: 18px; fill: none; stroke: var(--tenue); stroke-width: 2;
                           stroke-linecap: round; stroke-linejoin: round; transition: transform .2s ease; }
    .grupo-hoja[open] .chevron { transform: rotate(90deg); }
    .grupo-hoja-lista { display: flex; flex-direction: column; padding: 0 .2rem .4rem; }
    .grupo-hoja-lista a, .hoja-salir {
        display: flex; align-items: center; min-height: 48px; padding: .6rem .9rem;
        border-radius: 14px; color: var(--tinta); font-size: var(--texto-base);
    }
    .grupo-hoja-lista a.active { background: var(--acento-suave); color: var(--sobre-acento-suave); font-weight: 600; }
    .hoja-salir { width: 100%; border: 0; background: none; font: inherit; color: var(--bajo, #c0392b); cursor: pointer; text-align: left; }
    .hoja > .grupo-hoja-lista { padding-top: 0; }
}

@keyframes hojaSube { from { transform: translateY(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes hojaFondo { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .hoja, .pestana-hoja[open] > .pestana::before { animation: none; }
    .pestana-cara, .grupo-hoja .chevron { transition: none; }
}

/* Lo que ya está en el menú pero todavía no está construido. */
.pronto {
    margin-left: .45rem; padding: .1rem .42rem; border-radius: 999px;
    font-size: .625rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    background: var(--superficie-alta); color: var(--tenue); vertical-align: middle;
}
.hoja-usuario { padding: .3rem .9rem .5rem; color: var(--tenue); font-size: var(--texto-meta); }
.grupo-hoja-subtitulo {
    padding: .55rem .9rem .15rem; font-size: .6875rem; font-weight: 600;
    letter-spacing: .05em; text-transform: uppercase; color: var(--tenue);
}
.hoja-titulo-cuenta { font-size: 1rem; padding-top: 1rem; }

/* ── Treemap ──────────────────────────────────────────────────────────────────
   Un solo tono: --tono lo pone cada celda según su importe (claro lo chico,
   oscuro lo grande). El hueco de 2px entre celdas las separa mejor que un borde. */
.treemap {
    position: relative; width: 100%; aspect-ratio: 5 / 2; min-height: 220px;
    margin: .25rem 0 .75rem; border-radius: var(--radius-pieza); overflow: hidden;
}
.treemap-celda {
    position: absolute; overflow: hidden; border-radius: 4px;
    background: color-mix(in srgb, var(--acento) calc(var(--tono) * 100%), transparent);
    padding: .3rem .45rem; display: flex; flex-direction: column; gap: .1rem;
    box-shadow: inset 0 0 0 1px var(--papel);
}
/* Encima de la mitad del tono el fondo ya es oscuro: el texto va en blanco. */
.treemap-nombre {
    font-size: .8125rem; font-weight: 600; line-height: 1.15;
    color: color-mix(in srgb, var(--tinta) calc((1 - var(--tono)) * 100%), #fff);
    overflow: hidden; text-overflow: ellipsis; display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.treemap-valor {
    font-size: .75rem; font-variant-numeric: tabular-nums;
    color: color-mix(in srgb, var(--tinta-suave) calc((1 - var(--tono)) * 100%), #fff);
}

/* El renglón cuyo detalle está abierto: se marca para no perderse al hacer clic abajo. */
.renglon-abierto > td { background: var(--acento-suave); }

/* Los datos que acompañan a una tabla: frases cortas, no tarjetas. */
.lista-datos { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: .35rem; }
.lista-datos li { font-size: .9375rem; color: var(--tinta-suave); }
.lista-datos strong { color: var(--tinta); }