/* ============================================================
   Simulador de Exposición Jurídica — Design System
   Sistema visual Frontera Legal (navy/gold/cyan)
   Tipografía: Manrope (títulos) + DM Sans (cuerpo)
   ============================================================ */

:root {
  --color-primary: #0b2a42;
  --color-primary-hover: #0f6cbd;
  --color-on-primary: #ffffff;
  --color-secondary: #0f6cbd;
  --color-gold: #d4a94d;
  --color-background: #f4f6f4;
  --color-surface: #ffffff;
  --color-surface-2: #edf1f0;
  --color-foreground: #102233;
  --color-muted-fg: #49586a;
  --color-muted: #e2e8e6;
  --color-border: rgba(7, 27, 45, 0.13);
  --color-destructive: #b53131;
  --color-destructive-soft: rgba(181, 49, 49, 0.09);
  --color-warning: #8a6420;
  --color-warning-soft: rgba(212, 169, 77, 0.16);
  --color-success: #1f7d5c;
  --color-success-soft: rgba(31, 125, 92, 0.11);
  --color-info: #0f6cbd;
  --color-info-soft: rgba(15, 108, 189, 0.1);
  --color-ar: #74acdf;
  --color-py: #d52b1e;

  --font-heading: "Manrope", -apple-system, sans-serif;
  --font-body: "DM Sans", -apple-system, "Segoe UI", sans-serif;

  --radius: 18px;
  --radius-sm: 12px;
  --shadow-card: 0 18px 50px rgba(7, 27, 45, 0.1);
  --transition: 200ms ease-out;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  background:
    radial-gradient(1100px 560px at 85% -8%, rgba(68, 198, 207, 0.09), transparent 60%),
    radial-gradient(900px 500px at 5% 108%, rgba(15, 108, 189, 0.07), transparent 60%),
    var(--color-background);
  color: var(--color-foreground);
  min-height: 100dvh;
}

.container { max-width: 960px; margin: 0 auto; padding: 0 20px; }

h1, h2, h3 { font-family: var(--font-heading); font-weight: 700; line-height: 1.15; letter-spacing: -.03em; }

.icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }

.hidden { display: none !important; }

/* ============ HERO ============ */
.hero {
  padding: 72px 0 64px; text-align: center;
  color: #fff;
  background:
    radial-gradient(circle at 75% 28%, rgba(68,198,207,.22), transparent 30%),
    radial-gradient(circle at 12% 88%, rgba(212,169,77,.1), transparent 26%),
    linear-gradient(120deg, #061522 0%, #09243a 58%, #0b3651 100%);
}
.hero h1 { color: #fff; }

.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: #b8edf0;
  border: 1px solid rgba(68, 198, 207, 0.4);
  background: rgba(68, 198, 207, 0.1);
  padding: 8px 16px; border-radius: 999px; margin-bottom: 28px;
}

.hero h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); margin-bottom: 12px; }

.hero-sub {
  font-family: var(--font-heading);
  font-size: clamp(1.05rem, 2.4vw, 1.35rem); font-weight: 600;
  color: #81dce1; margin-bottom: 22px;
}

