/* ==========================================================================
   Konsta — hoja de estilos del panel web.
   Paleta tomada del logo (navy + cian), la misma de la app Android, para que
   el panel y el celular se vean del mismo producto.
   Una sola hoja para panel de negocio, plataforma (superadmin) y pantallas de
   acceso: las clases (.card, .kpi, .badge, .flash…) son el vocabulario que ya
   usan las vistas, así que cambiar aquí cambia todo.
   ========================================================================== */

:root {
    /* Marca */
    --navy-900:#0A1124;
    --navy-800:#111a36;
    --navy-700:#181848;
    --blue-700:#1860A8;
    --blue-500:#3078D8;
    --cyan:#38C8DC;
    --green:#43DE7C;

    /* Interfaz */
    --ink:#111a2e;
    --ink-soft:#39435c;
    --muted:#697386;
    --line:#e3e7f0;
    --line-soft:#eef1f7;
    --bg:#f4f6fb;
    --card:#ffffff;

    /* Estados */
    --ok:#127a45;
    --ok-bg:#e6f7ee;
    --warn:#9a5b06;
    --warn-bg:#fdf3e0;
    --bad:#b3261e;
    --bad-bg:#fdeceb;

    --brand:var(--blue-700);
    --brand-soft:#eaf2fc;

    --radius:14px;
    --shadow:0 1px 2px rgba(16,26,54,.05), 0 8px 24px -16px rgba(16,26,54,.35);
    --sidebar-w:248px;
}

* { box-sizing:border-box; }

html, body { height:100%; }

body {
    margin:0;
    font:15px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
    color:var(--ink);
    background:var(--bg);
    -webkit-font-smoothing:antialiased;
}

a { color:var(--blue-700); }

/* ==========================================================================
   Estructura: barra lateral fija + contenido
   ========================================================================== */

.shell { display:flex; min-height:100vh; }

.sidebar {
    width:var(--sidebar-w);
    flex:0 0 var(--sidebar-w);
    background:linear-gradient(180deg, var(--navy-900) 0%, var(--navy-700) 100%);
    color:#c6d0e8;
    display:flex;
    flex-direction:column;
    position:fixed;
    inset:0 auto 0 0;
    z-index:30;
}

.sidebar .brand {
    display:flex; align-items:center; gap:10px;
    padding:20px 18px 16px;
    color:#fff; font-weight:800; font-size:18px; letter-spacing:.2px;
    text-decoration:none;
}
.sidebar .brand img { width:30px; height:30px; border-radius:8px; }
.sidebar .brand small {
    display:block; font-size:11px; font-weight:600; letter-spacing:1.2px;
    text-transform:uppercase; color:var(--cyan); margin-top:1px;
}

.sidebar nav { flex:1; overflow-y:auto; padding:6px 12px 12px; }

.sidebar .group {
    font-size:10.5px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase;
    color:#6d7ba0; padding:16px 10px 6px;
}

