/* ==========================================================================
   SUBACABUR — panel administrativo.

   Se carga DESPUES de Bootstrap 5 para que la paleta del brief tenga
   prioridad. Escrita a mano: no es una copia ni un fork de ningun framework.

   Sin dependencias externas de ninguna clase. La Content-Security-Policy del
   sitio es `default-src 'self'` con `style-src 'self' 'nonce-…'` y sin
   'unsafe-inline' (core/Security/SecurityHeaders.php), de modo que aqui no
   puede haber @import de Google Fonts, ni url() a un CDN, ni iconos servidos
   por terceros. La tipografia es la del sistema y los iconos son SVG en linea.

   Bootstrap puede no estar desplegado todavia (assets/vendor/bootstrap/LEEME.txt):
   esta hoja es autonoma y el panel conserva su identidad visual sin el.

   Paleta: la del LOGO, no la del brief.
     El brief pedia verde; el arte que entrego el cliente es azul marino, rojo y
     dorado. Manda el logo, que es lo que ya esta impreso.
     azul oscuro #041B3B   azul medio #0F3A6B   dorado #C8A44D
     blanco      #FFFFFF   gris claro #F4F6FA
     Los verdes que quedan son SEMANTICOS (--adm-exito), no de marca.

   Indice
     1. Fichas de color y medidas
     2. Base
     3. Interruptor del menu (CSS puro, sin JavaScript)
     4. Barra lateral
     5. Cuerpo, cabecera y pie
     6. Avisos flash
     7. Rejillas
     8. Tarjetas de metrica
     9. Paneles
    10. Grafico de visitas
    11. Tablas
    12. Bitacora de actividad
    13. Utilidades y preferencias del usuario
   ========================================================================== */

/* --- 1. Fichas de color y medidas ---------------------------------------- */

:root {
    --adm-azul-oscuro: #041B3B;
    --adm-azul-medio: #0F3A6B;
    --adm-dorado: #C8A44D;
    /* El dorado del brief sobre blanco da 2,4:1 y no llega a AA. Este es el
       mismo tono bajado de valor: 4,8:1 sobre blanco, para texto e iconos. */
    --adm-dorado-hondo: #8A6E22;
    --adm-blanco: #FFFFFF;
    --adm-gris-claro: #F4F6FA;

    /* Derivados: todos salen de la paleta del brief, ninguno es un color nuevo. */
    --adm-azul-hondo: #02122A;

    /* Alias en desuso: los usos existentes siguen funcionando y se
       repintan solos. --adm-exito NO se toca: verde de «correcto» es
       semantico, no de marca. */
    --adm-verde-oscuro: var(--adm-azul-oscuro);
    --adm-verde-medio: var(--adm-azul-medio);
    --adm-verde-hondo: var(--adm-azul-hondo);
    --adm-tinta: #12192B;
    --adm-tinta-tenue: #4E5871;
    --adm-borde: #DCE1EA;
    --adm-borde-suave: #EDF1F7;

    --adm-exito: #2E7D32;
    --adm-error: #A32B22;
    --adm-aviso: #9A6B12;
    --adm-info: #0F3A6B;

    --adm-barra: 17rem;
    --adm-radio: 12px;
    --adm-radio-chico: 8px;

    --adm-sombra: 0 1px 2px rgba(4, 27, 59, .05), 0 10px 28px rgba(4, 27, 59, .07);
    --adm-sombra-alta: 0 2px 6px rgba(4, 27, 59, .10), 0 18px 40px rgba(4, 27, 59, .12);

    --adm-tipo: "Segoe UI", Roboto, "Helvetica Neue", Arial, system-ui, sans-serif;
    --adm-mono: "Cascadia Mono", Consolas, "Liberation Mono", monospace;

    --adm-transicion: .22s ease;
}

/* --- 2. Base -------------------------------------------------------------- */

.suba-adm *,
.suba-adm *::before,
.suba-adm *::after { box-sizing: border-box; }

body.suba-adm {
    margin: 0;
    min-height: 100vh;
    font-family: var(--adm-tipo);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--adm-tinta);
    background: var(--adm-gris-claro);
    -webkit-text-size-adjust: 100%;
}

