/* =====================================================================
   Gestión de filas · Tu Imagen — sistema de diseño
   Tokens, tipografía local (Inter), componentes del tótem, recepción,
   acceso y modales. Sin dependencias externas.
   ===================================================================== */

/* ---------- Tipografía ---------- */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-latin-400-normal.da03732a27e1.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-latin-600-normal.2ede57db1a3a.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/inter-latin-700-normal.8ca0a5155296.woff2") format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url("../fonts/inter-latin-800-normal.900ae45e40b8.woff2") format('woff2');
}

/* ---------- Tokens ---------- */
:root {
    --ti-primary: #892a7d;
    --ti-primary-600: #7a2470;
    --ti-primary-700: #5f1a57;
    --ti-primary-100: #ead6e7;
    --ti-primary-050: #f6eef5;
    --ti-magenta: #c2418f;
    --ti-ink: #221a26;
    --ti-muted: #6f6675;
    --ti-surface: #ffffff;
    --ti-bg: #f4f1f6;
    --ti-success: #1e9e6a;
    --ti-success-bg: #e6f6ee;
    --ti-danger: #d9414e;
    --ti-danger-bg: #fdecee;
    --ti-warning-bg: #fff4d6;
    --ti-warning-ink: #6b4f00;
    --ti-radius-lg: 1.5rem;
    --ti-radius: 1rem;
    --ti-radius-sm: .75rem;
    --ti-shadow-lg: 0 24px 60px rgba(60, 16, 54, .28);
    --ti-shadow: 0 8px 24px rgba(60, 16, 54, .10);
    --ti-gradient: linear-gradient(135deg, #5f1a57 0%, #892a7d 55%, #c2418f 100%);

    /* Bootstrap: marca y radios */
    --bs-primary: #892a7d;
    --bs-primary-rgb: 137, 42, 125;
    --bs-link-color: #892a7d;
    --bs-link-color-rgb: 137, 42, 125;
    --bs-link-hover-color: #5f1a57;
    --bs-link-hover-color-rgb: 95, 26, 87;
    --bs-body-font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    --bs-body-color: #221a26;
    --bs-body-bg: #f4f1f6;
    --bs-border-radius: .75rem;
    --bs-border-radius-lg: 1rem;
    --bs-focus-ring-color: rgba(137, 42, 125, .25);
}

html, body {
    min-height: 100%;
}

body {
    font-family: var(--bs-body-font-family);
    color: var(--ti-ink);
    background: var(--ti-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

.form-control {
    border-radius: var(--ti-radius-sm);
    border-color: #ddd3dc;
}
.form-control:focus {
    border-color: var(--ti-primary);
    box-shadow: 0 0 0 .25rem rgba(137, 42, 125, .18);
}

/* ---------- Botones de marca ---------- */
.btn {
    font-weight: 600;
    border-radius: var(--ti-radius-sm);
}
.btn-ti {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ti-primary);
    --bs-btn-border-color: var(--ti-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ti-primary-600);
    --bs-btn-hover-border-color: var(--ti-primary-600);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ti-primary-700);
    --bs-btn-active-border-color: var(--ti-primary-700);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #b892b3;
    --bs-btn-disabled-border-color: #b892b3;
    --bs-btn-focus-shadow-rgb: 137, 42, 125;
}
.btn-ti-suave {
    --bs-btn-color: var(--ti-primary-700);
    --bs-btn-bg: var(--ti-primary-050);
    --bs-btn-border-color: var(--ti-primary-050);
    --bs-btn-hover-color: var(--ti-primary-700);
    --bs-btn-hover-bg: var(--ti-primary-100);
    --bs-btn-hover-border-color: var(--ti-primary-100);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ti-primary);
    --bs-btn-active-border-color: var(--ti-primary);
    --bs-btn-focus-shadow-rgb: 137, 42, 125;
}
.btn-ti-contorno {
    --bs-btn-color: var(--ti-primary);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: var(--ti-primary-100);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ti-primary);
    --bs-btn-hover-border-color: var(--ti-primary);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--ti-primary-700);
    --bs-btn-active-border-color: var(--ti-primary-700);
    --bs-btn-focus-shadow-rgb: 137, 42, 125;
}
.btn-ti-texto {
    --bs-btn-color: var(--ti-muted);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-color: var(--ti-primary-700);
    --bs-btn-hover-bg: var(--ti-primary-050);
    --bs-btn-hover-border-color: transparent;
    --bs-btn-active-color: var(--ti-primary-700);
    --bs-btn-active-bg: var(--ti-primary-100);
    --bs-btn-active-border-color: transparent;
    --bs-btn-focus-shadow-rgb: 137, 42, 125;
}
.btn-xl {
    /* Escala con la altura de la ventana para caber sin desplazamiento. */
    padding: clamp(.55rem, 1.7vh, 1rem) 1.5rem;
    font-size: clamp(1rem, 2.4vh, 1.25rem);
    border-radius: var(--ti-radius);
}

