:root{
  --morado:#6a2f8e; --morado-osc:#3f1a57; --morado-med:#552474; --lila:#f5f0f8; --lila-2:#ebe1f1;
  --oro:#e7b948; --texto:#2b1d33; --suave:#6f5f79; --borde:#e3d8ea; --blanco:#fff;
  --ok:#1f7a4d; --warn:#a86a00; --off:#9a2a2a;
  --radio:18px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Poppins,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:18px;line-height:1.55;color:var(--texto);background:var(--lila)}
a{color:var(--morado)}
img{max-width:100%;display:block}
.envoltura{max-width:1080px;margin:0 auto;padding:0 18px}

/* ---------- barra superior ---------- */
.barra{background:var(--morado);color:#fff}
.barra .envoltura{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:76px}
.barra img{height:44px;width:auto}
.barra a.salir{color:#fff;text-decoration:none;font-size:15px;border:1.5px solid rgba(255,255,255,.55);padding:7px 16px;border-radius:999px;white-space:nowrap}
.barra a.salir:hover{background:rgba(255,255,255,.12)}

/* ---------- entrada ---------- */
body.entrada{background:linear-gradient(160deg,#4a1f66 0%,#6a2f8e 55%,#8a4bad 100%);min-height:100vh;display:flex;flex-direction:column}
.entrada main{flex:1;display:flex;align-items:center;justify-content:center;padding:36px 16px}
.tarjeta{background:#fff;border-radius:26px;padding:34px 28px 30px;width:100%;max-width:440px;box-shadow:0 24px 60px rgba(30,6,45,.35)}
.tarjeta .logo{width:230px;margin:0 auto 22px}
.tarjeta h1{font-size:26px;line-height:1.25;margin:0 0 6px;text-align:center;color:var(--morado-osc)}
.tarjeta .sub{text-align:center;color:var(--suave);margin:0 0 24px;font-size:16px}
label{display:block;font-weight:600;font-size:16px;margin:16px 0 6px}
input[type=email],input[type=text],input[type=tel],input[type=password],input[type=date],input[type=number],select,textarea{
  width:100%;font:inherit;font-size:19px;padding:14px 16px;border:2px solid var(--borde);border-radius:14px;background:#fff;color:var(--texto)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--morado);box-shadow:0 0 0 4px rgba(106,47,142,.15)}
input.codigo{font-size:34px;letter-spacing:18px;text-align:center;font-weight:700;padding:12px 10px 12px 28px}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:inherit;font-weight:600;font-size:19px;
  background:var(--morado);color:#fff;border:0;border-radius:999px;padding:15px 28px;cursor:pointer;text-decoration:none;min-height:56px}
.boton:hover{background:var(--morado-med)}
.boton.ancho{width:100%;margin-top:24px}
.boton.oro{background:var(--oro);color:#2b1d33}
.boton.claro{background:var(--lila-2);color:var(--morado-osc)}
.boton.wa{background:#1fa855}
.enlace{background:none;border:0;font:inherit;color:var(--morado);text-decoration:underline;cursor:pointer;padding:0;font-size:16px}
.aviso{border-radius:14px;padding:14px 16px;margin:0 0 18px;font-size:16px}
.aviso.error{background:#fdecec;color:#8c1f1f}
.aviso.bien{background:#e8f6ee;color:#1d5e3c}
.aviso.info{background:var(--lila);color:var(--morado-osc)}
.centro{text-align:center}
.ayuda{text-align:center;margin-top:22px;font-size:16px;color:var(--suave)}
.entrada .pie{color:rgba(255,255,255,.85)}
.entrada .pie a{color:#fff}

/* ---------- salón ---------- */
.saludo{padding:34px 0 8px}
.saludo h1{font-family:"Playfair Display",Georgia,serif;font-style:italic;font-weight:600;font-size:clamp(30px,5vw,42px);margin:0;color:var(--morado-osc);line-height:1.15}
.saludo p{margin:8px 0 0;color:var(--suave);font-size:18px}
.mes{margin:34px 0 10px}
.mes-cab{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:16px;border-bottom:2px solid var(--borde);padding-bottom:10px}
.mes-cab h2{margin:0;font-size:24px;color:var(--morado)}
.mes-cab span{color:var(--suave);font-size:15px}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:20px}
.video{background:#fff;border-radius:var(--radio);overflow:hidden;box-shadow:0 6px 22px rgba(63,26,87,.08);display:flex;flex-direction:column;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
.video:hover{transform:translateY(-3px);box-shadow:0 12px 30px rgba(63,26,87,.16)}
.portada{position:relative;aspect-ratio:16/9;background:linear-gradient(140deg,#4a1f66,#8a4bad);display:flex;align-items:center;justify-content:center;color:#fff}
.portada img{width:100%;height:100%;object-fit:cover}
.portada .falsa{padding:18px 80px 18px 26px;font-weight:700;font-size:20px;line-height:1.25;text-align:center}
.portada .play{position:absolute;right:14px;bottom:14px;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(0,0,0,.25)}
.portada .play::after{content:"";border-left:19px solid var(--morado);border-top:12px solid transparent;border-bottom:12px solid transparent;margin-left:5px}
.video .info{padding:16px 18px 20px}
.video .num{font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--morado)}
.video h3{margin:4px 0 0;font-size:19px;line-height:1.3}
.video .dur{color:var(--suave);font-size:15px;margin-top:6px}
.vacio{background:#fff;border-radius:var(--radio);padding:30px;text-align:center;color:var(--suave);margin-top:30px}

/* ---------- reproductor ---------- */
.volver{display:inline-flex;align-items:center;gap:8px;margin:24px 0 14px;font-weight:600;text-decoration:none;font-size:17px}
.reproductor{background:#000;border-radius:var(--radio);overflow:hidden;box-shadow:0 12px 34px rgba(30,6,45,.25)}
.reproductor video,.reproductor iframe{width:100%;display:block;aspect-ratio:16/9;background:#000;border:0}
.ficha{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start;margin:22px 0 10px}
.ficha h1{margin:0;font-size:clamp(24px,4vw,32px);line-height:1.2;color:var(--morado-osc)}
.ficha .num{font-size:14px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--morado);margin-bottom:4px}
.ficha p{margin:10px 0 0;color:var(--suave)}
.otros{margin:34px 0}
.otros h2{font-size:20px;color:var(--morado)}
.lista{display:flex;flex-direction:column;gap:10px}
.lista a{display:flex;gap:14px;align-items:center;background:#fff;border-radius:14px;padding:12px;text-decoration:none;color:inherit}
.lista a.actual{outline:2px solid var(--morado)}
.lista .mini{width:120px;flex:none;aspect-ratio:16/9;border-radius:10px;overflow:hidden;background:linear-gradient(140deg,#4a1f66,#8a4bad)}
.lista .mini img{width:100%;height:100%;object-fit:cover}
.lista b{display:block;font-size:17px;line-height:1.3}
.lista small{color:var(--suave);font-size:14px}

/* ---------- estado sin acceso ---------- */
.estado{max-width:620px;margin:50px auto;background:#fff;border-radius:24px;padding:34px 28px;text-align:center}
.estado h1{color:var(--morado-osc);font-size:28px;margin:0 0 12px}
.estado .botones{display:flex;flex-direction:column;gap:12px;margin-top:24px}

.pie{text-align:center;padding:36px 16px 40px;color:var(--suave);font-size:16px}
.pie p{margin:4px 0}
.pie .firma{font-weight:600;color:var(--morado)}
.entrada .pie .firma{color:#fff}

@media (max-width:640px){
  body{font-size:17px}
  .barra img{height:36px}
  .ficha{grid-template-columns:1fr}
  .ficha .boton{width:100%}
  .rejilla{grid-template-columns:1fr}
  .lista .mini{width:96px}
}

/* ================= PANEL ================= */
body.panel{background:#f6f3f8;font-size:16px}
.panel .barra .envoltura{max-width:1280px}
.panel .barra nav{display:flex;gap:4px;flex-wrap:wrap}
.panel .barra nav a{color:#fff;text-decoration:none;padding:8px 14px;border-radius:999px;font-size:15px;font-weight:500;opacity:.85}
.panel .barra nav a.on,.panel .barra nav a:hover{background:rgba(255,255,255,.16);opacity:1}
.panel .barra nav a .n{background:var(--oro);color:#2b1d33;border-radius:999px;padding:0 7px;font-size:12px;margin-left:4px;font-weight:700}
.panel main{max-width:1280px;margin:0 auto;padding:24px 18px 60px}
.panel h1{font-size:26px;margin:4px 0 18px;color:var(--morado-osc)}
.panel h2{font-size:19px;margin:28px 0 12px;color:var(--morado)}
.caja{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 2px 10px rgba(63,26,87,.06);margin-bottom:18px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:20px}
.kpi{background:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 2px 10px rgba(63,26,87,.06)}
.kpi b{display:block;font-size:28px;color:var(--morado-osc);line-height:1.1}
.kpi span{font-size:14px;color:var(--suave)}
table.t{width:100%;border-collapse:collapse;font-size:15px}
table.t th{text-align:left;font-size:13px;text-transform:uppercase;letter-spacing:.6px;color:var(--suave);font-weight:600;padding:10px 10px;border-bottom:2px solid var(--borde)}
table.t td{padding:11px 10px;border-bottom:1px solid #efe8f3;vertical-align:middle}
table.t tr:hover td{background:#fbf8fd}
.tabla-scroll{overflow-x:auto}
.chip{display:inline-block;font-size:13px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.chip.ok{background:#e3f4ea;color:var(--ok)} .chip.warn{background:#fff2d9;color:var(--warn)}
.chip.pause{background:#ece4f2;color:var(--morado-osc)} .chip.off{background:#f6e4e4;color:var(--off)}
.chip.hot{background:#ffe9df;color:#b4441b} .chip.tra{background:#e3eefc;color:#1d4f8f}
.panel .boton{font-size:15px;min-height:42px;padding:9px 18px}
.panel .boton.peq{font-size:14px;min-height:34px;padding:6px 14px}
.panel input,.panel select,.panel textarea{font-size:16px;padding:10px 12px;border-radius:10px}
.panel label{font-size:14px;margin:12px 0 5px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:4px 16px}
.acciones{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.filtros{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
.filtros input,.filtros select{width:auto;min-width:180px}
.tarea{display:flex;gap:14px;align-items:center;justify-content:space-between;padding:14px 0;border-bottom:1px solid #efe8f3;flex-wrap:wrap}
.tarea:last-child{border-bottom:0}
.tarea .tt{font-weight:600}
.tarea .td{color:var(--suave);font-size:14px}
.tarea .tipo{font-size:12px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--morado)}
.muted{color:var(--suave)}
.codigo-grande{font-size:30px;font-weight:700;letter-spacing:8px;color:var(--morado)}
.dos-col{display:grid;grid-template-columns:1.1fr 1fr;gap:18px}
@media (max-width:900px){.dos-col{grid-template-columns:1fr}}
pre.json{background:#2b1d33;color:#f3e9f9;padding:12px;border-radius:10px;overflow:auto;font-size:12px;max-height:260px}