/*!
 * IEL · Responsabilidad y compromiso profesional del diseñador gráfico
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-IEL-RESP-2026-5683
 */
/* ══════════════════════════════════════════════════════════
   TOKENS · MODO CLARO (predeterminado)
   ══════════════════════════════════════════════════════════ */
:root{
  --bg:#f5f7f9; --bg-2:#ffffff; --surface:#ffffff; --surface-2:#eef1f5;
  --line:#d3d9e2; --line-soft:#e5e9ef;
  --txt:#0f1a2a; --txt-2:#4b5768; --txt-3:#7d8798;
  --accent:#0e4d7a; --accent-2:#0f6b5c; --accent-3:#9c3b1e; --gold:#7a6216;
  --ok:#12703f; --bad:#b3202f; --warn:#8a5a00;
  --onaccent:#ffffff;
  --shadow:0 1px 2px rgba(15,26,42,.05),0 1px 3px rgba(15,26,42,.05);
  --deck-bg:#ffffff;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
  --sans:"Segoe UI",system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
}
html[data-theme="dark"]{
  --bg:#0e131c; --bg-2:#141b26; --surface:#18202c; --surface-2:#202a38;
  --line:#2f3b4c; --line-soft:#26303e;
  --txt:#e9eef4; --txt-2:#a2adbe; --txt-3:#6e7b8e;
  --accent:#5fa8dd; --accent-2:#4bbfa6; --accent-3:#e0876a; --gold:#c9a94e;
  --ok:#4cc98a; --bad:#f06b74; --warn:#e0b155;
  --onaccent:#0e131c;
  --shadow:none;
  --deck-bg:#111823;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{
  background:var(--bg);color:var(--txt);font-family:var(--sans);line-height:1.5;
  -webkit-font-smoothing:antialiased;transition:background .2s ease,color .2s ease;
}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}

/* ══════════════ ESCENARIO ══════════════ */
.stage{position:fixed;inset:0;display:grid;place-items:center;z-index:1}
.deck{
  width:1280px;height:720px;transform-origin:center center;
  /* Centrado a mano y no con el place-items del padre: cuando el lienzo es
     mas grande que el hueco —o sea, en casi cualquier ventana— la
     especificacion manda que ese centrado degrade a alineacion al inicio,
     para no dejar overflow inalcanzable. El lienzo quedaba en (0,0) y se
     escalaba desde su centro, asi que se veia empujado abajo y a la
     derecha, con el pie cortado. */
  position:absolute;left:50%;top:50%;margin:-360px 0 0 -640px;
  background:var(--deck-bg);border:1px solid var(--line-soft);
  box-shadow:0 4px 24px rgba(15,26,42,.07);overflow:hidden;
}
.deck::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--accent);z-index:5}
.deck::after{
  content:"Instrumentos de Estrategia Laboral · FAD UAEMéx";
  position:absolute;left:64px;bottom:26px;pointer-events:none;z-index:4;
  font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);
}
.slide{
  position:absolute;inset:0;padding:48px 64px 62px;
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s ease,transform .28s ease,visibility .28s;
  display:flex;flex-direction:column;
}
.slide.on{opacity:1;visibility:visible;transform:none}

/* ══════════════ CROMO ══════════════ */
.chrome{position:fixed;z-index:20}
.hud{
  left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:12px;padding:0 18px;
  background:color-mix(in srgb,var(--bg) 88%,transparent);
}
.hud-btn{
  width:32px;height:32px;border-radius:5px;display:grid;place-items:center;
  border:1px solid var(--line);background:var(--surface);
  color:var(--txt-2);font-size:14px;transition:.14s;
}
.hud-btn:hover{border-color:var(--accent);color:var(--accent)}
.hud-btn[disabled]{opacity:.3;cursor:default;border-color:var(--line-soft);color:var(--txt-3)}
.counter{font-family:var(--mono);font-size:11.5px;color:var(--txt-3);min-width:56px;text-align:center;letter-spacing:.04em}
.hud-title{
  flex:1;min-width:0;font-size:11px;color:var(--txt-3);letter-spacing:.12em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center;
}
.railbar{position:fixed;left:0;right:0;bottom:0;height:2px;z-index:21;background:var(--line-soft)}
.railbar i{display:block;height:100%;width:0;background:var(--accent);transition:width .28s}