.suba-adm a { color: var(--adm-verde-medio); text-decoration: none; }
.suba-adm a:hover,
.suba-adm a:focus-visible { color: var(--adm-verde-oscuro); text-decoration: underline; }

/* Un foco visible es un requisito, no un adorno: el panel se opera con teclado. */
.suba-adm :focus-visible {
    outline: 3px solid var(--adm-dorado);
    outline-offset: 2px;
    border-radius: 4px;
}

.suba-adm h1, .suba-adm h2, .suba-adm h3 {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
    color: var(--adm-verde-hondo);
}

.suba-adm p { margin: 0; }

/* Enlace de salto: fuera de pantalla hasta que recibe el foco. */
.suba-adm__saltar {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .7rem 1.1rem;
    background: var(--adm-verde-oscuro);
    color: var(--adm-blanco);
    border-radius: 0 0 var(--adm-radio-chico) 0;
}

.suba-adm__saltar:focus {
    left: 0;
    color: var(--adm-blanco);
}

/* Icono SVG en linea: hereda el color del texto que lo rodea. */
.suba-adm__icono {
    flex: 0 0 auto;
    width: 1.25rem;
    height: 1.25rem;
    vertical-align: -.22em;
}

/* --- 3. Interruptor del menu (CSS puro, sin JavaScript) ------------------- */
/*
   Es una casilla de verdad, no un <div> con un script: la CSP prohibe
   'unsafe-inline' y el panel no carga JavaScript propio. Al ser un control de
   formulario real recibe el foco con Tab y se acciona con Espacio.
   La hamburguesa se dibuja con tres degradados sobre la propia casilla.
*/

.suba-adm__interruptor {
    position: fixed;
    top: .6rem;
    left: .65rem;
    z-index: 60;
    width: 2.75rem;
    height: 2.75rem;
    margin: 0;
    padding: 0;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    color: var(--adm-verde-oscuro);
    background-color: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio-chico);
    box-shadow: var(--adm-sombra);
    background-image:
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor),
        linear-gradient(currentColor, currentColor);
    background-repeat: no-repeat;
    background-size: 1.25rem 2px;
    background-position: center .85rem, center 1.3rem, center 1.75rem;
    transition: background-color var(--adm-transicion), color var(--adm-transicion);
}

.suba-adm__interruptor:hover { border-color: var(--adm-verde-medio); }

.suba-adm__interruptor:checked {
    color: var(--adm-blanco);
    background-color: var(--adm-verde-oscuro);
    border-color: var(--adm-verde-oscuro);
}

/* Velo que cierra el menu al tocar fuera. Es un <label>: no necesita script. */
.suba-adm__velo {
    position: fixed;
    inset: 0;
    z-index: 45;
    margin: 0;
    background: rgba(2, 18, 42, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--adm-transicion), visibility var(--adm-transicion);
}

.suba-adm__interruptor:checked ~ .suba-adm__velo {
    opacity: 1;
    visibility: visible;
}

/* --- 4. Barra lateral ----------------------------------------------------- */

.suba-adm__barra {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 50;
    display: flex;
    flex-direction: column;
    width: var(--adm-barra);
    max-width: 84vw;
    padding: 1rem .85rem 1.25rem;
    overflow-y: auto;
    overscroll-behavior: contain;
    color: rgba(255, 255, 255, .84);
    background: linear-gradient(178deg, var(--adm-verde-oscuro) 0%, var(--adm-verde-hondo) 100%);
    transform: translateX(-100%);
    transition: transform var(--adm-transicion);
}

.suba-adm__interruptor:checked ~ .suba-adm__barra { transform: none; }

.suba-adm__marca {
    display: flex;
    gap: .7rem;
    align-items: center;
    padding: .55rem .6rem 1.1rem;
    color: var(--adm-blanco);
    text-decoration: none;
}

.suba-adm__marca:hover,
.suba-adm__marca:focus-visible { color: var(--adm-blanco); text-decoration: none; }

.suba-adm__marca-sigla {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    font-size: .95rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--adm-verde-hondo);
    background: var(--adm-dorado);
    border-radius: 10px;
}

.suba-adm__marca-texto { display: flex; flex-direction: column; min-width: 0; }

