/* Herramienta de videoconferencia. Los colores de la marca son variables (marca.js). */
:root {
    --marca: #c8102e;
    --marca-texto: #ffffff;
    --tipografia: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --fondo: #111214;
    --superficie: #1c1d21;
    --superficie-2: #26282d;
    --borde: #33363c;
    --texto: #f3f4f6;
    --tenue: #a1a5ad;
    --peligro: #e5484d;
    --ok: #30a46c;
    --fondo-imagen: none;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--tipografia); background: var(--fondo) var(--fondo-imagen) center / cover; color: var(--texto); font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; border-radius: 10px; background: var(--superficie-2); padding: .55rem .9rem; }
button:hover { filter: brightness(1.15); }
button:disabled { opacity: .4; cursor: not-allowed; }
input, select, textarea { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: .55rem .7rem; width: 100%; }
.primario { background: var(--marca); color: var(--marca-texto); font-weight: 600; }
.peligro { background: var(--peligro); color: #fff; font-weight: 600; }
.tenue { color: var(--tenue); }
.logo { height: 28px; width: auto; display: block; }
[hidden] { display: none !important; }

/* ── Vestíbulo ── */
.vestibulo { min-height: 100%; display: flex; flex-direction: column; }
.marca-cabecera { display: flex; align-items: center; gap: .75rem; padding: 1rem 1.25rem; font-weight: 700; }
.vestibulo-cuerpo { flex: 1; display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 2rem; align-items: center; max-width: 1100px; width: 100%; margin: 0 auto; padding: 1rem 1.25rem 2rem; }
.previa { position: relative; aspect-ratio: 16/9; background: #000; border-radius: 18px; overflow: hidden; }
.previa video { width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.previa-vacia { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--tenue); }
.previa-botones { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: .75rem; }
.vestibulo-datos { display: flex; flex-direction: column; gap: .8rem; }
.vestibulo-datos h1 { margin: 0; font-size: 1.6rem; }
.vestibulo-datos label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--tenue); }
.aviso { background: #3a1d1f; color: #ffb4b4; padding: .7rem .9rem; border-radius: 10px; margin: 0; }

.pantalla-centro { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.tarjeta { background: var(--superficie); border-radius: 18px; padding: 2rem; max-width: 460px; text-align: center; }
.girando { width: 36px; height: 36px; border-radius: 50%; border: 3px solid var(--borde); border-top-color: var(--marca); margin: 0 auto 1rem; animation: girar 1s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

/* ── Sala ── */
.sala-cuerpo { height: 100%; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr) auto; }
/* Cada pieza en su fila: el aviso a todas las salas puede no estar, y sin fila fija el escenario se subiría a la suya. */
.sala-cuerpo > .barra-superior { grid-row: 1; grid-column: 1 / -1; }
.sala-cuerpo > .difusion { grid-row: 2; }
.sala-cuerpo > .escenario { grid-row: 3; grid-column: 1; }
.sala-cuerpo > .barra-inferior { grid-row: 4; }
.barra-superior { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem; gap: 1rem; }
.barra-superior .izq, .barra-superior .der { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.barra-superior strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pildora { background: var(--superficie-2); border-radius: 999px; padding: .15rem .6rem; font-size: .8rem; color: var(--tenue); }
.grabando { background: var(--peligro); color: #fff; padding: .2rem .65rem; border-radius: 999px; font-size: .8rem; font-weight: 700; animation: latir 1.6s ease-in-out infinite; }
@keyframes latir { 50% { opacity: .65; } }
.difusion { grid-column: 1 / -1; margin: 0 1rem .5rem; background: var(--marca); color: var(--marca-texto); padding: .6rem .9rem; border-radius: 10px; }
.escenario { position: relative; display: flex; gap: .75rem; padding: 0 1rem .75rem; min-height: 0; }
.principal, .pizarra { flex: 3; position: relative; background: #000; border-radius: 16px; overflow: hidden; min-width: 0; }
.principal video { width: 100%; height: 100%; object-fit: contain; }
.pizarra { background: #fff; }
.pizarra canvas { width: 100%; height: 100%; display: block; touch-action: none; cursor: crosshair; }
.pizarra-herr { position: absolute; top: .6rem; left: .6rem; display: flex; gap: .4rem; background: rgba(0,0,0,.7); padding: .35rem; border-radius: 12px; }
.pizarra-herr input[type=color] { width: 36px; height: 34px; padding: 2px; }
.pizarra-herr select { width: auto; }
.pizarra-herr button.activo { outline: 2px solid var(--marca); }
.rejilla { flex: 1; display: grid; gap: .6rem; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); grid-auto-rows: auto; align-content: center; overflow: auto; min-width: 0; }
/* En la rejilla, cada cámara en 16:9: estirada a lo alto se ve un trozo de la cara. */
.escenario:not(:has(.principal:not([hidden]))):not(:has(.pizarra:not([hidden]))) .mosaico { aspect-ratio: 16 / 9; max-height: 100%; }
.escenario:has(.principal:not([hidden])) .rejilla, .escenario:has(.pizarra:not([hidden])) .rejilla { flex: 0 0 240px; grid-template-columns: 1fr; align-content: start; grid-auto-rows: 135px; }
.mosaico { position: relative; background: var(--superficie); border-radius: 14px; overflow: hidden; border: 2px solid transparent; }
.mosaico.habla { border-color: var(--marca); }
.mosaico video { width: 100%; height: 100%; object-fit: cover; }
.mosaico.yo video { transform: scaleX(-1); }
.mosaico .inicial { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; color: var(--marca-texto); }
.mosaico .inicial span { background: var(--marca); width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; }
.etiqueta { position: absolute; left: .5rem; bottom: .5rem; background: rgba(0,0,0,.65); padding: .2rem .55rem; border-radius: 8px; font-size: .8rem; max-width: calc(100% - 1rem); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mosaico .mano { position: absolute; top: .5rem; right: .5rem; font-size: 1.4rem; }
.mosaico .silencio { position: absolute; top: .5rem; left: .5rem; background: rgba(0,0,0,.65); border-radius: 50%; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; font-size: .8rem; }
.reacciones-flotan { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.reaccion { position: absolute; bottom: 0; font-size: 2.2rem; animation: subir 3s ease-out forwards; text-align: center; }
.reaccion small { display: block; font-size: .7rem; background: rgba(0,0,0,.6); border-radius: 6px; padding: 0 .3rem; }
@keyframes subir { to { transform: translateY(-70vh); opacity: 0; } }

.barra-inferior { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; padding: .6rem 1rem 1rem; gap: .5rem; flex-wrap: wrap; }
.barra-inferior .grupo { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.redondo { width: 48px; height: 48px; border-radius: 50%; padding: 0; font-size: 1.2rem; position: relative; display: inline-flex; align-items: center; justify-content: center; }
.redondo.apagado { background: var(--peligro); }
.redondo.activo { background: var(--marca); color: var(--marca-texto); }
.redondo.prohibido { opacity: .35; }
.redondo .contador { position: absolute; top: -4px; right: -4px; background: var(--marca); color: var(--marca-texto); border-radius: 999px; font-size: .7rem; padding: 0 .35rem; min-width: 18px; }
.redondo .punto { position: absolute; top: 4px; right: 4px; width: 10px; height: 10px; border-radius: 50%; background: var(--marca); }
.salir { background: var(--peligro); color: #fff; font-weight: 600; border-radius: 999px; padding: .75rem 1.2rem; }
.menu-reacciones { position: relative; }
#menuReacciones { position: absolute; bottom: 58px; left: 50%; transform: translateX(-50%); background: var(--superficie); border-radius: 14px; padding: .35rem; display: flex; gap: .2rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
#menuReacciones button { background: transparent; font-size: 1.5rem; padding: .3rem; }

.panel { grid-row: 3; grid-column: 2; width: 340px; background: var(--superficie); margin: 0 1rem .75rem 0; border-radius: 16px; display: flex; flex-direction: column; min-height: 0; }
.panel-cab { display: flex; align-items: center; justify-content: space-between; padding: .6rem .7rem; border-bottom: 1px solid var(--borde); }
.panel-cab nav { display: flex; gap: .25rem; flex-wrap: wrap; }
.panel-cab nav button { background: transparent; padding: .35rem .55rem; font-size: .85rem; }
.panel-cab nav button.activo { background: var(--superficie-2); }
.cerrar { background: transparent; }
.panel-cuerpo { flex: 1; overflow: auto; padding: .8rem; display: flex; flex-direction: column; gap: .7rem; min-height: 0; }
.panel-cuerpo h3 { margin: .6rem 0 0; font-size: .9rem; }
.chat-lista { list-style: none; margin: 0; padding: 0; flex: 1; overflow: auto; display: flex; flex-direction: column; gap: .55rem; }
.chat-lista li { background: var(--superficie-2); border-radius: 10px; padding: .45rem .6rem; word-wrap: break-word; }
.chat-lista li b { font-size: .8rem; color: var(--tenue); display: block; }
.chat-form { display: flex; gap: .4rem; }
.lista-personas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.lista-personas li { background: var(--superficie-2); border-radius: 10px; padding: .5rem .6rem; }
.lista-personas .fila { display: flex; align-items: center; gap: .5rem; }
.lista-personas .fila .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista-personas .rol { font-size: .7rem; color: var(--tenue); text-transform: uppercase; }
.lista-personas .acciones { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .45rem; }
.lista-personas .acciones button { padding: .25rem .5rem; font-size: .78rem; }
.permisos { display: flex; flex-wrap: wrap; gap: .35rem; }
.permisos button { padding: .3rem .55rem; font-size: .8rem; }
.permisos button.si { background: var(--ok); color: #fff; }
.mod-bloque { background: var(--superficie-2); border-radius: 12px; padding: .6rem; display: flex; flex-direction: column; gap: .45rem; }
.mod-bloque:empty { display: none; }
.mod-bloque .fila { display: flex; gap: .4rem; align-items: center; }
.mod-bloque .fila span { flex: 1; }
.mod-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
.interruptor { display: flex; align-items: center; gap: .5rem; }
.interruptor input { width: auto; }
.grupo-sala { background: var(--superficie-2); border-radius: 12px; padding: .6rem; }
.grupo-sala .fila { display: flex; justify-content: space-between; align-items: center; gap: .4rem; }
.grupo-sala ul { margin: .4rem 0 0; padding-left: 1rem; color: var(--tenue); font-size: .85rem; }

.avisos { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: .5rem; z-index: 50; width: min(92vw, 460px); }
.avisos div { background: var(--superficie-2); border-left: 4px solid var(--marca); padding: .65rem .8rem; border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.35); animation: entrar .2s ease-out; }
@keyframes entrar { from { transform: translateY(-8px); opacity: 0; } }

@media (max-width: 860px) {
    .vestibulo-cuerpo { grid-template-columns: 1fr; }
    .sala-cuerpo { grid-template-columns: minmax(0, 1fr); }
    .barra-superior .pildora { white-space: nowrap; }
    /* Entre la cabecera y la barra de botones: los controles siguen a mano con el panel abierto. */
    .panel { position: fixed; inset: 56px 8px 84px 8px; width: auto; margin: 0; border-radius: 16px; z-index: 40; box-shadow: 0 12px 32px rgba(0,0,0,.5); }
    .escenario { flex-direction: column; }
    .escenario:has(.principal:not([hidden])) .rejilla, .escenario:has(.pizarra:not([hidden])) .rejilla { flex: 0 0 140px; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); grid-auto-rows: 120px; }
    .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
    .redondo { width: 42px; height: 42px; flex: none; }
    /* Una sola fila que se desliza: con dos, el panel abierto taparía la de abajo. */
    .barra-inferior { position: relative; z-index: 41; background: var(--fondo); flex-wrap: nowrap; overflow-x: auto; padding: .5rem .5rem calc(.75rem + env(safe-area-inset-bottom)); scrollbar-width: none; }
    .barra-inferior .grupo { flex-wrap: nowrap; gap: .35rem; }
    .salir { padding: .6rem .9rem; flex: none; }
    .panel { bottom: calc(76px + env(safe-area-inset-bottom)); }
}

/* ── Panel del docente ── */
.panel-web { max-width: 1100px; margin: 0 auto; padding: 1rem 1.25rem 3rem; }
.panel-web header.top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .5rem 0 1rem; }
.caja { background: var(--superficie); border-radius: 16px; padding: 1.1rem; margin-bottom: 1rem; }
.caja h2 { margin: 0 0 .8rem; font-size: 1.1rem; }
.formulario { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .7rem; }
.formulario label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; color: var(--tenue); }
.formulario label.chk { flex-direction: row; align-items: center; }
.formulario label.chk input { width: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
th, td { text-align: left; padding: .5rem; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--tenue); font-weight: 500; font-size: .78rem; text-transform: uppercase; }
.estado { font-size: .75rem; padding: .1rem .5rem; border-radius: 999px; background: var(--superficie-2); }
.estado.en_curso { background: var(--ok); color: #fff; }
.estado.cerrada { color: var(--tenue); }
.enlaces { font-family: ui-monospace, monospace; font-size: .78rem; word-break: break-all; }
.acciones-fila { display: flex; gap: .4rem; flex-wrap: wrap; }
a { color: var(--marca); }
video.reproductor { width: 100%; max-height: 420px; background: #000; border-radius: 12px; }
pre.transcripcion { white-space: pre-wrap; background: var(--superficie-2); padding: .8rem; border-radius: 10px; max-height: 320px; overflow: auto; font-size: .85rem; }