/* ---------- Fondo y tarjetas ---------- */
.ti-fondo {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: clamp(.75rem, 2.5vh, 1.5rem);
    background: var(--ti-gradient);
    position: relative;
    overflow: hidden;
}
.ti-fondo::before,
.ti-fondo::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    filter: blur(2px);
}
.ti-fondo::before {
    width: 42vmax;
    height: 42vmax;
    right: -14vmax;
    top: -18vmax;
    background: rgba(255, 255, 255, .10);
}
.ti-fondo::after {
    width: 34vmax;
    height: 34vmax;
    left: -12vmax;
    bottom: -16vmax;
    background: rgba(0, 0, 0, .12);
}

.ti-tarjeta {
    position: relative;
    z-index: 1;
    width: 100%;
    background: var(--ti-surface);
    border-radius: var(--ti-radius-lg);
    box-shadow: var(--ti-shadow-lg);
    padding: 2rem;
}
.ti-tarjeta--totem {
    max-width: min(680px, 96vw);
    width: 100%;
    max-height: 100%;
    display: flex;
    flex-direction: column;
    gap: clamp(.45rem, 1.5vh, 1.1rem);
    padding: clamp(.9rem, 2.6vh, 2rem) clamp(1rem, 4vw, 2.25rem);
    overflow: auto;            /* red de seguridad en pantallas muy bajas */
    scrollbar-width: none;
}
.ti-tarjeta--totem::-webkit-scrollbar { display: none; }
.ti-tarjeta--login { max-width: 440px; }
.ti-tarjeta--menu  { max-width: 760px; }
.ti-tarjeta--aviso { max-width: 520px; text-align: center; }

.ti-logo {
    display: block;
    margin: 0 auto;
    width: 210px;
    max-width: 70%;
    height: auto;
}
.ti-titulo {
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--ti-ink);
    margin: 0;
}
.ti-subtitulo {
    color: var(--ti-muted);
    margin: .25rem 0 0;
}
.ti-eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ti-primary);
    background: var(--ti-primary-050);
    border-radius: 999px;
    padding: .3rem .8rem;
}

/* ---------- Tótem ----------
   Todo cabe de una sola vista: la pantalla no se desplaza y cada elemento
   escala con la altura disponible (clamp con unidades vh). */
/* El gesto táctil de atrás/adelante solo se bloquea si overscroll-behavior
   está en el elemento RAÍZ (html), no en body: los navegadores dejaron de
   propagarlo desde body. Kiosco (tótem y TV) sin navegación por arrastre. */
html:has(body.totem),
html:has(body.pagina-tv) {
    overscroll-behavior: none;
}
body.totem {
    user-select: none;
    -webkit-user-select: none;
    touch-action: manipulation;
    overscroll-behavior: none;
    overflow: hidden;
}

.ti-fondo--alto {
    height: 100vh;
    height: 100dvh;
    padding: clamp(.5rem, 2vh, 1.5rem);
}

.ti-tarjeta--totem .ti-logo {
    width: auto;
    height: clamp(38px, 7.5vh, 76px);
    max-width: 70%;
    object-fit: contain;
}
.ti-tarjeta--totem .ti-eyebrow {
    font-size: clamp(.75rem, 1.8vh, 1rem);
    padding: clamp(.22rem, .7vh, .4rem) 1rem;
}
.ti-tarjeta--totem .ti-titulo { font-size: clamp(2rem, 6.4vh, 3.6rem); }
.ti-tarjeta--totem .ti-subtitulo { font-size: clamp(.78rem, 1.8vh, 1rem); }

/* Paso 1 del tótem (27-10-2026): selección del tipo de atención. El id le
   gana al grid apaisado de .ti-tarjeta--totem: esta tarjeta siempre es una
   columna centrada. */