.suba-adm__marca-nombre {
    font-size: 1.02rem;
    font-weight: 700;
    letter-spacing: .02em;
}

.suba-adm__marca-lema {
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    /* El dorado sobre el verde oscuro se queda en 3,3:1: aqui va blanco velado,
       que llega a 4,7:1. El dorado se reserva para la sigla y el filete del
       modulo abierto, donde no es texto. */
    color: rgba(255, 255, 255, .78);
}

.suba-adm__nav { flex: 1 1 auto; }

.suba-adm__grupo {
    margin: 1.15rem .75rem .4rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    /* .46 daba 3,0:1 sobre el verde oscuro; .68 es el minimo que pasa AA. */
    color: rgba(255, 255, 255, .68);
}

.suba-adm__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.suba-adm__enlace {
    position: relative;
    display: flex;
    gap: .68rem;
    align-items: center;
    padding: .58rem .75rem;
    margin-bottom: .12rem;
    font-size: .93rem;
    color: rgba(255, 255, 255, .84);
    border-radius: var(--adm-radio-chico);
    text-decoration: none;
    transition: background-color var(--adm-transicion), color var(--adm-transicion);
}

.suba-adm__enlace:hover,
.suba-adm__enlace:focus-visible {
    color: var(--adm-blanco);
    background: rgba(255, 255, 255, .10);
    text-decoration: none;
}

.suba-adm__enlace.es-vigente {
    color: var(--adm-blanco);
    font-weight: 600;
    background: rgba(200, 164, 77, .18);
}

/* Marca dorada del modulo abierto. */
.suba-adm__enlace.es-vigente::before {
    content: "";
    position: absolute;
    left: -.85rem;
    top: 50%;
    width: 3px;
    height: 1.5rem;
    background: var(--adm-dorado);
    border-radius: 0 3px 3px 0;
    transform: translateY(-50%);
}

.suba-adm__enlace-texto { min-width: 0; }

.suba-adm__enlace--tenue {
    font-size: .85rem;
    color: rgba(255, 255, 255, .72);
}

.suba-adm__barra-pie {
    margin-top: 1rem;
    padding-top: .85rem;
    border-top: 1px solid rgba(255, 255, 255, .13);
}

/* --- 5. Cuerpo, cabecera y pie -------------------------------------------- */