.index{
  position:fixed;inset:0;z-index:40;background:var(--bg);
  padding:34px 52px;overflow-y:auto;display:none;
}
.index.on{display:block}
.index h2{font-size:21px;margin-bottom:3px;letter-spacing:-.02em;font-weight:700}
.index .sub{font-size:12.5px;color:var(--txt-3);margin-bottom:16px}
.idx-keys{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:22px;font-size:11.5px;color:var(--txt-3)}
.idx-keys kbd{
  display:inline-block;padding:1px 6px;border:1px solid var(--line);border-radius:3px;
  background:var(--surface);color:var(--txt-2);font-family:var(--mono);font-size:10.5px;margin-right:5px;
}
.idx-group{margin-bottom:17px}
.idx-group h3{font-size:10px;letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:8px;font-weight:800}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(245px,1fr));gap:6px}
.idx-list button{
  text-align:left;padding:8px 12px;border-radius:5px;border:1px solid var(--line-soft);
  background:var(--surface);color:var(--txt-2);font-size:12.5px;display:flex;gap:9px;transition:.14s;
}
.idx-list button:hover{border-color:var(--accent);color:var(--txt)}
.idx-list button b{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);flex:0 0 20px}
.idx-list button.now{border-color:var(--accent);background:var(--surface-2);color:var(--txt)}
.idx-close{position:absolute;top:16px;right:22px;font-size:21px;color:var(--txt-3);padding:6px 12px}

/* ══════════════ TIPOGRAFÍA ══════════════ */
.kicker{
  display:inline-flex;align-items:center;gap:9px;font-size:10.5px;font-weight:800;
  letter-spacing:.17em;text-transform:uppercase;color:var(--accent);margin-bottom:10px;
}
.kicker::before{content:"";width:22px;height:2px;background:var(--accent)}
.slide h1{font-size:52px;line-height:1.08;letter-spacing:-.025em;font-weight:700;margin-bottom:16px}
.slide h2{font-size:32px;line-height:1.14;letter-spacing:-.022em;font-weight:700;margin-bottom:8px}
.slide h3{font-size:15.5px;font-weight:700;margin-bottom:5px}
.slide p{font-size:14.5px;color:var(--txt-2);max-width:84ch}
.slide p+p{margin-top:9px}
.lead{font-size:17px!important;color:var(--txt)!important;line-height:1.45}
.hi{color:var(--accent)}
strong{color:var(--txt);font-weight:650}
em{color:var(--txt);font-style:italic}
.mono{font-family:var(--mono)}
.small{font-size:12px!important;color:var(--txt-3)!important}
.body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}
.exp{font-size:.6em;color:var(--txt-3);font-weight:400;font-style:normal;letter-spacing:0;line-height:1.35}
h2 .exp{display:block;margin-top:5px}

/* ══════════════ COMPONENTES ══════════════ */
.cols{display:grid;gap:16px}
.c2{grid-template-columns:1fr 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.c-55{grid-template-columns:1.15fr 1fr}
.c-46{grid-template-columns:.85fr 1.15fr}

.card{
  background:var(--surface);border:1px solid var(--line-soft);border-radius:7px;
  padding:15px 17px;box-shadow:var(--shadow);
}
.card h3{margin-bottom:4px}
.card p{font-size:12.8px}
.ico{
  width:30px;height:30px;border-radius:5px;display:grid;place-items:center;margin-bottom:9px;
  font-size:12.5px;font-weight:800;font-family:var(--mono);letter-spacing:-.02em;
  background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent);
}
.ico.v{background:color-mix(in srgb,var(--accent-2) 13%,transparent);color:var(--accent-2)}
.ico.p{background:color-mix(in srgb,var(--accent-3) 12%,transparent);color:var(--accent-3)}
.ico.g{background:color-mix(in srgb,var(--gold) 14%,transparent);color:var(--gold)}

.note{
  border-radius:6px;padding:13px 17px;border:1px solid var(--line-soft);border-left:3px solid var(--accent);
  background:var(--surface-2);font-size:13.5px;color:var(--txt-2);
}
.note b{color:var(--txt)}
.note.vio{border-left-color:var(--accent-2)}
.note.gold{border-left-color:var(--gold)}
.note.warn{border-left-color:var(--accent-3)}
.tag{
  display:inline-block;font-size:9px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;
  padding:3px 7px;border-radius:3px;margin-right:8px;vertical-align:1px;
  background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);
}
.tag.v{background:color-mix(in srgb,var(--accent-2) 14%,transparent);color:var(--accent-2)}
.tag.g{background:color-mix(in srgb,var(--gold) 16%,transparent);color:var(--gold)}
.tag.p{background:color-mix(in srgb,var(--accent-3) 13%,transparent);color:var(--accent-3)}

table{width:100%;border-collapse:collapse;font-size:13px}
th,td{padding:8px 13px;text-align:left;border-bottom:1px solid var(--line-soft);vertical-align:top}
th{font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--txt-3);font-weight:800;border-bottom-color:var(--line)}
td{color:var(--txt-2)}
td:first-child{color:var(--txt);font-weight:650}
tr:last-child td{border-bottom:none}

