/* Consola de licencias SALFIDEV.
   Los colores son los del logo (azul #153F92, celeste #2BCBF4) para que no
   parezca otra aplicacion, pero es deliberadamente mas sobria que SALFIMED:
   esto lo usa una persona, no un consultorio. */

:root {
    --azul: #153F92;
    --azul-claro: #2BCBF4;
    --tinta: #16233a;
    --tinta-2: #5b6b85;
    --borde: #dfe4ec;
    --fondo: #f4f6fa;
    --blanco: #fff;
    --verde: #12805c;
    --verde-fondo: #e6f6f0;
    --ambar: #8a5a00;
    --ambar-fondo: #fdf3e0;
    --rojo: #b3261e;
    --rojo-fondo: #fdecea;
    --radio: 10px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--fondo);
    color: var(--tinta);
    font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
    font-size: 14px;
}

/* ---- Barra superior ---- */

.barra {
    background: var(--azul);
    color: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}

.barra-interior {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    height: 56px;
    display: flex;
    align-items: center;
    gap: 28px;
}

.marca {
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    letter-spacing: .3px;
    white-space: nowrap;
}

.marca span {
    font-weight: 400;
    opacity: .72;
    font-size: 12.5px;
}

.menu { display: flex; gap: 4px; flex: 1; }

.menu a {
    color: rgba(255,255,255,.82);
    text-decoration: none;
    padding: 7px 14px;
    border-radius: 7px;
    font-weight: 500;
}

.menu a:hover { background: rgba(255,255,255,.12); color: #fff; }

.menu a.activo { background: rgba(255,255,255,.18); color: #fff; }

.sesion {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: rgba(255,255,255,.85);
}

.sesion form { margin: 0; }

.btn-salir {
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.28);
    color: #fff;
}

.btn-salir:hover { background: rgba(255,255,255,.24); color: #fff; }

/* ---- Contenido ---- */

.contenido {
    max-width: 1400px;
    margin: 0 auto;
    padding: 22px 20px 60px;
}

h1 {
    font-size: 21px;
    font-weight: 700;
    margin: 0 0 4px;
}

.subtitulo {
    color: var(--tinta-2);
    margin: 0 0 18px;
    font-size: 13px;
}

.tarjeta {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 16px 18px;
    margin-bottom: 16px;
}

.tarjeta h2 {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-2);
    margin: 0 0 12px;
}

/* ---- Numeros de cabecera ---- */

.cifras {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}

.cifra {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    padding: 14px 16px;
}

.cifra .valor {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--azul);
}

.cifra .rotulo {
    font-size: 12px;
    color: var(--tinta-2);
    margin-top: 2px;
}

.cifra.alerta .valor { color: var(--ambar); }

/* ---- Tabla ---- */

.tabla {
    width: 100%;
    border-collapse: collapse;
    background: var(--blanco);
}

.tabla th {
    text-align: left;
    font-size: 11.5px;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--tinta-2);
    font-weight: 700;
    padding: 10px 12px;
    border-bottom: 2px solid var(--borde);
    white-space: nowrap;
}

.tabla td {
    padding: 11px 12px;
    border-bottom: 1px solid var(--borde);
    vertical-align: middle;
}