.suba-adm__cuerpo {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.suba-adm__cabecera {
    position: sticky;
    top: 0;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    align-items: center;
    justify-content: space-between;
    /* En movil la casilla-hamburguesa flota sobre esta esquina: se le deja sitio. */
    padding: .8rem 1rem .8rem 4rem;
    background: rgba(255, 255, 255, .94);
    border-bottom: 1px solid var(--adm-borde);
    backdrop-filter: saturate(140%) blur(6px);
}

.suba-adm__cabecera-titulo { min-width: 0; }

.suba-adm__h1 {
    font-size: 1.28rem;
    letter-spacing: -.01em;
}

.suba-adm__subtitulo {
    margin-top: .1rem;
    font-size: .82rem;
    color: var(--adm-tinta-tenue);
}

.suba-adm__cabecera-derecha {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem .85rem;
    align-items: center;
}

.suba-adm__acciones { display: flex; gap: .5rem; align-items: center; }

.suba-adm__usuario {
    display: flex;
    gap: .6rem;
    align-items: center;
    min-width: 0;
}

.suba-adm__avatar {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.35rem;
    height: 2.35rem;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .03em;
    color: var(--adm-blanco);
    background: linear-gradient(140deg, var(--adm-verde-medio), var(--adm-verde-oscuro));
    border-radius: 50%;
}

.suba-adm__usuario-texto {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.suba-adm__usuario-nombre {
    font-size: .88rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.suba-adm__usuario-rol {
    font-size: .72rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--adm-dorado-hondo);
}

.suba-adm__salida { margin: 0; }

.suba-adm__boton {
    display: inline-flex;
    gap: .45rem;
    align-items: center;
    padding: .48rem .85rem;
    font: inherit;
    font-size: .87rem;
    font-weight: 600;
    color: var(--adm-verde-oscuro);
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio-chico);
    cursor: pointer;
    transition: background-color var(--adm-transicion), border-color var(--adm-transicion),
        color var(--adm-transicion);
}

.suba-adm__boton:hover,
.suba-adm__boton:focus-visible {
    color: var(--adm-blanco);
    background: var(--adm-verde-oscuro);
    border-color: var(--adm-verde-oscuro);
}

.suba-adm__principal {
    flex: 1 1 auto;
    padding: 1.15rem 1rem 2rem;
}

.suba-adm__pie {
    padding: 1rem;
    font-size: .78rem;
    color: var(--adm-tinta-tenue);
    text-align: center;
    border-top: 1px solid var(--adm-borde);
}

/* --- 6. Avisos flash ------------------------------------------------------ */

.suba-adm__avisos {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    padding: 1rem 1rem 0;
}

.suba-adm-aviso {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .6rem;
    align-items: baseline;
    padding: .7rem .95rem;
    font-size: .9rem;
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-left: 4px solid var(--adm-tinta-tenue);
    border-radius: var(--adm-radio-chico);
    box-shadow: var(--adm-sombra);
}

.suba-adm-aviso__rotulo {
    font-weight: 700;
    font-size: .74rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}

.suba-adm-aviso--exito { border-left-color: var(--adm-exito); }
.suba-adm-aviso--exito .suba-adm-aviso__rotulo { color: var(--adm-exito); }

.suba-adm-aviso--error { border-left-color: var(--adm-error); }
.suba-adm-aviso--error .suba-adm-aviso__rotulo { color: var(--adm-error); }

.suba-adm-aviso--advertencia { border-left-color: var(--adm-aviso); }
.suba-adm-aviso--advertencia .suba-adm-aviso__rotulo { color: var(--adm-aviso); }

.suba-adm-aviso--info { border-left-color: var(--adm-info); }
.suba-adm-aviso--info .suba-adm-aviso__rotulo { color: var(--adm-info); }

/* --- 7. Rejillas ---------------------------------------------------------- */

.suba-adm-rejilla {
    display: grid;
    gap: 1rem;
    margin-bottom: 1rem;
}

.suba-adm-rejilla--metricas { grid-template-columns: 1fr; }
.suba-adm-rejilla--paneles { grid-template-columns: 1fr; }

/* --- 8. Tarjetas de metrica ----------------------------------------------- */

.suba-adm-tarjeta {
    position: relative;
    display: flex;
    gap: .85rem;
    align-items: flex-start;
    padding: 1rem 1.05rem;
    overflow: hidden;
    color: inherit;
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio);
    box-shadow: var(--adm-sombra);
    transition: box-shadow var(--adm-transicion), transform var(--adm-transicion),
        border-color var(--adm-transicion);
}

/* Filete superior: es lo unico que distingue el tono de una tarjeta. */
.suba-adm-tarjeta::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 3px;
    background: var(--adm-borde);
}

.suba-adm-tarjeta--verde::before {
    background: linear-gradient(90deg, var(--adm-verde-oscuro), var(--adm-verde-medio));
}

.suba-adm-tarjeta--dorado::before {
    background: linear-gradient(90deg, var(--adm-dorado), #E0C583);
}

.suba-adm-tarjeta--neutro::before {
    background: linear-gradient(90deg, var(--adm-tinta-tenue), var(--adm-borde));
}

.suba-adm-tarjeta--enlace:hover,
.suba-adm-tarjeta--enlace:focus-visible {
    color: inherit;
    text-decoration: none;
    border-color: var(--adm-verde-medio);
    box-shadow: var(--adm-sombra-alta);
    transform: translateY(-2px);
}

.suba-adm-tarjeta__simbolo {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 2.6rem;
    height: 2.6rem;
    color: var(--adm-verde-oscuro);
    background: var(--adm-gris-claro);
    border-radius: 10px;
}

.suba-adm-tarjeta--dorado .suba-adm-tarjeta__simbolo {
    color: var(--adm-dorado-hondo);
    background: rgba(200, 164, 77, .16);
}

.suba-adm-tarjeta__cuerpo {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.suba-adm-tarjeta__rotulo {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adm-tinta-tenue);
}

.suba-adm-tarjeta__cifra {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    color: var(--adm-verde-hondo);
    /* Los digitos no bailan al cambiar la cifra. */
    font-variant-numeric: tabular-nums;
}

.suba-adm-tarjeta__pie {
    font-size: .8rem;
    color: var(--adm-tinta-tenue);
}

/* --- 9. Paneles ----------------------------------------------------------- */

.suba-adm-panel {
    padding: 1.05rem 1.1rem 1.2rem;
    margin-bottom: 1rem;
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio);
    box-shadow: var(--adm-sombra);
}