.chip{
  display:inline-block;padding:2px 9px;border-radius:3px;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;border:1px solid var(--line);color:var(--txt-2);
}
.chip.ok{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 9%,transparent)}
.chip.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 9%,transparent)}
.chip.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 9%,transparent)}

.act{
  border:1px solid var(--line);background:var(--surface);color:var(--txt-2);
  border-radius:5px;padding:7px 14px;font-size:12.5px;font-weight:650;transition:.14s;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.act:hover{border-color:var(--accent);color:var(--accent)}
.act.primary{background:var(--accent);color:var(--onaccent);border-color:var(--accent)}
.act.primary:hover{filter:brightness(1.12);color:var(--onaccent)}
.act.sm{padding:5px 11px;font-size:11.5px}

.pick{
  padding:6px 13px;border-radius:5px;border:1px solid var(--line);background:var(--surface);
  color:var(--txt-2);font-size:12.5px;font-weight:650;transition:.14s;
}
.pick:hover{border-color:var(--accent);color:var(--accent)}
.pick.on{background:var(--accent);border-color:var(--accent);color:var(--onaccent)}

/* ── Portada ── */
.cover{justify-content:center}
.cover .badge{
  display:inline-flex;align-items:center;gap:9px;padding:6px 14px;border-radius:4px;
  border:1px solid var(--line);background:var(--surface);
  font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-2);margin-bottom:20px;width:max-content;
}
.cover .badge i{width:6px;height:6px;border-radius:1px;background:var(--accent)}
.cover h1{font-size:62px;margin-bottom:16px}
.meta{display:flex;gap:34px;margin-top:30px;flex-wrap:wrap}
.meta div small{display:block;font-size:9.5px;letter-spacing:.17em;text-transform:uppercase;color:var(--txt-3);margin-bottom:4px}
.meta div b{font-size:13.5px;font-weight:650}

/* ── Ruta ── */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;position:relative}
.road::before{content:"";position:absolute;top:27px;left:13%;right:13%;height:1px;background:var(--line)}
.stop{position:relative}
.stop .dot{
  width:54px;height:54px;border-radius:6px;margin-bottom:14px;display:grid;place-items:center;
  font-size:17px;font-weight:800;font-family:var(--mono);position:relative;z-index:1;
  border:1px solid var(--line);background:var(--surface);color:var(--txt-3);
}
.stop.now .dot{border-color:var(--accent);background:var(--accent);color:var(--onaccent)}
.stop h3{font-size:16.5px;margin-bottom:4px}
.stop p{font-size:12.8px}
.stop .when{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px;display:block}
.stop.now .when{color:var(--accent);font-weight:800}

/* ── Objetivos numerados ── */
.objs{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);border-radius:7px;overflow:hidden}
.objs div{display:grid;grid-template-columns:52px 1fr;gap:14px;background:var(--surface);padding:14px 18px;align-items:baseline}
.objs b{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.05em}
.objs p{font-size:14.5px;color:var(--txt);max-width:none}

/* ── Agenda ── */
.agenda{display:grid;gap:6px}
.agenda .row{
  display:grid;grid-template-columns:74px 1fr 78px;gap:14px;align-items:center;
  border:1px solid var(--line-soft);border-radius:6px;padding:10px 15px;background:var(--surface);
}
.agenda .row b{font-family:var(--mono);font-size:12px;color:var(--accent)}
.agenda .row p{font-size:13.5px;color:var(--txt-2);margin:0}
.agenda .row span{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--txt-3);text-align:right}
.agenda .row.on{border-color:var(--accent);background:var(--surface-2)}

/* ── Catálogo de errores ── */
.errbar{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px;align-items:center}
.esearch{
  flex:1;min-width:150px;padding:6px 12px;border-radius:5px;border:1px solid var(--line);
  background:var(--surface);color:var(--txt);font-family:inherit;font-size:12.5px;
}
.esearch::placeholder{color:var(--txt-3)}
.egrid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;height:300px;overflow-y:auto;padding-right:6px;align-content:start}
.egrid::-webkit-scrollbar{width:6px}
.egrid::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ecell{
  border:1px solid var(--line-soft);border-radius:5px;padding:8px 10px;background:var(--surface);
  font-size:11.5px;color:var(--txt-2);text-align:left;transition:.13s;line-height:1.3;
  display:flex;gap:8px;align-items:flex-start;
}
.ecell:hover{border-color:var(--accent);color:var(--txt)}
.ecell.on{border-color:var(--accent);background:var(--surface-2);color:var(--txt);font-weight:650}
.ecell i{width:5px;height:5px;border-radius:1px;flex:0 0 5px;margin-top:5px;background:var(--txt-3)}
.ecell[data-c="proceso"] i{background:var(--accent-2)}
.ecell[data-c="dinero"] i{background:var(--accent)}
.ecell[data-c="legal"] i{background:var(--accent-3)}
.ecell[data-c="actitud"] i{background:var(--gold)}
.epanel{border:1px solid var(--line-soft);border-radius:7px;padding:16px 19px;background:var(--surface);height:300px;overflow-y:auto;box-shadow:var(--shadow)}
.epanel h4{font-size:17px;margin:9px 0 8px;line-height:1.22;font-weight:700}
.epanel p{font-size:13px}
.epanel .fix{border-top:1px solid var(--line-soft);padding-top:11px;margin-top:12px}
.epanel .fix small{display:block;font-size:9.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--accent);margin-bottom:5px;font-weight:800}

