/* ═══════════════════════════════════════════════════════════════
   sistema.css — estilos generales del sistema
   Se carga DESPUÉS de Bootstrap y ajusta sus variables a la marca.

   Para cambiar la marca de un proyecto, alcanza con tocar el bloque
   "TOKENS" de abajo.
   ═══════════════════════════════════════════════════════════════ */

/* ── TOKENS ─────────────────────────────────────────────────────── */
:root {
    --tinta: #06142C;          /* azul noche de la marca */
    --tinta-suave: #102A52;
    --tinta-texto: #B9CCE7;
    --papel: #F3F7FC;
    --superficie: #FFFFFF;
    --borde: #DCE6F2;
    --texto: #12233D;
    --texto-suave: #61738C;
    --ambar: #FF8A1E;          /* naranja del aro del logo */
    --ambar-oscuro: #DB6200;
    --ambar-claro: #FFF0DF;
    --cian: #00CFF4;
    --azul: #076BFF;
    --azul-claro: #E8F3FF;
    --salvia: #16856B;
    --peligro: #C43D52;

    --fuente-titulos: 'Sora', system-ui, sans-serif;
    --fuente-texto: 'Manrope', system-ui, sans-serif;
    --fuente-datos: 'JetBrains Mono', ui-monospace, monospace;

    --radio: 18px;
    --radio-chico: 11px;
    --sombra: 0 1px 2px rgba(6, 20, 44, .04), 0 14px 36px rgba(21, 57, 101, .07);
    --ancho-menu: 276px;

    /* Bootstrap toma estos valores */
    --bs-body-font-family: var(--fuente-texto);
    --bs-body-color: var(--texto);
    --bs-body-bg: var(--papel);
    --bs-border-color: var(--borde);
    --bs-border-radius: var(--radio-chico);
    --bs-primary: var(--azul);
    --bs-primary-rgb: 7, 107, 255;
    --bs-link-color: var(--ambar-oscuro);
    --bs-link-color-rgb: 184, 106, 28;
    --bs-link-hover-color: var(--tinta);
    --bs-success: var(--salvia);
    --bs-success-rgb: 62, 124, 107;
    --bs-danger: var(--peligro);
    --bs-danger-rgb: 184, 66, 58;
    --bs-focus-ring-color: rgba(0, 207, 244, .28);
}

/* ── BASE ───────────────────────────────────────────────────────── */
body {
    background: var(--papel);
    color: var(--texto);
    font-family: var(--fuente-texto);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .titulo {
    font-family: var(--fuente-titulos);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--tinta);
}

[hidden] { display: none !important; }   /* que ningún display lo pise */

.dato { font-family: var(--fuente-datos); font-size: .9em; }
.texto-suave { color: var(--texto-suave); }

:focus-visible {
    outline: 2px solid var(--ambar);
    outline-offset: 2px;
}

/* ── BOTONES Y FORMULARIOS ──────────────────────────────────────── */
.btn {
    font-weight: 600;
    border-radius: var(--radio-chico);
    padding: .55rem 1.1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;                       /* separa el ícono del texto */
}
.btn.text-start { justify-content: flex-start; }

.btn-primary {
    --bs-btn-bg: var(--tinta);
    --bs-btn-border-color: var(--tinta);
    --bs-btn-hover-bg: var(--tinta-suave);
    --bs-btn-hover-border-color: var(--tinta-suave);
    --bs-btn-active-bg: var(--tinta);
    --bs-btn-active-border-color: var(--tinta);
    --bs-btn-disabled-bg: var(--tinta);
    --bs-btn-disabled-border-color: var(--tinta);
}

.btn-acento {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ambar);
    --bs-btn-border-color: var(--ambar);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ambar-oscuro);
    --bs-btn-hover-border-color: var(--ambar-oscuro);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ambar-oscuro);
}

.form-label { font-weight: 600; font-size: .875rem; margin-bottom: .35rem; }

.form-control, .form-select {
    border-color: var(--borde);
    padding: .6rem .8rem;
    background-color: var(--superficie);
}

.form-control:focus, .form-select:focus {
    border-color: var(--ambar);
    box-shadow: 0 0 0 3px rgba(217, 130, 43, .18);
}

.form-check-input:checked { background-color: var(--tinta); border-color: var(--tinta); }
.form-check-input:focus { border-color: var(--ambar); box-shadow: 0 0 0 3px rgba(217, 130, 43, .18); }

.errorlist { list-style: none; padding: 0; margin: .35rem 0 0; color: var(--peligro); font-size: .85rem; }

/* ── TARJETAS ───────────────────────────────────────────────────── */
.tarjeta {
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.5rem;
}

.tarjeta-titulo {
    font-family: var(--fuente-texto);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin-bottom: 1rem;
}

