/* =====================================================================
   Access - Estilos base de marca
   ---------------------------------------------------------------------
   Paleta:
     --ci-primary    Verde oscuro (identidad Moomba)

   Colores del SEMAFORO de la puerta. No son decoracion: el operador los
   lee de un vistazo y a distancia, asi que cada uno tiene que seguir
   siendo distinguible de los otros tres.
     --ci-green      Permitido
     --ci-yellow     Revision
     --ci-red        Bloqueo
     --ci-blue       Extranjero
   ===================================================================== */

:root {
    --ci-primary: #0f4d2f;
    --ci-primary-600: #17724a;
    --ci-primary-050: #e9f7ef;
    --ci-green: #1e9e5a;
    --ci-yellow: #e6a700;
    --ci-red: #d13438;
    --ci-blue: #2b6cb0;
    --ci-gray-050: #f4f8f5;
    --ci-gray-100: #e4ebe6;
    --ci-gray-600: #5a6472;
    --ci-ink: #1b2430;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ci-ink);
    background: var(--ci-gray-050);
}

/* Marca --------------------------------------------------------------*/
.ci-brand {
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--ci-primary);
}
.ci-brand span { color: var(--ci-green); }

.text-primary-ci { color: var(--ci-primary) !important; }
.bg-primary-ci { background-color: var(--ci-primary) !important; }

.btn-ci {
    background: var(--ci-primary);
    border-color: var(--ci-primary);
    color: #fff;
}
.btn-ci:hover { background: var(--ci-primary-600); border-color: var(--ci-primary-600); color: #fff; }

/* Logo ---------------------------------------------------------------
   El logo lo pone el cliente y puede tener cualquier proporcion. Si se
   limita solo por ALTO (height="30"), un logotipo horizontal se sale
   del contenedor: a 8.5:1, 30px de alto son 255px de ancho y la barra
   lateral solo tiene 212px utiles.
   Por eso se limita por ANCHO y se deja el alto como tope maximo: manda
   la restriccion que se alcance primero, y el logo entra entero siempre.
   -------------------------------------------------------------------- */
.ci-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}
.ci-logo-sidebar { max-height: 38px; }
/* Los topes de ancho mandan sobre el alto: con un logotipo horizontal el
   alto nunca llega a su maximo, y es el ancho el que da la proporcion
   correcta. Son deliberadamente contenidos: el logo acompana, no compite
   con el formulario. */
.ci-logo-auth    { max-height: 52px; max-width: min(72%, 230px); margin: 0 auto; }
.ci-logo-nav     { max-height: 34px; max-width: min(100%, 200px); }

/* Navbar publica -----------------------------------------------------*/
.navbar-ci {
    background: #fff;
    border-bottom: 1px solid var(--ci-gray-100);
}

/* Hero ---------------------------------------------------------------*/
.ci-hero {
    background: linear-gradient(135deg, var(--ci-primary) 0%, var(--ci-primary-600) 100%);
    color: #fff;
    padding: 5rem 0;
}
.ci-hero .lead { opacity: 0.92; }