/* ── Calculadora ── */
.field{margin-bottom:12px}
.field label{display:block;font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px;font-weight:700}
.field input{
  width:100%;padding:8px 12px;border-radius:5px;border:1px solid var(--line);
  background:var(--surface);color:var(--txt);font-family:var(--mono);font-size:14px;
}
.field small{display:block;font-size:11px;color:var(--txt-3);margin-top:4px}
.out{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:6px;background:var(--surface-2);padding:17px 19px}
.out .big{font-family:var(--mono);font-size:40px;font-weight:800;color:var(--accent);letter-spacing:-.03em;line-height:1.1}
.out .sub{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--txt-3);margin-bottom:6px}
.out .line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--txt-2);padding:5px 0;border-bottom:1px solid var(--line-soft)}
.out .line:last-child{border-bottom:none}
.out .line b{font-family:var(--mono);color:var(--txt)}

/* ── Autodiagnóstico ── */
.diag{display:grid;grid-template-columns:1.4fr .6fr;gap:16px}
.dlist{display:grid;grid-template-columns:1fr 1fr;gap:5px;height:322px;overflow-y:auto;padding-right:6px;align-content:start}
.dlist::-webkit-scrollbar{width:6px}
.dlist::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.ditem{
  display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line-soft);border-radius:5px;
  padding:9px 11px;background:var(--surface);font-size:11.8px;color:var(--txt-2);text-align:left;
  transition:.13s;line-height:1.32;
}
.ditem:hover{border-color:var(--accent)}
.ditem .box{
  width:14px;height:14px;border-radius:3px;border:1.5px solid var(--line);flex:0 0 14px;margin-top:1px;
  display:grid;place-items:center;font-size:9px;color:transparent;transition:.13s;
}
.ditem.on{border-color:var(--accent-3);background:color-mix(in srgb,var(--accent-3) 7%,var(--surface));color:var(--txt)}
.ditem.on .box{background:var(--accent-3);border-color:var(--accent-3);color:#fff}
.dscore{border:1px solid var(--line);border-radius:7px;background:var(--surface);padding:18px 19px;display:flex;flex-direction:column;box-shadow:var(--shadow)}
.dscore .num{font-family:var(--mono);font-size:48px;font-weight:800;line-height:1;letter-spacing:-.04em}
.dscore .of{font-size:13px;color:var(--txt-3);font-family:var(--mono)}
.dbar{height:5px;border-radius:3px;background:var(--line-soft);overflow:hidden;margin:14px 0 13px}
.dbar i{display:block;height:100%;width:0;transition:width .3s ease;background:var(--accent)}
.dscore h4{font-size:15.5px;margin-bottom:6px;font-weight:700}
.dscore p{font-size:12.3px;color:var(--txt-2)}

/* ── Dilemas ── */
.dil{display:grid;grid-template-columns:230px 1fr;gap:14px}
.dil-list{display:grid;gap:5px;align-content:start;height:336px;overflow-y:auto;padding-right:5px}
.dil-list::-webkit-scrollbar{width:6px}
.dil-list::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.dil-list button{
  text-align:left;border:1px solid var(--line-soft);border-radius:5px;padding:9px 12px;
  background:var(--surface);color:var(--txt-2);font-size:12.2px;transition:.13s;display:flex;gap:9px;line-height:1.3;
}
.dil-list button:hover{border-color:var(--accent);color:var(--txt)}
.dil-list button.on{border-color:var(--accent);background:var(--surface-2);color:var(--txt);font-weight:650}
.dil-list button b{font-family:var(--mono);font-size:10.5px;color:var(--txt-3);flex:0 0 20px}
.dil-panel{border:1px solid var(--line-soft);border-radius:7px;background:var(--surface);padding:16px 19px;height:336px;overflow-y:auto;box-shadow:var(--shadow)}
.dil-panel::-webkit-scrollbar{width:6px}
.dil-panel::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
.dil-panel h4{font-size:16px;margin-bottom:6px;font-weight:700}
.dil-case{font-size:13.2px;color:var(--txt-2);margin-bottom:12px}
.dil-opts{display:grid;gap:5px;margin-bottom:12px}
.dopt{
  text-align:left;border:1px solid var(--line-soft);border-radius:5px;padding:9px 12px;
  background:var(--bg);color:var(--txt-2);font-size:12.2px;transition:.13s;display:flex;gap:10px;line-height:1.35;
}
.dopt:hover{border-color:var(--accent);color:var(--txt)}
.dopt b{font-family:var(--mono);font-size:11px;color:var(--accent);flex:0 0 12px}
.dopt.on{background:var(--surface-2);border-color:var(--accent);color:var(--txt)}
.dil-fb{display:none;border-radius:5px;padding:12px 15px;border:1px solid var(--line-soft);border-left:3px solid var(--accent);background:var(--surface-2);font-size:12.3px;color:var(--txt-2)}
.dil-fb.show{display:block}
.dil-fb .hd{display:flex;align-items:center;gap:9px;margin-bottom:7px}
.dil-fb .stake{margin-top:9px;padding-top:9px;border-top:1px solid var(--line);font-size:11.8px;color:var(--txt-3)}
.dil-fb .stake b{color:var(--txt-2)}

/* ── Ámbitos concéntricos ── */
.rings{display:grid;place-items:center}
.ring{
  width:100%;border:1px solid var(--line);border-radius:6px;padding:28px 16px 16px;
  position:relative;cursor:pointer;transition:.15s;background:var(--surface);
}
.ring > .lbl{
  position:absolute;top:7px;left:16px;white-space:nowrap;
  font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--txt-3);
}
.ring:hover{border-color:var(--accent)}
.ring:hover > .lbl{color:var(--accent)}
.ring.on{border-color:var(--accent);box-shadow:inset 3px 0 0 var(--accent)}
.ring.on > .lbl{color:var(--accent)}
.ring.core{padding:20px 16px;text-align:center}
.ring.core .lbl{position:static;display:block}
.rpanel{border:1px solid var(--line-soft);border-radius:7px;background:var(--surface);padding:17px 20px;height:100%;box-shadow:var(--shadow)}
.rpanel h4{font-size:17px;margin-bottom:6px;font-weight:700}
.rpanel p{font-size:13px}
.rpanel ul{list-style:none;margin-top:11px}
.rpanel li{font-size:12.5px;color:var(--txt-2);padding:6px 0 6px 15px;position:relative;border-bottom:1px solid var(--line-soft)}
.rpanel li:last-child{border-bottom:none}
.rpanel li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:1px;background:var(--accent)}

