/* ===================================================
   Hospital San Juan – Pantalla Turnero
   Layout: header fijo + body dividido (video izq | turnos der)
   =================================================== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700;800;900&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    --verde:       #027555;
    --verde-dark:  #015c42;
    --blanco:      #ffffff;
    --amarillo:    #4dd4a8;
    --gris-bg:     #080f0b;
}

body {
    font-family: 'Montserrat', system-ui, sans-serif;
    background: var(--gris-bg);
    color: var(--blanco);
    height: 100vh;
    overflow: hidden;
    user-select: none;
    -webkit-font-smoothing: antialiased;
}

/* ═══════════════════════════════════════════════════
   OVERLAY ACTIVAR
   ═══════════════════════════════════════════════════ */
.overlay-activar {
    position: fixed; inset: 0; z-index: 999;
    background: var(--verde-dark);
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 1.4rem; padding: 2rem;
}
.overlay-logo {
    width: 88px; height: 88px;
    background: var(--verde);
    border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    box-shadow: 0 0 0 16px rgba(2,117,85,.15);
    animation: pulse-logo 2.5s ease-in-out infinite;
}
@keyframes pulse-logo {
    0%, 100% { box-shadow: 0 0 0 16px rgba(2,117,85,.15); }
    50%       { box-shadow: 0 0 0 28px rgba(2,117,85,.05); }
}
.overlay-activar h2 {
    font-size: 1.65rem; font-weight: 800; color: #fff; text-align: center;
}
.overlay-activar p {
    font-size: .88rem; color: rgba(255,255,255,.45);
    text-align: center; font-weight: 300;
}
.btn-activar {
    background: var(--verde); color: #fff; border: none;
    padding: .9rem 2.8rem; border-radius: 50px;
    font-size: .95rem; font-weight: 800;
    font-family: 'Montserrat', sans-serif;
    cursor: pointer; letter-spacing: .06em;
    text-transform: uppercase;
    display: flex; align-items: center; gap: .55rem;
    box-shadow: 0 4px 24px rgba(2,117,85,.5);
    transition: transform .1s, box-shadow .15s;
}
.btn-activar:hover { transform: scale(1.04); box-shadow: 0 6px 32px rgba(2,117,85,.7); }

/* ═══════════════════════════════════════════════════
   HEADER
   ═══════════════════════════════════════════════════ */
.p-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 10;
    height: 60px;
    background: linear-gradient(135deg, #015c42 0%, #027555 60%, #039b6e 100%);
    display: flex; align-items: center;
    justify-content: space-between;
    padding: 0 1.8rem;
    box-shadow: 0 2px 24px rgba(0,0,0,.4);
}
.p-header-left {
    display: flex; align-items: center; gap: .8rem;
}
.p-logo-icon {
    width: 36px; height: 36px;
    background: rgba(255,255,255,.18);
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: #fff; flex-shrink: 0;
    backdrop-filter: blur(4px);
}
.p-hospital-nombre {
    font-size: 1.05rem; font-weight: 800;
    color: #fff; letter-spacing: .03em;
    text-transform: uppercase; line-height: 1;
}
.p-hospital-sub {
    font-size: .5rem; color: rgba(255,255,255,.5);
    text-transform: uppercase; letter-spacing: .15em; margin-top: .15rem;
}
.p-header-right { text-align: right; }
.p-reloj {
    font-size: 1.65rem; font-weight: 800; color: #fff;
    letter-spacing: .12em; font-variant-numeric: tabular-nums; line-height: 1;
}
.p-fecha {
    font-size: .48rem; color: rgba(255,255,255,.5);
    text-transform: uppercase; letter-spacing: .08em; margin-top: .12rem;
}

/* ═══════════════════════════════════════════════════
   BODY — dos columnas bajo el header
   ═══════════════════════════════════════════════════ */
.p-body {
    position: fixed;
    top: 60px; left: 0; right: 0; bottom: 0;
    display: flex;
}

/* ── Columna izquierda: video ── */
.p-video-col {
    flex: 1 1 58%;
    background: #fff;
    overflow: hidden;
    position: relative;
}
/* El iframe se agranda un 20% y se centra para que el video llene
   el espacio y los bordes negros de letterbox queden fuera del recorte */
