/* =========================================================
   oktoberMESS — 5. STAFF (backoffice)
   ---------------------------------------------------------
   SOLO la interfaz interna: check-in, leads, asignación de hosts
   y el panel de métricas.

   Mobile first también aquí: el de recepción trae tablet, pero el
   comercial anda con el celular. La barra de iconos es
   BARRA INFERIOR en celular y RIEL LATERAL desde 768px — mismo
   HTML, sin duplicar markup ni JS.
   ========================================================= */


/* =========================================================
   ARMAZÓN
   ========================================================= */

.ok-login {
    display: grid;
    place-items: center;
    min-height: 100dvh;
    padding: calc(var(--sp-5) + env(safe-area-inset-top)) var(--sp-4) calc(var(--sp-5) + env(safe-area-inset-bottom));
}

.ok-login__panel {
    width: 100%;
    max-width: 28rem;
    padding: var(--sp-5);
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-xl);
    box-shadow: var(--shadow-lg);
}

.ok-login__marca { margin-bottom: var(--sp-5); text-align: center; }
.ok-login__marca img { width: min(100%, 12rem); margin-inline: auto; }
.ok-login__encabezado { margin-bottom: var(--sp-5); text-align: center; }
.ok-login__encabezado h1 { margin-top: var(--sp-2); }
.ok-login__form { margin-top: var(--sp-5); }
.ok-login__nota { margin-top: var(--sp-5); color: var(--text-suave); font-size: var(--fs-xs); text-align: center; }
.ok-login__nota i { margin-right: var(--sp-1); color: var(--success); }

@media (min-width: 576px) {
    .ok-login__panel { padding: var(--sp-6); }
}

.ok-staff {
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

.ok-staff__main {
    flex: 1;
    min-width: 0;                  /* deja que las tablas se encojan */
    width: 100%;
    max-width: var(--staff-max-w);
    margin-inline: auto;
    padding: var(--sp-4);
    /* Hueco para la barra inferior en celular */
    padding-bottom: calc(4.5rem + env(safe-area-inset-bottom));
}

.ok-escaner {
    position: relative;
    width: 100%;
    max-width: 25rem;
    margin: 0 auto var(--sp-3);
    aspect-ratio: 1;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--ok-azul-prof);
}

.ok-escaner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ok-escaner__mira {
    position: absolute;
    inset: 10%;
    border: 1px solid var(--accent);
    border-radius: var(--r-lg);
    box-shadow: 0 0 0 100vmax var(--overlay), var(--glow);
    pointer-events: none;
}

.ok-escaner__ayuda {
    color: var(--text-muted);
    text-align: center;
}

.ok-asistencia-staff__resultado {
    margin-top: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    text-align: center;
}

.ok-asistencia-staff__resultado.es-exito {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--text);
}

.ok-asistencia-staff__resultado.es-error {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--text);
}

@media (min-width: 768px) {
    .ok-staff { flex-direction: row; }
    .ok-staff__main { padding: var(--sp-5); padding-bottom: var(--sp-5); }
}


/* =========================================================
   TOPBAR
   ---------------------------------------------------------
   "MESS BACKOFFICE — oktoberMESS Control — Operador: Ana López".
   En celular se guarda el título central y queda marca + operador.
   ========================================================= */

.ok-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-topbar);

    display: flex;
    align-items: center;
    gap: var(--sp-3);
    padding: var(--sp-3) var(--sp-4);
    padding-top: calc(var(--sp-3) + env(safe-area-inset-top));

    background: var(--card-bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-sm);
}

.ok-topbar__marca {
    display: flex;
    align-items: baseline;
    gap: var(--sp-2);
    font-family: var(--font-display);
    font-weight: var(--fw-black);
    letter-spacing: var(--ls-wide);
    text-transform: uppercase;
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}
.ok-topbar__marca strong { color: var(--accent); font-size: var(--fs-md); }

/* Título central: se oculta en celular por falta de espacio */
.ok-topbar__titulo { display: none; }
@media (min-width: 992px) {
    .ok-topbar__titulo {
        display: block;
        flex: 1;
        text-align: center;
        font-family: var(--font-display);
        font-weight: var(--fw-bold);
        color: var(--text);
        line-height: 1.1;
    }
    .ok-topbar__titulo small {
        display: block;
        font-size: var(--fs-xs);
        font-weight: var(--fw-normal);
        color: var(--text-muted);
    }
}

.ok-topbar__operador {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    font-size: var(--fs-sm);
    color: var(--text-muted);
    white-space: nowrap;
}
/* El nombre del operador se esconde en pantallas chicas; queda el
   icono de salir, que es lo que sí se necesita tocar. */