.suba-adm-rejilla .suba-adm-panel { margin-bottom: 0; }

.suba-adm-panel__cabecera {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .9rem;
    align-items: baseline;
    justify-content: space-between;
    padding-bottom: .8rem;
    margin-bottom: .95rem;
    border-bottom: 1px solid var(--adm-borde-suave);
}

.suba-adm-panel__titulo {
    display: flex;
    gap: .5rem;
    align-items: center;
    font-size: 1.02rem;
}

.suba-adm-panel__titulo .suba-adm__icono { color: var(--adm-dorado-hondo); }

.suba-adm-panel__nota {
    font-size: .78rem;
    color: var(--adm-tinta-tenue);
}

.suba-adm-panel__mas {
    font-size: .82rem;
    font-weight: 600;
}

.suba-adm-vacio {
    padding: 1.4rem .5rem;
    font-size: .88rem;
    color: var(--adm-tinta-tenue);
    text-align: center;
    background: var(--adm-gris-claro);
    border-radius: var(--adm-radio-chico);
}

.suba-adm-lista-cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin: 0;
    padding: 0;
    list-style: none;
    text-align: center;
}

.suba-adm-lista-cifras li {
    padding: .65rem .35rem;
    background: var(--adm-gris-claro);
    border-radius: var(--adm-radio-chico);
}

.suba-adm-lista-cifras__valor {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--adm-verde-hondo);
    font-variant-numeric: tabular-nums;
}

.suba-adm-lista-cifras__valor--aviso { color: var(--adm-error); }

.suba-adm-lista-cifras__rotulo {
    display: block;
    font-size: .74rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-tinta-tenue);
}

/* --- 10. Grafico de visitas ----------------------------------------------- */

.suba-adm-visitas__cifras {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .6rem;
    margin-bottom: 1.1rem;
}

.suba-adm-visitas__cifra {
    padding: .7rem .5rem;
    text-align: center;
    background: var(--adm-gris-claro);
    border-radius: var(--adm-radio-chico);
}

.suba-adm-visitas__valor {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    color: var(--adm-verde-hondo);
    font-variant-numeric: tabular-nums;
}

.suba-adm-visitas__rotulo {
    display: block;
    font-size: .72rem;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--adm-tinta-tenue);
}

