:root {
  --bg: #050b0f; --panel: #0a151b; --panel-2: #0e1d24; --line: #203842;
  --text: #e8f2f1; --muted: #8ca2a6; --cyan: #4be1d2; --cyan-dim: #123d3d;
  --orange: #ff8a3d; --red: #ff4d5e; --yellow: #f0cc4e; --green: #55df91;
  --mono: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
  --sans: Inter, "Segoe UI", Arial, sans-serif;
}
* { box-sizing: border-box; }
html { min-height: 100%; background: var(--bg); }
body { margin: 0; min-height: 100vh; color: var(--text); background:
  radial-gradient(circle at 85% 18%, rgba(35, 137, 135, .13), transparent 26rem),
  radial-gradient(circle at 15% 80%, rgba(255, 77, 94, .06), transparent 26rem), var(--bg);
  font-family: var(--sans); letter-spacing: .01em; }
button, input { font: inherit; }
/* A complete base prevents browser-white buttons inheriting light text. */
button { color: #edf7fa; background: #132c39; border: 1px solid #7898a8; cursor: pointer; }
button:focus-visible, input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; }
.scanlines { position: fixed; inset: 0; pointer-events: none; z-index: 50; opacity: .13; background: repeating-linear-gradient(0deg, transparent 0 3px, rgba(255,255,255,.03) 4px); }
.topbar { height: 62px; display: flex; align-items: center; padding: 0 clamp(18px, 4vw, 58px); border-bottom: 1px solid var(--line); background: rgba(5,11,15,.9); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; color: var(--text); text-decoration: none; font-weight: 800; letter-spacing: .17em; }
.brand-mark { display: grid; place-items: center; width: 31px; height: 31px; border: 1px solid var(--cyan); color: var(--cyan); clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); }
.operator { margin-left: auto; color: var(--muted); font: 11px var(--mono); letter-spacing: .08em; max-width: 45vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sound-toggle { margin-left: 24px; padding: 8px 12px; color: var(--cyan); border: 1px solid var(--line); background: transparent; font: 10px var(--mono); letter-spacing: .08em; cursor: pointer; }
main { min-height: calc(100vh - 62px); display: grid; align-items: center; }
.screen { width: min(960px, calc(100% - 36px)); margin: 0 auto; padding: 52px 0 70px; animation: enter .35s ease both; }
.screen.wide { width: min(1240px, calc(100% - 36px)); }
@keyframes enter { from { opacity: 0; transform: translateY(8px); } }
.eyebrow, .timecode { color: var(--cyan); font: 11px var(--mono); letter-spacing: .15em; text-transform: uppercase; }
h1 { margin: 10px 0; font-size: clamp(36px, 7vw, 78px); line-height: .98; letter-spacing: -.045em; }
h1 em { color: var(--cyan); font-style: normal; font-weight: 300; }
h2 { font-weight: 400; }
p { line-height: 1.65; }
.lede { max-width: 540px; color: var(--muted); font-size: 18px; }
.system-status { display: inline-flex; gap: 9px; align-items: center; padding: 8px 12px; font: 10px var(--mono); letter-spacing: .11em; border: 1px solid var(--line); background: rgba(7,15,19,.8); }
.system-status span, .pulse { width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 10px currentColor; animation: pulse 1.5s infinite; }
.system-status.danger { color: var(--red); border-color: rgba(255,77,94,.35); }
.system-status.warning { color: var(--yellow); border-color: rgba(240,204,78,.35); }
@keyframes pulse { 50% { opacity: .3; } }
.access-grid { display: grid; grid-template-columns: 1.25fr .75fr; gap: 60px; align-items: center; }
.access-form { margin-top: 38px; max-width: 600px; }
.access-form label, #codeForm label { display: block; margin-bottom: 9px; color: var(--muted); font: 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.input-row { height: 58px; display: flex; align-items: center; padding: 0 18px; border: 1px solid #32505a; background: #071116; }
.input-row span { color: var(--cyan); font-family: var(--mono); }
.input-row input { width: 100%; height: 100%; padding: 0 14px; color: var(--text); background: transparent; border: 0; outline: 0; font-family: var(--mono); }
.primary, .secondary { border: 0; cursor: pointer; min-height: 48px; padding: 0 22px; font: 700 11px var(--mono); letter-spacing: .08em; transition: transform .15s, filter .15s, background .15s; }
.primary { color: #04100f; background: var(--cyan); box-shadow: 0 0 24px rgba(75,225,210,.12); }
.primary:hover, .secondary:hover { filter: brightness(1.1); transform: translateY(-1px); }
.primary:disabled, .secondary:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.access-form .primary { margin-top: 16px; width: 100%; display: flex; align-items: center; justify-content: space-between; }
.primary.large { min-height: 58px; padding-inline: 28px; }
.primary.centered { display: block; margin: 28px auto 0; }
.secondary { border: 1px solid #35525c; color: var(--text); background: #0b1a20; }
.privacy-note { color: #60757b; font-size: 12px; }
.form-error, .inline-feedback { min-height: 26px; color: var(--red); font: 12px/1.6 var(--mono); }
.nexus-core { position: relative; width: min(330px, 70vw); aspect-ratio: 1; margin: auto; display: grid; place-items: center; }
.core-ring { position: absolute; border-radius: 50%; border: 1px solid rgba(75,225,210,.35); }
.ring-a { inset: 8%; border-style: dashed; animation: spin 18s linear infinite; }
.ring-b { inset: 22%; border-color: rgba(255,77,94,.5); border-width: 2px; border-top-color: transparent; animation: spin 7s linear infinite reverse; }
@keyframes spin { to { transform: rotate(360deg); } }
.core-eye { width: 31%; aspect-ratio: 1; display: grid; place-items: center; color: var(--red); font: 800 clamp(30px, 6vw, 62px) var(--mono); border: 1px solid var(--red); background: radial-gradient(circle, rgba(255,77,94,.22), #071015 65%); box-shadow: 0 0 50px rgba(255,77,94,.18); clip-path: polygon(25% 0,75% 0,100% 25%,100% 75%,75% 100%,25% 100%,0 75%,0 25%); }
.core-label { position: absolute; bottom: 3%; color: var(--red); font: 10px var(--mono); letter-spacing: .1em; }
.briefing { max-width: 780px; }
.briefing h1 { margin: 25px 0 0; color: var(--cyan); font-size: clamp(60px, 12vw, 120px); }
.briefing h2 { margin: 0 0 28px; color: var(--muted); }
.transmission { border-left: 2px solid var(--red); padding: 2px 26px; background: linear-gradient(90deg, rgba(255,77,94,.06), transparent); }
.transmission p { margin: 8px 0; }
.transmission .commands { margin-top: 20px; font-family: var(--mono); color: var(--text); letter-spacing: .08em; }
.identified { display: flex; gap: 14px; align-items: center; margin: 28px 0; }
.identified > span { display: grid; place-items: center; width: 34px; height: 34px; color: var(--green); border: 1px solid var(--green); border-radius: 50%; }
.identified strong, .identified small { display: block; font: 11px var(--mono); letter-spacing: .1em; }
.identified small { margin-top: 5px; color: var(--muted); }
.hub-head { display: flex; justify-content: space-between; gap: 30px; align-items: end; margin-bottom: 30px; }
.hub-head h1 { font-size: clamp(38px, 5vw, 64px); }
.hub-head p { color: var(--muted); }
.metrics { display: flex; gap: 1px; flex-shrink: 0; background: var(--line); border: 1px solid var(--line); }
.metrics > div { min-width: 155px; padding: 18px; background: var(--panel); }
.metrics strong, .metrics span { display: block; }
.metrics strong { color: var(--cyan); font: 28px var(--mono); }
.metrics span { margin-top: 7px; color: var(--muted); font-size: 10px; text-transform: uppercase; }
.map-panel { position: relative; min-height: 460px; padding: 34px; overflow: hidden; border: 1px solid var(--line); background: rgba(8,19,24,.78); }
.map-grid { position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(var(--cyan) 1px, transparent 1px), linear-gradient(90deg, var(--cyan) 1px, transparent 1px); background-size: 36px 36px; mask-image: radial-gradient(circle, #000, transparent 75%); }
.subsystems { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.subsystem { position: relative; min-height: 175px; padding: 20px; text-align: left; overflow: hidden; cursor: pointer; border: 1px solid #29434c; background: linear-gradient(145deg, rgba(15,34,42,.96), rgba(7,17,22,.96)); transition: .2s; }
.subsystem:hover { border-color: var(--cyan); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,.28); }
.subsystem::after { content: ""; position: absolute; inset: auto 0 0; height: 3px; background: var(--red); box-shadow: 0 0 12px var(--red); }
.subsystem.recovered { border-color: rgba(85,223,145,.45); cursor: default; }
.subsystem.recovered::after { background: var(--green); box-shadow: 0 0 12px var(--green); }
.node-icon { display: grid; place-items: center; width: 54px; height: 54px; color: var(--cyan); border: 1px solid var(--cyan-dim); border-radius: 50%; font: 12px var(--mono); }
.node-number { position: absolute; top: 18px; right: 18px; color: #53696f; font: 12px var(--mono); }
.subsystem strong, .subsystem small { display: block; }
.subsystem strong { margin-top: 22px; font: 700 13px var(--mono); letter-spacing: .08em; }
.subsystem small { margin-top: 7px; color: var(--red); font: 9px var(--mono); letter-spacing: .08em; }
.subsystem.recovered small { color: var(--green); }
.status-strip { margin-top: 18px; display: flex; align-items: center; gap: 13px; color: #60757b; font: 9px var(--mono); letter-spacing: .08em; }
.status-strip .pulse { color: var(--red); background: var(--red); }
.status-strip i { width: 1px; height: 14px; background: var(--line); }
.console-ready { margin-top: 18px; display: flex; justify-content: space-between; gap: 20px; align-items: center; padding: 20px; border: 1px solid rgba(85,223,145,.4); background: rgba(85,223,145,.06); }
.console-ready strong, .console-ready span { display: block; }
.console-ready strong { color: var(--green); font: 12px var(--mono); }
.console-ready span { margin-top: 5px; color: var(--muted); font-size: 13px; }
.back-button { margin-bottom: 28px; padding: 0; color: var(--muted); border: 0; background: transparent; cursor: pointer; font: 10px var(--mono); letter-spacing: .08em; }
.back-button:hover { color: var(--cyan); }
.mission-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.mission-head h1 { font-size: clamp(38px, 6vw, 68px); }
.mission-chip { width: 70px; height: 70px; display: grid; place-items: center; flex-shrink: 0; color: var(--red); border: 1px solid var(--red); font: 13px var(--mono); clip-path: polygon(20% 0,80% 0,100% 20%,100% 80%,80% 100%,20% 100%,0 80%,0 20%); }
.scenario { margin: 24px 0 18px; padding: 18px 20px; display: grid; grid-template-columns: 150px 1fr; gap: 20px; border: 1px solid var(--line); background: rgba(10,21,27,.75); }
.scenario span { color: var(--orange); font: 10px var(--mono); letter-spacing: .08em; }
.scenario p { margin: 0; }
.instruction { color: var(--muted); }
.resource-grid, .question-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 28px 0; }
.resource-card, .question-card { min-height: 115px; padding: 17px; text-align: left; cursor: pointer; border: 1px solid #28414a; background: var(--panel); transition: .15s; }
.resource-card:hover, .question-card:hover { border-color: var(--cyan); }
.resource-card.selected { border-color: var(--cyan); background: rgba(75,225,210,.09); box-shadow: inset 0 0 20px rgba(75,225,210,.04); }
.resource-signal { display: block; width: 8px; height: 8px; margin-bottom: 17px; border-radius: 50%; background: #39515a; }
.selected .resource-signal { background: var(--cyan); box-shadow: 0 0 10px var(--cyan); }
.resource-card strong, .resource-card small, .question-card strong, .question-card small { display: block; }
.resource-card strong, .question-card strong { font-size: 13px; }
.resource-card small, .question-card small { margin-top: 7px; color: var(--muted); line-height: 1.35; }
.mission-actions { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line); }
.hint { margin-top: 12px; padding: 16px; color: #d9d2a8; border: 1px solid rgba(240,204,78,.3); background: rgba(240,204,78,.06); }
.hint strong { color: var(--yellow); font: 10px var(--mono); letter-spacing: .1em; }
.hint p { margin: 8px 0 0; }
.call-panel { display: flex; align-items: center; gap: 20px; margin: 28px 0; padding: 22px; border: 1px solid rgba(255,77,94,.45); background: rgba(255,77,94,.05); }
.call-panel.active { border-color: rgba(75,225,210,.4); }
.call-panel > div:nth-child(2) { flex: 1; }
.call-panel strong, .call-panel span { display: block; }
.call-panel strong { color: var(--red); font: 12px var(--mono); }
.call-panel.active strong { color: var(--cyan); }
.call-panel span { margin-top: 5px; color: var(--muted); font-size: 12px; }
.wave { display: flex; align-items: center; gap: 3px; width: 100px; height: 40px; }
.wave i { flex: 1; height: var(--h); background: var(--red); animation: wave 1.2s ease-in-out infinite alternate; animation-delay: calc(var(--h) * -8ms); }
.active .wave i { background: var(--cyan); }
@keyframes wave { to { height: 15%; opacity: .35; } }
.question-card > span { display: block; margin-bottom: 13px; color: var(--orange); font: 9px var(--mono); letter-spacing: .08em; }
.question-card.confirmed { border-color: rgba(85,223,145,.35); opacity: .7; }
.question-card.confirmed > span { color: var(--green); }
.triage-progress, .audit-progress { margin: 25px 0 10px; color: var(--muted); font: 10px var(--mono); letter-spacing: .08em; }
.triage-progress strong, .audit-progress strong { color: var(--cyan); }
.victim-card, .audit-card, .decision-card { border: 1px solid var(--line); background: linear-gradient(150deg, #0f2028, #091319); }
.victim-card header { display: flex; justify-content: space-between; padding: 15px 20px; border-bottom: 1px solid var(--line); color: var(--cyan); font: 11px var(--mono); letter-spacing: .08em; }
.victim-card > p { padding: 12px 20px; font-size: 18px; }
.vitals { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--line); border-top: 1px solid var(--line); }
.vitals span { padding: 14px 20px; background: #0a161c; font: 12px var(--mono); }
.triage-options { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-top: 15px; }
.triage-options button { min-height: 52px; cursor: pointer; text-align: left; padding: 0 18px; border: 1px solid currentColor; background: #0b151a; font: 700 11px var(--mono); letter-spacing: .06em; }
.triage-red { color: #ff6674; }.triage-yellow { color: #f0cc4e; }.triage-green { color: #55df91; }.triage-black { color: #c1cbd0; }
.audit-card { min-height: 240px; display: grid; place-items: center; align-content: center; padding: 35px; text-align: center; position: relative; }
.audit-target, .decision-card > span { position: absolute; top: 16px; left: 18px; color: var(--orange); font: 10px var(--mono); letter-spacing: .08em; }
.device-icon { display: grid; place-items: center; width: 58px; height: 58px; color: var(--cyan); border: 1px solid var(--cyan); font-size: 26px; }
.audit-card h2 { max-width: 600px; margin: 24px 0 0; }
.binary-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.binary-options button { min-height: 56px; cursor: pointer; background: #0c171c; font: 700 11px var(--mono); }
.danger-action { color: var(--red); border: 1px solid var(--red); }.safe-action { color: var(--green); border: 1px solid var(--green); }
.decision-card { min-height: 180px; display: grid; place-items: center; padding: 45px 30px 25px; text-align: center; position: relative; }
.decision-card h2 { max-width: 720px; }
.decision-options { display: grid; gap: 9px; margin-top: 12px; }
.decision-options button { display: grid; grid-template-columns: 52px 1fr; align-items: center; min-height: 58px; padding: 0 18px 0 0; text-align: left; cursor: pointer; border: 1px solid var(--line); background: var(--panel); }
.decision-options button:hover { border-color: var(--cyan); }
.decision-options span { display: grid; place-items: center; align-self: stretch; margin-right: 16px; color: var(--cyan); border-right: 1px solid var(--line); font: 11px var(--mono); }
.recovery-screen, .reboot, .console-screen { text-align: center; }
.recovery-icon { margin: 0 auto 25px; width: 80px; height: 80px; display: grid; place-items: center; color: var(--green); border: 1px solid var(--green); border-radius: 50%; font-size: 38px; box-shadow: 0 0 45px rgba(85,223,145,.15); }
.recovery-screen h1 { font-size: clamp(36px, 6vw, 66px); }
.digit-reveal { width: 190px; margin: 35px auto; padding: 18px; border: 1px solid var(--cyan); background: rgba(75,225,210,.05); }
.digit-reveal span { display: block; color: var(--muted); font: 9px var(--mono); letter-spacing: .08em; }
.digit-reveal strong { display: block; margin-top: 8px; color: var(--cyan); font: 68px var(--mono); }
.console-screen { max-width: 820px; margin: auto; }
.console-screen h1 { font-size: clamp(38px, 6vw, 67px); }
.digit-memory { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 30px 0; }
.digit-memory div { padding: 12px; border: 1px solid var(--line); background: var(--panel); }
.digit-memory span, .digit-memory strong { display: block; }
.digit-memory span { color: var(--muted); font: 9px var(--mono); }
.digit-memory strong { margin-top: 7px; color: var(--cyan); font: 24px var(--mono); }
#codeForm { max-width: 480px; margin: auto; }
#finalCode { width: 100%; height: 82px; margin-bottom: 12px; text-align: center; color: var(--cyan); border: 1px solid #38545d; background: #071116; font: 46px var(--mono); letter-spacing: .35em; text-indent: .35em; }
#codeForm button { width: 100%; }
.console-screen .back-button { margin-top: 20px; }
.reboot .nexus-core.compact { width: 220px; }
.reboot-log { max-width: 500px; min-height: 150px; margin: 25px auto; padding: 15px; text-align: left; border: 1px solid var(--line); background: var(--panel); }
.reboot-log p { margin: 5px 0; color: var(--green); font: 11px var(--mono); }
.success-banner { display: flex; align-items: center; gap: 25px; }
.success-banner > span { width: 70px; height: 70px; display: grid; place-items: center; flex-shrink: 0; color: var(--green); border: 1px solid var(--green); border-radius: 50%; font-size: 32px; }
.success-banner p { margin: 0; color: var(--green); font: 11px var(--mono); letter-spacing: .12em; }
.success-banner h1 { margin: 4px 0 0; font-size: clamp(38px, 6vw, 70px); }
.result-operator { color: var(--muted); }
.score-panel { display: grid; grid-template-columns: 260px 1fr; gap: 1px; margin-top: 30px; background: var(--line); border: 1px solid var(--line); }
.score-panel > div { background: var(--panel); }
.score { padding: 28px; }
.score span { display: block; color: var(--cyan); font: 10px var(--mono); letter-spacing: .1em; }
.score strong { color: var(--cyan); font: 68px var(--mono); }
.score small { color: var(--muted); }
.result-metrics { display: grid; grid-template-columns: repeat(3, 1fr); }
.result-metrics > div { padding: 28px; border-left: 1px solid var(--line); }
.result-metrics strong, .result-metrics span { display: block; }
.result-metrics strong { font: 22px var(--mono); }
.result-metrics span { margin-top: 10px; color: var(--muted); font-size: 11px; }
.section-title { margin-top: 35px; font: 11px var(--mono); letter-spacing: .12em; color: var(--muted); }
.area-results { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.area-results > div { padding: 18px; border: 1px solid var(--line); background: var(--panel); }
.area-results span, .area-results strong { display: block; }
.area-results span { min-height: 26px; color: var(--muted); font: 9px var(--mono); }
.area-results strong { margin-top: 9px; }
.result-note { color: var(--green); font: 11px var(--mono); }
.toast-region { position: fixed; z-index: 80; right: 20px; bottom: 20px; display: grid; gap: 8px; width: min(420px, calc(100% - 40px)); }
.toast { padding: 14px 16px; color: var(--text); border: 1px solid var(--line); background: #0d1a20; box-shadow: 0 10px 35px rgba(0,0,0,.4); font: 11px/1.5 var(--mono); animation: enter .2s; }
.toast.error { border-color: var(--red); }.toast.ok { border-color: var(--green); }.toast.warning { border-color: var(--yellow); }

/* Panel del profesor */
.teacher-body { background: #f3f6f7; color: #132229; }
.teacher-body .topbar { color: var(--text); }
.teacher-body main { display: block; }
.teacher-screen { width: min(1240px, calc(100% - 36px)); margin: auto; padding: 42px 0 70px; }
.teacher-login { max-width: 480px; margin: 8vh auto; padding: 34px; color: var(--text); border: 1px solid var(--line); background: var(--panel); }
.teacher-login h1 { font-size: 38px; letter-spacing: -.02em; }
.teacher-login input { width: 100%; height: 54px; padding: 0 15px; color: var(--text); border: 1px solid #38525c; background: #071116; }
.teacher-login button { width: 100%; margin-top: 12px; }
.teacher-header { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.teacher-header h1 { margin: 0; font-size: 38px; letter-spacing: -.02em; }
.teacher-header p { margin: 5px 0 0; color: #60737b; }
.teacher-actions { display: flex; gap: 8px; }
.teacher-actions .secondary { color: #183039; background: white; }
.stats-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 28px 0 10px; }
.stat-card { padding: 20px; border: 1px solid #d7e0e3; background: white; }
.stat-card span, .stat-card strong { display: block; }
.stat-card span { color: #657980; font-size: 11px; }
.stat-card strong { margin-top: 10px; color: #10262e; font: 26px var(--mono); }
.hardest { padding: 15px 18px; color: #473519; border: 1px solid #ecd79f; background: #fff9e8; }
.hardest strong { color: #9a6200; }
.diagnostic-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 10px; margin-top: 10px; }
.diagnostic-card { display: grid; gap: 7px; padding: 16px 18px; border: 1px solid #d5dfe2; background: white; }
.diagnostic-card span { color: #60737b; font: 9px var(--mono); letter-spacing: .08em; }
.diagnostic-card strong { color: #17363e; font-size: 15px; }.diagnostic-card small { color: #60737b; }
.filters { display: grid; grid-template-columns: 1fr 190px 190px; gap: 10px; margin-top: 24px; }
.filters input, .filters select { height: 46px; padding: 0 13px; border: 1px solid #ccd8dc; background: white; color: #183039; }
.results-wrap { overflow: auto; margin-top: 12px; border: 1px solid #d5dfe2; background: white; }
.results-table { width: 100%; border-collapse: collapse; min-width: 850px; }
.results-table th, .results-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid #e2e8ea; }
.results-table th { color: #5c7078; background: #f7f9fa; font: 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.results-table tr[data-id] { cursor: pointer; }
.results-table tr[data-id]:hover { background: #f2fbfa; }
.score-badge { display: inline-block; min-width: 50px; padding: 5px 7px; text-align: center; color: #0c584f; background: #def7f1; font: 700 12px var(--mono); }
.status-badge { color: #217049; font-size: 11px; }.status-badge.ongoing { color: #9a6200; }
.empty-state { padding: 45px; text-align: center; color: #60737b; }
.modal-backdrop { position: fixed; z-index: 90; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(3,9,12,.76); }
.detail-modal { width: min(850px, 100%); max-height: 90vh; overflow: auto; padding: 28px; color: #172a31; background: #f7f9fa; box-shadow: 0 20px 80px rgba(0,0,0,.5); }
.detail-modal header { display: flex; justify-content: space-between; gap: 20px; }
.detail-modal h2 { margin: 0; font-size: 28px; }
.close-modal { width: 36px; height: 36px; cursor: pointer; border: 1px solid #c9d5d8; background: white; }
.detail-summary { display: flex; gap: 20px; margin: 18px 0; color: #5d7078; }
.detail-areas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.detail-areas > div { padding: 14px; border: 1px solid #d5dfe2; background: white; }
.detail-areas span, .detail-areas strong { display: block; }
.detail-areas span { min-height: 28px; font-size: 10px; color: #60737b; }.detail-areas strong { margin-top: 5px; }
.detail-subtitle { margin: 18px 0 8px; font-size: 13px; }
.activity-error-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.activity-error-grid > div { display: flex; justify-content: space-between; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid #d8e1e4; background: white; }
.activity-error-grid span { color: #587078; font-size: 10px; }.activity-error-grid strong { color: #1f5f65; font: 16px var(--mono); }
.activity-error-grid .has-errors { border-left: 3px solid #dc5360; }.activity-error-grid .has-errors strong { color: #b8293b; }
.triage-teacher-summary { display: grid; grid-template-columns: 1fr 70px; gap: 5px 16px; align-items: center; margin-top: 10px; padding: 14px; border: 1px solid #c8dadd; border-left: 4px solid #26a9b4; background: #f7fbfb; }.triage-teacher-summary span { color: #47636b; font-size: 10px; font-weight: 700; }.triage-teacher-summary strong { grid-row: 1 / 3; grid-column: 2; text-align: center; color: #17363e; font-size: 28px; }.triage-teacher-summary small { color: #60737b; line-height: 1.45; }
.classification-teacher-summary { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin-top: 8px; }
.classification-teacher-summary article { display: grid; gap: 5px; padding: 14px; border: 1px solid #c8dadd; background: #f7fbfb; }
.classification-teacher-summary span { color: #47636b; font-size: 10px; font-weight: 700; }.classification-teacher-summary strong { color: #17363e; }.classification-teacher-summary small { color: #60737b; line-height: 1.45; }
.event-list { margin-top: 18px; }
.event-list h3 { font-size: 14px; }
.event-list article { padding: 12px 14px; border-left: 3px solid #dc5360; border-bottom: 1px solid #dce4e6; background: white; }
.event-list article.hint-event { border-left-color: #dbad36; }
.event-list strong, .event-list span { display: block; }
.event-list strong { font-size: 12px; }.event-list span { margin-top: 3px; color: #60737b; font-size: 11px; }

/* Iteración narrativa · lenguaje de viñeta 2D */
.character-portrait { display: block; object-fit: cover; object-position: 50% 18%; }
.nexus-avatar { position: relative; width: 180px; aspect-ratio: 1; display: grid; place-items: center; color: var(--red); }
.nexus-avatar::before, .nexus-avatar::after, .nexus-avatar > i { content: ""; position: absolute; inset: 7%; border: 3px solid currentColor; clip-path: polygon(22% 0,78% 0,100% 22%,100% 78%,78% 100%,22% 100%,0 78%,0 22%); }
.nexus-avatar::after { inset: 20%; border-width: 1px; transform: rotate(22.5deg); opacity: .55; }
.nexus-avatar > i:nth-child(1) { inset: 1%; border-style: dashed; opacity: .35; animation: spin 18s linear infinite; }
.nexus-avatar > i:nth-child(2) { inset: 32%; border-color: transparent; background: currentColor; opacity: .1; }
.nexus-avatar span { position: relative; z-index: 2; font: 800 58px var(--mono); text-shadow: 0 0 22px currentColor; }
.nexus-avatar b { position: absolute; z-index: 3; width: 52%; height: 2px; background: currentColor; box-shadow: 0 -17px 0 rgba(255,77,94,.35), 0 17px 0 rgba(255,77,94,.35); }
.nexus-avatar.small { width: 74px; flex: 0 0 74px; }.nexus-avatar.small span { font-size: 25px; }

.story-stage { min-height: 650px; display: grid; grid-template-columns: 1.35fr .85fr; overflow: hidden; border: 1px solid #29434c; background: #081219; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.story-art { position: relative; min-height: 650px; overflow: hidden; background-image: linear-gradient(90deg, transparent 45%, #081219 100%), var(--story-bg); background-position: center; background-size: cover; }
.story-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, rgba(4,11,15,.35), transparent 35%), repeating-linear-gradient(0deg, transparent 0 7px, rgba(67,212,206,.035) 8px); }
.story-art.normal { filter: saturate(.72); }.story-art.alert, .story-art.threat { filter: saturate(1.15); }
.story-art.alert::before, .story-art.threat::before { content: ""; position: absolute; inset: 0; z-index: 1; border: 8px solid rgba(239,71,85,.35); box-shadow: inset 0 0 90px rgba(239,71,85,.23); }
.story-scan { position: absolute; z-index: 5; inset: 16px 18px auto; display: flex; justify-content: space-between; color: #a7e4e0; font: 10px var(--mono); letter-spacing: .12em; }
.story-core { position: absolute; z-index: 3; inset: 0; display: grid; place-items: center; background: radial-gradient(circle, rgba(239,71,85,.18), transparent 42%); }
.story-core .nexus-avatar { width: 240px; }
.story-character { position: absolute; z-index: 3; bottom: -7%; left: 4%; width: 72%; height: 100%; object-position: 50% 10%; filter: drop-shadow(15px 0 0 rgba(4,11,15,.5)); clip-path: polygon(4% 0,100% 0,100% 93%,86% 100%,0 100%,0 5%); }
.story-art:has(.story-character)::before { content: ""; position: absolute; z-index: 2; inset: 12% 6% 7%; border: 2px solid rgba(67,212,206,.55); clip-path: polygon(3% 0,100% 0,100% 93%,94% 100%,0 100%,0 5%); }
.story-alerts { position: absolute; z-index: 4; right: 20px; bottom: 18px; display: grid; grid-template-columns: repeat(3, 18px); gap: 8px; }
.story-alerts i { height: 7px; background: var(--red); box-shadow: 0 0 8px var(--red); }.normal .story-alerts i { background: var(--green); box-shadow: none; }
.story-copy { position: relative; z-index: 6; display: flex; flex-direction: column; justify-content: center; padding: clamp(28px, 5vw, 62px); }
.story-speaker { margin: 24px 0 0; color: var(--cyan); font: 10px var(--mono); letter-spacing: .12em; }
.story-copy h1 { margin: 10px 0 22px; font-size: clamp(38px, 5vw, 66px); }
.speech-bubble { position: relative; padding: 22px; border: 2px solid #31525d; background: #0e2028; box-shadow: 8px 8px 0 #050b0f; }
.speech-bubble::before { content: ""; position: absolute; left: -18px; top: 32px; width: 24px; height: 24px; border-left: 2px solid #31525d; border-bottom: 2px solid #31525d; background: #0e2028; transform: rotate(45deg); }
.speech-bubble.nexus-speech { border-color: rgba(239,71,85,.65); color: #ffdfe2; }.speech-bubble.nexus-speech::before { border-color: rgba(239,71,85,.65); }
.speech-bubble p { margin: 0; font-size: 18px; line-height: 1.55; }.speech-bubble small { display: block; margin-top: 14px; padding-top: 12px; color: var(--muted); border-top: 1px solid var(--line); line-height: 1.5; }
.operator-assignment { margin-top: 15px; padding: 14px; border-left: 3px solid var(--cyan); background: rgba(67,212,206,.07); }
.operator-assignment span, .operator-assignment strong { display: block; }.operator-assignment span { color: var(--muted); font: 9px var(--mono); }.operator-assignment strong { margin-top: 5px; }
.story-controls { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 30px; }
.story-dots { display: flex; gap: 7px; }.story-dots i { width: 18px; height: 3px; background: #28424b; }.story-dots i.active { background: var(--cyan); }

.hub-story { position: relative; height: 310px; margin-bottom: 28px; overflow: hidden; border: 1px solid var(--line); background: #0a171d; }
.hub-scene { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(5,11,15,.55) 70%, #050b0f 100%), var(--hub-bg) center 53% / cover; opacity: .88; }
.hub-nexus, .hub-guidance { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; border: 1px solid; background: rgba(5,11,15,.93); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }
.hub-nexus { top: 22px; right: 22px; width: min(440px, 55%); padding: 11px 16px 11px 8px; border-color: rgba(239,71,85,.55); }
.hub-guidance { bottom: 22px; left: 22px; width: min(470px, 60%); min-height: 92px; padding-right: 16px; border-color: rgba(67,212,206,.55); }
.hub-guidance img { width: 90px; height: 90px; object-position: 50% 18%; border-right: 2px solid var(--cyan); }
.hub-nexus span, .hub-guidance span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }.hub-nexus span { color: var(--red); }
.hub-nexus p, .hub-guidance p { margin: 5px 0 0; line-height: 1.4; font-size: 13px; }
.node-scene { position: absolute; z-index: 0; inset: 0 0 47%; background-size: cover; background-position: center; opacity: .42; border-bottom: 1px solid var(--line); filter: saturate(.8); }
.subsystem:hover .node-scene, .subsystem.recovered .node-scene { opacity: .7; filter: saturate(1.1); }
.subsystem .node-icon, .subsystem .node-number, .subsystem strong, .subsystem small { position: relative; z-index: 2; }
.subsystem .node-icon { margin-top: 43px; background: rgba(5,11,15,.87); }

.mission-visual { position: relative; height: 260px; margin: 24px 0 0; overflow: hidden; border: 1px solid #29434c; background-size: cover; background-position: center; box-shadow: inset 0 -70px 80px rgba(4,11,15,.4); }
.mission-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 45%, rgba(5,11,15,.58)); pointer-events: none; }
.mission-visual-tag { position: absolute; z-index: 2; right: 18px; bottom: 18px; width: min(440px, 62%); padding: 14px 17px; border-left: 3px solid var(--orange); background: rgba(5,11,15,.9); }
.mission-visual-tag span, .instruction-panel > span { color: var(--orange); font: 9px var(--mono); letter-spacing: .1em; }.mission-visual-tag p { margin: 5px 0 0; line-height: 1.4; font-size: 13px; }
.visual-crosshair { position: absolute; z-index: 2; top: 18px; left: 18px; width: 38px; height: 38px; border: 1px solid var(--cyan); border-radius: 50%; }.visual-crosshair::before, .visual-crosshair::after { content: ""; position: absolute; background: var(--cyan); }.visual-crosshair::before { width: 52px; height: 1px; top: 18px; left: -7px; }.visual-crosshair::after { width: 1px; height: 52px; left: 18px; top: -7px; }
.instruction-panel { display: grid; grid-template-columns: 170px 1fr; gap: 18px; padding: 16px 20px; border: 1px solid var(--line); border-top: 0; background: #0b181e; }.instruction-panel p { margin: 0; line-height: 1.45; color: #c7d4d4; }

.comic-icon { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; }
.resource-card { min-height: 156px; padding-top: 15px; }
.resource-illustration { float: left; width: 54px; height: 54px; margin: 0 14px 12px 0; padding: 8px; color: #6e8991; border: 1px solid #28434c; background: #071218; }
.resource-card.selected .resource-illustration { color: var(--cyan); border-color: var(--cyan); }
.resource-signal { position: absolute; top: 15px; right: 15px; }.resource-card { position: relative; }.resource-card strong { clear: both; }

/* Tablero táctico de Logística · arrastrar, soltar o tocar */
.field-briefing { display: grid; grid-template-columns: 76px 1fr 110px; align-items: center; gap: 16px; margin: 22px 0 14px; overflow: hidden; border: 1px solid rgba(67,212,206,.5); background: linear-gradient(90deg, rgba(11,30,38,.98), rgba(6,16,22,.98)); box-shadow: 7px 7px 0 rgba(0,0,0,.25); }
.field-briefing > img { width: 76px; height: 88px; border-right: 2px solid var(--cyan); }
.field-briefing span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }.field-briefing p { margin: 5px 0; font-size: 14px; line-height: 1.45; }
.field-briefing > strong { min-width: 100px; padding: 12px; text-align: center; color: var(--cyan); border-left: 1px solid var(--line); font: 30px var(--mono); }
.field-briefing > strong small { display: block; margin-top: 4px; color: var(--muted); font: 8px var(--mono); letter-spacing: .08em; }
.deployment-board { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.resource-bay, .deployment-zone { position: relative; min-height: 410px; padding: 14px; overflow: hidden; border: 1px solid #284852; background: linear-gradient(150deg, rgba(10,26,34,.98), rgba(5,13,18,.98)); transition: border-color .15s, box-shadow .15s, background .15s; }
.resource-bay::before, .deployment-zone::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .12; background-image: linear-gradient(var(--cyan) 1px, transparent 1px), linear-gradient(90deg,var(--cyan) 1px,transparent 1px); background-size: 28px 28px; }
.deployment-zone { border-color: rgba(255,77,94,.48); background: linear-gradient(rgba(5,13,18,.9),rgba(5,13,18,.94)), url('/assets/scenes/logistica-vineta.webp') center/cover; }
.deployment-zone.has-items { border-color: rgba(75,225,210,.55); }.deployment-zone.drag-over, .resource-bay.drag-over { border-color: var(--cyan); box-shadow: inset 0 0 36px rgba(75,225,210,.18), 0 0 18px rgba(75,225,210,.14); }
.resource-bay > header, .deployment-zone > header { position: relative; z-index: 2; display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); background: rgba(5,13,18,.86); }
.resource-bay > header > span, .deployment-zone > header > span { display: grid; place-items: center; width: 32px; height: 32px; color: var(--cyan); border: 1px solid var(--cyan); font: 10px var(--mono); }
.deployment-zone > header > span { color: var(--red); border-color: var(--red); }.resource-bay header strong, .deployment-zone header strong, .resource-bay header small, .deployment-zone header small { display: block; }.resource-bay header strong, .deployment-zone header strong { font: 11px var(--mono); letter-spacing: .07em; }.resource-bay header small, .deployment-zone header small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.resource-drag-grid { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 8px; align-content: start; }
.resource-card.compact { min-height: 128px; padding: 12px; background: rgba(7,17,22,.96); touch-action: manipulation; }
.resource-card.compact:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(0,0,0,.35); }.resource-card.compact.dragging { opacity: .35; }
.resource-card.compact .resource-illustration { width: 42px; height: 42px; margin: 0 10px 8px 0; padding: 6px; }.resource-card.compact .resource-signal { top: 12px; right: 12px; }
.resource-card.compact strong { font-size: 12px; }.resource-card.compact small { font-size: 10px; }.resource-card.compact em { display: block; clear: both; margin-top: 9px; color: #71878d; font: normal 7px var(--mono); letter-spacing: .05em; }.resource-card.compact.selected em { color: var(--green); }
.drop-target-mark { position: absolute; z-index: 1; inset: 78px 0 0; display: grid; place-items: center; align-content: center; gap: 12px; opacity: .16; pointer-events: none; }
.drop-target-mark i { display: block; width: 110px; height: 110px; border: 2px dashed var(--cyan); border-radius: 50%; box-shadow: 0 0 0 18px rgba(75,225,210,.07); }.drop-target-mark span { color: var(--cyan); font: 12px var(--mono); letter-spacing: .14em; }
.empty-zone { position: relative; z-index: 2; min-height: 210px; margin: 0; display: grid; place-items: center; align-content: center; gap: 8px; padding: 35px; text-align: center; color: #82969a; border: 1px dashed #38545d; background: rgba(4,11,15,.62); font-size: 12px; }.empty-zone b { color: var(--cyan); font: 11px var(--mono); letter-spacing: .1em; }
.drag-help { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 13px 0 0; color: var(--muted); font-size: 10px; }.drag-help span { color: var(--cyan); font: 8px var(--mono); }.drag-help i { width: 1px; height: 14px; background: var(--line); }
.phase-transition { display: grid; grid-template-columns: .8fr 1.2fr; min-height: 480px; margin-top: 22px; overflow: hidden; border: 1px solid #31505a; background: #08161c; }.transition-visual { position: relative; display: grid; place-items: center; background: radial-gradient(circle,rgba(239,71,85,.2),transparent 58%),linear-gradient(145deg,#111820,#060d12); }.transition-visual > span { position: absolute; left: 16px; bottom: 16px; color: var(--red); font: 8px var(--mono); letter-spacing: .1em; }.transition-dialogue { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 28px; }.transition-dialogue > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; border: 1px solid #2e4d57; background: #0b1e25; }.transition-dialogue > div img { width: 70px; height: 86px; object-fit: cover; border-right: 2px solid var(--cyan); }.transition-dialogue > div .nexus-avatar { margin: 0; }.transition-dialogue p { margin: 0; padding: 12px; line-height: 1.45; }.transition-dialogue p span { display: block; margin-bottom: 6px; color: var(--cyan); font: 8px var(--mono); }.transition-dialogue > div:nth-child(2) p span { color: var(--red); }.transition-dialogue h2 { margin: 12px 0 0; }
.classification-narrative { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 10px; }.classification-narrative > div { display: grid; grid-template-columns: 72px 1fr; align-items: center; min-height: 82px; border: 1px solid #31515b; background: #091a21; }.classification-narrative img { width: 72px; height: 82px; object-fit: cover; border-right: 2px solid var(--cyan); }.classification-narrative p { margin: 0; padding: 10px 13px; font-size: 11px; line-height: 1.4; }.classification-narrative p span { display: block; margin-bottom: 5px; color: var(--cyan); font: 8px var(--mono); }.classification-narrative > div:last-child { border-color: rgba(239,71,85,.45); }.classification-narrative > div:last-child p span { color: var(--red); }
.classification-progress { display: grid; grid-template-columns: 1fr auto; gap: 5px 18px; padding: 13px 16px; border-left: 3px solid var(--orange); background: #0b1a21; }.classification-progress span { color: var(--orange); font: 10px var(--mono); }.classification-progress strong { grid-row: 1 / 3; grid-column: 2; align-self: center; color: var(--cyan); font: 24px var(--mono); }.classification-progress small { color: var(--muted); }
.classification-layout { display: grid; grid-template-columns: 280px 1fr; gap: 11px; margin-top: 12px; align-items: start; }.classification-palette { display: grid; gap: 7px; max-height: 760px; overflow: auto; padding: 11px; border: 1px solid #294852; background: #07151b; }.classification-palette header { padding: 9px; color: var(--cyan); border-bottom: 1px solid var(--line); font: 9px var(--mono); }.classification-card { position: relative; display: grid; grid-template-columns: 46px 1fr; gap: 9px; align-items: center; min-height: 94px; padding: 10px; color: var(--text); text-align: left; cursor: grab; border: 1px solid #34535d; background: #0b2028; }.classification-card:hover,.classification-card.selected { border-color: var(--cyan); box-shadow: inset 0 0 20px rgba(67,212,206,.08); }.classification-card > span { width: 42px; height: 42px; padding: 7px; color: var(--cyan); border: 1px solid currentColor; }.classification-card strong,.classification-card small { display: block; }.classification-card strong { font-size: 11px; }.classification-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }.classification-card em { grid-column: 1 / -1; color: #6e858c; font: normal 7px var(--mono); }
.classification-zones { display: grid; gap: 9px; }.classification-zones.three-classes { grid-template-columns: repeat(3,minmax(0,1fr)); }.classification-zones.four-classes { grid-template-columns: repeat(2,minmax(0,1fr)); }.classification-zone { min-height: 300px; padding: 13px; color: var(--text); text-align: left; cursor: pointer; border: 2px solid #3a5963; background: linear-gradient(160deg,#0c242c,#07151a); }.classification-zone:hover,.classification-zone.drag-over { border-color: var(--cyan); box-shadow: inset 0 0 30px rgba(67,212,206,.12); }.classification-zone > span { display: grid; place-items: center; width: 48px; height: 48px; padding: 8px; color: var(--cyan); border: 1px solid currentColor; }.classification-zone > div { min-height: 74px; padding: 10px 0; border-bottom: 1px solid #2d4851; }.classification-zone > div strong,.classification-zone > div small { display: block; }.classification-zone > div strong { font: 12px var(--mono); }.classification-zone > div small { margin-top: 5px; color: var(--muted); font-size: 9px; }.classification-zone section { display: grid; gap: 6px; padding-top: 10px; }.classification-zone section i { display: grid; grid-template-columns: 25px 1fr; align-items: center; gap: 7px; padding: 6px; color: var(--green); border: 1px solid rgba(85,223,145,.35); background: rgba(85,223,145,.05); font: normal 8px var(--mono); }.classification-zone section .comic-icon { width: 23px; height: 23px; }.classification-zone section em { color: #61777e; font: normal 8px var(--mono); }.zone-natural { border-color: #5aa7d8; }.zone-sociological { border-color: #d9a34c; }.zone-technological { border-color: #b06dd6; }.zone-biological { border-color: #62c68e; }
.classification-card.minimal { min-height: 72px; grid-template-columns: 46px 1fr; }.classification-card.minimal strong { font: 11px/1.35 var(--mono); }.classification-card.minimal > div { align-self: center; }
.classification-zone.minimal > div { min-height: 54px; display: grid; align-items: center; padding: 8px 0 12px; }.classification-zone.minimal > div strong { font-size: 13px; }.classification-zone.minimal section { padding-top: 14px; }
.plan-status { display: grid; grid-template-columns: 210px 1fr; gap: 20px; align-items: center; margin: 22px 0; padding: 14px; border: 1px solid var(--line); background: #0b181e; }
.plan-mini-map { height: 110px; position: relative; overflow: hidden; background: linear-gradient(#17323d 1px, transparent 1px), linear-gradient(90deg,#17323d 1px,transparent 1px), #09151a; background-size: 20px 20px; }
.plan-mini-map i { position: absolute; display: block; }.plan-mini-map .stage { left: 35%; top: 8%; width: 30%; height: 20%; background: #43606a; }.plan-mini-map .crowd { left: 27%; top: 38%; width: 46%; height: 35%; background: radial-gradient(circle, #607b84 2px, transparent 3px) 0 0/13px 13px; }.plan-mini-map .route-a,.plan-mini-map .route-b { width: 5px; height: 70px; bottom: -8px; background: var(--green); }.plan-mini-map .route-a { left: 12%; transform: rotate(-28deg); }.plan-mini-map .route-b { right: 12%; transform: rotate(28deg); }.plan-mini-map .medical,.plan-mini-map .ambulance { opacity: .2; border: 2px solid var(--cyan); }.plan-mini-map .medical { width: 30px; height: 30px; left: 7%; top: 12%; }.plan-mini-map .ambulance { width: 45px; height: 24px; right: 6%; bottom: 12%; }.plan-mini-map .online { opacity: 1; box-shadow: 0 0 10px var(--cyan); }
.plan-status span, .plan-status strong, .plan-status small { display: block; }.plan-status span { color: var(--cyan); font: 9px var(--mono); }.plan-status strong { margin-top: 7px; }.plan-status small { margin-top: 5px; color: var(--muted); }

.caller-avatar { position: relative; width: 60px; height: 60px; flex: 0 0 60px; overflow: hidden; border: 2px solid var(--red); background: #173039; }.caller-avatar span { position: absolute; width: 24px; height: 24px; left: 17px; top: 8px; border-radius: 50%; background: #c18461; }.caller-avatar i { position: absolute; width: 42px; height: 32px; left: 8px; bottom: -4px; border-radius: 50% 50% 0 0; background: #355461; }
.caller-response { position: relative; display: grid; grid-template-columns: 72px 1fr; align-items: center; min-height: 94px; margin-bottom: 10px; border: 2px solid rgba(255,77,94,.58); background: linear-gradient(90deg,rgba(255,77,94,.08),#0b171d); box-shadow: 7px 7px 0 #050b0f; }.caller-response::after { content: ""; position: absolute; left: 52px; bottom: -10px; width: 18px; height: 18px; border-right: 2px solid rgba(255,77,94,.58); border-bottom: 2px solid rgba(255,77,94,.58); background: #0b171d; transform: rotate(45deg); }.caller-response > .caller-avatar.small { width: 48px; height: 48px; margin-left: 12px; }.caller-response > .caller-avatar.small span { width: 18px; height: 18px; left: 13px; top: 6px; }.caller-response > .caller-avatar.small i { width: 34px; height: 25px; left: 5px; }.caller-response > div:last-child { padding: 12px 16px; border-left: 1px solid rgba(255,77,94,.35); }.caller-response span { color: var(--red); font: 9px var(--mono); letter-spacing: .1em; }.caller-response p { margin: 5px 0 0; font-size: 16px; line-height: 1.4; }
.call-dialogue { display: grid; grid-template-columns: 92px 1fr; min-height: 90px; margin-bottom: 12px; border: 1px solid rgba(67,212,206,.45); background: #0b1a20; }
.call-dialogue img { width: 92px; height: 90px; border-right: 2px solid var(--cyan); }.call-dialogue > div { padding: 13px 16px; }.call-dialogue span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }.call-dialogue p { margin: 6px 0 0; line-height: 1.4; }
.dialogue-options .question-card { position: relative; padding-left: 36px; }.dialogue-options .question-card::before { content: "›"; position: absolute; left: 14px; top: 42px; color: var(--cyan); font-size: 24px; }

.victim-card { display: grid; grid-template-columns: 240px 1fr; overflow: hidden; }
.victim-illustration { position: relative; min-height: 280px; display: grid; place-items: center; background: radial-gradient(circle, #1d4350, #0b1920 70%); border-right: 1px solid var(--line); }
.victim-illustration::after { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(67,212,206,.25); }
.victim-illustration svg { width: 88%; height: 88%; fill: #b67f60; stroke: #061018; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.victim-illustration > .camera-label { position: absolute; z-index: 2; left: 24px; bottom: 20px; padding: 5px 8px; color: var(--cyan); background: #071116; font: 9px var(--mono); }
.victim-data { min-width: 0; }.victim-data > p { padding: 12px 20px; font-size: 18px; }.victim-data .vitals span { position: relative; padding-left: 48px; }.vitals span b { position: absolute; left: 16px; color: var(--cyan); font-size: 9px; }

.digital-object { width: 96px; height: 96px; padding: 17px; color: var(--cyan); border: 2px solid var(--cyan); background: #08151b; transform: rotate(-2deg); box-shadow: 8px 8px 0 #061018; }
.audit-reticle { position: absolute; inset: 25px; pointer-events: none; border: 1px solid rgba(239,71,85,.25); clip-path: polygon(0 0,17% 0,17% 1%,1% 1%,1% 17%,0 17%,0 83%,1% 83%,1% 99%,17% 99%,17% 100%,83% 100%,83% 99%,99% 99%,99% 83%,100% 83%,100% 17%,99% 17%,99% 1%,83% 1%,83% 0); }
.decision-card { grid-template-columns: 145px 1fr; text-align: left; padding: 24px; }.decision-card > div:last-child { position: relative; }.decision-card > div:last-child > span { color: var(--orange); font: 10px var(--mono); letter-spacing: .08em; }.decision-card h2 { margin: 10px 0 0; }.decision-scene-icon { width: 108px; height: 108px; padding: 20px; color: var(--green); border: 2px solid var(--green); background: #071116; transform: rotate(-2deg); }

.recovery-story { display: grid; grid-template-columns: 1.4fr .75fr; gap: 18px; }
.recovery-comic { position: relative; min-height: 610px; overflow: hidden; border: 1px solid var(--line); background: #0b1820; }
.recovery-scene { position: relative; height: 390px; overflow: hidden; background-size: cover; background-position: center; border-bottom: 5px solid #050b0f; }
.recovery-scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, rgba(4,11,15,.3)); }
.recovery-character { position: absolute; z-index: 2; right: 0; bottom: -48%; width: 48%; height: 150%; object-position: center 10%; filter: drop-shadow(-8px 0 0 rgba(4,11,15,.8)); }
.recovery-stamp { position: absolute; z-index: 4; top: 16px; left: 16px; padding: 8px 11px; color: var(--green); border: 1px solid var(--green); background: #06100d; font: 9px var(--mono); letter-spacing: .1em; }
.recovery-check { position: absolute; z-index: 4; left: 35px; bottom: 35px; width: 70px; height: 70px; display: grid; place-items: center; color: var(--green); border: 2px solid var(--green); border-radius: 50%; background: rgba(4,18,13,.87); font-size: 35px; }
.human-bubble { position: relative; margin: -28px 26px 25px; padding: 24px; border: 2px solid var(--cyan); background: #0b1b22; box-shadow: 9px 9px 0 #050b0f; }.human-bubble span { color: var(--cyan); font: 9px var(--mono); }.human-bubble h2 { margin: 7px 0; font-size: 24px; font-weight: 700; }.human-bubble p { margin: 0; }
.recovery-side { display: flex; flex-direction: column; gap: 15px; }.recovery-side .digit-reveal { width: 100%; margin: 0; }.recovery-side .primary { width: 100%; }
.nexus-message { display: flex; align-items: center; gap: 10px; padding: 14px; border: 1px solid rgba(239,71,85,.5); background: rgba(239,71,85,.05); }.nexus-message span { color: var(--red); font: 9px var(--mono); }.nexus-message p { margin: 5px 0 0; font-size: 13px; line-height: 1.45; }
.next-threat { padding: 18px; border-left: 3px solid var(--orange); background: var(--panel); }.next-threat span { color: var(--orange); font: 9px var(--mono); }.next-threat p { margin: 7px 0 0; font-size: 13px; }
.console-core-panel { position: relative; height: 290px; margin-bottom: 24px; display: grid; place-items: center; overflow: hidden; border: 1px solid rgba(239,71,85,.45); }.console-scene { position: absolute; inset: 0; background: linear-gradient(rgba(5,11,15,.65),rgba(5,11,15,.75)), url('/assets/scenes/cce-vineta.webp') center/cover; }.console-warning { position: absolute; bottom: 15px; color: var(--red); font: 9px var(--mono); letter-spacing: .12em; }
.closing-scene { display: grid; grid-template-columns: 120px 1fr 100px; align-items: center; gap: 18px; margin: 24px 0; overflow: hidden; border: 1px solid rgba(85,223,145,.4); background: rgba(85,223,145,.05); }.closing-scene > img { width: 120px; height: 125px; border-right: 2px solid var(--green); }.closing-scene > div:nth-child(2) span { color: var(--green); font: 9px var(--mono); }.closing-scene > div:nth-child(2) p { margin: 7px 0 0; font-size: 14px; }.nexus-offline { display: grid; place-items: center; padding-right: 14px; opacity: .45; }.nexus-offline small { color: var(--muted); font: 8px var(--mono); }

/* Iteración 3 · seis mecánicas operativas diferenciadas */
.inline-feedback.positive { color: var(--green); border-color: rgba(85,223,145,.45); background: rgba(85,223,145,.06); }
.final-challenge { display: flex; align-items: center; gap: 18px; margin: 0 0 20px; padding: 14px 18px; border: 1px solid rgba(239,71,85,.5); background: linear-gradient(90deg,rgba(239,71,85,.1),rgba(7,16,21,.95)); }
.final-challenge p { margin: 0; color: #ffd9dd; line-height: 1.5; }

/* 03 · Sectorización táctica */
.sector-alert, .call-supervisor, .efficiency-dialogue { display: grid; grid-template-columns: 84px 1fr; align-items: center; min-height: 86px; margin: 18px 0 12px; border: 1px solid rgba(67,212,206,.5); background: #0a1920; }
.sector-alert img, .call-supervisor img, .efficiency-dialogue img { width: 84px; height: 84px; border-right: 2px solid var(--cyan); }
.sector-alert > div, .call-supervisor > div, .efficiency-dialogue > div { padding: 11px 15px; }
.sector-alert span, .call-supervisor span, .efficiency-dialogue span { color: var(--cyan); font: 9px var(--mono); letter-spacing: .08em; }
.sector-alert p, .call-supervisor p, .efficiency-dialogue p { margin: 6px 0 0; line-height: 1.4; }
.sector-narrative { display: grid; grid-template-columns: .8fr 1.2fr; gap: 10px; margin: 18px 0 12px; }.sector-narrative .sector-alert { margin: 0; }.sector-nexus { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 5px; border: 1px solid rgba(239,71,85,.52); background: rgba(239,71,85,.07); }.sector-nexus span { color: var(--red); font: 9px var(--mono); }.sector-nexus p { margin: 5px 0 0; color: #ffd8dc; font: 11px/1.45 var(--mono); }
.sector-workspace { display: grid; grid-template-columns: 280px 1fr; gap: 12px; align-items: start; }
.sector-palette { height: 690px; overflow-y: auto; padding: 12px; border: 1px solid #29444d; background: #08151b; }
.sector-palette > header { padding: 10px 8px 13px; border-bottom: 1px solid var(--line); }
.sector-palette > header strong, .sector-palette > header small { display: block; }.sector-palette > header strong { font: 11px var(--mono); }.sector-palette > header small { margin-top: 5px; color: var(--muted); font-size: 10px; }
.sector-palette > div { display: grid; gap: 7px; margin-top: 10px; }
.sector-card { position: relative; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 9px; min-height: 58px; padding: 8px 10px; color: var(--text); text-align: left; cursor: grab; border: 1px solid #294650; background: #0d2028; }
.sector-card:hover, .sector-card.selected { color: var(--cyan); border-color: var(--cyan); background: #102c35; }.sector-card:active { cursor: grabbing; }.sector-card.dragging { opacity: .35; }
.sector-card > span { grid-row: 1 / 4; width: 34px; height: 34px; padding: 5px; border: 1px solid currentColor; }.sector-card .comic-icon { width: 100%; height: 100%; }.sector-card strong, .sector-card small, .sector-card em { display: block; }.sector-card strong { font-size: 11px; }.sector-card small { margin-top: 3px; color: var(--muted); font-size: 9px; }.sector-card em { margin-top: 4px; color: #678087; font: normal 7px var(--mono); }
.sector-empty { padding: 25px 10px; color: var(--green); text-align: center; font: 10px var(--mono); }
.sector-map { position: sticky; top: 74px; height: 690px; min-height: 690px; overflow: hidden; border: 1px solid rgba(67,212,206,.45); background: #0b2028 url('/assets/scenes/sectorizacion.svg') center / cover no-repeat; }
.sector-map::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 12px solid rgba(4,11,15,.28); box-shadow: inset 0 0 80px rgba(4,11,15,.52); }
.map-reference { position: absolute; z-index: 4; left: 18px; top: 17px; padding: 8px 10px; border-left: 3px solid var(--cyan); background: rgba(4,12,17,.88); }.map-reference span,.map-reference strong { display: block; }.map-reference span { color: var(--cyan); font: 8px var(--mono); }.map-reference strong { margin-top: 4px; font: 9px var(--mono); }
.incident-center { position: absolute; z-index: 4; left: 35%; top: 34%; width: 30%; min-height: 190px; display: grid; place-items: center; align-content: center; padding: 18px; text-align: center; color: var(--red); pointer-events: none; border: 3px solid var(--red); border-radius: 50%; background: rgba(21,7,12,.72); box-shadow: 0 0 0 10px rgba(239,71,85,.08),0 0 34px rgba(239,71,85,.34); }.incident-center span,.incident-center strong,.incident-center small { display: block; }.incident-center span { font: 8px var(--mono); letter-spacing: .1em; }.incident-center strong { margin: 8px 0; color: white; font: 13px var(--mono); }.incident-center small { color: #ff9da6; font-size: 9px; }
.sector-zone { position: absolute; z-index: 3; min-width: 190px; min-height: 145px; padding: 14px; color: var(--text); text-align: left; cursor: pointer; border: 3px solid #55717a; background: rgba(6,17,23,.88); box-shadow: 8px 8px 0 rgba(0,0,0,.34); transition: transform .15s, border-color .15s, box-shadow .15s; }
.sector-zone:hover, .sector-zone.drag-over { z-index: 6; box-shadow: 0 0 0 5px rgba(67,212,206,.15),0 0 28px rgba(67,212,206,.28); transform: scale(1.025); }
.sector-zone.zone-red { left: 31%; top: 4%; width: 38%; height: 25%; color: #ff8d98; border-color: #ff4d5e; background: linear-gradient(135deg,rgba(93,15,27,.92),rgba(29,9,14,.92)); }.sector-zone.zone-yellow { left: 4%; bottom: 5%; width: 39%; height: 31%; color: #f4d764; border-color: #f0cc4e; background: linear-gradient(135deg,rgba(78,62,10,.92),rgba(28,24,8,.92)); }.sector-zone.zone-green { right: 4%; bottom: 5%; width: 39%; height: 31%; color: #78eba7; border-color: #55df91; background: linear-gradient(135deg,rgba(12,68,41,.92),rgba(7,27,19,.92)); }
.zone-title { display: block; padding-bottom: 7px; color: inherit; border-bottom: 2px solid currentColor; font: 700 15px var(--mono); letter-spacing: .08em; }.sector-zone > small { display: block; margin-top: 6px; color: #e4eeee; font-size: 10px; }.zone-cue { position: absolute; right: 12px; top: 12px; opacity: .7; font: 8px var(--mono); }.sector-zone > em { position: absolute; right: 12px; bottom: 10px; color: currentColor; opacity: .72; font: normal 8px var(--mono); }
.zone-resources { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }.zone-resources i { display: grid; grid-template-columns: 18px 1fr; align-items: center; gap: 4px; padding: 5px 6px; color: #f0f6f6; border: 1px solid currentColor; background: rgba(4,12,17,.72); font: normal 8px var(--mono); }.zone-resources .comic-icon { width: 16px; height: 16px; }.zone-resources b { font-weight: 600; }

/* 02 · Conversación de emergencia */
.call-console { display: grid; grid-template-columns: 1fr 1.05fr 1fr; grid-template-areas: "top top top" "transcript live sheet"; margin: 20px 0 12px; overflow: hidden; border: 1px solid #2b505d; background: #061219; box-shadow: 10px 10px 0 rgba(0,0,0,.25); }
.call-topline { grid-area: top; display: flex; align-items: center; gap: 18px; min-height: 58px; padding: 10px 16px; border-bottom: 2px solid var(--red); background: rgba(239,71,85,.12); }
.call-topline strong { color: var(--red); font: 14px var(--mono); letter-spacing: .08em; }.call-topline span { color: white; font: 25px var(--mono); }.call-topline i { margin-left: auto; color: #ff8791; font: normal 9px var(--mono); }
.call-transcript { grid-area: transcript; padding: 14px; border-right: 1px solid var(--line); }.call-live { grid-area: live; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 390px; padding: 20px; text-align: center; border-right: 1px solid var(--line); background: radial-gradient(circle,rgba(67,212,206,.12),transparent 58%); }.incident-sheet { grid-area: sheet; padding: 14px; }
.call-transcript > strong, .incident-sheet > strong, .call-transcript > header, .incident-sheet > header { color: var(--cyan); font: 10px var(--mono); letter-spacing: .08em; }.caller-profile { display: flex; align-items: center; gap: 10px; margin: 13px 0; padding: 10px; background: #0e252e; }.caller-profile span { color: var(--cyan); font: 9px var(--mono); }
.transcript-lines { display: grid; gap: 8px; max-height: 300px; overflow: auto; }.transcript-lines p { margin: 0; padding: 9px 11px; color: #d7e3e4; border-left: 2px solid #4f6972; background: #101f26; font-size: 11px; line-height: 1.4; }.transcript-lines p.alert { border-color: var(--red); color: #ffd8db; }
.caller-core { position: relative; width: 132px; height: 132px; margin-bottom: 18px; display: grid; place-items: center; border: 2px solid var(--cyan); border-radius: 50%; box-shadow: 0 0 0 12px rgba(67,212,206,.07),0 0 30px rgba(67,212,206,.18); }.caller-core::before { content: ""; width: 35px; height: 35px; border-radius: 50%; background: #a9d5d9; box-shadow: 0 39px 0 13px #779fa7; }
.waveform { display: flex; align-items: center; height: 44px; gap: 4px; }.waveform i { width: 3px; height: calc(8px + var(--wave, 12px)); background: var(--cyan); animation: wave .75s ease-in-out infinite alternate; }.waveform i:nth-child(2n) { height: 30px; animation-delay: -.2s; }.waveform i:nth-child(3n) { height: 17px; animation-delay: -.4s; }
@keyframes wave { to { transform: scaleY(.4); opacity: .55; } }
.call-live h2 { margin: 12px 0 4px; }.call-live p { min-height: 48px; margin: 5px 0 0; color: #c9d7d9; font-style: italic; line-height: 1.45; }
.incident-fields { display: grid; gap: 7px; margin-top: 13px; }.incident-field { padding: 9px 10px; border: 1px solid #29434c; background: #0b1d24; }.incident-field span, .incident-field b { display: block; }.incident-field span { color: #7f969d; font: 8px var(--mono); }.incident-field b { margin-top: 5px; color: var(--red); font-size: 10px; }.incident-field.confirmed b { color: var(--green); }
.nexus-interference { margin-top: 12px; padding: 10px; color: var(--red); border: 1px solid rgba(239,71,85,.45); background: rgba(239,71,85,.07); font: 9px var(--mono); }
.dialogue-tray { margin-top: 10px; }.dialogue-tray > header { display: flex; justify-content: space-between; gap: 12px; padding: 11px 13px; border: 1px solid var(--line); background: #09171d; }.dialogue-tray > header span { color: var(--cyan); font: 10px var(--mono); }.dialogue-tray > header small { color: var(--muted); }.dialogue-tray > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin-top: 8px; }.dialogue-choice { min-height: 84px; padding: 12px; color: #dce8e8; text-align: left; cursor: pointer; border: 1px solid #32505a; background: #0b1b22; }.dialogue-choice:hover { color: var(--cyan); border-color: var(--cyan); }.dialogue-choice:disabled { opacity: .48; cursor: default; }.dialogue-choice span { display: block; margin-bottom: 7px; color: var(--cyan); font: 16px var(--mono); }

/* 02B · Clasificación y movilización de una segunda llamada */
.dispatch-console { margin: 18px 0 12px; overflow: hidden; border: 1px solid #2d5664; background: #061219; box-shadow: 10px 10px 0 rgba(0,0,0,.28); }
.dispatch-call-head { display: grid; grid-template-columns: 62px 1fr auto; align-items: center; gap: 14px; min-height: 76px; padding: 10px 16px; border-bottom: 2px solid var(--red); background: linear-gradient(90deg,rgba(239,71,85,.18),rgba(6,18,25,.97)); }
.call-beacon { display: grid; place-items: center; width: 54px; height: 54px; color: white; border: 2px solid var(--red); border-radius: 50%; background: rgba(239,71,85,.22); box-shadow: 0 0 18px rgba(239,71,85,.35); font: 15px var(--mono); }
.dispatch-call-head strong,.dispatch-call-head small { display: block; }.dispatch-call-head strong { color: #fff; font: 15px var(--mono); letter-spacing: .07em; }.dispatch-call-head small { margin-top: 6px; color: #a9c1c6; }.dispatch-call-head i { color: var(--red); font: normal 9px var(--mono); letter-spacing: .08em; }
.dispatch-story { display: grid; grid-template-columns: 1.35fr .85fr; min-height: 250px; }
.dispatch-caller { display: grid; grid-template-columns: 160px 1fr; grid-template-rows: auto 1fr; align-items: center; gap: 3px 22px; padding: 26px; border-right: 1px solid var(--line); background: radial-gradient(circle at 18% 50%,rgba(67,212,206,.14),transparent 35%); }
.dispatch-caller .caller-core { grid-row: 1 / 3; margin: 0; }.caller-core.compact { width: 126px; height: 126px; }.dispatch-caller > span { align-self: end; color: var(--cyan); font: 9px var(--mono); letter-spacing: .1em; }.dispatch-caller p { align-self: start; margin: 8px 0 0; font-size: 18px; line-height: 1.48; }
.dispatch-story aside { padding: 23px; background: linear-gradient(150deg,#0c222b,#07151b); }.dispatch-story aside > span { color: var(--orange); font: 9px var(--mono); }.dispatch-story aside > strong { display: block; margin-top: 8px; font: 16px var(--mono); }.dispatch-story ul { margin: 15px 0 0; padding: 0; list-style: none; }.dispatch-story li { padding: 8px 0 8px 18px; border-bottom: 1px solid #233a42; color: #bfd0d2; font-size: 11px; }.dispatch-story li::before { content: ">"; margin-left: -18px; margin-right: 9px; color: var(--red); font-family: var(--mono); }
.dispatch-dialogue { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border-top: 1px solid var(--line); background: var(--line); }.dispatch-dialogue > div { display: grid; grid-template-columns: 58px 1fr; align-items: center; min-height: 74px; padding: 7px 13px 7px 6px; background: #08161d; }.dispatch-dialogue img { width: 58px; height: 64px; object-position: center 15%; }.dispatch-dialogue p { margin: 0; font-size: 11px; line-height: 1.42; }.dispatch-dialogue p span { display: block; margin-bottom: 5px; color: var(--cyan); font: 8px var(--mono); }.dispatch-dialogue > div:first-child p span { color: var(--red); }
.dispatch-steps { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 19px 0; }.dispatch-steps > div { display: flex; align-items: center; gap: 9px; min-width: 230px; padding: 10px 13px; opacity: .43; border: 1px solid #34515b; background: #091820; }.dispatch-steps > div.active,.dispatch-steps > div.complete { opacity: 1; border-color: var(--cyan); }.dispatch-steps > div.complete { color: var(--green); border-color: var(--green); }.dispatch-steps b { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid currentColor; font: 9px var(--mono); }.dispatch-steps span { font: 9px var(--mono); letter-spacing: .08em; }.dispatch-steps > i { width: 40px; height: 1px; background: #34515b; }
.dispatch-panel { padding: 18px; border: 1px solid #2d4d58; background: linear-gradient(150deg,#0b2029,#07141a); }.dispatch-panel > header span { color: var(--orange); font: 9px var(--mono); letter-spacing: .1em; }.dispatch-panel > header h2 { margin: 7px 0 4px; }.dispatch-panel > header p { margin: 0; color: var(--muted); }.dispatch-panel > header p strong { color: var(--green); }
.incident-categories,.dispatch-resources { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 9px; margin-top: 16px; }
.incident-categories button,.dispatch-resource { min-height: 148px; padding: 14px 11px; color: var(--text); text-align: left; cursor: pointer; border: 1px solid #365864; background: #0a1c24; }.incident-categories button:hover,.dispatch-resource:hover { border-color: var(--cyan); transform: translateY(-2px); }.incident-categories button > span,.dispatch-resource > span { display: grid; place-items: center; width: 47px; height: 47px; margin-bottom: 12px; padding: 8px; color: var(--cyan); border: 1px solid currentColor; }.incident-categories .comic-icon,.dispatch-resource .comic-icon { width: 100%; height: 100%; }.incident-categories strong,.incident-categories small,.dispatch-resource strong,.dispatch-resource small { display: block; }.incident-categories strong,.dispatch-resource strong { font: 11px var(--mono); }.incident-categories small,.dispatch-resource small { margin-top: 7px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.dispatch-resource { min-height: 132px; }.dispatch-resource.selected { color: var(--green); border-color: var(--green); background: rgba(85,223,145,.08); box-shadow: inset 0 0 22px rgba(85,223,145,.08); }.dispatch-resource.selected > span { color: var(--green); }.dispatch-resource.selected::after { content: "SELECCIONADO"; display: block; margin-top: 9px; color: var(--green); font: 7px var(--mono); }
.selection-meter { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 14px 0 4px; padding: 10px 13px; color: var(--muted); border: 1px solid #31515b; background: rgba(5,18,24,.72); font: 8px var(--mono); letter-spacing: .08em; }.selection-meter strong { flex: 0 0 auto; color: var(--cyan); font-size: 13px; }.selection-meter.complete { color: var(--green); border-color: rgba(85,223,145,.58); }.selection-meter.complete strong { color: var(--green); }

/* 04 · START por pasos */
.triage-command { display: flex; justify-content: space-between; gap: 16px; margin: 18px 0; padding: 13px 16px; border: 1px solid var(--line); background: #0a1820; }.triage-command span { color: var(--cyan); font: 9px var(--mono); }.triage-command strong { font: 13px var(--mono); }
.victim-scene { position: relative; min-height: 510px; overflow: hidden; border: 1px solid #28454f; background: linear-gradient(rgba(5,13,18,.34),rgba(5,13,18,.7)),url('/assets/scenes/logistica-vineta.webp') center/cover; }
.scene-victim { position: absolute; width: 144px; min-height: 178px; padding: 8px; color: var(--text); cursor: pointer; border: 2px solid #4d6871; background: rgba(6,16,21,.93); box-shadow: 7px 7px 0 rgba(0,0,0,.35); }.scene-victim:hover { z-index: 5; border-color: var(--cyan); transform: translateY(-3px); }
.scene-victim svg { display: block; width: 100%; height: 112px; fill: #b78162; stroke: #061018; stroke-width: 7; }.scene-victim strong, .scene-victim small { display: block; }.scene-victim strong { font: 10px var(--mono); }.scene-victim small { margin-top: 3px; color: var(--muted); font-size: 9px; }
.scene-victim:nth-child(1) { left: 4%; top: 8%; }.scene-victim:nth-child(2) { left: 27%; top: 18%; }.scene-victim:nth-child(3) { left: 51%; top: 7%; }.scene-victim:nth-child(4) { right: 4%; top: 20%; }.scene-victim:nth-child(5) { left: 14%; bottom: 5%; }.scene-victim:nth-child(6) { left: 43%; bottom: 4%; }.scene-victim:nth-child(7) { right: 10%; bottom: 5%; }
.scene-victim .triage-tag { position: absolute; top: 7px; right: 7px; padding: 4px; color: #061018; font: 8px var(--mono); }.triage-tag.red { background: #ff5362; }.triage-tag.yellow { background: #e6bd45; }.triage-tag.green { background: #55df91; }.triage-tag.black { color: white; background: #14191b; }
.scene-victim .victim-action { display: block; margin-top: 6px; color: var(--cyan); font: 8px var(--mono); }
.victim-photo { display: block; overflow: hidden; background-image: url('/assets/victims/victims-start-sheet-v2.png'); background-repeat: no-repeat; background-size: 400% auto; background-color: #132830; }
.victim-photo-v1 { background-position: 0 0; }.victim-photo-v2 { background-position: 33.333% 0; }.victim-photo-v3 { background-position: 66.667% 0; }.victim-photo-v4 { background-position: 100% 0; }.victim-photo-v5 { background-position: 0 100%; }.victim-photo-v6 { background-position: 33.333% 100%; }.victim-photo-v7 { background-position: 66.667% 100%; }
.scene-victim-photo { width: 100%; height: 118px; margin-bottom: 8px; border: 1px solid rgba(67,212,206,.32); }
.assessment-victim-photo { width: 100%; height: 390px; }
.start-workstation { display: grid; grid-template-columns: .85fr 1.35fr; gap: 12px; margin-top: 18px; }.start-victim { overflow: hidden; border: 1px solid var(--line); background: #0b1a21; }.start-victim .victim-illustration { min-height: 350px; border: 0; border-bottom: 1px solid var(--line); }.start-victim > div:last-child { padding: 16px; }.start-victim > div:last-child span { color: var(--cyan); font: 9px var(--mono); }.start-victim h2 { margin: 8px 0 0; font-size: 20px; }
.start-context { margin: 10px 0 0; padding: 11px 12px; color: #d8e4e5; border-left: 3px solid var(--orange); background: rgba(255,159,67,.08); font-size: 11px; line-height: 1.45; }.start-context b { display: block; margin-bottom: 5px; color: var(--orange); font: 7px var(--mono); letter-spacing: .1em; }
.start-console { padding: 18px; border: 1px solid rgba(67,212,206,.48); background: linear-gradient(160deg,#0c2028,#071319); }.start-path { display: flex; flex-wrap: wrap; gap: 6px; min-height: 50px; margin-bottom: 20px; padding-bottom: 13px; border-bottom: 1px solid var(--line); }.start-path span { padding: 7px 9px; color: var(--muted); border: 1px solid #2e4a53; font: 8px var(--mono); }.start-path b { display: block; margin-top: 4px; color: var(--green); }.start-step { color: var(--orange); font: 9px var(--mono); letter-spacing: .1em; }.start-console h2 { min-height: 60px; margin: 10px 0 16px; font-size: 24px; }.start-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.start-options button { min-height: 64px; padding: 11px; color: var(--text); cursor: pointer; border: 1px solid #3a5862; background: #0c242d; }.start-options button:hover { color: var(--cyan); border-color: var(--cyan); }.airway-result { margin: 0 0 15px; padding: 9px; color: var(--red); border-left: 3px solid var(--red); background: rgba(239,71,85,.07); }.airway-result.breathing { color: var(--green); border-color: var(--green); background: rgba(85,223,145,.07); }
.evac-instruction { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid var(--cyan); background: rgba(67,212,206,.06); }.evac-instruction span,.evac-instruction strong { display: block; }.evac-instruction span { color: var(--cyan); font: 8px var(--mono); }.evac-instruction strong { margin-top: 5px; font-size: 12px; }
.start-options.triage-card-options { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px; }
.start-options .evac-card { position: relative; min-height: 170px; padding: 22px 14px 13px; overflow: hidden; color: #152127; text-align: left; border: 0; border-radius: 2px; background: #edf2ed; box-shadow: 0 8px 0 #050b0f, inset 0 0 0 2px rgba(0,0,0,.28); transform: rotate(-.5deg); }.start-options .evac-card:nth-child(even) { transform: rotate(.5deg); }.start-options .evac-card:hover { color: #071015; border: 0; transform: translateY(-3px) rotate(0); filter: brightness(1.06); }.evac-card::before { content: ""; position: absolute; left: 0; right: 0; top: 36px; height: 8px; border-top: 2px dashed rgba(0,0,0,.34); border-bottom: 2px dashed rgba(0,0,0,.24); }.evac-card .card-hole { position: absolute; top: 8px; left: 50%; width: 15px; height: 15px; border: 3px solid rgba(0,0,0,.55); border-radius: 50%; background: #071015; transform: translateX(-50%); }.evac-card > span,.evac-card > strong,.evac-card > small,.evac-card > b { display: block; }.evac-card > span { margin-top: 28px; color: rgba(0,0,0,.64); font: 6px var(--mono); letter-spacing: .08em; }.evac-card > strong { margin-top: 7px; font: 700 22px var(--mono); }.evac-card > small { min-height: 30px; margin-top: 5px; color: rgba(0,0,0,.7); font: 7px/1.45 var(--mono); }.evac-card > b { position: absolute; left: 14px; right: 14px; bottom: 12px; padding-top: 7px; border-top: 1px solid rgba(0,0,0,.32); font: 7px var(--mono); letter-spacing: .06em; }
.start-options .evac-card.red { color: #3b0710; background: linear-gradient(#f5d7db 0 27%,#f25564 27% 100%); }.start-options .evac-card.yellow { color: #282000; background: linear-gradient(#f6efd2 0 27%,#eccb4e 27% 100%); }.start-options .evac-card.green { color: #062316; background: linear-gradient(#d9f2e3 0 27%,#5bd897 27% 100%); }.start-options .evac-card.black { color: #fff; background: linear-gradient(#d9dfe0 0 27%,#171d20 27% 100%); }.evac-card.black > span,.evac-card.black > small { color: rgba(255,255,255,.75); }.evac-card.black::before { border-color: rgba(0,0,0,.55); }

/* 05 · Inspección visual de ciberseguridad */
.breach-reveal { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin: 15px 0; }
.breach-reveal > div { display: grid; grid-template-columns: 74px 1fr; align-items: center; min-height: 86px; overflow: hidden; border: 1px solid rgba(239,71,85,.5); background: rgba(239,71,85,.07); }
.breach-reveal > div:last-child { border-color: rgba(67,212,206,.5); background: rgba(67,212,206,.05); }
.breach-reveal img { width: 74px; height: 86px; object-fit: cover; border-right: 2px solid var(--cyan); }
.breach-reveal .nexus-avatar { width: 70px; margin: auto; }.breach-reveal p { margin: 0; padding: 11px 13px; font-size: 11px; line-height: 1.45; }
.digital-room { position: relative; min-height: 630px; overflow: hidden; border: 1px solid #2a4953; background: linear-gradient(rgba(4,11,15,.03),rgba(4,11,15,.12)),url('/assets/scenes/digitalizacion.svg') center/100% 100% no-repeat; }
.digital-room::after { content: ""; position: absolute; inset: 0; pointer-events: none; border: 15px solid rgba(4,11,15,.32); box-shadow: inset 0 0 100px rgba(4,11,15,.6); }.room-hud { position: absolute; z-index: 3; top: 15px; left: 15px; padding: 8px 11px; color: var(--cyan); border: 1px solid var(--cyan); background: rgba(4,12,16,.9); font: 9px var(--mono); }
.hotspot { position: absolute; z-index: 4; left: var(--x); top: var(--y); width: 36px; height: 36px; padding: 7px; color: white; cursor: crosshair; border: 2px solid rgba(255,255,255,.72); border-radius: 50%; background: rgba(5,13,18,.34); box-shadow: 0 0 0 4px rgba(255,255,255,.06); transform: translate(-50%,-50%); }.hotspot:hover,.hotspot:focus-visible { z-index: 6; border-color: var(--cyan); background: rgba(5,13,18,.88); box-shadow: 0 0 0 8px rgba(67,212,206,.15); }.hotspot .comic-icon { width: 18px; height: 18px; }.hotspot span { position: absolute; top: calc(100% + 7px); left: 50%; display: none; width: max-content; max-width: 160px; padding: 5px 7px; color: #d9e5e6; border: 1px solid #38545d; background: rgba(5,13,18,.96); font: 8px var(--mono); transform: translateX(-50%); }.hotspot:hover span,.hotspot:focus-visible span,.hotspot.identified span { display: block; }.hotspot.identified { color: var(--green); border-color: var(--green); background: rgba(7,48,36,.88); }.hotspot.identified::after { content: "✓"; font: 18px var(--mono); }.hotspot.identified .comic-icon { display: none; }.hotspot.identified span { color: var(--green); border-color: var(--green); }
.audit-found { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }.audit-found span { padding: 5px 7px; color: var(--green); border: 1px solid rgba(85,223,145,.4); background: rgba(85,223,145,.05); font: 8px var(--mono); }

/* 06 · Consecuencias e indicadores */
.operation-indicators { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 7px; margin: 12px 0 20px; }.operation-indicators > div { padding: 11px; border: 1px solid #2c4851; background: #0a1b22; }.operation-indicators span, .operation-indicators strong { display: block; }.operation-indicators span { color: var(--muted); font: 8px var(--mono); }.operation-indicators strong { margin: 7px 0; font: 19px var(--mono); }.operation-indicators i { display: block; height: 4px; overflow: hidden; background: #24383e; }.operation-indicators i b { display: block; height: 100%; background: var(--green); transition: width .25s; }.operation-indicators .critical { border-color: rgba(239,71,85,.55); }.operation-indicators .critical strong { color: var(--red); }.operation-indicators .critical i b { background: var(--red); }
.consequence-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }.consequence-options button { display: grid; grid-template-columns: 48px 1fr; align-items: center; min-height: 92px; padding: 12px; color: var(--text); text-align: left; cursor: pointer; border: 1px solid #34515b; background: #0b1e26; }.consequence-options button:hover { border-color: var(--green); background: #0d2928; }.option-number { grid-row: 1 / 3; display: grid; place-items: center; width: 38px; height: 38px; color: var(--green); border: 1px solid var(--green); font: 10px var(--mono); }.consequence-options strong, .consequence-options small { display: block; }.consequence-options strong { font-size: 13px; }.consequence-options small { margin-top: 7px; color: var(--muted); }.consequence-options .up { color: var(--green); }.consequence-options .down { color: var(--red); }
.decision-consequence { margin: 12px 0; padding: 13px 16px; border-left: 4px solid var(--red); background: rgba(239,71,85,.07); }.decision-consequence.positive { border-color: var(--green); background: rgba(85,223,145,.06); }.decision-consequence > span { color: var(--orange); font: 8px var(--mono); }.decision-consequence p { margin: 6px 0 10px; }.decision-consequence > div { display: flex; flex-wrap: wrap; gap: 6px; }.decision-consequence > div span { padding: 4px 6px; border: 1px solid currentColor; font: 7px var(--mono); }.decision-consequence .up { color: var(--green); }.decision-consequence .down { color: var(--red); }

@media (max-width: 800px) {
  .access-grid { grid-template-columns: 1fr; }.nexus-core { display: none; }
  .hub-head { align-items: stretch; flex-direction: column; }.metrics > div { flex: 1; }
  .subsystems, .resource-grid, .question-grid { grid-template-columns: repeat(2, 1fr); }
  .score-panel { grid-template-columns: 1fr; }.result-metrics > div { border-left: 0; border-top: 1px solid var(--line); }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }.diagnostic-grid { grid-template-columns: 1fr; }.filters { grid-template-columns: 1fr; }
  .story-stage { grid-template-columns: 1fr; }.story-art { min-height: 380px; }.story-stage { min-height: 0; }.story-copy { padding: 30px; }
  .hub-story { height: 360px; }.hub-nexus { width: calc(100% - 44px); }.hub-guidance { width: calc(100% - 44px); }
  .victim-card { grid-template-columns: 200px 1fr; }.recovery-story { grid-template-columns: 1fr; }.recovery-comic { min-height: 560px; }.deployment-board { grid-template-columns: 1fr; }.resource-bay, .deployment-zone { min-height: 300px; }
  .sector-workspace,.classification-layout { grid-template-columns: 1fr; }.sector-palette { height: auto; overflow: visible; }.sector-palette > div { grid-template-columns: repeat(2,minmax(0,1fr)); }.classification-palette { grid-template-columns: repeat(2,minmax(0,1fr)); max-height: none; }.classification-palette header { grid-column: 1 / -1; }.classification-zones.three-classes { grid-template-columns: repeat(3,minmax(0,1fr)); }.sector-map { position: relative; top: auto; }.call-console { grid-template-columns: 1fr 1fr; grid-template-areas: "top top" "live sheet" "transcript transcript"; }.call-transcript { border-top: 1px solid var(--line); }.dialogue-tray > div { grid-template-columns: repeat(2,minmax(0,1fr)); }.incident-categories,.dispatch-resources { grid-template-columns: repeat(3,minmax(0,1fr)); }.start-workstation { grid-template-columns: 1fr; }.operation-indicators { grid-template-columns: repeat(3,minmax(0,1fr)); }
}
@media (max-width: 540px) {
  .topbar { padding-inline: 14px; }.brand > span:last-child { display: none; }.operator { font-size: 9px; }.sound-toggle { margin-left: 10px; }
  .screen { width: min(100% - 24px, 960px); padding-top: 32px; }
  .subsystems, .resource-grid, .question-grid { grid-template-columns: 1fr; }.map-panel { padding: 15px; }
  .metrics { flex-direction: column; }.metrics > div { min-width: 0; }
  .scenario { grid-template-columns: 1fr; gap: 6px; }.mission-chip { width: 48px; height: 48px; }
  .vitals, .triage-options, .binary-options { grid-template-columns: 1fr; }
  .call-panel { flex-wrap: wrap; }.call-panel .primary { width: 100%; }
  .digit-memory { grid-template-columns: repeat(3, 1fr); }.area-results { grid-template-columns: repeat(2, 1fr); }
  .result-metrics { grid-template-columns: 1fr; }.success-banner { align-items: flex-start; }.success-banner > span { width: 48px; height: 48px; }
  .console-ready, .teacher-header { align-items: stretch; flex-direction: column; }.teacher-actions { flex-wrap: wrap; }
  .stats-grid, .detail-areas, .activity-error-grid, .classification-teacher-summary { grid-template-columns: 1fr; }.detail-summary { flex-direction: column; gap: 4px; }
  .story-art { min-height: 300px; }.story-character { width: 82%; }.story-copy { padding: 24px 18px 28px; }.story-copy h1 { font-size: 36px; }.speech-bubble p { font-size: 15px; }.story-controls { align-items: stretch; flex-direction: column; }.story-controls .primary { width: 100%; }
  .hub-story { height: 420px; }.hub-nexus, .hub-guidance { left: 12px; right: 12px; width: auto; }.hub-nexus { top: 12px; }.hub-guidance { bottom: 12px; }.hub-guidance img { width: 74px; height: 102px; }
  .mission-visual { height: 210px; }.mission-visual-tag { left: 12px; right: 12px; bottom: 12px; width: auto; }.instruction-panel { grid-template-columns: 1fr; gap: 6px; }
  .plan-status { grid-template-columns: 1fr; }.victim-card { grid-template-columns: 1fr; }.victim-illustration { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }.decision-card { grid-template-columns: 86px 1fr; padding: 15px; }.decision-scene-icon { width: 72px; height: 72px; padding: 12px; }
  .recovery-scene { height: 300px; }.recovery-character { width: 58%; }.human-bubble { margin: -18px 12px 18px; }.closing-scene { grid-template-columns: 82px 1fr; }.closing-scene > img { width: 82px; height: 125px; }.nexus-offline { display: none; }
  .field-briefing { grid-template-columns: 62px 1fr; }.field-briefing > img { width: 62px; height: 96px; }.field-briefing > strong { grid-column: 1 / -1; border-top: 1px solid var(--line); border-left: 0; }.resource-drag-grid { grid-template-columns: 1fr; }.drag-help { align-items: flex-start; flex-wrap: wrap; }
  .sector-narrative,.phase-transition,.classification-narrative { grid-template-columns: 1fr; }.transition-visual { min-height: 250px; }.transition-dialogue { padding: 18px; }.sector-palette > div,.classification-palette { grid-template-columns: 1fr; }.classification-zones.three-classes,.classification-zones.four-classes { grid-template-columns: 1fr; }.classification-zone { min-height: 210px; }.three-zone-map { height: auto; min-height: 0; display: grid; grid-template-columns: 1fr; gap: 12px; padding: 82px 13px 16px; background-position: center; }.three-zone-map .incident-center,.three-zone-map .sector-zone { position: relative; inset: auto; width: 100%; height: auto; min-width: 0; min-height: 145px; transform: none; }.three-zone-map .incident-center { border-radius: 18px; background: rgba(21,7,12,.86); }.three-zone-map .sector-zone:hover,.three-zone-map .sector-zone.drag-over { transform: none; }.map-reference { left: 13px; right: 13px; top: 13px; }
  .call-console { grid-template-columns: 1fr; grid-template-areas: "top" "live" "sheet" "transcript"; }.call-topline { flex-wrap: wrap; }.call-topline i { width: 100%; margin: 0; }.call-live { min-height: 310px; border: 0; border-bottom: 1px solid var(--line); }.incident-sheet { border-bottom: 1px solid var(--line); }.dialogue-tray > header { flex-direction: column; }.dialogue-tray > div { grid-template-columns: 1fr; }.dispatch-call-head { grid-template-columns: 50px 1fr; }.dispatch-call-head i { grid-column: 1 / -1; }.dispatch-story,.dispatch-dialogue { grid-template-columns: 1fr; }.dispatch-caller { grid-template-columns: 1fr; text-align: center; }.dispatch-caller .caller-core { grid-row: auto; margin: auto; }.dispatch-story aside { border-top: 1px solid var(--line); }.dispatch-steps > div { min-width: 0; flex: 1; }.dispatch-steps > i { display: none; }.incident-categories,.dispatch-resources,.start-options.triage-card-options { grid-template-columns: 1fr; }.sector-alert,.call-supervisor,.efficiency-dialogue { grid-template-columns: 64px 1fr; }.sector-alert img,.call-supervisor img,.efficiency-dialogue img { width: 64px; height: 96px; }
  .victim-scene { min-height: 940px; }.scene-victim { width: 42%; }.scene-victim:nth-child(1) { left: 4%; top: 3%; }.scene-victim:nth-child(2) { left: auto; right: 4%; top: 8%; }.scene-victim:nth-child(3) { left: 4%; top: 28%; }.scene-victim:nth-child(4) { right: 4%; top: 34%; }.scene-victim:nth-child(5) { left: 4%; bottom: 25%; }.scene-victim:nth-child(6) { left: auto; right: 4%; bottom: 18%; }.scene-victim:nth-child(7) { right: 29%; bottom: 2%; }.start-options,.consequence-options { grid-template-columns: 1fr; }
  .digital-room { min-height: 720px; background-position: 42% center; }.hotspot span { display: none; }.operation-indicators { grid-template-columns: repeat(2,minmax(0,1fr)); }.breach-reveal { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } }