:root {
    --tc-azul: #0d3b66;
    --tc-azul-claro: #17538d;
    --tc-acento: #f4a261;
    --tc-fondo: #f4f6f9;
}

html, body { height: 100%; }

body {
    background: var(--tc-fondo);
    font-size: .95rem;
    padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- Barra superior y menús ---------- */
.barra-superior { background: var(--tc-azul); box-shadow: 0 2px 6px rgba(0,0,0,.15); }

/* flex: 0 0 auto es lo que impide que la barra se comprima y las etiquetas
   se partan en varios renglones cuando la ventana es angosta. */
.menu-fijo {
    flex: 0 0 250px;
    width: 250px;
    align-self: flex-start;
    position: sticky;
    top: 56px;
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: .5rem 0 1rem;
    background: #fff;
    border-right: 1px solid #e3e7ed;
    transition: flex-basis .15s ease, width .15s ease;
}

/* ---------- Menú plegado a iconos (más espacio de trabajo) ---------- */
html.menu-plegado .menu-fijo { flex-basis: 62px; width: 62px; }
html.menu-plegado .menu-fijo .menu .nav-link span { display: none; }
html.menu-plegado .menu-fijo .menu .nav-link { justify-content: center; padding-inline: .5rem; }
html.menu-plegado .menu-fijo .menu .nav-link::before { display: none; }

/* Los encabezados de sección se vuelven un separador para no perder el agrupado. */
html.menu-plegado .menu-fijo .menu-titulo {
    font-size: 0;
    padding: .75rem 0 0;
    margin: .35rem .75rem 0;
    border-top: 1px solid #e9ecef;
}

#alternar-menu i { transition: transform .15s ease; }
html.menu-plegado #alternar-menu i { transform: rotate(180deg); }

.menu-lateral { width: 275px; }

.menu .nav-link {
    position: relative;
    color: #3d4a60;
    border-radius: .45rem;
    margin: .08rem .6rem;
    padding: .5rem .7rem;
    display: flex;
    align-items: center;
    gap: .65rem;
    line-height: 1.25;
    /* Una opción, un renglón: si no cabe se recorta y el título completo
       queda en el tooltip, en vez de partirse en dos o tres líneas. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu .nav-link span {
    overflow: hidden;
    text-overflow: ellipsis;
}

.menu .nav-link:hover { background: #eef3f9; color: var(--tc-azul); }

.menu .nav-link.active {
    background: #e7eef7;
    color: var(--tc-azul);
    font-weight: 600;
}

/* Barra de acento a la izquierda en lugar de un bloque azul macizo. */
.menu .nav-link.active::before {
    content: "";
    position: absolute;
    left: -.6rem;
    top: .35rem;
    bottom: .35rem;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--tc-azul);
}

.menu .nav-link i {
    flex: 0 0 1.35rem;
    font-size: 1.05rem;
    text-align: center;
    color: #6b7a90;
}

.menu .nav-link:hover i,
.menu .nav-link.active i { color: var(--tc-azul); }

.menu-titulo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .09em;
    color: #9aa3b2;
    padding: .5rem 1.3rem .25rem;
    margin-top: .5rem;
    font-weight: 700;
}

/* min-width: 0 deja que el contenido se encoja dentro del flex sin
   empujar ni quedar debajo de la barra lateral. */
.contenido { min-width: 0; flex: 1 1 auto; }

