/**
 * Archivo: assets/css/pantalla.css
 * Tipo: Hoja de estilos
 * Módulo: PantallaTech público
 * Versión: Diseño 02 v2.3 Dental - header/footer desde GestorTech + doctor visible
 *
 * Objetivo:
 * - Respetar cabecera y footer según configuración de GestorTech.
 * - Mejorar la visualización del doctor en Próximo.
 * - Añadir lateral de canales con estado HABILITADO / EMITIENDO.
 * - Botón < cerrar y botón > abrir.
 */

:root{
    --blue:#0757d8;
    --blue2:#1589e8;
    --cyan:#13bdd9;
    --dark:#071847;
    --soft:#f3f7fc;
    --line:#dce7f5;
    --white:#ffffff;
}

*{box-sizing:border-box}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:#eef4fb;
    color:var(--dark);
    overflow:hidden;
}

.hidden{display:none!important}

.tv-frame{
    width:100vw;
    height:100vh;
    overflow:hidden;
}

.design2-v2-frame{
    display:grid;
    grid-template-columns:136px 1fr;
    background:#eef4fb;
    transition:grid-template-columns .25s ease;
}

body.channels-collapsed .design2-v2-frame{
    grid-template-columns:74px 1fr;
}

.screen-area{
    display:flex;
    flex-direction:column;
    min-width:0;
    min-height:0;
}

