: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; }

/* .breakable se usaba en el HTML de las cuatro direcciones y NUNCA se definio
   aca. La intencion estaba escrita y la regla faltaba, asi que una direccion
   Taproot —62 caracteres, 579px medidos— no podia cortarse y se desbordaba en
   cualquier telefono.
   Eso rompe justo lo que la herramienta existe para hacer: comparar tu direccion
   con la que muestra. Cortada a la mitad no se puede comparar. Y quien llega
   desde un comentario de Reddit casi siempre llega desde el telefono. */
.breakable { overflow-wrap: anywhere; word-break: break-word; }
.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); }
/* Anillo de foco de DOS colores.
   El anterior era rgba(49,95,139,.28): translucido, o sea que el color que se
   veia dependia del fondo. Daba 1,51:1 sobre el papel y 1,24:1 sobre la
   tarjeta de bloqueo, cuando WCAG 2.2 pide 3:1 contra lo adyacente. Ningun
   color opaco unico llega a 3:1 sobre fondo claro Y oscuro a la vez, asi que
   el anillo lleva dos: un aro y un halo de luminancia opuesta. Sobre papel se
   lee el aro oscuro (15,7:1); sobre un panel oscuro se lee el halo claro
   (15,8:1). Siempre hay un borde que contrasta, sea cual sea la superficie. */
.btn:focus-visible, .icon-btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring, #151a17);
  outline-offset: 3px;
  box-shadow: 0 0 0 3px var(--focus-ring-halo, #fffdfa);
}
.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; }
/* Un boton sin fondo propio tiene que tomar el color de texto de la superficie
   donde cae. Heredaba `color: var(--ink)` de `.btn`, y sobre cualquier panel
   oscuro quedaba tinta sobre tinta: en la pantalla de bloqueo la unica salida
   daba 1,11:1 contra la tarjeta, y ahi no hay recuperacion de contrasena. */