/* ── Cuadro explicativo ── */
.cuadro-wrap{border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--surface)}
.cuadro-scroll{max-height:380px;overflow-y:auto}
.cuadro-scroll::-webkit-scrollbar{width:7px}
.cuadro-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:4px}
table.cuadro{width:100%;border-collapse:collapse;table-layout:fixed}
table.cuadro th{
  position:sticky;top:0;z-index:2;background:var(--surface-2);padding:9px 10px;
  font-size:9px;letter-spacing:.11em;text-transform:uppercase;color:var(--txt-2);font-weight:800;
  border-bottom:1px solid var(--line);border-right:1px solid var(--line-soft);text-align:left;
}
table.cuadro th:last-child{border-right:none}
table.cuadro td{padding:0;border-bottom:1px solid var(--line-soft);border-right:1px solid var(--line-soft);vertical-align:top}
table.cuadro td:last-child{border-right:none}
table.cuadro tr:last-child td{border-bottom:none}
td.ambito{padding:11px;font-size:11.8px;font-weight:700;color:var(--txt);background:var(--bg);line-height:1.3}
td.ambito small{display:block;font-family:var(--mono);font-size:9.5px;color:var(--accent);margin-bottom:3px;font-weight:700}
table.cuadro textarea{
  width:100%;height:64px;border:none;outline:none;resize:none;background:transparent;
  color:var(--txt);font-family:inherit;font-size:11.8px;line-height:1.35;padding:9px 10px;
}
table.cuadro textarea::placeholder{color:var(--txt-3);opacity:.7}
table.cuadro textarea:focus{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.cbar{display:flex;align-items:center;gap:7px;margin-bottom:9px;flex-wrap:wrap}
.cbar .fill{flex:1}
.cprog{font-family:var(--mono);font-size:11.5px;color:var(--txt-3);white-space:nowrap}
.cprog b{color:var(--accent)}
.saved{font-size:11px;color:var(--ok);opacity:0;transition:opacity .3s}
.saved.on{opacity:1}

/* ── Impresión ── */
#printArea{display:none}
@media print{
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  .stage,.chrome,.railbar,.index,.tiny{display:none!important}
  #printArea{display:block;padding:12mm;font-family:Arial,Helvetica,sans-serif;color:#000}
  #printArea h1{font-size:16pt;margin-bottom:3mm}
  #printArea .ph{font-size:9.5pt;color:#444;margin-bottom:6mm}
  #printArea .ph span{display:inline-block;border-bottom:1px solid #999;min-width:62mm;margin-left:2mm}
  #printArea table{width:100%;border-collapse:collapse;font-size:8.5pt}
  #printArea th,#printArea td{border:1px solid #666;padding:2.4mm;vertical-align:top;text-align:left}
  #printArea th{background:#eee;font-size:7.5pt;text-transform:uppercase;letter-spacing:.06em}
  #printArea td:first-child{width:19%;font-weight:bold;background:#f7f7f7}
  #printArea .pf{margin-top:6mm;font-size:8pt;color:#444}
  @page{size:landscape;margin:0}
}

.tiny{position:fixed;inset:auto 0 60px 0;text-align:center;font-size:11.5px;color:var(--txt-3);z-index:19;display:none;padding:0 20px}
/* Solo en vertical: incrustada en la ficha el marco es apaisado y estrecho,
   y ahí este aviso le pedía girar a quien ya estaba girado. */
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}












