.hero-desc { max-width: 680px; margin: 0 auto 32px; color: rgba(255,255,255,.75); }
.hero-desc strong { color: #fff; }

.hero-pills { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 36px; }

.pill {
  font-size: 12.5px; padding: 7px 14px; border-radius: 999px;
  border: 1px solid var(--color-border); background: var(--color-surface);
  color: var(--color-muted-fg);
}

/* ============ SELECTOR DE PAÍS (mapa Cono Sur) ============ */
.selector-titulo {
  font-family: var(--font-heading); font-size: 1.4rem; font-weight: 700;
  margin: 40px 0 20px; color: #fff;
}
.pais-selector {
  display: grid; grid-template-columns: minmax(250px, 430px) 1fr; gap: 34px;
  align-items: center; max-width: 900px; margin: 0 auto; text-align: left;
}
@media (max-width: 620px) { .pais-selector { grid-template-columns: 1fr; gap: 20px; } }

.mapa-wrap { display: flex; justify-content: center; }
.mapa { width: 100%; max-width: 435px; height: auto; overflow: visible; }
.led-base {
  fill: none; stroke: rgba(68, 198, 207, 0.28); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
}
.led-runner {
  fill: none; stroke: #44c6cf; stroke-width: 3.5;
  stroke-linecap: round; stroke-linejoin: round;
  pointer-events: none;
  stroke-dasharray: 70 930;
  filter: drop-shadow(0 0 5px #44c6cf) drop-shadow(0 0 12px rgba(68, 198, 207, 0.7));
  animation: led-recorrido 14s linear infinite;
}
.led-runner-2 {
  stroke: var(--color-gold);
  filter: drop-shadow(0 0 5px #d4a94d) drop-shadow(0 0 12px rgba(212, 169, 77, 0.6));
  animation-delay: -7s;
}
@keyframes led-recorrido {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -1000; }
}
@media (prefers-reduced-motion: reduce) {
  .led-runner { animation: none; stroke-dasharray: none; opacity: 0.35; }
  .led-runner-2 { display: none; }
}

.mapa-hit {
  fill: transparent; cursor: pointer;
  transition: fill var(--transition);
}
.mapa-hit:hover { fill: rgba(255, 255, 255, 0.22); }
.mapa-hit:focus-visible { outline: none; fill: rgba(255, 255, 255, 0.3); stroke: var(--color-foreground); stroke-width: 2; }

.pais-labels { display: grid; gap: 10px; }
.pais-card {
  display: flex; align-items: center; gap: 14px; text-align: left;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.22);
  border-radius: var(--radius-sm); padding: 14px 16px; cursor: pointer;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
  font-family: var(--font-body); color: #fff; width: 100%; min-height: 60px;
}
.pais-labels .pais-card:hover { border-color: rgba(68,198,207,.6); background: rgba(255,255,255,.11); transform: translateY(-1px); }
.pais-labels .pais-card:focus-visible { outline: 3px solid var(--color-gold); outline-offset: 2px; }
.pais-flag { font-size: 1.9rem; line-height: 1; }
.pais-info { flex: 1; }
.pais-info strong { display: block; font-family: var(--font-heading); font-size: 1.2rem; }
.pais-info small { color: rgba(255,255,255,.6); font-size: 12px; }
.pais-arrow { color: var(--color-gold); width: 20px; height: 20px; }
.selector-nota {
  font-size: 37.5px; line-height: 1.25; font-family: var(--font-heading);
  font-weight: 600; letter-spacing: -.02em;
  color: rgba(255,255,255,.82); margin-top: 30px;
  display: flex; align-items: center; justify-content: center; gap: 18px; flex-wrap: wrap;
}
.selector-nota-bandera { font-size: 62.5px; line-height: 1; }
@media (max-width: 620px) {
  .selector-nota { font-size: 24px; gap: 12px; }
  .selector-nota-bandera { font-size: 40px; }
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 12px 24px; border-radius: var(--radius-sm);
  border: 1px solid transparent; cursor: pointer;
  transition: background var(--transition), border-color var(--transition),
              transform var(--transition), opacity var(--transition);
  min-height: 48px;
}
.btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary { background: var(--color-primary); color: var(--color-on-primary); }
.btn-primary:hover:not(:disabled) { background: var(--color-primary-hover); }

.btn-ghost { background: transparent; color: var(--color-muted-fg); border-color: var(--color-border); }
.btn-ghost:hover:not(:disabled) { border-color: var(--color-muted-fg); color: var(--color-foreground); }

.btn-lg { font-size: 17px; padding: 16px 34px; }

/* ============ WIZARD ============ */
.wizard { padding: 40px 0 80px; max-width: 720px; margin: 0 auto; }

.progress-wrap { margin-bottom: 28px; }
.progress-labels {
  display: flex; justify-content: space-between; margin-bottom: 10px;
  font-size: 13.5px; color: var(--color-muted-fg);
}
.progress-labels #step-title-mini { color: var(--color-secondary); font-weight: 700; }

.progress-bar {
  height: 6px; background: var(--color-muted); border-radius: 999px; overflow: hidden;
}
.progress-fill {
  height: 100%; width: 16%; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-hover));
  border-radius: 999px; transition: width 300ms ease-out;
}

.step-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card);
}

.step-kicker {
  font-size: 12.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--color-secondary); font-weight: 700; margin-bottom: 8px;
  display: flex; align-items: center; gap: 8px;
}

.step-card h2 { font-size: 1.65rem; margin-bottom: 8px; }
.step-help { color: var(--color-muted-fg); font-size: 14.5px; margin-bottom: 24px; }

/* amount input */
.amount-row { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.amount-prefix {
  font-family: var(--font-heading); font-size: 1.4rem; color: var(--color-secondary);
}
input[type="text"].amount-input {
  flex: 1; font-family: var(--font-body); font-size: 1.6rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: var(--color-surface-2); color: var(--color-foreground);
  border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  padding: 14px 18px; min-width: 0; width: 100%;
}
input.amount-input:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 1px; border-color: var(--color-primary); }

.preset-row { display: flex; gap: 10px; flex-wrap: wrap; }
.preset {
  font-size: 13.5px; font-weight: 700; padding: 9px 16px; border-radius: 999px;
  background: var(--color-surface-2); color: var(--color-muted-fg);
  border: 1px solid var(--color-border); cursor: pointer;
  transition: all var(--transition); min-height: 40px;
}
.preset:hover { border-color: var(--color-secondary); color: var(--color-secondary); }
.preset.active { background: var(--color-info-soft); border-color: var(--color-secondary); color: var(--color-secondary); }

/* option cards */
.options { display: grid; gap: 12px; }

.option {
  display: flex; align-items: flex-start; gap: 14px; text-align: left;
  background: var(--color-surface-2); border: 1.5px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 16px 18px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
  color: var(--color-foreground); font-family: var(--font-body); font-size: 15px;
  width: 100%; min-height: 56px;
}
.option:hover { border-color: var(--color-muted-fg); }
.option:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.option.selected {
  border-color: var(--color-secondary); background: var(--color-info-soft);
}
.option .opt-radio {
  width: 20px; height: 20px; border-radius: 50%; flex-shrink: 0; margin-top: 2px;
  border: 2px solid var(--color-border); transition: all var(--transition);
  display: grid; place-items: center;
}
.option.selected .opt-radio { border-color: var(--color-secondary); }
.option.selected .opt-radio::after {
  content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--color-secondary);
}
.option .opt-body strong { display: block; margin-bottom: 2px; }
.option .opt-body small { color: var(--color-muted-fg); font-size: 13px; line-height: 1.45; display: block; }

.suboptions { margin-top: 14px; padding-left: 12px; border-left: 2px solid var(--color-border); display: grid; gap: 10px; }

.wizard-nav { display: flex; justify-content: space-between; margin-top: 24px; gap: 12px; }

/* ============ REPORT ============ */
.report { padding: 40px 0 80px; }

.report-header { text-align: center; margin-bottom: 40px; }
.report-header .step-kicker { justify-content: center; }
.report-header h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 10px; }
.report-header p { color: var(--color-muted-fg); max-width: 640px; margin: 0 auto; }

/* gauge */
.gauge-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-card);
  display: grid; grid-template-columns: auto 1fr; gap: 32px; align-items: center;
  margin-bottom: 24px;
}
@media (max-width: 640px) { .gauge-card { grid-template-columns: 1fr; text-align: center; } }

.gauge { width: 190px; margin: 0 auto; }
.gauge svg { width: 100%; height: auto; display: block; }
.gauge-value {
  font-family: var(--font-heading); font-size: 2.6rem; font-weight: 700;
  text-anchor: middle;
}
.gauge-label { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; text-anchor: middle; fill: var(--color-muted-fg); }

.gauge-meta h3 { font-size: 1.5rem; margin-bottom: 8px; }
.gauge-meta p { color: var(--color-muted-fg); font-size: 14.5px; }
.risk-chip {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14px;
  padding: 6px 16px; border-radius: 999px; margin-bottom: 12px;
}