/* ── MENSAJES ───────────────────────────────────────────────────── */
.mensajes { display: grid; gap: .5rem; margin-bottom: 1.25rem; }
.mensajes .alert { margin: 0; border-radius: var(--radio-chico); border-width: 0 0 0 4px; font-size: .925rem; }
.alert-success { background: #E6F0EC; border-color: var(--salvia); color: #22493F; }
.alert-danger  { background: #F7E4E2; border-color: var(--peligro); color: #74241E; }
.alert-warning { background: var(--ambar-claro); border-color: var(--ambar); color: #6B3D0E; }
.alert-info    { background: #E7EBF1; border-color: var(--tinta); color: var(--tinta); }

/* ═══════════════════════════════════════════════════════════════
   LAYOUT DEL SISTEMA (menú lateral + contenido)
   ═══════════════════════════════════════════════════════════════ */
.app { min-height: 100vh; }

.menu {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--ancho-menu);
    background: var(--tinta);
    color: var(--tinta-texto);
    display: flex;
    flex-direction: column;
    z-index: 1040;
    transition: transform .2s ease;
}

.menu-marca {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: 1.35rem 1.25rem 1.1rem;
    color: #fff;
    text-decoration: none;
}
.menu-marca:hover { color: #fff; }

.marca-isotipo {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    background: var(--ambar);
    color: var(--tinta);
    display: grid;
    place-items: center;
    font-family: var(--fuente-titulos);
    font-weight: 800;
    font-size: 1.05rem;
    flex-shrink: 0;
}

.marca-nombre { font-family: var(--fuente-titulos); font-weight: 700; font-size: 1.05rem; line-height: 1.1; }
.marca-empresa { font-size: .72rem; color: var(--tinta-texto); opacity: .75; }

.menu-nav { flex: 1; overflow-y: auto; padding: .5rem .75rem; }

.menu-grupo {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--tinta-texto);
    opacity: .55;
    padding: 1.1rem .75rem .4rem;
}

.menu-link {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .55rem .75rem;
    border-radius: var(--radio-chico);
    color: var(--tinta-texto);
    text-decoration: none;
    font-weight: 500;
    font-size: .925rem;
    position: relative;
}
.menu-link i { font-size: 1.05rem; opacity: .85; }
.menu-link:hover { background: var(--tinta-suave); color: #fff; }
.menu-link.activo { background: var(--tinta-suave); color: #fff; }
.menu-link.activo::before {
    content: '';
    position: absolute;
    left: -.75rem;
    top: 20%;
    bottom: 20%;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--ambar);
}

.menu-usuario {
    border-top: 1px solid rgba(255, 255, 255, .08);
    padding: .9rem 1rem;
    display: flex;
    align-items: center;
    gap: .7rem;
}
.menu-usuario-perfil {
    display: flex;
    align-items: center;
    gap: .7rem;
    flex: 1;
    min-width: 0;
    color: inherit;
    text-decoration: none;
    padding: .35rem;
    margin: -.35rem;
    border-radius: var(--radio-chico);
}
.menu-usuario-perfil:hover, .menu-usuario-perfil.activo { background: var(--tinta-suave); color: inherit; }
.menu-usuario-datos { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.menu-usuario-nombre { color: #fff; font-weight: 600; font-size: .875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.menu-usuario-rol { font-size: .75rem; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.btn-salir {
    background: none;
    border: 0;
    color: var(--tinta-texto);
    padding: .4rem;
    border-radius: var(--radio-chico);
    line-height: 1;
}
.btn-salir:hover { background: var(--tinta-suave); color: #fff; }

.avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--ambar-claro);
    color: var(--ambar-oscuro);
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: .8rem;
    flex-shrink: 0;
    object-fit: cover;
}

.contenido {
    margin-left: var(--ancho-menu);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.barra-superior {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 2rem .5rem;
}

.btn-menu {
    display: none;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio-chico);
    padding: .4rem .6rem;
    line-height: 1;
    font-size: 1.2rem;
}

.pagina { padding: .75rem 2rem 2.5rem; flex: 1; width: 100%; max-width: 1280px; }

.pagina-encabezado { margin-bottom: 1.75rem; }
.pagina-titulo { font-size: 1.75rem; margin: 0; }
.pagina-bajada { color: var(--texto-suave); margin: .25rem 0 0; }

.fondo-menu { display: none; }

@media (max-width: 991.98px) {
    .menu { transform: translateX(-100%); }
    .app.menu-abierto .menu { transform: none; }
    .app.menu-abierto .fondo-menu {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(27, 36, 51, .45);
        z-index: 1030;
    }
    .contenido { margin-left: 0; }
    .btn-menu { display: inline-block; }
    .barra-superior { padding: 1rem 1rem .25rem; }
    .pagina { padding: .5rem 1rem 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   EL MOMENTO — saludo + hora en vivo + línea del día
   (firma visual de la marca: "kairos" = el momento oportuno)
   ═══════════════════════════════════════════════════════════════ */
.momento-hora {
    font-family: var(--fuente-titulos);
    font-weight: 300;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.04em;
    line-height: .9;
}

.linea-dia {
    position: relative;
    height: 1px;
    background: currentColor;
    opacity: .9;
}
.linea-dia::after {                     /* marcador de "ahora" */
    content: '';
    position: absolute;
    top: 50%;
    left: var(--avance-dia, 50%);
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--ambar);
    box-shadow: 0 0 0 4px rgba(217, 130, 43, .2);
    transform: translate(-50%, -50%);
}
.linea-dia-marcas {
    display: flex;
    justify-content: space-between;
    font-family: var(--fuente-datos);
    font-size: .68rem;
    margin-top: .5rem;
    opacity: .6;
}

/* ═══════════════════════════════════════════════════════════════
   PANTALLAS DE ACCESO (login, recuperar contraseña)
   ═══════════════════════════════════════════════════════════════ */
.acceso {
    min-height: 100vh;
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
}

.acceso-momento {
    background: var(--tinta);
    color: var(--tinta-texto);
    padding: 2.5rem 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 2rem;
}
.acceso-momento .menu-marca { padding: 0; }

.acceso-momento .momento-hora { font-size: clamp(5rem, 11vw, 9.5rem); color: #fff; }
.acceso-saludo { font-family: var(--fuente-titulos); font-size: clamp(1.4rem, 2.4vw, 2rem); color: #fff; margin: 1.25rem 0 .25rem; font-weight: 500; }
.acceso-fecha { font-size: 1rem; opacity: .75; margin: 0; }
.acceso-momento .linea-dia { color: rgba(255, 255, 255, .25); margin-top: 2.5rem; max-width: 520px; }
.acceso-momento .linea-dia-marcas { max-width: 520px; }
.acceso-pie { font-size: .8rem; opacity: .55; margin: 0; }

.acceso-formulario {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
}
.acceso-caja { width: 100%; max-width: 380px; }
.acceso-caja h1 { font-size: 1.75rem; margin-bottom: .35rem; }
.acceso-caja .bajada { color: var(--texto-suave); margin-bottom: 2rem; }

.campo-password { position: relative; }
.campo-password .form-control { padding-right: 2.75rem; }
.btn-ver-password {
    position: absolute;
    right: .35rem;
    top: 50%;
    transform: translateY(-50%);
    border: 0;
    background: none;
    color: var(--texto-suave);
    padding: .35rem .5rem;
    border-radius: var(--radio-chico);
}
.btn-ver-password:hover { color: var(--tinta); }

@media (max-width: 860px) {
    .acceso { grid-template-columns: 1fr; }
    .acceso-momento { padding: 1.5rem 1.25rem 1.75rem; gap: 1.25rem; }
    .acceso-momento .momento-hora { font-size: 3.5rem; }
    .acceso-saludo { margin-top: .75rem; font-size: 1.25rem; }
    .acceso-momento .linea-dia, .acceso-momento .linea-dia-marcas, .acceso-pie { display: none; }
    .acceso-formulario { align-items: flex-start; padding-top: 2rem; }
}

/* ═══════════════════════════════════════════════════════════════
   INICIO
   ═══════════════════════════════════════════════════════════════ */
.inicio-momento {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}
.inicio-momento h1 { font-size: clamp(1.75rem, 3vw, 2.4rem); margin: 0; }
.inicio-momento .momento-hora { font-size: clamp(2.75rem, 5vw, 4rem); color: var(--tinta); }
@media (max-width: 575.98px) {
    .inicio-momento .momento-hora { display: none; }
}
.inicio-linea { color: var(--borde); margin-bottom: 2.25rem; }
.inicio-linea .linea-dia { opacity: 1; }

.datos-lista { display: grid; gap: .9rem; margin: 0; }
.datos-lista dt { font-size: .78rem; font-weight: 600; color: var(--texto-suave); }
.datos-lista dd { margin: 0; font-weight: 500; }

.acceso-rapido {
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: .9rem 1rem;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    background: var(--superficie);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.acceso-rapido:hover { border-color: var(--ambar); color: var(--texto); transform: translateY(-1px); }
.acceso-rapido-icono {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background: var(--papel);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    color: var(--tinta);
    flex-shrink: 0;
}
.acceso-rapido strong { display: block; font-size: .95rem; }
.acceso-rapido span { font-size: .82rem; color: var(--texto-suave); }

/* ═══════════════════════════════════════════════════════════════
   LISTADOS, FICHAS Y FORMULARIOS
   ═══════════════════════════════════════════════════════════════ */
.volver {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    color: var(--texto-suave);
    text-decoration: none;
    font-size: .875rem;
    font-weight: 500;
    margin-bottom: .75rem;
}
.volver:hover { color: var(--tinta); }

.obligatorio { color: var(--ambar-oscuro); }

/* Barra de filtros */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: center;
    margin-bottom: 1rem;
}
.filtros > div { flex: 0 1 200px; }
.filtros .filtros-buscar { flex: 1 1 280px; position: relative; }
.filtros-buscar i {
    position: absolute;
    left: .8rem;
    top: 50%;
    transform: translateY(-50%);
    color: var(--texto-suave);
    pointer-events: none;
}
.filtros-buscar .form-control { padding-left: 2.3rem; }

/* Tablas */
.tabla { --bs-table-bg: transparent; }
.tabla thead th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    border-bottom-color: var(--borde);
    padding: .9rem 1.25rem;
    white-space: nowrap;
}
.tabla td { padding: .8rem 1.25rem; vertical-align: middle; border-bottom-color: var(--borde); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla tbody tr:hover { background: #F8F9F7; }

.celda-usuario {
    display: flex;
    align-items: center;
    gap: .75rem;
    color: var(--texto);
    text-decoration: none;
    min-width: 0;
}
.celda-usuario strong { display: block; font-weight: 600; }
.celda-usuario:hover strong { color: var(--ambar-oscuro); }
.celda-usuario .dato { font-size: .8rem; }

/* Estado (activo / inactivo) */
.estado {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
}
.estado::before { content: ''; width: 7px; height: 7px; border-radius: 50%; }
.estado-activo { color: var(--salvia); }
.estado-activo::before { background: var(--salvia); }
.estado-inactivo { color: var(--texto-suave); }
.estado-inactivo::before { background: #A3AAB5; }

/* Estado vacío */
.vacio { text-align: center; padding: 3.5rem 1.5rem; }
.vacio i { font-size: 2rem; color: var(--texto-suave); opacity: .6; }
.vacio p { color: var(--texto-suave); margin: .75rem 0 1rem; }

.paginacion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-top: 1rem;
    font-size: .875rem;
}

/* Ficha (detalle) */
.ficha-encabezado {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.avatar-grande { width: 72px; height: 72px; font-size: 1.5rem; }

.ficha-datos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.1rem 1.5rem;
    margin: 0;
}
.ficha-datos dt { font-size: .78rem; font-weight: 600; color: var(--texto-suave); margin-bottom: .15rem; }
.ficha-datos dd { margin: 0; font-weight: 500; overflow-wrap: anywhere; }

/* Formularios por secciones */
.formulario { max-width: 960px; }
.formulario-seccion { margin-bottom: 1.25rem; }
.formulario-angosto { max-width: 520px; }
.formulario-acciones {
    display: flex;
    justify-content: flex-end;
    gap: .6rem;
    margin-top: 1.5rem;
}
.form-text { font-size: .8rem; color: var(--texto-suave); }
.form-text ul { padding-left: 1.1rem; margin: .25rem 0 0; }

/* Confirmación (eliminar) */
.confirmacion { max-width: 520px; margin: 2rem auto; text-align: center; padding: 2.5rem 2rem; }
.confirmacion-icono {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    margin: 0 auto 1.25rem;
    font-size: 1.5rem;
}
.confirmacion-icono.peligro { background: #F7E4E2; color: var(--peligro); }

@media (max-width: 575.98px) {
    .filtros > div, .filtros .filtros-buscar { flex: 1 1 100%; }
    .filtros .btn { flex: 1; }
    .tabla thead th, .tabla td { padding-left: 1rem; padding-right: 1rem; }
    .formulario-acciones { flex-direction: column-reverse; }
    .formulario-acciones .btn { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════
   ROLES Y PERMISOS
   ═══════════════════════════════════════════════════════════════ */
.tarjeta-rol {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    height: 100%;
    padding: 1.25rem 1.35rem;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    color: var(--texto);
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.tarjeta-rol:hover { border-color: var(--ambar); color: var(--texto); transform: translateY(-1px); }
.tarjeta-rol-nombre { font-family: var(--fuente-titulos); font-weight: 600; font-size: 1.15rem; color: var(--tinta); }
.tarjeta-rol-descripcion { color: var(--texto-suave); font-size: .9rem; flex: 1; }
.tarjeta-rol-datos { display: flex; gap: 1.25rem; font-size: .82rem; font-weight: 600; color: var(--texto-suave); margin-top: .5rem; }
.tarjeta-rol-datos i { margin-right: .2rem; }

.grupo-permisos + .grupo-permisos { margin-top: 1.5rem; }
.grupo-permisos-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-bottom: 1px solid var(--borde);
    padding-bottom: .5rem;
}
.grupo-permisos-encabezado h3 { font-family: var(--fuente-texto); font-size: 1rem; font-weight: 700; margin: 0; }

.lista-permisos { list-style: none; margin: 0; padding: 0; }
.permiso {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .7rem 0;
    border-bottom: 1px dashed var(--borde);
}
.permiso:last-child { border-bottom: 0; }
.permiso .form-switch { padding-left: 0; }
.permiso .form-switch .form-check-input { width: 2.4em; height: 1.3em; cursor: pointer; margin: 0; float: none; }
.permiso-texto { flex: 1; cursor: pointer; display: flex; flex-direction: column; }
.permiso.bloqueado .permiso-texto { cursor: default; color: var(--texto-suave); }
.permiso-nota { font-size: .78rem; color: var(--texto-suave); margin-top: .1rem; }
.permiso-origen { flex-shrink: 0; }

.chip {
    display: inline-flex;
    align-items: center;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .74rem;
    font-weight: 600;
    background: var(--papel);
    color: var(--texto-suave);
    border: 1px solid var(--borde);
    white-space: nowrap;
}
.chip-si { background: #E6F0EC; color: #22493F; border-color: #C3DBD2; }
.chip-no { background: #F7E4E2; color: #74241E; border-color: #ECC5C1; }

.lista-simple { list-style: none; padding: 0; margin: 0 auto 1rem; max-width: 360px; text-align: left; }
.lista-simple li { padding: .3rem 0; border-bottom: 1px solid var(--borde); }

fieldset:disabled .btn-link { display: none; }

@media (max-width: 575.98px) {
    .permiso { flex-wrap: wrap; }
    .permiso-origen { width: 100%; padding-left: 3.15rem; }
}

/* ── RECUPERAR CONTRASEÑA ───────────────────────────────────────── */
.enlace-chico { font-size: .82rem; font-weight: 500; }
.campo-codigo {
    font-family: var(--fuente-datos);
    font-size: 1.6rem;
    letter-spacing: .5em;
    text-align: center;
    padding: .7rem .5rem;
}
.campo-codigo::placeholder { color: #C5CBD3; }

/* ── MI PERFIL ──────────────────────────────────────────────────── */
.subtitulo-permisos { font-family: var(--fuente-texto); font-size: .85rem; font-weight: 700; margin: 1rem 0 .4rem; }
.subtitulo-permisos:first-of-type { margin-top: 0; }
.lista-mis-permisos { list-style: none; padding: 0; margin: 0; font-size: .9rem; }
.lista-mis-permisos li { display: flex; gap: .45rem; padding: .2rem 0; }
.lista-mis-permisos i { color: var(--salvia); }

/* ═══════════════════════════════════════════════════════════════
   BARRA SUPERIOR: CAMPANITA DE NOTIFICACIONES
   ═══════════════════════════════════════════════════════════════ */
.barra-superior-derecha { margin-left: auto; display: flex; align-items: center; gap: .5rem; }

.btn-campanita {
    position: relative;
    background: var(--superficie);
    border: 1px solid var(--borde);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    font-size: 1.1rem;
    color: var(--tinta);
}
.btn-campanita:hover { border-color: var(--ambar); }
.campanita-contador {
    position: absolute;
    top: -4px;
    right: -4px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--ambar);
    color: #fff;
    font-size: .68rem;
    font-weight: 700;
    display: grid;
    place-items: center;
    border: 2px solid var(--papel);
}
.campanita-menu { width: min(360px, calc(100vw - 2rem)); padding: 0; border-color: var(--borde); box-shadow: var(--sombra); overflow: hidden; }
.campanita-encabezado {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1rem;
    border-bottom: 1px solid var(--borde);
    font-size: .9rem;
}
.campanita-encabezado .btn-link { font-size: .78rem; }
.campanita-vacia { padding: 1.5rem 1rem; margin: 0; text-align: center; color: var(--texto-suave); font-size: .9rem; }
.campanita-ver-todas {
    display: block;
    text-align: center;
    padding: .65rem;
    border-top: 1px solid var(--borde);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}

/* Una notificación (campanita y lista) */
.notificacion {
    display: flex;
    gap: .75rem;
    padding: .8rem 1rem;
    color: var(--texto);
    text-decoration: none;
    border-bottom: 1px solid var(--borde);
    position: relative;
}
.notificacion:last-child { border-bottom: 0; }
.notificacion:hover { background: #F8F9F7; color: var(--texto); }
.notificacion.no-leida { background: #FDF6EE; }
.notificacion.no-leida::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--ambar);
}
.notificacion-icono { font-size: 1.05rem; line-height: 1.3; color: var(--tinta); }
.notificacion-exito .notificacion-icono { color: var(--salvia); }
.notificacion-aviso .notificacion-icono { color: var(--ambar-oscuro); }
.notificacion-error .notificacion-icono { color: var(--peligro); }
.notificacion-texto { display: flex; flex-direction: column; gap: .1rem; min-width: 0; font-size: .88rem; }
.notificacion-texto strong { font-weight: 600; }
.notificacion-texto span { color: var(--texto-suave); }
.notificacion-texto time { font-size: .75rem; color: var(--texto-suave); }
.lista-notificaciones .notificacion { padding: 1rem 1.25rem; }

.pestanias { display: flex; gap: .25rem; border-bottom: 1px solid var(--borde); }
.pestanias a {
    padding: .5rem .9rem;
    color: var(--texto-suave);
    text-decoration: none;
    font-weight: 600;
    font-size: .9rem;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}
.pestanias a.activa { color: var(--tinta); border-bottom-color: var(--ambar); }

/* ═══════════════════════════════════════════════════════════════
   REGISTRO DE ACTIVIDAD
   ═══════════════════════════════════════════════════════════════ */
.filtros .filtros-fecha { flex: 0 1 160px; }

.linea-actividad { list-style: none; margin: 0; padding: .5rem 0; }
.registro {
    display: flex;
    gap: .9rem;
    padding: .8rem 1.25rem;
    border-bottom: 1px solid var(--borde);
}
.registro:last-child { border-bottom: 0; }
.registro-icono {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    flex-shrink: 0;
    background: var(--papel);
    color: var(--tinta);
    font-size: .9rem;
}
.registro-crear .registro-icono { background: #E6F0EC; color: var(--salvia); }
.registro-eliminar .registro-icono, .registro-ingreso_fallido .registro-icono { background: #F7E4E2; color: var(--peligro); }
.registro-seguridad .registro-icono, .registro-sistema .registro-icono { background: var(--ambar-claro); color: var(--ambar-oscuro); }
.registro-cuerpo { flex: 1; min-width: 0; }
.registro-linea { font-size: .92rem; overflow-wrap: anywhere; }
.registro-linea strong { font-weight: 600; margin-right: .25rem; }
.registro-meta { font-size: .78rem; color: var(--texto-suave); margin-top: .15rem; }
.registro-cambios { margin-top: .5rem; font-size: .85rem; }
.registro-cambios summary { cursor: pointer; color: var(--ambar-oscuro); font-weight: 600; font-size: .8rem; }
.registro-cambios table { margin-top: .5rem; max-width: 640px; }
.registro-cambios th { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-suave); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   MODO MANTENIMIENTO
   ═══════════════════════════════════════════════════════════════ */
.aviso-mantenimiento {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .25rem 2rem 0;
    padding: .6rem 1rem;
    border-radius: var(--radio-chico);
    background: var(--ambar-claro);
    color: #6B3D0E;
    font-size: .88rem;
    border-left: 4px solid var(--ambar);
}
.aviso-mantenimiento a { margin-left: auto; font-weight: 600; }
.mantenimiento { max-width: 480px; }
.mantenimiento-icono {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    background: var(--ambar-claro);
    color: var(--ambar-oscuro);
    display: grid;
    place-items: center;
    font-size: 2rem;
}
.mantenimiento h1 { font-size: 1.75rem; }
.mantenimiento-vuelve { font-weight: 600; }
.mantenimiento-ingresar { font-size: .85rem; color: var(--texto-suave); }
.mantenimiento-pie { margin-top: 2.5rem; font-size: .8rem; color: var(--texto-suave); }
.mantenimiento .btn { display: inline-flex; padding: .55rem 1.1rem; border-radius: var(--radio-chico); background: var(--tinta); color: #fff; text-decoration: none; font-weight: 600; }

@media (max-width: 991.98px) {
    .aviso-mantenimiento { margin: .25rem 1rem 0; }
}

/* ═══════════════════════════════════════════════════════════════
   HERRAMIENTAS DE DESARROLLADOR
   ═══════════════════════════════════════════════════════════════ */
.herramientas { max-width: 960px; }
.herramientas-grupo {
    font-family: var(--fuente-texto);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--texto-suave);
    margin: 1.75rem 0 .6rem;
}
.herramientas-grupo.peligro { color: var(--peligro); }
.herramienta {
    display: flex;
    gap: 1.5rem;
    align-items: center;
    justify-content: space-between;
    padding: 1.1rem 1.35rem;
    margin-bottom: .6rem;
    scroll-margin-top: 1rem;
}
.herramienta-texto h3 { font-family: var(--fuente-texto); font-size: 1rem; font-weight: 700; margin: 0 0 .2rem; }
.herramienta-texto p { margin: 0; color: var(--texto-suave); font-size: .88rem; }
.herramienta-accion { display: flex; gap: .5rem; flex-shrink: 0; align-items: center; }
.herramienta-accion .form-control { width: 210px; }
.herramienta-accion-columna { flex-direction: column; align-items: stretch; width: 240px; gap: .35rem; }
.herramienta-accion-columna .form-control { width: 100%; }
.herramienta-accion-columna .form-label { margin: .25rem 0 0; }
.herramienta-accion-columna .btn { margin-top: .5rem; }
.herramienta-peligro { border-color: #ECC5C1; }
.herramienta-reinicio { align-items: flex-start; }
.lista-reinicio { margin: 0; padding-left: 1.1rem; font-size: .85rem; color: var(--texto-suave); }

@media (max-width: 767.98px) {
    .herramienta { flex-direction: column; align-items: stretch; gap: .9rem; }
    .herramienta-accion, .herramienta-accion-columna { width: 100%; }
    .herramienta-accion .form-control { width: auto; flex: 1; }
}

/* ── PÁGINAS DE ERROR ───────────────────────────────────────────── */
.error-pagina { min-height: 100vh; display: grid; place-items: center; padding: 2rem 1rem; text-align: center; }
.error-codigo { font-family: var(--fuente-titulos); font-size: 6rem; font-weight: 300; line-height: 1; color: var(--ambar); letter-spacing: -0.04em; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ═══════════════════════════════════════════════════════════════
   IDENTIDAD KAIROS TV — capa visual del panel
   ═══════════════════════════════════════════════════════════════ */
html { overflow-x: hidden; }

body {
    min-width: 320px;
    background:
        radial-gradient(circle at 92% -8%, rgba(0, 207, 244, .09), transparent 28rem),
        var(--papel);
    line-height: 1.55;
}

::selection { background: rgba(0, 207, 244, .24); color: var(--tinta); }

.saltar-contenido {
    position: fixed;
    top: .75rem;
    left: .75rem;
    z-index: 2000;
    padding: .65rem 1rem;
    border-radius: 10px;
    background: #fff;
    color: var(--tinta);
    box-shadow: 0 8px 30px rgba(0, 0, 0, .22);
    font-weight: 800;
    text-decoration: none;
    transform: translateY(-150%);
}
.saltar-contenido:focus { transform: none; }

a { text-underline-offset: .18em; }

:focus-visible {
    outline: 3px solid rgba(0, 207, 244, .75);
    outline-offset: 2px;
}

/* Controles */
.btn {
    min-height: 42px;
    border-radius: var(--radio-chico);
    letter-spacing: -.01em;
    transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-sm { min-height: 35px; padding: .38rem .75rem; }

.btn-primary {
    --bs-btn-bg: var(--azul);
    --bs-btn-border-color: var(--azul);
    --bs-btn-hover-bg: #0059E6;
    --bs-btn-hover-border-color: #0059E6;
    --bs-btn-active-bg: #004CC5;
    --bs-btn-active-border-color: #004CC5;
    --bs-btn-disabled-bg: #7BAEFF;
    --bs-btn-disabled-border-color: #7BAEFF;
    box-shadow: 0 8px 20px rgba(7, 107, 255, .18);
}
.btn-primary:hover { box-shadow: 0 11px 25px rgba(7, 107, 255, .26); }

.btn-acento {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ambar);
    --bs-btn-border-color: var(--ambar);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ambar-oscuro);
    --bs-btn-hover-border-color: var(--ambar-oscuro);
    --bs-btn-active-bg: #BA5200;
    --bs-btn-active-border-color: #BA5200;
    box-shadow: 0 8px 20px rgba(255, 138, 30, .2);
}
.btn-outline-secondary {
    --bs-btn-color: #38506F;
    --bs-btn-border-color: #C8D6E7;
    --bs-btn-hover-color: var(--tinta);
    --bs-btn-hover-bg: var(--azul-claro);
    --bs-btn-hover-border-color: #AFC5DF;
    --bs-btn-active-color: var(--tinta);
    --bs-btn-active-bg: #DCEBFB;
    --bs-btn-active-border-color: #AFC5DF;
}
.btn-link { color: #075CCF; }

.form-label { color: #2A4160; }
.form-control,
.form-select {
    min-height: 46px;
    border-radius: var(--radio-chico);
    border-color: #CAD8E8;
    color: var(--texto);
    box-shadow: 0 1px 2px rgba(6, 20, 44, .02);
}
textarea.form-control { min-height: 110px; }
.form-control:hover,
.form-select:hover { border-color: #9FB7D2; }
.form-control:focus,
.form-select:focus {
    border-color: var(--azul);
    box-shadow: 0 0 0 4px rgba(7, 107, 255, .12);
}
.form-control::placeholder { color: #91A0B5; }
.form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }
.form-check-input:focus { border-color: var(--cian); box-shadow: 0 0 0 4px rgba(0, 207, 244, .14); }

/* Superficies */
.tarjeta {
    border-color: rgba(188, 205, 225, .72);
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    padding: 1.6rem;
}
.tarjeta-titulo {
    color: #657892;
    font-size: .72rem;
    letter-spacing: .12em;
}
.alert { border-radius: 12px; }
.alert-success { background: #E8F7F2; border-color: var(--salvia); color: #0E5947; }
.alert-danger { background: #FDEBED; border-color: var(--peligro); color: #852638; }
.alert-warning { background: var(--ambar-claro); border-color: var(--ambar); color: #814000; }
.alert-info { background: var(--azul-claro); border-color: var(--azul); color: #114B91; }

/* Navegación lateral */
.menu {
    isolation: isolate;
    background:
        radial-gradient(circle at 5% 4%, rgba(0, 207, 244, .22), transparent 15rem),
        radial-gradient(circle at 105% 90%, rgba(7, 107, 255, .22), transparent 18rem),
        linear-gradient(165deg, #071A37 0%, #050D1D 72%);
    border-right: 1px solid rgba(78, 158, 255, .16);
    box-shadow: 18px 0 45px rgba(6, 20, 44, .08);
}
.menu::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    opacity: .12;
    background-image: linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 30px 30px;
    mask-image: linear-gradient(to bottom, #000, transparent 38%);
}
.menu-marca {
    min-height: 88px;
    gap: .8rem;
    padding: 1.15rem 1.2rem 1rem;
}
.marca-isotipo {
    width: 50px;
    height: 43px;
    border-radius: 0;
    background: transparent;
    filter: drop-shadow(0 0 10px rgba(0, 207, 244, .38));
}
.marca-isotipo img { width: 100%; height: 100%; object-fit: contain; }
.marca-nombre {
    font-family: var(--fuente-titulos);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -.045em;
}
.marca-nombre > span { color: var(--ambar); margin-left: .08em; }
.marca-empresa { color: #8FA9C9; font-weight: 600; letter-spacing: .02em; }
.menu-cerrar {
    display: none;
    position: absolute;
    top: 1.1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 12px;
    background: rgba(255,255,255,.06);
    color: #fff;
}
.menu-nav { padding: .5rem .85rem 1rem; scrollbar-width: thin; scrollbar-color: #284A75 transparent; }
.menu-grupo {
    color: #7792B4;
    opacity: 1;
    padding: 1.15rem .8rem .42rem;
}
.menu-link {
    gap: .8rem;
    min-height: 43px;
    padding: .58rem .8rem;
    border: 1px solid transparent;
    border-radius: 12px;
    color: #B7C9E1;
    transition: color .16s ease, background-color .16s ease, border-color .16s ease, transform .16s ease;
}
.menu-link i { width: 1.25rem; text-align: center; color: #83A7D1; opacity: 1; }
.menu-link:hover {
    color: #fff;
    background: rgba(35, 110, 198, .2);
    border-color: rgba(68, 168, 255, .12);
    transform: translateX(2px);
}
.menu-link:hover i { color: var(--cian); }
.menu-link.activo {
    color: #fff;
    background: linear-gradient(90deg, rgba(0, 207, 244, .18), rgba(7, 107, 255, .12));
    border-color: rgba(0, 207, 244, .22);
    box-shadow: inset 0 0 20px rgba(0, 207, 244, .035);
}
.menu-link.activo i { color: var(--cian); }
.menu-link.activo::before {
    left: -.86rem;
    top: 16%;
    bottom: 16%;
    width: 4px;
    background: linear-gradient(var(--cian), var(--azul));
    box-shadow: 0 0 12px rgba(0, 207, 244, .8);
}
.menu-usuario {
    border-top-color: rgba(126, 178, 238, .13);
    background: rgba(2, 9, 21, .32);
    padding: 1rem;
}
.menu-usuario-perfil:hover,
.menu-usuario-perfil.activo { background: rgba(29, 89, 159, .22); }
.avatar {
    background: linear-gradient(145deg, #DDFBFF, #DCE9FF);
    color: #0759C1;
    border: 1px solid #BAD6F5;
}
.menu-usuario .avatar { border-color: rgba(0, 207, 244, .42); }
.btn-salir:hover { background: rgba(196, 61, 82, .2); color: #FFB7C3; }

/* Cabecera y contenido */
.contenido { position: relative; }
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 72px;
    padding: .85rem clamp(1rem, 2.3vw, 2.4rem);
    border-bottom: 1px solid rgba(188, 205, 225, .62);
    background: rgba(243, 247, 252, .82);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}
.barra-marca {
    display: none;
    align-items: center;
    gap: .55rem;
    color: var(--tinta);
    font-family: var(--fuente-titulos);
    font-weight: 700;
    letter-spacing: -.04em;
    text-decoration: none;
}
.barra-marca img { object-fit: contain; filter: drop-shadow(0 0 5px rgba(0, 207, 244, .25)); }
.barra-marca span span { color: var(--ambar); margin-left: .08em; }
.btn-menu,
.btn-campanita {
    width: 42px;
    height: 42px;
    border-radius: 13px;
    background: rgba(255,255,255,.9);
    border-color: #CEDBEA;
    box-shadow: 0 5px 14px rgba(32, 72, 121, .06);
}
.btn-campanita:hover { border-color: var(--cian); color: #075CCF; }
.campanita-contador { background: var(--ambar); border-color: var(--papel); }
.campanita-menu {
    margin-top: .55rem !important;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(6, 20, 44, .16);
}
.pagina {
    max-width: 1480px;
    padding: 1.65rem clamp(1rem, 2.3vw, 2.4rem) 3rem;
}
.pagina-encabezado { margin-bottom: 1.6rem; }
.pagina-titulo {
    font-size: clamp(1.6rem, 2vw, 2.05rem);
    font-weight: 700;
    letter-spacing: -.045em;
}
.pagina-bajada { max-width: 760px; }
.volver { color: #4F6683; }
.volver:hover { color: var(--azul); }

/* Inicio */
.inicio-momento {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 1.2rem;
    padding: clamp(1.4rem, 3vw, 2.4rem);
    border: 1px solid rgba(51, 127, 218, .18);
    border-radius: 24px;
    background:
        radial-gradient(circle at 86% 25%, rgba(0, 207, 244, .22), transparent 16rem),
        linear-gradient(125deg, #081B39, #0B2850);
    box-shadow: 0 18px 45px rgba(7, 32, 67, .16);
}
.inicio-momento::after {
    content: '';
    position: absolute;
    right: -3rem;
    bottom: -7rem;
    width: 19rem;
    height: 19rem;
    border: 1.2rem solid rgba(255, 138, 30, .15);
    border-radius: 50%;
    transform: rotate(-18deg) scaleY(.38);
}
.inicio-momento .texto-suave { color: #91ACCF; }
.inicio-momento h1,
.inicio-momento .momento-hora { color: #fff; position: relative; z-index: 1; }
.inicio-momento .momento-hora { text-shadow: 0 0 28px rgba(0, 207, 244, .28); }
.inicio-linea { color: #B9CCE2; margin: 0 .65rem 2rem; }
.linea-dia::after {
    background: linear-gradient(135deg, var(--cian), var(--azul));
    box-shadow: 0 0 0 5px rgba(0, 207, 244, .13), 0 0 18px rgba(0, 207, 244, .45);
}
.acceso-rapido {
    min-height: 82px;
    border-color: #D7E3F0;
    border-radius: 15px;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.acceso-rapido:hover {
    border-color: rgba(7, 107, 255, .42);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(7, 107, 255, .08);
}
.acceso-rapido-icono {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    color: var(--azul);
    background: linear-gradient(145deg, #E9F9FF, #E8F0FF);
}

/* Acceso */
.acceso { background: #fff; }
.acceso-momento {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4vw, 4.5rem);
    background:
        radial-gradient(circle at 15% 18%, rgba(0, 207, 244, .24), transparent 22rem),
        radial-gradient(circle at 86% 82%, rgba(255, 138, 30, .17), transparent 22rem),
        linear-gradient(145deg, #071A38, #030A17 74%);
}
.acceso-momento::before,
.acceso-momento::after {
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(72, 156, 255, .16);
    border-radius: 50%;
}
.acceso-momento::before { width: 28rem; height: 28rem; top: -18rem; right: -10rem; }
.acceso-momento::after { width: 22rem; height: 22rem; bottom: -14rem; left: -8rem; }
.acceso-marca { display: flex; align-items: center; gap: 1.15rem; }
.acceso-logo {
    width: clamp(150px, 14vw, 225px);
    height: auto;
    margin: clamp(-3.5rem, -3vw, -2rem) 0;
    filter: drop-shadow(0 0 24px rgba(0, 207, 244, .2));
}
.acceso-panel {
    display: block;
    color: #fff;
    font-family: var(--fuente-titulos);
    font-weight: 600;
    font-size: .95rem;
}
.acceso-momento .momento-hora { text-shadow: 0 0 36px rgba(0, 207, 244, .22); }
.acceso-formulario {
    position: relative;
    min-width: 0;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 207, 244, .08), transparent 20rem),
        #fff;
}
.acceso-caja {
    min-width: 0;
    max-width: 410px;
    padding: 2rem;
    border: 1px solid #E0E9F3;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 22px 60px rgba(25, 65, 112, .1);
}
.acceso-caja h1 { font-weight: 700; letter-spacing: -.04em; }
.btn-ver-password { width: 38px; height: 38px; display: grid; place-items: center; }
.btn-ver-password:hover { color: var(--azul); background: var(--azul-claro); }

/* Datos, filtros y tablas */
.ficha-datos { gap: 1.2rem 1.5rem; }
.ficha-datos > div {
    min-width: 0;
    padding-left: .85rem;
    border-left: 3px solid #D9E8F7;
}
.ficha-datos dt { color: #6B7E96; }
.ficha-datos dd { color: #142943; }
.filtros {
    padding: .8rem;
    border: 1px solid rgba(188, 205, 225, .76);
    border-radius: 16px;
    background: rgba(255,255,255,.72);
    box-shadow: 0 8px 24px rgba(22, 58, 101, .04);
}
.table-responsive {
    border-radius: inherit;
    scrollbar-width: thin;
    scrollbar-color: #A9BCD2 transparent;
}
.table-responsive:focus-visible { outline-offset: -3px; }
.tabla thead th {
    color: #5E728C;
    background: #F7FAFE;
    border-bottom-color: #D6E2EF;
}
.tabla td { border-bottom-color: #E7EEF6; }
.tabla tbody tr { transition: background-color .15s ease; }
.tabla tbody tr:hover { background: #F3F8FE; }
.estado::before { box-shadow: 0 0 0 3px currentColor; opacity: .8; transform: scale(.55); }
.estado-activo { color: var(--salvia); }
.paginacion { padding-inline: .25rem; }
.vacio i { color: #6385AD; }
.confirmacion { margin-top: 4vh; }

.error-pagina {
    background:
        radial-gradient(circle at 50% 0, rgba(0, 207, 244, .1), transparent 24rem),
        var(--papel);
}
.error-pagina > div {
    width: min(100%, 560px);
    padding: clamp(1.5rem, 5vw, 3rem);
    border: 1px solid rgba(188, 205, 225, .76);
    border-radius: 24px;
    background: #fff;
    box-shadow: var(--sombra);
}
.error-marca { width: 84px; height: 64px; object-fit: contain; margin-bottom: 1rem; }
.error-codigo {
    color: var(--azul);
    background: linear-gradient(120deg, var(--azul), var(--cian));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.mantenimiento-icono { background: var(--ambar-claro); color: var(--ambar-oscuro); }

/* Roles, permisos, actividad y notificaciones */
.tarjeta-rol { border-radius: var(--radio); border-color: rgba(188, 205, 225, .76); }
.tarjeta-rol:hover { border-color: rgba(7, 107, 255, .48); box-shadow: 0 14px 30px rgba(7, 107, 255, .08); }
.chip { background: #F1F6FC; border-color: #D7E2EF; }
.chip-si { background: #E8F7F2; color: #0E5947; border-color: #BDE4D8; }
.chip-no { background: #FDEBED; color: #852638; border-color: #F3C8D0; }
.notificacion:hover { background: #F3F8FE; }
.notificacion.no-leida { background: #F0F8FF; }
.notificacion.no-leida::before { background: linear-gradient(var(--cian), var(--azul)); }
.pestanias a.activa { color: var(--azul); border-bottom-color: var(--azul); }
.registro-icono { background: var(--azul-claro); color: #2F659F; }
.registro-seguridad .registro-icono,
.registro-sistema .registro-icono { background: var(--ambar-claro); color: var(--ambar-oscuro); }

/* Responsive */
@media (max-width: 991.98px) {
    body.menu-bloqueado { overflow: hidden; }
    .menu {
        width: min(88vw, 310px);
        box-shadow: 24px 0 70px rgba(2, 10, 23, .35);
    }
    .menu-cerrar { display: grid; place-items: center; }
    .menu-marca { padding-right: 4rem; }
    .app.menu-abierto .fondo-menu {
        background: rgba(3, 11, 25, .62);
        backdrop-filter: blur(3px);
    }
    .barra-marca { display: flex; }
    .barra-superior { min-height: 64px; }
    .btn-menu { display: grid; place-items: center; padding: 0; }
    .pagina { padding-top: 1.25rem; }
    .aviso-mantenimiento { margin: .75rem 1rem 0; }
}

@media (max-width: 860px) {
    .acceso { min-height: 100svh; grid-template-columns: minmax(0, 1fr); }
    .acceso-momento {
        min-height: 245px;
        padding: 1.25rem clamp(1.15rem, 5vw, 2rem) 1.6rem;
        gap: .7rem;
    }
    .acceso-marca { justify-content: space-between; }
    .acceso-logo { width: 138px; margin: -2.2rem 0; }
    .acceso-marca > div { text-align: right; }
    .acceso-momento .momento-hora { font-size: clamp(3.15rem, 13vw, 4.8rem); }
    .acceso-saludo { margin-top: .45rem; }
    .acceso-formulario { align-items: flex-start; padding: 1.4rem 1rem 2.2rem; }
    .acceso-caja { max-width: 520px; padding: clamp(1.3rem, 5vw, 2rem); }
    .acceso-caja form { min-width: 0; }
}

@media (max-width: 767.98px) {
    .pagina-encabezado.d-flex > div:first-child { flex: 1 1 100%; }
    .pagina-encabezado.d-flex > .btn { flex: 1 1 auto; }
    .inicio-momento { border-radius: 18px; }
    .tarjeta { padding: 1.25rem; }
    .ficha-datos { grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); }
    .tabla { min-width: 620px; }
    .tabla td,
    .tabla thead th { padding-left: 1rem; padding-right: 1rem; }
    .lista-notificaciones .notificacion { padding: .9rem 1rem; }
    .aviso-mantenimiento { align-items: flex-start; flex-wrap: wrap; }
    .aviso-mantenimiento a { margin-left: 1.6rem; }
}

@media (max-width: 575.98px) {
    .barra-superior { padding: .65rem .75rem; }
    .barra-marca { font-size: .94rem; }
    .barra-superior-derecha { margin-left: auto; }
    .pagina { padding: 1rem .75rem 2rem; }
    .pagina-encabezado { margin-bottom: 1.25rem; }
    .pagina-titulo { font-size: 1.55rem; }
    .pagina-bajada { font-size: .91rem; }
    .tarjeta { border-radius: 15px; padding: 1.05rem; }
    .tarjeta-titulo.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
    .inicio-momento { padding: 1.35rem 1.15rem; }
    .inicio-momento h1 { font-size: 1.55rem; }
    .inicio-linea { margin-inline: .4rem; }
    .filtros { padding: .7rem; }
    .filtros > .btn,
    .filtros > a.btn { flex: 1 1 calc(50% - .35rem); }
    .ficha-datos { grid-template-columns: 1fr; }
    .ficha-datos > div { padding-left: .7rem; }
    .paginacion { align-items: stretch; flex-direction: column; }
    .paginacion > .d-flex { width: 100%; }
    .paginacion .btn { flex: 1; }
    .formulario-acciones { gap: .5rem; }
    .confirmacion { padding: 2rem 1.15rem; }
    .campanita-menu { width: calc(100vw - 1.5rem); }
    .herramienta-accion { flex-wrap: wrap; }
    .herramienta-accion .form-control { flex-basis: 100%; }
    .permiso-origen { padding-left: 0; }
    .acceso-marca > div { display: none; }
    .acceso-caja .d-flex.justify-content-between {
        flex-wrap: wrap;
        gap: .15rem .75rem;
    }
    .acceso-caja .enlace-chico { margin-left: auto; }
}

@media (max-width: 380px) {
    .barra-marca > span { display: none; }
    .acceso-caja { padding: 1.15rem; border-radius: 17px; }
    .acceso-momento { min-height: 220px; }
    .acceso-logo { width: 125px; }
}

/* ═══════════════════════════════════════════════════════════════
   PRESENTACIÓN DE INFORMACIÓN — jerarquía y lectura del panel
   ═══════════════════════════════════════════════════════════════ */
.pagina-encabezado {
    position: relative;
    padding: .3rem 0 1.35rem;
    border-bottom: 1px solid #D8E4F0;
}
.pagina-encabezado::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 64px;
    height: 3px;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--azul), var(--cian));
}
.pagina-bajada { font-size: .93rem; }

.tarjeta {
    border-color: #D9E4F0;
    box-shadow: 0 8px 30px rgba(27, 63, 105, .055);
}
.tarjeta-titulo {
    display: flex;
    align-items: center;
    gap: .55rem;
    color: #2C4565;
    font-family: var(--fuente-titulos);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .075em;
}
.tarjeta-titulo::before {
    content: '';
    width: 4px;
    height: 16px;
    border-radius: 99px;
    background: linear-gradient(var(--cian), var(--azul));
    box-shadow: 0 0 9px rgba(0, 207, 244, .28);
}
.tarjeta-titulo:empty::before { display: none; }

/* Inicio: cuenta + herramientas, sin cajas vacías */
.tablero-grid {
    display: grid;
    grid-template-columns: minmax(280px, .72fr) minmax(0, 1.55fr);
    gap: 1.15rem;
    align-items: start;
}
.cuenta-panel {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-width: 0;
    border: 1px solid #CBDBEC;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 207, 244, .13), transparent 13rem),
        linear-gradient(145deg, #FFFFFF, #F3F8FE);
    box-shadow: 0 14px 38px rgba(19, 57, 103, .075);
}
.cuenta-panel::after {
    content: '';
    position: absolute;
    right: -4rem;
    top: -5rem;
    width: 11rem;
    height: 11rem;
    border: 1rem solid rgba(255, 138, 30, .07);
    border-radius: 50%;
}
.cuenta-identidad {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: .9rem;
    padding: 1.35rem 1.35rem 1.1rem;
    border-bottom: 1px solid #DCE7F2;
}
.avatar-cuenta {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 1rem;
    box-shadow: 0 8px 18px rgba(7, 107, 255, .12);
}
.cuenta-etiqueta,
.seccion-sobrelinea {
    display: block;
    margin-bottom: .18rem;
    color: #66809F;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .13em;
    text-transform: uppercase;
}
.cuenta-identidad h2 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -.025em;
}
.cuenta-rol {
    display: block;
    margin-top: .12rem;
    color: #5E7390;
    font-size: .76rem;
    font-weight: 600;
}
.cuenta-detalles {
    display: grid;
    gap: 0;
    margin: 0;
    padding: .45rem 1.35rem;
}
.cuenta-detalles > div {
    display: grid;
    grid-template-columns: minmax(105px, .8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: .75rem;
    padding: .72rem 0;
    border-bottom: 1px dashed #D8E4F0;
}
.cuenta-detalles > div:last-child { border-bottom: 0; }
.cuenta-detalles dt {
    color: #6A7F99;
    font-size: .72rem;
    font-weight: 700;
}
.cuenta-detalles dt i { margin-right: .3rem; color: #5480B2; }
.cuenta-detalles dd {
    min-width: 0;
    margin: 0;
    color: #1A304D;
    font-size: .82rem;
    font-weight: 650;
    overflow-wrap: anywhere;
}
.cuenta-enlace {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto;
    padding: .9rem 1.35rem;
    border-top: 1px solid #DCE7F2;
    color: #075FCC;
    font-size: .8rem;
    font-weight: 800;
    text-decoration: none;
}
.cuenta-enlace:hover { color: var(--azul); background: rgba(232, 243, 255, .7); }
.cuenta-enlace i { transition: transform .18s ease; }
.cuenta-enlace:hover i { transform: translateX(3px); }

.modulos-panel {
    min-width: 0;
    padding: 1.35rem;
    border: 1px solid #D9E4F0;
    border-radius: 20px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 14px 38px rgba(19, 57, 103, .055);
}
.seccion-encabezado {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}
.seccion-encabezado h2 { margin: 0; font-size: 1.22rem; letter-spacing: -.035em; }
.seccion-encabezado p { margin: .18rem 0 0; color: var(--texto-suave); font-size: .82rem; }
.modulos-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .75rem;
}
.modulos-grid .acceso-rapido {
    position: relative;
    min-height: 96px;
    padding: .95rem 2.5rem .95rem .95rem;
    border: 1px solid #D9E5F2;
    border-radius: 15px;
    background: linear-gradient(145deg, #fff, #F8FBFF);
    box-shadow: none;
}
.modulos-grid .acceso-rapido::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    border-radius: 15px 0 0 15px;
    background: var(--modulo-color, var(--azul));
    opacity: .85;
}
.modulos-grid .acceso-rapido:hover {
    border-color: color-mix(in srgb, var(--modulo-color, var(--azul)) 40%, #D9E5F2);
    transform: translateY(-2px);
    box-shadow: 0 12px 25px rgba(28, 67, 113, .09);
}
.modulos-grid .acceso-rapido-icono {
    width: 44px;
    height: 44px;
    color: var(--modulo-color, var(--azul));
    background: color-mix(in srgb, var(--modulo-color, var(--azul)) 10%, #fff);
}
.acceso-rapido-texto { min-width: 0; }
.acceso-rapido-texto strong { color: #1E3654; font-size: .9rem; }
.acceso-rapido-texto > span { display: block; margin-top: .12rem; line-height: 1.35; }
.acceso-rapido-flecha {
    position: absolute;
    top: .9rem;
    right: .9rem;
    color: #91A5BC;
    font-size: .9rem;
    transition: color .18s ease, transform .18s ease;
}
.acceso-rapido:hover .acceso-rapido-flecha { color: var(--modulo-color, var(--azul)); transform: translate(2px, -2px); }
.acceso-tv { --modulo-color: #076BFF; }
.acceso-clientes { --modulo-color: #00A7C8; }
.acceso-canales { --modulo-color: #7657E8; }
.acceso-usuarios { --modulo-color: #16856B; }
.acceso-roles { --modulo-color: #E27818; }
.acceso-tecnico { --modulo-color: #60728A; }
.modulos-vacio { grid-column: 1 / -1; padding: 2rem; text-align: center; color: var(--texto-suave); }
.modulos-vacio i { display: block; margin-bottom: .5rem; font-size: 1.6rem; }

/* Métricas: los números importantes se distinguen de las fichas comunes */
.metricas-bloque + .metricas-bloque {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid #E0E9F3;
}
.metricas-bloque-titulo {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin: 0 0 .7rem;
    color: #48627F;
    font-family: var(--fuente-texto);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .025em;
}
.metricas-bloque-titulo i { color: var(--azul); }
.resumen-metricas {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: .65rem;
}
.resumen-metricas > div {
    position: relative;
    overflow: hidden;
    min-height: 94px;
    padding: .9rem 1rem;
    border: 1px solid #DCE7F2;
    border-left: 1px solid #DCE7F2;
    border-radius: 14px;
    background: linear-gradient(145deg, #F9FCFF, #F3F8FE);
}
.resumen-metricas > div::after {
    content: '';
    position: absolute;
    right: -.7rem;
    bottom: -.9rem;
    width: 3.2rem;
    height: 3.2rem;
    border: .55rem solid rgba(7, 107, 255, .055);
    border-radius: 50%;
}
.resumen-metricas dt {
    position: relative;
    z-index: 1;
    color: #697E98;
    font-size: .7rem;
    font-weight: 700;
    line-height: 1.35;
}
.resumen-metricas dd,
.resumen-metricas dd.fs-4 {
    position: relative;
    z-index: 1;
    margin-top: .42rem;
    color: #132D4D;
    font-size: clamp(1.2rem, 1.8vw, 1.55rem) !important;
    font-weight: 750;
    letter-spacing: -.045em;
    line-height: 1;
}
.resumen-metricas > div:first-child {
    border-color: rgba(7, 107, 255, .3);
    background: linear-gradient(145deg, #EAF4FF, #F6FBFF);
}
.resumen-clientes > div:nth-child(1) dd { color: var(--salvia); }
.resumen-clientes > div:nth-child(2) dd { color: #D96B0B; }
.resumen-clientes > div:nth-child(3) dd { color: var(--peligro); }
.resumen-balance > div:last-child {
    border-color: rgba(22, 133, 107, .28);
    background: linear-gradient(145deg, #EAF8F3, #F7FCFA);
}
.resumen-balance > div:last-child dd { color: var(--salvia); }

.tarjeta-en-vivo {
    color: #D3E4F7;
    border-color: #153E6F;
    background:
        radial-gradient(circle at 92% 18%, rgba(0, 207, 244, .19), transparent 14rem),
        linear-gradient(130deg, #071A38, #0A315A);
}
.tarjeta-en-vivo .tarjeta-titulo { color: #BBD2EC; }
.tarjeta-en-vivo .resumen-metricas > div {
    border-color: rgba(132, 184, 235, .2);
    background: rgba(255, 255, 255, .07);
}
.tarjeta-en-vivo .resumen-metricas dt { color: #AFC7E2; }
.tarjeta-en-vivo .resumen-metricas dd { color: #fff; }

/* Fichas y detalles: menos cajas, mejor separación */
.ficha-datos:not(.resumen-metricas) {
    gap: 0 1.5rem;
}
.ficha-datos:not(.resumen-metricas) > div {
    padding: .85rem 0;
    border: 0;
    border-bottom: 1px solid #E7EEF6;
}
.ficha-datos:not(.resumen-metricas) dt { margin-bottom: .28rem; color: #71849B; }
.ficha-datos:not(.resumen-metricas) dd { color: #1A304C; font-size: .92rem; }
.datos-lista { gap: 0; }
.datos-lista > div {
    display: grid;
    grid-template-columns: minmax(110px, .8fr) minmax(0, 1.2fr);
    gap: 1rem;
    padding: .75rem 0;
    border-bottom: 1px solid #E7EEF6;
}
.datos-lista > div:last-child { border-bottom: 0; }
.datos-lista dd { overflow-wrap: anywhere; }

.ficha-encabezado {
    padding: 1.2rem 1.35rem;
    border: 1px solid #D5E3F1;
    border-radius: 18px;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 207, 244, .1), transparent 15rem),
        linear-gradient(145deg, #FFFFFF, #F4F9FF);
    box-shadow: 0 9px 28px rgba(27, 63, 105, .055);
}
.ficha-encabezado .pagina-bajada { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.tarjeta-acciones .btn { min-height: 45px; background-color: #FAFCFF; }
.tarjeta-acciones .btn:hover { background-color: var(--azul-claro); }

/* Listados */
.filtros {
    gap: .7rem;
    margin-bottom: .85rem;
    padding: .72rem;
    border-color: #DCE7F2;
    background: #EDF4FB;
    box-shadow: none;
}
.filtros .form-control,
.filtros .form-select { background-color: #fff; border-color: #D2DFEC; }
.tarjeta.p-0 {
    overflow: hidden;
    border-radius: 17px;
}
.tabla { margin: 0; }
.tabla thead th {
    height: 46px;
    color: #607792;
    background: #F2F7FC;
    border-bottom: 1px solid #D8E4F0;
}
.tabla tbody td { height: 60px; }
.tabla tbody tr:nth-child(even) { background: rgba(246, 250, 254, .62); }
.tabla tbody tr:hover { background: #EAF4FF; }
.tabla a:not(.btn) { color: #174E8E; font-weight: 700; text-decoration: none; }
.tabla a:not(.btn):hover { color: var(--azul); }
.tabla tfoot th,
.tabla tfoot td {
    padding: .9rem 1.25rem;
    border-top: 2px solid #C7D8EA;
    background: #EDF4FB;
}
.paginacion { margin-top: .85rem; }

/* Formularios */
.formulario-seccion {
    position: relative;
    overflow: hidden;
}
.formulario-seccion::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(var(--cian), var(--azul));
}
.formulario-acciones {
    position: sticky;
    bottom: .75rem;
    z-index: 10;
    margin-left: auto;
    padding: .65rem;
    border: 1px solid #D5E2EF;
    border-radius: 14px;
    background: rgba(255,255,255,.9);
    box-shadow: 0 12px 30px rgba(20, 53, 94, .1);
    backdrop-filter: blur(12px);
}

@media (max-width: 1199.98px) {
    .tablero-grid { grid-template-columns: minmax(260px, .78fr) minmax(0, 1.4fr); }
    .modulos-grid { grid-template-columns: 1fr; }
}

@media (max-width: 767.98px) {
    .tablero-grid { grid-template-columns: 1fr; }
    .cuenta-panel { order: 2; }
    .modulos-panel { order: 1; }
    .modulos-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resumen-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ficha-encabezado { padding: 1rem; }
    .datos-lista > div { grid-template-columns: 1fr; gap: .2rem; }
}

@media (max-width: 575.98px) {
    .inicio-linea { margin-bottom: 1.25rem; }
    .modulos-panel { padding: 1rem; border-radius: 16px; }
    .seccion-encabezado { margin-bottom: .8rem; }
    .modulos-grid { grid-template-columns: 1fr; }
    .modulos-grid .acceso-rapido { min-height: 86px; }
    .cuenta-identidad { padding: 1.1rem; }
    .cuenta-detalles { padding-inline: 1.1rem; }
    .cuenta-detalles > div { grid-template-columns: 1fr; gap: .18rem; }
    .cuenta-enlace { padding-inline: 1.1rem; }
    .resumen-metricas { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .resumen-metricas > div { min-height: 88px; padding: .8rem; }
    .resumen-metricas dd,
    .resumen-metricas dd.fs-4 { font-size: 1.15rem !important; }
    .formulario-acciones { position: static; padding: 0; border: 0; background: transparent; box-shadow: none; }
}

@media (max-width: 390px) {
    .resumen-metricas { grid-template-columns: 1fr; }
}

/* ==========================================================================
   KAIROS CONTROL — capa visual del panel web
   Navegación tipo rail, superficies editoriales y comportamiento responsive.
   ========================================================================== */
:root {
    --tinta: #07162F;
    --tinta-profunda: #030B1B;
    --tinta-suave: #112B51;
    --papel: #F4F7FB;
    --superficie: #FFFFFF;
    --borde: #DCE5F0;
    --texto: #17263B;
    --texto-suave: #66768B;
    --azul: #1268F4;
    --cian: #09C7E8;
    --ambar: #FF9429;
    --ambar-oscuro: #D96500;
    --salvia: #11866D;
    --peligro: #C83F56;
    --radio: 16px;
    --radio-chico: 10px;
    --ancho-menu: 264px;
    --ancho-rail: 82px;
    --sombra: 0 1px 2px rgba(7, 22, 47, .04), 0 18px 50px rgba(36, 58, 89, .07);
}

html { background: var(--papel); }
body {
    min-width: 320px;
    background:
        radial-gradient(circle at 87% -12%, rgba(9, 199, 232, .07), transparent 25rem),
        var(--papel);
}

::selection { color: #fff; background: var(--azul); }
a, button, input, select, textarea { transition-duration: .18s; }

/* Controles */
.btn {
    min-height: 42px;
    border-radius: 10px;
    padding: .58rem 1rem;
    font-size: .875rem;
    letter-spacing: -.01em;
    transition: transform .16s ease, box-shadow .16s ease, background-color .16s ease, border-color .16s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary {
    --bs-btn-bg: #0A1832;
    --bs-btn-border-color: #0A1832;
    --bs-btn-hover-bg: #123563;
    --bs-btn-hover-border-color: #123563;
    box-shadow: 0 8px 20px rgba(7, 22, 47, .13);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(7, 22, 47, .2); }
.btn-outline-secondary {
    --bs-btn-color: #40536B;
    --bs-btn-border-color: #CBD8E6;
    --bs-btn-hover-color: #12223A;
    --bs-btn-hover-bg: #EDF3F9;
    --bs-btn-hover-border-color: #AEC1D5;
}
.btn-link { color: #315B8C; text-decoration: none; }
.btn-link:hover { color: var(--azul); }

.form-label { color: #2D4059; font-size: .79rem; letter-spacing: .01em; }
.form-control, .form-select {
    min-height: 44px;
    border: 1px solid #D4DFEA;
    border-radius: 10px;
    background-color: #FBFCFE;
    color: #162942;
    box-shadow: 0 1px 1px rgba(7, 22, 47, .02);
}
.form-control:hover, .form-select:hover { border-color: #B8C8D9; }
.form-control:focus, .form-select:focus {
    border-color: #4D91EF;
    background-color: #fff;
    box-shadow: 0 0 0 4px rgba(18, 104, 244, .1);
}
.form-text { color: #7A8899; font-size: .75rem; }
.form-check-input { border-color: #AABBCD; }
.form-check-input:checked { background-color: var(--azul); border-color: var(--azul); }

/* Navegación principal */
.menu {
    width: var(--ancho-menu);
    isolation: isolate;
    overflow: visible;
    border-right: 1px solid rgba(116, 166, 224, .14);
    background:
        radial-gradient(circle at 15% 8%, rgba(9, 199, 232, .16), transparent 13rem),
        radial-gradient(circle at 115% 72%, rgba(255, 148, 41, .11), transparent 15rem),
        linear-gradient(175deg, #081A38 0%, #051126 58%, #030A18 100%);
    box-shadow: 16px 0 45px rgba(4, 14, 32, .06);
    transition: width .26s cubic-bezier(.2,.8,.2,1), transform .25s ease;
}
.menu::before {
    content: '';
    position: absolute;
    z-index: -1;
    right: -58px;
    top: 84px;
    width: 128px;
    height: 128px;
    border: 1px solid rgba(9, 199, 232, .1);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(18, 104, 244, .025), 0 0 0 39px rgba(9, 199, 232, .018);
    pointer-events: none;
}
.menu-marca {
    min-height: 78px;
    gap: .78rem;
    padding: 1.05rem 1.1rem;
    border-bottom: 1px solid rgba(255,255,255,.075);
}
.marca-isotipo {
    width: 45px;
    height: 45px;
    border: 1px solid rgba(87, 217, 255, .22);
    border-radius: 13px;
    background: rgba(255,255,255,.055);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.09), 0 8px 22px rgba(0,0,0,.15);
}
.marca-isotipo img { width: 42px; height: 34px; object-fit: contain; }
.marca-nombre { font-size: 1.08rem; letter-spacing: -.035em; }
.marca-nombre > span { color: var(--ambar); }
.marca-empresa { color: #91AACA; font-size: .65rem; letter-spacing: .075em; text-transform: uppercase; }
.menu-nav {
    scrollbar-width: thin;
    scrollbar-color: rgba(163,193,228,.25) transparent;
    padding: .72rem .68rem 1rem;
}
.menu-grupo {
    min-height: 34px;
    padding: 1rem .72rem .34rem;
    color: #6682A6;
    font-size: .61rem;
    letter-spacing: .16em;
    white-space: nowrap;
    transition: opacity .15s ease;
}
.menu-link {
    min-height: 43px;
    gap: .72rem;
    margin: 2px 0;
    padding: .6rem .72rem;
    border: 1px solid transparent;
    border-radius: 10px;
    color: #A9BED7;
    font-size: .84rem;
    white-space: nowrap;
    transition: color .16s ease, background .16s ease, border-color .16s ease;
}
.menu-link i {
    display: grid;
    flex: 0 0 22px;
    width: 22px;
    place-items: center;
    color: #7896B9;
    font-size: 1rem;
    transition: color .16s ease, transform .16s ease;
}
.menu-link:hover {
    border-color: rgba(148, 189, 234, .1);
    background: rgba(255,255,255,.055);
    color: #fff;
}
.menu-link:hover i { color: var(--cian); transform: translateX(1px); }
.menu-link.activo {
    border-color: rgba(9, 199, 232, .16);
    background: linear-gradient(100deg, rgba(18,104,244,.24), rgba(9,199,232,.08));
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.menu-link.activo i { color: #53DEFA; }
.menu-link.activo::before {
    left: -.69rem;
    top: 9px;
    bottom: 9px;
    width: 3px;
    background: linear-gradient(var(--cian), #4D7CFF);
    box-shadow: 0 0 14px rgba(9,199,232,.65);
}
.menu-link-texto { overflow: hidden; text-overflow: ellipsis; }
.menu-usuario {
    min-height: 72px;
    padding: .78rem .8rem;
    border-top-color: rgba(255,255,255,.08);
    background: rgba(0,0,0,.1);
}
.menu-usuario-perfil { padding: .35rem; margin: 0; }
.menu-usuario-perfil:hover { background: rgba(255,255,255,.06); }
.menu-usuario-nombre { font-size: .8rem; }
.menu-usuario-rol { color: #8199B7; font-size: .68rem; }
.menu .avatar { width: 34px; height: 34px; background: #DFF8FF; color: #075B81; }
.btn-salir { color: #8097B4; }
.btn-salir:hover { background: rgba(255,89,116,.11); color: #FF8EA1; }
.menu-colapsar {
    position: absolute;
    z-index: 2;
    top: 92px;
    right: -13px;
    display: grid;
    width: 27px;
    height: 27px;
    place-items: center;
    padding: 0;
    border: 1px solid #D5E1ED;
    border-radius: 50%;
    background: #fff;
    color: #3B5878;
    box-shadow: 0 5px 15px rgba(15, 38, 68, .16);
    font-size: .72rem;
}
.menu-colapsar:hover { color: var(--azul); transform: scale(1.06); }

.contenido {
    margin-left: var(--ancho-menu);
    transition: margin-left .26s cubic-bezier(.2,.8,.2,1);
}
.app.menu-colapsado .menu { width: var(--ancho-rail); }
.app.menu-colapsado .contenido { margin-left: var(--ancho-rail); }
.app.menu-colapsado .menu-marca { justify-content: center; padding-inline: .6rem; }
.app.menu-colapsado .menu-marca > span:last-child,
.app.menu-colapsado .menu-link-texto,
.app.menu-colapsado .menu-usuario-datos,
.app.menu-colapsado .menu-grupo { display: none; }
.app.menu-colapsado .menu-nav { padding-inline: .66rem; }
.app.menu-colapsado .menu-link { justify-content: center; padding-inline: .5rem; }
.app.menu-colapsado .menu-link i { font-size: 1.08rem; }
.app.menu-colapsado .menu-link.activo::before { left: -.66rem; }
.app.menu-colapsado .menu-usuario { flex-direction: column; gap: .25rem; padding-inline: .45rem; }
.app.menu-colapsado .menu-usuario-perfil { flex: none; }
.app.menu-colapsado .menu-colapsar { right: -13px; }

/* Barra superior y lienzo */
.barra-superior {
    position: sticky;
    top: 0;
    z-index: 1020;
    min-height: 68px;
    padding: .72rem clamp(1rem, 2.4vw, 2.3rem);
    border-bottom: 1px solid rgba(204, 217, 231, .78);
    background: rgba(247, 249, 252, .88);
    box-shadow: 0 1px 0 rgba(255,255,255,.8);
    backdrop-filter: blur(18px) saturate(145%);
}
.btn-menu {
    display: grid;
    flex: 0 0 40px;
    width: 40px;
    height: 40px;
    place-items: center;
    padding: 0;
    border-color: #D5E0EC;
    background: #fff;
    color: #26415F;
    box-shadow: 0 4px 12px rgba(28, 55, 87, .06);
}
.btn-menu:hover { border-color: #B7CCE2; color: var(--azul); }
.barra-marca { display: none; }
.barra-superior-derecha { margin-left: auto; }
.btn-campanita {
    width: 40px;
    height: 40px;
    border-color: #D5E0EC;
    background: #fff;
    box-shadow: 0 4px 12px rgba(28, 55, 87, .06);
}
.campanita-contador { border: 2px solid #fff; background: var(--ambar); }
.campanita-menu { border-color: #D6E2EE; border-radius: 14px; box-shadow: 0 24px 60px rgba(16, 39, 69, .18); }

.pagina {
    max-width: 1540px;
    margin: 0 auto;
    padding: clamp(1.25rem, 2.4vw, 2.2rem) clamp(1rem, 2.5vw, 2.4rem) 3rem;
}
.pagina-encabezado {
    margin-bottom: 1.4rem;
    padding: 0 0 1.15rem;
    border-bottom-color: #D9E3EE;
}
.pagina-encabezado::after { width: 48px; height: 2px; background: linear-gradient(90deg, var(--azul), var(--cian)); }
.pagina-titulo { color: #10233D; font-size: clamp(1.55rem, 2.4vw, 2.05rem); font-weight: 650; letter-spacing: -.045em; }
.pagina-bajada { max-width: 760px; color: #6A7A8E; font-size: .9rem; line-height: 1.55; }

/* Componentes de información */
.tarjeta {
    border: 1px solid #DCE5EF;
    border-radius: 15px;
    background: rgba(255,255,255,.96);
    box-shadow: var(--sombra);
}
.tarjeta-titulo {
    color: #263D59;
    font-size: .72rem;
    letter-spacing: .105em;
}
.tarjeta-titulo::before { width: 3px; height: 14px; background: linear-gradient(var(--cian), var(--azul)); box-shadow: none; }
.ficha-encabezado {
    border-color: #D7E3EF;
    background:
        radial-gradient(circle at 97% 8%, rgba(9,199,232,.1), transparent 13rem),
        linear-gradient(145deg, #FFFFFF, #F7FAFE);
}
.ficha-datos:not(.resumen-metricas) > div { border-bottom-color: #E8EEF5; }
.ficha-datos:not(.resumen-metricas) dt { color: #75859A; font-size: .69rem; letter-spacing: .055em; text-transform: uppercase; }
.ficha-datos:not(.resumen-metricas) dd { color: #1B304A; font-weight: 600; }
.resumen-metricas { gap: .75rem; }
.resumen-metricas > div {
    min-height: 96px;
    border-color: #DEE7F0;
    background: #F8FAFD;
}
.resumen-metricas > div:first-child { border-color: #C9DBF4; background: linear-gradient(145deg, #EDF5FF, #FAFCFF); }
.resumen-metricas dt { color: #718197; letter-spacing: .025em; }
.resumen-metricas dd, .resumen-metricas dd.fs-4 { color: #142C49; font-family: var(--fuente-titulos); font-weight: 650; }
.tarjeta-en-vivo {
    border-color: #163C68;
    background:
        radial-gradient(circle at 92% 16%, rgba(9,199,232,.2), transparent 15rem),
        radial-gradient(circle at 8% 120%, rgba(255,148,41,.1), transparent 13rem),
        linear-gradient(135deg, #081932, #0B2C51);
}
.chip { border-radius: 999px; padding: .28rem .58rem; font-size: .68rem; font-weight: 750; }

/* Tablas, filtros y formularios */
.filtros {
    padding: .7rem;
    border: 1px solid #DCE5EF;
    border-radius: 13px;
    background: rgba(237, 243, 249, .8);
}
.filtros .form-control, .filtros .form-select { background: #fff; }
.tarjeta.p-0 { border-radius: 15px; }
.table-responsive { scrollbar-color: #B8C8D9 transparent; }
.tabla { --bs-table-bg: transparent; }
.tabla thead th {
    height: 44px;
    padding-block: .65rem;
    border-bottom-color: #D7E2ED;
    background: #F5F8FB;
    color: #6A7B90;
    font-size: .66rem;
    font-weight: 800;
    letter-spacing: .075em;
}
.tabla tbody td { height: 58px; border-color: #E9EEF4; color: #26384F; }
.tabla tbody tr:nth-child(even) { background: rgba(247,249,252,.62); }
.tabla tbody tr:hover { background: #F0F6FC; }
.tabla a:not(.btn) { color: #24588E; }
.tabla a:not(.btn):hover { color: var(--azul); }
.paginacion { padding-top: .2rem; }
.formulario-seccion::before { width: 3px; }
.formulario-acciones {
    border-color: #D5E0EB;
    background: rgba(255,255,255,.92);
    box-shadow: 0 12px 32px rgba(18, 43, 73, .1);
}
.alert { border-radius: 11px; }
.vacio { padding: clamp(2rem, 6vw, 4rem) 1.5rem; }
.vacio i { color: #6A8CB4; }

/* Inicio */
.inicio-momento {
    position: relative;
    overflow: hidden;
    align-items: center;
    margin-bottom: 0;
    padding: clamp(1.35rem, 3vw, 2.25rem);
    border: 1px solid #163B66;
    border-radius: 20px;
    background:
        radial-gradient(circle at 86% 24%, rgba(9,199,232,.22), transparent 18rem),
        radial-gradient(circle at 8% 140%, rgba(255,148,41,.12), transparent 16rem),
        linear-gradient(130deg, #07162F, #0B315A);
    box-shadow: 0 20px 45px rgba(7,22,47,.15);
}
.inicio-momento::after {
    content: '';
    position: absolute;
    right: 9%;
    width: 120px;
    height: 120px;
    border: 1px solid rgba(81,222,250,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 22px rgba(81,222,250,.035), 0 0 0 48px rgba(81,222,250,.02);
}
.inicio-momento h1 { position: relative; z-index: 1; color: #fff; font-size: clamp(1.55rem, 2.6vw, 2.25rem); }
.inicio-momento .texto-suave { position: relative; z-index: 1; color: #98B3D3 !important; font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.inicio-momento .momento-hora { position: relative; z-index: 1; color: #fff; font-size: clamp(2.6rem, 5vw, 4rem); }
.inicio-linea { margin: -1px 1.5rem 1.5rem; padding: 0 1rem; color: rgba(255,255,255,.2); transform: translateY(-1.15rem); }
.tablero-grid { gap: 1rem; }
.cuenta-panel, .modulos-panel { border-radius: 16px; box-shadow: var(--sombra); }
.cuenta-panel { border-color: #D8E4EF; }
.modulos-panel { border-color: #DCE5EF; background: rgba(255,255,255,.93); }
.modulos-grid .acceso-rapido {
    min-height: 92px;
    border-radius: 13px;
    background: #FAFCFE;
}
.modulos-grid .acceso-rapido:hover { background: #fff; }

/* Acceso */
.acceso {
    min-height: 100svh;
    grid-template-columns: minmax(480px, 1.12fr) minmax(420px, .88fr);
    background: #F5F7FA;
}
.acceso-momento {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: clamp(2rem, 4.2vw, 4.5rem);
    background:
        radial-gradient(circle at 15% 8%, rgba(9,199,232,.2), transparent 22rem),
        radial-gradient(circle at 98% 82%, rgba(255,148,41,.18), transparent 24rem),
        linear-gradient(145deg, #071831 0%, #081E3E 55%, #061126 100%);
}
.acceso-momento::before,
.acceso-momento::after {
    content: '';
    position: absolute;
    z-index: -1;
    border: 1px solid rgba(93,218,245,.13);
    border-radius: 50%;
}
.acceso-momento::before { right: -11rem; top: 15%; width: 34rem; height: 34rem; box-shadow: 0 0 0 4rem rgba(9,199,232,.018), 0 0 0 8rem rgba(9,199,232,.012); }
.acceso-momento::after { left: -8rem; bottom: -12rem; width: 25rem; height: 25rem; border-color: rgba(255,148,41,.12); }
.acceso-marca { align-items: center; }
.acceso-logo { width: clamp(160px, 18vw, 230px); filter: drop-shadow(0 14px 25px rgba(0,0,0,.18)); }
.acceso-panel { color: #F2F8FF; font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.acceso-momento-centro { max-width: 680px; }
.acceso-estado {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.4rem;
    color: #8FA9C9;
    font-size: .65rem;
    font-weight: 750;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.acceso-estado i { width: 7px; height: 7px; border-radius: 50%; background: #39E3B1; box-shadow: 0 0 0 5px rgba(57,227,177,.1), 0 0 15px rgba(57,227,177,.45); }
.acceso-momento .momento-hora { color: #fff; font-size: clamp(5rem, 10vw, 9rem); font-weight: 500; letter-spacing: -.075em; }
.acceso-saludo { margin-top: 1rem; font-size: clamp(1.35rem, 2.2vw, 1.85rem); }
.acceso-fecha { color: #90A8C6; opacity: 1; }
.acceso-manifiesto { max-width: 430px; margin: 1.6rem 0 0; color: #B4C7DE; font-size: .9rem; line-height: 1.65; }
.acceso-momento .linea-dia { margin-top: 2.2rem; }
.acceso-formulario {
    position: relative;
    padding: clamp(1.5rem, 5vw, 4.5rem);
    background:
        linear-gradient(rgba(22,39,62,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(22,39,62,.035) 1px, transparent 1px),
        #F5F7FA;
    background-size: 32px 32px;
}
.acceso-caja {
    max-width: 440px;
    padding: clamp(1.7rem, 3vw, 2.6rem);
    border: 1px solid rgba(205,218,232,.9);
    border-radius: 20px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 30px 70px rgba(22,43,70,.12), 0 1px 0 #fff inset;
    backdrop-filter: blur(12px);
}
.acceso-form-sobrelinea { display: block; margin-bottom: .65rem; color: var(--azul); font-size: .65rem; font-weight: 800; letter-spacing: .15em; text-transform: uppercase; }
.acceso-caja h1 { color: #11243E; font-size: clamp(1.65rem, 3vw, 2.05rem); font-weight: 650; letter-spacing: -.05em; }
.acceso-caja .bajada { margin-bottom: 2rem; font-size: .88rem; }
.acceso-caja .form-control { min-height: 48px; padding-inline: .9rem; }
.acceso-caja .form-check-label, .enlace-chico { font-size: .78rem; }
.enlace-chico { color: #3D618B; text-decoration: none; }
.enlace-chico:hover { color: var(--azul); }
.btn-ingresar { justify-content: space-between; min-height: 49px; padding-inline: 1.1rem; }
.btn-ingresar i { transition: transform .18s ease; }
.btn-ingresar:hover i { transform: translateX(3px); }

/* Utilitarios de sistema */
.error-pagina { background: radial-gradient(circle at 50% 0, rgba(9,199,232,.09), transparent 26rem), var(--papel); }
.error-pagina > div { border-color: #D8E3EE; border-radius: 20px; }
.error-codigo { background-image: linear-gradient(110deg, var(--azul), var(--cian)); }
.aviso-mantenimiento { border-radius: 12px; }
.herramienta { border-radius: 14px; }
.tarjeta-rol { border-radius: 14px; }
.notificacion.no-leida::before { background: linear-gradient(var(--cian), var(--azul)); }

@media (max-width: 1199.98px) {
    :root { --ancho-menu: 246px; }
    .pagina { padding-inline: 1.5rem; }
}

@media (max-width: 991.98px) {
    .menu { width: min(88vw, 306px); }
    .contenido, .app.menu-colapsado .contenido { margin-left: 0; }
    .app.menu-colapsado .menu { width: min(88vw, 306px); }
    .app.menu-colapsado .menu-marca { justify-content: flex-start; padding-inline: 1.1rem; }
    .app.menu-colapsado .menu-marca > span:last-child { display: block; }
    .app.menu-colapsado .menu-link-texto { display: inline; }
    .app.menu-colapsado .menu-usuario-datos { display: flex; }
    .app.menu-colapsado .menu-grupo { display: block; }
    .app.menu-colapsado .menu-link { justify-content: flex-start; padding-inline: .72rem; }
    .app.menu-colapsado .menu-usuario { flex-direction: row; padding-inline: .8rem; }
    .menu-colapsar { display: none; }
    .barra-marca { display: flex; }
    .barra-superior { padding-inline: 1rem; }
    .pagina { padding: 1.4rem 1rem 2.5rem; }
    .acceso { grid-template-columns: minmax(0, 1fr); }
    .acceso-momento { min-height: 250px; padding: 1.35rem clamp(1.15rem, 5vw, 2.5rem) 1.7rem; }
    .acceso-momento-centro { margin-top: auto; }
    .acceso-momento .momento-hora { font-size: clamp(3.3rem, 12vw, 5.2rem); }
    .acceso-estado, .acceso-manifiesto, .acceso-momento .linea-dia, .acceso-momento .linea-dia-marcas, .acceso-pie { display: none; }
    .acceso-saludo { margin: .45rem 0 .15rem; }
    .acceso-formulario { align-items: flex-start; padding: 1.5rem 1rem 2.5rem; }
    .acceso-caja { max-width: 560px; }
}

@media (max-width: 767.98px) {
    .pagina { padding-inline: .85rem; }
    .pagina-encabezado { gap: .75rem; }
    .pagina-encabezado.d-flex > .btn { flex: 1 1 auto; }
    .tarjeta { padding: 1.15rem; }
    .inicio-momento { border-radius: 16px; padding: 1.4rem 1.2rem; }
    .inicio-linea { margin-inline: .75rem; }
    .modulos-panel, .cuenta-panel { border-radius: 14px; }
    .tabla { min-width: 680px; }
}

@media (max-width: 575.98px) {
    .barra-superior { min-height: 60px; padding: .58rem .72rem; }
    .btn-menu, .btn-campanita { width: 38px; height: 38px; }
    .pagina { padding: 1.1rem .72rem 2rem; }
    .pagina-titulo { font-size: 1.45rem; }
    .pagina-bajada { font-size: .84rem; }
    .inicio-momento { margin-inline: 0; }
    .inicio-momento::after { right: -2rem; }
    .inicio-linea { transform: translateY(-.85rem); margin-bottom: .7rem; }
    .filtros { border-radius: 11px; }
    .filtros > .btn, .filtros > a.btn { flex: 1 1 calc(50% - .35rem); }
    .formulario-acciones { position: static; padding: 0; border: 0; background: transparent; box-shadow: none; }
    .acceso-momento { min-height: 218px; }
    .acceso-logo { width: 135px; }
    .acceso-caja { padding: 1.4rem 1.2rem; border-radius: 16px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}