/* CL-MEJORAS-INICIO */

/* ════════════════════════════════════════════════════════════
   REVELADO PROGRESIVO  ·  módulo compartido
   La barra espaciadora descubre los elementos de la diapositiva
   uno por uno. Las flechas siguen saltando de lámina completa.

   Los elementos se ocultan ANTES del primer pintado y solo se
   les añade la transición después, para que nunca se vea el
   parpadeo de aparecer y desaparecer.
   ════════════════════════════════════════════════════════════ */
.clf{opacity:0!important;transform:translateY(calc(.6 * var(--u, 10px)))}
.clf-t{transition:opacity .3s ease, transform .3s cubic-bezier(.22,.9,.3,1)}
@media (prefers-reduced-motion:reduce){.clf-t{transition:none}}

/* Durante el montaje se suprime TODA transición del documento. Sin esto,
   los elementos que ya traen una transición propia —los botones de los
   selectores, por ejemplo— se ven desvanecerse al cargar la página. */
body.clf-montando *{transition:none!important;animation-duration:0s!important}

/* indicador discreto de cuántos elementos quedan */
#clf-hint{
  position:fixed;left:50%;bottom:calc(52px + 10px);transform:translateX(-50%);
  z-index:60;display:flex;gap:5px;align-items:center;pointer-events:none;
  opacity:0;transition:opacity .25s ease
}
#clf-hint.on{opacity:.8}
#clf-hint i{
  width:6px;height:6px;border-radius:50%;display:block;
  background:currentColor;opacity:.26;transition:opacity .2s ease,transform .2s ease
}
#clf-hint i.done{opacity:1;transform:scale(1.25)}

/* ════════════════════════════════════════════════════════════
   AYUDA DE USO  ·  módulo compartido
   Vive en el cromo, nunca en la diapositiva: un botón en el HUD
   que abre el panel, y un aviso breve la primera vez que se abre
   la presentación en ese navegador.

   Los colores se toman de los tokens de cada presentación. Cada
   cadena de reserva prueba primero los nombres en inglés de las
   presentaciones antiguas y después los que usa el esqueleto del
   estándar, en español: sin eso, un mazo nuevo caía al #12161f de
   reserva con el color heredado, y en modo claro salía texto negro
   sobre panel negro.
   ════════════════════════════════════════════════════════════ */
#clf-ayuda-btn.clf-suelto{
  position:fixed;right:14px;bottom:58px;z-index:900;
  width:30px;height:30px;border-radius:50%;font-size:14px;line-height:1;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,transparent))));
  color:inherit;opacity:.55;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.4))))
}
#clf-ayuda-btn.clf-suelto:hover{opacity:1}

#clf-ayuda{
  position:fixed;inset:0;z-index:1000;display:grid;place-items:center;padding:24px;
  background:rgba(7,10,16,.55);opacity:0;transition:opacity .18s ease
}
/* Imprescindible: el atributo hidden no puede con un display de autor, y
   sin esta regla la capa se queda encima de la lámina, invisible, robando
   cada clic de los módulos interactivos. */