/* Tarjetas -----------------------------------------------------------*/
.ci-card {
    background: #fff;
    border: 1px solid var(--ci-gray-100);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 44, 82, 0.04);
}
.ci-metric { border-radius: 14px; border: 1px solid var(--ci-gray-100); background: #fff; }
.ci-metric .value { font-size: 1.9rem; font-weight: 700; color: var(--ci-primary); }
.ci-metric .label { color: var(--ci-gray-600); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.03em; }

/* Estados de acceso (semaforo) --------------------------------------*/
.badge-permitido { background: var(--ci-green); }
.badge-revision  { background: var(--ci-yellow); color: #3a2e00; }
.badge-bloqueo   { background: var(--ci-red); }
.badge-extranjero{ background: var(--ci-blue); }

/* Auth ---------------------------------------------------------------*/
.ci-auth-wrap {
    min-height: 100vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--ci-primary) 0%, #08321f 100%);
}
.ci-auth-card { border-radius: 16px; }

/* Panel --------------------------------------------------------------*/
.ci-sidebar {
    background: var(--ci-primary);
    color: #c9e2d3;
    min-height: 100vh;
    width: 260px;
}
.ci-sidebar a { color: #c9e2d3; text-decoration: none; border-radius: 8px; }
.ci-sidebar a:hover, .ci-sidebar a.active { background: rgba(255, 255, 255, 0.10); color: #fff; }
.ci-sidebar .brand { color: #fff; }
.ci-topbar { background: #fff; border-bottom: 1px solid var(--ci-gray-100); }

.ci-footer { background: var(--ci-primary); color: #9cc7ad; border-top: 1px solid rgba(255, 255, 255, 0.08); }
.ci-footer a { color: #c9e2d3; text-decoration: none; }
.ci-footer a:hover { color: #fff; }

/* Variante clara: sin fondo, texto/enlaces azules (para fondos claros). */
.ci-footer-light { background: transparent; color: var(--ci-gray-600); border-top: 1px solid var(--ci-gray-100); }
.ci-footer-light a { color: var(--ci-primary); text-decoration: none; }
.ci-footer-light a:hover { color: var(--ci-primary-600); text-decoration: underline; }

/* El modal de registro manual debe quedar por ENCIMA del overlay del
   semaforo (z-index 1080), o el formulario abre "por detras". */
#manualModal { z-index: 1090; }
.modal-backdrop { z-index: 1085; }

/* Menu movil (hamburguesa) para admin y operador --------------------*/
.ci-hamburger { display: none; border: 0; background: transparent; font-size: 1.5rem; line-height: 1; padding: .25rem .5rem; cursor: pointer; }
.ci-sidebar-backdrop { display: none; }
@media (max-width: 768px) {
    .ci-hamburger { display: inline-flex; align-items: center; }
    .ci-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0;
        width: 250px; min-height: 100vh; z-index: 1200;
        transform: translateX(-100%); transition: transform .25s ease;
        overflow-y: auto;
    }
    .ci-sidebar.open { transform: translateX(0); box-shadow: 0 0 30px rgba(0, 0, 0, .4); }
    .ci-sidebar-backdrop.show {
        display: block; position: fixed; inset: 0;
        background: rgba(0, 0, 0, .45); z-index: 1150;
    }
}

/* Captura de la MRZ (reverso): cámara acotada + botón siempre visible */
.pdf-capture { flex-direction: column !important; justify-content: flex-start !important; padding: 0 !important; }
.pdf-capture .pdf-head { flex: 0 0 auto; width: 100%; padding: .7rem 1rem .3rem; text-align: center; }
.pdf-capture .pdf-cam {
    flex: 1 1 auto; width: 100%; min-height: 0; position: relative;
    display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.pdf-capture .pdf-cam video { max-width: 100%; max-height: 100%; border-radius: 10px; background: #08251a; }
.pdf-capture .pdf-foot {
    flex: 0 0 auto; width: 100%; padding: .7rem 1rem calc(.9rem + env(safe-area-inset-bottom, 0px));
    background: rgba(0, 0, 0, .18);
}
/* Horizontal / pantallas bajas: compactar para que todo quepa. */
@media (max-height: 520px) {
    .pdf-capture .pdf-head { padding: .35rem .8rem .1rem; }
    .pdf-capture .pdf-head h1 { font-size: 1rem; }
    .pdf-capture .pdf-head p { display: none; }
    .pdf-capture .pdf-foot { padding: .4rem .8rem calc(.5rem + env(safe-area-inset-bottom, 0px)); }
    .pdf-capture .pdf-foot .btn { padding: .4rem 1rem; font-size: 1rem; }
    .pdf-capture #pdfStatus { font-size: .85rem; margin-bottom: .35rem !important; }
}

/* Escaneo QR - resultado a pantalla completa (semaforo) --------------*/
.scan-overlay {
    position: fixed;
    inset: 0;
    z-index: 1080;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    padding: 1.5rem;
}
.scan-overlay.verde    { background: var(--ci-green); }
.scan-overlay.rojo     { background: var(--ci-red); }
.scan-overlay.azul     { background: var(--ci-blue); }
.scan-overlay.amarillo { background: var(--ci-yellow); color: #3a2e00; }
.scan-inner { max-width: 560px; width: 100%; }
.scan-icon {
    width: 96px; height: 96px; margin: 0 auto 1rem;
    border-radius: 50%; background: rgba(255, 255, 255, 0.2);
    display: flex; align-items: center; justify-content: center;
    font-size: 3rem; font-weight: 700;
}
.scan-title { font-size: 2.4rem; font-weight: 800; margin-bottom: .25rem; }
.scan-name { font-size: 1.5rem; font-weight: 700; margin-bottom: .25rem; }
.scan-rut { font-size: 1.1rem; opacity: .9; }
.scan-msg { font-size: 1.05rem; opacity: .95; margin: 1rem 0 1.5rem; }
#reader { border-radius: 12px; overflow: hidden; }

/* =====================================================================
   Registro publico (/registro)
   ---------------------------------------------------------------------
   Pantalla que ve alguien externo, casi siempre desde el telefono: una
   sola columna, tipografia grande y objetivos de toque holgados.
   ===================================================================== */
.ci-registro-body {
    min-height: 100vh;
    background: var(--ci-gray-050);
}

.ci-registro-header {
    background: linear-gradient(135deg, var(--ci-primary) 0%, #08321f 100%);
    /* Franja alta y con aire: el logo respira arriba y la tarjeta monta
       sobre la parte baja. El relleno inferior incluye el trozo que
       queda tapado por la tarjeta. */
    padding: 3.5rem 1rem 6rem;
}

/* La tarjeta monta sobre la cabecera azul. */
.ci-registro-main {
    margin-top: -4rem;
    padding-bottom: 4rem;
}

.ci-registro-card {
    background: #fff;
    border: 1px solid var(--ci-gray-100);
    border-radius: 18px;
    box-shadow: 0 12px 32px rgba(15, 44, 82, .10);
    padding: 2.25rem;
}
@media (max-width: 575.98px) {
    .ci-registro-card { padding: 1.75rem 1.25rem; border-radius: 16px; }
    .ci-registro-header { padding: 3.75rem 1rem 5.5rem; }
    .ci-registro-main { margin-top: -3.5rem; padding-bottom: 2.5rem; }
    /* En pantalla angosta el logo se achica un poco mas: a ancho
       completo se come la cabecera y desequilibra la pantalla. */
    .ci-logo-auth { max-width: min(62%, 200px); }
}

.ci-registro-card h1 {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--ci-primary);
    letter-spacing: -.01em;
}
.ci-registro-lead {
    color: var(--ci-gray-600);
    font-size: .95rem;
    margin-bottom: 1.75rem;
}

/* Pasos 1-2 del encabezado. */
.ci-pasos { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.5rem; }
.ci-paso { display: flex; align-items: center; gap: .45rem; font-size: .82rem; color: var(--ci-gray-600); }
.ci-paso .n {
    width: 26px; height: 26px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .78rem; font-weight: 700;
    background: var(--ci-gray-100); color: var(--ci-gray-600);
}
.ci-paso.activo { color: var(--ci-primary); font-weight: 600; }
.ci-paso.activo .n { background: var(--ci-primary); color: #fff; }
.ci-paso.hecho .n { background: var(--ci-green); color: #fff; }
.ci-pasos .sep { flex: 1 1 auto; height: 2px; background: var(--ci-gray-100); border-radius: 2px; }

/* Campos: mas altos que en el panel, se llenan con el pulgar. */
.ci-registro-card .form-label {
    font-size: .82rem;
    font-weight: 600;
    color: var(--ci-ink);
    margin-bottom: .3rem;
}
.ci-registro-card .form-control,
.ci-registro-card .form-select {
    padding: .65rem .85rem;
    border-color: #d0e2d6;
    border-radius: 10px;
}
.ci-registro-card .form-control:focus,
.ci-registro-card .form-select:focus {
    border-color: var(--ci-primary-600);
    box-shadow: 0 0 0 .2rem rgba(22, 64, 122, .12);
}
/* 16px evita que iOS haga zoom al enfocar un campo. */
@media (max-width: 575.98px) {
    .ci-registro-card .form-control,
    .ci-registro-card .form-select { font-size: 16px; }
}
.ci-registro-card .form-text { font-size: .78rem; }

/* El documento es EL campo de la primera pantalla. */
.ci-doc-input {
    font-size: 1.25rem !important;
    font-weight: 600;
    letter-spacing: .04em;
    text-align: center;
    padding: .8rem .9rem !important;
}

.ci-registro-card .btn-ci { padding: .7rem 1.6rem; border-radius: 10px; font-weight: 600; }

/* Bloques de resultado (ya registrado / listo). */
.ci-aviso { border-radius: 14px; padding: 1.5rem; text-align: center; }
.ci-aviso .icono {
    width: 62px; height: 62px; margin: 0 auto 1rem;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.9rem; font-weight: 700; color: #fff;
}
.ci-aviso-ok { background: #e8f6ee; border: 1px solid #bfe4cd; }
.ci-aviso-ok .icono { background: var(--ci-green); }
.ci-aviso-info { background: var(--ci-primary-050); border: 1px solid #c8e6d5; }
.ci-aviso-info .icono { background: var(--ci-primary); }
.ci-aviso .doc {
    display: inline-block; margin-top: .4rem;
    font-weight: 700; font-size: 1.1rem; letter-spacing: .04em; color: var(--ci-primary);
}

/* Zona de adjunto del documento. */
.ci-adjunto {
    border: 2px dashed #bedbc9;
    border-radius: 14px;
    padding: 1.4rem 1.2rem;
    text-align: center;
    background: #fbfdfb;
    transition: border-color .15s ease, background .15s ease;
}
.ci-adjunto:hover { border-color: var(--ci-primary-600); background: var(--ci-primary-050); }
.ci-adjunto .icono { font-size: 2rem; line-height: 1; }
.ci-adjunto-nombre { font-size: .85rem; font-weight: 600; color: var(--ci-green); word-break: break-all; }

/* =====================================================================
   Bootstrap en verde
   ---------------------------------------------------------------------
   Bootstrap trae su propio azul (#0d6efd) en botones, enlaces, alertas,
   el foco de los campos y la paginacion. Se reemplaza aqui, en un solo
   lugar, en vez de ir cambiando clase por clase en cada vista: asi
   ninguna pantalla queda con un azul suelto y una vista nueva hereda el
   verde sin que haya que acordarse.
   ===================================================================== */
:root {
    --bs-primary: #0f4d2f;
    --bs-primary-rgb: 15, 77, 47;

    /* Alertas y textos "primary" (alert-primary, .text-primary-emphasis) */
    --bs-primary-text-emphasis: #0c3d25;
    --bs-primary-bg-subtle: #e9f7ef;
    --bs-primary-border-subtle: #bcdcc9;

    /* Enlaces */
    --bs-link-color: #17724a;
    --bs-link-color-rgb: 23, 114, 74;
    --bs-link-hover-color: #0f4d2f;
    --bs-link-hover-color-rgb: 15, 77, 47;

    /* "info": deja de ser celeste y pasa a un verde azulado. Se mantiene
       distinto del verde de "permitido" para no confundir un aviso con
       una autorizacion. */
    --bs-info: #128577;
    --bs-info-rgb: 18, 133, 119;
    --bs-info-text-emphasis: #0a4d45;
    --bs-info-bg-subtle: #d7f0ea;
    --bs-info-border-subtle: #a9ddd2;
}

.btn-primary {
    --bs-btn-bg: #0f4d2f;
    --bs-btn-border-color: #0f4d2f;
    --bs-btn-hover-bg: #17724a;
    --bs-btn-hover-border-color: #17724a;
    --bs-btn-active-bg: #0c3d25;
    --bs-btn-active-border-color: #0c3d25;
    --bs-btn-disabled-bg: #0f4d2f;
    --bs-btn-disabled-border-color: #0f4d2f;
}

.btn-outline-primary {
    --bs-btn-color: #17724a;
    --bs-btn-border-color: #17724a;
    --bs-btn-hover-bg: #17724a;
    --bs-btn-hover-border-color: #17724a;
    --bs-btn-active-bg: #0f4d2f;
    --bs-btn-active-border-color: #0f4d2f;
    --bs-btn-disabled-color: #17724a;
    --bs-btn-disabled-border-color: #17724a;
}

/* Foco de los campos: Bootstrap lo trae con el azul fijo en el CSS, no
   por variable, asi que hay que repetirlo. */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: #62b189;
    box-shadow: 0 0 0 .25rem rgba(15, 77, 47, .2);
}
.form-check-input:checked {
    background-color: #0f4d2f;
    border-color: #0f4d2f;
}

/* Acordeon (preguntas frecuentes) */
.accordion {
    --bs-accordion-active-color: #0f4d2f;
    --bs-accordion-active-bg: #e9f7ef;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(15, 77, 47, .2);
}

/* Paginacion de los listados */
.pagination {
    --bs-pagination-color: #17724a;
    --bs-pagination-hover-color: #0f4d2f;
    --bs-pagination-focus-color: #0f4d2f;
    --bs-pagination-focus-box-shadow: 0 0 0 .25rem rgba(15, 77, 47, .2);
    --bs-pagination-active-bg: #0f4d2f;
    --bs-pagination-active-border-color: #0f4d2f;
}