/* Turno Andino — estilos. Paleta heredada de CyberRuta: tinta, latón y verde azulado. */
:root {
  --bg: #EDF0F3;
  --card: #F9FAFB;
  --card-2: #E3E8EE;
  --ink: #0F1B2D;
  --muted: #56637A;
  --line: #CDD5DF;
  --brass: #8C5F16;
  --brass-soft: #F3E7D2;
  --teal: #0F7A74;
  --teal-soft: #D5ECEA;
  --danger: #B83A26;
  --danger-soft: #F6DDD7;
  --on-danger: #FFFFFF;
  --warn: #B7791F;
  --night: #0F1B2D;
  --night-ink: #E9EEF5;
  --shadow: 0 1px 2px rgba(15, 27, 45, .06), 0 6px 18px rgba(15, 27, 45, .07);
  --f-display: "Bricolage Grotesque", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  --f-body: "IBM Plex Sans", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --r: 14px;
  --tabs-h: 64px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0A111C; --card: #121C2B; --card-2: #1A2638; --ink: #E6EBF2; --muted: #93A0B4; --line: #26344A;
    --brass: #E0AC52; --brass-soft: #3A2D16; --teal: #45BDB3; --teal-soft: #123331; --danger: #EC7A64; --danger-soft: #3B1C17; --on-danger: #1A0A07; --warn: #E3A64A;
    --night: #050A12; --night-ink: #E6EBF2;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A111C; --card: #121C2B; --card-2: #1A2638; --ink: #E6EBF2; --muted: #93A0B4; --line: #26344A;
  --brass: #E0AC52; --brass-soft: #3A2D16; --teal: #45BDB3; --teal-soft: #123331; --danger: #EC7A64; --danger-soft: #3B1C17; --on-danger: #1A0A07; --warn: #E3A64A;
  --night: #050A12; --night-ink: #E6EBF2;
  --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 18px rgba(0, 0, 0, .25);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 16px/1.5 var(--f-body);
  -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent;
}
body.playing { overflow: hidden; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 800; line-height: 1.1; margin: 0; text-wrap: balance; letter-spacing: -.01em; }
h1 { font-size: 2rem; }
h2 { font-size: 1.35rem; }
h3 { font-size: 1.15rem; font-weight: 600; }
p { margin: 0; }
b { font-weight: 600; }
.mono { font-family: var(--f-mono); }
.small { font-size: .82rem; color: var(--muted); }
.center { text-align: center; }
.eyebrow { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--brass); }
code { font-family: var(--f-mono); font-size: .92em; background: var(--card-2); padding: 0 .3em; border-radius: 4px; }
svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 2px; }