#pantallaTipos {
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.tipos-pregunta { font-size: clamp(1.1rem, 2.8vh, 1.5rem); margin: 0; }
.tipos-atencion {
    display: flex;
    flex-direction: column;
    gap: clamp(.7rem, 2.2vh, 1.4rem);
    margin: clamp(.5rem, 2vh, 1.5rem) 0;
}
.tipos-atencion .tipo-atencion {
    font-size: clamp(1.2rem, 3.4vh, 2rem);
    padding-top: clamp(1rem, 3.2vh, 1.9rem);
    padding-bottom: clamp(1rem, 3.2vh, 1.9rem);
}
.tipos-nota { font-size: clamp(.75rem, 1.7vh, .95rem); color: var(--ti-muted); }
.tipo-elegido { display: inline-flex; align-items: center; margin-bottom: .3rem; }

.totem-form {
    display: flex;
    flex-direction: column;
    gap: clamp(.5rem, 1.6vh, 1.1rem);
}
.btn-sin-rut { font-size: clamp(.85rem, 2vh, 1.1rem); }
/* Botones principales del tótem al tamaño de dedo de la referencia. */
.ti-tarjeta--totem .btn-xl {
    font-size: clamp(1.1rem, 3vh, 1.7rem);
    padding-top: clamp(.65rem, 2vh, 1.15rem);
    padding-bottom: clamp(.65rem, 2vh, 1.15rem);
}

.rut-display {
    height: clamp(3.4rem, 10vh, 6rem);
    font-size: clamp(1.6rem, 4.6vh, 3rem);
    font-weight: 700;
    letter-spacing: .05em;
    text-align: center;
    color: var(--ti-ink);
    background: var(--ti-primary-050);
    border: 2px solid var(--ti-primary-100);
    border-radius: var(--ti-radius);
    transition: border-color .15s, background-color .15s;
}
/* El RUT de ejemplo se ve del mismo tamaño que el que digita el paciente;
   solo cambia el color y el peso para notarse como ejemplo. */
.rut-display::placeholder {
    font-size: inherit;
    font-weight: 500;
    letter-spacing: inherit;
    color: var(--ti-muted);
    opacity: .55;
}
.rut-display:focus {
    box-shadow: none;
    border-color: var(--ti-primary);
    background: var(--ti-primary-050);
}
.rut-display.border-success {
    border-color: var(--ti-success) !important;
    background: var(--ti-success-bg);
}
.rut-display.border-danger {
    border-color: var(--ti-danger) !important;
    background: var(--ti-danger-bg);
}

.teclado {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(.5rem, 1.6vh, 1.1rem);
    max-width: 500px;
    width: 100%;
    margin: 0 auto;
}
.teclado .btn {
    height: clamp(3.2rem, 9.2vh, 5.6rem);
    font-size: clamp(1.4rem, 4vh, 2.4rem);
    font-weight: 600;
    border-radius: var(--ti-radius);
    transition: transform .08s ease, background-color .15s ease;
}
.teclado .btn:active {
    transform: scale(.95);
}
.teclado .btn-borrar {
    font-size: clamp(.95rem, 2.5vh, 1.5rem);
    --bs-btn-color: var(--ti-danger);
    --bs-btn-bg: var(--ti-danger-bg);
    --bs-btn-border-color: var(--ti-danger-bg);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ti-danger);
    --bs-btn-hover-border-color: var(--ti-danger);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #b8323e;
    --bs-btn-active-border-color: #b8323e;
}

.aviso-datos {
    display: flex;
    gap: .6rem;
    align-items: flex-start;
    text-align: left;
    font-size: clamp(.68rem, 1.6vh, .8rem);
    line-height: 1.35;
    color: var(--ti-muted);
    background: var(--ti-bg);
    border-radius: var(--ti-radius-sm);
    padding: clamp(.45rem, 1.2vh, .65rem) .85rem;
    margin: 0;
}
.aviso-datos i {
    color: var(--ti-primary);
    margin-top: .1rem;
}

