:root{--bg:#02070d;--panel:#06111b;--cyan:#16d8ff;--orange:#ff9818;--text:#f5f8fb}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#000;color:var(--text);font-family:Inter,Segoe UI,Arial,sans-serif}.app{width:100%;height:100%;background:radial-gradient(circle at 18% 35%,#062a3b 0,#02070d 31%,#000 76%);position:relative}.stage{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;overflow:hidden}.slide{display:block;width:100%;height:100%;object-fit:contain;user-select:none;transform-origin:center;transition:opacity .16s ease;filter:drop-shadow(0 0 28px rgba(0,185,255,.08))}.loader{position:absolute;padding:10px 16px;border:1px solid #0baed0;border-radius:10px;background:#04111acc;color:#bfefff;opacity:0;pointer-events:none}.controls{position:fixed;right:18px;bottom:14px;z-index:30;display:flex;align-items:center;gap:8px;padding:7px 9px;border:1px solid #0b7893;border-radius:14px;background:#031019e8;box-shadow:0 8px 35px #000b}.controls button,.drawer button{border:1px solid #0b7893;background:#04141f;color:#fff;border-radius:9px;min-width:40px;height:40px;font-size:22px;cursor:pointer}.controls button:hover,.drawer button:hover{border-color:var(--cyan);box-shadow:0 0 15px #00d9ff33}.counter{min-width:72px;text-align:center;font-size:15px}.counter b{color:var(--orange);font-size:18px}.drawer{position:fixed;top:0;right:-390px;width:min(390px,92vw);height:100%;z-index:50;background:#020a10f5;border-left:1px solid #0b7893;backdrop-filter:blur(12px);transition:right .22s ease;overflow:hidden}.drawer.open{right:0}.drawer header{height:58px;display:flex;align-items:center;justify-content:space-between;padding:0 14px;border-bottom:1px solid #123444;color:var(--cyan)}.drawer header button{min-width:36px;height:36px}.thumbs{height:calc(100% - 58px);overflow:auto;padding:12px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.thumb{position:relative;border:1px solid #173849;border-radius:8px;overflow:hidden;background:#000;cursor:pointer}.thumb img{width:100%;display:block}.thumb span{position:absolute;right:5px;bottom:5px;background:#02070ddd;border:1px solid #ff9818;color:#ffb34e;border-radius:6px;padding:2px 6px;font-weight:800}.thumb.active{border-color:var(--cyan);box-shadow:0 0 16px #00d9ff44}.shade{position:fixed;inset:0;z-index:40;background:#0008;opacity:0;pointer-events:none;transition:.2s}.shade.on{opacity:1;pointer-events:auto}@media(max-width:700px){.controls{right:8px;bottom:8px}.controls button{min-width:36px}.drawer{width:88vw}}@media print{.controls,.drawer,.shade{display:none}.stage{position:static}.slide{width:100vw;height:100vh}}

.topicbar{position:fixed;left:18px;bottom:14px;z-index:30;display:flex;align-items:center;gap:8px;padding:7px 10px;border:1px solid #0b7893;border-radius:14px;background:#031019e8;box-shadow:0 8px 35px #000b}
.topicbar label{font-size:12px;color:#8ddff0;text-transform:uppercase;font-weight:800;letter-spacing:.08em}
.topicbar select{height:40px;max-width:250px;border:1px solid #0b7893;border-radius:9px;background:#04141f;color:#fff;padding:0 10px;font:600 14px Inter,Segoe UI,Arial,sans-serif;outline:none}
.topicbar select:focus{border-color:var(--cyan);box-shadow:0 0 15px #00d9ff33}
@media(max-width:700px){.topicbar{left:8px;top:8px;bottom:auto}.topicbar label{display:none}.topicbar select{max-width:190px;height:36px;font-size:12px}}
@media print{.topicbar{display:none}}

/* PORTADA Y CONTENIDO TEMÁTICO */
.intro-screen{
  position:absolute; inset:0; z-index:20; display:none; overflow:hidden;
  color:#f7f9fb;
  background:
    radial-gradient(circle at 14% 50%,rgba(0,190,255,.18),transparent 35%),
    radial-gradient(circle at 92% 10%,rgba(255,130,0,.10),transparent 26%),
    linear-gradient(145deg,#02070d,#020b13 55%,#010306);
}
.intro-screen.active{display:block}
.intro-screen:before{
  content:"";position:absolute;inset:0;opacity:.22;pointer-events:none;
  background-image:
    linear-gradient(rgba(0,216,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(0,216,255,.05) 1px,transparent 1px);
  background-size:54px 54px;
}
.cover{padding:9vh 7vw}
.cover-small{position:relative;z-index:2;color:#84dff2;font-weight:800;letter-spacing:.24em;font-size:14px}
.accent-line{position:relative;z-index:2;width:180px;height:3px;margin:18px 0 36px;background:linear-gradient(90deg,#00d8ff,#ff8a00)}
.cover h1{position:relative;z-index:2;margin:0;max-width:1100px;font-size:clamp(50px,7vw,110px);line-height:.92;letter-spacing:-.045em}
.cover h1 span{display:block;color:#00d8ff;text-shadow:0 0 28px rgba(0,216,255,.18)}
.cover>p{position:relative;z-index:2;color:#bdc9d1;font-size:clamp(20px,2vw,31px);margin:25px 0 0}
.signal-chain{position:relative;z-index:2;display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10vh}
.signal-chain span{padding:13px 18px;border:1px solid currentColor;border-radius:12px;background:#020b12e8;font-weight:800}
.signal-chain b{font-size:28px;color:#e9eef2}.c-cyan{color:#00d8ff}.c-orange{color:#ff8a00}.c-yellow{color:#ffd900}.c-purple{color:#db5cff}.c-green{color:#90ff2d}
.cover-footer{position:absolute;z-index:2;left:7vw;right:7vw;bottom:6vh;padding-top:16px;border-top:1px solid rgba(0,216,255,.25);display:flex;flex-direction:column;gap:4px}
.cover-footer small{color:#84949f}

.contents{padding:7vh 8vw}
.contents-header{position:relative;z-index:2}
.contents-header small{color:#ff8a00;font-weight:900;letter-spacing:.18em}
.contents-header h2{margin:10px 0 8px;font-size:clamp(42px,5vw,78px);line-height:1}
.contents-header h2 span{color:#00d8ff}
.contents-header p{margin:0;color:#9dafba;font-size:clamp(15px,1.4vw,21px)}
.topic-list{position:relative;z-index:2;display:grid;gap:18px;margin-top:7vh;max-width:1180px}
.topic-item{
  display:grid;grid-template-columns:90px 1fr 55px;gap:22px;align-items:center;
  width:100%;min-height:132px;padding:18px 24px;text-align:left;cursor:pointer;
  color:#fff;border:1px solid rgba(0,216,255,.34);border-radius:18px;
  background:linear-gradient(90deg,rgba(2,17,28,.96),rgba(3,9,15,.90));
  transition:.2s ease;
}
.topic-item:hover{transform:translateX(8px);border-color:#00d8ff}
.topic-number{display:grid;place-items:center;width:72px;height:72px;border:1px solid #ff8a00;border-radius:16px;color:#ff8a00;font-size:30px;font-weight:900}
.topic-info{display:flex;flex-direction:column;gap:8px}.topic-info b{font-size:clamp(20px,2vw,31px)}.topic-info small{color:#95a6b1;font-size:clamp(13px,1.1vw,17px);line-height:1.35}
.topic-go{color:#00d8ff;font-size:36px;text-align:right}
.color-legend{position:absolute;z-index:2;left:8vw;right:8vw;bottom:7vh;display:flex;gap:22px;flex-wrap:wrap;padding-top:18px;border-top:1px solid rgba(255,255,255,.12);color:#8fa0ab;font-size:13px}
.color-legend span{display:flex;align-items:center;gap:7px}.dot{width:9px;height:9px;border-radius:50%;display:inline-block}
.dot.cyan{background:#00d8ff}.dot.orange{background:#ff8a00}.dot.yellow{background:#ffd900}.dot.green{background:#90ff2d}.dot.purple{background:#db5cff}.dot.red{background:#ff4e4e}
@media(max-width:760px){
  .cover{padding:12vh 7vw}.signal-chain{margin-top:7vh;gap:7px}.signal-chain span{padding:9px 11px}.signal-chain b{font-size:18px}
  .contents{padding:11vh 5vw}.topic-list{margin-top:5vh}.topic-item{grid-template-columns:60px 1fr 32px;gap:12px;min-height:108px;padding:13px}.topic-number{width:52px;height:52px;font-size:22px}
  .color-legend{left:5vw;right:5vw;gap:10px;font-size:11px}
}


/* =========================================================
   ESQUEMAS HTML INTERACTIVOS
   ========================================================= */

.html-slide{
  display:none;
  width:100%;
  height:100%;
  border:0;
  margin:0;
  padding:0;
  background:#01040a;
  transition:opacity .16s ease;
  overflow:hidden;
}

/*
  El iframe ocupa exactamente el área del escenario.
  Su contenido interno mantiene el 16:9 y gestiona
  pinch-to-zoom / pan de forma independiente.
*/
.stage > .html-slide{
  position:absolute;
  inset:0;
}

/*
  Los controles globales quedan por encima del esquema HTML.
*/
.controls{
  z-index:80;
}

.drawer{
  z-index:100;
}

.shade{
  z-index:90;
}