: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; }
}

/* ===================================================================
   ESTATUS — una palabra y un color por estado, iguales en todo el
   sistema. Los colores se declaran aquí con valor propio, no con las
   clases de Bootstrap, para que el estatus se vea igual en tema claro
   y en oscuro: lo que cambia entre temas es la luminosidad, nunca el
   tono, de modo que la gente aprende a reconocerlo de un vistazo.
   La palabra la decide Models/Estados.cs; aquí solo va el color.
   =================================================================== */
.est {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    line-height: 1.4;
    padding: .12rem .5rem;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
    background: var(--est-fondo);
    color: var(--est-tinta);
    border-color: var(--est-borde);
}

/* --- Expediente documental --- */
.est-sinentregar  { --est-fondo:#FEE4E2; --est-tinta:#912018; --est-borde:#FDA29B; }  /* rojo    */
.est-porrevisar   { --est-fondo:#FEF0C7; --est-tinta:#93370D; --est-borde:#FEC84B; }  /* ámbar   */
.est-aceptado     { --est-fondo:#D1FADF; --est-tinta:#05603A; --est-borde:#6CE9A6; }  /* verde   */
.est-devuelto     { --est-fondo:#FCE7F6; --est-tinta:#9B1877; --est-borde:#F0A6DC; }  /* vino    */
.est-vencido      { --est-fondo:#EBE9FE; --est-tinta:#5720B7; --est-borde:#BDB4FE; }  /* morado  */

/* --- Lectura automática (OCR) --- */
.est-leido        { --est-fondo:#CFF9FE; --est-tinta:#0B4A6F; --est-borde:#67E3F9; }  /* turquesa */
.est-revisar      { --est-fondo:#FFEAD5; --est-tinta:#9C2A10; --est-borde:#FDA478; }  /* naranja  */
.est-ilegible     { --est-fondo:#EAECF0; --est-tinta:#4A3A22; --est-borde:#D0B48A; }  /* café     */
.est-sinleer      { --est-fondo:#F2F4F7; --est-tinta:#475467; --est-borde:#D0D5DD; }  /* gris     */

/* --- Proyectos y renglones --- */
.est-siniciar     { --est-fondo:#F2F4F7; --est-tinta:#344054; --est-borde:#D0D5DD; }  /* gris    */
.est-encurso      { --est-fondo:#D1E9FF; --est-tinta:#194185; --est-borde:#84CAFF; }  /* azul    */
.est-terminado    { --est-fondo:#CCFBEF; --est-tinta:#125D56; --est-borde:#5FE9D0; }  /* esmeralda */

/* --- Accesos a planta --- */
.est-porautorizar { --est-fondo:#FBF3D0; --est-tinta:#7A5A00; --est-borde:#EACC53; }  /* mostaza */
.est-autorizado   { --est-fondo:#E3FBCC; --est-tinta:#3B6212; --est-borde:#A6EF67; }  /* lima    */
.est-negado       { --est-fondo:#FEE4E2; --est-tinta:#7A271A; --est-borde:#F97066; }  /* granate */

.est-vacio        { --est-fondo:transparent; --est-tinta:var(--bs-secondary-color, #6c757d); --est-borde:transparent; }

/* En oscuro se conserva el tono y se invierte la luminosidad. */
@media (prefers-color-scheme: dark) {
    .est-sinentregar  { --est-fondo:#3B1310; --est-tinta:#FDA29B; --est-borde:#7A271A; }
    .est-porrevisar   { --est-fondo:#3A2A08; --est-tinta:#FEC84B; --est-borde:#7A5A00; }
    .est-aceptado     { --est-fondo:#0C2C1E; --est-tinta:#6CE9A6; --est-borde:#085D3A; }
    .est-devuelto     { --est-fondo:#3A0C2C; --est-tinta:#F0A6DC; --est-borde:#8B1A6B; }
    .est-vencido      { --est-fondo:#211547; --est-tinta:#BDB4FE; --est-borde:#4A1FB8; }
    .est-leido        { --est-fondo:#062E3C; --est-tinta:#67E3F9; --est-borde:#0B4A6F; }
    .est-revisar      { --est-fondo:#3A1A0A; --est-tinta:#FDA478; --est-borde:#8C2E10; }
    .est-ilegible     { --est-fondo:#2A2318; --est-tinta:#D0B48A; --est-borde:#5A4A2E; }
    .est-sinleer      { --est-fondo:#1E242E; --est-tinta:#98A2B3; --est-borde:#344054; }
    .est-siniciar     { --est-fondo:#1E242E; --est-tinta:#CFD4DC; --est-borde:#344054; }
    .est-encurso      { --est-fondo:#0E2647; --est-tinta:#84CAFF; --est-borde:#194185; }
    .est-terminado    { --est-fondo:#062F2A; --est-tinta:#5FE9D0; --est-borde:#125D56; }
    .est-porautorizar { --est-fondo:#2F2708; --est-tinta:#EACC53; --est-borde:#7A5A00; }
    .est-autorizado   { --est-fondo:#1A2E0C; --est-tinta:#A6EF67; --est-borde:#3B6212; }
    .est-negado       { --est-fondo:#3B1310; --est-tinta:#F97066; --est-borde:#912018; }
}