/* ---------- Acceso / menú ---------- */
.form-label {
    font-weight: 600;
    color: var(--ti-ink);
}
.opcion {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    border-radius: var(--ti-radius);
    border: 1px solid var(--ti-primary-100);
    background: var(--ti-surface);
    color: var(--ti-ink);
    text-decoration: none;
    transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.opcion:hover {
    transform: translateY(-2px);
    box-shadow: var(--ti-shadow);
    border-color: var(--ti-primary);
    color: var(--ti-ink);
}
.opcion__icono {
    flex: none;
    width: 56px;
    height: 56px;
    border-radius: var(--ti-radius-sm);
    display: grid;
    place-items: center;
    font-size: 1.5rem;
    color: #fff;
    background: var(--ti-gradient);
}
.opcion__titulo {
    font-weight: 700;
    margin: 0;
}
.opcion__detalle {
    margin: 0;
    color: var(--ti-muted);
    font-size: .9rem;
}

/* ---------- Recepción ----------
   La página no se desplaza: encabezado y panel fijos, y solo la lista de
   pacientes se desplaza dentro del panel cuando hay muchos tickets. */
body.recepcion {
    overflow: hidden;
}
.pantalla {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
}
.pantalla__cuerpo {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: .75rem;
}
.pantalla__cuerpo .panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.pantalla__cuerpo .table-responsive {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.app-bar {
    background: var(--ti-gradient);
    color: #fff;
    box-shadow: var(--ti-shadow);
}
.app-bar a {
    color: #fff;
    text-decoration: none;
}
.app-bar .marca img {
    height: 36px;
    width: auto;
}
.app-bar .marca span {
    font-weight: 700;
    font-size: 1.15rem;
    letter-spacing: -.01em;
}
.app-bar .titulo {
    font-weight: 700;
    letter-spacing: -.01em;
    margin: 0;
}
.badge-vivo {
    border-radius: 999px;
    padding: .45rem .85rem;
    font-weight: 600;
    font-size: .85rem;
}
.badge-vivo::before {
    content: '';
    display: inline-block;
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: currentColor;
    margin-right: .45rem;
    vertical-align: .05rem;
}
.badge-vivo.bg-success::before {
    animation: latido 1.6s ease-in-out infinite;
}
@keyframes latido {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

.panel {
    background: var(--ti-surface);
    border-radius: var(--ti-radius-lg);
    box-shadow: var(--ti-shadow);
    padding: 1.25rem 1.5rem 1.5rem;
}
.panel__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: .5rem;
    margin-bottom: .75rem;
}
.panel__cabecera h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0;
}
.panel__cabecera small {
    color: var(--ti-muted);
}

.alerta-espera {
    display: flex;
    align-items: center;
    gap: .75rem;
    border: 0;
    border-radius: var(--ti-radius);
    background: var(--ti-warning-bg);
    color: var(--ti-warning-ink);
    font-weight: 500;
    padding: .9rem 1.1rem;
}
.alerta-espera i {
    font-size: 1.4rem;
}

.tabla-espera {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    margin-bottom: 0;
}
.tabla-espera thead th {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ti-muted);
    border-bottom: 2px solid var(--ti-primary-100);
    padding: .6rem .75rem;
    white-space: nowrap;
    /* El encabezado queda visible mientras la lista se desplaza. */
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--ti-surface);
}
.tabla-espera tbody th,
.tabla-espera tbody td {
    padding: .9rem .75rem;
    vertical-align: middle;
    border-bottom: 1px solid #efe9ee;
    font-size: 1.05rem;
}
.tabla-espera tbody tr:last-child th,
.tabla-espera tbody tr:last-child td {
    border-bottom: 0;
}
.tabla-espera tbody tr.table-active {
    --bs-table-bg-state: var(--ti-primary-050);
}
.ticket-pill {
    display: inline-block;
    min-width: 4.75rem;
    padding: .35rem .9rem;
    border-radius: 999px;
    background: var(--ti-primary-050);
    color: var(--ti-primary-700);
    font-weight: 800;
    font-size: 1.3rem;
    letter-spacing: -.01em;
    text-align: center;
}
tr.table-active .ticket-pill {
    background: var(--ti-primary);
    color: #fff;
}
.ticket-pill--tarde {
    background: var(--ti-danger-bg);
    color: var(--ti-danger);
}
.etiqueta-siguiente {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ti-primary);
    margin-top: .25rem;
}
.rut-celda {
    font-variant-numeric: tabular-nums;
    letter-spacing: .02em;
}
.rut-celda--anonimo {
    color: var(--ti-muted);
    font-style: italic;
}
.tiempo-espera {
    color: var(--ti-muted);
    font-size: .9rem;
    white-space: nowrap;
}
.tiempo-espera--tarde {
    color: var(--ti-danger);
    font-weight: 600;
}
.estado-vacio {
    text-align: center;
    color: var(--ti-muted);
    padding: 3rem 1rem !important;
}
.estado-vacio i {
    display: block;
    font-size: 2rem;
    margin-bottom: .5rem;
    color: var(--ti-primary-100);
}