.tabla tbody tr:hover { background: #f8fafd; }

.tabla .num { text-align: right; font-variant-numeric: tabular-nums; }

.tabla .acciones { text-align: right; white-space: nowrap; }

.envoltorio-tabla {
    background: var(--blanco);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    overflow-x: auto;
}

.principal { font-weight: 600; }

.secundario { color: var(--tinta-2); font-size: 12px; }

/* ---- Distintivos ---- */

.chip {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .02em;
    white-space: nowrap;
}

.chip-verde { background: var(--verde-fondo); color: var(--verde); }
.chip-ambar { background: var(--ambar-fondo); color: var(--ambar); }
.chip-rojo { background: var(--rojo-fondo); color: var(--rojo); }
.chip-gris { background: #eef1f6; color: var(--tinta-2); }
.chip-azul { background: #e8effc; color: var(--azul); }

/* ---- Visor de eventos ---- */

.cabecera-eventos {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}

.cabecera-cifra { text-align: right; }

.cabecera-cifra .valor {
    display: block;
    font-size: 26px;
    font-weight: 700;
    color: var(--azul);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.cabecera-cifra .rotulo {
    font-size: 12px;
    color: var(--tinta-2);
}

.filtros-caja { padding: 12px 14px; }

.fila-filtros {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 10px;
}

.fila-filtros .busca {
    display: flex;
    gap: 7px;
    align-items: center;
    flex: 1;
    min-width: 260px;
    margin: 0;
}

.fila-filtros .busca input[type=search] {
    flex: 1;
    padding: 7px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 13px;
    min-width: 0;
}

.limpiar {
    font-size: 12.5px;
    color: var(--tinta-2);
    text-decoration: none;
    white-space: nowrap;
}

.limpiar:hover { color: var(--rojo); text-decoration: underline; }

.fila-fuentes {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    padding-top: 10px;
    border-top: 1px solid var(--borde);
}

.rotulo-grupo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--tinta-2);
    margin-right: 2px;
}

.separador-vertical {
    width: 1px;
    height: 20px;
    background: var(--borde);
    margin: 0 8px;
}

.crece { flex: 1; }

/* Pildora de filtro. El numero al lado NO es decoracion: dice si merece la
   pena pulsarla antes de pulsarla. */
.pildora {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 11px;
    border-radius: 999px;
    border: 1px solid var(--borde);
    background: var(--blanco);
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    white-space: nowrap;
}

.pildora:hover { border-color: var(--azul); color: var(--azul); }

.pildora.activo {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
}

.pildora.vacia { opacity: .5; }

.pildora .cuenta {
    font-variant-numeric: tabular-nums;
    font-size: 11px;
    padding: 1px 6px;
    border-radius: 999px;
    background: #eef1f6;
    color: var(--tinta-2);
}

.pildora.activo .cuenta {
    background: rgba(255,255,255,.22);
    color: #fff;
}

/* Las fechas exactas van PLEGADAS: casi siempre se busca "hoy" o "esta
   semana", y dos selectores de fecha siempre abiertos ocupan la mitad de la
   barra para el caso raro. */
.fechas-sueltas summary {
    cursor: pointer;
    font-size: 12.5px;
    color: var(--tinta-2);
    list-style: none;
    padding: 5px 11px;
    border: 1px dashed var(--borde);
    border-radius: 999px;
}

.fechas-sueltas summary:hover { color: var(--azul); border-color: var(--azul); }
.fechas-sueltas summary::-webkit-details-marker { display: none; }

.fechas-sueltas form {
    display: flex;
    gap: 7px;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 9px;
}

.fechas-sueltas label {
    font-size: 12px;
    color: var(--tinta-2);
    margin: 0;
}

.fechas-sueltas input[type=date] {
    padding: 6px 9px;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font-size: 13px;
}

/* El punto de color dice la gravedad SIN leer: en una tabla larga el ojo
   baja por la columna y se para donde hay rojo. */
.punto {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.punto-rojo { background: var(--rojo); }
.punto-ambar { background: var(--ambar); }
.punto-gris { background: #c8d0dc; }

.tabla-eventos td { padding-top: 9px; padding-bottom: 9px; }

.cuando-relativo {
    font-weight: 600;
    font-size: 12.5px;
}

.que-paso {
    display: flex;
    align-items: center;
    gap: 7px;
    font-weight: 500;
}

/* El detalle es la columna que crece. Se deja partir en DOS lineas como
   maximo: a una sola linea se corta justo donde dice que fallo, y sin tope
   una fila con un error largo empuja la tabla entera. */
.detalle-evento {
    color: var(--tinta-2);
    font-size: 12.5px;
    line-height: 1.35;
    max-width: 520px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Un filo de color a la izquierda: en una tabla larga, el error se encuentra
   pasando el ojo por el borde, sin leer la columna de severidad. */
.tabla tr.sev-error td:first-child { box-shadow: inset 3px 0 0 var(--rojo); }
.tabla tr.sev-aviso td:first-child { box-shadow: inset 3px 0 0 var(--ambar); }

/* ---- Paginador ---- */

.paginador {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 14px;
}

.paginador-cuenta {
    font-size: 13px;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}

.paginador-botones {
    display: flex;
    gap: 4px;
    align-items: center;
}

.paginador-botones a,
.paginador-botones span {
    min-width: 34px;
    height: 34px;
    padding: 0 9px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--borde);
    border-radius: 8px;
    background: var(--blanco);
    color: var(--tinta);
    text-decoration: none;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.paginador-botones a:hover {
    border-color: var(--azul);
    color: var(--azul);
}

.paginador-botones .actual {
    background: var(--azul);
    border-color: var(--azul);
    color: #fff;
    font-weight: 700;
}

.paginador-botones .inerte {
    color: #c3cbd8;
    background: #f7f9fc;
}

.paginador-tamano {
    display: flex;
    gap: 5px;
    align-items: center;
    font-size: 12.5px;
}

.paginador-tamano a,
.paginador-tamano .actual {
    padding: 3px 9px;
    border-radius: 7px;
    text-decoration: none;
    font-variant-numeric: tabular-nums;
}

.paginador-tamano a { color: var(--tinta-2); border: 1px solid var(--borde); background: var(--blanco); }
.paginador-tamano a:hover { border-color: var(--azul); color: var(--azul); }

.paginador-tamano .actual {
    background: var(--azul);
    color: #fff;
    font-weight: 700;
    border: 1px solid var(--azul);
}

/* ---- Barra de uso ---- */

.uso {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 120px;
}

.uso-barra {
    flex: 1;
    height: 6px;
    background: #eef1f6;
    border-radius: 999px;
    overflow: hidden;
    min-width: 54px;
}

.uso-barra i {
    display: block;
    height: 100%;
    background: var(--azul-claro);
    border-radius: 999px;
}

.uso-cifra {
    font-variant-numeric: tabular-nums;
    font-size: 12px;
    color: var(--tinta-2);
    white-space: nowrap;
}

/* ---- Grafico de dias ---- */

.dias {
    display: flex;
    align-items: flex-end;
    gap: 3px;
    height: 90px;
    padding-top: 8px;
}

.dias div {
    flex: 1;
    background: var(--azul-claro);
    border-radius: 3px 3px 0 0;
    min-height: 2px;
    opacity: .85;
}

.dias div.cero { background: #e7ebf2; }

.dias-pie {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--tinta-2);
    margin-top: 6px;
}

/* ---- Filtros ---- */

.filtros {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.filtros input[type=search] {
    padding: 7px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    min-width: 260px;
    font-size: 13px;
}

.pestanas { display: flex; gap: 4px; flex-wrap: wrap; }

.pestanas a {
    padding: 6px 13px;
    border-radius: 999px;
    text-decoration: none;
    color: var(--tinta-2);
    font-size: 13px;
    font-weight: 500;
    border: 1px solid transparent;
}

.pestanas a:hover { background: #eef1f6; }

.pestanas a.activo {
    background: var(--azul);
    color: #fff;
}

/* ---- Avisos ---- */

.aviso {
    padding: 11px 15px;
    border-radius: var(--radio);
    margin-bottom: 16px;
    font-size: 13.5px;
    border: 1px solid;
}

.aviso-exito { background: var(--verde-fondo); border-color: #b7e2d2; color: var(--verde); }
.aviso-error { background: var(--rojo-fondo); border-color: #f2c3bf; color: var(--rojo); }
.aviso-ambar { background: var(--ambar-fondo); border-color: #eed8a8; color: var(--ambar); }

.aviso strong { font-weight: 700; }

.aviso-clave {
    font-family: Consolas, "Courier New", monospace;
    font-size: 18px;
    letter-spacing: .06em;
    background: #fff;
    border: 1px dashed currentColor;
    border-radius: 7px;
    padding: 6px 14px;
    display: inline-block;
    margin-top: 6px;
}

/* ---- Vacio ---- */

.vacio {
    text-align: center;
    padding: 46px 20px;
    color: var(--tinta-2);
}

.vacio p { margin: 0; }

/* ---- Entrar ---- */

.entrar-pagina {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(140deg, var(--azul) 0%, #0d2a63 100%);
    padding: 20px;
}

.entrar-caja {
    background: var(--blanco);
    border-radius: 14px;
    padding: 34px 32px;
    width: 100%;
    max-width: 392px;
    box-shadow: 0 18px 48px rgba(0,0,0,.28);
}

.entrar-caja h1 {
    font-size: 19px;
    margin-bottom: 2px;
}

.entrar-caja .subtitulo { margin-bottom: 22px; }

.campo { margin-bottom: 14px; }

.campo label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--tinta-2);
    margin-bottom: 5px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.campo input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--borde);
    border-radius: 8px;
    font-size: 14px;
}

.campo input:focus {
    outline: 2px solid var(--azul-claro);
    outline-offset: 1px;
    border-color: var(--azul-claro);
}

.btn-principal {
    width: 100%;
    padding: 11px;
    background: var(--azul);
    color: #fff;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
}

.btn-principal:hover { background: #0f3277; }

/* ---- Detalle ---- */

.volver {
    display: inline-block;
    color: var(--tinta-2);
    text-decoration: none;
    font-size: 13px;
    margin-bottom: 10px;
}

.volver:hover { color: var(--azul); }

.rejilla-2 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 16px;
    align-items: start;
}

@media (max-width: 900px) {
    .rejilla-2 { grid-template-columns: 1fr; }
}

.datos { width: 100%; }

.datos th {
    text-align: left;
    font-weight: 500;
    color: var(--tinta-2);
    padding: 5px 14px 5px 0;
    white-space: nowrap;
    vertical-align: top;
    font-size: 13px;
}

.datos td { padding: 5px 0; font-size: 13px; }

.acciones-caja {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accion {
    border: 1px solid var(--borde);
    border-radius: 9px;
    padding: 12px 14px;
}

.accion h3 {
    font-size: 13px;
    font-weight: 700;
    margin: 0 0 3px;
}

.accion p {
    font-size: 12.5px;
    color: var(--tinta-2);
    margin: 0 0 9px;
}

.accion form { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }

.accion select, .accion input[type=text] {
    padding: 7px 10px;
    border: 1px solid var(--borde);
    border-radius: 7px;
    font-size: 13px;
}

.accion input[type=text] { flex: 1; min-width: 130px; }

.linea-tiempo { list-style: none; margin: 0; padding: 0; }

.linea-tiempo li {
    padding: 9px 0 9px 15px;
    border-left: 2px solid var(--borde);
    position: relative;
    font-size: 13px;
}

.linea-tiempo li::before {
    content: "";
    position: absolute;
    left: -5px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--azul-claro);
}

.linea-tiempo .cuando {
    font-size: 11.5px;
    color: var(--tinta-2);
    font-variant-numeric: tabular-nums;
}

/* ---- Pantallas estrechas --------------------------------------------------

   Esta consola se mira casi siempre en un monitor, pero «casi siempre» no es
   «siempre»: se abre desde el movil justo cuando hace falta, que suele ser
   cuando alguien llama porque no puede entrar. Si la barra se sale por el
   borde derecho, ese es exactamente el dia en que no se puede hacer nada.

   Dos cosas cambian de verdad por debajo de 760px:

   1. La barra pasa a dos filas —marca y sesion arriba, menu abajo— en vez de
      empujar «Eventos» y «Salir» fuera de la pantalla.

   2. Las tablas dejan de ser tablas. Siete columnas no entran en 390px de
      ninguna manera, y un scroll horizontal escondido dentro de un div no lo
      encuentra nadie. Cada fila pasa a ser una ficha con el rotulo delante de
      cada dato. De ahi los `data-rotulo` de los <td>: la cabecera se oculta y
      cada celda pasa a llevar su propio titulo.

   ⚠️ Si añades una columna a una tabla, ponle su `data-rotulo` al <td>. Sin
      el, la celda sigue saliendo, pero suelta y sin decir que es.
   -------------------------------------------------------------------------- */

@media (max-width: 760px) {

    /* --- Barra superior --- */

    .barra-interior {
        height: auto;
        min-height: 52px;
        flex-wrap: wrap;
        gap: 8px 12px;
        padding: 8px 14px;
    }

    .marca { font-size: 14px; }

    .sesion {
        margin-left: auto;
        gap: 8px;
        font-size: 12px;
    }

    /* El nombre del administrador puede ser largo, y largo aqui significa
       empujar el boton de salir fuera de la pantalla. */
    .sesion > span {
        max-width: 130px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* El menu baja a su propia fila y se desliza si no cabe. Con `order`, no
       moviendo el HTML: el orden de lectura sigue siendo el bueno. */
    .menu {
        order: 3;
        flex: 0 0 100%;
        gap: 2px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .menu::-webkit-scrollbar { display: none; }
    .menu a { padding: 6px 12px; white-space: nowrap; }

    /* --- Contenido --- */

    .contenido { padding: 16px 14px 48px; }
    .tarjeta { padding: 13px 14px; }

    .cabecera-eventos { gap: 8px; }
    .cabecera-cifra { text-align: left; }
    .cabecera-cifra .valor { font-size: 22px; }

    .cifra .rotulo { white-space: normal; }

    /* Un `ssh -L 5433:localhost:5432 root@...` es UNA palabra para el
       navegador, y una palabra que no cabe desborda la pagina entera. */
    code { word-break: break-all; }

    /* --- Filtros --- */

    .fila-filtros .busca { flex: 0 0 100%; min-width: 0; }
    .filtros input[type=search] { min-width: 0; flex: 1 1 100%; }
    .crece, .separador-vertical { display: none; }
    .fechas-sueltas { flex: 0 0 100%; }
    .fechas-sueltas form input[type=date] { flex: 1; min-width: 0; }

    /* --- Las tablas, como fichas --- */

    .envoltorio-tabla {
        background: transparent;
        border: 0;
        border-radius: 0;
        overflow: visible;
    }

    .tabla { background: transparent; }
    .tabla thead { display: none; }
    .tabla, .tabla tbody, .tabla tr { display: block; width: 100%; }

    .tabla tbody tr {
        background: var(--blanco);
        border: 1px solid var(--borde);
        border-radius: var(--radio);
        margin-bottom: 10px;
        padding: 4px 0;
        overflow: hidden;
    }

    .tabla tbody tr:hover { background: var(--blanco); }

    .tabla td {
        display: block;
        border: 0;
        padding: 6px 13px;
    }

    /* Rotulo fijo a la izquierda, dato a la derecha.
       ⚠️ `minmax(0, 1fr)` y no `1fr`: con `1fr` un texto largo sin espacios
          —un correo, una IP, un detalle de error— ensancha la rejilla y vuelve
          el desbordamiento que veniamos a quitar. */
    .tabla td[data-rotulo] {
        display: grid;
        grid-template-columns: 86px minmax(0, 1fr);
        gap: 10px;
        align-items: baseline;
    }

    .tabla td[data-rotulo]::before {
        content: attr(data-rotulo);
        font-size: 10.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .05em;
        color: var(--tinta-2);
    }

    /* La primera celda hace de titulo de la ficha: por eso va sin rotulo. */
    .tabla tbody td:first-child {
        padding-top: 10px;
        font-size: 13.5px;
    }

    .tabla .num, .tabla .acciones { text-align: left; }

    .tabla td.acciones {
        padding-top: 4px;
        padding-bottom: 11px;
        white-space: normal;
    }

    .tabla td.acciones > .btn { width: 100%; }

    .tabla td.acciones .btn-group {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        width: 100%;
    }

    /* El filo de color pasa de la celda a la ficha entera: en una lista de
       fichas, el borde de la tarjeta es lo que se ve sin leer. */
    .tabla tr.sev-error td:first-child,
    .tabla tr.sev-aviso td:first-child { box-shadow: none; }
    .tabla tbody tr.sev-error { border-left: 3px solid var(--rojo); }
    .tabla tbody tr.sev-aviso { border-left: 3px solid var(--ambar); }

    /* Ya no hay columna que ensanchar, y en ficha se quiere leer entero. */
    .detalle-evento {
        max-width: none;
        -webkit-line-clamp: 4;
    }

    /* La fila de «aqui no hay nada» ocupa la ficha entera y sin rotulo. */
    .tabla tbody td[colspan] { display: block; padding: 0; }
    .vacio { padding: 30px 16px; }

    /* --- Paginador --- */

    .paginador { gap: 10px; }
    .paginador-cuenta, .paginador-tamano { flex: 0 0 100%; }
    .paginador-botones { flex-wrap: wrap; }

    /* --- Detalle de empresa --- */

    .datos th { padding-right: 10px; }
    .dias { height: 64px; }
}

@media (max-width: 420px) {
    /* A este ancho el subtitulo de la marca es lo primero que sobra. */
    .marca span { display: none; }
    .sesion > span { max-width: 92px; }
    .tabla td[data-rotulo] { grid-template-columns: 74px minmax(0, 1fr); }
    .cifras { grid-template-columns: 1fr 1fr; gap: 9px; }
    .cifra { padding: 11px 12px; }
    .cifra .valor { font-size: 21px; }
}