.ok-topbar__operador span { display: none; }
@media (min-width: 576px) { .ok-topbar__operador span { display: inline; } }


/* =========================================================
   NAVEGACIÓN (barra inferior en celular / riel lateral en ≥768)
   ========================================================= */

.ok-nav {
    position: fixed;
    inset: auto 0 0 0;
    z-index: var(--z-rail);

    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: var(--sp-1);

    padding: var(--sp-1) var(--sp-2);
    padding-bottom: calc(var(--sp-1) + env(safe-area-inset-bottom));

    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: var(--sombra-barra);
}

.ok-nav__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .15rem;

    min-height: 48px;
    padding: var(--sp-2) var(--sp-1);
    border-radius: var(--r-md);

    color: var(--text-muted);
    font-size: .65rem;
    text-align: center;
    text-decoration: none;
    transition: color var(--t-rapida), background-color var(--t-rapida);
}
.ok-nav__item i { font-size: var(--fs-md); }
.ok-nav__item:hover { color: var(--text); background: var(--card-soft); }

.ok-nav__item.is-activo { color: var(--accent); background: var(--accent-soft); }

@media (min-width: 768px) {
    .ok-nav {
        position: sticky;
        top: 0;
        inset: auto;
        flex-direction: column;
        justify-content: flex-start;
        align-self: flex-start;

        width: var(--staff-rail-w);
        height: 100dvh;
        padding: var(--sp-4) var(--sp-2);

        border-top: 0;
        border-right: 1px solid var(--border);
        box-shadow: none;
    }
    .ok-nav__item { flex: 0 0 auto; }
    /* En el riel solo va el icono: la etiqueta se vuelve tooltip
       nativo con el title del <a>. */
    .ok-nav__item span { display: none; }
    .ok-nav__item i { font-size: var(--fs-lg); }

    /* Marca de item activo del diseño: barra cian a la izquierda */
    .ok-nav__item.is-activo {
        position: relative;
        background: transparent;
    }
    .ok-nav__item.is-activo::before {
        content: '';
        position: absolute;
        left: calc(var(--sp-2) * -1);
        top: 20%; bottom: 20%;
        width: 3px;
        border-radius: var(--r-pill);
        background: var(--accent);
        box-shadow: var(--glow);
    }
}


/* =========================================================
   ENCABEZADO DE PÁGINA
   ========================================================= */

.ok-pagina-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
}
.ok-pagina-head h1 { margin: 0; font-size: var(--fs-xl); }
@media (min-width: 768px) { .ok-pagina-head h1 { font-size: var(--fs-2xl); } }

.ok-pagina-head__acciones { margin-left: auto; display: flex; gap: var(--sp-2); }


/* =========================================================
   ESCÁNER DE QR
   ---------------------------------------------------------
   Caja del video de la cámara con la mira encuadrada. Ocupa todo
   el ancho en celular y se topa en 26rem desde tablet.
   ========================================================= */

.ok-scanner {
    position: relative;
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    aspect-ratio: 1;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--ok-azul-prof);
    border: 1px solid var(--border);
}
.ok-scanner video,
.ok-scanner canvas { width: 100%; height: 100%; object-fit: cover; }

/* Mira: cuadro cian centrado, sin bloquear el toque */
.ok-scanner__mira {
    position: absolute;
    inset: 15%;
    border: 2px solid var(--accent);
    border-radius: var(--r-lg);
    box-shadow: 0 0 0 100vmax var(--overlay), var(--glow);
    pointer-events: none;
}

.ok-scanner__ayuda {
    margin-top: var(--sp-3);
    text-align: center;
    font-size: var(--fs-sm);
    color: var(--text-muted);
}


/* =========================================================
   MÉTRICAS (panel BI / sábana operativa)
   ---------------------------------------------------------
   auto-fit + minmax: las tarjetas se acomodan solas — 1 columna
   en celular, 2 en tablet, 4 en escritorio, sin media queries.
   ========================================================= */

.ok-metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: var(--sp-3);
    margin-bottom: var(--sp-5);
}

.ok-metrica {
    padding: var(--sp-4);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    box-shadow: var(--shadow-sm);
}
.ok-metrica--exito   { border-left-color: var(--success); }
.ok-metrica--alerta  { border-left-color: var(--warning); }
.ok-metrica--peligro { border-left-color: var(--danger);  }