.suba-adm-grafico {
    display: flex;
    gap: .4rem;
    align-items: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suba-adm-grafico__columna {
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: .3rem;
    align-items: center;
    min-width: 0;
}

.suba-adm-grafico__cifra {
    font-size: .74rem;
    font-weight: 600;
    color: var(--adm-tinta-tenue);
    font-variant-numeric: tabular-nums;
}

.suba-adm-grafico__carril {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 6.5rem;
    background: var(--adm-gris-claro);
    border-radius: var(--adm-radio-chico);
}

/*
   --suba-adm-alto lo declara un bloque <style nonce="…"> de la seccion 'cabeza'
   del tablero, una regla por barra. Sin ese bloque la barra queda a cero, que es
   lo correcto: nunca se inventa un alto.
*/
.suba-adm-grafico__barra {
    width: 100%;
    height: var(--suba-adm-alto, 0%);
    min-height: 3px;
    background: linear-gradient(180deg, var(--adm-verde-medio), var(--adm-verde-oscuro));
    border-radius: var(--adm-radio-chico);
    transition: height var(--adm-transicion);
}

.suba-adm-grafico__etiqueta {
    font-size: .74rem;
    line-height: 1.2;
    text-align: center;
    color: var(--adm-tinta-tenue);
}

.suba-adm-grafico__etiqueta abbr {
    text-decoration: none;
    border-bottom: 0;
    font-weight: 600;
    color: var(--adm-tinta);
}

.suba-adm-grafico__dia {
    display: block;
    font-size: .68rem;
}

/* --- 11. Tablas ----------------------------------------------------------- */

/* El desbordamiento se queda DENTRO de este marco: la pagina nunca se va de ancho. */
.suba-adm-tabla__marco {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.suba-adm-tabla {
    width: 100%;
    min-width: 44rem;
    border-collapse: collapse;
    font-size: .9rem;
}

.suba-adm-tabla__pie {
    caption-side: bottom;
    padding-top: .7rem;
    font-size: .76rem;
    color: var(--adm-tinta-tenue);
    text-align: left;
}

.suba-adm-tabla thead th {
    padding: .55rem .7rem;
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--adm-tinta-tenue);
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid var(--adm-borde);
}

.suba-adm-tabla tbody th,
.suba-adm-tabla tbody td {
    padding: .7rem;
    vertical-align: middle;
    border-bottom: 1px solid var(--adm-borde-suave);
}

.suba-adm-tabla tbody tr:last-child th,
.suba-adm-tabla tbody tr:last-child td { border-bottom: 0; }

.suba-adm-tabla tbody tr:hover { background: var(--adm-gris-claro); }

.suba-adm-tabla__num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.suba-adm-tabla thead th.suba-adm-tabla__num { text-align: right; }

.suba-adm-tabla__fuerte { font-weight: 700; color: var(--adm-verde-hondo); }

.suba-adm-tabla__modulo { font-weight: 600; text-align: left; }

.suba-adm-tabla__enlace {
    display: inline-flex;
    gap: .5rem;
    align-items: center;
    color: var(--adm-verde-hondo);
}

.suba-adm-tabla__enlace .suba-adm__icono { color: var(--adm-verde-medio); }

.suba-adm-tabla__detalle {
    display: block;
    margin-top: .15rem;
    font-size: .76rem;
    font-weight: 400;
    color: var(--adm-tinta-tenue);
}

.suba-adm-pildora {
    display: inline-block;
    min-width: 2.6rem;
    padding: .12rem .5rem;
    font-size: .8rem;
    font-weight: 600;
    text-align: center;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
}

.suba-adm-pildora--disponible { color: #14521A; background: rgba(15, 58, 107, .14); }
.suba-adm-pildora--reservado  { color: #7A5407; background: rgba(200, 164, 77, .22); }
.suba-adm-pildora--vendido    { color: #4A4F46; background: rgba(28, 36, 24, .09); }

/* --- 12. Bitacora de actividad -------------------------------------------- */

.suba-adm-actividad {
    display: flex;
    flex-direction: column;
    gap: .1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.suba-adm-actividad__fila {
    display: flex;
    gap: .7rem;
    align-items: flex-start;
    padding: .55rem .35rem;
    border-bottom: 1px solid var(--adm-borde-suave);
}

.suba-adm-actividad__fila:last-child { border-bottom: 0; }

.suba-adm-actividad__marca {
    flex: 0 0 auto;
    width: .55rem;
    height: .55rem;
    margin-top: .45rem;
    background: var(--adm-tinta-tenue);
    border-radius: 50%;
}

.suba-adm-actividad__marca--crear      { background: var(--adm-verde-medio); }
.suba-adm-actividad__marca--publicar   { background: var(--adm-verde-oscuro); }
.suba-adm-actividad__marca--actualizar { background: var(--adm-dorado); }
.suba-adm-actividad__marca--eliminar   { background: var(--adm-error); }
.suba-adm-actividad__marca--restaurar  { background: #7A9E4F; }
.suba-adm-actividad__marca--login      { background: #4A7FB5; }
.suba-adm-actividad__marca--logout     { background: #9BA394; }
.suba-adm-actividad__marca--login_fallido { background: var(--adm-error); }

.suba-adm-actividad__cuerpo { min-width: 0; }

.suba-adm-actividad__linea {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .45rem;
    align-items: baseline;
    font-size: .89rem;
}

.suba-adm-actividad__autor { color: var(--adm-verde-hondo); }

.suba-adm-actividad__accion { color: var(--adm-tinta); }

.suba-adm-actividad__tabla {
    padding: .05em .4em;
    font-family: var(--adm-mono);
    font-size: .82em;
    color: var(--adm-verde-hondo);
    background: rgba(4, 27, 59, .08);
    border-radius: 4px;
}

.suba-adm-actividad__registro {
    font-size: .82em;
    color: var(--adm-tinta-tenue);
    font-variant-numeric: tabular-nums;
}

.suba-adm-actividad__tiempo {
    display: block;
    margin-top: .1rem;
    font-size: .76rem;
    color: var(--adm-tinta-tenue);
}

/* --- 13. Utilidades y preferencias del usuario ---------------------------- */

/* Tabletas: las metricas ya caben de dos en dos. */
@media (min-width: 36em) {
    .suba-adm-rejilla--metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .suba-adm__principal { padding: 1.35rem 1.35rem 2.25rem; }
    .suba-adm__avisos { padding: 1.1rem 1.35rem 0; }
    .suba-adm__cabecera { padding-right: 1.35rem; }
}

/* Escritorio: la barra lateral deja de ser un cajon y el menu de movil sobra. */
@media (min-width: 62em) {
    .suba-adm__interruptor,
    .suba-adm__velo { display: none; }

    .suba-adm__barra {
        transform: none;
        transition: none;
    }

    .suba-adm__cuerpo { margin-left: var(--adm-barra); }

    .suba-adm__cabecera {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .suba-adm__principal { padding: 1.5rem 1.5rem 2.5rem; }
    .suba-adm__avisos { padding: 1.25rem 1.5rem 0; }

    .suba-adm-rejilla--metricas { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .suba-adm-rejilla--paneles { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }

    .suba-adm__h1 { font-size: 1.45rem; }
}

/*
   Pantallas anchas: seis metricas en una sola fila. El corte esta en 100em y no
   en 90em a proposito: descontada la barra lateral, a 1440 px cada tarjeta se
   quedaba en 171 px y la cifra chocaba con su rotulo.
*/
@media (min-width: 100em) {
    .suba-adm-rejilla--metricas { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

/* Quien pidio menos movimiento no recibe ninguno. */
@media (prefers-reduced-motion: reduce) {
    .suba-adm *,
    .suba-adm *::before,
    .suba-adm *::after {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
}

/* Contraste alto: se refuerzan los bordes, que es lo primero que se pierde. */
@media (prefers-contrast: more) {
    .suba-adm-tarjeta,
    .suba-adm-panel,
    .suba-adm-aviso { border-color: var(--adm-tinta-tenue); }

    .suba-adm__enlace.es-vigente { background: rgba(200, 164, 77, .32); }
}

/* Impresion: papel blanco, sin barra lateral ni cabecera pegajosa. */
@media print {
    .suba-adm__barra,
    .suba-adm__interruptor,
    .suba-adm__velo,
    .suba-adm__salida,
    .suba-adm__saltar { display: none !important; }

    body.suba-adm { background: #FFFFFF; }
    .suba-adm__cuerpo { margin-left: 0; }
    .suba-adm__cabecera { position: static; }

    .suba-adm-tarjeta,
    .suba-adm-panel {
        box-shadow: none;
        break-inside: avoid;
    }
}

/* ==========================================================================
   16. Pantalla de acceso (admin/auth/acceso, recuperar, restablecer)
   --------------------------------------------------------------------------
   Anadido en la verificacion de la Fase 2: las tres vistas de `admin/auth`
   faltaban y con ellas sus estilos. Son paginas autonomas —sin barra lateral
   ni cabecera— asi que no reutilizan .suba-adm; comparten unicamente las
   fichas de color del bloque 1.

   Sin @import, sin url() externo y sin style="" en las vistas: la CSP del
   sitio es `default-src 'self'` sin 'unsafe-inline'.
   ========================================================================== */

.suba-adm-acceso__cuerpo {
    margin: 0;
    min-height: 100vh;
    background: var(--adm-verde-hondo);
    color: var(--adm-tinta);
    font-family: var(--adm-tipo);
    font-size: 16px;
    line-height: 1.55;
    -webkit-text-size-adjust: 100%;
}

.suba-adm-acceso {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1.5rem 1rem;
    box-sizing: border-box;
}

.suba-adm-acceso__tarjeta {
    width: 100%;
    max-width: 26rem;
    box-sizing: border-box;
    padding: 2rem 1.75rem;
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio);
    box-shadow: var(--adm-sombra-alta);
}

.suba-adm-acceso__cabecera { margin-bottom: 1.5rem; }

.suba-adm-acceso__marca {
    margin: 0 0 .35rem;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--adm-dorado-hondo);
}

.suba-adm-acceso__titulo {
    margin: 0 0 .4rem;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--adm-verde-oscuro);
}

.suba-adm-acceso__bajada {
    margin: 0;
    font-size: .9rem;
    color: var(--adm-tinta-tenue);
}

.suba-adm-acceso__forma { margin: 0; }

/* --- Campos ------------------------------------------------------------ */

.suba-adm-campo { margin-bottom: 1.15rem; }

.suba-adm-campo__etiqueta {
    display: block;
    margin-bottom: .35rem;
    font-size: .875rem;
    font-weight: 600;
    color: var(--adm-tinta);
}

.suba-adm-campo__entrada {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: .65rem .75rem;
    font-family: inherit;
    font-size: 1rem;
    color: var(--adm-tinta);
    background: var(--adm-blanco);
    border: 1px solid var(--adm-borde);
    border-radius: var(--adm-radio-chico);
    transition: border-color var(--adm-transicion), box-shadow var(--adm-transicion);
}

.suba-adm-campo__entrada:focus-visible {
    outline: none;
    border-color: var(--adm-verde-medio);
    box-shadow: 0 0 0 3px rgba(15, 58, 107, .22);
}

.suba-adm-campo__entrada--error { border-color: var(--adm-error); }

.suba-adm-campo__entrada--error:focus-visible {
    border-color: var(--adm-error);
    box-shadow: 0 0 0 3px rgba(163, 43, 34, .20);
}

.suba-adm-campo__ayuda {
    margin: .35rem 0 0;
    font-size: .8rem;
    color: var(--adm-tinta-tenue);
}

.suba-adm-campo__error {
    margin: .35rem 0 0;
    font-size: .825rem;
    font-weight: 600;
    color: var(--adm-error);
}

/* --- Boton ------------------------------------------------------------- */

.suba-adm-acceso__enviar {
    display: block;
    width: 100%;
    padding: .7rem 1rem;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    color: var(--adm-blanco);
    background: var(--adm-verde-oscuro);
    border: 1px solid var(--adm-verde-oscuro);
    border-radius: var(--adm-radio-chico);
    cursor: pointer;
    transition: background var(--adm-transicion), box-shadow var(--adm-transicion);
}

.suba-adm-acceso__enviar:hover { background: var(--adm-verde-medio); }

.suba-adm-acceso__enviar:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(200, 164, 77, .55);
}

.suba-adm-acceso__pie {
    margin: 1.25rem 0 0;
    text-align: center;
    font-size: .875rem;
}

.suba-adm-acceso__pie a {
    color: var(--adm-verde-medio);
    text-decoration: underline;
}

.suba-adm-acceso__pie a:hover,
.suba-adm-acceso__pie a:focus-visible { color: var(--adm-verde-oscuro); }

/* Los avisos flash del bloque 6 se reutilizan tal cual; solo se les da aire. */
.suba-adm-acceso__tarjeta .suba-adm__avisos { margin-bottom: 1.25rem; }

@media (prefers-contrast: more) {
    .suba-adm-campo__entrada { border-color: var(--adm-tinta-tenue); }
}

@media (prefers-reduced-motion: reduce) {
    .suba-adm-campo__entrada,
    .suba-adm-acceso__enviar { transition: none; }
}

/* Texto de ayuda bajo un campo. Persistente y no un «placeholder»: un
   marcador de posicion desaparece justo cuando el usuario empieza a escribir,
   que es cuando mas falta hace. #4E5871 sobre blanco da 7,1:1. */
.suba-not-campo__ayuda {
    margin: .35rem 0 0;
    font-size: .82rem;
    line-height: 1.4;
    color: var(--adm-tinta-tenue);
}