/* ---------- Modales (SweetAlert2) ---------- */
.swal2-popup {
    border-radius: var(--ti-radius-lg) !important;
    padding: 2rem 1.5rem 1.5rem !important;
    box-shadow: var(--ti-shadow-lg) !important;
    font-family: inherit !important;
}
.swal2-title {
    font-weight: 700 !important;
    letter-spacing: -.02em;
    color: var(--ti-ink) !important;
}
.swal2-html-container {
    color: var(--ti-muted) !important;
    font-size: 1.05rem !important;
    line-height: 1.45 !important;
}
.swal2-footer {
    border-top: 0 !important;
    padding-top: .25rem !important;
}
.swal2-timer-progress-bar {
    background: var(--ti-primary) !important;
}
.swal2-actions {
    margin-top: 1.25rem !important;
}
.icono-personalizado {
    border: none !important;
    width: auto !important;
    height: auto !important;
    margin: .5rem auto 1rem !important;
}
.ticket-grande {
    display: inline-block;
    min-width: 8rem;
    padding: .35rem 1.75rem;
    border-radius: var(--ti-radius);
    background: var(--ti-gradient);
    color: #fff;
    font-size: 4.25rem;
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.15;
    box-shadow: var(--ti-shadow);
}
.icono-suave {
    display: grid;
    place-items: center;
    width: 5rem;
    height: 5rem;
    border-radius: 50%;
    background: var(--ti-success-bg);
    color: var(--ti-success);
    font-size: 2.25rem;
}
.cuenta-regresiva {
    display: inline-block;
    border-radius: 999px;
    background: var(--ti-warning-bg);
    color: var(--ti-warning-ink);
    padding: .5rem 1rem;
    font-size: .95rem;
}
.aviso-papel {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    border-radius: 999px;
    background: var(--ti-warning-bg);
    color: var(--ti-warning-ink);
    padding: .5rem 1rem;
    font-weight: 600;
}

/* ---------- Ajustes de pantalla pequeña ---------- */
@media (max-width: 420px) {
    .ti-tarjeta { padding: 1.5rem 1.25rem; }
}

/* Tótem apaisado y bajo (tablet horizontal): teclado al lado del encabezado. */
@media (orientation: landscape) and (max-height: 620px) {
    .ti-tarjeta--totem {
        max-width: 860px;
        display: grid;
        grid-template-columns: 1fr 1fr;
        /* La tercera fila absorbe el alto sobrante: el encabezado queda arriba
           y el aviso de datos al pie de la columna izquierda. */
        grid-template-rows: auto auto 1fr auto;
        column-gap: clamp(1rem, 3vw, 2rem);
        row-gap: clamp(.25rem, .8vh, .6rem);
    }
    .ti-tarjeta--totem .ti-logo { grid-column: 1; justify-self: center; }
    .ti-tarjeta--totem .totem-encabezado { grid-column: 1; }
    .ti-tarjeta--totem .aviso-privacidad { grid-column: 1; grid-row: 3; align-self: start; }
    .ti-tarjeta--totem .boton-sin-rut { grid-column: 1; grid-row: 4; align-self: end; }
    .ti-tarjeta--totem .totem-form { grid-column: 2; grid-row: 1 / span 4; }
}

/* =====================================================================
   Gestor completo (F1-F3): aviso del tótem, puesto, TV, panel y reportes
   ===================================================================== */

/* ---------- Tótem: aviso de privacidad y resultado ---------- */
.aviso-privacidad {
    background: var(--ti-primary-050);
    border: 1px solid var(--ti-primary-100);
    border-radius: var(--ti-radius);
    padding: clamp(.55rem, 1.4vh, .9rem);
    font-size: clamp(.7rem, 1.5vh, .85rem);
    color: var(--ti-ink);
    text-align: left;
}
.boton-sin-rut {
    white-space: normal;
    margin-top: clamp(.35rem, 1.1vh, .8rem);
}
.resultado-detalle { margin-top: .75rem; }
.resultado-detalle p {
    margin: .35rem 0;
    font-size: 1.05rem;
    color: var(--ti-muted);
}
.resultado-detalle strong { color: var(--ti-ink); }