#clf-ayuda[hidden]{display:none}
#clf-ayuda.on{opacity:1}
@media (prefers-reduced-motion:reduce){#clf-ayuda{transition:none}}

#clf-ayuda .clf-panel{
  position:relative;width:min(520px,100%);max-height:88vh;overflow:auto;
  padding:26px 28px 24px;border-radius:10px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 12px 40px rgba(0,0,0,.28);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:14px;line-height:1.5;text-align:left
}
#clf-ayuda h2{
  font-size:17px;line-height:1.25;margin:0 0 4px;font-weight:700;
  color:var(--txt,var(--texto,inherit));letter-spacing:0
}
#clf-ayuda .clf-sub{
  font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--accent,var(--acento,var(--gold,currentColor)));margin:0 0 14px
}
#clf-ayuda dl{display:grid;grid-template-columns:auto 1fr;gap:10px 16px;margin:0;align-items:baseline}
#clf-ayuda dt{white-space:nowrap;display:flex;gap:4px}
#clf-ayuda dd{margin:0;color:var(--txt-2,var(--texto-2,var(--dim,inherit)))}
#clf-ayuda .clf-pie{
  margin:16px 0 0;padding-top:14px;font-size:12.5px;
  border-top:1px solid var(--line-soft,var(--linea-suave,var(--line,var(--linea,rgba(127,127,127,.25)))));
  color:var(--txt-3,var(--texto-3,var(--dim,inherit)))
}
#clf-ayuda .clf-cerrar{
  position:absolute;top:10px;right:12px;font-size:20px;line-height:1;
  padding:4px 6px;opacity:.5;background:none;border:0;color:inherit;cursor:pointer
}
#clf-ayuda .clf-cerrar:hover{opacity:1}

#clf-ayuda kbd,#clf-onboard kbd{
  font-family:var(--mono,ui-monospace,Consolas,monospace);font-size:11.5px;
  padding:2px 6px;border-radius:4px;white-space:nowrap;
  border:1px solid var(--line,var(--linea,var(--line-soft,rgba(127,127,127,.45))));
  background:var(--surface-2,var(--fondo-3,var(--bg-2,var(--bg2,transparent))));
  color:var(--txt,var(--texto,inherit))
}

