:root {
      --bg: #070814;
      --bg-2: #111827;
      --surface: rgba(255, 255, 255, .94);
      --surface-soft: rgba(255, 255, 255, .78);
      --ink: #111827;
      --muted: #5B6475;
      --line: rgba(17, 24, 39, .14);
      --white: #ffffff;
      --gemini: #7C3AED;
      --notebook: #0EA5E9;
      --danger: #DC2626;
      --ok: #16A34A;
      --warning: #F59E0B;
      --radius-xl: 28px;
      --radius-lg: 20px;
      --radius-md: 14px;
      --shadow-hard: 0 30px 70px rgba(0, 0, 0, .35);
      --shadow-soft: 0 18px 45px rgba(15, 23, 42, .16);
      --focus: 0 0 0 4px rgba(14, 165, 233, .35);
      --max: 1440px;
    }

    * { box-sizing: border-box; }

    html { scroll-behavior: smooth; color-scheme: light; }

    body {
      margin: 0;
      min-height: 100vh;
      color: var(--ink);
      font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
      background:
        radial-gradient(circle at 8% 4%, rgba(255, 45, 85, .50), transparent 30rem),
        radial-gradient(circle at 92% 8%, rgba(0, 199, 190, .46), transparent 34rem),
        radial-gradient(circle at 60% 100%, rgba(88, 86, 214, .55), transparent 34rem),
        linear-gradient(135deg, #070814 0%, #141625 48%, #070814 100%);
      background-attachment: fixed;
    }

    button, input, select { font: inherit; }
    button { cursor: pointer; }
    a { color: inherit; }

    .skip-link {
      position: fixed;
      top: .75rem;
      left: .75rem;
      z-index: 999;
      transform: translateY(-160%);
      padding: .75rem 1rem;
      border-radius: 999px;
      background: #fff;
      color: #111827;
      font-weight: 900;
      box-shadow: var(--shadow-soft);
      transition: transform .2s ease;
    }
    .skip-link:focus { transform: translateY(0); outline: none; box-shadow: var(--focus), var(--shadow-soft); }

    .app-shell { width: min(100% - 32px, var(--max)); margin: 0 auto; padding: 22px 0 48px; }

    .mode-switch {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      gap: .5rem;
      margin-bottom: .75rem;
      color: var(--exp-azul-tinta);
      font-size: .82rem;
      font-weight: 850;
    }
    .mode-switch > span { margin-right: .25rem; color: var(--muted); }
    .mode-switch a {
      min-width: 6.5rem;
      padding: .6rem .9rem;
      border: 1px solid rgba(31,58,95,.2);
      border-radius: 999px;
      background: rgba(255,255,255,.72);
      text-align: center;
      text-decoration: none;
    }
    .mode-switch a[aria-current="page"] { color: #fff; background: var(--exp-azul-tinta); }
    .mode-switch a:focus-visible { outline: none; box-shadow: var(--focus); }

    .scope-notice {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      gap: 1.25rem;
      align-items: center;
      margin-top: 18px;
      padding: clamp(1.25rem, 3vw, 2rem);
      border: 1px solid rgba(31,58,95,.12);
      border-left: 6px solid var(--exp-terracota);
      border-radius: 12px 28px 12px 28px;
      color: var(--exp-grafito);
      background: #fff;
      box-shadow: var(--shadow-soft);
      backdrop-filter: blur(18px);
    }
    .scope-notice h2 { margin: .25rem 0 0; color: var(--exp-azul-tinta); font-size: clamp(1.35rem, 3vw, 2rem); letter-spacing: -.04em; }
    .scope-notice p { max-width: 850px; margin: .65rem 0 0; color: var(--muted); font-weight: 650; line-height: 1.55; }
    .scope-notice .scope-kicker { margin: 0; color: var(--exp-azul-tinta); font-size: .75rem; font-weight: 900; letter-spacing: .1em; }
    .scope-actions { display: grid; gap: .65rem; min-width: 15rem; text-align: center; }
    .scope-actions strong { font-size: .9rem; }
    .btn-scope { color: #fff; background: var(--exp-azul-tinta); }

    .hero {
      position: relative;
      overflow: hidden;
      padding: clamp(28px, 5vw, 62px);
      border: 1px solid rgba(255, 255, 255, .18);
      border-radius: 34px;
      color: #fff;
      background: linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,.08));
      box-shadow: var(--shadow-hard);
      backdrop-filter: blur(22px);
      isolation: isolate;
    }
    .hero::before, .hero::after {
      content: "";
      position: absolute;
      width: 240px;
      height: 240px;
      border-radius: 62% 38% 72% 28%;
      filter: blur(1px);
      opacity: .74;
      z-index: -1;
      animation: floatShape 10s ease-in-out infinite;
    }
    .hero::before { right: 6%; top: 12%; background: linear-gradient(135deg, #FF2D55, #FFCC00); }
    .hero::after { right: 20%; bottom: -90px; background: linear-gradient(135deg, #5856D6, #00C7BE); animation-delay: -5s; }

    .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: .5rem;
      margin-bottom: 1rem;
      padding: .45rem .8rem;
      border: 1px solid rgba(255,255,255,.22);
      border-radius: 999px;
      background: rgba(255,255,255,.12);
      font-size: .78rem;
      font-weight: 900;
      letter-spacing: .08em;
      text-transform: uppercase;
    }
    h1 { margin: 0; max-width: 880px; font-size: clamp(2.4rem, 7vw, 6.2rem); line-height: .88; letter-spacing: -.075em; }
    .hero p { max-width: 780px; margin: 1.15rem 0 0; color: rgba(255,255,255,.82); font-size: clamp(1rem, 1.8vw, 1.25rem); line-height: 1.55; font-weight: 620; }

    .hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 28px; max-width: 920px; }
    .stat-tile { padding: 16px; border: 1px solid rgba(255,255,255,.16); border-radius: 22px; background: rgba(255,255,255,.10); }
    .stat-tile strong { display: block; color: #fff; font-size: 1.75rem; line-height: 1; letter-spacing: -.04em; }
    .stat-tile span { display: block; margin-top: 6px; color: rgba(255,255,255,.72); font-size: .86rem; font-weight: 800; }

    .scale-card, .toolbar, .category-config, .validation-panel, .results {
      margin-top: 18px;
      border: 1px solid rgba(255,255,255,.18);
      border-radius: 28px;
      background: rgba(255,255,255,.13);
      backdrop-filter: blur(18px);
      box-shadow: var(--shadow-hard);
    }
    .scale-card { padding: 20px; color: #fff; }
    .scale-card h2 { margin: 0 0 14px; font-size: 1rem; letter-spacing: .08em; text-transform: uppercase; }
    .scale-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .scale-item { padding: 15px; border: 1px solid rgba(255,255,255,.16); border-radius: 18px; background: rgba(255,255,255,.10); }
    .scale-item strong { display: block; font-size: 1.45rem; }
    .scale-item span { display: block; margin-top: 5px; color: rgba(255,255,255,.74); font-size: .88rem; font-weight: 750; }

    .toolbar { position: sticky; top: 0; z-index: 50; padding: 12px; }
    .toolbar-inner { display: grid; grid-template-columns: minmax(260px, 1fr) auto auto auto; gap: 10px; align-items: center; }
    .progress-wrap { min-width: 0; padding: 10px 12px; border: 1px solid rgba(255,255,255,.15); border-radius: 18px; background: rgba(0,0,0,.16); color: #fff; }
    .progress-meta { display: flex; justify-content: space-between; gap: 12px; font-size: .84rem; font-weight: 850; }
    .progress-track { height: 10px; margin-top: 8px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
    .progress-fill { width: 0%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #7C3AED, #0EA5E9, #22C55E); transition: width .25s ease; }

    .btn {
      min-height: 44px;
      border: 0;
      padding: .72rem 1rem;
      border-radius: 999px;
      font-weight: 950;
      letter-spacing: -.015em;
      transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
    }
    .btn:hover { transform: translateY(-1px); }
    .btn:focus-visible { outline: none; box-shadow: var(--focus); }
    .btn-primary { color: #fff; background: linear-gradient(135deg, #7C3AED, #0EA5E9); box-shadow: 0 16px 30px rgba(14, 165, 233, .28); }
    .btn-dark { color: #111827; background: #fff; }
    .btn-ghost { color: #fff; border: 1px solid rgba(255,255,255,.24); background: rgba(255,255,255,.10); }
    .btn-soft { color: #111827; border: 1px solid rgba(17,24,39,.12); background: rgba(255,255,255,.84); }
    .btn-danger { color: #fff; background: #DC2626; }
    .btn[disabled] { opacity: .48; cursor: not-allowed; transform: none; }

    .category-config { display: none; padding: 20px; color: #fff; }
    .category-config.is-visible { display: block; }
    .category-config-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: start; margin-bottom: 16px; }
    .category-config-head h2 { margin: 0; font-size: 1.4rem; letter-spacing: -.04em; }
    .category-config-head p { margin: .45rem 0 0; color: rgba(255,255,255,.76); font-weight: 650; line-height: 1.45; }
    .category-config-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
    .category-control { position: relative; overflow: hidden; padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 20px; background: rgba(255,255,255,.10); }
    .category-control::after { content: ""; position: absolute; inset: auto -30px -38px auto; width: 100px; height: 100px; border-radius: 50%; background: color-mix(in srgb, var(--cat) 75%, transparent); opacity: .45; }
    .category-control.is-off { opacity: .58; filter: grayscale(.35); }
    .category-control-title label { position: relative; z-index: 1; display: flex; gap: 10px; align-items: center; font-weight: 950; }
    .category-control-title input { width: 18px; height: 18px; accent-color: var(--cat); }
    .category-control-meta { position: relative; z-index: 1; display: grid; gap: 9px; margin-top: 10px; color: rgba(255,255,255,.78); font-size: .84rem; font-weight: 800; }
    .category-control-meta select { width: 100%; min-height: 40px; border: 1px solid rgba(255,255,255,.26); border-radius: 12px; padding: 0 10px; color: #111827; background: #fff; font-weight: 850; }
    .normalization-note { margin: 16px 0 0; color: rgba(255,255,255,.78); font-weight: 750; }

    .layout { display: grid; grid-template-columns: minmax(230px, 320px) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 18px; }
    .category-nav { position: sticky; top: 104px; max-height: calc(100vh - 122px); overflow: auto; padding: 14px; border: 1px solid rgba(255,255,255,.16); border-radius: 26px; background: rgba(255,255,255,.12); backdrop-filter: blur(20px); box-shadow: var(--shadow-hard); }
    .category-nav h2 { margin: 6px 8px 12px; color: #fff; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; }
    .cat-list { display: grid; gap: 8px; }
    .cat-link { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; width: 100%; padding: 11px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 18px; color: rgba(255,255,255,.84); background: rgba(255,255,255,.075); text-align: left; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
    .cat-link:hover, .cat-link.is-active { color: #fff; background: rgba(255,255,255,.17); transform: translateX(2px); border-color: color-mix(in srgb, var(--cat) 50%, rgba(255,255,255,.18)); }
    .cat-link.is-muted { opacity: .55; filter: grayscale(.35); }
    .cat-dot { width: 14px; height: 14px; margin-top: 3px; border-radius: 999px; background: var(--cat); box-shadow: 0 0 0 5px color-mix(in srgb, var(--cat) 24%, transparent); }
    .cat-body { min-width: 0; display: grid; gap: 7px; }
    .cat-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 900; font-size: .91rem; }
    .cat-metrics { display: flex; flex-wrap: wrap; gap: 6px; }
    .cat-metric { display: inline-flex; align-items: center; gap: 4px; min-height: 25px; padding: 3px 8px; border: 1px solid rgba(255,255,255,.12); border-radius: 999px; color: rgba(255,255,255,.70); background: rgba(255,255,255,.07); font-size: .76rem; font-weight: 950; transition: background .2s ease, color .2s ease, border-color .2s ease; }
    .cat-link.is-complete .cat-metric { color: #111827; background: #fff; border-color: rgba(255,255,255,.68); }
    .cat-link.is-complete .cat-metric { background: color-mix(in srgb, var(--cat) 18%, #ffffff); }
    .cat-link.is-complete .cat-name::after { content: " · completada"; color: rgba(255,255,255,.72); font-size: .74rem; font-weight: 850; }
    .cat-link.is-complete.is-active .cat-name::after { color: rgba(255,255,255,.82); }

    .survey { display: grid; gap: 22px; }
    .category-section { scroll-margin-top: 122px; overflow: hidden; border: 1px solid rgba(255,255,255,.20); border-radius: 30px; background: var(--surface); box-shadow: var(--shadow-soft); }
    .category-section[hidden] { display: none; }
    .category-section.is-current { animation: categoryReveal .24s ease both; }
    .category-section.is-excluded { opacity: .78; }
    .category-section.is-excluded .category-head { background: linear-gradient(135deg, rgba(100,116,139,.88), rgba(15,23,42,.86)); }

    .category-head { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: clamp(18px, 3vw, 28px); color: #fff; background: linear-gradient(135deg, color-mix(in srgb, var(--cat) 88%, #111827), color-mix(in srgb, var(--cat) 45%, #111827)); }
    .category-head::after { content: ""; position: absolute; right: -30px; top: -50px; width: 170px; height: 170px; border-radius: 999px; background: rgba(255,255,255,.18); }
    .category-title { position: relative; z-index: 1; }
    .category-title h2 { margin: 0; font-size: clamp(1.45rem, 3.5vw, 2.5rem); letter-spacing: -.055em; }
    .category-title p { margin: .45rem 0 0; color: rgba(255,255,255,.84); font-weight: 700; line-height: 1.42; }
    .category-badge { position: relative; z-index: 1; justify-self: end; min-width: 108px; padding: .75rem 1rem; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; background: rgba(255,255,255,.14); text-align: center; font-weight: 950; }
    .category-badge.is-complete { color: #111827; background: #fff; background: color-mix(in srgb, var(--cat) 18%, #fff); }

    .questions { display: grid; gap: 16px; padding: clamp(16px, 3vw, 26px); }
    .question-card { position: relative; overflow: hidden; border: 1px solid var(--line); border-radius: 24px; background: #fff; box-shadow: 0 10px 26px rgba(15,23,42,.07); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
    .question-card:hover { transform: translateY(-2px); box-shadow: 0 18px 34px rgba(15,23,42,.12); }
    .question-card.is-pending { border-color: rgba(220,38,38,.65); box-shadow: 0 0 0 4px rgba(220,38,38,.08), 0 16px 32px rgba(15,23,42,.12); }
    .question-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding: 22px 22px 12px; }
    .question-title { margin: 0; font-size: 1.12rem; letter-spacing: -.025em; line-height: 1.25; }
    .question-detail { margin: .55rem 0 0; color: var(--muted); font-weight: 640; line-height: 1.45; }
    .weights { display: flex; flex-wrap: wrap; align-content: start; justify-content: end; gap: 8px; }
    .weight-chip { display: inline-flex; align-items: center; min-height: 30px; padding: 4px 9px; border-radius: 999px; font-size: .78rem; font-weight: 950; }
    .weight-chip.gemini { color: #4C1D95; background: #EDE9FE; }
    .weight-chip.notebook { color: #075985; background: #E0F2FE; }
    .rating-panel { display: grid; grid-template-columns: 1fr; gap: 12px; padding: 12px 22px 22px; }
    .tool-box { min-width: 0; margin: 0; padding: 14px; border: 1px solid color-mix(in srgb, var(--tool) 30%, #CBD5E1); border-radius: 18px; background: linear-gradient(180deg, color-mix(in srgb, var(--tool) 8%, #fff), #fff); }
    .need-box { --tool: var(--ink); }
    .question-criterion { margin: 0 0 6px; color: var(--muted); font-size: .76rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
    .tool-label { display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0 0 12px; padding: 0; color: #111827; font-weight: 950; }
    .tool-label span { display: inline-flex; align-items: center; gap: 8px; }
    .mark { width: 10px; height: 10px; border-radius: 999px; background: var(--tool); box-shadow: 0 0 0 5px color-mix(in srgb, var(--tool) 18%, transparent); }
    .rating-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
    .rating-option { position: relative; display: grid; min-height: 54px; }
    .rating-option input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
    .rating-option span { display: grid; place-items: center; gap: 2px; padding: 8px 6px; border: 1px solid rgba(17,24,39,.14); border-radius: 14px; background: #fff; color: #111827; font-weight: 900; font-size: .84rem; transition: transform .18s ease, background .18s ease, color .18s ease, border-color .18s ease; }
    .rating-option small { font-size: .72rem; color: var(--muted); }
    .rating-option input:checked + span { color: #fff; border-color: var(--tool); background: var(--tool); transform: translateY(-1px); }
    .rating-option input:checked + span small { color: rgba(255,255,255,.82); }
    .rating-option input:focus-visible + span { box-shadow: var(--focus); outline: none; }

    .category-stepper { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 18px clamp(16px, 3vw, 26px) 24px; border-top: 1px solid var(--line); background: linear-gradient(135deg, rgba(255,255,255,.72), rgba(248,250,252,.96)); }
    .category-stepper-status { min-width: 0; text-align: center; font-weight: 900; color: #334155; }
    .category-stepper-status span { display: block; color: #64748B; font-size: .84rem; font-weight: 800; }

    .validation-panel { display: none; padding: 22px; color: #fff; background: rgba(220,38,38,.18); }
    .validation-panel.is-visible { display: block; }
    .validation-panel h2 { margin: 0; font-size: 1.4rem; }
    .validation-panel p { margin: .55rem 0 1rem; color: rgba(255,255,255,.82); font-weight: 700; }
    .validation-list { margin: 1rem 0 0; padding-left: 1.2rem; color: rgba(255,255,255,.88); font-weight: 650; }
    .validation-list li + li { margin-top: .35rem; }

    .results { display: none; overflow: hidden; color: #fff; }
    .results.is-visible { display: block; }
    .results-head { padding: 24px; background: linear-gradient(135deg, rgba(124,58,237,.58), rgba(14,165,233,.42)); }
    .results-head h2 { margin: 0; font-size: clamp(1.6rem, 4vw, 3.4rem); letter-spacing: -.06em; }
    .results-head p { max-width: 820px; margin: .7rem 0 0; color: rgba(255,255,255,.84); font-weight: 700; line-height: 1.5; }
    .score-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; padding: 18px; }
    .score-card { padding: 22px; border: 1px solid rgba(255,255,255,.18); border-radius: 24px; background: rgba(255,255,255,.12); }
    .score-card h3 { margin: 0; font-size: 1.05rem; text-transform: uppercase; letter-spacing: .08em; }
    .score-value { margin-top: 8px; font-size: clamp(2.4rem, 7vw, 5rem); line-height: .9; font-weight: 1000; letter-spacing: -.07em; }
    .score-sub { margin-top: 8px; color: rgba(255,255,255,.76); font-weight: 800; }
    .bar { height: 12px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
    .bar span { display: block; height: 100%; border-radius: inherit; background: var(--tool); }
    .winner { margin: 0 18px 18px; padding: 18px; border-radius: 22px; color: #111827; background: #fff; font-weight: 900; line-height: 1.45; }
    .result-meta-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 0 18px 18px; }
    .result-meta { padding: 14px; border: 1px solid rgba(255,255,255,.14); border-radius: 18px; background: rgba(255,255,255,.10); }
    .result-meta strong { display: block; font-size: 1.4rem; }
    .result-meta span { color: rgba(255,255,255,.74); font-size: .86rem; font-weight: 800; }
    .breakdown-actions { display: flex; justify-content: center; padding: 0 18px 20px; }
    .category-details { padding: 18px; border-top: 1px solid rgba(255,255,255,.16); }
    .category-details[hidden] { display: none !important; }
    .radar-panel { display: grid; grid-template-columns: minmax(260px, 1fr) minmax(220px, .7fr); gap: 18px; align-items: start; }
    .radar-card, .legend-card, .category-table-wrap { border: 1px solid rgba(255,255,255,.16); border-radius: 24px; background: rgba(255,255,255,.11); }
    .radar-card { padding: 12px; overflow: auto; }
    .radar-card svg { width: 100%; min-width: 560px; height: auto; display: block; }
    .legend-card { padding: 18px; color: rgba(255,255,255,.86); font-weight: 760; line-height: 1.45; }
    .radar-legend-item { display: grid; grid-template-columns: 16px 1fr; gap: 9px; align-items: center; margin: 8px 0; }
    .legend-dot { width: 14px; height: 14px; border-radius: 999px; background: var(--legend); }
    .category-table-wrap { margin-top: 18px; overflow: auto; }
    .category-table { width: 100%; min-width: 860px; border-collapse: collapse; color: #fff; }
    .category-table caption { padding: 16px; text-align: left; font-weight: 950; font-size: 1.1rem; }
    .category-table th, .category-table td { padding: 12px 14px; border-top: 1px solid rgba(255,255,255,.14); text-align: left; vertical-align: middle; }
    .category-table th { color: rgba(255,255,255,.72); font-size: .78rem; letter-spacing: .07em; text-transform: uppercase; }
    .category-table strong { font-weight: 950; }
    .muted { color: rgba(255,255,255,.64); }
    .category-score-bar { min-width: 120px; height: 9px; margin-top: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.18); }
    .category-score-bar span { display: block; height: 100%; border-radius: inherit; background: var(--tool); }

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

    @keyframes floatShape { 0%,100% { transform: translate3d(0,0,0) rotate(0deg); } 50% { transform: translate3d(-18px,18px,0) rotate(18deg); } }
    @keyframes categoryReveal { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

    @media (max-width: 1100px) {
      .layout { grid-template-columns: 1fr; }
      .category-nav { position: relative; top: auto; max-height: none; }
      .cat-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(220px, 1fr); gap: 8px; overflow-x: auto; padding-bottom: 4px; }
      .cat-link { min-width: 220px; }
    }
    @media (max-width: 760px) {
      .app-shell { width: min(100% - 20px, var(--max)); padding-top: 10px; }
      .hero, .category-section, .scale-card, .toolbar, .category-config, .validation-panel, .results { border-radius: 22px; }
      .hero-stats, .scale-list, .score-grid, .rating-panel, .category-config-grid, .result-meta-grid, .radar-panel { grid-template-columns: 1fr; }
      .toolbar-inner { grid-template-columns: 1fr; }
      .toolbar .btn { width: 100%; }
      .mode-switch { display: grid; grid-template-columns: 1fr 1fr; }
      .mode-switch > span { grid-column: 1 / -1; text-align: center; }
      .scope-notice { grid-template-columns: 1fr; }
      .scope-actions { min-width: 0; }
      .category-config-head, .category-head, .question-top, .category-stepper { grid-template-columns: 1fr; }
      .category-badge, .weights { justify-self: start; justify-content: flex-start; }
      .rating-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .questions { padding: 12px; }
      .question-top, .rating-panel { padding-left: 14px; padding-right: 14px; }
      .question-top { padding-top: 16px; }
      .category-stepper-status { text-align: left; }
      .radar-card svg { min-width: 640px; }
    }
    @media (prefers-reduced-motion: reduce) {
      *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .001ms !important; }
    }

/* ===================================================================
   TEMA expliCarlos · Ruta 1: La Mesa Clara
   ===================================================================
   Sólo se modifican:
     · Variables globales
     · Tipografía global del sistema y fondo de página (crema papel)
     · Cabecera (Hero) y sus estadísticas (estilo editorial y cálido)
     · Zona lateral de menús (Category Nav)
     · Pie de página (Footer) con logotipo centrado y lema de la ruta 1
     · Botones globales (color terracota de acento) y barra de progreso
   Las categorías y preguntas permanecen completamente intactas.
   =================================================================== */

:root {
  /* expliCarlos Palette - Ruta 1: La Mesa Clara */
  --exp-azul-tinta: #1F3A5F;
  --exp-crema-papel: #F6EBDD;
  --exp-terracota: #D9825B;
  --exp-terracota-texto: #9F4627;
  --exp-salvia: #8FAE9B;
  --exp-grafito: #2B2B2B;
  --exp-amarillo: #F3C969;
  --exp-crema-light: #FDF9F4;

  /* Re-mapeo de variables de la app shell */
  --bg: var(--exp-crema-papel);
  --bg-2: #FFFFFF;
  --surface: #FFFFFF;
  --surface-soft: var(--exp-crema-light);
  --ink: var(--exp-grafito);
  --muted: #575266;
  --line: rgba(31, 58, 95, 0.12);
  --shadow-hard: 0 16px 40px rgba(31, 58, 95, 0.05);
  --shadow-soft: 0 8px 24px rgba(43, 43, 43, 0.04);
  --focus: 0 0 0 4px rgba(217, 130, 91, 0.35);
}

body {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 5% 5%, rgba(243, 201, 105, 0.12), transparent 25rem),
    radial-gradient(circle at 95% 15%, rgba(217, 130, 91, 0.08), transparent 30rem),
    linear-gradient(180deg, var(--exp-crema-papel) 0%, #F0E3D2 40rem, var(--exp-crema-papel) 100%);
  background-attachment: fixed;
}

/* Cabecera / Hero (Estilo Mesa Clara) */
.hero {
  min-height: 380px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 6vw, 64px);
  border: 2px dashed rgba(31, 58, 95, 0.18) !important; /* Borde discontinuo de boceto técnico */
  border-radius: 20px 60px 20px 60px !important; /* Asimetría pronunciada avant-garde */
  color: var(--exp-azul-tinta);
  background-color: #FAF5EB !important;
  /* Textura de papel milimetrado/cuadriculado de arquitecto */
  background-image:
    linear-gradient(rgba(31, 58, 95, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(31, 58, 95, 0.03) 1px, transparent 1px);
  background-size: 22px 22px;
  box-shadow:
    0 20px 48px rgba(31, 58, 95, 0.05),
    inset 0 0 60px rgba(255, 255, 255, 0.7) !important;
  isolation: isolate;
  position: relative;
  overflow: hidden;
}

/* Esferas de luz flotantes y fluidas */
.hero::before, .hero::after {
  display: block !important;
  content: "" !important;
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  z-index: -1;
  opacity: 0.45;
  animation: floatShape 15s ease-in-out infinite;
}

/* Orbe amarillo cálido en la esquina superior izquierda */
.hero::before {
  top: -20%;
  left: -10%;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, var(--exp-amarillo) 30%, transparent 70%) !important;
}

/* Orbe terracota suave en la esquina inferior derecha */
.hero::after {
  bottom: -20%;
  right: -5%;
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, var(--exp-terracota) 30%, transparent 70%) !important;
  animation-delay: -7.5s;
}

/* Elementos de dibujo técnico y blueprint */
.blueprint-crosshair {
  position: absolute;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--exp-terracota);
  opacity: 0.35;
  pointer-events: none;
  z-index: 1;
}
.blueprint-crosshair.tl { top: 12px; left: 16px; }
.blueprint-crosshair.tr { top: 12px; right: 16px; }
.blueprint-crosshair.bl { bottom: 12px; left: 16px; }
.blueprint-crosshair.br { bottom: 12px; right: 16px; }

.blueprint-metadata {
  position: absolute;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--exp-azul-tinta);
  opacity: 0.28;
  pointer-events: none;
  z-index: 1;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.blueprint-metadata.ml { top: 16px; left: 48px; }
.blueprint-metadata.mr { top: 16px; right: 48px; }
.blueprint-metadata.bl_text { bottom: 16px; left: 48px; }
.blueprint-metadata.br_text { bottom: 16px; right: 48px; }

.hero-blueprint-svg {
  position: absolute;
  right: 6%;
  top: 50%;
  width: clamp(180px, 24vw, 340px);
  height: auto;
  color: var(--exp-azul-tinta);
  opacity: 0.07;
  pointer-events: none;
  z-index: 0;
  animation: blueprintRotate 85s linear infinite;
  transform-origin: center center;
}

@keyframes blueprintRotate {
  from { transform: translateY(-50%) rotate(0deg); }
  to { transform: translateY(-50%) rotate(360deg); }
}

.eyebrow {
  width: fit-content;
  border: 1px solid rgba(217, 130, 91, 0.35);
  color: var(--exp-terracota);
  background: rgba(217, 130, 91, 0.08);
  letter-spacing: 0.14em;
  font-weight: 900;
  border-radius: 999px;
  padding: .45rem 1rem;
  font-size: .75rem;
  text-transform: uppercase;
  margin-bottom: 8px;
  position: relative;
  z-index: 2;
}

/* Estructuración tipográfica del título */
.hero-title-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 14px;
  position: relative;
  z-index: 2;
}

.hero-title-top {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: clamp(1.4rem, 3.8vw, 2.4rem);
  font-weight: 850;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--exp-azul-tinta);
  line-height: 1;
  margin: 0;
}

.hero-title-vs {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: italic;
  font-weight: 500;
  font-size: 0.85em;
  text-transform: lowercase;
  color: var(--exp-terracota);
  border: 1px solid rgba(217, 130, 91, 0.3);
  border-radius: 50%;
  width: 1.8em;
  height: 1.8em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(217, 130, 91, 0.05);
  letter-spacing: 0;
}

.hero-title-name {
  display: inline-block;
}

.hero-main-title {
  display: block;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-style: italic;
  font-size: clamp(2.2rem, 5.8vw, 3.8rem);
  font-weight: 850;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--exp-azul-tinta);
  margin: 0;
}

/* Estilizado editorial de la descripción (Estilo cita/acotación técnica) */
.hero .hero-description {
  position: relative;
  padding-left: 20px;
  border-left: 4px solid var(--exp-salvia);
  margin: 22px 0 0;
  color: var(--exp-terracota) !important;
  font-size: clamp(0.95rem, 1.6vw, 1.1rem);
  line-height: 1.55;
  font-weight: 600;
  max-width: 840px;
  z-index: 2;
}

/* Estadísticas de la cabecera */
.hero-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(110px, 1fr));
  gap: 12px;
  margin-top: 32px;
  max-width: 920px;
}

.stat-tile {
  border: 1px solid rgba(31, 58, 95, 0.1) !important;
  border-radius: 8px 20px 8px 20px !important;
  background: rgba(255, 255, 255, 0.6) !important;
  backdrop-filter: blur(8px);
  padding: 16px;
  transition: all 0.2s ease;
}

.stat-tile:hover {
  transform: translateY(-2px);
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(31, 58, 95, 0.25) !important;
}

.stat-tile strong {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--exp-azul-tinta) !important;
  font-weight: 800;
  font-size: 1.75rem;
  line-height: 1;
}

.stat-tile span {
  color: var(--muted) !important;
  font-weight: 700;
}

/* El primer indicador destaca con borde inferior terracota */
.stat-tile:first-child {
  border-bottom: 4px solid var(--exp-terracota) !important;
}

/* Contenedores globales de la aplicación */
.scale-card, .toolbar, .category-config, .validation-panel, .results, .data-exchange {
  border: 1px solid rgba(31, 58, 95, 0.1) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  box-shadow: var(--shadow-soft) !important;
  border-radius: 12px 28px 12px 28px !important;
  color: var(--exp-grafito) !important;
  backdrop-filter: blur(18px);
}

.scale-card h2, .category-config-head h2 {
  color: var(--exp-azul-tinta) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

.scale-item {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  border-radius: 8px 20px 8px 20px !important;
  background: #FDFBF7 !important;
}

.scale-item strong {
  color: var(--exp-azul-tinta) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.scale-item span {
  color: var(--muted) !important;
}

/* Barra de herramientas sticky */
.toolbar {
  top: 10px;
  border-top: 4px solid var(--exp-terracota) !important; /* Línea decorativa terracota */
}

.progress-wrap {
  border-color: rgba(31, 58, 95, 0.12) !important;
  color: var(--exp-azul-tinta) !important;
  background: #F6EBDD !important; /* Crema papel */
}

.progress-track {
  background: #E8DCBE !important;
}

.progress-fill {
  background: linear-gradient(90deg, var(--exp-azul-tinta), var(--exp-terracota), var(--exp-salvia)) !important;
}

/* Botones con estilo moderno de la Ruta 1 (Acento Terracota) */
.btn-primary {
  background: var(--exp-terracota) !important;
  color: var(--exp-grafito) !important;
  box-shadow: 0 10px 24px rgba(217, 130, 91, 0.2) !important;
  border: 0;
  transition: all 0.2s ease;
}

.btn-primary:hover {
  background: #E49A77 !important;
  box-shadow: 0 12px 28px rgba(217, 130, 91, 0.3) !important;
  transform: translateY(-1px);
}

.btn-ghost {
  color: var(--exp-azul-tinta) !important;
  border: 1px solid rgba(31, 58, 95, 0.2) !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease;
}

.btn-ghost:hover {
  background: #FAF5EB !important;
  border-color: var(--exp-azul-tinta) !important;
}

.btn-soft {
  color: var(--exp-grafito) !important;
  border: 1px solid rgba(31, 58, 95, 0.1) !important;
  background: #FFFFFF !important;
  transition: all 0.2s ease;
}

.btn-soft:hover {
  background: #FAF5EB !important;
  border-color: rgba(31, 58, 95, 0.25) !important;
}

.btn-dark {
  color: #FFFFFF !important;
  background: var(--exp-azul-tinta) !important;
  transition: all 0.2s ease;
}

.btn-dark:hover {
  background: #152740 !important;
}

/* Configuración de Categorías */
.category-config {
  color: var(--exp-grafito) !important;
}

.category-config-head p, .normalization-note, .category-control-meta {
  color: var(--muted) !important;
}

.category-control {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  background: #FAF7F0 !important;
  border-radius: 8px 20px 8px 20px !important;
}

.category-control::after {
  opacity: 0.08 !important;
}

.category-control-meta select {
  border-color: rgba(31, 58, 95, 0.15) !important;
}

.weight-summary {
  color: var(--exp-azul-tinta) !important;
  background: #FAF5EB !important;
  border-radius: 999px;
  padding: .625rem .875rem;
}

.criterion-weight-row {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  background: #FFFFFF !important;
  border-radius: 8px !important;
}

.criterion-weight-row.is-modified {
  border-left: 4px solid var(--exp-terracota) !important;
  background: #FFFCF5 !important;
}

.criterion-weight-name strong {
  color: var(--exp-azul-tinta) !important;
}

/* Barra Lateral de Navegación de Categorías */
.category-nav {
  top: 112px;
  border: 1px solid rgba(31, 58, 95, 0.1) !important;
  border-top: 6px solid var(--exp-azul-tinta) !important; /* Borde superior azul tinta */
  border-radius: 8px 24px 8px 24px !important;
  background: rgba(255, 255, 255, 0.98) !important;
  box-shadow: var(--shadow-soft) !important;
}

.category-nav h2 {
  color: var(--exp-azul-tinta) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

.cat-link {
  border-color: transparent !important;
  color: var(--exp-grafito) !important;
  background: #FAF5EB !important;
  border-radius: 8px !important;
  transition: all 0.2s ease;
}

.cat-link:hover, .cat-link.is-active {
  color: var(--exp-azul-tinta) !important;
  background: #FFFFFF !important;
  border-color: rgba(31, 58, 95, 0.15) !important;
  box-shadow:
    0 8px 20px rgba(31, 58, 95, 0.04),
    inset 4px 0 0 var(--cat) !important; /* Borde izquierdo dinámico */
  transform: translateX(3px);
}

.cat-metric {
  border-color: rgba(31, 58, 95, 0.08) !important;
  color: #625C75 !important;
  background: #FFFFFF !important;
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
}

.cat-link.is-complete .cat-metric {
  border-color: color-mix(in srgb, var(--cat) 30%, rgba(31, 58, 95, 0.15)) !important;
}

.cat-link.is-complete .cat-name::after,
.cat-link.is-complete.is-active .cat-name::after {
  color: #6C6680 !important;
}

/* Advertencia de categorías no seleccionadas (Mesa Clara) */
.category-nav-warning {
  margin-top: 14px;
  padding: 12px 14px;
  border: 1px dashed rgba(217, 130, 91, 0.3) !important;
  border-radius: 8px 18px 8px 18px !important;
  background: #FFFBF9 !important;
  color: var(--exp-grafito) !important;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.4;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  box-shadow: inset 0 0 12px rgba(217, 130, 91, 0.02);
}

.category-nav-warning svg {
  flex-shrink: 0;
  color: var(--exp-terracota);
  margin-top: 1px;
}

.category-nav-warning strong {
  color: var(--exp-terracota);
  font-weight: 900;
}

/* Paneles de Validación y Resultados */
.validation-panel {
  position: relative;
  scroll-margin-top: 8rem;
  color: #7F1D1D !important;
  border-color: #FECACA !important;
  background: #FEF2F2 !important;
}

.validation-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
}

.validation-head h2 {
  margin: 0;
}

.validation-close {
  display: grid;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  place-items: center;
  border: 1px solid #FCA5A5;
  border-radius: 999px;
  color: #991B1B;
  background: #FFFFFF;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
}

.validation-close:hover {
  color: #FFFFFF;
  background: #B91C1C;
}

.validation-close:focus-visible {
  outline: 3px solid rgba(185, 28, 28, .28);
  outline-offset: 3px;
}

@media (max-width: 760px) {
  .validation-panel {
    scroll-margin-top: 18rem;
  }
}

.validation-panel p, .validation-list {
  color: #991B1B !important;
}

.results {
  color: var(--exp-grafito) !important;
  border: 1px solid rgba(31, 58, 95, 0.12) !important;
  background: #FFFFFF !important;
}

.results-head {
  background: linear-gradient(135deg, var(--exp-azul-tinta) 0%, #152740 100%) !important;
  color: #FFFFFF !important;
}

.results-head h2 {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

.results-head p {
  color: rgba(255, 255, 255, 0.84) !important;
}

.score-card {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  border-radius: 12px 24px 12px 24px !important;
  background: #FDFBF7 !important;
  box-shadow: none !important;
}

.score-card h3 {
  color: var(--exp-grafito) !important;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 700;
}

.score-value {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 850;
  color: var(--tool) !important;
}

.score-grid .score-card:nth-child(2) .score-value {
  color: #0369A1 !important;
}

.score-sub {
  color: var(--muted) !important;
}

.score-band {
  margin-top: .55rem;
  color: var(--exp-azul-tinta);
  font-size: .82rem;
  font-weight: 800;
  line-height: 1.4;
}

.winner {
  border-left: 5px solid var(--exp-terracota) !important;
  border-radius: 0 12px 12px 0 !important;
  color: var(--exp-azul-tinta) !important;
  background: #FFF9F6 !important;
  font-weight: 800;
}

.interpretation-report {
  display: grid;
  gap: 1rem;
  margin: 0 18px 18px;
  padding: 1.25rem;
  border: 1px solid rgba(31, 58, 95, .14);
  border-left: 6px solid var(--exp-azul-tinta);
  border-radius: 0 18px 18px 0;
  color: var(--exp-grafito);
  background: #F8FAFC;
}

.interpretation-report.is-conditional {
  border-left-color: #B45309;
  background: #FFFBEB;
}

.interpretation-report.is-blocked,
.interpretation-report.is-not_interpretable {
  border-left-color: var(--danger);
  background: #FEF2F2;
}

.interpretation-heading p {
  margin: 0 0 .25rem;
  color: var(--exp-terracota-texto);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.interpretation-heading h3,
.interpretation-signals h4,
.interpretation-actions h4 {
  margin: 0;
  color: var(--exp-azul-tinta);
}

.interpretation-primary {
  margin: 0;
  line-height: 1.55;
}

.interpretation-primary {
  font-size: 1.05rem;
  font-weight: 800;
}

.interpretation-signals,
.interpretation-actions {
  display: grid;
  gap: .55rem;
}

.interpretation-signals ul,
.interpretation-actions ul,
.interpretation-disclosures {
  display: grid;
  gap: .45rem;
  margin: 0;
  padding-left: 1.25rem;
  line-height: 1.45;
}

.interpretation-signals li.is-blocking {
  color: #991B1B;
}

.interpretation-signals li.is-conditional {
  color: #92400E;
}

.interpretation-disclosures {
  padding-top: .8rem;
  border-top: 1px solid rgba(31, 58, 95, .12);
  color: #64748B;
  font-size: .82rem;
}

.result-meta {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  background: #FDFBF7 !important;
}

.result-meta strong {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--exp-azul-tinta) !important;
}

.result-meta span {
  color: var(--muted) !important;
}

.category-breakdown-list {
  display: grid;
  gap: 1.5rem;
}

.category-breakdown-card {
  display: grid;
  gap: 1rem;
  padding: 1.25rem;
  border: 1px solid rgba(31, 58, 95, .12);
  border-top: 6px solid var(--cat);
  border-radius: 18px;
  background: #FFFFFF;
  break-inside: avoid;
}

.category-breakdown-head {
  display: flex;
  gap: 1rem;
  align-items: start;
  justify-content: space-between;
}

.category-breakdown-head p,
.category-breakdown-head h3 {
  margin: 0;
}

.category-breakdown-head p {
  color: var(--muted);
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.category-breakdown-head h3 {
  margin-top: .25rem;
  color: var(--exp-azul-tinta);
  font-size: clamp(1.35rem, 3vw, 2rem);
}

.category-breakdown-head > span {
  padding: .45rem .75rem;
  border-radius: 999px;
  color: var(--exp-azul-tinta);
  background: color-mix(in srgb, var(--cat) 15%, #FFFFFF);
  font-size: .8rem;
  font-weight: 900;
  white-space: nowrap;
}

.category-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.category-score-card {
  padding: 1rem;
}

.category-score-card h3,
.category-score-card p {
  margin-top: 0;
}

.category-score-value {
  color: var(--tool);
  font-size: clamp(2rem, 5vw, 3.75rem);
  line-height: 1;
}

.category-score-card.is-notebook .category-score-value { color: #0369A1; }

.category-score-value small {
  color: var(--muted);
  font-size: .9rem;
}

.category-score-meta {
  margin: .45rem 0 .75rem;
  color: var(--muted);
  font-size: .82rem;
  font-weight: 700;
}

.category-breakdown-radar {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(14rem, .6fr);
  gap: 1rem;
  align-items: start;
}

.category-breakdown-radar .category-radar {
  overflow: auto;
  padding: .75rem;
  border-radius: 16px;
}

.category-breakdown-radar svg {
  display: block;
  width: 100%;
  min-width: 32rem;
  height: auto;
}

.category-breakdown-radar aside {
  padding: 1rem;
  border-radius: 16px;
  color: var(--exp-grafito);
  background: #FDFBF7;
}

.category-breakdown-radar h4 {
  margin: 0;
  color: var(--exp-azul-tinta);
}

.category-breakdown-radar p {
  line-height: 1.5;
}

.dashboard-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  font-weight: 800;
}

.dashboard-legend span {
  display: inline-flex;
  gap: .4rem;
  align-items: center;
}

.dashboard-legend i {
  width: .75rem;
  height: .75rem;
  border-radius: 999px;
  background: var(--legend);
}

.excluded-category-summary {
  margin-top: 1.5rem;
  padding: 1rem 1.25rem;
  border: 1px dashed rgba(31, 58, 95, .24);
  border-radius: 16px;
  color: var(--muted);
  background: #F8FAFC;
}

.excluded-category-summary h3 {
  margin-top: 0;
  color: var(--exp-azul-tinta);
}

.pdf-actions {
  display: grid;
  justify-items: center;
  gap: .5rem;
  padding: 0 1.125rem 1.5rem;
  text-align: center;
}

.pdf-actions p {
  margin: 0;
  color: var(--muted);
  font-size: .82rem;
}

@media (max-width: 760px) {
  .category-breakdown-head {
    display: grid;
  }

  .category-breakdown-head > span {
    justify-self: start;
  }

  .category-score-grid,
  .category-breakdown-radar {
    grid-template-columns: 1fr;
  }
}

@media print {
  @page {
    size: A4;
    margin: 12mm;
  }

  html,
  body {
    color: #111827 !important;
    background: #FFFFFF !important;
  }

  .hero,
  .scale-card,
  .toolbar,
  .data-exchange,
  .category-config,
  .category-nav,
  .validation-panel,
  .survey,
  .app-footer,
  .category-dashboard,
  .import-dialog,
  .breakdown-actions,
  .pdf-actions {
    display: none !important;
  }

  .app-shell,
  .layout,
  .layout > div,
  #resultsPanel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .layout {
    display: block !important;
  }

  #resultsPanel,
  #categoryDetails {
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    box-shadow: none !important;
  }

  .category-breakdown-card,
  .interpretation-report,
  .score-card {
    break-inside: avoid;
    box-shadow: none !important;
  }

  .category-breakdown-radar {
    grid-template-columns: 1fr !important;
  }

  .category-breakdown-radar svg {
    min-width: 0;
  }

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

/* Modales / Vistas de detalles de Categoría */
.category-dashboard {
  background: rgba(43, 43, 43, 0.5) !important;
}

.category-dashboard-dialog {
  border: 1px solid rgba(31, 58, 95, 0.15) !important;
  border-radius: 12px 32px 12px 32px !important;
  background: #FFFFFF !important;
}

.category-dashboard-head {
  background: linear-gradient(135deg, var(--exp-azul-tinta) 0%, #152740 100%) !important;
}

.category-dashboard-head h2 {
  color: #FFFFFF;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

.category-dashboard-kicker {
  color: var(--exp-amarillo) !important;
}

.category-score-card {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  border-radius: 8px 20px 8px 20px !important;
  background: #FDFBF7 !important;
}

.category-score-value {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 850;
}

.category-dashboard-verdict {
  display: grid;
  gap: .55rem;
  margin: 0;
  padding: 1rem 1.15rem;
  border-left: 5px solid var(--exp-terracota) !important;
  border-radius: 0 14px 14px 0;
  color: var(--exp-azul-tinta) !important;
  background: #FFF9F6 !important;
}

.category-dashboard-verdict p,
.category-dashboard-verdict ul {
  margin: 0;
  line-height: 1.5;
}

.category-dashboard-verdict ul {
  padding-left: 1.2rem;
}

.category-dashboard-verdict small {
  color: var(--muted);
  font-weight: 800;
}

.category-dashboard-verdict.is-blocked,
.category-dashboard-verdict.is-not_interpretable {
  border-left-color: var(--danger) !important;
  background: #FEF2F2 !important;
}

.category-dashboard-verdict.is-conditional {
  border-left-color: #B45309 !important;
  background: #FFFBEB !important;
}

.category-radar {
  border: 1px solid rgba(31, 58, 95, 0.1) !important;
  background: #152740 !important;
}

/* Diálogo de Importación */
.import-dialog {
  border: 1px solid rgba(31, 58, 95, 0.15) !important;
  border-radius: 12px 28px 12px 28px !important;
  background: #FFFFFF !important;
}

.import-dialog::backdrop {
  background: rgba(43, 43, 43, 0.5) !important;
}

.import-dialog-head {
  background: var(--exp-azul-tinta) !important;
  border-bottom: 5px solid var(--exp-terracota) !important;
}

.import-dialog-head p {
  color: var(--exp-terracota) !important;
}

.import-dialog-head h2 {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 800;
}

.import-preview-grid div {
  border: 1px solid rgba(31, 58, 95, 0.08) !important;
  background: #FDFBF7 !important;
}

.import-preview-grid dd {
  color: var(--exp-azul-tinta) !important;
}

.import-warning {
  border-left: 4px solid var(--exp-terracota) !important;
  background: #FFF9F6 !important;
}

/* Error de carga */
.load-error {
  border-top: 6px solid var(--exp-terracota) !important;
  border-radius: 12px 28px 12px 28px !important;
  background: #FFFFFF !important;
  box-shadow: var(--shadow-hard) !important;
}

.load-error-kicker {
  color: var(--exp-azul-tinta) !important;
}

/* Intercambio de datos */
.data-exchange {
  border-left: 6px solid var(--exp-azul-tinta) !important;
  border-radius: 12px 28px 12px 28px !important;
}

.data-exchange-kicker {
  color: var(--exp-terracota) !important;
}

.data-exchange h2 {
  color: var(--exp-azul-tinta) !important;
}

/* Pie de página (Footer) expliCarlos - Ruta 1 */
.app-footer {
  margin-top: 48px;
  padding-top: 32px;
  border-top: 1px solid rgba(31, 58, 95, 0.08);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.footer-logo {
  max-height: 35px;
  width: auto;
  display: block;
}

.footer-tagline {
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.85rem;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Línea de metadatos del pie de página */
.footer-meta-line {
  margin-top: 8px;
  font-size: 0.75rem;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.footer-meta-link {
  color: var(--exp-azul-tinta);
  text-decoration: none;
  transition: color 0.2s ease;
  font-weight: 750;
}
.footer-meta-link:hover {
  color: var(--exp-terracota);
  text-decoration: underline;
}
.footer-meta-sep {
  color: rgba(31, 58, 95, 0.15);
  font-weight: 400;
  pointer-events: none;
}
@media (max-width: 760px) {
  .footer-meta-line {
    flex-direction: column;
    gap: 4px;
  }
  .footer-meta-sep {
    display: none;
  }
}

@media (max-width: 900px) {
  .hero { min-height: auto; padding-right: clamp(32px, 6vw, 64px); }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .hero { border-radius: 12px 24px 12px 24px; }
  .blueprint-metadata { display: none; }
  .category-nav { border-radius: 8px 20px 8px 20px; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===================================================================
   MEJORAS AVANZADAS DE EXPERIENCIA DE USUARIO (UX/UI)
   =================================================================== */

/* Ventana Modal: Datos bajo tu control */
.data-dialog {
  width: min(640px, calc(100% - 2rem));
  max-height: calc(100vh - 2rem);
  padding: 0;
  border: 1px solid rgba(31, 58, 95, 0.18) !important;
  border-radius: 12px 32px 12px 32px !important;
  background: #FFFFFF !important;
  box-shadow: 0 30px 80px rgba(31, 58, 95, 0.2) !important;
  color: var(--exp-grafito) !important;
  overflow: hidden;
}

.data-dialog::backdrop {
  background: rgba(31, 58, 95, 0.4) !important;
  backdrop-filter: blur(8px);
}

.data-dialog-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: start;
  padding: 1.25rem 1.5rem;
  color: #FFFFFF;
  background: var(--exp-azul-tinta);
  border-bottom: 5px solid var(--exp-terracota);
}

.data-dialog-head p {
  margin: 0 0 .2rem;
  color: var(--exp-amarillo);
  font-size: .72rem;
  font-weight: 950;
  letter-spacing: .1rem;
  text-transform: uppercase;
}

.data-dialog-head h2 {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1.5rem;
  font-weight: 800;
}

.data-dialog-close {
  min-width: 2.75rem;
  padding-inline: .75rem;
  color: var(--exp-azul-tinta) !important;
  background: #FFFFFF !important;
}

.data-dialog-body {
  padding: 1.5rem;
  display: grid;
  gap: 1.25rem;
}

.data-dialog-body > p {
  color: var(--muted);
  font-weight: 600;
  line-height: 1.5;
  margin: 0;
}

.data-dialog-section {
  padding: 1.25rem;
  border: 1px solid rgba(31, 58, 95, 0.08);
  border-radius: 12px 24px 12px 24px;
  background: #FDFBF7;
}

.data-dialog-section h3 {
  margin: 0 0 0.5rem;
  color: var(--exp-azul-tinta);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 1rem;
  font-weight: 800;
}

.data-dialog-section p {
  margin: 0 0 1rem;
  font-size: 0.84rem;
  color: var(--muted);
  font-weight: 600;
  line-height: 1.45;
}

.data-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Zona de peligro destacada */
.data-dialog-danger {
  border-left: 4px solid var(--danger) !important;
  background: #FFF8F8 !important;
}

.data-dialog-danger h3 {
  color: var(--danger);
}

.data-dialog-status {
  min-height: 1.2em;
  margin: 0;
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--ok);
  text-align: center;
}

.data-dialog-status.is-error {
  color: var(--danger);
}

/* Estado completado para tarjetas de preguntas */
.question-card.is-complete {
  border-color: color-mix(in srgb, var(--cat) 50%, rgba(31, 58, 95, 0.12)) !important;
  border-left: 4px solid var(--cat) !important; /* Resalta el borde con el color de la categoría */
  background: color-mix(in srgb, var(--cat) 2%, #FFFFFF) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.04) !important;
}

/* Indicador de completado flotante */
.completion-badge {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cat);
  color: #FFFFFF;
  display: grid;
  place-items: center;
  font-size: 0.8rem;
  font-weight: 900;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
  animation: scaleIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

@keyframes scaleIn {
  from { transform: scale(0); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* Transiciones mejoradas en enlaces y progreso */
.cat-link {
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.progress-fill {
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

@media (max-width: 520px) {
  .data-dialog-actions, .data-dialog-actions .btn {
    width: 100%;
  }
}