/* ——— Estructura ——— */
#shell { max-width: 480px; margin: 0 auto; padding: 0 16px calc(var(--tabs-h) + 28px + env(safe-area-inset-bottom, 0px)); }
#view { display: flex; flex-direction: column; gap: 16px; outline: none; }
.topbar {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 0; background: var(--bg);
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand b { display: block; font-family: var(--f-display); font-size: 1.05rem; line-height: 1.1; }
.brand small { display: block; color: var(--muted); font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mark {
  flex: none; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center;
  background: var(--night); color: #E0AC52; font: 800 .95rem/1 var(--f-display); letter-spacing: .02em;
}
.pills { display: flex; gap: 6px; flex: none; }
.pill {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line); font-size: .85rem; font-variant-numeric: tabular-nums;
}
.pill svg { width: 15px; height: 15px; color: var(--danger); }

.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
  background: var(--card); border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.tabs-in { max-width: 480px; margin: 0 auto; display: grid; grid-template-columns: repeat(6, 1fr); }
.tabs button {
  height: var(--tabs-h); border: 0; background: none; color: var(--muted); font: 500 .72rem/1 var(--f-body);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer;
}
.tabs button svg { width: 22px; height: 22px; }
.tabs button[aria-current="page"] { color: var(--ink); }
.tabs button[aria-current="page"] svg { color: var(--brass); stroke-width: 2.2; }

/* ——— Botones ——— */
.btn {
  appearance: none; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: 600 1rem/1.2 var(--f-body); padding: 13px 18px; border-radius: 12px; cursor: pointer; min-height: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-align: center;
}
.btn.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.btn.danger { background: var(--danger); color: var(--on-danger); border-color: var(--danger); }
.btn.ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn.wide { width: 100%; }
.btn.big { min-height: 56px; font-size: 1.05rem; }
.btn:disabled { opacity: .45; cursor: default; }
.btn:not(:disabled):active, .opt:not(:disabled):active, .card-btn:active { transform: scale(.98); }
.stack { display: flex; flex-direction: column; gap: 10px; }
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.icon-btn { flex: none; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.icon-btn svg { width: 20px; height: 20px; stroke-width: 2.4; }

/* ——— Hoy ——— */
.career { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.career-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.bar, .hp { height: 8px; border-radius: 99px; background: var(--card-2); overflow: hidden; }
.bar i, .hp i { display: block; height: 100%; border-radius: inherit; background: var(--brass); transition: width .4s ease; }
.hp i.ok { background: var(--teal); } .hp i.warn { background: var(--warn); } .hp i.bad { background: var(--danger); }

.resume {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px;
  border-radius: var(--r); background: var(--brass-soft); border: 1px solid var(--brass);
}

/* Pase de abordar: la pieza principal. */
.pass { border-radius: 18px; overflow: hidden; box-shadow: var(--shadow); background: var(--card); }
.pass-main { background: var(--night); color: var(--night-ink); padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 14px; position: relative; }
.pass-main .eyebrow { color: #E0AC52; }
.route { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; }
.route > div { display: flex; flex-direction: column; }
.route .to { text-align: right; }
.route small { color: #9FB0C6; font-size: .8rem; }
.iata { font: 800 2.9rem/0.95 var(--f-display); letter-spacing: -.02em; }
.route .iata { color: #fff; }
.route > div:first-child .iata { color: #6E819B; font-size: 1.7rem; letter-spacing: .02em; padding-top: .6rem; }
.plane { width: 100%; height: 26px; color: #E0AC52; fill: #E0AC52; stroke: none; }
.pass-office { font-size: .88rem; color: #C9D3E0; }
.pass-stub {
  position: relative; padding: 18px; display: flex; flex-direction: column; gap: 14px;
  border-top: 2px dashed var(--line);
}
.pass-stub::before, .pass-stub::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg);
}
.pass-stub::before { left: -11px; } .pass-stub::after { right: -11px; }
.pass-stub dl { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0; }
.pass-stub dt, .tally dt { font: 500 .66rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pass-stub dd, .tally dd { margin: 2px 0 0; font: 600 1.05rem/1.2 var(--f-mono); font-variant-numeric: tabular-nums; }

.duo-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.card-btn {
  appearance: none; text-align: left; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  border-radius: var(--r); padding: 14px; display: flex; flex-direction: column; gap: 4px; font: inherit; cursor: pointer;
}
.card-btn.static { cursor: default; background: transparent; }
.card-btn b { font-family: var(--f-display); font-size: 1.1rem; }
.card-btn small { color: var(--muted); font-size: .8rem; line-height: 1.3; }
.note { display: flex; gap: 12px; align-items: flex-start; padding: 2px 0; }
.note p small { display: block; font: 500 .72rem/1.4 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal); font: 800 .85rem/1 var(--f-display);
}
.avatar.dark { background: var(--night); color: #7FD36B; }
.cama-note { padding-top: 12px; border-top: 1px solid var(--line); }

/* ——— Secciones comunes ——— */
.head { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.head p:not(.eyebrow) { color: var(--muted); font-size: .95rem; max-width: 60ch; }
.block { display: flex; flex-direction: column; gap: 10px; padding-top: 16px; border-top: 1px solid var(--line); }
.steps { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 6px; }
textarea { width: 100%; font-size: .8rem; padding: 10px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); resize: vertical; }
.st { flex: none; font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 5px 7px; border-radius: 6px; white-space: nowrap; }
.st.done { background: var(--teal-soft); color: var(--teal); }
.st.open { background: var(--brass-soft); color: var(--brass); }
.st.shut { background: var(--card-2); color: var(--muted); }

/* ——— Rutas: tablero de salidas ——— */
.board-head { display: grid; grid-template-columns: 56px 1fr 44px 92px; gap: 8px; font-size: .66rem; letter-spacing: .12em; color: var(--muted); padding: 0 12px; }
.board { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.board-row {
  width: 100%; display: grid; grid-template-columns: 56px 1fr 44px 92px; align-items: center; gap: 8px;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink);
  font: inherit; text-align: left; cursor: pointer;
}
.board-row.sel { border-color: var(--ink); box-shadow: inset 4px 0 0 var(--brass); }
.board-row:disabled { opacity: .55; cursor: default; }
.iata.sm { font-size: 1.35rem; }
.b-city { min-width: 0; }
.b-city b { display: block; }
.b-city small { display: block; color: var(--muted); font-size: .78rem; line-height: 1.25; }
.b-gate { font-size: .9rem; }
.board-row .st { justify-self: end; }

/* ——— Vida ——— */
.desk { background: var(--night); color: var(--night-ink); border-radius: 18px; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.desk .eyebrow { color: #E0AC52; }
.desk .small { color: #9FB0C6; }
.desk-shelf { display: flex; flex-wrap: wrap; gap: 10px; min-height: 48px; align-items: center; border-bottom: 3px solid #3A4A62; padding-bottom: 8px; }
.desk-shelf .glyph { width: 40px; height: 40px; color: #E0AC52; }
.wallet { font-size: 1.3rem; font-weight: 500; }
.shop { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.item { display: grid; grid-template-columns: 40px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); }
.item .glyph { width: 34px; height: 34px; color: var(--brass); }
.item-t small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.item.own .glyph { color: var(--teal); }
.btn.buy { min-height: 40px; padding: 8px 12px; font: 500 .85rem/1 var(--f-mono); white-space: nowrap; }

/* ——— Pasaporte ——— */
.stamps { list-style: none; margin: 0; padding: 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  background-image: repeating-linear-gradient(0deg, transparent 0 27px, var(--card-2) 27px 28px); }
.stamps li { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.stamps small { font-size: .72rem; color: var(--muted); }
.stamp { width: 100%; max-width: 96px; transform: rotate(var(--rot)); opacity: .9; }
.stamps .empty span {
  width: 100%; max-width: 96px; aspect-ratio: 1; border-radius: 50%; border: 2px dashed var(--line);
  display: grid; place-items: center; color: var(--muted); font-size: 1rem; background: var(--card);
}
.ladder { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ladder li { display: grid; grid-template-columns: 56px 1fr auto; gap: 10px; align-items: baseline; padding: 9px 0; border-bottom: 1px solid var(--line); color: var(--muted); }
.ladder li span { font-size: .78rem; font-variant-numeric: tabular-nums; }
.ladder li small { font-size: .78rem; font-family: var(--f-mono); }
.ladder li.past { color: var(--ink); }
.ladder li.now { color: var(--ink); }
.ladder li.now b { color: var(--brass); }
.ladder li.now span::before { content: "▸ "; color: var(--brass); }
.dossier { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dossier li { padding: 12px 14px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }
.dossier li p { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.dossier li.locked { background: transparent; border-style: dashed; }
.dossier li.locked b { color: var(--muted); }

/* ——— Perfil ——— */
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0; }
.tally > div { padding: 12px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); }

/* ——— Turno (pantalla completa) ——— */
#play {
  position: fixed; inset: 0; z-index: 20; background: var(--bg); overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: calc(env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px));
}
#play > * { max-width: 480px; margin-left: auto; margin-right: auto; }
#play.has-sheet { padding-bottom: 340px; }
.p-head { display: flex; gap: 12px; align-items: center; padding: 12px 0 8px; position: sticky; top: 0; background: var(--bg); z-index: 2; }
.p-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.p-row { display: flex; justify-content: space-between; gap: 8px; font-size: .78rem; }
.p-row .mono { letter-spacing: .08em; }
.sla { height: 3px; background: var(--card-2); border-radius: 2px; overflow: hidden; margin-bottom: 14px; }
.sla i { display: block; height: 100%; width: 100%; background: var(--brass); transition: width .25s linear; }
.sla i.out { background: transparent; }
.p-body { display: flex; flex-direction: column; gap: 12px; }

.ticket { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; display: flex; flex-direction: column; gap: 10px; box-shadow: var(--shadow); }
.t-label { font: 500 .72rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--brass); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tag { font-size: .66rem; padding: 2px 6px; border-radius: 5px; background: var(--teal-soft); color: var(--teal); letter-spacing: .06em; }
.t-q { font-size: 1.2rem; line-height: 1.3; }
.t-sub { font-weight: 600; }
.from { display: flex; gap: 10px; align-items: center; }
.from small { display: block; color: var(--muted); font-size: .78rem; }

.opts { display: flex; flex-direction: column; gap: 8px; }
.opt {
  appearance: none; text-align: left; font: 500 1rem/1.35 var(--f-body); color: var(--ink);
  background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 14px 16px; min-height: 52px; cursor: pointer;
}
.opt.right { border-color: var(--teal); background: var(--teal-soft); }
.opt.wrong { border-color: var(--danger); background: var(--danger-soft); }
.opt.struck { text-decoration: line-through; opacity: .45; }
.opt:disabled { cursor: default; }
.hint { align-self: center; min-height: 40px; font-size: .9rem; }

/* Correo deslizable */
.swipe-zone { position: relative; padding: 8px 0; user-select: none; -webkit-user-select: none; }
.swipe-hint { position: absolute; top: 50%; transform: translateY(-50%); font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; opacity: 0; transition: opacity .15s; }
.swipe-hint.left { left: 0; color: var(--teal); } .swipe-hint.right { right: 0; color: var(--danger); }
.swipe-zone[data-lean="left"] .swipe-hint.left, .swipe-zone[data-lean="right"] .swipe-hint.right { opacity: 1; }
.swipe-zone[data-lean="left"] .mail { border-color: var(--teal); }
.swipe-zone[data-lean="right"] .mail { border-color: var(--danger); }
.mail { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; transition: transform .25s ease, opacity .25s ease; position: relative; z-index: 1; }
.mail.drag { transition: none; }
.mail.judged::after {
  content: attr(data-verdict); position: absolute; top: 12px; right: 12px; transform: rotate(-8deg);
  font: 800 .95rem/1 var(--f-display); text-transform: uppercase; letter-spacing: .06em;
  padding: 6px 10px; border: 3px solid currentColor; border-radius: 8px; background: var(--card);
}
.mail.v-phish { border-color: var(--danger); } .mail.v-phish::after { color: var(--danger); }
.mail.v-legit { border-color: var(--teal); } .mail.v-legit::after { color: var(--teal); }
.m-from { font-size: .82rem; color: var(--muted); word-break: break-all; }
.m-subj { font-size: 1.1rem; }
.m-body { font-size: .98rem; }

/* Llamada */
.caller { display: flex; gap: 12px; align-items: center; }
.caller small { display: block; color: var(--muted); font-size: .8rem; }
.ring { position: absolute; right: -4px; bottom: -4px; width: 26px; height: 26px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; border: 2px solid var(--card); animation: ring 1.4s ease-in-out 4; }
.ring svg { width: 14px; height: 14px; }
@keyframes ring { 0%, 100% { box-shadow: 0 0 0 0 rgba(15, 122, 116, .5); } 50% { box-shadow: 0 0 0 10px rgba(15, 122, 116, 0); } }
.say { margin: 0; padding: 12px 14px; border-radius: 4px 14px 14px 14px; background: var(--card-2); font-size: 1rem; }

/* Logs */
.log { background: #0D1622; border-radius: var(--r); padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.log-line {
  appearance: none; text-align: left; border: 1px solid transparent; background: transparent; color: #C8D4E3;
  font-size: .78rem; line-height: 1.45; padding: 9px 10px; border-radius: 8px; cursor: pointer; overflow-wrap: anywhere; min-height: 44px;
}
.log-line:nth-child(odd) { background: #111D2C; }
.log-line.right { border-color: #45BDB3; color: #9BF0E6; background: #0F2A2A; }
.log-line.wrong { border-color: #EC7A64; color: #FFC2B5; background: #2E1612; }
.log-line:disabled { cursor: default; }

/* Decodificar */
.code-val { display: block; font-size: 1.6rem; letter-spacing: .08em; padding: 14px; text-align: center; background: var(--card-2); border-radius: 10px; overflow-wrap: anywhere; }
.code-val.small-code { font-size: .8rem; letter-spacing: .02em; text-align: left; padding: 10px; line-height: 1.5; }
.hashes { display: flex; flex-direction: column; gap: 4px; }

/* Emparejar */
.match { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.col { display: flex; flex-direction: column; gap: 8px; }
.col-h { font: 500 .7rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: var(--muted); }
.tile {
  appearance: none; min-height: 52px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink);
  font: 500 .95rem/1.25 var(--f-body); padding: 8px; cursor: pointer;
}
.tile.mono { font-family: var(--f-mono); }
.tile.sel { border-color: var(--brass); background: var(--brass-soft); }
.tile.done { border-color: var(--teal); background: var(--teal-soft); color: var(--teal); }
.tile { position: relative; }
.tile.done::before { content: attr(data-n); position: absolute; top: 5px; left: 7px; font: 500 .68rem/1 var(--f-mono); color: var(--teal); }
.shake { animation: shake .35s; border-color: var(--danger) !important; }
@keyframes shake { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }

/* Ordenar */
.picked { margin: 0; padding: 0 0 0 1.6rem; display: flex; flex-direction: column; gap: 6px; }
.picked:empty { display: none; }
.picked li { padding: 8px 12px; border-radius: 10px; background: var(--teal-soft); color: var(--ink); }
.picked li::marker { font-family: var(--f-mono); color: var(--teal); }
.deck { display: flex; flex-direction: column; gap: 8px; }
.step { appearance: none; text-align: left; min-height: 50px; padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: 500 .98rem/1.3 var(--f-body); cursor: pointer; }

/* Hoja de retroalimentación */
#p-sheet { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; max-width: none; }
.sheet {
  max-width: 480px; margin: 0 auto; background: var(--card); border-top: 4px solid var(--teal);
  border-radius: 18px 18px 0 0; padding: 18px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -8px 30px rgba(15, 27, 45, .18); display: flex; flex-direction: column; gap: 10px;
  max-height: 70vh; overflow-y: auto; animation: up .22s ease-out;
}
.sheet.is-bad { border-top-color: var(--danger); }
@keyframes up { from { transform: translateY(40px); opacity: 0; } }
.sheet-k { font: 800 1.35rem/1.1 var(--f-display); color: var(--teal); }
.sheet.is-bad .sheet-k { color: var(--danger); }
.sheet-why { font-size: .96rem; }
.sheet-right { font-size: .96rem; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { font: 500 .78rem/1 var(--f-mono); padding: 6px 8px; border-radius: 6px; background: var(--card-2); }
.chip.good { background: var(--teal-soft); color: var(--teal); }
.chip.bad { background: var(--danger-soft); color: var(--danger); }
.chip.cama { background: var(--night); color: #7FD36B; }

/* Pausa y bienvenida */
.pause, .intro {
  position: fixed; inset: 0; z-index: 30; background: rgba(8, 14, 24, .72); display: grid; place-items: center; padding: 16px;
  max-width: none !important;
}
.pause-card, .intro-card {
  width: 100%; max-width: 420px; background: var(--card); color: var(--ink); border-radius: 20px; padding: 22px 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.pause-card p:not(.eyebrow), .intro-card > p:not(.eyebrow) { color: var(--muted); }

/* Resultado */
.result { display: flex; flex-direction: column; gap: 16px; padding-top: 20px; }
.result h2 { font-size: 1.7rem; text-align: center; }
.result > .eyebrow { text-align: center; }
.stars { display: flex; justify-content: center; gap: 6px; }
.star { width: 48px; height: 48px; color: var(--line); fill: var(--card-2); stroke-width: 1.4; }
.star.on { color: var(--brass); fill: var(--brass); }
.star.on:nth-child(2) { transform: translateY(-8px) scale(1.12); }
.quote { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.quote small { display: block; color: var(--muted); font-size: .78rem; margin-top: 4px; }
.banner { padding: 16px; border-radius: var(--r); display: flex; flex-direction: column; gap: 4px; }
.banner.promo { background: var(--night); color: var(--night-ink); }
.banner.promo .eyebrow { color: #E0AC52; }
.banner.exam-b { background: var(--brass-soft); border: 1px solid var(--brass); }
.review ul { margin: 6px 0 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 8px; font-size: .92rem; }

/* ——— Retratos ——— */
.portrait { flex: none; display: inline-block; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--card), 0 0 0 3px var(--line); }
.portrait svg { display: block; width: 100%; height: 100%; }
.portrait svg, .map, .stamp { stroke: none; }
.portrait.sm { width: 40px; height: 40px; }
.caller-pic { position: relative; flex: none; }
.caller-pic .portrait { width: 56px; height: 56px; }
.sheet-head { display: flex; align-items: center; gap: 10px; }

/* ——— Bóveda en la barra de salud ——— */
.vault-l { display: inline-flex; align-items: center; gap: 5px; }
.vault { width: 15px; height: 15px; }
.vault.ok { color: var(--teal); } .vault.warn { color: var(--warn); } .vault.bad { color: var(--danger); }
.p-head.hit .hp { animation: shake .45s; }
.p-head.hit .vault { animation: shake .45s; color: var(--danger); }

/* ——— Mapa de rutas ——— */
.map-wrap { border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.map { display: block; width: 100%; height: auto; }
.map-sea { fill: var(--card); }
.map-grid path { stroke: var(--card-2); stroke-width: 1; }
.map-eq { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 4; }
.map-note { font: 500 7px var(--f-mono); letter-spacing: .12em; fill: var(--muted); stroke: none; }
.map-land { fill: var(--card-2); stroke: var(--line); stroke-width: 1; stroke-linejoin: round; }
.map-inset rect { fill: var(--bg); stroke: var(--line); stroke-width: 1; }
.rt { fill: none; stroke-width: 1.8; stroke-linecap: round; }
.rt-done { stroke: var(--brass); }
.rt-next { stroke: var(--brass); stroke-dasharray: 3 4; opacity: .8; }
.rt-shut { stroke: var(--line); stroke-dasharray: 2 5; }
.rt-drawing { stroke-dasharray: none; stroke: var(--brass); opacity: 1; }
.map-plane path { fill: var(--ink); stroke: var(--card); stroke-width: .8; }
.nd { cursor: pointer; outline: none; }
.nd.st-shut { cursor: default; }
.nd-hit { fill: transparent; stroke: none; }
.nd-done { fill: var(--teal); stroke: var(--card); stroke-width: 2; }
.nd-check { fill: none; stroke: #fff; stroke-width: 1.8; }
.nd-exam { fill: var(--danger); stroke: var(--card); stroke-width: 2; }
.nd-ex { font: 800 9px var(--f-display); fill: #fff; stroke: none; }
.nd-open { fill: var(--brass); stroke: var(--card); stroke-width: 2; }
.nd-pulse { fill: none; stroke: var(--brass); stroke-width: 1.5; transform-origin: 0 0; animation: pulse 1.8s ease-out 3; opacity: 0; }
@keyframes pulse { from { transform: scale(.6); opacity: .9; } to { transform: scale(1.6); opacity: 0; } }
.nd-shut { fill: var(--card); stroke: var(--line); stroke-width: 1.5; }
.nd-sel { fill: none; stroke: var(--ink); stroke-width: 1.6; }
.nd-lab { font: 600 9.5px var(--f-mono); letter-spacing: .06em; fill: var(--ink); stroke: var(--card); stroke-width: 3; paint-order: stroke; }
.nd.st-shut .nd-lab { fill: var(--muted); font-weight: 400; }
.nd:focus-visible .nd-sel, .nd:focus-visible .nd-hit { stroke: var(--teal); stroke-width: 2; }

.city-card { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.cc-top { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.cc-name { min-width: 0; }
.cc-name b { display: block; line-height: 1.2; }
.cc-name small { display: block; color: var(--muted); font-size: .8rem; }
.cc-prog { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.dots { display: inline-flex; gap: 6px; align-items: center; }
.dots i { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line); background: var(--card); }
.dots i.on { background: var(--brass); border-color: var(--brass); }
.dots i.ex { width: auto; height: 20px; border-radius: 6px; padding: 0 6px; font: 600 .68rem/16px var(--f-mono); font-style: normal; color: var(--muted); }
.dots i.ex.on { background: var(--teal); border-color: var(--teal); color: #fff; }
.st.exam { background: var(--danger-soft); color: var(--danger); }
.board-box summary { cursor: pointer; font-weight: 600; padding: 8px 0; list-style-position: inside; }
.board-box[open] summary { margin-bottom: 8px; }

/* ——— Examen ——— */
.exam-card { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r); background: var(--danger-soft); border: 1px solid var(--danger); }
.exam-card .btn { grid-column: 1 / -1; }
.exam-card .eyebrow { color: var(--danger); }
.ex-why { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: var(--r); background: var(--card); border-top: 4px solid var(--teal); }
.ex-why.is-bad { border-top-color: var(--danger); }
.ex-why.is-bad .sheet-k { color: var(--danger); }

/* ——— Ceremonias ——— */
.ceremony { position: fixed; inset: 0; z-index: 40; background: rgba(8, 14, 24, .78); display: grid; place-items: center; padding: 16px; animation: fade .2s ease-out; }
@keyframes fade { from { opacity: 0; } }
.ceremony-card { width: 100%; max-width: 420px; background: var(--card); color: var(--ink); border-radius: 22px; padding: 22px 18px; display: flex; flex-direction: column; gap: 14px; text-align: center; max-height: 92vh; overflow-y: auto; }
.ceremony-card .quote { text-align: left; }
.ceremony-card > p:not(.eyebrow) { color: var(--muted); }
.slam-page {
  align-self: center; width: 180px; height: 180px; display: grid; place-items: center; border-radius: 14px;
  background: var(--bg); background-image: repeating-linear-gradient(0deg, transparent 0 21px, var(--card-2) 21px 22px); border: 1px solid var(--line);
}
.slam-page .stamp { max-width: 140px; animation: slam .55s cubic-bezier(.2, .9, .3, 1.2) both .15s; }
@keyframes slam {
  0% { transform: scale(2.4) rotate(-30deg); opacity: 0; }
  60% { transform: scale(.9) rotate(var(--rot)); opacity: 1; }
  100% { transform: scale(1) rotate(var(--rot)); opacity: .92; }
}
.promo-badge {
  align-self: center; width: 96px; height: 108px; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--brass); color: var(--card); clip-path: polygon(50% 0, 100% 22%, 100% 70%, 50% 100%, 0 70%, 0 22%);
  animation: rise .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
.promo-badge span { font: 800 2.4rem/1 var(--f-display); }
.promo-badge small { font: 600 .6rem/1.3 var(--f-mono); letter-spacing: .14em; }
@keyframes rise { from { transform: translateY(24px) scale(.6); opacity: 0; } }
.confetti { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 50; pointer-events: none; }

/* Estrellas que aparecen una por una */
.star.on { animation: pop .45s cubic-bezier(.2, .9, .3, 1.4) both; }
.star.on:nth-child(2) { animation-delay: .18s; }
.star.on:nth-child(3) { animation-delay: .36s; }
@keyframes pop { from { transform: scale(0) rotate(-40deg); } }
.star.on:nth-child(2) { --lift: -8px; }

/* ——— Fase 1: misiones, logros, Security+ y minijuegos reales ——— */
.bar.sm { height: 6px; }
.bar.weak i { background: var(--danger); }

.missions { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.ms-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.missions ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.missions li { display: flex; flex-direction: column; gap: 6px; }
.missions li.weekly .bar i { background: var(--teal); }
.missions li.claimed { opacity: .6; }
.missions li.done .bar i { background: var(--teal); }
.ms-t { display: flex; justify-content: space-between; gap: 10px; font-size: .95rem; }
.missions .st { align-self: flex-start; }
.btn.claim { min-height: 42px; font-size: .9rem; padding: 8px 12px; animation: nudge 1.2s ease-in-out 2; }
@keyframes nudge { 50% { transform: scale(1.03); } }

/* Pestañas del pasaporte */
.seg { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 4px; border-radius: 12px; background: var(--card-2); }
.seg button { appearance: none; border: 0; background: transparent; color: var(--muted); font: 600 .85rem/1 var(--f-body); padding: 10px 4px; border-radius: 9px; cursor: pointer; min-height: 40px; }
.seg button[aria-selected="true"] { background: var(--card); color: var(--ink); box-shadow: var(--shadow); }
.seg-body { display: flex; flex-direction: column; gap: 14px; }

/* Logros */
.tiers { display: flex; gap: 8px; flex-wrap: wrap; }
.tier-n { font: 600 .75rem/1 var(--f-mono); text-transform: uppercase; letter-spacing: .08em; padding: 7px 10px; border-radius: 8px; background: var(--card); border: 1px solid var(--line); }
.tier-n.t-oro { color: #B7862A; } .tier-n.t-plata { color: #7C8898; } .tier-n.t-bronce { color: #A2673C; }
.ach-group { display: flex; flex-direction: column; gap: 8px; }
.ach-group h2 { font-size: 1.05rem; }
.achs { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.achs li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.achs li > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.achs li small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.achs li:not(.got) b { color: var(--muted); }
.medal { display: block; overflow: visible; }
.cama-head { display: flex; align-items: center; gap: 12px; }

/* Avisos (logros y misiones) */
#toasts { position: fixed; left: 0; right: 0; top: calc(10px + env(safe-area-inset-top, 0px)); z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 16px; }
.toast {
  width: 100%; max-width: 420px; display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 16px;
  background: var(--night); color: var(--night-ink); border: 1px solid rgba(224, 172, 82, .5); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); animation: drop .35s cubic-bezier(.2, .9, .3, 1.2) both;
}
.toast.out { animation: lift .3s ease-in both; }
@keyframes drop { from { transform: translateY(-40px); opacity: 0; } }
@keyframes lift { to { transform: translateY(-40px); opacity: 0; } }
.toast div { display: flex; flex-direction: column; min-width: 0; }
.toast small { font: 500 .66rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .12em; color: #E0AC52; }
.toast b { font-family: var(--f-display); font-size: 1.05rem; line-height: 1.2; }
.toast span { font-size: .82rem; color: #9FB0C6; }
.t-check { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #0F7A74; color: #fff !important; font-size: 1.1rem !important; font-weight: 700; }

/* Revisión de código */
.code { background: #0D1622; border-radius: var(--r); padding: 8px 0; overflow-x: auto; }
.code-line {
  appearance: none; display: grid; grid-template-columns: 2.2em 1fr; gap: 8px; width: 100%; text-align: left; border: 1px solid transparent;
  background: transparent; color: #D6DFEA; font-size: .76rem; line-height: 1.5; padding: 7px 10px; cursor: pointer; min-height: 40px; white-space: pre-wrap; overflow-wrap: anywhere;
}
.code-line:disabled { cursor: default; min-height: 0; }
.code-line .ln { color: #5A6B82; text-align: right; user-select: none; }
.code-line.right { border-color: #45BDB3; background: #0F2A2A; }
.code-line.wrong { border-color: #EC7A64; background: #2E1612; }
.hl-s { color: #E6C07B; } .hl-c { color: #7F8EA3; font-style: italic; } .hl-k { color: #7FC8F8; }
.sheet-fix { display: flex; flex-direction: column; gap: 4px; }
.sheet-fix small { font: 500 .7rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.sheet-fix code { display: block; background: #0D1622; color: #D6DFEA; padding: 10px; border-radius: 8px; font-size: .76rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }

/* Encabezados de correo */
.hdrs { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; font-size: .74rem; line-height: 1.55; overflow-wrap: anywhere; }
.hdrs p { padding: 1px 6px; border-radius: 5px; border-left: 3px solid transparent; white-space: pre-wrap; }
.hdrs p.clue { background: var(--brass-soft); border-left-color: var(--brass); }

/* Consultas del SIEM */
.code-opts .opt { font: 400 .76rem/1.5 var(--f-mono); overflow-wrap: anywhere; }

/* Vulnerabilidades */
.cves { display: flex; flex-direction: column; gap: 8px; }
.cve {
  appearance: none; text-align: left; display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: 14px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.cve:disabled { cursor: default; }
.cve.right { border-color: var(--teal); background: var(--teal-soft); }
.cve.wrong { border-color: var(--danger); background: var(--danger-soft); }
.cve-top { display: flex; justify-content: space-between; gap: 8px; align-items: center; flex-wrap: wrap; font-size: .8rem; }
.cve-tags { display: flex; gap: 6px; flex-wrap: wrap; }
.sev { font: 600 .7rem/1 var(--f-mono); padding: 5px 7px; border-radius: 6px; color: #fff; }
.sev-crit { background: #8E1F12; } .sev-high { background: #B83A26; } .sev-med { background: #B7791F; } .sev-low { background: #56637A; }

/* Security+ */
.ready { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.ready-n { font: 800 3rem/1 var(--f-display); color: var(--brass); }
.ready-n small { font-size: 1.2rem; }
.doms { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.doms li { display: flex; flex-direction: column; gap: 5px; }
.dom-t { display: flex; justify-content: space-between; gap: 10px; font-size: .9rem; }

/* ——— Fase 2: glosario vivo, carreras, escaneos y matriz de riesgo ——— */
.gl {
  appearance: none; border: 0; background: none; padding: 0; margin: 0; font: inherit; color: inherit; cursor: help;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--brass); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.gl:hover, .gl:focus-visible { color: var(--brass); }
.kw { display: flex; flex-direction: column; gap: 6px; }
.kw small { font: 500 .68rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.kw > div { display: flex; flex-wrap: wrap; gap: 6px; }
.gl-chip {
  appearance: none; border: 1px solid var(--brass); background: var(--brass-soft); color: var(--ink); border-radius: 999px;
  font: 500 .82rem/1 var(--f-body); padding: 8px 12px; min-height: 34px; cursor: pointer;
}

.gloss-pop { position: fixed; inset: 0; z-index: 70; background: rgba(8, 14, 24, .6); display: flex; align-items: flex-end; justify-content: center; animation: fade .15s ease-out; }
.gloss-card {
  width: 100%; max-width: 480px; background: var(--card); color: var(--ink); border-radius: 20px 20px 0 0; border-top: 4px solid var(--brass);
  padding: 20px 18px calc(18px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 10px; max-height: 80vh; overflow-y: auto;
  animation: up .22s ease-out;
}
.gloss-card h3 { font-size: 1.4rem; font-weight: 800; }
.gloss-en { color: var(--muted); font-size: .82rem; }
.gloss-s { font-size: 1.02rem; }
.gloss-ex { background: var(--card-2); border-radius: 12px; padding: 10px 12px; }
.gloss-ex small { font: 500 .68rem/1.3 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--teal); }
.gloss-t summary { cursor: pointer; color: var(--muted); font-size: .88rem; }
.gloss-t p { font-size: .9rem; color: var(--muted); margin-top: 6px; }

.dict { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; padding: calc(12px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.dict-in { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
.dict-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.dict input { width: 100%; font: 400 1rem var(--f-body); padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); min-height: 48px; }
.dict-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.gl-row { appearance: none; width: 100%; text-align: left; display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; padding: 12px 2px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--ink); font: inherit; cursor: pointer; }
.gl-row small { grid-column: 1; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.gl-row .st { grid-column: 2; grid-row: 1 / span 2; align-self: center; }

/* Carreras */
.car-dot { flex: none; width: 12px; height: 12px; border-radius: 50%; background: hsl(var(--h) 55% 45%); box-shadow: 0 0 0 3px hsl(var(--h) 55% 45% / .2); }
.car-line {
  appearance: none; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 6px 10px; align-items: center; text-align: left;
  padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.car-line small { display: block; color: var(--muted); font-size: .8rem; }
.car-line .bar { grid-column: 1 / -1; }
.car-line .bar i { background: hsl(var(--h) 55% 45%); }
.tag.car-tag { background: var(--brass-soft); color: var(--brass); }
.chip.car { background: var(--brass-soft); color: var(--brass); }

.picker { position: fixed; inset: 0; z-index: 45; background: var(--bg); overflow-y: auto; padding: calc(14px + env(safe-area-inset-top, 0px)) 16px calc(24px + env(safe-area-inset-bottom, 0px)); }
.picker-in { max-width: 480px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.picker-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; }
.picker-head .portrait { width: 56px; height: 56px; }
.picker-head h2 { font-size: 1.5rem; margin: 2px 0 6px; }
.cars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.car { display: flex; flex-direction: column; gap: 8px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-left: 5px solid hsl(var(--h) 55% 45%); }
.car-top { display: flex; align-items: center; gap: 10px; }
.car-top h3 { font-size: 1.15rem; font-weight: 800; }
.car-badge {
  align-self: center; padding: 18px 22px; border-radius: 18px; font: 800 1.2rem/1 var(--f-display); color: #fff;
  background: hsl(var(--h) 55% 38%); box-shadow: 0 8px 24px hsl(var(--h) 55% 38% / .35); animation: rise .6s cubic-bezier(.2, .9, .3, 1.3) both;
}
.spec { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); border-top: 5px solid hsl(var(--h) 55% 45%); }
.car-preview { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.car-preview li { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; }
.car-preview .car-dot { margin-top: 6px; }
.car-preview small { display: block; color: var(--muted); font-size: .84rem; line-height: 1.35; }

/* Escaneo */
.scanout .log-line { white-space: pre-wrap; }
.scanout .log-line:disabled:first-child { color: #7F8EA3; min-height: 0; background: transparent; }

/* Matriz de riesgo */
.rm { display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.rm-ax { font: 500 .68rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); grid-column: 2; text-align: center; }
.rm-ay { grid-column: 1; grid-row: 1; writing-mode: vertical-rl; transform: rotate(180deg); text-align: center; }
.rm-grid { display: grid; grid-template-columns: 3.6em repeat(3, 1fr); gap: 6px; }
.rm-l { font-size: .74rem; color: var(--muted); display: grid; place-items: center; text-align: center; }
.rm-c { appearance: none; border: 2px solid transparent; border-radius: 10px; min-height: 58px; font: 600 .82rem/1.1 var(--f-body); cursor: pointer; color: #1D2633; }
.rm-c.lv-0 { background: #BFE3D3; } .rm-c.lv-1 { background: #F2DE9B; } .rm-c.lv-2 { background: #F2B58A; } .rm-c.lv-3 { background: #E88B7A; }
.rm-c:disabled { cursor: default; opacity: .75; }
.rm-c.right { opacity: 1; border-color: var(--ink); box-shadow: 0 0 0 3px var(--teal); }
.rm-c.near { opacity: 1; border-color: var(--teal); }
.rm-c.wrong { opacity: 1; border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger); }

/* ——— Fase 3: Andino Shield ——— */
.tabs button { font-size: .66rem; }
.seg.seg5 { grid-template-columns: repeat(5, 1fr); }
.seg.seg5 button { font-size: .74rem; padding: 10px 2px; }

.co-lock { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.co-lock small { display: block; color: var(--muted); font-size: .8rem; margin-top: 4px; }

.co-head { display: flex; flex-direction: column; gap: 12px; }
.office { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
.of-wall { fill: var(--card-2); }
.of-floor { fill: var(--line); }
.of-line { fill: none; stroke: var(--muted); stroke-width: 1.4; opacity: .6; }
.of-logo { font: 800 11px var(--f-display); letter-spacing: .2em; fill: var(--brass); }
.of-screen { fill: #0F7A74; stroke: #0A4F4B; stroke-width: 1; }
.of-screen.b { fill: #1D6FA3; }
.of-desk { fill: var(--muted); }
.of-head { fill: #C98E63; }
.of-head.me { fill: #E0AC52; }
.of-plant rect { fill: #8C5F16; } .of-plant circle { fill: #3F8F5A; }
.co-id { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.co-id h1 { font-size: 1.7rem; }
.tally dd.neg { color: var(--danger); }
.co-bars { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.co-bars > div { display: flex; flex-direction: column; gap: 4px; }

.co-alerts { display: flex; flex-direction: column; gap: 8px; }
.co-alerts .eyebrow { color: var(--danger); }
.co-alert {
  appearance: none; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; text-align: left; width: 100%;
  padding: 12px 14px; border-radius: 12px; border: 1.5px solid var(--danger); background: var(--danger-soft); color: var(--ink); font: inherit; cursor: pointer;
}
.co-alert small { display: block; color: var(--muted); font-size: .8rem; }
.co-bang { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--danger); color: var(--on-danger); font: 800 1rem/1 var(--f-display); animation: nudge 1.2s ease-in-out 3; }
.co-warn { color: var(--danger); font-weight: 600; }

.co-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.co-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); }
.co-card .cc-top { grid-template-columns: 1fr auto; }
.co-person { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line); }
.co-person > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.co-person small { color: var(--muted); font-size: .8rem; }
.co-fire { min-height: 38px; padding: 6px 10px; font-size: .82rem; }
.co-news { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: .9rem; }
.co-news li { display: grid; grid-template-columns: 2.6em 1fr; gap: 8px; }
.co-news li span { color: var(--muted); font-size: .74rem; padding-top: 2px; }
.co-news li.good { color: var(--teal); } .co-news li.bad { color: var(--danger); }
.co-news li.good span, .co-news li.bad span { color: var(--muted); }

.tbl { overflow-x: auto; }
.tbl table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tbl th { text-align: left; font: 500 .66rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); padding: 6px 4px; border-bottom: 1px solid var(--line); }
.tbl td { padding: 8px 4px; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }

.spark { display: block; width: 100%; height: auto; }
.sp-zero { stroke: var(--line); stroke-dasharray: 3 4; }
.sp-area { fill: var(--teal-soft); stroke: none; }
.sp-line { fill: none; stroke: var(--teal); stroke-width: 2; stroke-linejoin: round; }
.sp-dot { fill: var(--teal); stroke: var(--card); stroke-width: 2; }
.sp-lab { font: 500 8px var(--f-mono); fill: var(--muted); stroke: none; }

.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.svc {
  appearance: none; width: 100%; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer;
}
.svc[aria-pressed="true"] { border-color: var(--teal); background: var(--teal-soft); box-shadow: inset 4px 0 0 var(--teal); }
.svc-top { display: flex; justify-content: space-between; gap: 8px; }
.svc small { color: var(--muted); font-size: .82rem; line-height: 1.35; }
.svc .svc-role { font-family: var(--f-mono); font-size: .72rem; }
.bid-res { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bid-res li { padding: 10px 12px; border-radius: 10px; border-left: 4px solid var(--line); background: var(--card); display: flex; flex-direction: column; gap: 3px; }
.bid-res li small { color: var(--muted); font-size: .84rem; }
.bid-res li.ok { border-left-color: var(--teal); } .bid-res li.miss { border-left-color: var(--warn); } .bid-res li.bad { border-left-color: var(--danger); }

.co-home { width: 100%; border-color: var(--brass); }
.banner.co-res { background: var(--card); border: 1px solid var(--brass); gap: 8px; }

/* ——— Fase 4: escenas, tickets realistas, terminal, archivo y álbum ——— */
.scene { display: block; width: 100%; height: auto; stroke: none; }
.pass-scene { position: relative; line-height: 0; }
.pass-scene .scene { aspect-ratio: 360 / 130; }
.scene-tag { position: absolute; left: 12px; bottom: 10px; line-height: 1.2; font-size: .7rem; letter-spacing: .08em; text-transform: uppercase;
  color: #fff; background: rgba(8, 14, 24, .55); padding: 4px 8px; border-radius: 6px; }
.cc-scene { margin: -16px -16px 4px; line-height: 0; border-radius: var(--r) var(--r) 0 0; overflow: hidden; }

/* Teléfono: llamada entrante */
.phone {
  display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 18px 22px; border-radius: 34px;
  background: linear-gradient(180deg, #1B2C45, #0A1426); color: #E9EEF5; box-shadow: var(--shadow); border: 6px solid #05090F;
}
.ph-top { font: 500 .8rem/1 var(--f-body); color: #9FB0C6; letter-spacing: .04em; }
.ph-pic .portrait { width: 96px; height: 96px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .08); animation: ring 1.4s ease-in-out 4; }
.ph-name { font: 800 1.5rem/1.15 var(--f-display); text-align: center; color: #fff; }
.ph-num { font-size: .82rem; color: #9FB0C6; }
.ph-slide { position: relative; width: 100%; max-width: 300px; height: 62px; margin-top: 18px; border-radius: 999px; background: rgba(255, 255, 255, .12); display: flex; align-items: center; }
.ph-slide span { position: absolute; left: 0; right: 0; text-align: center; font-size: .92rem; color: #C9D3E0; pointer-events: none; padding-left: 40px; }
.ph-knob { position: relative; z-index: 1; margin-left: 4px; width: 54px; height: 54px; border-radius: 50%; border: 0; background: #2EBD6B; color: #fff; display: grid; place-items: center; cursor: grab; touch-action: none; transition: transform .2s ease; }
.ph-knob svg { width: 24px; height: 24px; fill: #fff; stroke: none; }

/* Cliente de correo, chat y cartel */
.mail { padding: 0; overflow: hidden; }
.mailclient { display: flex; flex-direction: column; gap: 10px; padding: 0 16px 16px; }
.mc-bar { display: flex; justify-content: space-between; margin: 0 -16px; padding: 8px 16px; background: var(--card-2); font-size: .78rem; color: var(--muted); }
.mc-head { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.mc-head small { display: block; color: var(--muted); font-size: .76rem; overflow-wrap: anywhere; }
.mc-av { flex: none; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font: 800 1rem/1 var(--f-display); color: #fff; background: hsl(var(--h) 45% 42%); }
.chat { display: flex; flex-direction: column; }
.chat-bar { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 14px; color: #fff; background: #2B4A6B; }
.chat.wa .chat-bar { background: #1F6E55; }
.chat-bar small { display: block; font-size: .74rem; opacity: .8; }
.chat-body { padding: 16px 14px 20px; background: var(--card-2); min-height: 120px; }
.bubble { position: relative; max-width: 88%; padding: 10px 12px 18px; border-radius: 4px 14px 14px 14px; background: var(--card); font-size: .98rem; box-shadow: var(--shadow); }
.bubble span { position: absolute; right: 10px; bottom: 4px; font-size: .66rem; color: var(--muted); }
.poster { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px; text-align: center; background: #FFF7D6; color: #1D2633; border: 2px dashed #B7791F; }
.poster h3 { font: 800 1.3rem/1.1 var(--f-display); color: #1D2633; }
.poster-where { color: #6B5A2A !important; }
.qr { width: 120px; height: 120px; display: block; stroke: none; }
.mail.judged::after { z-index: 2; }

/* Terminal */
.term { background: #0D1622; border-radius: var(--r); overflow: hidden; }
.term-bar { display: flex; align-items: center; gap: 6px; padding: 8px 10px; background: #172335; }
.term-bar i { width: 10px; height: 10px; border-radius: 50%; background: #EC7A64; }
.term-bar i:nth-child(2) { background: #E3A64A; } .term-bar i:nth-child(3) { background: #45BDB3; }
.term-bar span { margin-left: 6px; font-size: .72rem; color: #7F8EA3; }
.term-cmd { padding: 8px 12px 0; font-size: .76rem; color: #7FC8F8; }
.term .log { border-radius: 0; }
.term-out { padding: 6px 12px 12px; }
.term-out p { font-size: .74rem; line-height: 1.5; color: #D6DFEA; white-space: pre-wrap; overflow-wrap: anywhere; }
.typed { animation: typein .25s ease-out both; animation-delay: calc(var(--d) * 110ms); }
@keyframes typein { from { opacity: 0; transform: translateY(3px); } }

/* Archivo histórico */
.cases { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.case { appearance: none; width: 100%; display: grid; grid-template-columns: 2.2em 1fr auto; gap: 10px; align-items: center; text-align: left;
  padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.case small { display: block; color: var(--muted); font-size: .8rem; }
.case > .mono { color: var(--brass); font-weight: 500; }
.case.locked { cursor: default; opacity: .6; border-style: dashed; background: transparent; }
.case.done { border-color: var(--teal); }
.case-head h2 { font-size: 1.6rem; margin-top: 4px; }
.case-p { font-size: 1rem; line-height: 1.6; }
.case-tl { margin: 0; padding-left: 1.3rem; display: flex; flex-direction: column; gap: 6px; }
.case-tl li::marker { font-family: var(--f-mono); color: var(--brass); }
.case-les { margin: 0; padding-left: 1.1rem; display: flex; flex-direction: column; gap: 6px; }
.case-modal h3 { font-size: 1.05rem; }

/* Álbum ATT&CK */
.tcards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.tcard { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; border: 1px dashed var(--line); background: transparent; min-width: 0; }
.tcard .mono { font-size: .74rem; color: var(--muted); }
.tcard b { font-size: .92rem; line-height: 1.2; color: var(--muted); }
.tcard .tac { align-self: flex-start; font: 500 .62rem/1.2 var(--f-mono); text-transform: uppercase; letter-spacing: .06em; padding: 3px 6px; border-radius: 5px; background: var(--card-2); color: var(--muted); }
.tcard small { font-size: .76rem; color: var(--muted); line-height: 1.35; }
.tcard.got { border-style: solid; border-color: var(--brass); background: var(--card); }
.tcard.got .mono { color: var(--brass); }
.tcard.got b { color: var(--ink); }
.tcard.got .tac { background: var(--brass-soft); color: var(--brass); }
.tcard .det { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 2px; }

/* ——— Ruta de aprendizaje: capacitación, lecciones y guías ——— */
.train { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--teal); }
.train.done { flex-direction: row; align-items: center; gap: 12px; border-color: var(--line); }
.train.done > div { flex: 1; }
.train-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.train-top .btn, .train.done .btn { min-height: 40px; padding: 8px 12px; font-size: .88rem; }
.train .eyebrow { color: var(--teal); }
.train-next, .ls-row {
  appearance: none; width: 100%; display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; text-align: left;
  padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font: inherit; cursor: pointer;
}
.train-next small, .ls-row small { display: block; color: var(--muted); font-size: .82rem; line-height: 1.35; }
.ls-state { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--teal); color: #fff; font: 700 .9rem/1 var(--f-body); }
.ls-row.done .ls-state { background: var(--teal-soft); color: var(--teal); }
.ls-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ls-head { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.ls-head h2 { font-size: 1.35rem; }
.ls-dots { display: flex; gap: 5px; }
.ls-dots i { flex: 1; height: 4px; border-radius: 2px; background: var(--card-2); }
.ls-dots i.on { background: var(--teal); } .ls-dots i.cur { background: var(--brass); }
.ls-card { display: flex; flex-direction: column; gap: 12px; padding: 18px 16px; border-radius: var(--r); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow); }
.ls-simple { font-size: 1.08rem; line-height: 1.65; }
.ls-body { font-size: 1.02rem; line-height: 1.65; }
.ls-body code { font-size: .88em; }
.ls-obj { margin: 0; padding-left: 1.2rem; display: flex; flex-direction: column; gap: 8px; }
.ls-done { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; padding: 30px 8px; }
.ls-done .portrait { width: 72px; height: 72px; }
.primer { border-color: var(--teal); border-width: 1.5px; }
.primer .t-label { color: var(--teal); }
.primer-ex { margin: 0; padding: 12px; border-radius: 10px; background: #0D1622; color: #D6DFEA; font-size: .76rem; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.primer-how { padding: 10px 12px; border-radius: 10px; background: var(--teal-soft); }
.card-btn:disabled { opacity: .5; cursor: default; }

/* ——— Vida: equipo por niveles, hogar, certificaciones y recuerdos ——— */
.shelf-it { position: relative; display: inline-block; }
.shelf-it i { position: absolute; right: -4px; bottom: -2px; font: 700 .62rem/1 var(--f-mono); color: #0F1B2D; background: #E0AC52; border-radius: 6px; padding: 2px 4px; font-style: normal; }
.item .up { color: var(--teal); }
.lv { display: inline-flex; gap: 4px; margin-top: 4px; }
.lv i { width: 16px; height: 5px; border-radius: 3px; background: var(--card-2); }
.lv i.on { background: var(--brass); }
.co-card.cert.got { border-color: var(--teal); }
.souv { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.souv li { display: flex; flex-direction: column; gap: 4px; padding: 8px; border-radius: 12px; background: var(--card); border: 1px solid var(--line); min-width: 0; }
.souv li.got { border-color: var(--brass); }
.souv b { font-size: .8rem; line-height: 1.2; }
.souv small { font-size: .72rem; color: var(--muted); }
.souv .btn.buy { min-height: 34px; padding: 6px; font-size: .74rem; }
.souv .st { align-self: flex-start; font-size: .6rem; }
.scene.mini { border-radius: 8px; }

@media (max-width: 360px) {
  .iata { font-size: 2.4rem; }
  .pass-stub dl { grid-template-columns: repeat(2, 1fr); }
  .board-head { display: none; }
  .board-row { grid-template-columns: 50px 1fr auto; }
  .b-gate { display: none; }
  .tally { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ——— Juegos interactivos y Sala de juegos ——— */
.gm-list { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.gm-list span { display: block; font-size: .88rem; line-height: 1.4; padding-left: 10px; border-left: 2px solid var(--line); }
.arcade-card { appearance: none; width: 100%; display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center; text-align: left; padding: 14px; border-radius: var(--r); border: 1px solid var(--line); background: linear-gradient(120deg, var(--teal-soft), var(--card) 70%); color: var(--ink); cursor: pointer; font: inherit; }
.arcade-card svg { width: 64px; height: 44px; fill: none; stroke: var(--teal); stroke-width: 2.4; stroke-linecap: round; }
.arcade-card b { display: block; font-family: var(--f-display); font-size: 1.15rem; }
.arcade-card small { display: block; color: var(--muted); font-size: .8rem; line-height: 1.3; margin-top: 2px; }
.ar-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ar-card { appearance: none; width: 100%; height: 100%; min-height: 128px; display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 12px; border-radius: var(--r); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: inherit; cursor: pointer; }
.ar-card b { font-family: var(--f-display); font-size: 1rem; }
.ar-card small { color: var(--muted); font-size: .78rem; line-height: 1.3; flex: 1; }
.ar-card .mono { color: var(--teal); }
.ar-card.locked { opacity: .55; cursor: default; }
.ar-card.locked .mono { color: var(--muted); }
#ar-res:empty { display: none; }

/* Caza de señales */
.spot-msg { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px; line-height: 1.9; }
.spot-msg p { margin: 0 0 8px; }
.spot-msg small { color: var(--muted); }
.sp-subj { font-weight: 600; }
.sg { padding: 2px 1px; border-radius: 4px; cursor: pointer; -webkit-tap-highlight-color: transparent; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.sg:focus-visible { outline: 2px solid var(--teal); }
.sg.hit { background: var(--danger-soft); color: var(--danger); text-decoration: underline wavy; text-underline-offset: 4px; }
.sg.miss { background: var(--card-2); text-decoration: line-through; color: var(--muted); }
.sg.missed { outline: 2px dashed var(--danger); outline-offset: 1px; }
.sg.off { cursor: default; }

/* Firewall en vivo */
.fw-rules { margin: 8px 0 0; padding-left: 18px; font-size: .86rem; line-height: 1.45; }
.fw-lane { position: relative; height: 230px; border-radius: var(--r); background: var(--night); overflow: hidden; background-image: linear-gradient(transparent 49%, rgba(233, 238, 245, .08) 50%, transparent 51%); }
.fw-server { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); display: grid; justify-items: center; gap: 4px; color: var(--night-ink); font: 500 .7rem/1 var(--f-mono); }
.fw-server svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.pkt { position: absolute; left: 0; min-width: 104px; min-height: 52px; white-space: nowrap; padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(233, 238, 245, .25); background: #1C2A40; color: var(--night-ink); display: flex; flex-direction: column; gap: 2px; font: inherit; text-align: left; cursor: pointer; will-change: transform; }
.pkt b { font-size: 1.1rem; white-space: nowrap; }
.pkt b small { font-size: .7rem; opacity: 1; }
.pkt small { font-size: .7rem; opacity: .85; }
.pkt.row-0 { top: 12px; }
.pkt.row-1 { top: 89px; }
.pkt.row-2 { top: 166px; }
.pkt.blocked { background: var(--danger); border-color: var(--danger); opacity: 0; transition: opacity .6s; }
.pkt.arrived { background: var(--teal); opacity: 0; transition: opacity .45s; }
.pkt.breach { background: var(--danger); box-shadow: 0 0 0 4px rgba(236, 122, 100, .4); opacity: 0; transition: opacity .45s; }
.fw-card { position: absolute; inset: 16px 70px 16px 16px; display: flex; flex-direction: column; justify-content: center; gap: 8px; color: var(--night-ink); }
.fw-card b { font-size: 1.4rem; }

/* Rueda del César */
.cz-wheel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px; }
.cz-wheel p { margin: 0 0 6px; }
.cz-strip { display: flex; gap: 4px; flex-wrap: wrap; }
.cz-strip span { display: grid; place-items: center; width: 28px; border-radius: 6px; background: var(--card-2); font-size: .8rem; line-height: 1.3; padding: 2px 0; }
.cz-strip b { color: var(--muted); font-weight: 500; }
.cz-ctrl { display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px; align-items: center; }
.cz-ctrl input { width: 100%; accent-color: var(--teal); }

/* Clave fuerte */
.pw-in { width: 100%; font-size: 1.1rem; padding: 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.pw-meter { height: 12px; border-radius: 6px; background: var(--card-2); overflow: hidden; }
.pw-meter i { display: block; height: 100%; width: 0; background: var(--danger); transition: width .25s, background .25s; }
.pw-meter i.warn { background: var(--warn); }
.pw-meter i.ok { background: var(--teal); }
.pw-time { margin: 0; font-size: .95rem; }
.pw-checks { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: .88rem; color: var(--muted); }
.pw-checks li.ok { color: var(--teal); font-weight: 600; }

/* Triaje */
.tr-timer { height: 8px; border-radius: 4px; background: var(--card-2); overflow: hidden; margin-top: 10px; }
.tr-timer i { display: block; height: 100%; background: var(--brass); transform-origin: left; animation: tr-shrink linear forwards; }
@keyframes tr-shrink { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.tr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tr-p { min-height: 64px; font-weight: 600; }
.tr-p.p1 { border-color: var(--danger); color: var(--danger); }
.tr-p.p2 { border-color: var(--warn); color: var(--warn); }
.tr-p.p3 { border-color: var(--teal); color: var(--teal); }
.tr-p.p4 { color: var(--muted); }

/* Segmenta la red */
.zn-items { display: flex; flex-wrap: wrap; gap: 8px; }
.zn-it { appearance: none; font: inherit; font-size: .86rem; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.zn-it.sel { border-color: var(--teal); box-shadow: 0 0 0 2px var(--teal); }
.zn-it.placed { display: none; }
.zn-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.zn-z { appearance: none; font: inherit; text-align: left; min-height: 120px; display: flex; flex-direction: column; gap: 4px; padding: 10px; border-radius: var(--r); border: 2px dashed var(--line); background: var(--card-2); color: var(--ink); cursor: pointer; }
.zn-z b { font-family: var(--f-display); font-size: .95rem; }
.zn-z small { color: var(--muted); font-size: .72rem; line-height: 1.25; }
.zn-in { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.zn-in i { font-style: normal; font-size: .75rem; padding: 4px 6px; border-radius: 6px; background: var(--card); }
.zn-in i.ok { background: var(--teal-soft); color: var(--teal); }
.zn-in i.bad { background: var(--danger-soft); color: var(--danger); text-decoration: line-through; }

/* ——— Campamento Linux y terminal simulada ——— */
.lx-term { background: #0D1622; border-radius: var(--r); overflow: hidden; border: 1px solid #1F2D42; }
.lx-scr { max-height: 44vh; min-height: 150px; overflow-y: auto; padding: 8px 12px 4px; -webkit-overflow-scrolling: touch; }
.lx-scr pre { margin: 0 0 4px; font: 400 .8rem/1.5 var(--f-mono); white-space: pre-wrap; overflow-wrap: anywhere; color: #D6DFEA; }
.lx-scr .lx-cmd { color: #E6EBF2; margin-top: 6px; }
.lx-scr .lx-err { color: #F2A08F; }
.lx-scr .lx-note { color: #7FD6CE; font-family: var(--f-body); font-size: .8rem; border-left: 2px solid #45BDB3; padding-left: 8px; }
.lx-term .u, .lx-ex .u { color: #8BD87A; font-weight: 500; }
.lx-term .d, .lx-ex .d { color: #7FB4F8; font-weight: 500; }
.lx-line { display: flex; align-items: center; gap: 6px; padding: 8px 12px 10px; border-top: 1px solid #1F2D42; background: #0A121D; }
.lx-ps { flex: none; font-size: .8rem; color: #D6DFEA; white-space: nowrap; max-width: 55%; overflow: hidden; text-overflow: ellipsis; }
.lx-line input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #FFFFFF; font-size: 16px; padding: 6px 0; caret-color: #8BD87A; }
.lx-line input:disabled { opacity: .5; }
.lx-send { flex: none; width: 40px; height: 36px; border-radius: 8px; border: 1px solid #2A3B55; background: #172335; color: #8BD87A; font: 600 1.05rem/1 var(--f-mono); cursor: pointer; }
.lx-peng { background: #E9EEF5; border-radius: 50%; padding: 3px; }
.lx-keys { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.lx-keys::-webkit-scrollbar { display: none; }
.lx-keys button { flex: none; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 500 1rem/1 var(--f-mono); cursor: pointer; }
.lx-ex { display: block; margin: 10px 0; padding: 10px 12px; background: #0D1622; color: #D6DFEA; border-radius: 10px; font: 400 .74rem/1.55 var(--f-mono); white-space: pre; overflow-x: auto; }
.lx-card ul, .lx-card ol { padding-left: 20px; margin: 8px 0; }
.lx-card li { margin: 4px 0; }
.lx-mission { padding: 14px; border-radius: var(--r); background: var(--card); border: 1.5px solid var(--brass); display: flex; flex-direction: column; gap: 8px; }
.lx-mission.ok { border-color: var(--teal); background: var(--teal-soft); }
.lx-mission p { margin: 0; }
.lx-goal { font-weight: 600; font-size: 1.02rem; line-height: 1.4; }
.lx-help { display: flex; gap: 8px; flex-wrap: wrap; }
.lx-help .btn { min-height: 40px; padding: 6px 12px; font-size: .88rem; }
.lx-extra code { word-break: break-all; }
.lx-hero { display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.lx-hero p { margin: 0; font-size: .95rem; line-height: 1.5; }
.lx-peng { width: 56px; height: 56px; flex: none; }
.ls-done .lx-peng { width: 96px; height: 96px; }
.lx-home .train-next .lx-peng { width: 40px; height: 40px; }
.ls-row:disabled { opacity: .55; cursor: default; }
.lx-cheat h3 { margin: 0 0 8px; }
.lx-cheat dl { margin: 0; display: flex; flex-direction: column; gap: 10px; }
.lx-cheat dt { font-weight: 600; font-size: .9rem; }
.lx-cheat dd { margin: 2px 0 0; font-size: .88rem; color: var(--muted); display: flex; flex-direction: column; gap: 4px; }
.lx-cheat dd code { align-self: flex-start; color: var(--ink); }
.camp-lock { padding: 14px; border-radius: var(--r); background: var(--brass-soft); display: flex; flex-direction: column; gap: 10px; }
.camp-lock p { margin: 0; }