.btn-ghost { background: transparent; border-color: transparent; color: inherit; }
.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; }
.site-links .language-switch { padding: 7px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 10px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.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; }
.trusted-demo-callout { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 32px; margin-top: 28px; padding: 28px; border: 1px solid var(--ink); border-radius: 20px; background: var(--surface); }
.trusted-demo-callout h3 { margin: 6px 0 8px; font-size: clamp(22px, 2.3vw, 30px); letter-spacing: -.035em; }
.trusted-demo-callout p:not(.eyebrow) { max-width: 66ch; margin: 0; color: var(--muted); line-height: 1.6; }
.trusted-demo-callout .btn { max-width: 330px; text-align: left; }
.public-challenges { margin-top: 64px; padding: 40px; border: 1px solid var(--ink); border-radius: 24px; background: #11120f; color: #f4f2eb; }
.public-challenges-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr); gap: 44px; align-items: end; margin-bottom: 28px; }
.public-challenges-head h3 { max-width: 720px; margin: 7px 0 0; font-size: clamp(27px, 3.4vw, 44px); line-height: 1.02; letter-spacing: -.045em; }
.public-challenges-head > p { margin: 0; color: #aaa99f; line-height: 1.6; }
.public-challenge-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid #34352f; border-bottom: 1px solid #34352f; }
.public-challenge-card { display: flex; min-width: 0; flex-direction: column; padding: 24px; border-right: 1px solid #34352f; }
.public-challenge-card:last-child { border-right: 0; }
.public-challenge-meta { display: flex; justify-content: space-between; gap: 12px; color: #83847c; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; }
.public-challenge-card h4 { margin: 24px 0 8px; font-size: 20px; line-height: 1.08; letter-spacing: -.035em; }
.public-challenge-card > p { min-height: 58px; margin: 0 0 18px; color: #aaa99f; font-size: 12px; line-height: 1.55; }
.public-challenge-finding { min-height: 95px; margin-bottom: 20px; padding: 14px; border: 1px solid #3d3e37; border-radius: 12px; background: #1a1b17; }
.public-challenge-finding span { display: block; margin-bottom: 7px; color: #999a91; font-size: 9px; text-transform: uppercase; letter-spacing: .09em; }
.public-challenge-finding strong { display: block; color: #f6c95a; font-size: 12px; line-height: 1.45; }
.public-challenge-cta { justify-content: space-between; width: 100%; margin-top: auto; border-color: #56584f; background: transparent; color: #f4f2eb; }
.public-challenge-cta:hover { border-color: #f6c95a; background: #f6c95a; color: #11120f; }
.public-challenges-foot { margin: 18px 0 0; color: #83847c; font-size: 11px; line-height: 1.5; text-align: center; }
.challenge-report { min-height: 100vh; padding-bottom: 72px; background: #f3efe6; color: var(--ink); }
.challenge-report-nav { position: static; }
.challenge-report-hero { display: grid; grid-template-columns: minmax(0, .82fr) minmax(420px, 1.18fr); gap: 72px; align-items: center; width: min(1180px, calc(100% - 40px)); margin: 0 auto; padding: 88px 0 54px; }
.challenge-report-copy h1 { max-width: 680px; margin: 10px 0 18px; font-size: clamp(42px, 6vw, 76px); line-height: .96; letter-spacing: -.06em; }
.challenge-report-copy > p:not(.eyebrow) { max-width: 58ch; margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.challenge-report-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.challenge-report-copy > small { display: flex; gap: 7px; align-items: center; margin-top: 18px; color: var(--muted); font-size: 11px; }
.challenge-verdict { overflow: hidden; border: 1px solid #292a25; border-radius: 24px; background: #11120f; color: #f4f2eb; box-shadow: 0 24px 70px rgba(22, 23, 19, .14); }
.challenge-verdict-head { display: flex; justify-content: space-between; gap: 20px; padding: 15px 20px; border-bottom: 1px solid #34352f; color: #92938b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.challenge-verdict-head strong { display: flex; gap: 6px; align-items: center; color: #91d7a4; }
.challenge-verdict-body { padding: 36px; }
.challenge-verdict-body > span, .challenge-evidence-grid article > span { display: block; color: #92938b; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.challenge-verdict-body h2 { margin: 14px 0 24px; color: #f6c95a; font-size: clamp(28px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -.045em; }
.challenge-verdict-body p { margin: 0; color: #b9b9b1; line-height: 1.65; }
.challenge-verdict-body p strong { color: #f4f2eb; }
.challenge-evidence-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(1180px, calc(100% - 40px)); margin: 0 auto; border-top: 1px solid #cbc6b9; border-bottom: 1px solid #cbc6b9; }
.challenge-evidence-grid article { min-width: 0; padding: 36px; }
.challenge-evidence-grid article + article { border-left: 1px solid #cbc6b9; }
.challenge-evidence-grid h2 { max-width: 28ch; margin: 18px 0 12px; font-size: clamp(22px, 2.4vw, 34px); line-height: 1.15; letter-spacing: -.035em; }
.challenge-evidence-grid p { margin: 12px 0 0; color: var(--muted); font-size: 12px; line-height: 1.55; }
.challenge-impact { display: flex; gap: 24px; align-items: center; margin-top: 18px; }
.challenge-impact > div { display: grid; gap: 4px; }
.challenge-impact strong { font-size: 42px; line-height: 1; }
.challenge-impact small { color: var(--muted); }
.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; }
/* La ceremonia en la portada. Sobria, no naranja como el cierre: es una
   herramienta que se usa, no un llamado a la accion. Las variables son las que
   EXISTEN (--paper-deep, --ink, --line): inventarlas dejaba fondo oscuro con
   texto oscuro, o sea ilegible, y el fallback lo tapaba en silencio. */
.site-ceremonia { padding: 96px 20px; background: var(--paper-deep); color: var(--ink); border-top: 1px solid var(--line); }
.site-ceremonia > div { max-width: 760px; margin: 0 auto; }
.site-ceremonia .eyebrow { color: var(--muted); }
.site-ceremonia h2 { margin: 14px 0 22px; font-size: clamp(32px, 4.6vw, 54px); line-height: 1.02; letter-spacing: -.04em; color: var(--ink); }
.site-ceremonia .lede { font-size: clamp(18px, 2vw, 22px); line-height: 1.5; margin-bottom: 18px; color: var(--ink); }
.site-ceremonia p { margin: 0 0 18px; line-height: 1.6; color: var(--ink-soft); }
.site-ceremonia .button-row { margin: 30px 0 18px; }
.site-ceremonia .muted { font-size: 15px; color: var(--muted); margin: 0; }

.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, .tag-failed { background: var(--red-soft); color: var(--red); }
.tag-soon { background: var(--amber-soft); color: var(--amber); }
.tag-partial, .tag-skipped, .tag-invalidated, .tag-drifted, .tag-untracked { 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; }
.dashboard-analysis { margin-top: 20px; }
.dashboard-analysis > summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 700;
}
.dashboard-analysis > summary span { color: var(--ink-soft); font-size: 12px; font-weight: 500; }
.dashboard-analysis[open] > summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.dashboard-analysis-body { padding-top: 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 { min-width: 0; 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; }
.hub-nav { display: flex; flex-wrap: wrap; gap: 7px; margin: -12px 0 24px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.hub-link { display: inline-flex; align-items: center; gap: 7px; min-height: 35px; padding: 7px 11px; border: 1px solid transparent; border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 11px; font-weight: 720; cursor: pointer; }
.hub-link:hover { border-color: var(--line); background: var(--surface); color: var(--ink); }
.hub-link.active { border-color: rgba(49, 98, 67, .25); background: rgba(49, 98, 67, .08); color: #315f42; }
.hub-link.active .icon { color: #315f42; }
.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); }
.mitigation-preview { margin-top: 12px; padding: 18px 20px; border: 1px solid rgba(49, 98, 67, .17); border-radius: 16px; background: rgba(246, 250, 245, .78); }
.mitigation-preview-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mitigation-preview-head h3 { margin: 4px 0 0; font-size: 16px; letter-spacing: -.02em; }
.mitigation-preview > p { margin: 12px 0 0; color: var(--ink-soft); font-size: 11px; line-height: 1.5; }
.mitigation-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.mitigation-metrics > div { display: grid; gap: 5px; min-width: 0; padding: 12px; border: 1px solid rgba(49, 98, 67, .12); border-radius: 11px; background: rgba(255, 255, 255, .72); }
.mitigation-metrics span { color: var(--muted); font-size: 9px; letter-spacing: .03em; text-transform: uppercase; }
.mitigation-metrics strong { font-size: 12px; line-height: 1.35; }
.mitigation-preview .mitigation-changes { color: #355a40; }
.mitigation-preview .mitigation-warning { color: #8a4b24; }
.mitigation-preview > small { display: block; margin-top: 9px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.mitigation-proof { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed rgba(49, 98, 67, .2); }
.mitigation-proof small { max-width: 620px; color: var(--muted); font-size: 9px; line-height: 1.45; }
.autopilot-progress { display: flex; min-width: 0; 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; min-width: 0; 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 var(--focus-ring, #151a17); outline-offset: 5px; box-shadow: 0 0 0 5px var(--focus-ring-halo, #fffdfa); 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-proof { display: flex; align-items: center; gap: 5px; margin-top: 7px; color: var(--green); }
.ceremony-proof-attention { color: var(--amber); }
.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; }
/* Los pasos 2 y 3 del tablero. Van separados del motivo del primero: pegados
   se leian como una continuacion de esa frase y no como otra cosa distinta. */
.molde-hallazgo .molde-tambien { margin-top: 8px; padding-top: 7px; border-top: 1px solid rgba(122, 90, 28, .22); color: #8a6b30; }
.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; }

.cutsets-card { margin-bottom: 18px; }
.cutset-list { display: grid; }
.cutset-row { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(220px, 1fr) auto; align-items: center; gap: 14px; width: 100%; padding: 14px 0; border: 0; border-top: 1px solid var(--line); background: none; color: inherit; cursor: pointer; font: inherit; text-align: left; }
.cutset-row:first-child { border-top: 0; }
.cutset-row:hover .riesgo-accion, .cutset-row:focus-visible .riesgo-accion { opacity: 1; }
.cutset-factors { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.cutset-factors strong { padding: 5px 8px; border-radius: 7px; background: var(--amber-soft); color: #765216; font-size: 10.5px; line-height: 1.25; overflow-wrap: anywhere; }
.cutset-factors i { color: var(--muted); font-size: 12px; font-style: normal; }
.cutset-impact { min-width: 0; color: var(--ink-soft); font-size: 10.5px; line-height: 1.45; overflow-wrap: anywhere; }
.cutset-coverage { margin: 14px 0 0; padding-top: 12px; border-top: 1px dashed var(--line); color: var(--muted); font-family: monospace; font-size: 9px; line-height: 1.5; }
.cutset-empty { display: flex; gap: 10px; align-items: flex-start; padding: 13px; border: 1px solid var(--line); border-radius: 10px; }
.cutset-empty svg { flex-shrink: 0; color: var(--green); }
.cutset-empty strong { display: block; margin-bottom: 4px; font-size: 11.5px; }
.cutset-empty p { margin: 0; color: var(--muted); font-size: 10.5px; line-height: 1.45; }

/* En una pantalla táctil no hay hover para revelar la acción. */
@media (hover: none), (pointer: coarse) {
  .riesgo-accion { opacity: 1; }
}

.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; }
}
@media (max-width: 720px) {
  .cutset-row { grid-template-columns: 1fr; gap: 7px; }
  .cutset-row .riesgo-accion { opacity: 1; }
}

/* 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; }
.activation-summary { display: flex; align-items: baseline; gap: 10px; margin: 0 0 14px; }
.activation-summary strong { color: var(--accent); font-size: 24px; }
.activation-summary span { color: var(--muted); font-size: 11px; }
.activation-list { display: grid; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.activation-list li { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 11px; }
.activation-list li.is-complete { color: var(--text); }
.trust-center { grid-column: 1 / -1; }
.trust-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 16px; }
.trust-facts span { padding: 6px 9px; border: 1px solid rgba(49, 98, 67, .22); border-radius: 999px; background: rgba(49, 98, 67, .06); color: #31523c; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.trust-links { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.trust-links a { color: #315f42; font-size: 12px; font-weight: 760; text-underline-offset: 3px; }
.trust-links a:hover { color: var(--ink); }
.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; }
.path-gate-controls { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 10px; margin-bottom: 10px; }
.path-gate-controls label { display: grid; gap: 5px; color: var(--muted); font-size: 10px; }
.path-gate-controls [hidden] { display: none !important; }
.path-gate-controls select, .path-gate-controls 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 */
/* Pantalla oscura: se invierte el anillo de foco para que el aro grueso sea el
   claro y el halo el oscuro. Es la unica pantalla sin salida alternativa, asi
   que el foco de teclado tiene que verse sin dudas. */
.unlock-screen { display: grid; place-items: center; min-height: 100vh; padding: 25px; background: var(--ink); color: white; --focus-ring: #fffdfa; --focus-ring-halo: #151a17; }
.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; }
/* "Volver al sitio publico" es la unica salida de esta pantalla. Ademas del
   color heredado, lleva borde propio para que se lea como un control y no como
   una linea de texto suelta al pie. */
.unlock-card .btn-ghost { margin-top: 16px; border-color: #6b756e; color: #eef2ef; }
.unlock-card .btn-ghost:hover { border-color: #a8b2ab; background: rgba(255, 255, 255, .06); }
.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; }
  /* La grilla de escritorio tiene dos columnas. Dejar la primera en 0px y
     mover `.app-main` a esa columna colapsa el producto entero: el encabezado
     sólo parecía visible porque desbordaba. En móvil la grilla tiene una sola
     columna real. */
  .app-shell { grid-template-columns: minmax(0, 1fr); }
  .site-nav { height: 68px; }
  .site-links a:not(.btn) { display: none; }
  .site-links .language-switch { display: inline-flex; }
  .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; }
  .trusted-demo-callout { grid-template-columns: 1fr; }
  .trusted-demo-callout .btn { width: 100%; max-width: none; }
  .public-challenges { margin-top: 44px; padding: 28px; }
  .public-challenges-head { grid-template-columns: 1fr; gap: 16px; }
  .public-challenge-grid { grid-template-columns: 1fr; }
  .public-challenge-card { border-right: 0; border-bottom: 1px solid #34352f; }
  .public-challenge-card:last-child { border-bottom: 0; }
  .public-challenge-card > p, .public-challenge-finding { min-height: 0; }
  .challenge-report-hero { grid-template-columns: 1fr; gap: 36px; padding-top: 54px; }
  .challenge-evidence-grid { grid-template-columns: 1fr; }
  .challenge-evidence-grid article + article { border-top: 1px solid #cbc6b9; border-left: 0; }
  .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; }
  /* El estado y el boton de guardar viajan a la barra movil: sin esto, en el
     telefono no habia forma de saber que el trabajo era temporal ni de
     guardarlo. Se achican para que entren al lado de la hamburguesa. */
  .mobile-topbar-actions { display: flex; align-items: center; gap: 8px; }
  .mobile-topbar-actions .mode-pill { font-size: 9px; padding: 4px 7px; }
  .mobile-topbar-actions .btn-small { padding: 6px 10px; font-size: 11px; white-space: nowrap; }
  .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; }
  .hub-nav { flex-wrap: nowrap; overflow-x: auto; margin-top: -10px; padding-bottom: 12px; scrollbar-width: thin; }
  .hub-link { flex: 0 0 auto; }
  .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%; }
  .mitigation-preview-head { flex-direction: column; }
  .mitigation-proof { align-items: stretch; flex-direction: column; }
  .mitigation-metrics { grid-template-columns: 1fr; }
  .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 > div:nth-child(2) { min-width: 0; }
  .ceremony-card > .button-row { grid-column: 1 / -1; }
  .ceremony-meta { align-items: flex-start; flex-wrap: wrap; gap: 6px 9px; }
  .ceremony-meta .tag { max-width: 100%; white-space: normal; line-height: 1.35; }
  .ceremony-proof { align-items: flex-start; max-width: 100%; line-height: 1.45; overflow-wrap: anywhere; }
  .field-grid { grid-template-columns: 1fr; }
  .field-grid .span-2 { grid-column: auto; }
  .factor-checks { grid-template-columns: 1fr; }
  .path-gate-controls { 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); }
  .public-challenges { padding: 20px; border-radius: 18px; }
  .public-challenge-card { padding: 22px 0; }
  .challenge-report-hero, .challenge-evidence-grid { width: calc(100% - 28px); }
  .challenge-report-hero { padding-top: 38px; }
  .challenge-report-actions { align-items: stretch; flex-direction: column; }
  .challenge-report-actions .btn { justify-content: center; width: 100%; }
  .challenge-verdict-body, .challenge-evidence-grid article { padding: 24px; }
  .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; }

/* El titular del diagnóstico es un hallazgo, no un conteo, así que el veredicto
   que va abajo tiene que leerse como parte del titular y no como pie de foto.
   Se sube el cuerpo y se pone tinta plena: es la frase por la que alguien
   entiende de qué se trata todo esto. Sin rojo ni mayúsculas: pega porque es
   sobria, y del otro lado hay alguien que puede estar por perder plata. */
.onb-veredicto {
  margin: 0 0 20px;
  color: var(--ink, #151a17);
  font-size: clamp(17px, 2.4vw, 20px);
  line-height: 1.45;
  letter-spacing: -0.01em;
}
.onb-titular + .onb-veredicto { max-width: 34em; }

/* La devolución que aparece a mitad del cuestionario, apenas una respuesta
   implica un riesgo. Tono neutro a propósito: informa, no alarma. */
.onb-senal {
  margin: 0 0 22px; padding: 15px 17px;
  border: 1px solid var(--line, #e2ded4);
  border-left: 3px solid var(--amber, #a66b13);
  border-radius: 12px;
  background: var(--surface, #fffdfa);
}
.onb-senal .eyebrow { margin: 0 0 7px; }
.onb-senal-titulo { margin: 0 0 5px; font-size: 16px; font-weight: 750; line-height: 1.3; }
.onb-senal p:last-child { margin: 0; color: var(--ink-soft, #5a615b); font-size: 14px; line-height: 1.5; }

.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; padding-top: 12px; }
.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-priority { display: grid; gap: 10px; margin: 0 0 30px; padding: 20px; border: 1px solid rgba(49, 98, 67, .28); border-radius: 16px; background: linear-gradient(135deg, #fbfcf8, #eef5ef); box-shadow: 0 14px 36px rgba(30, 57, 38, .08); }
.onb-priority .eyebrow { margin: 0; color: #316243; }
.onb-priority h2 { margin: 0; font-size: 21px; line-height: 1.2; }
.onb-priority > p:not(.eyebrow) { margin: 0; color: var(--ink-soft, #5a615b); font-size: 14px; line-height: 1.5; }
.onb-priority > small { color: #395a43; font-size: 12px; line-height: 1.5; }
.onb-priority .btn { justify-self: start; margin-top: 4px; }

.onb-result-nav { display: flex; justify-content: flex-end; margin: 0 0 22px; }
.onb-action-plan { display: grid; gap: 18px; margin: -14px 0 30px; padding: 22px; border: 1px solid rgba(217, 84, 47, .24); border-radius: 16px; background: #fff; box-shadow: 0 16px 40px rgba(32, 34, 31, .07); }
.onb-action-plan h2 { margin: 4px 0 0; font-size: 20px; line-height: 1.3; }
.onb-action-plan ol { display: grid; gap: 12px; margin: 0; padding-left: 23px; }
.onb-action-plan li { padding-left: 5px; color: var(--ink-soft, #5a615b); font-size: 14.5px; line-height: 1.5; }
.onb-action-plan li::marker { color: var(--accent, #d9542f); font-weight: 800; }
.onb-action-impact { display: grid; grid-template-columns: 1fr auto; gap: 5px 18px; align-items: center; padding: 15px 16px; border-radius: 12px; background: var(--paper-deep, #faf8f3); }
.onb-action-impact span { font-size: 13px; font-weight: 750; }
.onb-action-impact strong { color: #316243; font-size: 22px; }
.onb-action-impact small { grid-column: 1 / -1; color: var(--ink-soft, #5a615b); line-height: 1.45; }
.onb-reminder { display: grid; justify-items: start; gap: 7px; padding: 13px 14px; border: 1px solid rgba(49, 98, 67, .14); border-radius: 12px; background: rgba(255, 255, 255, .72); }
.onb-reminder small { color: var(--ink-soft, #5a615b); line-height: 1.45; }
.onb-action-plan .hero-note { margin: 0; }

/* Era un <details> cerrado rotulado "Ver alertas rápidas". Adentro estaba lo
   único que alguien necesitaba leer para entender el producto, a un clic de
   distancia y tercero en la lista. Ahora la lista se lee sola. */
.onb-signals { margin: 0 0 28px; }
.onb-signals > h2 { margin: 0 0 12px; font-size: 15px; font-weight: 750; color: var(--ink-soft, #5a615b); }

.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; }
  .onb-priority { padding: 17px; }
  .onb-priority .btn { width: 100%; }
  .onb-action-plan { padding: 17px; }
  .onb-action-impact { grid-template-columns: 1fr; }
  .onb-action-impact small { grid-column: auto; }
  .onb-senal { padding: 13px 14px; }
}

.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); }
.btn-danger-soft { border-color: rgba(185, 57, 46, .4); color: var(--red); background: var(--red-soft); }
.btn-danger-soft:hover { border-color: var(--red); background: rgba(185, 57, 46, .14); }
.outcome-guide { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 14px; }
.outcome-guide span { padding: 9px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink-soft); font-size: 11px; line-height: 1.4; }
.outcome-guide strong { display: block; color: var(--ink); }
.ceremony-outcomes { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }

@media (max-width: 640px) {
  .modal-footer-split { align-items: stretch; }
  .modal-footer-split > .btn { width: 100%; }
  .ceremony-outcomes { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
  .ceremony-outcomes .btn { width: 100%; }
  .outcome-guide { grid-template-columns: 1fr; }
}

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

/* "Todavía no probaste ninguno" no es la misma noticia que "el incidente te
   dejó afuera": una es falta de prueba y la otra es daño. Pintarlas iguales
   —las dos en rojo de pánico— era parte de la misma confusión. */
.entrada-vacia.sin-evidencia { border-color: #e0c28e; background: #fff8e9; }
.entrada-vacia.sin-evidencia svg { color: #8a6520; }

/* La única salida del sitio, y es al código: "abierto" que no se puede mirar
   es sólo una palabra. */
.site-footer-repo { color: inherit; opacity: .75; text-decoration: underline; text-underline-offset: 3px; }
.site-footer-repo:hover { opacity: 1; }

/* ── FICHA DE RECONSTRUCCIÓN ────────────────────────────────────────────── */
.ficha-card { margin-bottom: 18px; }
.ficha-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ficha-head h2 { margin: 0 0 4px; font-size: 19px; }
.ficha-nivel { text-align: right; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--line); min-width: 190px; }
.ficha-nivel span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.ficha-nivel strong { font-size: 14px; }
.ficha-nivel-ok { border-color: var(--ok); color: var(--ok); }
.ficha-nivel-warn { border-color: var(--warn); color: var(--warn); }
.ficha-nivel-danger { border-color: var(--danger); color: var(--danger); }
.ficha-promesa { margin: 14px 0 4px; font-size: 15px; }
.ficha-sirve { margin: 0 0 14px; font-size: 13px; color: var(--muted); }
.ficha-siguiente { border-top: 1px solid var(--line); padding-top: 12px; }
.ficha-siguiente.ok { color: var(--ok); }
.ficha-faltantes { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 8px; }
.ficha-falta { border-left: 3px solid var(--line); padding: 8px 0 8px 12px; }
.ficha-falta p { margin: 4px 0 0; font-size: 13px; color: var(--muted); }
.ficha-falta-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ficha-riesgo-critico { border-left-color: var(--danger); }
.ficha-riesgo-alto { border-left-color: var(--warn); }
.ficha-tag-riesgo, .ficha-tag-recup { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; padding: 2px 7px; border-radius: 20px; border: 1px solid var(--line); color: var(--muted); }
.ficha-riesgo-critico .ficha-tag-riesgo { border-color: var(--danger); color: var(--danger); }
.ficha-prueba-estado, .ficha-anexo, .ficha-coubicacion, .ficha-rechazados { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: var(--surface-2, rgba(255,255,255,.03)); font-size: 13px; }
.ficha-prueba-mal, .ficha-anexo.falta, .ficha-coubicacion { border: 1px solid var(--danger); }
.ficha-anexo p, .ficha-coubicacion p, .ficha-rechazados ul { margin: 4px 0 0; color: var(--muted); font-size: 12px; }
.ficha-rechazados ul { padding-left: 16px; }
.ficha-detalle { margin-top: 14px; }
.ficha-detalle summary { cursor: pointer; font-size: 13px; color: var(--muted); }
.ficha-tabla { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.ficha-tabla th, .ficha-tabla td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.ficha-tabla th { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.ficha-pasos { padding-left: 20px; display: grid; gap: 10px; }
.ficha-pasos p { margin: 2px 0 0; font-size: 12px; }
.ficha-nunca { margin-top: 16px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; }
.ficha-nunca ul { margin: 8px 0; padding-left: 18px; font-size: 13px; }
@media (max-width: 640px) { .ficha-nivel { text-align: left; min-width: 0; } }

/* "De donde saco esta clave". Plegado por defecto: quien ya sabe que es un xpub
   no necesita seis lineas de menus tapandole el formulario, y quien no sabe
   abandonaba ahi mismo. */
.donde-clave{margin:-4px 0 18px;border:1px solid var(--linea,#232a33);border-radius:8px;padding:12px 14px}
.donde-clave summary{cursor:pointer;font-weight:600;font-size:14px;list-style:none}
.donde-clave summary::-webkit-details-marker{display:none}
.donde-clave summary::before{content:"+ ";color:var(--acento,#f7931a)}
.donde-clave[open] summary::before{content:"− "}
.donde-clave ul{margin:12px 0;padding-left:18px;font-size:14px}
.donde-clave li{margin-bottom:7px}
.donde-clave p{font-size:13.5px;margin:10px 0 0}