/* Lateral canales */
.channels-dock{
    position:relative;
    background:linear-gradient(180deg,#fbfdff,#eef6ff);
    border-right:1px solid #dce7f5;
    padding:24px 12px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:18px;
    box-shadow:8px 0 26px rgba(15,44,88,.06);
    z-index:5;
    overflow:visible;
}

.dock-title{
    font-weight:900;
    font-size:17px;
    color:#073a8c;
    text-transform:uppercase;
    letter-spacing:.6px;
}

.channels-list{
    width:100%;
    display:flex;
    flex-direction:column;
    gap:12px;
}

.channel-item{
    min-height:92px;
    width:100%;
    border-radius:18px;
    border:1px solid #dce8f7;
    background:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:7px;
    color:#0b2d68;
    box-shadow:0 10px 24px rgba(15,44,88,.06);
    text-align:center;
    padding:10px 6px;
    font-family:inherit;
    cursor:pointer;
}

.channel-item.active{
    border-color:#11b6dc;
    box-shadow:0 0 0 3px rgba(17,182,220,.12),0 14px 32px rgba(15,44,88,.10);
}

.channel-icon{
    font-size:27px;
    line-height:1;
}

.channel-name{
    font-weight:900;
    font-size:14px;
}

.channel-type{
    font-size:10px;
    color:#5b7296;
    font-weight:800;
    letter-spacing:.4px;
}

.channel-item.active .channel-type{
    color:#0a8f55;
}

.dock-toggle{
    position:absolute;
    right:-17px;
    top:50%;
    transform:translateY(-50%);
    width:34px;
    height:66px;
    border:0;
    border-radius:0 18px 18px 0;
    background:#ffffff;
    color:#0757d8;
    font-size:30px;
    font-weight:900;
    cursor:pointer;
    box-shadow:8px 0 20px rgba(15,44,88,.12);
    z-index:20;
}

.dock-toggle.close{display:block}
.dock-toggle.open{display:none}

body.channels-collapsed .dock-toggle.close{display:none}
body.channels-collapsed .dock-toggle.open{display:block}

body.channels-collapsed .dock-title,
body.channels-collapsed .channel-name,
body.channels-collapsed .channel-type{
    display:none;
}

body.channels-collapsed .channels-dock{
    padding:22px 8px;
}

body.channels-collapsed .channels-list{
    margin-top:8px;
}

body.channels-collapsed .channel-item{
    min-height:54px;
    width:54px;
    border-radius:16px;
    padding:0;
    margin:0 auto;
}

body.channels-collapsed .channel-icon{
    font-size:25px;
}

/* Cabecera gestionada desde GestorTech */
.topbar{
    height:112px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:18px 44px;
    background:#fff;
    border-bottom:1px solid #e5edf7;
}

.brand{
    display:flex;
    align-items:center;
    gap:18px;
}

.logo{
    width:72px;
    height:72px;
    border-radius:22px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#fff;
    background:linear-gradient(135deg,var(--blue),var(--cyan));
    font-size:36px;
    overflow:hidden;
}

.logo img{
    width:100%;
    height:100%;
    object-fit:cover;
}

body.logo-hidden .logo{display:none}

.brand h1{
    margin:0;
    font-size:43px;
    letter-spacing:.3px;
}

.brand h1 span{color:#188ce9}

.brand p{
    margin:2px 0 0;
    font-size:13px;
    letter-spacing:4px;
    text-transform:uppercase;
    color:#102a5f;
    font-weight:800;
}

.clock{
    display:flex;
    gap:16px;
    align-items:center;
}

.clock-icon{
    font-size:42px;
    color:var(--blue);
}

.clock strong{
    font-size:50px;
    line-height:1;
}

.clock small{
    display:block;
    margin-top:5px;
    font-size:17px;
    color:#405a84;
}

.claim{
    text-align:right;
    min-width:270px;
    font-size:20px;
    line-height:1.35;
    color:#0c3372;
}

.claim b{color:var(--blue)}

/* Principal */
.design2-main{
    flex:1;
    min-height:0;
    display:grid;
    grid-template-columns:minmax(0,64%) minmax(420px,36%);
    grid-template-rows:minmax(0,1fr) 150px;
    gap:18px;
    padding:18px 24px 14px;
}

.d2-media-wrap{min-height:0}

.video-area{
    position:relative;
    width:100%;
    height:100%;
    border-radius:20px;
    overflow:hidden;
    background:#101828;
    box-shadow:0 14px 36px rgba(13,46,96,.12);
}

.video-render{
    position:absolute;
    inset:0;
    background:#101828;
}

.video-render iframe,
.video-render video{
    width:100%;
    height:100%;
    border:0;
    display:block;
    object-fit:cover;
}

body.video-contain .video-render iframe,
body.video-contain .video-render video{
    object-fit:contain;
    background:#000;
}

.video-render.empty{
    background:
        linear-gradient(90deg,rgba(10,24,45,.18),rgba(10,24,45,.06)),
        url('assets/media/imagenes/slide_dental_02.png') center/cover no-repeat;
}

.fake-video{
    position:absolute;
    left:42px;
    top:108px;
    color:#fff;
    z-index:2;
    text-shadow:0 2px 18px rgba(0,0,0,.42);
}

.video-title{
    font-size:48px;
    font-weight:900;
    line-height:1.15;
    max-width:620px;
}

.video-subtitle{
    font-size:22px;
    margin-top:18px;
    max-width:620px;
}

.video-badge{
    position:absolute;
    top:20px;
    left:20px;
    z-index:3;
    padding:10px 18px;
    border-radius:12px;
    background:rgba(0,0,0,.62);
    color:#fff;
    font-weight:800;
    font-size:16px;
}

.video-badge span{
    display:inline-block;
    width:10px;
    height:10px;
    background:#22c55e;
    border-radius:50%;
    margin-right:8px;
}

.image-slider{
    position:absolute;
    inset:0;
    z-index:2;
    background:#000;
}

.image-slider img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
}

body.video-contain .image-slider img{object-fit:contain}

.video-controls{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:58px;
    background:rgba(0,0,0,.46);
    color:white;
    display:flex;
    align-items:center;
    gap:18px;
    padding:0 24px;
    font-size:20px;
    z-index:3;
}

.video-controls .bar{
    height:5px;
    background:rgba(255,255,255,.30);
    flex:1;
    border-radius:30px;
}

.video-controls .bar i{
    display:block;
    width:35%;
    height:100%;
    background:#18b8e8;
    border-radius:30px;
}

.d2-right{
    min-height:0;
    display:grid;
    grid-template-rows:46% 54%;
    gap:18px;
}

.d2-next-card,
.d2-wait-card{
    background:#fff;
    border-radius:22px;
    box-shadow:0 14px 34px rgba(18,53,107,.09);
}

.d2-next-card{
    background:linear-gradient(135deg,#0757d8,#20a9e9);
    color:#fff;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:22px 26px;
}

.pill{
    display:inline-block;
    background:linear-gradient(135deg,#20c8e9,#33bdf5);
    padding:10px 32px;
    border-radius:16px;
    font-size:26px;
    font-weight:900;
    margin-bottom:18px;
    letter-spacing:1px;
}

.d2-next-card h2{
    margin:0;
    font-size:58px;
    line-height:1.04;
}

.d2-meta{
    margin-top:16px;
    font-size:28px;
    display:flex;
    gap:18px;
    align-items:center;
}

.d2-line{
    width:92px;
    height:5px;
    border-radius:10px;
    background:#53e1ed;
    margin:18px auto;
}

.d2-icon{
    width:76px;
    height:76px;
    border-radius:50%;
    background:#fff;
    color:#1d8ee4;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:34px;
    border:4px solid #d8f4ff;
}

.d2-doctor,
.voice-state{
    margin-top:8px;
    font-size:17px;
    opacity:.9;
}

.d2-wait-card{
    padding:22px 26px;
    background:#fbfdff;
    border:1px solid #e4edf7;
}

.d2-wait-card h3{
    margin:0 0 18px;
    color:#073a8c;
    font-size:30px;
    letter-spacing:1px;
}

.waiting-compact{
    display:flex;
    flex-direction:column;
    gap:12px;
}

.waiting-item{
    display:flex;
    justify-content:space-between;
    gap:16px;
    background:#fff;
    border:1px solid #e5edf7;
    border-radius:14px;
    padding:16px 18px;
    font-size:20px;
}

.waiting-item span:first-child{font-weight:800}

.waiting-item span:last-child{color:#49678f}

/* Servicios dentales */
.dental-services-strip{
    grid-column:1 / span 2;
    background:#eef5fd;
    border-radius:22px;
    padding:16px 18px;
    display:grid;
    grid-template-columns:repeat(5,1fr);
    gap:14px;
    box-shadow:0 10px 30px rgba(15,44,88,.05);
}

.service-mini{
    display:grid;
    grid-template-columns:62px 1fr;
    gap:12px;
    align-items:center;
    padding:8px 6px;
    border-right:1px solid #d5e2f1;
}

.service-mini:last-child{border-right:0}

.mini-icon{
    width:62px;
    height:62px;
    border-radius:50%;
    background:#fff;
    border:1px solid #dce8f5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:29px;
    box-shadow:0 8px 18px rgba(15,44,88,.06);
}

.service-mini b{
    display:block;
    font-size:16px;
    color:#073a8c;
    margin-bottom:5px;
    text-transform:uppercase;
}

.service-mini span{
    display:block;
    color:#405d86;
    font-size:14px;
    line-height:1.28;
}

/* Footer gestionado desde GestorTech */
.d2-footer{
    height:56px;
    background:#073a8c;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:17px;
    font-size:19px;
    letter-spacing:1.5px;
}

.api-status{
    position:fixed;
    left:22px;
    top:22px;
    z-index:9999;
    max-width:520px;
    border-radius:14px;
    background:#dc2626;
    color:#fff;
    padding:14px 18px;
    font-weight:800;
    box-shadow:0 12px 28px rgba(0,0,0,.25);
}

@media(max-width:1280px){
    body{overflow:auto}
    .design2-v2-frame{grid-template-columns:1fr}
    .channels-dock{display:none}
    .design2-main{
        grid-template-columns:1fr;
        grid-template-rows:auto auto auto;
    }
    .d2-media-wrap{height:420px}
    .d2-right{grid-template-rows:auto auto}
    .dental-services-strip{
        grid-column:auto;
        grid-template-columns:1fr 1fr;
    }
    .service-mini{border-right:0}
}

body.header-hidden .topbar{display:none!important;}

body.footer-hidden .d2-footer{display:none!important;}


/* Ajustes V2.3: doctor visible y tarjeta próximo más limpia */
.d2-next-card h2{
    font-size:54px;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
}

.d2-doctor{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    margin-top:10px;
    padding:7px 16px;
    border-radius:999px;
    background:rgba(255,255,255,.16);
    color:#bdf7ff;
    font-size:18px;
    font-weight:900;
    line-height:1.2;
}

.d2-doctor.empty{
    display:none;
}

.d2-icon.doctor-icon{
    color:#0757d8;
    background:#e8fbff;
    border-color:#b9f0ff;
    font-size:36px;
}

/* La voz no debe ensuciar visualmente la tarjeta de próximo */
.voice-state{
    display:none;
}

/* Filas de espera: pacientes, no doctores */
.waiting-item .patient-ico{
    display:inline-flex;
    width:24px;
    height:24px;
    align-items:center;
    justify-content:center;
    margin-right:7px;
}

/* Si cabecera/footer se ocultan desde GestorTech, se gana espacio vertical */
body.header-hidden .design2-main{
    padding-top:24px;
}

body.footer-hidden .design2-main{
    padding-bottom:22px;
}