/* ---------- Chips y puntos de estado ---------- */
.chip {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    background: var(--ti-primary-050);
    color: var(--ti-primary-700);
    border-radius: 999px;
    padding: .1rem .55rem;
    font-size: .72rem;
    font-weight: 600;
}
.chip--pref { background: var(--ti-warning-bg); color: var(--ti-warning-ink); }
.chip--alerta { background: var(--ti-danger-bg); color: var(--ti-danger); }
.punto-vivo {
    width: .7rem;
    height: .7rem;
    border-radius: 50%;
    background: #b3a9b9;
    display: inline-block;
}
.punto-vivo--ok { background: var(--ti-success); box-shadow: 0 0 0 4px rgba(30, 158, 106, .18); }
.btn-icono {
    border: 0;
    background: transparent;
    color: inherit;
    padding: .35rem .5rem;
    border-radius: var(--ti-radius-sm);
    cursor: pointer;
}
.btn-icono:hover { background: rgba(0, 0, 0, .06); }

/* ---------- Ventana del puesto (~300-340 px, S4-N2) ---------- */
body.pagina-puesto { background: var(--ti-bg); }
.puesto {
    max-width: 360px;
    min-height: 100vh;
    margin: 0 auto;
    background: var(--ti-surface);
    display: flex;
    flex-direction: column;
    box-shadow: var(--ti-shadow);
    position: relative;
}
.puesto__cabecera {
    background: var(--ti-gradient);
    color: #fff;
    padding: .6rem .9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
}
.puesto__cabecera small { display: block; opacity: .8; font-size: .72rem; }
.puesto__cabecera-acciones { display: flex; align-items: center; gap: .4rem; }
.puesto__cabecera .btn-icono { color: #fff; }
.puesto__capa {
    position: absolute;
    inset: 48px 0 40px 0;
    background: rgba(255, 255, 255, .97);
    z-index: 5;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 1.25rem;
    text-align: center;
    gap: .5rem;
}
.puesto__capa--motivo {
    position: fixed;
    inset: 0;
    background: rgba(34, 26, 38, .55);
    justify-content: center;
}
.puesto__capa--motivo > div {
    background: #fff;
    border-radius: var(--ti-radius);
    padding: 1.25rem;
    max-height: 80vh;
    overflow: auto;
}
.puesto__nota { font-size: .8rem; color: var(--ti-muted); margin: .25rem 0 0; }
.puesto__encurso {
    padding: .9rem;
    border-bottom: 1px solid #eee4ec;
    background: var(--ti-primary-050);
}
.puesto__ticket {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.puesto__ticket span:first-child {
    font-size: 2.4rem;
    font-weight: 800;
    color: var(--ti-primary);
    line-height: 1;
}
.puesto__rut { font-size: 1.05rem; font-weight: 600; margin: .25rem 0; }
.puesto__crono { color: var(--ti-muted); font-size: .9rem; margin-bottom: .6rem; }
.puesto__botones { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.puesto__botones .btn { font-size: .82rem; padding: .5rem .25rem; }
.puesto__llamar { padding: .9rem; border-bottom: 1px solid #eee4ec; }
.puesto__secundarias { display: flex; justify-content: space-between; margin-top: .4rem; }
.puesto__secundarias .btn { font-size: .78rem; }
.puesto__contadores {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    text-align: center;
    padding: .6rem .4rem;
    border-bottom: 1px solid #eee4ec;
}
.puesto__contadores strong { display: block; font-size: 1.15rem; }
.puesto__contadores small { color: var(--ti-muted); font-size: .72rem; }
.puesto__fila { padding: .7rem .9rem; }
.puesto__fila h2 { font-size: .9rem; display: flex; align-items: center; gap: .5rem; }
.puesto__lista { list-style: none; margin: 0; padding: 0; }
.puesto__lista li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem 0;
    border-bottom: 1px dashed #eee4ec;
}
.fila__info small { display: block; color: var(--ti-muted); font-size: .75rem; }
.fila__info .chip { margin-left: .35rem; }
.fila__botones { display: flex; gap: .15rem; }
.puesto__pie {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .4rem .9rem;
    border-top: 1px solid #eee4ec;
    color: var(--ti-muted);
    font-size: .78rem;
}
.puesto__toast {
    position: fixed;
    left: 50%;
    bottom: 1.25rem;
    transform: translateX(-50%);
    background: var(--ti-ink);
    color: #fff;
    padding: .55rem 1rem;
    border-radius: 999px;
    font-size: .85rem;
    z-index: 50;
    max-width: 92%;
}
.aviso-pip {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .75rem;
    text-align: center;
    padding: 2rem;
    color: var(--ti-muted);
}
.aviso-pip i { font-size: 3rem; color: var(--ti-primary); }
.aviso-pip h2 { color: var(--ti-ink); font-size: 1.4rem; }

/* ---------- TV de llamado (16:9, S6-07) ----------
   Tema claro a pedido del usuario: fondo luminoso, número en morado de
   marca y tarjetas blancas. */
body.pagina-tv { background: #f4f1f6; overflow: hidden; }
/* Aviso de audio bloqueado por la política de autoplay del navegador. */
.tv__aviso-sonido {
    position: fixed;
    left: 50%;
    bottom: 4vh;
    transform: translateX(-50%);
    z-index: 20;
    border: none;
    border-radius: 999px;
    padding: 1.4vh 2.2vw;
    font-size: 2.6vh;
    font-weight: 700;
    color: #ffffff;
    background: var(--ti-primary);
    box-shadow: 0 .6vh 2vh rgba(34, 26, 38, .25);
    cursor: pointer;
}
.tv__aviso-sonido i { margin-right: .6vw; }
.tv {
    height: 100vh;
    display: flex;
    flex-direction: column;
    color: var(--ti-ink);
    background: radial-gradient(circle at 20% 0%, #fdfbfd 0%, #f1eaf2 60%);
}
.tv__cabecera {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2vh 2.5vw;
}
.tv__cabecera img { height: 5.5vh; }
.tv__sucursal { font-size: 2.6vh; font-weight: 600; opacity: .9; }
.tv__hora { margin-left: auto; font-size: 3vh; font-weight: 700; font-variant-numeric: tabular-nums; }
.tv__cuerpo {
    flex: 1;
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2vw;
    padding: 0 2.5vw 1.5vh;
    min-height: 0;
}
.tv__actual {
    background: #ffffff;
    border: 1px solid var(--ti-primary-100);
    border-radius: 2vh;
    box-shadow: var(--ti-shadow);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 2.4vh;
    padding: 2vh 2vw;
}
.tv__actual--destello { animation: tvDestello .9s ease 5; }
@keyframes tvDestello {
    0% { background: rgba(194, 65, 143, .35); }
    100% { background: #ffffff; }
}
.tv__saludo { margin: 0; font-size: 4vh; line-height: 1.25; color: var(--ti-muted); }
.tv__saludo strong { display: block; font-size: 4.8vh; color: var(--ti-primary); }
.tv__esperando { margin: 0; font-size: 3.2vh; color: var(--ti-muted); }
.tv__bloques { display: flex; flex-direction: column; gap: 2vh; align-items: center; }
.tv__bloque {
    background: var(--ti-primary-050);
    border: 1px solid var(--ti-primary-100);
    border-radius: 2vh;
    padding: 1.4vh 3vw;
    min-width: 28vw;
    display: flex;
    flex-direction: column;
    gap: .4vh;
    align-items: center;
}
.tv__etiqueta { font-size: 2.3vh; text-transform: uppercase; letter-spacing: .3em; color: var(--ti-muted); }
.tv__numero { font-size: 16vh; font-weight: 800; line-height: 1.05; font-variant-numeric: tabular-nums; color: var(--ti-primary-700); }
.tv__meson { font-size: 6.5vh; font-weight: 700; line-height: 1.1; color: var(--ti-magenta); }
.tv__anteriores {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tv__anteriores h2 { font-size: 2.6vh; text-transform: uppercase; letter-spacing: .15em; color: var(--ti-muted); }
.tv__columnas {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1vw;
    margin-bottom: 1.4vh;
}
.tv__columnas span {
    background: var(--ti-primary);
    color: #fff;
    border-radius: 999px;
    text-align: center;
    font-size: 2.1vh;
    font-weight: 600;
    letter-spacing: .15em;
    text-transform: uppercase;
    padding: .7vh 0;
}
.tv__anteriores ul {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1.4vh;
}
.tv__anteriores li {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 1vw;
}
.tv__chip {
    background: #ffffff;
    border: 1px solid var(--ti-primary-100);
    border-radius: 1.6vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1vh 0;
    font-variant-numeric: tabular-nums;
}
.tv__chip--numero { font-size: 4.8vh; font-weight: 800; color: var(--ti-primary-700); }
.tv__chip--meson { font-size: 4.8vh; font-weight: 800; color: var(--ti-ink); }
.tv__tme {
    margin-top: auto;
    background: #ffffff;
    border: 1px solid var(--ti-primary-100);
    border-radius: 1.5vh;
    padding: 1.4vh 1.5vw;
    font-size: 2.6vh;
}
.tv__pie {
    display: flex;
    justify-content: space-between;
    padding: 1vh 2.5vw 1.5vh;
    font-size: 2vh;
    opacity: .75;
}
.tv__pie .fa-circle { color: #b7aec0; font-size: 1.4vh; vertical-align: middle; }
.tv__pie .fa-circle.conectado { color: #2ecc71; }

/* ---------- Panel de equipos ---------- */
.panel-equipos { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.panel-sucursal h3 { font-size: 1rem; margin-bottom: .5rem; }
.equipo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .5rem 0;
    border-bottom: 1px dashed #eee4ec;
}
.equipo small { color: var(--ti-muted); }
.chip-estado {
    border-radius: 999px;
    padding: .2rem .7rem;
    font-size: .78rem;
    font-weight: 600;
    background: #eee;
    white-space: nowrap;
}
.chip-estado--ok { background: var(--ti-success-bg); color: var(--ti-success); }
.chip-estado--mal { background: var(--ti-danger-bg); color: var(--ti-danger); }
.chip-estado--alerta { background: var(--ti-warning-bg); color: var(--ti-warning-ink); }

/* ---------- Reportes ---------- */
.reportes { display: flex; flex-direction: column; gap: 1rem; }
.reportes__filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem;
    align-items: end;
}
.reportes__filtros label { font-size: .8rem; color: var(--ti-muted); display: grid; gap: .2rem; }
.reportes__botones { display: flex; gap: .5rem; margin-left: auto; }
.reportes__resumen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: .5rem;
    text-align: center;
}
.velocimetro div[id] { height: 170px; }
.velocimetro small { color: var(--ti-muted); }
.texto-ok { color: var(--ti-success); font-weight: 600; }
.texto-medio { color: var(--ti-warning-ink); font-weight: 600; }
.texto-mal { color: var(--ti-danger); font-weight: 600; }

@media print {
    .app-bar, .d-print-none { display: none !important; }
    .pantalla__cuerpo { padding: 0 !important; }
    body { background: #fff; }
}

/* ---------- Pantallas internas de desplazamiento libre (panel, reportes) ----
   El encabezado fijo de 100vh es solo para la pantalla de recepción; estas
   páginas crecen con su contenido y se imprimen completas. */
.pantalla--libre { height: auto; min-height: 100vh; }
.pantalla--libre .pantalla__cuerpo { display: block; }
.pantalla--libre .pantalla__cuerpo .panel {
    display: block;
    flex: none;
    margin-bottom: 1rem;
}
.pantalla--libre .pantalla__cuerpo .reportes__filtros {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: end;
}
.pantalla--libre .pantalla__cuerpo .reportes__resumen {
    display: grid;
}

/* --- Panel de administración (Soporte TI) -------------------------------- */
.admin-form {
    display: flex;
    flex-wrap: wrap;
    gap: .75rem 1rem;
    /* Alineados arriba: un campo con texto de ayuda (p. ej. la IP fija) no
       descuadra la fila; casillas y botones se calzan a la línea del input. */
    align-items: flex-start;
}
.admin-form > .btn,
.admin-form .form-check {
    margin-top: 1.45rem;
}
.admin-form--vertical > .btn,
.admin-form--vertical .form-check { margin-top: 0; }
.admin-campo {
    display: grid;
    gap: .2rem;
    font-size: .8rem;
    color: var(--ti-muted);
    margin-bottom: 0;
    min-width: 0;
}
.admin-campo small { max-width: 220px; }
.admin-form .form-check { margin-bottom: .35rem; }
.admin-form select[multiple] { min-height: 5.5rem; }
.pantalla--libre .pantalla__cuerpo .admin-form { display: flex; }

/* Las páginas largas (reportes, administración) sí se desplazan: anulan el
   overflow:hidden pensado para la ventana del puesto. */
body.recepcion--libre { overflow: auto; }

/* Formularios verticales (usuarios: el selector múltiple descuadra la fila). */
.admin-form--vertical {
    display: grid;
    gap: .75rem;
    max-width: 540px;
    align-items: stretch;
}
.admin-form--vertical .form-check { margin-bottom: 0; }

/* Tarjetas plegables (sucursales). */
.admin-plegable > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
}
.admin-plegable > summary::-webkit-details-marker { display: none; }
.admin-plegable__flecha {
    transition: transform .15s ease;
    color: var(--ti-muted);
    font-size: .8rem;
}
.admin-plegable[open] > summary .admin-plegable__flecha { transform: rotate(90deg); }
.admin-plegable__cuerpo { margin-top: 1rem; }
.admin-form--vertical .admin-campo small { max-width: none; }
.pantalla--libre .pantalla__cuerpo .admin-form--vertical { display: grid; max-width: 540px; }