:root {
  --ink: #151a17;
  --ink-soft: #343b36;
  --paper: #f4f2eb;
  --paper-deep: #eae6dc;
  --surface: #fffdfa;
  --line: #d7d2c6;
  --muted: #6b716d;
  --accent: #df6545;
  --accent-dark: #b94a30;
  --accent-soft: #f8ddd4;
  --green: #2e7564;
  --green-soft: #d9ece5;
  --blue: #315f8b;
  --blue-soft: #dce8f3;
  --amber: #a66b13;
  --amber-soft: #f4e8cb;
  --red: #b63c38;
  --red-soft: #f4d9d7;
  --violet: #6e62aa;
  --shadow-sm: 0 1px 2px rgba(21, 26, 23, .06), 0 6px 18px rgba(21, 26, 23, .04);
  --shadow-lg: 0 24px 70px rgba(21, 26, 23, .16);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 26px;
  --sidebar: 252px;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; min-height: 100vh; background: var(--paper); color: var(--ink); }
button, input, textarea, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }
button { color: inherit; }
::selection { background: var(--accent); color: white; }

.skip-link { position: fixed; top: 10px; left: 10px; z-index: 1000; transform: translateY(-200%); background: var(--ink); color: white; padding: 10px 14px; border-radius: 8px; }
.skip-link:focus { transform: translateY(0); }
.icon { display: inline-block; flex: 0 0 auto; }
.mono { font-family: "SFMono-Regular", Consolas, monospace; letter-spacing: -.02em; }
.eyebrow { margin: 0 0 10px; font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; line-height: 1; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

/* Primera respuesta antes de que termine de evaluar el grafo. No simula que
   la app ya abrió: explica exactamente qué está cargando y dónde ocurre. */
.boot-shell { display: grid; align-content: center; min-height: 100vh; width: min(760px, calc(100% - 40px)); margin: 0 auto; }
.boot-brand { display: flex; align-items: baseline; font-weight: 850; letter-spacing: -.04em; }
.boot-brand em { color: var(--accent); font-style: normal; }
.boot-brand small { margin-left: 9px; color: var(--muted); font-size: 9px; letter-spacing: .12em; }
.boot-copy { max-width: 620px; margin-top: 48px; }
.boot-copy p { margin: 0 0 10px; color: var(--green); font: 800 10px/1 "SFMono-Regular", Consolas, monospace; letter-spacing: .13em; text-transform: uppercase; }
.boot-copy h1 { margin: 0 0 14px; font-size: clamp(38px, 7vw, 68px); line-height: .98; letter-spacing: -.055em; }
.boot-copy span { color: var(--muted); font-size: 13px; line-height: 1.55; }
.boot-track { width: min(100%, 420px); height: 4px; overflow: hidden; margin-top: 34px; border-radius: 99px; background: var(--line); }
.boot-track i { display: block; width: 38%; height: 100%; border-radius: inherit; background: var(--accent); animation: boot-progress 1.15s ease-in-out infinite alternate; }
@keyframes boot-progress { to { transform: translateX(165%); } }
@media (prefers-reduced-motion: reduce) { .boot-track i { width: 68%; animation: none; } }

/* Buttons and controls */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--ink); font-weight: 680; font-size: 14px; cursor: pointer; text-decoration: none; transition: transform .16s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.btn:hover { transform: translateY(-1px); border-color: #afa99c; box-shadow: var(--shadow-sm); }
.btn:focus-visible, .icon-btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible { outline: 3px solid rgba(49, 95, 139, .28); outline-offset: 2px; }
.btn:disabled { opacity: .48; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-primary { background: var(--ink); border-color: var(--ink); color: white; }
.btn-primary:hover { background: #252d28; border-color: #252d28; }
.btn-accent { background: var(--accent); border-color: var(--accent); color: white; }
.btn-accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
.btn-danger { color: var(--red); border-color: #e6b9b6; background: #fff8f7; }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-small { min-height: 34px; padding: 6px 10px; font-size: 12px; border-radius: 8px; }
.btn-large { min-height: 52px; padding: 13px 20px; font-size: 15px; border-radius: 13px; }
.icon-btn { display: inline-grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); cursor: pointer; }
.button-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.link-button { padding: 0; border: 0; background: none; color: var(--blue); font-weight: 650; cursor: pointer; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.link-button:hover { text-decoration-color: currentColor; }

/* Marketing site */
.site { min-height: 100vh; overflow: hidden; background: var(--paper); }
.site-nav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; width: min(1180px, calc(100% - 40px)); height: 78px; margin: 0 auto; }
.brand { display: inline-flex; align-items: center; gap: 11px; text-decoration: none; font-weight: 840; letter-spacing: -.04em; }
.brand-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--ink); color: var(--paper); }
.brand em { color: var(--accent); font-style: normal; }
.site-links { display: flex; align-items: center; gap: 25px; }
.site-links a:not(.btn) { color: var(--ink-soft); font-size: 13px; font-weight: 650; text-decoration: none; }
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(380px, .9fr); align-items: center; gap: 74px; width: min(1180px, calc(100% - 40px)); min-height: 680px; margin: 0 auto; padding: 72px 0 96px; }
.hero::before { content: ""; position: absolute; top: -180px; right: -360px; width: 760px; height: 760px; border: 1px solid rgba(21,26,23,.08); border-radius: 50%; box-shadow: 0 0 0 95px rgba(21,26,23,.025), 0 0 0 190px rgba(21,26,23,.018); pointer-events: none; }
.hero-copy { position: relative; z-index: 2; }
.hero-kicker { display: inline-flex; align-items: center; gap: 8px; padding: 7px 10px; margin-bottom: 24px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.55); font-family: "SFMono-Regular", Consolas, monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; }
.hero-kicker::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px var(--green-soft); }
.hero h1 { max-width: 760px; margin: 0; font-size: clamp(52px, 7vw, 92px); line-height: .94; letter-spacing: -.072em; font-weight: 820; }
.hero h1 span { color: var(--accent); }
.hero-lede { max-width: 650px; margin: 30px 0 34px; font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--ink-soft); letter-spacing: -.018em; }
.hero-note { display: flex; gap: 9px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 12px; }
.hero-visual { position: relative; z-index: 2; min-height: 500px; }
.demo-window { position: absolute; inset: 20px 0 auto auto; width: min(100%, 500px); overflow: hidden; border: 1px solid #cbc5b8; border-radius: 24px; background: var(--surface); box-shadow: var(--shadow-lg); transform: rotate(1.5deg); }
.demo-window-bar { display: flex; align-items: center; gap: 6px; height: 44px; padding: 0 16px; border-bottom: 1px solid var(--line); background: #ece8de; }
.demo-window-bar i { width: 8px; height: 8px; border-radius: 50%; background: #b8b1a4; }
.demo-window-body { padding: 26px; }
.demo-status { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 26px; }
.demo-status strong { display: block; font-size: 42px; line-height: 1; letter-spacing: -.05em; }
.demo-status small { color: var(--muted); }
.demo-chip { padding: 7px 10px; border-radius: 999px; background: var(--amber-soft); color: var(--amber); font-size: 11px; font-weight: 750; }
.mini-path { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.mini-path-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper); color: var(--blue); }
.mini-path strong { display: block; font-size: 13px; }
.mini-path span { color: var(--muted); font-size: 11px; }
.mini-path-state { width: 9px; height: 9px; border-radius: 50%; }
.mini-path-state.ok { background: var(--green); box-shadow: 0 0 0 5px var(--green-soft); }
.mini-path-state.warn { background: var(--amber); box-shadow: 0 0 0 5px var(--amber-soft); }
.visual-sticker { position: absolute; z-index: 3; right: -18px; bottom: 28px; width: 144px; padding: 16px; border-radius: 18px; background: var(--ink); color: white; box-shadow: var(--shadow-lg); transform: rotate(-4deg); }
.visual-sticker strong { display: block; margin-top: 20px; font-size: 28px; letter-spacing: -.05em; }
.visual-sticker span { font-size: 11px; color: #bfc6c1; }
.manifest-strip { background: var(--ink); color: white; }
.manifest-strip-inner { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: center; gap: 24px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0; }
.manifest-step { display: flex; align-items: center; gap: 13px; }
.manifest-step b { display: grid; place-items: center; width: 34px; height: 34px; border: 1px solid #47504a; border-radius: 50%; color: var(--accent); font-family: monospace; }
.manifest-step strong { display: block; font-size: 13px; }
.manifest-step span { color: #aeb7b1; font-size: 11px; }
.manifest-arrow { color: #667068; }
.site-section { width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; }
.section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: end; margin-bottom: 54px; }
.section-head h2 { max-width: 700px; margin: 0; font-size: clamp(36px, 5vw, 62px); line-height: 1.02; letter-spacing: -.055em; }
.section-head p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.problem-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); }
.problem-card { min-height: 280px; padding: 28px; border-right: 1px solid var(--line); }
.problem-card:last-child { border-right: 0; }
.problem-number { font-family: monospace; color: var(--accent); }
.problem-card h3 { margin: 76px 0 13px; font-size: 22px; letter-spacing: -.03em; }
.problem-card p { margin: 0; color: var(--muted); line-height: 1.65; font-size: 14px; }
.safety-section { position: relative; background: #e7e1d5; }
.safety-grid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 100px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 120px 0; }
.safety-grid h2 { margin: 0; font-size: clamp(40px, 5vw, 68px); line-height: 1; letter-spacing: -.06em; }
.safety-list { border-top: 1px solid var(--ink); }
.safety-item { display: grid; grid-template-columns: 32px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid #c8c0b2; }
.safety-item .icon { color: var(--green); }
.safety-item strong { display: block; margin-bottom: 5px; }
.safety-item p { margin: 0; color: var(--muted); line-height: 1.5; font-size: 13px; }
.site-cta { display: grid; place-items: center; min-height: 440px; padding: 80px 20px; text-align: center; background: var(--accent); color: white; }
.site-cta h2 { max-width: 800px; margin: 0 0 28px; font-size: clamp(42px, 6vw, 76px); line-height: .98; letter-spacing: -.06em; }
.site-cta .btn { border-color: white; }
.site-footer { display: flex; justify-content: space-between; align-items: center; gap: 20px; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 34px 0; color: var(--muted); font-size: 12px; }

/* Application shell */
.app-shell { display: grid; grid-template-columns: var(--sidebar) minmax(0, 1fr); min-height: 100vh; }
.sidebar { position: fixed; z-index: 30; inset: 0 auto 0 0; display: flex; flex-direction: column; width: var(--sidebar); padding: 24px 16px 16px; background: var(--ink); color: white; }
.sidebar .brand { padding: 0 8px; margin-bottom: 34px; color: white; }
.sidebar .brand-mark { background: var(--accent); }
.nav-label { padding: 0 10px; margin: 9px 0 8px; color: #7f8982; font-family: monospace; font-size: 9px; letter-spacing: .14em; text-transform: uppercase; }
.app-nav { display: grid; gap: 4px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.app-nav a { display: flex; align-items: center; gap: 12px; min-height: 43px; padding: 9px 11px; border-radius: 10px; color: #adb5b0; font-size: 13px; font-weight: 630; text-decoration: none; transition: background .15s, color .15s; }
.app-nav a:hover { background: #252c28; color: white; }
.app-nav a.active { background: #303833; color: white; }
.app-nav a.active .icon { color: var(--accent); }
.nav-danger { margin-top: 10px; }
.app-nav a.nav-danger.active, .app-nav a.nav-danger:hover { background: #4a2522; }
.sidebar-footer { margin-top: auto; }
.privacy-tile { padding: 13px; border: 1px solid #343d37; border-radius: 12px; color: #aeb7b1; font-size: 10px; line-height: 1.5; }
.privacy-tile strong { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; color: #e7ebe8; font-size: 11px; }
.vault-state { display: flex; align-items: center; gap: 9px; padding: 13px 8px 0; color: #818c85; font-size: 10px; }
.vault-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.vault-state.saved i { background: var(--green); }
.mobile-topbar { display: none; }
.app-main { grid-column: 2; min-width: 0; }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 34px; border-bottom: 1px solid rgba(215,210,198,.85); background: rgba(244,242,235,.9); backdrop-filter: blur(14px); }
.breadcrumb { color: var(--muted); font-size: 12px; }
.breadcrumb strong { color: var(--ink); }
.topbar-actions { display: flex; align-items: center; gap: 9px; }
.mode-pill { display: inline-flex; align-items: center; gap: 7px; min-height: 31px; padding: 6px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.mode-pill i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.mode-pill.saved i { background: var(--green); }
.page { width: min(1320px, 100%); margin: 0 auto; padding: 38px 34px 80px; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 30px; }
.page-header h1 { margin: 0; font-size: clamp(32px, 4vw, 48px); line-height: 1; letter-spacing: -.052em; }
.page-header p { max-width: 690px; margin: 12px 0 0; color: var(--muted); line-height: 1.55; font-size: 14px; }

/* Shared cards */
.card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow-sm); }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 22px; border-bottom: 1px solid var(--line); }
.card-head h2, .card-head h3 { margin: 0; font-size: 15px; letter-spacing: -.02em; }
.card-body { padding: 22px; }
.tag { display: inline-flex; align-items: center; gap: 6px; min-height: 25px; padding: 4px 8px; border-radius: 999px; background: var(--paper-deep); color: var(--ink-soft); font-size: 10px; font-weight: 720; }
.tag-critical, .tag-blocked { background: var(--red-soft); color: var(--red); }
/* Comprometido NO es bloqueado: uno es "no podés entrar", el otro es "el
   atacante ya está adentro". Compartían estilo y se leían como lo mismo. */
.tag-compromised { background: var(--red); color: #fff; font-weight: 600; }
.cuenta-comprometida { color: var(--red); font-weight: 600; }
.impacto-grave strong { color: var(--red); }
.tag-high, .tag-unknown, .tag-attention { background: var(--amber-soft); color: var(--amber); }
.tag-medium { background: var(--blue-soft); color: var(--blue); }
.tag-available, .tag-ready, .tag-current { background: var(--green-soft); color: var(--green); }
.tag-overdue, .tag-never { background: var(--red-soft); color: var(--red); }
.tag-soon { background: var(--amber-soft); color: var(--amber); }
.empty-state { padding: 48px 26px; text-align: center; color: var(--muted); }
.empty-state .empty-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 16px; border-radius: 16px; background: var(--paper-deep); color: var(--ink-soft); }
.empty-state h3 { margin: 0 0 8px; color: var(--ink); }
.empty-state p { max-width: 460px; margin: 0 auto 18px; line-height: 1.55; font-size: 13px; }

/* Dashboard */
.dashboard-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .75fr); gap: 20px; }
.autopilot-panel { display: grid; grid-template-columns: minmax(0, 1fr) 220px; overflow: hidden; margin-bottom: 20px; border-color: #b9c8bb; background: linear-gradient(135deg, #fbfcf8 0%, #f5f8f1 58%, #eef5ef 100%); box-shadow: 0 18px 50px rgba(30, 57, 38, .08); }
.autopilot-main { padding: 28px 30px 24px; }
.autopilot-kicker { display: flex; align-items: center; gap: 9px; color: #316243; font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.autopilot-pulse { width: 9px; height: 9px; border-radius: 50%; background: #3c9b61; box-shadow: 0 0 0 5px rgba(60, 155, 97, .12); }
.autopilot-main > h2 { max-width: 780px; margin: 14px 0 8px; font-size: clamp(25px, 3vw, 39px); line-height: 1.03; letter-spacing: -.045em; }
.autopilot-main > p { max-width: 720px; margin: 0; color: var(--muted); line-height: 1.55; }
.autopilot-loop { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.autopilot-loop li { display: flex; align-items: center; gap: 9px; min-width: 0; padding: 10px; border: 1px solid rgba(49, 98, 67, .12); border-radius: 12px; background: rgba(255, 255, 255, .45); color: var(--muted); }
.autopilot-loop li > span { display: grid; flex: 0 0 25px; width: 25px; height: 25px; place-items: center; border-radius: 50%; background: rgba(49, 98, 67, .1); font-size: 10px; font-weight: 850; }
.autopilot-loop li > div { display: grid; min-width: 0; }
.autopilot-loop strong { color: inherit; font-size: 11px; }
.autopilot-loop small { overflow: hidden; margin-top: 2px; font-size: 9px; text-overflow: ellipsis; white-space: nowrap; }
.autopilot-loop li.done { color: #356a47; }
.autopilot-loop li.done > span { background: #dceee1; color: #24653b; }
.autopilot-loop li.current { border-color: rgba(49, 98, 67, .38); background: #fff; color: #173a24; box-shadow: 0 7px 20px rgba(30, 57, 38, .08); }
.autopilot-loop li.current > span { background: #316243; color: #fff; }
.advanced-nav { margin-top: 8px; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: 8px; }
.advanced-nav summary { display: flex; align-items: center; gap: 10px; padding: 10px 11px; border-radius: 9px; color: #8e9992; cursor: pointer; font-size: 11px; font-weight: 700; list-style: none; }
.advanced-nav summary::-webkit-details-marker { display: none; }
.advanced-nav summary:hover { background: #202823; color: #e3e8e4; }
.advanced-nav summary span { flex: 1; }
.advanced-nav summary .icon:last-child { transition: transform .18s ease; }
.advanced-nav[open] summary .icon:last-child { transform: rotate(90deg); }
.advanced-nav > div { display: grid; gap: 3px; padding-top: 4px; }
.autopilot-next { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 24px; padding: 18px 18px 18px 20px; border: 1px solid rgba(49, 98, 67, .2); border-radius: 16px; background: rgba(255, 255, 255, .72); }
.autopilot-next > div { display: grid; justify-items: start; gap: 7px; min-width: 0; }
.autopilot-next strong { font-size: 15px; }
.autopilot-next small { max-width: 650px; color: var(--muted); line-height: 1.45; }
.autopilot-next .btn { flex: 0 0 auto; }
.autopilot-done { border-color: rgba(49, 98, 67, .12); }
.autopilot-progress { display: flex; flex-direction: column; justify-content: center; padding: 28px; border-left: 1px solid rgba(49, 98, 67, .15); background: rgba(234, 243, 235, .62); }
.autopilot-progress-number { display: flex; align-items: baseline; gap: 7px; }
.autopilot-progress-number strong { font-size: 46px; line-height: 1; letter-spacing: -.06em; }
.autopilot-progress-number span { color: var(--muted); font-size: 14px; }
.autopilot-progress p { margin: 9px 0 16px; color: #395a43; font-size: 12px; line-height: 1.4; }
.autopilot-track { height: 8px; overflow: hidden; border-radius: 99px; background: rgba(49, 98, 67, .13); }
.autopilot-track i { display: block; height: 100%; border-radius: inherit; background: #3c9b61; }
.autopilot-progress > small { margin-top: 9px; color: var(--muted); font-size: 10px; }
.autopilot-queue { grid-column: 1 / -1; display: flex; align-items: center; gap: 9px; padding: 12px 18px; border-top: 1px solid rgba(49, 98, 67, .13); background: rgba(255, 255, 255, .54); }
.autopilot-queue > span:first-child { margin-right: 2px; color: var(--muted); font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.autopilot-queue button { display: flex; align-items: center; gap: 9px; max-width: 330px; padding: 8px 11px; border: 0; border-radius: 10px; background: transparent; color: inherit; cursor: pointer; text-align: left; }
.autopilot-queue button:hover { background: rgba(49, 98, 67, .08); }
.autopilot-queue button strong { overflow: hidden; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.autopilot-queue button small { color: var(--muted); font-size: 10px; white-space: nowrap; }

/* Change Radar: declarar un cambio tiene que sentirse más corto que editar el
   grafo. Primero se elige el hecho cotidiano; después el elemento concreto. */
.change-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.change-option { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 15px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: inherit; cursor: pointer; text-align: left; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease; }
.change-option:hover { transform: translateY(-1px); border-color: rgba(49, 98, 67, .35); box-shadow: 0 8px 24px rgba(24, 42, 30, .07); }
.change-option > span:nth-child(2) { display: grid; gap: 4px; min-width: 0; }
.change-option strong { font-size: 12.5px; }
.change-option small { color: var(--muted); font-size: 10px; line-height: 1.45; }
.change-option-icon { display: grid; width: 40px; height: 40px; place-items: center; border-radius: 11px; background: var(--green-soft); color: var(--green); }
.change-contract { display: flex; align-items: flex-start; gap: 9px; margin-top: 16px; padding: 12px 14px; border-radius: 11px; background: var(--green-soft); color: #31573d; font-size: 10.5px; line-height: 1.5; }
.change-contract .icon { flex: 0 0 auto; margin-top: 1px; }
.change-history { display: grid; gap: 0; margin-top: 24px; }
.change-history > p { margin: 0 0 7px; }
.change-history > div { display: flex; justify-content: space-between; gap: 18px; padding: 10px 0; border-top: 1px solid var(--line); }
.change-history strong { font-size: 11px; }
.change-history span { color: var(--muted); font-size: 10px; text-align: right; }
.change-candidates { display: grid; gap: 9px; }
.change-candidate { display: grid; grid-template-columns: auto 38px minmax(0, 1fr); align-items: center; gap: 11px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.change-candidate:has(input:checked) { border-color: rgba(49, 98, 67, .38); background: var(--green-soft); }
.change-candidate input { width: 17px; height: 17px; accent-color: var(--green); }
.change-candidate-icon { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 10px; background: color-mix(in srgb, var(--node-color) 16%, transparent); color: color-mix(in srgb, var(--node-color) 72%, #17231b); }
.change-candidate > span:last-child { display: grid; gap: 4px; min-width: 0; }
.change-candidate strong { font-size: 12px; }
.change-candidate small { color: var(--muted); font-size: 10px; line-height: 1.4; }
.change-warning { margin-top: 16px; line-height: 1.55; }
.readiness-hero { position: relative; min-height: 310px; padding: 28px; overflow: hidden; background: var(--ink); color: white; }
.readiness-hero::after { content: ""; position: absolute; right: -70px; bottom: -110px; width: 330px; height: 330px; border: 1px solid #3d4741; border-radius: 50%; box-shadow: 0 0 0 52px rgba(255,255,255,.025), 0 0 0 104px rgba(255,255,255,.015); }
.readiness-copy { position: relative; z-index: 1; }
.readiness-copy .eyebrow { color: #8f9992; }
.readiness-value { display: flex; align-items: baseline; gap: 8px; margin: 48px 0 14px; }
.readiness-value strong { font-size: clamp(62px, 8vw, 94px); line-height: .8; letter-spacing: -.08em; }
.readiness-value span { color: #aab4ad; font-size: 17px; }
.readiness-hero p { max-width: 540px; color: #bac2bd; line-height: 1.55; font-size: 13px; }
.readiness-meta { position: absolute; z-index: 2; right: 28px; top: 28px; display: flex; gap: 7px; }
.readiness-meta .tag { background: #303833; color: #d5dbd7; }
.metric-stack { display: grid; gap: 12px; }
.metric-card { display: flex; align-items: center; justify-content: space-between; min-height: 91px; padding: 18px 20px; }
.metric-card span { color: var(--muted); font-size: 11px; }
.metric-card strong { display: block; margin-top: 5px; font-size: 26px; line-height: 1; letter-spacing: -.045em; }
.metric-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; background: var(--paper-deep); color: var(--blue); }
.dashboard-lower { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); gap: 20px; margin-top: 20px; }
.scenario-row { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto auto; align-items: center; gap: 13px; padding: 15px 20px; border-bottom: 1px solid var(--line); cursor: pointer; }
.scenario-row:last-child { border-bottom: 0; }
.scenario-row:hover { background: #faf8f2; }
.scenario-symbol { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--paper-deep); }
.scenario-row strong { display: block; font-size: 13px; }
.scenario-row small { color: var(--muted); }
.finding-list { display: grid; gap: 12px; }
.finding { padding: 15px 16px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 11px; background: #fffdfa; }
.finding[data-severity="critical"] { border-left-color: var(--red); }
.finding[data-severity="medium"] { border-left-color: var(--blue); }
.finding-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.finding strong { font-size: 12px; }
.finding p { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.finding-action { margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line); }
.finding-action span { display: block; color: var(--ink); font-family: monospace; font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.finding-action p { margin-top: 5px; color: var(--ink-soft); }
.finding-action-button { margin-top: 9px; padding: 0; border: 0; background: transparent; color: var(--ink); font-size: 10px; font-weight: 700; cursor: pointer; }
.finding-action-button:hover { color: var(--accent-dark); }
.due-row { display: flex; align-items: center; justify-content: space-between; gap: 13px; padding: 15px 0; border-bottom: 1px solid var(--line); }
.due-row:last-child { border: 0; padding-bottom: 0; }
.due-row:first-child { padding-top: 0; }
.due-row strong { display: block; font-size: 12px; }
.due-row small { color: var(--muted); }

/* Inventory */
.toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 20px; }
.search-box { position: relative; flex: 1; max-width: 440px; }
.search-box .icon { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.search-box input { width: 100%; min-height: 43px; padding: 10px 13px 10px 42px; border: 1px solid var(--line); border-radius: 11px; background: var(--surface); color: var(--ink); }
.filter-pills { display: flex; gap: 7px; margin-bottom: 20px; overflow-x: auto; scrollbar-width: none; }
.filter-pill { flex: 0 0 auto; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 11px; font-weight: 650; cursor: pointer; }
.filter-pill.active { background: var(--ink); border-color: var(--ink); color: white; }
.inventory-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.node-card { position: relative; min-height: 185px; padding: 20px; cursor: pointer; transition: transform .15s, box-shadow .15s, border-color .15s; }
.node-card:hover { transform: translateY(-2px); border-color: #b8b1a4; box-shadow: 0 12px 28px rgba(21,26,23,.08); }
.node-card-head { display: flex; justify-content: space-between; gap: 12px; }
.node-type-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 13px; color: var(--ink); }
.node-card h3 { margin: 30px 0 5px; font-size: 17px; letter-spacing: -.03em; }
.node-card p { min-height: 34px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.node-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 18px; color: var(--muted); font-size: 10px; }
.node-card-footer span { display: inline-flex; align-items: center; gap: 5px; }

/* Graph */
.graph-layout { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 18px; }
.graph-card { position: relative; min-height: 660px; overflow: hidden; }
.graph-toolbar { position: absolute; z-index: 3; top: 16px; left: 16px; display: flex; gap: 7px; }
.graph-scroll { min-width: 820px; height: 660px; }
.graph-scroll svg { display: block; width: 100%; height: 100%; }
.graph-edge { fill: none; stroke: #cbc6ba; stroke-width: 1.3; }
.graph-edge.location { stroke-dasharray: 4 5; stroke: #bca9c2; }
.graph-node { cursor: pointer; }
.graph-node rect { fill: var(--surface); stroke: #c9c4b8; stroke-width: 1.3; filter: drop-shadow(0 4px 5px rgba(21,26,23,.06)); }
.graph-node:hover rect, .graph-node.selected rect { stroke: var(--ink); stroke-width: 2; }
.graph-node text { fill: var(--ink); font-family: Inter, ui-sans-serif, sans-serif; pointer-events: none; }
.graph-node .node-sub { fill: var(--muted); font-size: 9px; }
.graph-node .node-main { font-size: 11px; font-weight: 700; }
.graph-dot { stroke: var(--surface); stroke-width: 2; }
.graph-side { align-self: start; position: sticky; top: 92px; }
.graph-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 16px; border-top: 1px solid var(--line); }
.legend-item { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 9px; }
.legend-item i { width: 8px; height: 8px; border-radius: 3px; }
.detail-list { display: grid; gap: 13px; }
.detail-pair { display: grid; grid-template-columns: 90px 1fr; gap: 12px; font-size: 11px; }
.detail-pair dt { color: var(--muted); }
.detail-pair dd { margin: 0; font-weight: 620; }
.path-box { padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.path-box strong { display: block; font-size: 11px; }
.path-box p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }

/* Scenarios */
.scenario-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.scenario-card { padding: 22px; cursor: pointer; transition: transform .15s, border-color .15s; }
.scenario-card:hover { transform: translateY(-2px); border-color: #afa99c; }
.scenario-card-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.scenario-card .scenario-symbol { margin-bottom: 28px; }
.scenario-card h3 { margin: 0 0 7px; font-size: 18px; letter-spacing: -.03em; }
.scenario-card p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.scenario-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; color: inherit; text-align: left; cursor: pointer; }
.scenario-open:focus-visible { outline: 3px solid rgba(49, 95, 139, .28); outline-offset: 7px; border-radius: 6px; }
.impact-bar { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 20px; border-top: 1px solid var(--line); padding-top: 15px; }
.impact-bar div { border-right: 1px solid var(--line); text-align: center; }
.impact-bar div:last-child { border-right: 0; }
.impact-bar strong { display: block; font-size: 17px; }
.impact-bar span { color: var(--muted); font-size: 9px; text-transform: uppercase; letter-spacing: .06em; }
.scenario-detail-asset { padding: 15px 0; border-bottom: 1px solid var(--line); }
.scenario-detail-asset:last-child { border-bottom: 0; }
.scenario-detail-asset header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.scenario-detail-asset header strong { font-size: 13px; }
.scenario-detail-asset > p { margin: 7px 0 12px; color: var(--muted); font-size: 11px; }
.path-result { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-top: 6px; border-radius: 8px; background: var(--paper); font-size: 10px; }
.path-result i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.path-result.available i { background: var(--green); }
.path-result.blocked i { background: var(--red); }

/* Ceremonies */
.ceremony-list { display: grid; gap: 13px; }
.ceremony-card { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 17px; padding: 18px 20px; }
.ceremony-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; background: var(--paper-deep); color: var(--violet); }
.ceremony-card h3 { margin: 0 0 6px; font-size: 15px; }
.ceremony-meta { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 10px; }
.checklist { display: grid; gap: 9px; margin-top: 18px; }
.check-item { display: grid; grid-template-columns: 20px 1fr; gap: 10px; align-items: start; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--paper); color: var(--ink-soft); font-size: 11px; line-height: 1.45; }
.check-item input { margin: 2px 0 0; accent-color: var(--green); }

/* Panic mode */
.panic-page { min-height: calc(100vh - 72px); margin: -38px -34px -80px; padding: 42px 34px 90px; background: #201b19; color: white; }
.panic-page .page-header p { color: #bbb0aa; }
.panic-alert { display: flex; align-items: center; gap: 10px; padding: 13px 15px; margin-bottom: 25px; border: 1px solid #61443d; border-radius: 11px; background: #2d2421; color: #e9cdc4; font-size: 11px; }
.panic-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.panic-choice { min-height: 185px; padding: 20px; border: 1px solid #443c38; border-radius: 14px; background: #292421; color: white; text-align: left; cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.panic-choice:hover { transform: translateY(-2px); border-color: #8d5a4e; background: #332a26; }
.panic-choice .scenario-symbol { background: #3a302c; color: var(--accent); }
.panic-choice strong { display: block; margin: 28px 0 7px; font-size: 14px; }
.panic-choice span { color: #afa49e; font-size: 11px; line-height: 1.45; }
.runbook { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 18px; }
.runbook-main, .runbook-side { border: 1px solid #443c38; border-radius: 16px; background: #292421; }
.runbook-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; padding: 22px; border-bottom: 1px solid #443c38; }
.runbook-head h2 { margin: 0 0 7px; font-size: 22px; }
.runbook-head p { margin: 0; color: #afa49e; font-size: 11px; }
.runbook-step { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; padding: 17px 22px; border-bottom: 1px solid #403733; }
.runbook-step:last-child { border-bottom: 0; }
.runbook-step input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--accent); }
.runbook-step.done { opacity: .45; }
.runbook-step.done p { text-decoration: line-through; }
.runbook-step strong { display: block; margin-bottom: 5px; color: var(--accent); font-family: monospace; font-size: 9px; text-transform: uppercase; letter-spacing: .08em; }
.runbook-step p { margin: 0; color: #ebe5e1; font-size: 12px; line-height: 1.5; }
.runbook-side { align-self: start; padding: 20px; }
.runbook-side h3 { margin: 0 0 16px; font-size: 13px; }
.runbook-metric { display: flex; justify-content: space-between; padding: 11px 0; border-bottom: 1px solid #403733; color: #afa49e; font-size: 11px; }
.runbook-metric strong { color: white; }
.incident-history { margin-top: 34px; border-top: 1px solid #443c38; padding-top: 26px; }
.panic-section-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 12px; }
.panic-section-head h2 { margin: 0; font-size: 19px; }
.incident-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 17px; border: 1px solid #443c38; border-bottom: 0; background: #292421; }
.incident-row:first-child { border-radius: 12px 12px 0 0; }
.incident-row:last-child { border-bottom: 1px solid #443c38; border-radius: 0 0 12px 12px; }
.incident-row strong, .incident-row span { display: block; }
.incident-row strong { font-size: 11px; }
.incident-row span { margin-top: 4px; color: #afa49e; font-size: 9px; }
.incident-row > div:last-child { text-align: right; }

/* Recovery kit and settings */
.kit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; }
.kit-paper { padding: 46px; border: 1px solid var(--line); background: white; box-shadow: var(--shadow-sm); }
.kit-paper-header { display: flex; justify-content: space-between; gap: 30px; padding-bottom: 28px; border-bottom: 2px solid var(--ink); }
.kit-paper h2 { margin: 0; font-size: 32px; letter-spacing: -.05em; }
.kit-paper-section { padding: 27px 0; border-bottom: 1px solid var(--line); }
.kit-paper-section h3 { margin: 0 0 14px; font-family: monospace; font-size: 10px; letter-spacing: .12em; text-transform: uppercase; }
.kit-paper-section p, .kit-paper-section li { color: var(--ink-soft); font-size: 12px; line-height: 1.6; }
.kit-paper-section ul { margin: 0; padding-left: 18px; }
.kit-stamp { align-self: flex-start; padding: 8px 10px; border: 1px solid var(--ink); font-family: monospace; font-size: 9px; text-transform: uppercase; transform: rotate(2deg); }
/* Procedimiento del kit. Todo esto vive sobre .kit-paper, que es blanco: los
   colores son tinta sobre papel, no el tema de la app. */
/* Ensayo de acceso. Sin tildes, sin cruces, sin puntaje: no es un examen. */
.ensayo-portada { max-width: 720px; }
.ensayo-portada h2 { margin: 6px 0 14px; font-size: 26px; letter-spacing: -.045em; line-height: 1.2; }
.ensayo-portada p { margin: 0 0 14px; color: var(--ink-soft); font-size: 13px; line-height: 1.6; }
.ensayo-regla { display: flex; align-items: flex-start; gap: 8px; padding: 12px 14px; border-radius: 10px; background: var(--surface-soft, #f6f5f3); color: var(--muted) !important; font-size: 11.5px !important; }
.ensayo-regla svg { flex-shrink: 0; margin-top: 2px; }
.ensayo-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.ensayo-escena { padding: 26px; }
.ensayo-escena h2 { margin: 6px 0 18px; font-size: 22px; letter-spacing: -.04em; line-height: 1.28; }
.ensayo-pregunta { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--ink); font-weight: 500; }
.ensayo-ayuda { display: flex; align-items: flex-start; gap: 7px; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.ensayo-ayuda svg { flex-shrink: 0; margin-top: 1px; }
.ensayo-opcion { display: block; width: 100%; margin-bottom: 9px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 11px; background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; transition: border-color .12s, background .12s; }
.ensayo-opcion:hover, .ensayo-opcion:focus-visible { border-color: var(--ink-soft); background: var(--surface-soft, #f6f5f3); }
.ensayo-opcion strong { display: block; font-size: 13px; }
.ensayo-opcion span { display: block; margin-top: 4px; color: var(--muted); font-size: 10.5px; }
/* Ámbar para el desacuerdo, no rojo: no se equivocó, descubrió algo. */
.ensayo-veredicto { padding: 17px 18px; border-radius: 12px; border: 1px solid var(--line); margin-bottom: 16px; }
.ensayo-veredicto.diverge { border-color: #e0c28e; background: #fff8e9; }
.ensayo-veredicto.coincide { border-color: var(--green); background: var(--green-soft); }
.ensayo-mensaje { margin: 5px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-soft); }
.ensayo-faltantes { margin: 12px 0 0; padding-left: 18px; }
.ensayo-faltantes li { font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.ensayo-cierre { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 18px; align-items: start; }
.ensayo-cierre h2 { margin: 6px 0 12px; font-size: 24px; letter-spacing: -.04em; line-height: 1.22; }
.ensayo-texto { margin: 0 0 18px; font-size: 13px; line-height: 1.55; color: var(--ink-soft); }
.ensayo-hallazgo { padding: 16px 17px; border-radius: 12px; background: var(--amber-soft); margin-bottom: 16px; }
.ensayo-hallazgo .eyebrow { margin: 0 0 6px; color: #8a6520; }
.ensayo-hallazgo strong { display: block; margin-bottom: 7px; font-size: 13.5px; color: #6b4d15; }
.ensayo-hallazgo p { margin: 0; font-size: 11.5px; line-height: 1.6; color: #7a5a1c; }
.ensayo-advertencia { display: flex; align-items: flex-start; gap: 8px; margin: 0; padding: 13px 14px; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.ensayo-advertencia svg { flex-shrink: 0; margin-top: 1px; }
.ensayo-paso { padding: 12px 0; border-top: 1px solid var(--line); }
.ensayo-paso:first-child { border-top: 0; }
.ensayo-paso strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ensayo-paso > span { display: block; margin-top: 3px; font-size: 12px; }
.ensayo-paso-camino { color: var(--muted) !important; font-size: 10.5px !important; }
.ensayo-paso.diverge { border-left: 3px solid #e0c28e; padding-left: 12px; }
@media (max-width: 1080px) {
  .ensayo-layout, .ensayo-cierre { grid-template-columns: 1fr; }
}

/* El dial del tiempo. */
.dial-barras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; align-items: end; height: 96px; margin-bottom: 10px; }
.dial-barra { display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; }
.dial-columna { display: flex; align-items: flex-end; height: 100%; border-radius: 5px; background: var(--line); overflow: hidden; }
.dial-columna > span { display: block; width: 100%; min-height: 3px; border-radius: 5px; background: var(--green); transition: height .18s ease, background .18s ease; }
/* Cuando ya no queda nada disponible la barra mide 0 y no se ve: sin este
   mínimo, el momento más grave del dial es el que menos llama la atención. */
.dial-barra.activa .dial-columna > span { background: var(--ink); }
.dial-etiqueta { font-size: 9px; color: var(--muted); text-align: center; letter-spacing: -.01em; }
.dial-barra.activa .dial-etiqueta { color: var(--ink); font-weight: 600; }
.dial-slider { width: 100%; margin: 0 0 16px; accent-color: var(--ink); }
.dial-lectura { padding-top: 14px; border-top: 1px solid var(--line); }
.dial-numero { display: flex; align-items: baseline; gap: 8px; }
.dial-numero strong { font-size: 34px; letter-spacing: -.05em; line-height: 1; }
.dial-numero span { color: var(--muted); font-size: 11px; }
.dial-caidos { margin: 10px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ink-soft); }
.dial-resumen, .dial-alerta { display: flex; align-items: flex-start; gap: 7px; margin: 14px 0 16px; font-size: 11px; line-height: 1.45; color: var(--muted); }
.dial-alerta { color: var(--amber); }
.dial-resumen svg, .dial-alerta svg { flex-shrink: 0; margin-top: 1px; }

/* Moldes de arranque: la respuesta al costo de entrada. */
.molde-aviso { display: flex; gap: 11px; margin-bottom: 18px; padding: 13px 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-soft, #f6f5f3); font-size: 11.5px; line-height: 1.55; color: var(--ink-soft); }
.molde-aviso svg { flex-shrink: 0; margin-top: 1px; color: var(--muted); }
.molde-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.molde { display: flex; flex-direction: column; padding: 22px; }
.molde-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 9px; }
.molde-top h3 { margin: 0; font-size: 17px; letter-spacing: -.035em; }
.molde-top .tag { flex-shrink: 0; }
.molde-desc { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--ink-soft); }
.molde-quien { margin: 0 0 15px; font-size: 11px; line-height: 1.5; color: var(--muted); }
/* El hallazgo es el producto de esta pantalla: es lo que la persona lee en dos
   segundos y la convence de que la app sabe algo que ella no. Va destacado. */
.molde-hallazgo { margin-bottom: 18px; padding: 13px 14px; border-radius: 10px; background: var(--amber-soft); }
.molde-hallazgo .eyebrow { margin: 0 0 5px; color: #8a6520; }
.molde-hallazgo strong { display: block; margin-bottom: 5px; font-size: 12px; color: #6b4d15; }
.molde-hallazgo p { margin: 0; font-size: 11px; line-height: 1.5; color: #7a5a1c; }
.molde-cta { margin-top: auto; width: 100%; }

/* El punto más frágil, dentro del hero oscuro del tablero. */
.readiness-fragil { display: grid; gap: 3px; width: 100%; margin-top: 22px; padding: 15px 17px; border: 1px solid #4a3f39; border-radius: 12px; background: rgba(255, 255, 255, .04); text-align: left; cursor: pointer; font: inherit; color: inherit; transition: background .15s, border-color .15s; }
.readiness-fragil:hover, .readiness-fragil:focus-visible { background: rgba(255, 255, 255, .08); border-color: #6a5a50; }
.readiness-fragil .eyebrow { margin: 0; color: var(--amber); }
.readiness-fragil strong { font-size: 16px; letter-spacing: -.03em; }
.readiness-fragil > span:not(.eyebrow) { color: #b8ada4; font-size: 11px; line-height: 1.45; }
.readiness-fragil-cta { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; color: #e8e2db !important; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; }

/* "Qué pasa si…" — la pantalla que vuelve tocable el motor. */
.riesgo-top { margin-bottom: 18px; }
.riesgo-nota { margin: 0 0 14px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.riesgo-fila { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 12px; width: 100%; padding: 13px 0; border: 0; border-top: 1px solid var(--line); background: none; text-align: left; cursor: pointer; font: inherit; color: inherit; }
.riesgo-fila:first-of-type { border-top: 0; }
.riesgo-fila:hover .riesgo-accion, .riesgo-fila:focus-visible .riesgo-accion { opacity: 1; }
.riesgo-marca { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--amber-soft); color: var(--amber); }
.riesgo-fila.unico .riesgo-marca { background: var(--red-soft); color: var(--red); }
.riesgo-cuerpo strong { display: block; font-size: 12px; }
.riesgo-cuerpo > span { display: block; margin-top: 3px; color: var(--muted); font-size: 10.5px; line-height: 1.45; }
.riesgo-accion { display: flex; align-items: center; gap: 4px; opacity: 0; transition: opacity .15s; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

.whatif-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.whatif-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.whatif-chip { display: inline-flex; align-items: center; gap: 7px; padding: 7px 11px; border: 1px solid var(--line); border-radius: 999px; background: none; cursor: pointer; font: inherit; font-size: 11px; color: var(--ink); transition: background .12s, border-color .12s; }
.whatif-chip:hover { border-color: var(--ink-soft); }
.whatif-chip i { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.whatif-chip em { font-style: normal; font-size: 9px; text-transform: uppercase; letter-spacing: .05em; opacity: .85; }
/* Ámbar = lo perdiste. Rojo lleno = lo tiene otro. La diferencia se ve de
   lejos, sin leer: son dos emergencias distintas. */
.whatif-chip.perdido { border-color: var(--amber); background: var(--amber-soft); color: var(--amber); }
.whatif-chip.robado { border-color: var(--red); background: var(--red); color: #fff; }
.whatif-resultado { position: sticky; top: 18px; }
.whatif-cambios { display: grid; gap: 11px; }
.whatif-cambio { padding: 13px 15px; border: 1px solid var(--line); border-left: 3px solid var(--amber); border-radius: 10px; }
.whatif-cambio.blocked { border-left-color: var(--red); }
.whatif-cambio.compromised { border-left-color: var(--red); background: var(--red-soft); }
.whatif-cambio-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 7px; }
.whatif-cambio-top strong { font-size: 12.5px; }
.whatif-flecha { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.whatif-cambio p { margin: 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.whatif-caminos { margin-top: 5px !important; font-family: monospace; font-size: 10px; color: var(--muted) !important; }
.whatif-sano { display: flex; gap: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 11px; }
.whatif-sano strong { display: block; margin-bottom: 5px; font-size: 12.5px; }
.whatif-sano p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.5; }
.whatif-sano svg { flex-shrink: 0; color: var(--green); }
@media (max-width: 1080px) {
  .whatif-layout { grid-template-columns: 1fr; }
  .whatif-resultado { position: static; }
}

/* Equivalente textual del grafo: plegado en pantalla, siempre presente para el
   lector de pantalla, y desplegado al imprimir. */
.graph-texto { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.graph-texto summary { cursor: pointer; font-size: 11px; color: var(--muted); }
.graph-texto-cuerpo { margin-top: 12px; display: grid; gap: 13px; }
.graph-texto-item strong { font-size: 12px; }
.graph-texto-item > span { margin-left: 7px; font-family: monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.graph-texto-item ul { margin: 5px 0 0; padding-left: 18px; }
.graph-texto-item li { font-size: 11px; line-height: 1.55; color: var(--ink-soft); }

.kit-note { margin: 0 0 20px; padding: 11px 13px; border-left: 3px solid var(--ink); background: #f6f5f3; font-size: 11px !important; line-height: 1.55 !important; }
.kit-item { padding: 18px 0; border-top: 1px dashed var(--line); break-inside: avoid; }
.kit-item:first-of-type { border-top: 0; padding-top: 4px; }
.kit-item h4 { display: flex; align-items: baseline; gap: 9px; margin: 0 0 4px; font-size: 17px; letter-spacing: -.03em; }
.kit-crit { font-family: monospace; font-size: 9px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.kit-item-desc { margin: 0 0 12px; font-size: 11px !important; }
.kit-path { margin: 12px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; break-inside: avoid; }
.kit-path-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0 0 9px !important; font-weight: 600; color: var(--ink) !important; font-size: 12px !important; }
.kit-path-head span { font-family: monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kit-steps { margin: 0; padding-left: 17px; }
.kit-steps li { margin-bottom: 9px; }
.kit-steps li:last-child { margin-bottom: 0; }
.kit-steps li.roto strong { text-decoration: line-through; }
.kit-steps strong { color: var(--ink); }
.kit-step-type { font-family: monospace; font-size: 9px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.kit-step-do, .kit-step-ev { display: block; font-size: 11px; line-height: 1.5; }
.kit-step-ev { margin-top: 2px; font-family: monospace; font-size: 9.5px; color: var(--muted); }
/* Amarillo, no rojo: "sin comprobar" es una advertencia honesta, no una falla. */
.kit-path-warn { margin: 10px 0 0 !important; padding: 8px 10px; border-radius: 6px; background: #fff8e9; color: #704b12 !important; font-size: 10.5px !important; }
.kit-path-ok { margin: 10px 0 0 !important; font-size: 10.5px !important; color: var(--muted) !important; }
/* La línea que evita que alguien busque durante semanas algo que no existe. */
.kit-alarm { margin: 6px 0 0 !important; padding: 10px 12px; border: 1px solid #d9a3a0; border-radius: 6px; background: #fdf3f2; color: #8a2f2a !important; font-size: 11.5px !important; font-weight: 500; }
.kit-gaps { display: grid; gap: 10px; margin-bottom: 18px; }
.kit-gap { display: flex; gap: 11px; padding: 13px 15px; border: 1px solid #e0c28e; border-radius: 12px; background: #fff8e9; color: #704b12; }
.kit-gap.critico { border-color: #d9a3a0; background: #fdf3f2; color: #8a2f2a; }
.kit-gap strong { display: block; margin-bottom: 3px; font-size: 12px; }
.kit-gap p { margin: 0; font-size: 11px; line-height: 1.5; }
.kit-gap svg { flex-shrink: 0; margin-top: 1px; }

.kit-side { display: grid; gap: 14px; align-content: start; }
.warning-card { padding: 17px; border: 1px solid #e0c28e; border-radius: 12px; background: #fff8e9; color: #704b12; font-size: 11px; line-height: 1.55; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.setting-card { padding: 22px; }
.setting-card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 8px; font-size: 16px; }
.setting-card > p { min-height: 42px; margin: 0 0 20px; color: var(--muted); font-size: 11px; line-height: 1.55; }
.setting-line { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 0; border-top: 1px solid var(--line); font-size: 11px; }
.setting-line strong { display: block; margin-bottom: 3px; }
.setting-line span { color: var(--muted); }
.danger-zone { border-color: #e1b9b6; }

/* Local checks and copilot */
.checks-layout, .copilot-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(330px, .95fr); gap: 18px; }
.checks-panel, .priorities-panel, .local-model-panel, .ai-output { padding: 22px; }
.checks-panel .card-head, .priorities-panel .card-head, .ai-output .card-head { padding: 0 0 18px; }
.checks-panel h2, .priorities-panel h2, .ai-output h2 { margin: 0; font-size: 18px; }
.coverage-list { display: grid; }
.coverage-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); }
.coverage-state { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; }
.coverage-state.ready { background: var(--green-soft); color: var(--green); }
.coverage-state.missing { background: var(--amber-soft); color: var(--amber); }
.coverage-row strong { display: block; font-size: 12px; }
.coverage-row p { margin: 4px 0 0; color: var(--muted); font-size: 10px; line-height: 1.45; }
.key-contract { display: flex; gap: 10px; padding: 12px; margin: 0 0 12px; border: 1px solid #c8d9d3; border-radius: 10px; background: #eff7f4; color: #385c50; font-size: 10px; line-height: 1.5; }
.physical-key-list { display: grid; }
.physical-key-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 13px 0; border-top: 1px solid var(--line); }
.physical-key-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--paper-deep); color: var(--violet); }
.physical-key-row strong, .physical-key-row span { display: block; }
.physical-key-row strong { font-size: 12px; }
.physical-key-row span { margin-top: 4px; color: var(--muted); font-size: 9px; }
.boundary-card { margin-top: 18px; padding: 18px 22px; border-style: dashed; }
.boundary-card > div { display: flex; gap: 12px; align-items: flex-start; }
.boundary-card strong { display: block; font-size: 12px; }
.boundary-card p { margin: 5px 0 0; color: var(--muted); font-size: 10px; line-height: 1.55; }
.priority-list { display: grid; }
.priority-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 13px; padding: 16px 0; border-top: 1px solid var(--line); }
.priority-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--ink); color: white; font-family: monospace; font-size: 11px; }
.priority-row header { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.priority-row strong { font-size: 12px; }
.priority-row p { margin: 7px 0; color: var(--muted); font-size: 10px; line-height: 1.5; }
.priority-action { display: flex; gap: 7px; align-items: flex-start; color: var(--blue); font-size: 10px; font-weight: 650; line-height: 1.45; }
.local-model-panel { align-self: start; background: var(--ink); color: white; }
.local-model-panel .eyebrow { color: #8f9992; }
.model-status { display: flex; align-items: center; gap: 12px; padding: 18px 0; border-top: 1px solid #3d4741; border-bottom: 1px solid #3d4741; }
.status-orb { width: 11px; height: 11px; border-radius: 50%; background: #707873; box-shadow: 0 0 0 5px #303833; }
.status-orb.online { background: #6bc5a4; box-shadow: 0 0 0 5px #29473c; }
.model-status strong, .model-status span { display: block; }
.model-status strong { font-size: 13px; }
.model-status span { margin-top: 3px; color: #9da69f; font-size: 9px; }
.privacy-bullets { display: grid; gap: 9px; margin: 18px 0 0; padding-left: 17px; color: #bcc5bf; font-size: 10px; line-height: 1.45; }
.inline-error { padding: 11px; margin-top: 17px; border: 1px solid #71443e; border-radius: 9px; background: #3d2522; color: #f2c6bf; font-size: 10px; line-height: 1.45; }
.ai-output { margin-top: 18px; }
.ai-copy { white-space: pre-wrap; padding: 21px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink-soft); font-size: 12px; line-height: 1.72; }
.ai-output footer { display: flex; gap: 8px; align-items: center; margin-top: 14px; color: var(--muted); font-size: 9px; }

/* Forms and modal */
.field { display: grid; gap: 7px; }
.field label, .field-label { color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.field input, .field textarea, .field select { width: 100%; min-height: 43px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: white; color: var(--ink); }
.field textarea { min-height: 84px; resize: vertical; line-height: 1.5; }
.field small { color: var(--muted); font-size: 9px; line-height: 1.4; }
.field-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field-grid .span-2 { grid-column: span 2; }
.secret-warning { display: flex; gap: 10px; padding: 11px 12px; border: 1px solid #e6c89c; border-radius: 9px; background: #fff8ea; color: #77521d; font-size: 10px; line-height: 1.45; }
.editor-guidance { align-items: flex-start; background: color-mix(in srgb, var(--accent) 10%, var(--surface)); border: 1px solid color-mix(in srgb, var(--accent) 35%, var(--border)); border-radius: var(--radius-sm); display: flex; gap: 11px; margin-bottom: 14px; padding: 13px 14px; }
.editor-guidance > svg { color: var(--accent); flex: 0 0 auto; margin-top: 2px; }
.editor-guidance strong { display: block; font-size: 12px; margin-bottom: 3px; }
.editor-guidance p { color: var(--text-secondary); font-size: 12px; line-height: 1.5; margin: 0; }
.path-editor { display: grid; gap: 10px; }
.path-editor-row { padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.path-editor-head { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 10px; }
.path-editor-head input { min-height: 36px; }
.factor-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; max-height: 180px; overflow: auto; }
.factor-check { display: flex; gap: 7px; align-items: center; padding: 7px; border-radius: 7px; background: white; font-size: 10px; }
.fieldset-reset { min-width: 0; margin: 0; padding: 0; border: 0; }
.fieldset-reset legend { margin-bottom: 7px; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(10, 13, 11, .68); backdrop-filter: blur(5px); animation: fade-in .15s ease; }
.modal { width: min(680px, 100%); max-height: min(880px, calc(100vh - 40px)); overflow: auto; border-radius: 19px; background: var(--surface); box-shadow: var(--shadow-lg); animation: modal-in .18s ease; }
.modal-wide { width: min(900px, 100%); }
.modal-head { position: sticky; z-index: 3; top: 0; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding: 21px 23px; border-bottom: 1px solid var(--line); background: rgba(255,253,250,.95); backdrop-filter: blur(10px); }
.modal-head h2 { margin: 0; font-size: 20px; letter-spacing: -.035em; }
.modal-head p { margin: 6px 0 0; color: var(--muted); font-size: 10px; }
.modal-body { padding: 23px; }
.modal-footer { position: sticky; bottom: 0; display: flex; justify-content: flex-end; gap: 9px; padding: 16px 23px; border-top: 1px solid var(--line); background: rgba(255,253,250,.95); backdrop-filter: blur(10px); }

/* Unlock */
.unlock-screen { display: grid; place-items: center; min-height: 100vh; padding: 25px; background: var(--ink); color: white; }
.unlock-card { width: min(440px, 100%); padding: 32px; border: 1px solid #39413c; border-radius: 22px; background: #1e2420; box-shadow: var(--shadow-lg); }
.unlock-card .brand { color: white; margin-bottom: 50px; }
.unlock-card h1 { margin: 0 0 10px; font-size: 34px; letter-spacing: -.05em; }
.unlock-card > p { margin: 0 0 25px; color: #aab3ad; font-size: 12px; line-height: 1.55; }
.unlock-card .field label { color: #d7ddd9; }
.unlock-card .field input { background: #141815; border-color: #39413c; color: white; }
.unlock-card .btn { width: 100%; margin-top: 12px; }
.unlock-meta { display: flex; align-items: center; gap: 8px; margin-top: 18px; color: #818a84; font-size: 9px; }
.unlock-error { padding: 10px; margin-bottom: 12px; border-radius: 8px; background: #482523; color: #ffd8d4; font-size: 10px; }

/* Notifications */
.toast-stack { position: fixed; z-index: 300; right: 18px; bottom: 18px; display: grid; gap: 9px; width: min(360px, calc(100% - 36px)); }
.toast { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 14px; border: 1px solid #333a36; border-radius: 11px; background: var(--ink); color: white; box-shadow: var(--shadow-lg); animation: toast-in .2s ease; }
.toast strong { display: block; margin-bottom: 3px; font-size: 11px; }
.toast p { margin: 0; color: #b8c0bb; font-size: 10px; line-height: 1.4; }
.toast.error { background: #452421; border-color: #6a3833; }
.toast.aviso { background: #40361f; border-color: #6b5a30; }
.toast.aviso .icon { color: #e8bf6a; }
.toast.success .icon { color: #70c8a8; }
.toast.error .icon { color: #ff9081; }

@keyframes fade-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.98); } }
@keyframes toast-in { from { opacity: 0; transform: translateY(8px); } }

@media (max-width: 1050px) {
  .hero { grid-template-columns: 1fr; min-height: auto; gap: 30px; }
  .hero-visual { min-height: 470px; }
  .demo-window { left: 5%; right: 5%; width: 90%; }
  .visual-sticker { right: 2%; }
  .inventory-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-grid, .dashboard-lower, .kit-layout { grid-template-columns: 1fr; }
  .autopilot-panel { grid-template-columns: minmax(0, 1fr) 190px; }
  .metric-stack { grid-template-columns: repeat(3, 1fr); }
  .metric-card { min-height: 110px; align-items: flex-start; }
  .metric-icon { display: none; }
  .graph-layout { grid-template-columns: 1fr; }
  .graph-side { position: static; }
  .panic-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 780px) {
  :root { --sidebar: 0px; }
  .site-nav { height: 68px; }
  .site-links a:not(.btn) { display: none; }
  .hero { width: min(100% - 28px, 680px); padding-top: 54px; }
  .hero h1 { font-size: clamp(50px, 16vw, 76px); }
  .hero-visual { min-height: 430px; }
  .manifest-strip-inner { grid-template-columns: 1fr; gap: 15px; }
  .manifest-arrow { display: none; }
  .site-section { padding: 80px 0; }
  .section-head { grid-template-columns: 1fr; gap: 20px; }
  .problem-grid { grid-template-columns: 1fr; }
  .problem-card { min-height: auto; border-right: 0; border-bottom: 1px solid var(--line); }
  .problem-card:last-child { border-bottom: 0; }
  .problem-card h3 { margin-top: 40px; }
  .safety-grid { grid-template-columns: 1fr; gap: 50px; padding: 80px 0; }
  .site-footer { align-items: flex-start; flex-direction: column; }
  .sidebar { transform: translateX(-100%); width: 252px; transition: transform .2s ease; }
  .sidebar.open { transform: translateX(0); }
  .mobile-topbar { position: fixed; z-index: 29; top: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 14px; border-bottom: 1px solid var(--line); background: rgba(244,242,235,.94); backdrop-filter: blur(12px); }
  .mobile-topbar .brand { font-size: 13px; }
  .mobile-topbar .brand-mark { width: 30px; height: 30px; }
  .app-main { grid-column: 1; padding-top: 60px; }
  .topbar { display: none; }
  .page { padding: 28px 16px 70px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .autopilot-panel { grid-template-columns: 1fr; }
  .autopilot-main { padding: 23px 20px 20px; }
  .autopilot-loop { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .autopilot-next { align-items: stretch; flex-direction: column; }
  .autopilot-next .btn { width: 100%; }
  .autopilot-progress { border-top: 1px solid rgba(49, 98, 67, .15); border-left: 0; }
  .autopilot-queue { align-items: stretch; flex-direction: column; }
  .autopilot-queue button { max-width: none; width: 100%; }
  .change-grid { grid-template-columns: 1fr; }
  .change-history > div { align-items: flex-start; flex-direction: column; gap: 4px; }
  .change-history span { text-align: left; }
  .inventory-grid, .scenario-grid, .settings-grid, .checks-layout, .copilot-layout { grid-template-columns: 1fr; }
  .metric-stack { grid-template-columns: 1fr; }
  .metric-card { min-height: 84px; align-items: center; }
  .metric-icon { display: grid; }
  .readiness-meta { position: static; margin-bottom: 12px; }
  .readiness-value { margin-top: 34px; }
  .scenario-row { grid-template-columns: 42px minmax(0, 1fr) auto; }
  .scenario-row .icon:last-child { display: none; }
  .panic-page { min-height: calc(100vh - 60px); margin: -28px -16px -70px; padding: 30px 16px 80px; }
  .panic-grid { grid-template-columns: 1fr; }
  .runbook { grid-template-columns: 1fr; }
  .kit-paper { padding: 25px; }
  .kit-paper-header { flex-direction: column; }
  .ceremony-card { grid-template-columns: 48px minmax(0, 1fr); }
  .ceremony-card > .button-row { grid-column: 1 / -1; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .span-2 { grid-column: auto; }
  .factor-checks { grid-template-columns: 1fr; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .search-box { max-width: none; }
}

@media (max-width: 480px) {
  .hero { width: calc(100% - 24px); }
  .hero h1 { font-size: 48px; }
  .hero-visual { min-height: 380px; }
  .demo-window-body { padding: 18px; }
  .visual-sticker { display: none; }
  .site-section, .safety-grid { width: calc(100% - 28px); }
  .site-nav, .manifest-strip-inner, .site-footer { width: calc(100% - 28px); }
  .scenario-row { padding-inline: 14px; }
  .readiness-hero { padding: 22px; }
  .readiness-value strong { font-size: 67px; }
  .modal-backdrop { padding: 0; place-items: end center; }
  .modal { max-height: 94vh; border-radius: 19px 19px 0 0; }
  .physical-key-row { grid-template-columns: 40px minmax(0, 1fr); }
  .physical-key-row .btn { grid-column: 2; justify-self: start; }
}

@media print {
  body { background: white; }
  .sidebar, .mobile-topbar, .topbar, .page-header, .kit-side, .toast-stack, .no-print { display: none !important; }
  .app-shell, .app-main, .kit-layout { display: block; }
  .page { width: 100%; padding: 0; }
  /* En papel el SVG del grafo sale como una mancha ilegible; el texto sí sirve. */
  .graph-scroll { display: none; }
  .graph-texto { border-top: 0; }
  .graph-texto summary { display: none; }
  .graph-texto-cuerpo { display: grid !important; }
  .kit-paper { border: 0; box-shadow: none; padding: 0; }
  .kit-paper-section { break-inside: avoid; }
  /* El procedimiento es largo: si se fuerza a no cortarse, la impresora deja
     páginas casi vacías. Se corta entre elementos, nunca dentro de un camino. */
  .kit-procedure { break-inside: auto; }
  .kit-item, .kit-path { break-inside: avoid; }
  /* Los fondos de color no salen por defecto, y ahí "Sin comprobar" quedaría
     igual que el resto del texto. En papel el aviso se sostiene con el borde. */
  .kit-path-warn { border: 1px solid #a07a2a; }
  .kit-alarm { border: 2px solid #000; font-weight: 700; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ── Demo animada de la portada ─────────────────────────────────────────
   Cuenta la mecánica del producto sin que haya que leer un párrafo: un
   camino exige todos sus factores, dos caminos son alternativas, y una
   simulación rompe algo para mostrar qué queda en pie. */

.film {
  margin: 0;
  border: 1px solid var(--line, #e2ded4);
  border-radius: 18px;
  background: var(--paper, #fff);
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(0, 0, 0, 0.45);
}

.film-screen {
  padding: 26px 24px 22px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.02), transparent 60%);
  min-height: 300px;
}

.film-node,
.film-path {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.film-node.is-visible,
.film-path.is-visible { opacity: 1; transform: none; }

.film-node {
  display: inline-flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 18px;
  border-radius: 12px;
  background: var(--ink, #151a17);
  color: #fff;
  margin-bottom: 18px;
}
.film-node-kind { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.7; }
.film-node strong { font-size: 17px; }

.film-paths { display: grid; gap: 10px; }

.film-path {
  border: 1px solid var(--line, #e2ded4);
  border-radius: 12px;
  padding: 12px 14px;
  background: #fff;
  transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.4s ease, background 0.4s ease;
}
.film-path.is-broken { border-color: #d8544b; background: rgba(216, 84, 75, 0.05); }

.film-path-name {
  display: block;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-soft, #4a5049);
  margin-bottom: 8px;
}

.film-path-factors { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

.film-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border: 1px solid var(--line, #e2ded4);
  border-radius: 9px;
  background: #fff;
  transition: opacity 0.45s ease, border-color 0.45s ease, background 0.45s ease;
}
.film-chip-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #2f9e63;
  flex: none;
  transition: background 0.45s ease;
}
.film-chip-text { display: flex; flex-direction: column; line-height: 1.25; }
.film-chip-text strong { font-size: 13px; font-weight: 600; }
.film-chip-text small { font-size: 11px; color: var(--ink-soft, #6a716b); }

.film-chip.is-dead { border-color: #e3b4b0; background: rgba(216, 84, 75, 0.06); }
.film-chip.is-dead .film-chip-dot { background: #d8544b; }
.film-chip.is-dead .film-chip-text strong { text-decoration: line-through; opacity: 0.75; }

/* La "y" es la regla que más cuesta explicar: un camino los exige a todos. */
.film-and {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-soft, #6a716b);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.film-or {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em;
  color: var(--ink-soft, #6a716b); text-transform: uppercase;
}
.film-or::before, .film-or::after {
  content: ""; flex: 1; height: 1px; background: var(--line, #e2ded4);
}

.film-verdict {
  margin-top: 16px;
  display: inline-block;
  padding: 7px 13px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
}
.film-verdict[data-tone="ok"] { background: rgba(47, 158, 99, 0.12); color: #1e7047; }
.film-verdict[data-tone="bad"] { background: rgba(216, 84, 75, 0.12); color: #a8382f; }

.film-finding {
  margin-top: 10px;
  padding: 10px 13px;
  border-left: 3px solid #d89a2b;
  background: rgba(216, 154, 43, 0.09);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
}

.film-caption {
  padding: 16px 24px;
  border-top: 1px solid var(--line, #e2ded4);
  font-size: 15px;
  line-height: 1.5;
  min-height: 76px;
  background: var(--paper-deep, #faf8f3);
}

.film-controls {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 24px 16px;
  background: var(--paper-deep, #faf8f3);
  border-top: 1px solid var(--line, #e2ded4);
}
.film-progress { display: flex; gap: 5px; flex: 1; }
.film-progress i {
  height: 3px; flex: 1; border-radius: 2px;
  background: var(--line, #e2ded4);
  transition: background 0.4s ease;
}
.film-progress i.is-on { background: var(--ink, #151a17); }

.film-btn {
  border: 1px solid var(--line, #e2ded4);
  background: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.film-btn:hover { border-color: var(--ink-soft, #6a716b); }

@media (prefers-reduced-motion: reduce) {
  .film-node, .film-path, .film-chip { transition: none; }
}

@media (max-width: 640px) {
  .film-screen { padding: 20px 16px; }
  .film-caption, .film-controls { padding-inline: 16px; }
}

.film-or { opacity: 0; transition: opacity 0.5s ease; }
.film-or.is-visible { opacity: 1; }

/* ── Arranque guiado ────────────────────────────────────────────────────
   Seis preguntas antes de pedir cargar nada. La pantalla tiene que sentirse
   liviana: una pregunta a la vez, opciones grandes, y el diagnóstico al final
   como pago por haber contestado. */

.onboarding { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px; }
.onb-wrap { width: 100%; max-width: 620px; }

.onb-progress { display: flex; align-items: center; gap: 5px; margin-bottom: 26px; }
.onb-progress i { height: 3px; flex: 1; border-radius: 2px; background: var(--line, #e2ded4); transition: background 0.3s ease; }
.onb-progress i.is-on { background: var(--accent, #d9542f); }
.onb-progress span { font-size: 12px; color: var(--ink-soft, #6a716b); margin-left: 8px; white-space: nowrap; }

.onb-title { font-size: clamp(25px, 5vw, 34px); line-height: 1.18; letter-spacing: -0.02em; margin: 0 0 10px; }
.onb-help { color: var(--ink-soft, #6a716b); margin: 0 0 24px; font-size: 15px; }
.onb-lede { color: var(--ink-soft, #6a716b); margin: 0 0 26px; font-size: 16px; }

.onb-options { display: grid; gap: 9px; margin-bottom: 26px; }
.onb-option {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  width: 100%; text-align: left;
  padding: 16px 18px;
  border: 1px solid var(--line, #e2ded4);
  border-radius: 12px;
  background: #fff;
  font-family: inherit; font-size: 15.5px; line-height: 1.35;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, background 0.18s ease;
}
.onb-option:hover { border-color: var(--ink, #151a17); transform: translateY(-1px); }
.onb-option svg { flex: none; opacity: 0.35; }
.onb-option:hover svg { opacity: 0.8; }
.onb-option.is-picked { border-color: var(--accent, #d9542f); background: rgba(217, 84, 47, 0.05); }

.onb-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

.onb-alerts { display: grid; gap: 11px; margin-bottom: 34px; }
.onb-alert {
  padding: 16px 18px; border-radius: 12px;
  border-left: 4px solid var(--line, #e2ded4);
  background: var(--paper-deep, #faf8f3);
}
.onb-alert h3 { margin: 0 0 6px; font-size: 16px; }
.onb-alert p { margin: 0; color: var(--ink-soft, #5a615b); font-size: 14.5px; line-height: 1.5; }
.onb-alert[data-tono="critico"] { border-left-color: #d8544b; background: rgba(216, 84, 75, 0.05); }
.onb-alert[data-tono="alto"] { border-left-color: #d89a2b; background: rgba(216, 154, 43, 0.06); }
.onb-alert[data-tono="ok"] { border-left-color: #2f9e63; background: rgba(47, 158, 99, 0.05); }

.onb-next { border-top: 1px solid var(--line, #e2ded4); padding-top: 26px; }
.onb-next h2 { font-size: 19px; margin: 0 0 8px; }
.onb-next p { color: var(--ink-soft, #5a615b); margin: 0 0 20px; font-size: 15px; line-height: 1.55; }

@media (max-width: 560px) {
  .onboarding { align-items: flex-start; padding-top: 24px; }
  .onb-option { padding: 14px 15px; font-size: 15px; }
}

.field-static {
  display: flex; align-items: center; gap: 8px;
  margin: 0; padding: 11px 13px;
  border: 1px solid var(--line, #e2ded4); border-radius: 9px;
  background: var(--paper-deep, #faf8f3);
  font-size: 14px; color: var(--ink-soft, #5a615b);
}

.onb-option.is-multi.is-picked { border-color: var(--accent, #d9542f); }
.onb-check { display: inline-flex; width: 20px; justify-content: center; }
.onb-continue { margin-bottom: 22px; }
.onb-continue .btn[disabled] { opacity: 0.45; cursor: not-allowed; }

.checklist-hint { margin: 16px 0 10px; font-size: 14px; color: var(--ink-soft, #5a615b); line-height: 1.5; }
.modal-footer-split { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.btn-warn { border-color: #d89a2b; color: #a06a12; background: rgba(216, 154, 43, 0.08); }
.btn-warn:hover { background: rgba(216, 154, 43, 0.16); }

/* ── Panic Mode: por dónde entrar ───────────────────────────────────────
   Va antes que los pasos. Alguien en pánico no necesita el inventario de lo
   que está roto: necesita una puerta.

   OJO CON LOS COLORES: .panic-page trae su propio tema oscuro hardcodeado
   (fondo #201b19, texto blanco, tarjetas #292421). La primera versión de esta
   sección usaba blanco de fondo y heredaba el texto blanco de la página: se
   veían los tildes y ni una sola palabra. Si tocás esto, miralo en pantalla,
   no alcanza con que pasen los tests. */

.entrada {
  border: 1px solid #3f7a5f;
  background: #23302a;
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 22px;
}
.entrada header { margin-bottom: 15px; }
.entrada .eyebrow { color: #7fbb9c; }
.entrada h2 { margin: 3px 0 0; font-size: 20px; color: #8fd3ae; }
.entrada-lista { display: grid; gap: 11px; grid-template-columns: repeat(auto-fit, minmax(255px, 1fr)); }

.entrada-via {
  background: #292421;
  border: 1px solid #443c38;
  border-radius: 11px;
  padding: 15px 17px;
  color: #fff;
}
.entrada-via.tiene-salvedad { border-color: #8a6a2e; }
.entrada-via header { display: flex; flex-direction: column; gap: 3px; margin-bottom: 11px; }
.entrada-via strong { font-size: 15.5px; color: #fff; }
.entrada-via-nombre { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: #afa49e; }
.entrada-necesitas { margin: 0 0 7px; font-size: 12px; color: #afa49e; }
.entrada-factores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.entrada-factores li { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #ece6e2; }
.entrada-factores svg { color: #6cbf92; flex: none; }
.entrada-salvedad {
  margin: 11px 0 0; padding-top: 11px; border-top: 1px solid #443c38;
  font-size: 12.5px; color: #e0c187; display: flex; gap: 8px; align-items: flex-start; line-height: 1.45;
}
.entrada-salvedad svg { flex: none; margin-top: 2px; }

.entrada-vacia {
  display: flex; gap: 13px; align-items: flex-start;
  border: 1px solid #7d3b36; background: #2d2421;
  border-radius: 14px; padding: 18px 20px; margin-bottom: 22px;
  color: #fff;
}
.entrada-vacia strong { display: block; margin-bottom: 6px; font-size: 15px; }
.entrada-vacia p { margin: 0; font-size: 13.5px; color: #c9bdb7; line-height: 1.5; }
.entrada-vacia svg { color: #e07b74; flex: none; margin-top: 2px; }

@media print {
  /* En papel el tema oscuro no sirve: se imprime en claro y primero. */
  .entrada { border-color: #999; background: #fff; break-inside: avoid; }
  .entrada h2, .entrada .eyebrow { color: #000; }
  .entrada-via { background: #fff; border-color: #bbb; color: #000; }
  .entrada-via strong, .entrada-factores li { color: #000; }
  .entrada-via-nombre, .entrada-necesitas { color: #444; }
}