/* aviso de la primera visita */
#clf-onboard{
  position:fixed;left:50%;bottom:84px;transform:translateX(-50%) translateY(8px);
  z-index:900;width:min(430px,calc(100vw - 32px));
  padding:14px 16px;border-radius:9px;
  background:var(--surface,var(--fondo-2,var(--bg-2,var(--bg2,var(--bg,var(--fondo,#12161f))))));
  color:var(--txt,var(--texto,inherit));
  border:1px solid var(--line,var(--linea,var(--line-soft,var(--linea-suave,rgba(127,127,127,.35)))));
  box-shadow:0 8px 28px rgba(0,0,0,.22);
  font-family:var(--sans,system-ui,"Segoe UI",Arial,sans-serif);
  font-size:13px;line-height:1.45;
  opacity:0;transition:opacity .3s ease,transform .3s ease
}
#clf-onboard.on{opacity:1;transform:translateX(-50%) translateY(0)}
@media (prefers-reduced-motion:reduce){#clf-onboard{transition:none}}
#clf-onboard p{margin:0 0 4px}
#clf-onboard p:last-of-type{margin:0}
#clf-onboard .clf-acciones{display:flex;gap:14px;align-items:center;margin-top:12px}
#clf-onboard button{
  font:inherit;cursor:pointer;border:0;background:none;color:inherit;padding:0
}
#clf-onboard .clf-ok{
  padding:5px 12px;border-radius:5px;font-weight:600;font-size:12.5px;
  background:var(--accent,var(--acento,var(--gold,currentColor)));
  color:var(--onaccent,var(--bg,var(--fondo,#fff)))
}
#clf-onboard .clf-todo{font-size:12.5px;opacity:.7;text-decoration:underline}
#clf-onboard .clf-todo:hover{opacity:1}

/* fuera del sitio autorizado no se pinta nada del cromo añadido */
.cl-lock #clf-ayuda-btn,.cl-lock #clf-ayuda,.cl-lock #clf-onboard,.cl-lock #clf-hint{display:none!important}
@media print{#clf-ayuda-btn,#clf-ayuda,#clf-onboard{display:none!important}}

/* ════════════════════════════════════════════════════════════
   VERTICAL · módulo compartido

   Los motores de lienzo fijo escalan un rectángulo de 1280×720 o
   1600×900 al hueco disponible. En un teléfono de pie ese hueco es
   el ancho, y la escala se desploma: medido en IEL con una ventana
   de 375×812, el lienzo quedaba en 375×211 y el cuerpo del texto en
   4.2 px. Ilegible, y encogerlo mejor no existe.

   Así que en vertical se abandona el lienzo. Las láminas dejan de
   estar superpuestas, pasan al flujo normal, se recomponen en una
   columna y la página se desplaza. La tipografía recupera su tamaño
   de diseño —14.5 px de cuerpo, que en un teléfono está bien— porque
   ya no la encoge ninguna transformación.

   El colapso de las rejillas no está aquí: lo genera el inyector
   leyendo la hoja de cada presentación, porque cada una nombra sus
   columnas a su manera.
   ════════════════════════════════════════════════════════════ */
@media (max-aspect-ratio:1/1){

  html,body{overflow-x:hidden;overflow-y:auto;height:auto}

  /* El escenario deja de ser una ventana fija y el lienzo, un lienzo. */
  /* Los cuatro primeros nombres son los de las presentaciones que ya
     existian; #escenario y #lienzo son los que usa el esqueleto del
     estandar, y sin ellos un mazo nuevo escrito segun el documento se
     queda con el lienzo escalado: la tipografia cambia de tamano pero la
     transformacion sigue puesta, asi que en el telefono se ve igual de
     pequena y parece que el modulo funciona cuando no ha entrado. */
  .stage,#viewport,#escenario{position:static;display:block;width:100%}
  .deck,#stage,#lienzo{
    position:static;left:auto;top:auto;margin:0;
    width:100%;max-width:100%;height:auto;min-height:100dvh;
    /* «!important» porque la funcion de ajuste sigue escribiendo la
       transformacion en el atributo de estilo en cada redimension. */
    transform:none!important;
    border:0;box-shadow:none;border-radius:0;
  }

  /* Las láminas dejan de estar una encima de otra. */
  .slide{
    position:static;inset:auto;
    opacity:1;visibility:visible;transform:none;
    display:none;width:100%;max-width:100%;
    padding:22px 18px 88px;
    overflow-wrap:anywhere;
  }
  .slide.on,.slide.is-active{display:flex}

  /* Sin esto, un hijo flex no baja de su contenido y desborda. */
  .slide *{min-width:0}
  .slide > *{max-width:100%}
  .slide [class*="badge"],.slide .tag{flex-wrap:wrap;max-width:100%}
  .body{justify-content:flex-start}

  /* Algunas rejillas se declaran en el atributo de estilo, donde la
     extraccion de selectores del inyector no las ve. Se alcanzan por
     atributo: «!important» gana a un estilo en linea normal. */
  .slide [style*="grid-template-columns"]{grid-template-columns:1fr!important}

  /* Un titular de 60 px es de proyector, no de telefono: en una columna de
     320 px no cabe ni la primera palabra y se parte a lo bruto —el
     navegador no guiona en espanol, se probo—. Se le pone un techo
     relativo al marco, que es lo que hace DPGA al crecer su unidad. */
  .slide h1{font-size:min(34px,10vw)}
  .slide h2{font-size:min(26px,7.5vw)}
  .slide h3{font-size:min(20px,6vw)}

  /* Y el cuerpo tambien, por la razon contraria. Como aqui se abandona el
     lienzo, las medidas de diseno se usan tal cual, asi que el tamano del
     lienzo decidia a que tamano se lee en un telefono: medido, las de 1280
     quedaban en 13 px —pequeno— y las de 1600 en 22 —grande y con lineas de
     26 caracteres—. Con esta horquilla las tres familias caen en 17-18 px y
     30-36 caracteres, y el lienzo deja de tener consecuencia. */
  .slide p,.slide li,.slide td,.slide th{font-size:clamp(15px,4.8vw,18px)}

  /* Una tabla de ocho o diez columnas no se recompone en una: se
     comprime hasta partir las palabras letra a letra. Se le deja su
     ancho natural y su propio desplazamiento lateral. */
  .slide table{
    display:block;max-width:100%;
    overflow-x:auto;overflow-y:hidden;overflow-wrap:normal;
  }
  .slide table td,.slide table th{white-space:nowrap;overflow-wrap:normal}

  /* El aviso de «esto es de pantalla horizontal» deja de ser cierto
     en cuanto la lámina se recompone. */
  .tiny{display:none!important}
}

/* El cromo absoluto de la lamina, al flujo. */
@media (max-aspect-ratio:1/1){
.slide > .deck,
.slide > .deck::before,
.slide > .deck::after,
.slide > .slide,
.slide > .idx-close,
.slide > .road::before,
.slide > .ring > .lbl,
.slide > .rpanel li::before{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide .hud-title,
.slide .act,
.slide .ring > .lbl,
.slide .cprog{max-width:100%;overflow-x:auto}
}

/* Rejillas de esta presentacion, a una columna. */
@media (max-aspect-ratio:1/1){
.slide .idx-list,
.slide .c2,
.slide .c3,
.slide .c4,
.slide .c-55,
.slide .c-46,
.slide /* ── Ruta ── */ .road,
.slide .objs div,
.slide .agenda .row,
.slide .egrid,
.slide /* ── Autodiagnóstico ── */ .diag,
.slide .dlist,
.slide /* ── Dilemas ── */ .dil{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */