/* ═══════════════════════════════════════════════════════════════════════════════
   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 */
    --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;
    --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);
}

* { 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 > summary, .menu-movil > 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 > summary:active, .menu-movil > summary: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: 0 1.25rem; 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; }

.menu { display: flex; gap: .15rem; flex: 1; overflow-x: auto; scrollbar-width: none; }
.menu::-webkit-scrollbar { display: none; }
.menu 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 { background: var(--panel2); color: var(--tinta); }
.menu 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); }

.contenido {
    padding: 1.25rem 1.25rem calc(3rem + env(safe-area-inset-bottom));
    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; }
.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: rgba(255,255,255,.62); 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: 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");
    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); color: #fff; 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; }

/* ── 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); }

.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); }

/* ── 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; }
.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-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; }

.menu-movil { display: none; }

/* ── 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)) 1.25rem calc(1.5rem + env(safe-area-inset-bottom));
}
.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
   ═══════════════════════════════════════════════════════════════════════════════ */

@media (max-width: 860px) {
    .menu { display: none; }
    .barra { position: relative; }
    .menu-movil { display: block; flex: none; }
    .menu-movil > summary {
        list-style: none; cursor: pointer; width: 48px; height: 48px;
        display: grid; place-items: center; border-radius: var(--radius-pieza);
        background: var(--panel2); font-size: 1.1rem; color: var(--acento);
    }
    .menu-movil > summary::-webkit-details-marker { display: none; }
    .menu-movil[open] > summary { background: var(--superficie-alta); }
    .menu-movil-lista {
        position: absolute; top: calc(100% + .35rem); left: .75rem; right: .75rem; z-index: 30;
        background: var(--papel); border-radius: var(--radius-tarjeta);
        box-shadow: var(--sombra), 0 20px 44px -18px rgb(16 24 40 / .34);
        padding: .35rem; display: flex; flex-direction: column;
        max-height: calc(100dvh - 96px); overflow-y: auto;
    }
    .menu-movil-lista a {
        padding: .75rem .8rem; border-radius: var(--radius-pieza);
        color: var(--tinta); font-size: var(--texto-base); min-height: 48px;
        display: flex; align-items: center;
    }
    .menu-movil-lista a + a { box-shadow: inset 0 .5px 0 var(--linea); }
    .menu-movil-lista a.active { background: var(--acento-suave); color: var(--sobre-acento-suave); font-weight: 600; }

    .barra { gap: .6rem; padding-left: .9rem; padding-right: .9rem; }
    .marca-texto small { display: none; }
    .usuario { display: none; }
    .contenido { padding: 1rem .9rem calc(3rem + 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) {
    .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(255 255 255 / 0), rgb(255 255 255 / .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; }
}

/* ── 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 > summary, .menu-movil > summary,
    .barra-marca, .medidor-relleno, .apilada-parte, .tabla-datos > summary::before {
        transition: none;
    }
    .estado:active, .boton:active, .boton-plano:active,
    .menu a:active, .mas > summary:active, .menu-movil > summary:active { transform: none; }
}