/* summary strip */
.summary-strip {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 14px; margin-bottom: 40px;
}
.stat {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 18px 20px;
}
.stat .stat-num {
  font-family: var(--font-heading); font-size: 1.9rem; font-weight: 800;
  color: var(--color-warning); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.stat .stat-lbl { font-size: 12.5px; color: var(--color-muted-fg); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 4px; }

/* sections */
.report-section { margin-bottom: 44px; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.section-head .icon { width: 26px; height: 26px; color: var(--color-secondary); }
.section-head h3 { font-size: 1.55rem; }
.section-sub { color: var(--color-muted-fg); font-size: 14px; margin-bottom: 20px; }

.jur-badge {
  font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 4px 10px; border-radius: 6px; white-space: nowrap;
}
.jur-ar { background: rgba(116, 172, 223, 0.16); color: #245a8c; border: 1px solid rgba(116, 172, 223, 0.5); }
.jur-py { background: rgba(213, 43, 30, 0.1); color: #93291e; border: 1px solid rgba(213, 43, 30, 0.3); }
.jur-cl { background: rgba(10, 61, 145, 0.1); color: #0a3d91; border: 1px solid rgba(10, 61, 145, 0.3); }
.jur-uy { background: rgba(26, 122, 192, 0.1); color: #175a91; border: 1px solid rgba(26, 122, 192, 0.3); }
.jur-br { background: rgba(26, 138, 74, 0.1); color: #14573f; border: 1px solid rgba(26, 138, 74, 0.3); }

/* violation cards */
.violations { display: grid; gap: 16px; }
.violation {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 22px 24px;
}
.violation.sev-3 { border-left-color: var(--color-destructive); }
.violation.sev-2 { border-left-color: var(--color-primary); }
.violation.sev-1 { border-left-color: var(--color-info); }
.violation.sev-0 { border-left-color: var(--color-success); }

.violation-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 8px; }
.violation h4 { font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600; }
.violation .norma { font-size: 12.5px; color: var(--color-secondary); font-weight: 700; letter-spacing: 0.03em; margin-bottom: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap;}
.violation p { color: var(--color-muted-fg); font-size: 14.5px; margin-bottom: 12px; }
.violation .consecuencia {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--color-surface-2); border-radius: var(--radius-sm);
  padding: 12px 14px; font-size: 14px; color: var(--color-foreground);
}
.violation .consecuencia .icon { color: var(--color-primary); margin-top: 2px; }

.badge-cat {
  font-size: 11px; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 5px;
}
.cat-penal { background: var(--color-destructive-soft); color: #8c2222; }
.cat-tributario { background: var(--color-warning-soft); color: var(--color-secondary); }
.cat-aduanero { background: var(--color-info-soft); color: #27508a; }
.cat-administrativo { background: rgba(150, 122, 220, 0.14); color: #54379e; }
.cat-cumplimiento { background: var(--color-success-soft); color: #14573f; }

.ok-card {
  display: flex; gap: 14px; align-items: flex-start;
  background: var(--color-success-soft); border: 1px solid rgba(47, 158, 119, 0.35);
  border-radius: var(--radius-sm); padding: 20px 22px; font-size: 14.5px;
}
.ok-card .icon { color: var(--color-success); width: 22px; height: 22px; margin-top: 2px; }

/* prison chart */
.prison-chart { display: grid; gap: 14px; }
.prison-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr; gap: 14px; align-items: center; }
@media (max-width: 560px) { .prison-row { grid-template-columns: 1fr; gap: 6px; } }
.prison-name { font-size: 13.5px; color: var(--color-muted-fg); }
.prison-name strong { color: var(--color-foreground); display: block; font-size: 14px; }
.prison-track { position: relative; height: 34px; background: var(--color-muted); border-radius: 7px; overflow: hidden; }
.prison-fill {
  position: absolute; top: 0; bottom: 0; border-radius: 7px;
  background: linear-gradient(90deg, #f6c493, #eb9a94);
  display: flex; align-items: center; justify-content: flex-end;
  padding-right: 10px; font-size: 12.5px; font-weight: 700; color: #38200e;
  white-space: nowrap; min-width: 78px;
}
.prison-scale { display: flex; justify-content: space-between; font-size: 11px; color: var(--color-muted-fg); margin-top: 4px; grid-column: 2; }

/* fines table + econ bars */
.table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
table.fines {
  width: 100%; border-collapse: collapse; font-size: 14px; min-width: 560px;
  background: var(--color-surface);
}
table.fines th {
  text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--color-secondary); padding: 14px 16px; border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-2);
}
table.fines td { padding: 13px 16px; border-bottom: 1px solid var(--color-border); color: var(--color-muted-fg); }
table.fines td:first-child { color: var(--color-foreground); font-weight: 700; }
table.fines td.num { font-variant-numeric: tabular-nums; text-align: right; color: var(--color-foreground); }
table.fines tr:last-child td { border-bottom: none; }
table.fines tfoot td {
  background: var(--color-destructive-soft); color: var(--color-foreground); font-weight: 700;
  border-top: 2px solid var(--color-destructive);
}

.econ-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 20px; }
.econ-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 22px; text-align: center;
}
.econ-card .econ-title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--color-muted-fg); margin-bottom: 12px; }
.econ-card .econ-num { font-family: var(--font-heading); font-size: 1.9rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.econ-card .econ-note { font-size: 12.5px; color: var(--color-muted-fg); margin-top: 8px; line-height: 1.5; }
.econ-good .econ-num { color: #14573f; }
.econ-mid .econ-num { color: var(--color-warning); }
.econ-bad .econ-num { color: #9e2626; }

.econ-bars { margin-top: 24px; display: grid; gap: 12px; }
.econ-bar-row { display: grid; grid-template-columns: minmax(130px, 190px) 1fr auto; gap: 12px; align-items: center; font-size: 13.5px; }
@media (max-width: 560px) { .econ-bar-row { grid-template-columns: 1fr; gap: 4px; } }
.econ-bar-track { height: 26px; background: var(--color-muted); border-radius: 6px; overflow: hidden; }
.econ-bar-fill { height: 100%; border-radius: 6px; transition: width 600ms ease-out; }
.econ-bar-val { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }

/* dilema */
.dilema {
  background: linear-gradient(135deg, rgba(15, 108, 189, 0.07), rgba(68, 198, 207, 0.09));
  border: 1px solid rgba(15, 108, 189, 0.22);
  border-radius: var(--radius); padding: 28px;
}
.dilema h4 { font-family: var(--font-heading); font-size: 1.25rem; margin-bottom: 10px; color: var(--color-secondary); }
.dilema p { font-size: 14.5px; color: var(--color-muted-fg); margin-bottom: 14px; }
.dilema-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; }
@media (max-width: 640px) { .dilema-grid { grid-template-columns: 1fr; } }
.dilema-opt {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 18px;
}
.dilema-opt h5 { font-size: 14.5px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; }
.dilema-opt .icon { width: 18px; height: 18px; color: var(--color-primary); }
.dilema-opt p { font-size: 13.5px; margin: 0; }

/* fuentes normativas y casos de prensa */
.src-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-primary);
  border-radius: var(--radius-sm); padding: 22px 24px;
}
.src-card h4 { font-family: var(--font-heading); font-size: 1.15rem; font-weight: 600; margin-bottom: 8px; }
.src-card p { color: var(--color-muted-fg); font-size: 14.5px; margin-bottom: 14px; }
.src-caso { border-left-color: var(--color-info); }
.src-links { display: flex; flex-wrap: wrap; gap: 10px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 700; text-decoration: none;
  color: var(--color-secondary); background: var(--color-warning-soft);
  border: 1px solid rgba(193, 122, 26, 0.35); border-radius: 999px;
  padding: 7px 14px; min-height: 36px; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.link-chip:hover { border-color: var(--color-secondary); background: rgba(240, 160, 75, 0.24); }
.link-chip:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; }
.link-chip .icon { width: 14px; height: 14px; }
.src-caso .link-chip { color: #27508a; background: var(--color-info-soft); border-color: rgba(74, 127, 193, 0.4); }
.src-caso .link-chip:hover { border-color: #27508a; background: rgba(74, 127, 193, 0.22); }
.src-nota { font-size: 12.5px; color: var(--color-muted-fg); margin-top: 14px; font-style: italic; }

/* disputa: vía civil vs. penal */
.vias-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .vias-grid { grid-template-columns: 1fr; } }
.via-card {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-sm); padding: 22px 24px;
}
.via-card.via-elegida { border-color: var(--color-primary); box-shadow: 0 0 0 1px var(--color-primary); }
.via-card h4 {
  font-family: var(--font-heading); font-size: 1.2rem; font-weight: 600;
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap;
}
.via-card h4 .icon { color: var(--color-secondary); }
.via-tag {
  font-family: var(--font-body); font-size: 11px; font-weight: 700;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: var(--color-warning-soft); color: var(--color-warning);
  border: 1px solid rgba(212, 169, 77, 0.45); border-radius: 999px; padding: 3px 10px;
}
.via-card > p { color: var(--color-muted-fg); font-size: 14px; margin-bottom: 14px; }
.via-list { list-style: none; display: grid; gap: 9px; }
.via-list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13.5px; color: var(--color-muted-fg); }
.via-list li .icon { width: 16px; height: 16px; margin-top: 2px; flex-shrink: 0; }
.via-list li.pro .icon { color: var(--color-success); }
.via-list li.con .icon { color: var(--color-destructive); }
.veredicto {
  margin-top: 16px;
  background: linear-gradient(135deg, rgba(212, 169, 77, 0.12), rgba(15, 108, 189, 0.08));
  border: 1px solid rgba(212, 169, 77, 0.35);
  border-radius: var(--radius); padding: 24px;
}
.veredicto h4 {
  font-family: var(--font-heading); font-size: 1.2rem; color: var(--color-secondary);
  display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.veredicto p { font-size: 14.5px; color: var(--color-muted-fg); }
.veredicto p strong { color: var(--color-foreground); }
.veredicto-eleccion { margin-top: 12px; font-weight: 700; color: var(--color-foreground) !important; }

/* alerta de tope legal en el wizard */
.step-alerta {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 16px; padding: 18px 20px;
  background: var(--color-destructive-soft);
  border: 1px solid rgba(181, 49, 49, 0.4);
  border-left: 4px solid var(--color-destructive);
  border-radius: var(--radius-sm);
  font-size: 14px;
}
.step-alerta > .icon { color: var(--color-destructive); width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.step-alerta strong { color: #8c2222; }
.step-alerta p { color: var(--color-muted-fg); margin: 8px 0 0; }

/* box penal (concurso) */
.box-penal {
  margin-top: 18px;
  background: var(--color-destructive-soft);
  border: 1px solid rgba(214, 69, 69, 0.35);
  border-radius: var(--radius-sm); padding: 20px 22px;
}
.box-penal h5 {
  font-family: var(--font-heading); font-size: 1.1rem; font-weight: 600;
  color: #8c2222; display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.box-penal h5 .icon { color: #8c2222; }
.box-penal-cierre { margin-top: 12px; font-size: 14px; color: var(--color-muted-fg); }
.box-penal-cierre strong { color: #8c2222; }

/* actions */
.report-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 48px; }

/* footer */
.footer { border-top: 1px solid var(--color-border); padding: 36px 0 48px; }
.footer p { font-size: 12.5px; color: var(--color-muted-fg); max-width: 820px; margin: 0 auto 12px; }
.footer-meta { opacity: 0.7; }

/* print — A4, sin cortes dentro de secciones ni tarjetas */
@page { size: A4; margin: 12mm; }

@media print {
  * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }

  body { background: #fff; color: #111; font-size: 11.5px; line-height: 1.5; }
  .hero, .wizard, .footer, .report-actions { display: none !important; }
  .container { max-width: 100%; padding: 0; }
  .report { padding: 0; }

  /* nada se parte por la mitad: tarjetas, filas y bloques atómicos */
  .violation, .stat, .econ-card, .ok-card, .dilema-opt, .prison-row,
  .gauge-card, .summary-strip, .table-wrap, .econ-bars, .econ-cards,
  table.fines tr, .report-header, .consecuencia, .src-card,
  .via-card, .veredicto, .box-penal {
    break-inside: avoid; page-break-inside: avoid;
  }

  /* cada sección intenta entrar entera en la página; si no entra,
     solo corta entre tarjetas (nunca adentro de una) */
  .report-section { break-inside: avoid; page-break-inside: avoid; }

  /* los títulos de sección nunca quedan huérfanos al pie de página */
  .section-head, .section-sub { break-after: avoid; page-break-after: avoid; }
  .violation-top, .norma { break-after: avoid; page-break-after: avoid; }

  table.fines thead { display: table-header-group; }

  /* compactar para que las secciones entren en A4 */
  .report-header { margin-bottom: 16px; }
  .report-header h2 { font-size: 1.7rem; }
  .report-section { margin-bottom: 18px; }
  .gauge-card { padding: 16px; gap: 18px; margin-bottom: 12px; }
  .gauge { width: 130px; }
  .summary-strip { margin-bottom: 18px; gap: 8px; }
  .stat { padding: 10px 12px; }
  .stat .stat-num { font-size: 1.4rem; }
  .violations { gap: 8px; }
  .violation { padding: 12px 14px; }
  .violation p { margin-bottom: 8px; }
  .violation .consecuencia { padding: 8px 10px; }
  .section-head h3 { font-size: 1.25rem; }
  .econ-card { padding: 12px; }
  .econ-card .econ-num { font-size: 1.4rem; }
  .dilema { padding: 16px; }
  .dilema-grid { gap: 8px; }
  .dilema-opt { padding: 12px; }
  .prison-track { height: 26px; }
  table.fines th, table.fines td { padding: 8px 10px; }

  /* bordes y sombras neutralizados */
  .violation, .stat, .gauge-card, .econ-card, .ok-card, .dilema,
  .dilema-opt, .table-wrap, table.fines { box-shadow: none; }

  /* sin animaciones en el render de impresión */
  .fade-up { animation: none; }
}

/* entry animation */
@keyframes fadeUp { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
.fade-up { animation: fadeUp 320ms ease-out both; }