/* ══════════════════════════════════════════════════════════════
   turnero_pantalla.css v6
   3 columnas: próximos en espera | llamando + historial | publicidad
   + ticker pasarela inferior
   ══════════════════════════════════════════════════════════════ */
body:has(.turnero-pantalla-full),html:has(.turnero-pantalla-full){margin:0!important;padding:0!important;width:100%!important;height:100%!important;overflow:hidden!important;background:#0a0b1e!important}
body:has(.turnero-pantalla-full) nav,body:has(.turnero-pantalla-full) header.navbar,body:has(.turnero-pantalla-full) #wrapwrap>nav{display:none!important}
body:has(.turnero-pantalla-full) #wrapwrap{height:100vh!important;overflow:hidden!important}
.turnero-pantalla-full .d-none{display:none!important}
.turnero-pantalla-full *{box-sizing:border-box}

/* ── ROOT ── */
.turnero-pantalla-full{
    display:flex;flex-direction:column;
    width:100vw;height:100vh;
    background:#0a0b1e;color:#fff;
    font-family:'Segoe UI',Arial,sans-serif;
    overflow:hidden;
}

/* ══ HEADER ══ */
.tp-header{
    display:flex;align-items:center;justify-content:space-between;
    background:#1a1d6e;padding:8px 24px;
    flex-shrink:0;border-bottom:3px solid #00ADEF;min-height:62px;
}
.tp-header-logo{display:flex;align-items:center;gap:12px}
.tp-header-text{display:flex;flex-direction:column}
.tp-header-nombre{font-size:20px;font-weight:900;color:#fff;letter-spacing:.5px}
.tp-header-sub{font-size:11px;color:#8FDBF4;font-weight:500}
.tp-header-reloj{text-align:right}
.tp-hora{font-size:36px;font-weight:900;font-variant-numeric:tabular-nums;color:#FFF176;letter-spacing:2px;line-height:1}
.tp-fecha{font-size:11px;color:#8FDBF4;text-transform:capitalize;margin-top:2px}

/* ══ MAIN — 3 columnas ══ */
.tp-main{display:flex;flex:1;min-height:0;gap:0}

/* ════ COL 1 IZQ: PRÓXIMOS EN ESPERA ════ */
.tp-panel-espera{
    flex:0 0 20%;
    background:#0c0d22;
    border-right:2px solid #1a1d6e;
    display:flex;flex-direction:column;
    overflow:hidden;
}
.tp-pv-titulo{
    background:#00ADEF;color:#fff;
    font-size:11px;font-weight:800;letter-spacing:3px;text-transform:uppercase;
    padding:7px 14px;flex-shrink:0;text-align:center;
}
.tp-proximos-lista{
    flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:0;
    scrollbar-width:none;
}
.tp-proximos-lista::-webkit-scrollbar{display:none}
.tp-proximo-item{
    display:flex;align-items:center;gap:8px;
    padding:8px 12px;border-bottom:1px solid #161830;
    font-size:clamp(11px,1.1vw,14px);
    transition:background .2s;
    animation:fadeRow .15s ease-out;
}
.tp-proximo-item:nth-child(odd){background:#0e1028}
.tp-proximo-item:nth-child(even){background:#0c0d22}
.tp-proximo-num{
    width:20px;height:20px;border-radius:50%;
    background:#1a1d6e;color:#8FDBF4;
    font-size:10px;font-weight:800;
    display:flex;align-items:center;justify-content:center;
    flex-shrink:0;
}
.tp-proximo-codigo{font-weight:800;color:#FFF176;font-size:clamp(13px,1.3vw,17px);flex-shrink:0}
.tp-proximo-datos{display:flex;flex-direction:column;min-width:0;gap:1px}
.tp-proximo-pac{font-size:clamp(9px,.9vw,12px);color:#aaa;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-proximo-srv{font-size:clamp(8px,.8vw,11px);color:#555;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-sin-activas{color:#333;font-size:12px;font-style:italic;padding:14px;text-align:center}
/* Badge prioridad en espera */
.tp-prio-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;background:#555}
.tp-prio-1_embarazada .tp-prio-dot{background:#e91e63}
.tp-prio-2_adulto_mayor .tp-prio-dot{background:#ff9800}
.tp-prio-3_madre_bebe .tp-prio-dot{background:#9c27b0}
.tp-prio-4_medica .tp-prio-dot{background:#f44336}
.tp-prio-5_normal .tp-prio-dot{background:#2E3192}

/* ════ COL 2 CENTRO: LLAMANDO + HISTORIAL ════ */
.tp-panel-cola{
    flex:0 0 38%;
    display:flex;flex-direction:column;
    background:#0d0f2a;
    border-right:2px solid #1a1d6e;
    overflow:hidden;
}

/* ── Caja LLAMANDO ── */
.tp-llamando-box{
    background:linear-gradient(160deg,#1a1d6e 0%,#0d0f2a 100%);
    border-bottom:2px solid #00ADEF;
    padding:14px 16px 12px;
    flex-shrink:0;
    display:flex;flex-direction:column;align-items:center;
    min-height:190px;max-height:42%;
    justify-content:center;
    position:relative;
    overflow:hidden;
}
.tp-llamando-label{
    font-size:11px;font-weight:800;letter-spacing:4px;
    color:#00ADEF;text-transform:uppercase;margin-bottom:6px;
}
.tp-llamando-ventanilla{
    font-size:clamp(14px,1.8vw,22px);
    font-weight:700;color:#fff;
    background:#00ADEF;
    padding:4px 24px;border-radius:6px;
    margin-bottom:6px;letter-spacing:1px;
    width:100%;text-align:center;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tp-llamando-codigo{
    font-size:clamp(36px,6.5vw,96px);
    font-weight:900;color:#FFF176;
    letter-spacing:3px;line-height:1;
    text-align:center;width:100%;
    text-shadow:0 0 40px rgba(255,241,118,.5);
    /* Nunca desbordar — comprimir si el texto es largo */
    overflow:hidden;
    white-space:nowrap;
    text-overflow:clip;
    /* Escalar automáticamente con fit */
    display:flex;align-items:center;justify-content:center;
}
.tp-llamando-servicio{
    font-size:clamp(11px,1.3vw,17px);
    color:#8FDBF4;margin-top:4px;text-align:center;
}
.tp-rellamado-badge{
    margin-top:8px;background:#e65100;color:#fff;
    padding:4px 14px;border-radius:20px;
    font-size:13px;font-weight:700;letter-spacing:1px;
    animation:pulse 1s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.6}}

/* ── Panel historial ── */
.tp-historial-panel{flex:1;display:flex;flex-direction:column;overflow:hidden}
.tp-hist-header{
    display:grid;grid-template-columns:28% 32% 40%;
    background:#00ADEF;color:#fff;
    font-size:10px;font-weight:800;letter-spacing:2px;text-transform:uppercase;
    padding:5px 14px;flex-shrink:0;
}
.tp-historial-lista{flex:1;overflow-y:auto;display:flex;flex-direction:column;scrollbar-width:none}
.tp-historial-lista::-webkit-scrollbar{display:none}
.tp-hist-item{
    display:grid;grid-template-columns:28% 32% 40%;
    align-items:center;padding:8px 14px;
    border-bottom:1px solid #161830;
    font-size:clamp(12px,1.2vw,15px);
    animation:fadeRow .15s ease-out;
}
.tp-hist-item:nth-child(odd){background:#111330}
.tp-hist-item:nth-child(even){background:#0d0f2a}
.tp-hist-item:first-child{background:#1a2060}
@keyframes fadeRow{from{opacity:0}to{opacity:1}}to{opacity:1;transform:none}}
.tp-hi-vent{color:#00ADEF;font-weight:700;font-size:clamp(11px,1.1vw,14px)}
.tp-hi-codigo{color:#FFF176;font-weight:900;font-size:clamp(14px,1.4vw,18px);letter-spacing:1px}
.tp-hi-srv{color:#8FDBF4;font-size:clamp(10px,.95vw,13px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tp-hist-empty{color:#333;font-style:italic;font-size:13px;padding:16px;text-align:center}

/* ════ COL 3 DER: PUBLICIDAD ════ */
.tp-panel-publicidad{
    flex:1;background:#1a1a2e;
    display:flex;flex-direction:column;overflow:hidden;position:relative;
}
.tp-publicidad-content{
    width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;
    padding:0;transition:background .5s;overflow:hidden;
}
.tp-pub-texto{
    font-size:clamp(16px,2.4vw,34px);
    font-weight:600;text-align:center;line-height:1.5;margin:0;padding:20px;
}
.tp-pub-img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.tp-pub-default{color:#8FDBF4;font-size:clamp(18px,2.2vw,28px);font-weight:600;text-align:center;margin:0}
#tp-yt-player{width:100%!important;height:100%!important}
.tp-publicidad-content iframe{width:100%;height:100%;border:none;display:block}

/* ════ TICKER / PASARELA ════ */
.tp-ticker-wrap{
    flex-shrink:0;
    background:#2E3192;
    border-top:2px solid #00ADEF;
    height:36px;
    overflow:hidden;
    display:flex;align-items:center;
    position:relative;
}
.tp-ticker-inner{
    width:100%;height:100%;
    display:flex;align-items:center;
    overflow:hidden;
    white-space:nowrap;
}
.tp-ticker-text{
    font-size:15px;font-weight:600;
    color:#fff;letter-spacing:.5px;
    white-space:nowrap;
    padding-left:100%;  /* start off-screen right */
}
/* Scroll animation — speed set by JS via CSS var */
.tp-ticker-text.tp-scroll{
    animation:tickerScroll var(--ticker-duration,25s) linear infinite;
}
@keyframes tickerScroll{
    0%  {transform:translateX(0)}
    100%{transform:translateX(calc(-100% - 100vw))}
}
/* Static mode: fade in/out */
.tp-ticker-text.tp-static{
    padding-left:0;
    animation:tickerFade var(--ticker-duration,8s) ease-in-out infinite;
    text-align:center;width:100%;
}
@keyframes tickerFade{
    0%,8%{opacity:0;transform:translateY(4px)}
    15%,85%{opacity:1;transform:translateY(0)}
    92%,100%{opacity:0;transform:translateY(-4px)}
}
/* Separador entre mensajes en scroll */
.tp-ticker-sep{margin:0 40px;color:#8FDBF4;opacity:.6}

/* ════ BOTTOM BAR ════ */
.tp-bottom-bar{
    display:flex;align-items:center;justify-content:space-between;
    background:#000;padding:4px 20px;
    font-size:10px;color:#333;flex-shrink:0;
}

/* ════ Animación entrada turno ════ */
.tp-anim-entrada{animation:tpEntrada 0.65s cubic-bezier(0.22,1,0.36,1) both}
@keyframes tpEntrada{
    0%  {transform:scale(.65) translateY(24px);opacity:0}
    65% {transform:scale(1.06) translateY(-4px);opacity:1}
    100%{transform:scale(1) translateY(0);opacity:1}
}
.tp-flash-overlay{display:none!important}

/* ════ Mobile ════ */
@media(max-width:900px){
    .tp-main{flex-direction:column}
    .tp-panel-espera{flex:none;width:100%;max-height:120px}
    .tp-proximos-lista{flex-direction:row;flex-wrap:wrap;padding:4px}
    .tp-proximo-item{padding:4px 8px}
    .tp-panel-cola{flex:none;width:100%;max-height:52vh}
    .tp-llamando-box{min-height:140px;padding:10px}
    .tp-llamando-codigo{font-size:clamp(40px,12vw,80px)}
    .tp-panel-publicidad{flex:1;min-height:140px}
    .tp-hora{font-size:1.3rem}
    .tp-header{padding:6px 12px;min-height:50px}
    .tp-ticker-wrap{height:30px}
    .tp-ticker-text{font-size:13px}
}