.ok-metrica__label {
    display: block;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: var(--ls-wide);
    color: var(--text-muted);
    margin-bottom: var(--sp-1);
}
.ok-metrica__valor {
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: var(--fw-black);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}
.ok-metrica__nota { font-size: var(--fs-xs); color: var(--text-suave); margin-top: var(--sp-1); }

.ok-dashboard__estado {
    min-height: 1.5rem;
    margin-bottom: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.ok-dashboard__metricas { margin-bottom: var(--sp-4); }

.ok-dashboard__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-4);
}

.ok-dashboard__barra {
    height: .75rem;
    overflow: hidden;
    border-radius: var(--r-pill);
    background: var(--card-soft);
}

.ok-dashboard__barra span {
    display: block;
    width: 0;
    height: 100%;
    border-radius: inherit;
    background: var(--success);
    transition: width var(--t-media);
}

.ok-dashboard__leyenda {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
    color: var(--text-muted);
    font-size: var(--fs-sm);
}

.ok-dashboard__punto {
    display: inline-block;
    width: .6rem;
    height: .6rem;
    margin-right: var(--sp-1);
    border-radius: 50%;
    background: var(--text-muted);
}

.ok-dashboard__punto--asistencia { background: var(--success); }
.ok-dashboard__punto--pendiente { background: var(--warning); }

.ok-dashboard__hora { text-align: center; }
.ok-dashboard__hora strong {
    display: block;
    color: var(--accent);
    font-size: var(--fs-3xl);
    font-weight: var(--fw-black);
}
.ok-dashboard__hora p { color: var(--text-muted); font-size: var(--fs-sm); }

.ok-dashboard__actualizado {
    margin-top: var(--sp-4);
    color: var(--text-suave);
    font-size: var(--fs-xs);
    text-align: right;
}

/* Caja de gráfica: alto fijo, si no Chart.js crece sin fin */
.ok-grafica { position: relative; height: 15rem; }
@media (min-width: 768px) { .ok-grafica { height: 18rem; } }

@media (min-width: 768px) {
    .ok-dashboard__grid { grid-template-columns: 1.25fr .75fr; }
}


/* =========================================================
   LISTA DE ASISTENTES / LEADS
   ---------------------------------------------------------
   En celular la tabla NO sirve: se usan estas filas-tarjeta.
   Desde 992px se muestra la tabla (.ok-solo-tabla) y se ocultan.
   ========================================================= */

.ok-fila {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    min-height: 56px;
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    margin-bottom: var(--sp-2);
    text-decoration: none;
    color: inherit;
    transition: border-color var(--t-rapida), background-color var(--t-rapida);
}
.ok-fila:hover { border-color: var(--accent-line); background: var(--card-hover); color: inherit; }

.ok-fila__avatar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 2.5rem; height: 2.5rem;
    border-radius: 50%;
    background: var(--accent-soft);
    color: var(--accent);
    font-weight: var(--fw-black);
    font-size: var(--fs-sm);
}

.ok-fila__cuerpo { flex: 1; min-width: 0; }   /* min-width:0 = el texto largo puede truncarse */
.ok-fila__titulo {
    font-weight: var(--fw-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ok-fila__sub {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ok-fila__fin { flex: 0 0 auto; text-align: right; }

/* Pareja de utilidades para alternar lista/tabla según el ancho */
.ok-solo-movil { display: block; }
.ok-solo-tabla { display: none; }
@media (min-width: 992px) {
    .ok-solo-movil { display: none; }
    .ok-solo-tabla { display: block; }
}


/* =========================================================
   BARRA DE FILTROS
   ========================================================= */

.ok-filtros {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--card-bg);
    margin-bottom: var(--sp-4);
}
.ok-filtros .ok-campo { flex: 1 1 12rem; margin-bottom: 0; }


/* =========================================================
   BARRA DE ACCIÓN FIJA
   ---------------------------------------------------------
   En celular el botón principal ("GUARDAR Y ENVIAR") se queda
   pegado abajo, encima de la nav, para no obligar a hacer scroll
   con el formulario largo del lead.
   ========================================================= */

.ok-barra-accion {
    position: fixed;
    inset: auto 0 0 0;
    z-index: calc(var(--z-rail) + 1);
    padding: var(--sp-3) var(--sp-4);
    padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom));
    background: var(--card-bg);
    border-top: 1px solid var(--border);
    box-shadow: var(--sombra-barra);
}

@media (min-width: 768px) {
    .ok-barra-accion {
        position: static;
        padding: 0;
        margin-top: var(--sp-4);
        background: transparent;
        border-top: 0;
        box-shadow: none;
    }
    .ok-barra-accion .ok-btn { width: auto; min-width: 14rem; }
}