.p-video-col iframe {
    position: absolute;
    top: 50%; left: 50%;
    width: 120%; height: 120%;
    transform: translate(-50%, -50%);
    border: none;
    pointer-events: none; /* bloquea clicks → oculta controles de YT */
}
/* Capa encima del iframe: fondo blanco en las franjas negras,
   pointer-events:none para no bloquear el video en sí */
.p-video-col::after {
    content: '';
    position: absolute; inset: 0;
    background: transparent;
    pointer-events: none;
    z-index: 1;
}
.p-video-empty {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .75rem; color: rgba(255,255,255,.15);
    font-size: .9rem; font-weight: 300;
}

/* ── Columna derecha: turnos ── */
.p-turnos-col {
    flex: 0 0 42%;
    background: #0a1510;
    border-left: 2px solid rgba(2,117,85,.4);
    display: flex; flex-direction: column;
    overflow: hidden;
    position: relative;
}
/* Fondo sutil con gradiente */
.p-turnos-col::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(2,117,85,.08) 0%, transparent 70%);
    pointer-events: none;
}

/* Cabecera columna turnos */
.p-turnos-header {
    padding: .85rem 1.2rem;
    font-size: .52rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .22em;
    color: rgba(255,255,255,.35);
    border-bottom: 1px solid rgba(255,255,255,.06);
    display: flex; align-items: center; gap: .45rem;
    flex-shrink: 0;
    position: relative; z-index: 1;
}
/* Dot pulsante "live" */
.p-turnos-header::after {
    content: '';
    width: 6px; height: 6px;
    background: var(--verde);
    border-radius: 50%;
    margin-left: auto;
    box-shadow: 0 0 0 0 rgba(2,117,85,.6);
    animation: ping 2s ease-out infinite;
}
@keyframes ping {
    0%   { box-shadow: 0 0 0 0 rgba(2,117,85,.6); }
    70%  { box-shadow: 0 0 0 7px rgba(2,117,85,0); }
    100% { box-shadow: 0 0 0 0 rgba(2,117,85,0); }
}

/* Grid vertical de cards */
.p-turnos-grid {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    position: relative; z-index: 1;
    scrollbar-width: none;
}
.p-turnos-grid::-webkit-scrollbar { display: none; }

/* Placeholder sin turnos */
.p-sin-turnos {
    flex: 1;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: .7rem;
    color: rgba(255,255,255,.1);
    font-size: .62rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: .14em;
}

/* ═══════════════════════════════════════════════════
   CARD DE TURNO  – diseño elegante
   ═══════════════════════════════════════════════════ */
.t-card {
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1.4rem 1rem 1.2rem;
    gap: .18rem;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,.05);
    position: relative;
    overflow: hidden;
}
.t-card.con-turno {
    display: flex;
    animation: cardEntrar .5s cubic-bezier(.34,1.56,.64,1) both;
}

/* Entrada de card */
@keyframes cardEntrar {
    from { opacity: 0; transform: translateX(28px) scale(.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

/* Línea de color de especialidad — izquierda */
.t-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 3px;
    background: var(--esp-color, var(--verde));
    border-radius: 0 2px 2px 0;
}

/* Brillo sutil en la esquina superior */
.t-card::after {
    content: '';
    position: absolute;
    top: 0; left: 3px; right: 0; height: 1px;
    background: linear-gradient(90deg, var(--esp-color, var(--verde)), transparent 60%);
    opacity: .35;
}

/* ── Chip de especialidad ── */
.t-card-chip {
    display: inline-flex; align-items: center;
    padding: .15rem .55rem;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 100px;
    font-size: clamp(.42rem, .9vw, .58rem);
    font-weight: 700;
    color: var(--esp-color, var(--verde));
    text-transform: uppercase;
    letter-spacing: .14em;
    margin-bottom: .15rem;
}

/* ── "Turno en atención" label ── */
.t-card-label {
    font-size: clamp(.42rem, .8vw, .55rem);
    font-weight: 700;
    color: var(--esp-color, var(--verde));
    text-transform: uppercase;
    letter-spacing: .2em;
    line-height: 1;
    opacity: .85;
}

/* ── NÚMERO GRANDE ── */
.t-card-numero {
    font-size: clamp(2.8rem, 5.5vw, 5rem);
    font-weight: 900;
    color: #fff;
    letter-spacing: .03em;
    line-height: .95;
    text-shadow: 0 0 40px rgba(255,255,255,.08);
    transition: color .3s;
}
.t-card-numero.pref { color: var(--amarillo); }

/* Separador decorativo */
.t-card-sep {
    width: 36px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.2), transparent);
    margin: .35rem 0 .2rem;
    border-radius: 1px;
}

