/*!
 * UX/UI · Arquitectura de información para proyectos digitales
 * (c) 2026 L.D.G. Luis E. Maldonado Gil - CodeLibri
 * aula.codelibri.com.mx - Todos los derechos reservados.
 * ref CL-UXUI-ARQ-2026-C24C
 */
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:block;src:url(../media/barlow-400-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:400;font-style:normal;font-display:block;src:url(../media/barlow-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:block;src:url(../media/barlow-500-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:500;font-style:normal;font-display:block;src:url(../media/barlow-500-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:block;src:url(../media/barlow-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:600;font-style:normal;font-display:block;src:url(../media/barlow-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:block;src:url(../media/barlow-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow";font-weight:700;font-style:normal;font-display:block;src:url(../media/barlow-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:block;src:url(../media/barlow-semicond-600-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-weight:600;font-style:normal;font-display:block;src:url(../media/barlow-semicond-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:block;src:url(../media/barlow-semicond-700-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-weight:700;font-style:normal;font-display:block;src:url(../media/barlow-semicond-700-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:"Barlow Semi Condensed";font-weight:800;font-style:normal;font-display:block;src:url(../media/barlow-semicond-800-latin-ext.woff2) format("woff2");unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:"Barlow Semi Condensed";font-weight:800;font-style:normal;font-display:block;src:url(../media/barlow-semicond-800-latin.woff2) format("woff2");unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ══════════════════════════════════════════════════════════
   ARQUITECTURA DE INFORMACIÓN · SEÑALÉTICA
   Paredes claras con señales negras y amarillas, como las de un aeropuerto
   o el metro. El amarillo marca lo que se hace; el negro, lo que se lee; el
   azul informa, el verde confirma y el rojo avisa.

   Los nombres --surface, --txt, --line, --accent y --onaccent se conservan
   porque ayuda.css los busca para pintarse.
   ══════════════════════════════════════════════════════════ */
:root{
  --pared:#e7e9ec; --pared-2:#f3f4f6; --linea:#c9cdd3;
  --senal:#16181b; --senal-2:#24272c; --senal-3:#30343a; --senal-txt:#ffffff; --senal-txt-2:#b9bec6;
  --amarillo:#ffc20e; --sobre-amarillo:#16181b;
  --azul:#1d6fb8; --verde:#0e8a4f; --rojo:#c8102e;
  --txt:#16181b; --txt-2:#454a52; --txt-3:#6b717a;
  --tarjeta:#ffffff;
  --surface:#ffffff; --line:#c9cdd3; --accent:#ffc20e; --onaccent:#16181b;
  --sombra:0 10px 26px rgba(10,12,16,.12);
  --sombra-senal:0 16px 36px rgba(10,12,16,.24);
  --sans:"Barlow",system-ui,"Segoe UI",Arial,sans-serif;
  --cond:"Barlow Semi Condensed","Barlow",system-ui,"Segoe UI",Arial,sans-serif;
  --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
html[data-theme="dark"]{
  --pared:#0f1113; --pared-2:#16191c; --linea:#30353b;
  --senal:#1f2328; --senal-2:#2b3036; --senal-3:#383d44; --senal-txt:#ffffff; --senal-txt-2:#aab0b8;
  --txt:#eef0f2; --txt-2:#b4bac2; --txt-3:#868d96;
  --tarjeta:#1a1d21;
  --surface:#1a1d21; --line:#30353b;
  --sombra:0 10px 26px rgba(0,0,0,.4);
  --sombra-senal:0 16px 36px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{background:var(--pared);color:var(--txt);font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,select,textarea{font-family:inherit}
:focus-visible{outline:3px solid var(--azul);outline-offset:2px}
[hidden]{display:none!important}
.papel{display:none}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ══════════════ ESCENARIO ══════════════ */
.stage{position:fixed;inset:0;z-index:1;background:var(--pared)}
.deck{
  width:1280px;height:720px;transform-origin:center center;overflow:hidden;
  position:absolute;left:50%;top:50%;margin:-360px 0 0 -640px;
}
.slide{
  position:absolute;inset:0;padding:38px 60px 64px;display:flex;flex-direction:column;
  background:var(--pared);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility .25s;
}
.slide.on{opacity:1;visibility:visible}
.body{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:center}

/* ══════════════ EL HUD, COMO UNA SEÑAL DE ANDÉN ══════════════ */
.chrome{position:fixed;z-index:20}
.hud{left:0;right:0;bottom:0;height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;background:var(--senal);color:var(--senal-txt)}
.hud-btn{width:34px;height:34px;border-radius:5px;display:grid;place-items:center;background:var(--senal-2);color:var(--senal-txt);font-size:15px;transition:.15s}
.hud-btn:hover{background:var(--amarillo);color:var(--sobre-amarillo)}
.hud-btn[disabled]{opacity:.35;cursor:default;background:var(--senal-2);color:var(--senal-txt)}
.counter{font:800 17px var(--cond);color:var(--sobre-amarillo);background:var(--amarillo);border-radius:4px;padding:3px 10px;letter-spacing:.04em;min-width:72px;text-align:center}
.hud-title{flex:1;min-width:0;text-align:center;font:600 13px var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--senal-txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.railbar{position:fixed;left:0;right:0;bottom:0;height:4px;z-index:21}
.railbar i{display:block;height:100%;width:0;background:var(--amarillo);transition:width .3s}
.index{position:fixed;inset:0;z-index:40;background:var(--pared);padding:30px 44px;overflow-y:auto;display:none}
.index.on{display:block}
.index h2{font:800 30px var(--cond);margin-bottom:2px}
.index .sub{font-size:14px;color:var(--txt-3);margin-bottom:14px}
.idx-keys{display:flex;gap:16px;flex-wrap:wrap;margin-bottom:18px;font-size:12.5px;color:var(--txt-3)}
.idx-keys kbd{display:inline-block;padding:1px 7px;border-radius:4px;background:var(--senal);color:var(--amarillo);font:700 11px var(--mono);margin-right:5px}
.idx-group{margin-bottom:16px}
.idx-group h3{font:700 13px var(--cond);letter-spacing:.12em;text-transform:uppercase;color:var(--txt);margin-bottom:8px;display:flex;align-items:center;gap:8px}
.idx-group h3::before{content:"";width:14px;height:14px;border-radius:3px;background:var(--amarillo)}
.idx-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:6px}
.idx-list button{text-align:left;padding:9px 12px;border-radius:6px;background:var(--tarjeta);border:1px solid var(--linea);color:var(--txt-2);font-size:14px;display:flex;gap:10px;transition:.14s}
.idx-list button:hover{border-color:var(--txt)}
.idx-list button b{font:800 13px var(--cond);color:var(--txt-3);flex:0 0 22px}
.idx-list button.now{background:var(--senal);color:var(--senal-txt);border-color:var(--senal)}
.idx-list button.now b{color:var(--amarillo)}
.idx-close{position:absolute;top:14px;right:22px;font-size:26px;color:var(--txt-3);padding:4px 12px}
.tiny{display:none;position:fixed;left:0;right:0;bottom:58px;z-index:22;text-align:center;font-size:12px;color:var(--txt-3)}
@media (max-width:640px) and (orientation:portrait){.tiny{display:block}}

/* ══════════════ TIPOGRAFÍA ══════════════ */
.slide h1,.slide h2{font-family:var(--cond);font-weight:800;letter-spacing:-.01em;line-height:1.02}
.slide h2{font-size:48px;margin:14px 0 6px}
.slide h3{font:700 19px/1.2 var(--cond);margin-bottom:4px}
.slide p{font-size:17px;color:var(--txt-2);max-width:66ch}
.slide p + p{margin-top:10px}
.slide .lead{font-size:21px;color:var(--txt);line-height:1.38}
.slide .small{font-size:13.5px;color:var(--txt-3)}
strong{color:var(--txt);font-weight:700}
.en{display:block;font-size:13px;color:var(--txt-3);font-style:italic;margin-top:8px;line-height:1.4}
.fuente{display:block;font:600 13px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin-top:8px}
.mono{font-family:var(--mono)}

/* ══════════════ LAS PLACAS ══════════════
   El rótulo de cada lámina es una señal: negra con pictograma amarillo en
   los conceptos, amarilla con flecha en los pasos del cuaderno y azul en
   los laboratorios que no son del cuaderno. */
.cabeza{display:flex;align-items:center;justify-content:space-between;gap:16px}
.placa{display:inline-flex;align-items:stretch;height:36px;border-radius:5px;overflow:hidden;box-shadow:0 2px 0 rgba(0,0,0,.18);flex:0 0 auto}
.placa .pic{width:36px;display:grid;place-items:center;background:var(--amarillo)}
.placa .pic svg{width:21px;height:21px;fill:none;stroke:var(--sobre-amarillo);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.placa > span:last-child{display:flex;align-items:center;padding:0 14px;background:var(--senal);color:var(--senal-txt);font:700 14px var(--cond);letter-spacing:.07em;text-transform:uppercase}
.placa.paso .pic{background:var(--senal)}
.placa.paso .pic svg{stroke:var(--amarillo)}
.placa.paso > span:last-child{background:var(--amarillo);color:var(--sobre-amarillo)}
.placa.lab > span:last-child{background:var(--azul);color:#ffffff}
.pictos{display:none}

/* ══════════════ SEÑALES Y CARTELES ══════════════ */
.senal{background:var(--senal);color:var(--senal-txt);border-radius:8px;padding:18px 22px;box-shadow:var(--sombra-senal)}
.senal p{color:var(--senal-txt-2)}
.senal strong{color:var(--senal-txt)}
.senal .rot{display:block;font:700 13px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--amarillo);margin-bottom:6px}
.cartel{background:var(--tarjeta);border:1px solid var(--linea);border-radius:8px;overflow:hidden;box-shadow:var(--sombra)}
.cartel > .cab{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--senal);color:var(--senal-txt);font:700 14px var(--cond);letter-spacing:.08em;text-transform:uppercase;padding:9px 16px}
.cartel > .cab em{font-style:normal;color:var(--amarillo)}
.cartel > .cab > span:first-child{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.libreta > .cab{background:var(--amarillo);color:var(--sobre-amarillo)}
.libreta > .cab em{background:var(--senal);color:var(--amarillo);border-radius:4px;padding:1px 8px}
.cartel .dentro{padding:14px 16px}
.cartel .pie-c{padding:9px 16px;font-size:13.5px;color:var(--txt-3);display:flex;justify-content:space-between;gap:10px;background:var(--pared-2);border-top:1px solid var(--linea)}
.cartel table{width:100%;border-collapse:collapse;font-size:14px}
.cartel th{text-align:left;font:700 12px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);padding:9px 12px;border-bottom:2px solid var(--txt)}
.cartel td{padding:9px 12px;border-bottom:1px solid var(--linea);color:var(--txt-2)}
.cartel td i{display:block;height:9px;border-radius:5px;background:var(--linea)}
.nota{display:flex;gap:12px;align-items:flex-start;font-size:15.5px;color:var(--txt-2);margin-top:16px;max-width:62ch}
.nota > b{flex:0 0 auto;width:26px;height:26px;border-radius:50%;background:var(--azul);color:#fff;display:grid;place-items:center;font:700 15px var(--cond)}
.cols{display:grid;gap:34px;align-items:center}
.c2{grid-template-columns:1fr 1fr}
.c-l{grid-template-columns:400px 1fr}
.c-ll{grid-template-columns:340px 1fr}
.c3{grid-template-columns:repeat(3,1fr)}
.c4{grid-template-columns:repeat(4,1fr)}
.fila-senales{display:grid;gap:12px;margin-top:22px}
.fila-senales .senal{padding:14px 16px}
.fila-senales .senal p{font-size:14.5px}
.reglas{list-style:none;display:flex;flex-direction:column;gap:10px}
.reglas li{display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;font-size:16.5px;color:var(--txt)}
.reglas li > b{width:30px;height:30px;border-radius:5px;background:var(--senal);color:var(--amarillo);display:grid;place-items:center;font:800 16px var(--cond)}
.reglas li > span{padding-top:3px}
.dec{display:inline-block;font:700 12px var(--cond);letter-spacing:.04em;text-transform:uppercase;padding:2px 8px;border-radius:4px}
.dec.si{background:var(--verde);color:#fff}
.dec.act{background:var(--amarillo);color:var(--sobre-amarillo)}
.dec.no{background:var(--rojo);color:#fff}

/* ══════════════ PORTADA ══════════════ */
.port{position:relative;flex:1}
.p-tablero{position:absolute;left:0;top:92px;width:690px;background:var(--senal);border-radius:8px;overflow:hidden;box-shadow:var(--sombra-senal)}
.p-tablero .sup{display:flex;gap:18px;align-items:center;padding:30px 34px 26px}
.p-tablero .ico-g{width:62px;height:62px;border-radius:6px;background:var(--amarillo);display:grid;place-items:center;flex:0 0 auto}
.p-tablero .ico-g svg{width:36px;height:36px;fill:none;stroke:var(--sobre-amarillo);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.slide .p-tablero h1{color:#fff;font-size:66px}
.p-tablero .banda{background:var(--amarillo);color:var(--sobre-amarillo);font:700 30px var(--cond);padding:12px 34px}
.slide .p-tablero .inf{padding:20px 34px 24px;color:var(--senal-txt-2);font-size:17px;max-width:none}
.p-autor{position:absolute;left:0;top:470px;font:600 14px var(--cond);color:var(--txt-3);letter-spacing:.1em;text-transform:uppercase}
.directorio{position:absolute;right:0;top:92px;width:380px;border-radius:8px;overflow:hidden;background:var(--senal);box-shadow:var(--sombra-senal)}
.directorio button{display:flex;align-items:center;gap:14px;width:100%;padding:13px 20px;border-bottom:1px solid var(--senal-3);color:#fff;font:700 23px var(--cond);text-align:left;transition:background .15s}
.directorio button:last-child{border-bottom:0}
.directorio button:hover,.directorio button:focus-visible{background:var(--senal-2)}
.directorio svg{width:26px;height:26px;flex:0 0 auto;fill:none;stroke:var(--amarillo);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.directorio em{font-style:normal;margin-left:auto;font:700 15px var(--cond);color:var(--sobre-amarillo);background:var(--amarillo);border-radius:4px;padding:2px 8px}

/* ══════════════ DEFINICIÓN ══════════════ */
.cita{font-size:20px;line-height:1.42;color:var(--txt)}
.senal .cita{color:var(--senal-txt)}
.senal .en{color:var(--senal-txt-2)}
.senal .fuente{color:var(--senal-txt-2)}
.sistemas4 .senal{display:grid;grid-template-columns:34px 1fr;gap:4px 12px;align-items:start}
.sistemas4 .senal svg{grid-row:span 2;width:30px;height:30px;fill:none;stroke:var(--amarillo);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.sistemas4 h3{color:var(--senal-txt);margin:0}

/* ══════════════ USUARIO, CONTENIDO Y CONTEXTO ══════════════ */
.venn{width:100%;max-width:400px;height:auto;display:block;margin:0 auto}
.venn circle{stroke-width:3}
.venn .v1{fill:rgba(255,194,14,.28);stroke:#d9a300}
.venn .v2{fill:rgba(29,111,184,.18);stroke:var(--azul)}
.venn .v3{fill:rgba(14,138,79,.16);stroke:var(--verde)}
.venn text{font:800 19px var(--cond);fill:var(--txt)}
.venn .vc{font-size:14px;font-weight:700}
.tres{display:flex;flex-direction:column;gap:10px}
.tres .senal{padding:13px 18px}
.tres .senal p{font-size:15px}

/* ══════════════ EL CUADERNO ══════════════ */
.modo{display:inline-flex;border:2px solid var(--senal);border-radius:6px;overflow:hidden;flex:0 0 auto}
.modo button{font:700 14px var(--cond);letter-spacing:.05em;text-transform:uppercase;padding:7px 13px;color:var(--txt)}
.modo button.on{background:var(--senal);color:var(--amarillo)}
html[data-theme="dark"] .modo{border-color:var(--senal-3)}
html[data-theme="dark"] .cartel{--senal:#2b3036;--senal-2:#383d44;--senal-3:#474d55}
.pasos{list-style:none;display:flex;flex-direction:column;gap:12px}
.pasos li{display:grid;grid-template-columns:32px 1fr;gap:12px;align-items:start;font-size:16px;color:var(--txt);line-height:1.38}
.pasos li > b{width:32px;height:32px;border-radius:5px;background:var(--senal);color:var(--amarillo);display:grid;place-items:center;font:800 17px var(--cond)}
.pasos li > span{padding-top:4px}
.aviso-ej{margin-top:14px;padding:10px 12px;border-radius:6px;background:var(--tarjeta);border:1px dashed var(--linea);font-size:14px;color:var(--txt-2)}
.btn{font:700 14px var(--cond);letter-spacing:.05em;text-transform:uppercase;padding:8px 14px;border-radius:6px;background:var(--senal);color:var(--amarillo);transition:.15s}
.btn:hover{background:var(--senal-3)}
.btn.sec{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 2px var(--linea)}
.btn.sec:hover{box-shadow:inset 0 0 0 2px var(--txt)}
.btn[disabled]{opacity:.4;cursor:default}
html[data-theme="dark"] .btn:not(.sec){background:var(--amarillo);color:var(--sobre-amarillo)}
.botones{display:flex;gap:8px;flex-wrap:wrap}
.campo{width:100%;font:500 15.5px var(--sans);padding:8px 11px;border:2px solid var(--linea);border-radius:6px;background:var(--pared-2);color:var(--txt)}
.campo:focus{outline:none;border-color:var(--amarillo)}
.campo[readonly],.campo:disabled{background:transparent;border-style:dashed;color:var(--txt-2)}
textarea.campo{resize:none;line-height:1.4}
.etq{display:block;font:700 12.5px var(--cond);letter-spacing:.08em;text-transform:uppercase;color:var(--txt-3);margin:0 0 4px}
.chip{display:inline-flex;align-items:center;gap:4px;font:700 11.5px var(--cond);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;white-space:nowrap}
.chip.ok{background:var(--verde);color:#fff}
.chip.aviso{background:var(--amarillo);color:var(--sobre-amarillo)}
.chip.mal{background:var(--rojo);color:#fff}
.chip.info{background:var(--azul);color:#fff}
.salida{font-size:15.5px;color:var(--txt-2);border-left:4px solid var(--amarillo);padding:4px 0 4px 12px;min-height:30px}
.salida.bien{border-left-color:var(--verde)}
.salida.mal{border-left-color:var(--rojo)}
.cuenta-g{font:800 40px/1 var(--cond);color:var(--txt)}
.cuenta-g small{font:600 15px var(--sans);color:var(--txt-3);margin-left:6px}
.vacio{padding:18px 6px;font-size:15px;color:var(--txt-3);text-align:center}

/* encuéntralo */
.en-lista{display:flex;flex-direction:column;gap:3px;overflow-y:auto;min-height:0}
.nv-app .pant{min-height:0;overflow:hidden}
.en-item{text-align:left;padding:4px 9px;border-radius:5px;background:var(--senal-2);color:var(--senal-txt);font-size:12.5px;line-height:1.25}
.en-item:hover{background:var(--senal-3)}
.en-busca{padding:8px 12px;border-radius:16px;background:#ffffff;color:#6b717a;font-size:13px}
.en-tiles{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.en-tile{text-align:left;padding:16px 14px;border-radius:6px;background:var(--amarillo);color:var(--sobre-amarillo);font:800 20px var(--cond)}
.en-tile:hover{filter:brightness(1.06)}
.en-seg{display:flex;gap:4px}
.en-seg span{flex:1;text-align:center;font-size:11.5px;padding:5px 4px;border-radius:5px;background:var(--senal-2);color:var(--senal-txt-2)}
.en-seg span.on{background:var(--amarillo);color:var(--sobre-amarillo);font-weight:700}
.en-hora{padding:10px 12px;border-radius:6px;background:var(--senal-2);color:var(--senal-txt)}
.en-hora small{display:block;font-size:12px;color:var(--senal-txt-2)}
.en-hora b{font:800 34px/1.05 var(--cond);color:var(--amarillo)}
.en-hora.sec b{font-size:22px;color:var(--senal-txt)}
.nv-app .en-pdf{font-size:12px;color:var(--senal-txt-2);line-height:1.35;margin:0}
.en-toast{position:absolute;left:14px;right:14px;bottom:20px;padding:8px 10px;border-radius:6px;background:var(--rojo);color:#ffffff;font-size:12.5px;line-height:1.3;opacity:0;transform:translateY(6px);transition:.2s;pointer-events:none}
.en-toast.on{opacity:1;transform:none}
#enAtras{cursor:pointer}

/* paso 1 · la ficha */
.ficha-f .ancho{grid-column:span 2}
.ficha-f{display:grid;grid-template-columns:1fr 1fr;gap:12px 16px}
.tipo-b{display:flex;gap:6px}
.tipo-b button{flex:1;font:700 14px var(--cond);letter-spacing:.04em;text-transform:uppercase;padding:8px 6px;border-radius:6px;box-shadow:inset 0 0 0 2px var(--linea);color:var(--txt)}
.tipo-b button.on{background:var(--senal);color:var(--amarillo);box-shadow:none}
.tipo-b button:disabled{cursor:default}

/* paso 2 · el inventario */
.agrega{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--linea)}
.inv-lista{display:grid;grid-template-columns:1fr 1fr;gap:0 18px;padding:6px 16px 10px;max-height:300px;overflow-y:auto}
.inv-lista > div{display:flex;align-items:center;gap:10px;padding:7px 2px;border-bottom:1px solid var(--linea);font-size:15px;color:var(--txt)}
.inv-lista > div > span{font:700 13px var(--cond);color:var(--txt-3);width:22px}
.inv-lista > div > button{margin-left:auto;color:var(--txt-3);font-size:15px;padding:0 4px}
.inv-lista > div > button:hover{color:var(--rojo)}
.inv-lista > .vacio{grid-column:1 / -1;border:0;justify-content:center}

/* paso 3 · card sorting */
.cs-pend{display:flex;flex-wrap:wrap;gap:6px;min-height:46px;padding:10px;border-radius:8px;border:2px dashed var(--linea);background:var(--pared-2)}
.cs{display:grid;grid-template-columns:320px 1fr;gap:28px;align-items:start}
.cs-pend:empty::before{content:"Todas las tarjetas están en un grupo.";font-size:14px;color:var(--txt-3);padding:4px}
.cs-carta{padding:6px 11px;border-radius:5px;background:var(--tarjeta);border:1px solid var(--linea);font:500 14px var(--sans);color:var(--txt);cursor:grab;user-select:none;touch-action:none;box-shadow:0 2px 0 rgba(0,0,0,.08)}
.cs-carta.sel{outline:3px solid var(--amarillo);outline-offset:1px}
.cs-carta.coincide{border-color:var(--verde);box-shadow:inset 4px 0 0 var(--verde)}
.cs-carta.fantasma{position:fixed;z-index:60;pointer-events:none;box-shadow:0 10px 24px rgba(0,0,0,.25);cursor:grabbing}
.cs-grupos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:12px}
.cs-grupo{min-height:150px;border-radius:8px;background:var(--tarjeta);border:2px solid var(--linea);padding:8px;display:flex;flex-direction:column;gap:5px;transition:.12s}
.cs-grupo.sobre,.cs-grupo.listo{border-color:var(--amarillo);background:var(--pared-2)}
.cs-grupo input{width:100%;border:0;border-bottom:2px solid var(--linea);background:transparent;color:var(--txt);font:700 15px var(--cond);letter-spacing:.02em;padding:3px 2px 5px;margin-bottom:4px}
.cs-grupo input:focus{outline:none;border-bottom-color:var(--amarillo)}
.cs-cab{display:flex;gap:6px;align-items:center}
.cs-cab input{flex:1;min-width:0}
.cs-cab .quitar{color:var(--txt-3);font-size:14px;padding:0 3px}
.cs-cab .quitar:hover{color:var(--rojo)}
.cs-pend .vacio{padding:4px}
.cs-ref{margin-top:12px}

/* paso 4 · los nombres */
.nm-col{display:flex;flex-direction:column;gap:7px;min-width:0}
.nm{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;align-items:start;max-height:404px;overflow-y:auto;padding:12px 16px}
.nm h4{font:700 12.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin:2px 0}
.nm-fila{display:flex;flex-direction:column;gap:3px;min-width:0}
.nm-fila .chips{display:flex;gap:4px;flex-wrap:wrap}
.nm-fila .campo{padding:5px 9px;font-size:14.5px}
.nm-fila.pag{padding-left:10px;border-left:3px solid var(--linea);margin-left:4px}
.nm-fila.sec .campo{font:700 16px var(--cond);letter-spacing:.02em}
.nm-fila .sug{font:700 11.5px var(--cond);letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;border-radius:4px;background:var(--senal);color:var(--amarillo)}

/* paso 5 · el mapa de sitio */
.ms-arbol{display:flex;gap:10px;align-items:flex-start;position:relative;padding:44px 4px 4px}
.ms-raiz{position:absolute;left:50%;top:0;transform:translateX(-50%);padding:5px 14px;border-radius:5px;background:var(--amarillo);color:var(--sobre-amarillo);font:800 15px var(--cond);white-space:nowrap}
.ms-arbol::before{content:"";position:absolute;left:12%;right:12%;top:34px;height:2px;background:var(--txt-3)}
.ms-sec{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px;position:relative}
.ms-sec::before{content:"";position:absolute;left:50%;top:-10px;width:2px;height:10px;background:var(--txt-3)}
.ms-sec > b{display:block;padding:7px 9px;border-radius:5px;background:var(--senal);color:var(--senal-txt);font:700 15px var(--cond);overflow:hidden;text-overflow:ellipsis}
.ms-sec > b.sin{color:var(--amarillo)}
.ms-arbol.solo::before{display:none}
.ms-hoja{font-size:13.5px;color:var(--txt);padding:4px 8px;border-left:3px solid var(--linea);margin-left:8px;overflow:hidden;text-overflow:ellipsis}
.ms-datos{display:flex;gap:26px;margin:4px 0 14px}
.ms-avisos{list-style:none;display:flex;flex-direction:column;gap:8px}
.ms-avisos li{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;font-size:15px;color:var(--txt-2)}

/* paso 6 · la navegación */
.nv-web{border-radius:8px;overflow:hidden;background:var(--tarjeta);border:1px solid var(--linea);box-shadow:var(--sombra)}
.nav-mocks{display:grid;grid-template-columns:1fr 236px;gap:20px;align-items:start}
.nv-top{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--senal);color:#fff}
.nv-top b{font:800 16px var(--cond);white-space:nowrap}
.nv-glob{display:flex;gap:4px;flex-wrap:wrap}
.nv-glob span{font:600 13.5px var(--cond);padding:4px 9px;border-radius:4px;color:var(--senal-txt-2);white-space:nowrap}
.nv-glob span.on{background:var(--amarillo);color:var(--sobre-amarillo)}
.nv-util{margin-left:auto;font-size:12px;color:var(--senal-txt-2);white-space:nowrap}
.nv-migas{font-size:12.5px;color:var(--txt-3);padding:9px 14px 0}
.nv-cuerpo{display:grid;grid-template-columns:160px 1fr;gap:14px;padding:10px 14px 14px;min-height:220px}
.nv-local{display:flex;flex-direction:column;gap:2px}
.nv-local span{font-size:13px;padding:5px 8px;border-radius:4px;color:var(--txt-2)}
.nv-local span.on{background:var(--senal);color:var(--amarillo);font-weight:600}
.nv-cont h4{font:700 17px var(--cond);margin-bottom:8px}
.nv-cont i{display:block;height:9px;border-radius:5px;background:var(--linea);margin-bottom:7px}
.nv-cont i.c{width:60%}
.nv-app{width:236px;height:420px;border-radius:26px;background:var(--senal);padding:12px 10px 8px;display:flex;flex-direction:column;box-shadow:var(--sombra-senal)}
.nv-app .tit{color:#fff;font:700 15px var(--cond);padding:4px 8px 10px;border-bottom:1px solid var(--senal-3);display:flex;align-items:center;gap:8px}
.nv-app .tit span{color:var(--amarillo);font-size:20px;line-height:1}
.nv-app .pant{flex:1;padding:10px 6px;display:flex;flex-direction:column;gap:6px}
.nv-app .pant .it{padding:8px 10px;border-radius:6px;background:var(--senal-2);color:var(--senal-txt);font-size:13px}
.nv-tabs{display:flex;gap:2px;border-top:1px solid var(--senal-3);padding-top:7px}
.nv-tabs span{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;font-size:10px;color:var(--senal-txt-2)}
.nv-tabs span::before{content:"";width:16px;height:16px;border-radius:4px;border:2px solid currentColor}
.nv-tabs span.on{color:var(--amarillo);font-weight:600}
.nv-tabs em{font-style:normal;display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nv-secs{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.nv-secs button{font:700 13.5px var(--cond);padding:6px 10px;border-radius:5px;box-shadow:inset 0 0 0 2px var(--linea);color:var(--txt)}
.nv-secs button.on{background:var(--senal);color:var(--amarillo);box-shadow:none}

/* paso 7 · el vocabulario */
.voc-fila{display:flex;flex-direction:column;gap:3px;min-width:0}
.voc{display:grid;grid-template-columns:1fr 1fr;gap:9px 16px;align-items:start;max-height:404px;overflow-y:auto;padding:12px 16px}
.voc > .vacio{grid-column:1 / -1}
.voc-fila b,.voc-fila label{font:600 14px var(--sans);color:var(--txt)}
.voc-fila .campo{padding:5px 9px;font-size:14px}
.bq-res{display:flex;flex-direction:column;gap:6px;margin-top:10px;min-height:120px}
.bq-res div{padding:8px 11px;border-radius:6px;background:var(--tarjeta);border:1px solid var(--linea);font-size:15px;color:var(--txt)}
.bq-res small{display:block;font-size:12.5px;color:var(--txt-3);margin-top:1px}
.bq-cero{color:var(--rojo)!important;border-color:var(--rojo)!important}

/* facetas */
.fa-filtros{padding:14px 16px;border-right:1px solid var(--linea)}
.fa{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:300px}
.fa-g{margin-bottom:12px}
.fa-g h4{font:700 12.5px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px}
.fa-g label{display:flex;align-items:center;gap:8px;font-size:15px;color:var(--txt);padding:3px 0;cursor:pointer}
.fa-g label input{accent-color:var(--senal);width:16px;height:16px;margin:0}
.fa-g label .c{margin-left:auto;font:700 13px var(--cond);color:var(--txt-3)}
.fa-g label.cero{opacity:.35;cursor:default}
.fa-res{padding:14px 16px;display:flex;flex-direction:column;gap:6px}
.fa-ruta{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:6px;background:var(--pared-2);font-size:14.5px}
.fa-ruta b{font:800 14px var(--cond);min-width:30px;padding:1px 6px;border-radius:4px;background:var(--senal);color:var(--amarillo);text-align:center}
.fa-ruta span{margin-left:auto;font-size:13px;color:var(--txt-3)}
.fa-cero{padding:12px;border-radius:6px;border:2px solid var(--rojo);color:var(--rojo);font-size:15px;font-weight:600}
.fa-neutro{display:grid;grid-template-columns:200px 1fr;gap:18px;padding:16px}
.fn-g{margin-bottom:12px}
.fn-g b{display:block;font:700 12px var(--cond);letter-spacing:.1em;text-transform:uppercase;color:var(--txt-3);margin-bottom:5px}
.fn-g span{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--txt-2);padding:4px 8px;border-radius:5px}
.fn-g span::before{content:"";width:12px;height:12px;border-radius:3px;border:2px solid var(--linea);flex:0 0 auto}
.fn-g span.si{background:var(--pared-2);color:var(--txt);font-weight:600}
.fn-g span.si::before{background:var(--senal);border-color:var(--senal)}
.fn-g span.cero{opacity:.35}
.fn-g em{font-style:normal;margin-left:auto;font:700 13px var(--cond);color:var(--txt-3)}
.fn-res small{display:block;font:700 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3);margin-bottom:12px}
.fn-rejilla{display:grid;grid-template-columns:repeat(5,34px);gap:16px 18px}
.fn-rejilla i{display:block;aspect-ratio:1;border-radius:50%;border:2px solid var(--linea)}
.fn-rejilla i.on{background:var(--amarillo);border-color:var(--senal)}

/* paso 8 · el flujo */
.fl-ed{display:flex;flex-direction:column;gap:4px;max-height:340px;overflow-y:auto;padding:12px 16px}
.fl-paso{display:grid;grid-template-columns:110px 1fr 26px;gap:8px;align-items:center}
.fl-paso .no{grid-column:2 / span 1;display:flex;gap:6px;align-items:center;font-size:13px;color:var(--txt-3)}
.fl-paso .no span{white-space:nowrap}
.fl-paso select.campo,.fl-paso input.campo{padding:4px 8px;font-size:14px}
.fl-paso > button{color:var(--txt-3);font-size:15px}
.fl-paso > button:hover{color:var(--rojo)}
.fl-vista{display:flex;flex-direction:column;align-items:flex-start;gap:0;padding:14px 18px;max-height:440px;overflow-y:auto}
.fl-n{display:flex;align-items:center;gap:12px}
.fl-n .caja{min-width:180px;max-width:260px;padding:7px 14px;text-align:center;font:600 14px var(--sans);color:var(--senal-txt);background:var(--senal);border-radius:5px}
.fl-n.ini .caja,.fl-n.fin .caja{border-radius:20px;background:var(--amarillo);color:var(--sobre-amarillo);font-weight:700}
.fl-n.dec .caja{background:var(--azul);color:#fff;clip-path:polygon(8% 0,92% 0,100% 50%,92% 100%,8% 100%,0 50%);padding:9px 22px}
.fl-n .lado{font-size:13px;color:var(--txt-2);display:flex;align-items:center;gap:6px}
.fl-n .lado::before{content:"no →";font:700 12px var(--cond);color:var(--rojo)}
.fl-n .lado span{padding:4px 9px;border-radius:5px;border:2px solid var(--rojo);background:var(--tarjeta);color:var(--txt)}
.fl-flecha{display:block;width:2px;height:14px;background:var(--txt-3);margin-left:90px;position:relative}
.fl-flecha::after{content:"";position:absolute;left:-4px;bottom:-2px;border:5px solid transparent;border-top-color:var(--txt-3)}

/* paso 9 · el wireframe */
.wf{display:flex;gap:22px;align-items:flex-start;justify-content:center}
.wf-cel{width:220px;height:420px;border-radius:24px;border:3px solid var(--txt);background:var(--tarjeta);padding:14px 12px 10px;display:flex;flex-direction:column;gap:8px}
.wf-cel .t{font:800 16px var(--cond);color:var(--txt)}
.wf-cel .b{padding:7px 10px;border-radius:16px;border:2px solid var(--txt-3);font-size:12.5px;color:var(--txt-3)}
.wf-cel .at{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.wf-cel .at span{height:58px;border-radius:6px;border:2px solid var(--txt);display:flex;align-items:flex-end;padding:5px 7px;font:700 12.5px/1.15 var(--cond);color:var(--txt)}
.wf-cel .sec{display:flex;flex-direction:column;gap:4px;margin-top:auto}
.wf-cel .sec i{display:block;height:8px;border-radius:4px;background:var(--linea)}
.wf-tabs{display:flex;border-top:2px solid var(--txt);padding-top:6px;margin-top:6px}
.wf-tabs span{flex:1;min-width:0;text-align:center;font:600 10px var(--cond);color:var(--txt-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wf-web{width:420px;border:3px solid var(--txt);border-radius:8px;background:var(--tarjeta);overflow:hidden}
.wf-web .bar{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:2px solid var(--txt);overflow:hidden}
.wf-web .bar b{font:800 15px var(--cond);white-space:nowrap}
.wf-web .bar span{font:600 12px var(--cond);color:var(--txt-2);white-space:nowrap}
.wf-web .cuerpo{padding:12px;display:flex;flex-direction:column;gap:10px}
.wf-web .b{padding:8px 12px;border-radius:18px;border:2px solid var(--txt-3);font-size:13px;color:var(--txt-3)}
.wf-web .at{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.wf-web .at span{height:62px;border-radius:6px;border:2px solid var(--txt);display:flex;align-items:flex-end;padding:5px 7px;font:700 12.5px/1.15 var(--cond)}
.wf-web .lin i{display:block;height:8px;border-radius:4px;background:var(--linea);margin-bottom:6px}
.atajos{display:flex;flex-direction:column;gap:0;max-height:310px;overflow-y:auto;margin-top:6px;padding-right:4px}
.atajos label{display:flex;align-items:center;gap:8px;font-size:14px;line-height:1.25;color:var(--txt);padding:2px 0;cursor:pointer}
.atajos input{accent-color:var(--senal);width:16px;height:16px;margin:0}
.fid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:18px}
.fid figure{display:flex;flex-direction:column;gap:10px;align-items:center}
.fid figcaption{font-size:14px;color:var(--txt-2);text-align:center;line-height:1.4}
.fid figcaption b{display:block;font:800 18px var(--cond);color:var(--txt);margin-bottom:2px}
.fid-cel{width:146px;height:262px;border-radius:20px;padding:12px 10px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr 1fr auto;gap:6px;position:relative}
.fid-cel .t,.fid-cel .b,.fid-cel .tb{grid-column:span 2}
.fid-cel > *{font-style:normal;display:flex;align-items:center;justify-content:center;font-size:10px;border-radius:5px}
.f1{background:#fbfaf4;border:2px solid #4a4a52;transform:rotate(-1.5deg)}
.f1 > *{border:2px solid #4a4a52}
.f1 .t{height:14px;width:60%;border-width:0 0 2px 0;border-radius:0}
.f1 .b{height:22px;border-radius:12px}
.f1 .tb{height:22px}
.f2{background:#ffffff;border:2px solid #9aa0aa}
.f2 > *{background:#e8eaee;color:#5b6070}
.f2 .t{background:none;justify-content:flex-start;font-weight:700;color:#3a3f4f;font-size:11px}
.f2 .b{background:#f4f5f8;border:1px solid #c9cdd8;height:24px;justify-content:flex-start;padding-left:8px}
.f2 .tb{height:22px}
.f3,.f4{background:#16181b;border:2px solid #16181b}
.f3 > *,.f4 > *{background:#2b3036;color:#ffffff}
.f3 .t,.f4 .t{background:none;justify-content:flex-start;font-weight:700;color:#ffc20e;font-size:11px}
.f3 .b,.f4 .b{background:#ffffff;color:#16181b;height:24px;justify-content:flex-start;padding-left:8px;border-radius:12px}
.f3 .x:nth-of-type(3),.f4 .x:nth-of-type(3){background:#ffc20e;color:#16181b}
.f3 .x:nth-of-type(6),.f4 .x:nth-of-type(6){background:#1d6fb8}
.f3 .tb,.f4 .tb{height:22px;background:#0f1113}
.f4 .dedo{position:absolute;right:26px;top:112px;width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.4);border:2px solid #fff;box-shadow:0 0 0 8px rgba(255,255,255,.15)}

/* paso 10 · tree testing */
.tt-pre{display:flex;flex-direction:column;gap:10px;padding:12px 16px}
.tt-tarea-ed{display:grid;grid-template-columns:24px 1fr 210px 22px;gap:8px;align-items:center}
.tt-tarea-ed > b{font:800 16px var(--cond);color:var(--txt-3)}
.tt-tarea-ed .campo{padding:6px 9px;font-size:14px}
.tt-tarea-ed > button{color:var(--txt-3)}
.tt-nav{padding:12px 16px;display:flex;flex-direction:column;gap:8px}
.tt-q{padding:10px 12px;border-radius:6px;background:var(--amarillo);color:var(--sobre-amarillo);font-size:15.5px;font-weight:600}
.tt-q small{display:block;font:700 12px var(--cond);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.tt-ruta{font:600 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--txt-3)}
.tt-op{display:flex;flex-direction:column;gap:5px;min-height:150px}
.tt-op button{text-align:left;padding:9px 12px;border-radius:6px;background:var(--senal);color:var(--senal-txt);font-size:15px;display:flex;justify-content:space-between}
.tt-op button:hover{background:var(--senal-3)}
.tt-op button em{font-style:normal;color:var(--amarillo)}
.tt-op .hoja{background:var(--senal-2)}
.tt-op .atras{background:transparent;color:var(--txt);box-shadow:inset 0 0 0 2px var(--linea)}
.tt-op .atras:hover{background:transparent;box-shadow:inset 0 0 0 2px var(--txt)}
.tt-res{display:flex;flex-direction:column;gap:5px;margin-top:10px}
.tt-res div{display:grid;grid-template-columns:70px 1fr auto;gap:8px;font-size:14px;color:var(--txt-2);padding:6px 10px;border-radius:6px;background:var(--tarjeta);border:1px solid var(--linea)}
.tt-res div b{color:var(--txt)}
.pest{display:inline-flex;gap:0;border:2px solid var(--senal);border-radius:6px;overflow:hidden;margin-bottom:12px}
.pest button{font:700 14px var(--cond);letter-spacing:.05em;text-transform:uppercase;padding:6px 12px;color:var(--txt)}
.pest button.on{background:var(--senal);color:var(--amarillo)}

/* el resultado */
.doc{max-height:452px;overflow-y:auto;padding:16px 20px;font-size:14.5px;color:var(--txt-2)}
.doc h4{font:800 17px var(--cond);color:var(--txt);margin:12px 0 4px;display:flex;align-items:center;gap:8px}
.doc h4:first-child{margin-top:0}
.doc h4 .chip{font-size:11px}
.doc p{font-size:14.5px}
.doc ul{margin:2px 0 0 18px}
.doc li{margin:1px 0}
.revision{list-style:none;display:flex;flex-direction:column;gap:7px}
.revision li{display:grid;grid-template-columns:24px 1fr;gap:10px;align-items:start;font-size:15px;color:var(--txt)}
.revision li > b{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:13px;color:#fff;background:var(--linea)}
.revision li.si > b{background:var(--verde)}
.revision li.no > b{background:var(--rojo)}
.revision label{display:flex;gap:8px;align-items:center;cursor:pointer}
.apa{list-style:none;display:flex;flex-direction:column;gap:9px}
.apa li{font-size:14.5px;color:var(--txt-2);padding-left:28px;text-indent:-28px;line-height:1.4;overflow-wrap:anywhere}
.firma{display:flex;flex-direction:column;gap:8px;padding:18px 20px;border-radius:8px;background:var(--senal);color:var(--senal-txt-2);font-size:14px;line-height:1.4;box-shadow:var(--sombra-senal)}
.firma b{font:800 20px var(--cond);color:var(--senal-txt)}

/* ══════════════ DIAGRAMAS NEUTROS ══════════════ */
.diag{width:100%;height:auto;display:block}
.diag text{font:700 15px var(--cond);fill:var(--senal-txt)}
.diag .dg-s{font:700 13px var(--cond);fill:var(--txt-2)}
.dg-l path{fill:none;stroke:var(--txt-3);stroke-width:2.5}
.dg-l.camino path{stroke:var(--amarillo);stroke-width:5}
.dg-punta{fill:var(--txt-3)}
.dg-r{fill:var(--senal);stroke:var(--senal);stroke-width:2}
.dg-r.raiz{fill:var(--amarillo);stroke:var(--amarillo)}
.dg-r.raiz + text{fill:var(--sobre-amarillo)}
.dg-r.dec{fill:var(--azul);stroke:var(--azul)}
.dg-n rect{fill:var(--senal)}
.dg-n rect.bien{fill:var(--senal);stroke:var(--amarillo);stroke-width:3}
.dg-n rect.regreso{stroke:var(--txt-3);stroke-width:2;stroke-dasharray:6 5}
.dg-h rect{fill:var(--tarjeta);stroke:var(--linea);stroke-width:1.5}
.dg-h rect.n3{fill:var(--pared-2)}
.dg-h text{fill:var(--txt-2);font:600 13px var(--mono)}
.nw-neutro{border-radius:8px;overflow:hidden;background:var(--tarjeta);border:1px solid var(--linea);box-shadow:var(--sombra);position:relative;height:330px}
.nw-neutro i{display:block;height:9px;border-radius:5px;background:var(--linea)}
.nn-top{display:flex;align-items:center;gap:10px;padding:12px 14px;background:var(--senal);position:relative}
.nn-top i{background:var(--senal-3);width:52px}
.nn-top i.on{background:var(--amarillo)}
.nn-top .util{margin-left:auto;width:70px}
.nn-migas{padding:12px 14px 4px;position:relative}
.nn-migas i{width:200px}
.nn-cuerpo{display:grid;grid-template-columns:150px 1fr;gap:16px;padding:10px 14px}
.nn-local{display:flex;flex-direction:column;gap:10px;position:relative;align-self:start}
.nn-local i.on{background:var(--txt)}
.nn-cont{display:flex;flex-direction:column;gap:9px}
.nn-cont i.t{height:14px;width:55%;background:var(--txt-3)}
.nn-cont i.c{width:60%}
.nn-rel{margin-top:18px;padding:10px;border:2px dashed var(--linea);border-radius:6px;position:relative}
.gl{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--amarillo);color:var(--sobre-amarillo);font:800 14px var(--cond);display:grid;place-items:center;box-shadow:0 0 0 3px var(--senal)}
.cadena{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:20px}
.cadena .senal{position:relative;padding:14px 16px}
.cadena .senal > b{font:800 14px var(--cond);color:var(--amarillo)}
.cadena .senal:not(:last-child)::after{content:"→";position:absolute;right:-17px;top:50%;transform:translateY(-50%);font:800 20px var(--cond);color:var(--txt)}
.cadena p{font-size:14px}
.cartas-demo{display:grid;grid-template-columns:1fr 60px 1fr;gap:10px;align-items:center}
.cartas-demo .monton{display:flex;flex-wrap:wrap;gap:6px;align-content:center;min-height:200px}
.cartas-demo .monton span,.cartas-demo .gr span{padding:5px 10px;border-radius:5px;background:var(--tarjeta);border:1px solid var(--linea);font-size:13px;color:var(--txt-3)}
.cartas-demo .flecha{font:800 34px var(--cond);color:var(--txt);text-align:center}
.cartas-demo .grs{display:flex;flex-direction:column;gap:8px}
.cartas-demo .gr{display:flex;flex-wrap:wrap;gap:5px;padding:8px;border-radius:6px;border:2px solid var(--linea);background:var(--pared-2)}
.cartas-demo .gr b{width:100%;font:800 13px var(--cond);letter-spacing:.06em;text-transform:uppercase;color:var(--txt)}

/* ── vertical ── */
@media (max-aspect-ratio:1/1){
  #deck .slide .port{min-height:0}
  #deck .slide .p-tablero,#deck .slide .directorio,#deck .slide .p-autor{position:static!important;width:auto;margin-bottom:14px}
  #deck .slide .p-tablero h1{font-size:40px}
  #deck .slide .p-tablero .sup{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 22px 18px}
  #deck .slide .p-tablero .banda{padding:10px 22px;font-size:24px}
  #deck .slide .p-tablero .inf{padding:16px 22px 20px}
  #deck .slide .cabeza{flex-wrap:wrap}
  #deck .slide .cs-grupos,#deck .slide .cadena,#deck .slide .fid{grid-template-columns:1fr 1fr!important}
  #deck .slide .nav-mocks,#deck .slide .wf{grid-template-columns:1fr!important;flex-direction:column;align-items:center}
  #deck .slide .ficha-f{grid-template-columns:1fr!important}
  #deck .slide .ficha-f .ancho{grid-column:auto}
  #deck .slide .fid-cel,#deck .slide .wf-cel .at{grid-template-columns:1fr 1fr!important}
  #deck .slide .wf-web .at{grid-template-columns:1fr 1fr!important}
  #deck .slide .fn-rejilla{grid-template-columns:repeat(5,34px)!important}
  #deck .slide .reglas li,#deck .slide .pasos li{grid-template-columns:32px 1fr!important}
  #deck .slide .revision li{grid-template-columns:24px 1fr!important}
  #deck .slide .fl-paso{grid-template-columns:100px 1fr 26px!important}
  #deck .slide .cadena .senal::after{display:none}
  #deck .slide .gl,#deck .slide .ms-raiz,#deck .slide .f4 .dedo{position:absolute!important}
  #deck .slide .ms-arbol{flex-wrap:wrap}
  #deck .slide .ms-sec{flex:1 1 45%}
  #deck .slide .wf-web{width:100%}
  #deck .slide .fa-ruta{flex-wrap:wrap}
}

/* ── papel ──
   Sin esto se imprime una sola lámina —la activa— y el resto sale en blanco:
   están superpuestas con position:absolute y opacity:0. */
@media print{
  html,body{height:auto;overflow:visible;background:#fff;color:#000}
  .stage{position:static}
  .deck{position:static;margin:0;transform:none!important;width:100%;height:auto}
  .slide{position:static;inset:auto;opacity:1!important;visibility:visible!important;height:auto;min-height:0;page-break-after:always;padding:20px 0;background:none}
  .chrome,.hud,.railbar,.index,.tiny{display:none!important}
  .papel{display:block!important}
  .pantalla{display:none!important}
  .senal,.cartel{box-shadow:none}
}

/* 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}}

/* En papel no hay barra espaciadora: sale todo lo que la lámina lleva, se
   haya destapado o no en pantalla. Sin esto, una presentación que imprime
   todas sus láminas dejaba en blanco las piezas de las que no se visitaron. */
@media print{.clf{opacity:1!important;transform:none!important}#clf-hint{display:none!important}}

/* 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 > .sr,
.slide > .deck,
.slide > .slide,
.slide > .idx-close,
.slide > .p-tablero,
.slide > .p-autor,
.slide > .directorio,
.slide > .en-toast,
.slide > .ms-raiz,
.slide > .ms-arbol::before,
.slide > .ms-sec::before,
.slide > .fl-flecha::after,
.slide > .f4 .dedo,
.slide > .gl,
.slide > .cadena .senal:not(:last-child)::after,
.slide > #deck .slide .gl,
.slide > #deck .slide .ms-raiz,
.slide > #deck .slide .f4 .dedo{position:static}
}

/* Lo que no se puede partir, con desplazamiento propio. */
@media (max-aspect-ratio:1/1){
.slide .sr,
.slide .hud-title,
.slide .cartel > .cab > span:first-child,
.slide .chip,
.slide .ms-raiz,
.slide .nv-top b,
.slide .nv-glob span,
.slide .nv-util,
.slide .nv-tabs em,
.slide .fl-paso .no span,
.slide .wf-tabs span,
.slide .wf-web .bar b,
.slide .wf-web .bar span{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 .c-l,
.slide .c-ll,
.slide .c3,
.slide .c4,
.slide .reglas li,
.slide .sistemas4 .senal,
.slide .pasos li,
.slide .ficha-f,
.slide .inv-lista,
.slide .cs,
.slide .cs-grupos,
.slide .nm,
.slide .ms-avisos li,
.slide .nav-mocks,
.slide .nv-cuerpo,
.slide .voc,
.slide .fa,
.slide .fa-neutro,
.slide .fn-rejilla,
.slide .fl-paso,
.slide .wf-cel .at,
.slide .wf-web .at,
.slide .fid,
.slide .fid-cel,
.slide .tt-tarea-ed,
.slide .tt-res div,
.slide .revision li,
.slide .nn-cuerpo,
.slide .cadena,
.slide .cartas-demo,
.slide #deck .slide .cs-grupos,
.slide #deck .slide .cadena,
.slide #deck .slide .fid,
.slide #deck .slide .nav-mocks,
.slide #deck .slide .wf,
.slide #deck .slide .ficha-f,
.slide #deck .slide .fid-cel,
.slide #deck .slide .wf-cel .at,
.slide #deck .slide .wf-web .at,
.slide #deck .slide .fn-rejilla,
.slide #deck .slide .reglas li,
.slide #deck .slide .pasos li,
.slide #deck .slide .revision li,
.slide #deck .slide .fl-paso{grid-template-columns:1fr!important}
}

/* CL-MEJORAS-FIN */