.sidebar nav a {
    display:flex; align-items:center; gap:11px;
    padding:9px 11px; margin-bottom:2px;
    border-radius:9px;
    color:#c6d0e8; text-decoration:none; font-size:14.5px;
    transition:background .12s ease, color .12s ease;
}
.sidebar nav a:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar nav a.active { background:rgba(56,200,220,.14); color:#fff; font-weight:600; }
.sidebar nav a.active .ico { color:var(--cyan); }
.sidebar nav a .ico { width:18px; height:18px; flex:0 0 18px; color:#8fa0c4; }
.sidebar nav a .ico svg { width:18px; height:18px; display:block; }

.sidebar .foot { border-top:1px solid rgba(255,255,255,.09); padding:14px 16px 16px; }
.sidebar .foot .who { font-size:13px; color:#fff; font-weight:600; }
.sidebar .foot .who span { display:block; font-weight:400; color:#8fa0c4; font-size:12.5px; }
.sidebar .foot a { color:#c6d0e8; text-decoration:none; font-size:13px; }
.sidebar .foot a:hover { color:#fff; text-decoration:underline; }
.sidebar .foot form { display:inline; }
.sidebar .foot form button {
    background:none; border:0; padding:0; cursor:pointer;
    color:#8fa0c4; font:inherit; font-size:13px; text-decoration:underline;
}
.sidebar .foot form button:hover { color:#fff; }
.sidebar .foot .links { margin-top:10px; display:flex; gap:10px; align-items:center; }

/* Medidor de consumo del ciclo */
.meter { margin-bottom:12px; }
.meter .lbl { display:flex; justify-content:space-between; font-size:12px; color:#8fa0c4; margin-bottom:5px; }
.meter .lbl b { color:#fff; font-weight:600; }
.meter .bar { height:5px; border-radius:99px; background:rgba(255,255,255,.13); overflow:hidden; }
.meter .bar i { display:block; height:100%; border-radius:99px; background:var(--cyan); }
.meter .bar i.hot { background:#f5a524; }
.meter .plan {
    display:inline-block; margin-bottom:9px; padding:2px 9px; border-radius:99px;
    background:rgba(56,200,220,.16); color:var(--cyan); font-size:11.5px; font-weight:700;
    letter-spacing:.3px;
}

/* Contenido */
.content { flex:1; min-width:0; margin-left:var(--sidebar-w); display:flex; flex-direction:column; }

.topbar {
    background:rgba(255,255,255,.85);
    backdrop-filter:blur(6px);
    border-bottom:1px solid var(--line);
    padding:14px 28px;
    display:flex; align-items:center; gap:14px;
    position:sticky; top:0; z-index:20;
}
.topbar h1 { font-size:19px; margin:0; flex:1; letter-spacing:-.2px; }
.topbar .biz { font-size:13px; color:var(--muted); }

/* Ancho COMPLETO: antes había un max-width:1120px que dejaba el panel
   encajonado con medio monitor en blanco. Un panel de datos usa el ancho que
   tenga; lo que ordena la lectura son las columnas de la rejilla, no un tope. */
main { padding:22px 26px 48px; width:100%; }

/* Botón de menú (solo móvil) */
#nav-toggle { position:absolute; opacity:0; pointer-events:none; }
.burger {
    display:none; cursor:pointer; width:34px; height:34px; border-radius:9px;
    border:1px solid var(--line); background:#fff;
    align-items:center; justify-content:center; color:var(--ink-soft); flex:0 0 auto;
}
.scrim { display:none; }

@media (max-width: 900px) {
    .sidebar { transform:translateX(-100%); transition:transform .2s ease; box-shadow:0 0 40px rgba(10,17,36,.4); }
    #nav-toggle:checked ~ .shell .sidebar { transform:none; }
    #nav-toggle:checked ~ .shell .scrim {
        display:block; position:fixed; inset:0; z-index:25; background:rgba(10,17,36,.45);
    }
    .content { margin-left:0; }
    .burger { display:flex; }
    .topbar { padding:12px 16px; }
    main { padding:18px 16px 40px; }
    .topbar h1 { font-size:17px; }
    .topbar .biz { display:none; }
}

/* ==========================================================================
   Componentes (mismo vocabulario que ya usaban las vistas)
   ========================================================================== */

h1 { font-size:19px; margin:0 0 18px; letter-spacing:-.2px; }
h2 { font-size:16px; margin:0 0 12px; }

.card {
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    padding:20px 22px;
    margin-bottom:18px;
}
.card > b { font-size:15px; }

table { width:100%; border-collapse:collapse; }
th {
    text-align:left; font-size:11.5px; text-transform:uppercase; letter-spacing:.5px;
    color:var(--muted); font-weight:700; padding:9px 10px; border-bottom:1px solid var(--line);
}
td { padding:11px 10px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
tbody tr:last-child td { border-bottom:0; }
tbody tr:hover td { background:#fafbfe; }

.badge {
    display:inline-block; padding:3px 10px; border-radius:99px;
    font-size:12px; font-weight:600; line-height:1.4;
}
.b-ok  { background:var(--ok-bg);   color:var(--ok); }
.b-warn{ background:var(--warn-bg); color:var(--warn); }
.b-bad { background:var(--bad-bg);  color:var(--bad); }
.b-mut { background:#eef1f7;        color:var(--muted); }

.flash {
    background:var(--brand-soft); border:1px solid #cfe0f7; color:#134a86;
    border-radius:10px; padding:12px 16px; margin-bottom:16px;
}
.errors {
    background:var(--bad-bg); border:1px solid #f4cdca; color:var(--bad);
    border-radius:10px; padding:12px 16px; margin-bottom:16px;
}
.errors ul { margin:0; padding-left:18px; }

form.inline { display:inline; }

label { display:block; font-size:13px; color:var(--muted); margin-bottom:5px; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=time], input[type=date], select, textarea {
    padding:9px 11px; border:1px solid var(--line); border-radius:9px;
    font:inherit; width:100%; background:#fff; color:var(--ink);
}
input:focus, select:focus, textarea:focus {
    outline:none; border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(48,120,216,.14);
}
select.compact { width:auto; padding:5px 9px; font-size:13px; }

.row { display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; }
.row > div { flex:1; min-width:130px; }

button.primary {
    background:var(--blue-700); color:#fff; border:0; border-radius:9px;
    padding:10px 18px; font:inherit; font-weight:600; cursor:pointer;
    transition:background .12s ease;
}
button.primary:hover { background:var(--blue-500); }
/* Acciones de fila: BOTONES, no enlaces subrayados. Un texto subrayado dentro
   de una tabla se confunde con el contenido; «Eliminar» merece un blanco al que
   apuntar y un borde que diga dónde empieza y dónde acaba. */
button.ghost, button.danger, .btn-mini {
    display:inline-flex; align-items:center; justify-content:center; gap:5px;
    padding:6px 12px; border-radius:8px; border:1px solid var(--line);
    background:#fff; font:inherit; font-size:13px; font-weight:600; line-height:1.55;
    text-decoration:none; cursor:pointer; white-space:nowrap;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
}
button.ghost, .btn-mini { color:var(--blue-700); }
button.ghost:hover, .btn-mini:hover { background:var(--brand-soft); border-color:var(--blue-500); }
button.danger { color:var(--bad); border-color:#f4cdca; }
button.danger:hover { background:var(--bad-bg); border-color:var(--bad); }

/* Caja de acciones dentro de la celda. Va en un DIV y no en el <td>: un td en
   flex se sale del algoritmo de la tabla y vuelve a descuadrar las columnas. */
.acciones { display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; align-items:center; }
.acciones form.inline { display:inline-flex; align-items:center; gap:6px; }
.acciones .marca { display:inline-flex; align-items:center; gap:5px; font-size:13px; color:var(--muted); }
.acciones .marca input { width:auto; margin:0; }
.th-acciones { text-align:right; }

.muted { color:var(--muted); }
.small { font-size:13px; }

.token-box {
    background:var(--navy-900); color:#a8f5c8;
    font-family:ui-monospace,Consolas,monospace;
    padding:15px 17px; border-radius:10px; word-break:break-all; font-size:13px;
}

.kpis {
    display:grid; gap:12px; margin-bottom:16px;
    grid-template-columns:repeat(auto-fit, minmax(min(100%, 190px), 1fr));
}
.kpi {
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    box-shadow:var(--shadow); padding:14px 18px;
    position:relative; overflow:hidden;
}
.kpi::before {
    content:''; position:absolute; inset:0 auto 0 0; width:3px;
    background:linear-gradient(180deg, var(--cyan), var(--blue-500));
}
.kpi b { display:block; font-size:23px; letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.kpi span { color:var(--muted); font-size:13px; }

.pagination { display:flex; gap:6px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:5px 11px; border-radius:8px; text-decoration:none; }
.pagination a:hover { background:var(--line-soft); }

/* Barra de progreso (consumo del plan, totales por día) */
.progress { height:9px; border-radius:99px; background:var(--line-soft); overflow:hidden; }
.progress.sm { height:6px; }
.progress i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--blue-500), var(--cyan)); }
.progress i.hot { background:linear-gradient(90deg, #e08a0b, #f5a524); }

/* Tarjetas de plan */
.planes { display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:14px; margin-bottom:18px; }
.plan-card { margin-bottom:0; display:flex; flex-direction:column; }
.plan-card.actual { border-color:var(--cyan); box-shadow:0 0 0 3px rgba(56,200,220,.18), var(--shadow); }
.plan-card .precio { font-size:26px; font-weight:700; margin:8px 0 6px; letter-spacing:-.5px; }
.plan-card ul { margin:0 0 16px; padding-left:18px; flex:1; }
.plan-card ul li { margin-bottom:3px; }
.plan-card ul li b { color:var(--ink); }

/* Cobros por hora del día */
.horas { display:flex; align-items:flex-end; gap:3px; height:130px; }
.horas .hora { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.horas .hora .col { height:100%; display:flex; align-items:flex-end; }
.horas .hora .col i {
    display:block; width:100%; border-radius:4px 4px 0 0;
    background:linear-gradient(180deg, var(--cyan), var(--blue-500)); min-height:0;
}
.horas .hora span { text-align:center; font-size:10px; color:var(--muted); margin-top:5px; height:14px; }

.btn-link {
    display:inline-block; padding:9px 14px; border:1px solid var(--line); border-radius:9px;
    background:#fff; text-decoration:none; color:var(--ink-soft); font-size:14px; white-space:nowrap;
    font:inherit; cursor:pointer;
}
.btn-link:hover:not(:disabled) { border-color:var(--blue-500); color:var(--blue-700); }
.btn-link:disabled { opacity:.55; cursor:default; }

/* Campo con botón pegado (RUC + Consultar) */
.con-boton { display:flex; gap:8px; align-items:stretch; }
.con-boton input { flex:1; min-width:0; }

/* Campo que rellena el servidor, no el usuario */
input[readonly] { background:var(--line-soft); color:var(--ink-soft); }

.hint.bien { color:var(--ok); }
.hint.malo { color:var(--bad); }
.hint.ojo  { color:var(--warn); }

/* ==========================================================================
   Pantallas de acceso (entrar, perfil, verificación)
   ========================================================================== */

body.auth {
    display:grid; place-items:center; min-height:100vh; padding:24px;
    background:
        radial-gradient(900px 500px at 50% -10%, rgba(56,200,220,.18), transparent 60%),
        linear-gradient(180deg, var(--navy-900), var(--navy-700));
}
body.auth .box {
    background:#fff; border-radius:18px; padding:34px;
    width:min(420px, 100%);
    box-shadow:0 30px 60px -30px rgba(3,8,24,.75);
}
body.auth .box h1 { font-size:22px; margin:0 0 4px; }
body.auth .box p.sub { margin:0 0 20px; color:var(--muted); font-size:14px; }
body.auth .box label { margin:14px 0 5px; }
body.auth .box button[type=submit] {
    margin-top:22px; width:100%; background:var(--blue-700); color:#fff; border:0;
    border-radius:10px; padding:12px; font:inherit; font-weight:700; cursor:pointer;
}
body.auth .box button[type=submit]:hover { background:var(--blue-500); }
body.auth .box .hint { color:var(--muted); font-size:12px; margin-top:5px; }
body.auth .box .foot { margin-top:18px; text-align:center; font-size:14px; }
body.auth .box form.out { display:inline; }
body.auth .box form.out button {
    width:auto; background:none; color:var(--muted); text-decoration:underline;
    font-weight:400; padding:0; margin:0; border:0; cursor:pointer; font:inherit;
}
/* Separador «o» entre la contraseña y Google */
.o-bien { display:flex; align-items:center; gap:12px; margin:20px 0 14px; color:var(--muted); font-size:13px; }
.o-bien::before, .o-bien::after { content:''; flex:1; height:1px; background:var(--line); }

.btn-google {
    display:flex; align-items:center; justify-content:center; gap:10px;
    width:100%; padding:11px; border:1px solid var(--line); border-radius:10px;
    background:#fff; color:var(--ink); font-weight:600; text-decoration:none;
}
.btn-google:hover { border-color:var(--blue-500); background:#fbfcff; }

body.auth .legal { margin-top:18px; text-align:center; font-size:12.5px; color:#8fa0c4; }
body.auth .legal a { color:#c6d0e8; }

/* ==========================================================================
   Panel de datos: rejilla, gráficos y densidad
   --------------------------------------------------------------------------
   Añadido en el rediseño de Informes (2026-08-19). Dos ideas:

   1. El panel usa TODO el ancho. Lo que ordena la lectura es la rejilla de
      tarjetas, no un max-width que deja media pantalla vacía.
   2. Los gráficos son SVG generados en el servidor. Sin librerías: este
      proyecto no tiene build de assets, y una dependencia de CDN para pintar
      seis barras es deuda que se paga el día que el CDN falla.

   🔑 LA PALETA DE SERIES NO SE ELIGIÓ A OJO. Sale de validate_palette.js
   (skill dataviz) y pasa los seis checks —banda de luminosidad, croma, CVD,
   visión normal y contraste— EN ESTE ORDEN. El orden es parte del resultado:
   permutarla rompe la separación para protanopia. Añadir un quinto color sin
   volver a validar es romperla.
   ========================================================================== */

:root {
    /* Series categóricas, en orden fijo. Nunca se ciclan. */
    --serie-1:#1860A8;   /* azul de marca */
    --serie-2:#1B7A43;   /* verde */
    --serie-3:#8A3FA0;   /* violeta */
    --serie-4:#A85B00;   /* ámbar */

    /* Magnitud (una sola serie): un hue, del claro al oscuro. */
    --mag-1:#dbe9f8;
    --mag-2:#9cc3e8;
    --mag-3:#4a8fca;
    --mag-4:#1860A8;

    --grid-linea:#eef1f7;
}

/* ── Rejilla de secciones ────────────────────────────────────────────── */
.rejilla { display:grid; gap:16px; margin-bottom:16px; }
/* 🔑 Un hijo de grid NO se encoge por debajo de su contenido mínimo salvo que
   se le diga. Sin este min-width:0, una tabla ancha dentro de una tarjeta
   estira la columna y saca la PÁGINA entera de la pantalla en móvil. Es la
   causa de scroll horizontal más común en un panel con tablas. */
.rejilla > *, .kpis > * { min-width:0; }
.rejilla.dos  { grid-template-columns:repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.rejilla.tres { grid-template-columns:repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* 2/3 + 1/3 para «gráfico grande + lista al lado». Cae a una columna solo. */
.rejilla.ancha { grid-template-columns:2fr 1fr; }
@media (max-width: 1100px) { .rejilla.ancha { grid-template-columns:1fr; } }

.card.compacta { padding:16px 18px; }
.card h2 { display:flex; align-items:baseline; gap:10px; }
.card h2 .dato { margin-left:auto; font-size:13px; color:var(--muted); font-weight:500; }

/* ── Gráficos ────────────────────────────────────────────────────────── */
.gr { margin:0; }
.gr svg { display:block; width:100%; height:auto; overflow:visible; }
.gr .eje { fill:var(--muted); font-size:10.5px; }
.gr .rejilla-linea { stroke:var(--grid-linea); stroke-width:1; }
.gr .base { stroke:var(--line); stroke-width:1; }

/* Marcas finas con el extremo redondeado, ancladas a la línea de base. */
.gr .barra { transition:opacity .15s ease; }
.gr .barra:hover { opacity:.78; }
.gr .linea { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.gr .punto { r:3.5; }
.gr .area { opacity:.13; }
.gr .valor { fill:var(--ink); font-size:11px; font-weight:600; font-variant-numeric:tabular-nums; }
.gr .etq { fill:var(--muted); font-size:10.5px; }

/* Barras horizontales: la forma correcta cuando la etiqueta es un nombre. */
.gr-h { display:grid; gap:9px; }
.gr-h .fila { display:grid; grid-template-columns:minmax(90px, 26%) 1fr auto; gap:10px; align-items:center; }
.gr-h .nom { font-size:13px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gr-h .pista { background:var(--line-soft); border-radius:99px; height:9px; overflow:hidden; }
.gr-h .relleno { height:100%; border-radius:99px; }
.gr-h .num { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; color:var(--ink); }

/* Leyenda: obligatoria desde 2 series, para que la identidad no dependa
   solo del color. */
.leyenda { display:flex; flex-wrap:wrap; gap:12px; margin-top:12px; }
.leyenda span { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--ink-soft); }
.leyenda i { width:10px; height:10px; border-radius:3px; flex:0 0 auto; }

/* Tabla equivalente: el mismo dato sin depender de la vista. */
.gr-tabla { margin-top:12px; font-size:13px; }
.gr-tabla summary { cursor:pointer; color:var(--muted); font-size:12.5px; }
.gr-tabla summary:hover { color:var(--brand); }
.gr-tabla table { margin-top:10px; }
.gr-tabla td, .gr-tabla th { padding:6px 8px; font-size:12.5px; }

.vacio { color:var(--muted); font-size:13px; padding:22px 0; text-align:center; }

/* Cifra de titular: cuando el dato ES el mensaje y no necesita gráfico. */
.titular { font-size:30px; font-weight:700; letter-spacing:-.6px; font-variant-numeric:tabular-nums; }
.titular-pie { color:var(--muted); font-size:12.5px; margin-top:2px; }

@media (prefers-reduced-motion: reduce) {
    .gr .barra { transition:none; }
}

/* ── Barras verticales (series cortas: meses) ─────────────────────────────
   En HTML/CSS y no en SVG a propósito: el texto no se deforma al escalar, el
   responsive es natural y no hay que calcular coordenadas. El SVG se reserva
   para las series densas (una línea de 90 días), donde sí compensa.
   ------------------------------------------------------------------------ */
.gr-v { display:flex; align-items:flex-end; gap:6px; height:180px; padding-top:22px; position:relative; }
.gr-v .col { flex:1; display:flex; flex-direction:column; justify-content:flex-end; height:100%; min-width:0; }
.gr-v .marca {
    /* 4px de radio SOLO arriba: la barra queda anclada a la línea de base. */
    border-radius:4px 4px 0 0; min-height:2px; width:100%;
    transition:opacity .15s ease; position:relative;
}
.gr-v .col:hover .marca { opacity:.78; }
.gr-v .cifra {
    position:absolute; top:-20px; left:0; right:0; text-align:center;
    font-size:11px; font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums;
    white-space:nowrap;
}
.gr-v-pie { display:flex; gap:6px; margin-top:8px; }
.gr-v-pie span {
    flex:1; text-align:center; font-size:10.5px; color:var(--muted);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}
.gr-base { height:1px; background:var(--line); margin-top:0; }

@media (max-width: 700px) {
    .gr-v { height:140px; }
    .gr-v .cifra { display:none; }   /* con poco ancho, el número se pisa */
}
@media (prefers-reduced-motion: reduce) { .gr-v .marca { transition:none; } }

/* ── Móvil: nada de scroll horizontal en la PÁGINA ────────────────────────
   Una tabla de 6 columnas no cabe en 375px y empuja el body entero. El scroll
   tiene que vivir DENTRO del componente ancho, no en la página.
   ------------------------------------------------------------------------ */
/* La tabla scrollea dentro de su tarjeta SIEMPRE que no quepa, no solo en
   móvil: una tabla de 8 columnas tampoco entra en un portátil de 1280 con la
   barra lateral puesta. Atar esto a un breakpoint deja el desborde justo en
   los anchos intermedios, que es donde más se usa el panel. */
/* El scroll vive en un DIV envolvente, no en la <table>: poner display:block
   en la tabla convertía thead y tbody en dos tablas independientes, cada una
   repartiendo el ancho a su manera, y las cabeceras dejaban de caer sobre su
   columna. Con el envoltorio la tabla sigue siendo UNA sola caja de tabla. */
.tabla-scroll { width:100%; overflow-x:auto; }
.tabla-scroll > table { min-width:max-content; }

@media (max-width: 760px) {
    .tabla-scroll > table { white-space:nowrap; }

    /* La barra horizontal pasa a dos líneas: el nombre y la cifra arriba,
       la pista debajo a todo el ancho. En una sola línea, la cifra con su
       sufijo («· 3 negocios») no se encogía y sacaba la fila de la pantalla. */
    .gr-h .fila {
        grid-template-columns:1fr auto;
        grid-template-areas:'nom num' 'pista pista';
        gap:5px 10px;
    }
    .gr-h .nom   { grid-area:nom; }
    .gr-h .num   { grid-area:num; }
    .gr-h .pista { grid-area:pista; }
}