/* ── Nombre paciente ── */
.t-card-paciente {
    display: inline-flex; align-items: center; gap: .3rem;
    font-size: clamp(.52rem, 1vw, .72rem);
    font-weight: 700;
    color: #fff;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 100px;
    padding: .18rem .6rem;
    letter-spacing: .02em;
    max-width: 90%; text-align: center;
}

/* ── Consultorio ── */
.t-card-consultorio {
    font-size: clamp(.5rem, .95vw, .68rem);
    font-weight: 700;
    color: rgba(255,255,255,.65);
    display: flex; align-items: center; gap: .28rem;
    text-transform: uppercase; letter-spacing: .08em;
    background: rgba(255,255,255,.06);
    border-radius: 8px;
    padding: .2rem .55rem;
}

/* ── Badge preferencial ── */
.t-card-pref {
    display: inline-flex; align-items: center; gap: .22rem;
    padding: .12rem .45rem;
    background: rgba(2,117,85,.15);
    border: 1px solid rgba(2,117,85,.3);
    border-radius: 100px;
    font-size: .42rem; font-weight: 800;
    color: var(--amarillo);
    text-transform: uppercase; letter-spacing: .12em;
    margin-top: .1rem;
}

/* ── Sección En espera ── */
.t-card-espera {
    display: flex; flex-direction: column;
    align-items: center; gap: 0;
    margin-top: .5rem;
    padding: .35rem .7rem;
    background: rgba(2,117,85,.08);
    border: 1px solid rgba(2,117,85,.18);
    border-radius: 10px;
    min-width: 70px;
}
.esp-numero {
    font-size: clamp(1.3rem, 2.8vw, 2.2rem);
    font-weight: 900;
    color: var(--verde);
    line-height: 1;
    transition: color .4s;
}
.esp-label {
    font-size: .4rem;
    color: rgba(255,255,255,.3);
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 600;
    margin-top: .05rem;
}

/* ═══════════════════════════════════════════════════
   ANIMACIONES turno nuevo
   ═══════════════════════════════════════════════════ */

/* Flash de fondo al llamar turno */
@keyframes flashBg {
    0%   { background: rgba(2,117,85,.22); }
    30%  { background: transparent; }
    55%  { background: rgba(2,117,85,.14); }
    100% { background: transparent; }
}

/* Número "pop" al cambiar */
@keyframes numeroPop {
    0%   { transform: scale(.7); opacity: 0; }
    60%  { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* Glow en el número */
@keyframes numGlow {
    0%   { text-shadow: 0 0 0px rgba(255,255,255,0); }
    40%  { text-shadow: 0 0 28px rgba(255,255,255,.65), 0 0 60px rgba(2,117,85,.4); }
    100% { text-shadow: 0 0 0px rgba(255,255,255,0); }
}

.t-card.flash        { animation: flashBg 2.4s ease-out; }
.t-card.flash .t-card-numero { animation: numeroPop .55s cubic-bezier(.34,1.56,.64,1), numGlow 2s ease-out; }

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media (max-width: 1100px) {
    .p-turnos-col { flex: 0 0 46%; }
}
@media (max-width: 800px) {
    .p-turnos-col { flex: 0 0 52%; }
}
@media (max-width: 600px) {
    .p-body { flex-direction: column; }
    .p-video-col { flex: 0 0 45%; }
    .p-turnos-col { flex: 1; border-left: none; border-top: 2px solid rgba(2,117,85,.4); }
    .p-turnos-grid { flex-direction: row; overflow-x: auto; }
    .t-card { min-width: 160px; border-bottom: none; border-right: 1px solid rgba(255,255,255,.05); }
}