/* ---------- Navegación inferior (móvil) ---------- */
.nav-inferior {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    display: flex;
    background: #fff;
    border-top: 1px solid #dee2e6;
    z-index: 1030;
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-inferior a {
    flex: 1;
    text-align: center;
    padding: .45rem .2rem .5rem;
    color: #6c757d;
    text-decoration: none;
    font-size: .68rem;
}

.nav-inferior a i { display: block; font-size: 1.25rem; }
.nav-inferior a.active { color: var(--tc-azul); font-weight: 600; }

@media (max-width: 991.98px) {
    .contenido { padding-bottom: 4.5rem; }
}

/* ---------- Tarjetas de indicadores ---------- */
.tarjeta-kpi {
    border: 0;
    border-left: 4px solid var(--bs-primary);
    box-shadow: 0 1px 3px rgba(16,24,40,.08);
    transition: transform .12s ease;
}

.tarjeta-kpi:hover { transform: translateY(-2px); }
.tarjeta-kpi .valor { font-size: 1.7rem; font-weight: 700; line-height: 1.1; }
.tarjeta-kpi .titulo { font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: #6c757d; }
.tarjeta-kpi .icono { font-size: 1.9rem; opacity: .25; }

.card { border: 0; box-shadow: 0 1px 3px rgba(16,24,40,.08); }
.card-header { background: #fff; border-bottom: 1px solid #eef0f3; font-weight: 600; }

/* ---------- Gráfica de barras sin dependencias ---------- */
.grafica { display: flex; flex-direction: column; gap: .55rem; }
.grafica .fila { display: grid; grid-template-columns: minmax(90px, 30%) 1fr auto; gap: .6rem; align-items: center; }
.grafica .etiqueta { font-size: .8rem; color: #495057; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.grafica .barra { background: #e9ecef; border-radius: 1rem; height: .8rem; overflow: hidden; }
.grafica .barra span { display: block; height: 100%; border-radius: 1rem; background: linear-gradient(90deg, var(--tc-azul-claro), var(--tc-azul)); }
.grafica .valor { font-size: .78rem; font-weight: 600; min-width: 3rem; text-align: right; }

/* ---------- Tablas ---------- */
.tabla-scroll { overflow-x: auto; }
.table > :not(caption) > * > * { padding: .6rem .7rem; }

.table thead th {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #7a8699;
    font-weight: 600;
    background: #fafbfc;
    border-bottom-width: 1px;
    white-space: nowrap;
}

/* Los botones de acción solo se pintan al pasar por el renglón: la lista se lee
   por su contenido, no por una rejilla de iconos de colores. */
.acciones .btn { color: #6b7a90; border-color: #dde2e9; }
.acciones .btn-outline-danger { color: #b02a37; border-color: #eccfd2; }
.table-hover > tbody > tr:hover .acciones .btn { border-color: #c9d2dd; }
.acciones .btn:hover { color: #fff; }
.acciones .btn-outline-secondary:hover { background: var(--tc-azul); border-color: var(--tc-azul); }
.acciones .btn-warning:hover { color: #212529; }

/* ---------- Pantalla de acceso ---------- */
.pantalla-acceso {
    background: linear-gradient(135deg, var(--tc-azul) 0%, #10508f 60%, #1b7fa8 100%);
    min-height: 100vh;
}

.caja-acceso {
    max-width: 420px;
    margin: 6vh auto;
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    box-shadow: 0 18px 40px rgba(0,0,0,.25);
}

/* ---------- Caseta ---------- */
.semaforo { border-radius: 1rem; padding: 1.5rem; color: #fff; }
.semaforo.permitido { background: #198754; }
.semaforo.denegado { background: #dc3545; }
.semaforo .titulo { font-size: 1.6rem; font-weight: 700; }
.foto-visitante { width: 110px; height: 140px; object-fit: cover; border-radius: .5rem; border: 2px solid #fff; }

.gafete-vista {
    width: 340px;
    border-radius: .6rem;
    overflow: hidden;
    box-shadow: 0 6px 18px rgba(0,0,0,.2);
    background: #fff;
}

.gafete-vista .encabezado { background: var(--tc-azul); color: #fff; padding: .5rem .75rem; }

/* ---------- Utilidades ---------- */
.estatus { font-size: .75rem; }
.campo-obligatorio::after { content: " *"; color: #dc3545; }
.text-mono { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; }

@media print {
    .barra-superior, .menu-fijo, .nav-inferior, .no-imprimir, .offcanvas { display: none !important; }
    .contenido { padding: 0; }
    body { background: #fff; }
}