/* ============================================================
     Tokens — Metallic Blue (Grial), dark-first, coherente con
     sec.grial.cl y config/DESIGN_TOKENS.md
     ============================================================ */
  :root{
    --bg:#071428;
    --bg-2:#0a1a30;
    --surface:rgba(7,20,40,.72);
    --surface-solid:#0c1f38;
    --ink:#eaf2fb;
    --muted:#8ea2c0;
    --border:rgba(6,182,212,.16);
    --border-strong:rgba(6,182,212,.32);
    --accent:#22d3ee;
    --accent-2:#3b82f6;
    --accent-ink:#04212b;
    --good:#4ade80; --good-bg:rgba(74,222,128,.12); --good-bd:rgba(74,222,128,.34);
    --warn:#fbbf24; --warn-bg:rgba(251,191,36,.12); --warn-bd:rgba(251,191,36,.34);
    --bad:#f87171; --bad-bg:rgba(248,113,113,.12); --bad-bd:rgba(248,113,113,.34);
    --shadow: 0 1px 0 rgba(0,0,0,.35), 0 16px 40px -20px rgba(0,0,0,.7);
    --sidebar-w:260px;
    --sidebar-w-collapsed:72px;
  }
  :root[data-theme="light"]{
    --bg:#f4f7fb;
    --bg-2:#eaf0f8;
    --surface:#ffffff;
    --surface-solid:#ffffff;
    --ink:#0f1d31;
    --muted:#5c6c83;
    --border:rgba(15,40,70,.13);
    --border-strong:rgba(15,40,70,.24);
    --accent:#0891b2;
    --accent-2:#2563eb;
    --accent-ink:#ffffff;
    --good:#15803d; --good-bg:#e8f6ec; --good-bd:rgba(21,128,61,.25);
    --warn:#a15c07; --warn-bg:#fdf3df; --warn-bd:rgba(161,92,7,.28);
    --bad:#b91c1c; --bad-bg:#fdecec; --bad-bd:rgba(185,28,28,.28);
    --shadow: 0 1px 2px rgba(15,40,70,.06), 0 8px 24px -12px rgba(15,40,70,.18);
  }

  *{ box-sizing:border-box; }
  html{ background:var(--bg); }
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Sans", ui-sans-serif, system-ui, -apple-system, sans-serif;
    min-height:100vh;
    margin:0;
  }
  :focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .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; }
  .skip-link{
    position:absolute; top:-60px; left:16px; background:var(--accent); color:var(--accent-ink);
    padding:10px 18px; z-index:9999; border-radius:8px; font-weight:700; font-size:13px;
    text-decoration:none; transition:top .2s ease; box-shadow:var(--shadow);
  }
  .skip-link:focus{ top:14px; }
  h1,h2,h3{ font-family:"Manrope", ui-sans-serif, system-ui, sans-serif; text-wrap:balance; margin:0; }
  .mono, .num{ font-family:"IBM Plex Mono", ui-monospace, SFMono-Regular, monospace; font-variant-numeric:tabular-nums; }
  button{ font-family:inherit; }
  a{ color:inherit; }

  /* ============================================================
     LOGIN (fuera del shell)
     ============================================================ */
  #loginScreen{
    min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
    padding:20px;
    background:
      radial-gradient(1100px 560px at 12% -10%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 60%),
      var(--bg);
  }
  .login-topbrand{ display:flex; align-items:center; gap:10px; margin-bottom:28px; width:100%; max-width:400px; }
  .login-topbrand .theme-btn-inline{ margin-left:auto; }
  .brand-mark{ height:30px; width:auto; flex:none; display:block; }
  .brand-mark.for-dark{ display:block; }
  .brand-mark.for-light{ display:none; }
  :root[data-theme="light"] .brand-mark.for-dark{ display:none; }
  :root[data-theme="light"] .brand-mark.for-light{ display:block; }
  .brand-name{ font-family:"Manrope"; font-weight:800; font-size:17px; letter-spacing:-.01em; }

  .card{
    background:var(--surface); border:1px solid var(--border); border-radius:14px;
    padding:20px 22px; box-shadow:var(--shadow); backdrop-filter:blur(14px) saturate(140%);
  }
  .card + .card{ margin-top:14px; }
  .card h3{ font-size:14.5px; display:flex; align-items:center; gap:8px; }
  .card-sub{ color:var(--muted); font-size:12.5px; margin-top:2px; margin-bottom:14px; }

  .btn{ font:600 13.5px "IBM Plex Sans"; padding:11px 20px; border-radius:9px; border:1px solid var(--border); cursor:pointer; }
  .btn-primary{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); border:0; }
  .btn-primary:disabled{ opacity:.4; cursor:not-allowed; filter:grayscale(.3); }
  .btn-ghost{ background:var(--surface-solid); color:var(--ink); }
  .btn-link{ background:none; border:0; color:var(--accent); font:600 12.5px "IBM Plex Sans"; padding:0; cursor:pointer; }
  .btn-row{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; align-items:center; }
  .btn-note{ font-size:11.5px; color:var(--muted); }

  .login-wrap{ width:100%; max-width:420px; }
  .login-wrap .view-sub{ margin-bottom:22px; color:var(--muted); font-size:13.5px; }
  .field{ margin-bottom:14px; }
  .field label{ display:block; font-size:12px; color:var(--muted); margin-bottom:6px; font-weight:600; }
  .field input{
    width:100%; padding:11px 12px; border-radius:9px; border:1px solid var(--border);
    background:var(--bg-2); color:var(--ink); font:500 13.5px "IBM Plex Sans";
  }
  .field input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .field input[aria-invalid="true"]{ border-color:var(--bad); }
  .eyebrow{ text-transform:uppercase; letter-spacing:.09em; font-size:11px; color:var(--accent); font-weight:700; margin-bottom:6px; }

  /* Banners de error y alertas en Login */
  .login-alert-banner{
    padding:11px 14px; border-radius:10px; font-size:12.5px; font-weight:500;
    line-height:1.45; margin-bottom:16px; display:flex; align-items:flex-start; gap:8px;
  }
  .login-alert-banner.bad{ background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--bad); }
  .login-alert-banner.warn{ background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn); }
  .login-alert-banner.good{ background:var(--good-bg); border:1px solid var(--good-bd); color:var(--good); }

  /* Componente OTP de 6 casillas */
  .otp-inputs{
    display:grid; grid-template-columns:repeat(6, 1fr); gap:8px;
    margin:12px 0 6px; width:100%;
  }
  .otp-input{
    width:100%; height:52px; min-height:48px; border-radius:10px;
    border:1.5px solid var(--border); background:var(--bg-2); color:var(--ink);
    font-size:22px; font-weight:700; text-align:center;
    transition:border-color .15s ease, box-shadow .15s ease;
  }
  .otp-input:focus{
    outline:2px solid var(--accent); outline-offset:2px;
    border-color:var(--accent); background:var(--surface-solid);
  }
  .otp-input[aria-invalid="true"]{
    border-color:var(--bad) !important;
    background:color-mix(in srgb, var(--bad-bg) 40%, var(--bg-2));
  }

  /* Animación Shake al fallar el código */
  @keyframes otpShake {
    0%, 100% { transform:translateX(0); }
    15%, 45%, 75% { transform:translateX(-6px); }
    30%, 60%, 90% { transform:translateX(6px); }
  }
  .otp-shake{ animation:otpShake 0.35s cubic-bezier(.36,.07,.19,.97) both; }

  /* Botones de simulación rápida en login */
  .btn-sim-opt{
    background:var(--bg-2); border:1px solid var(--border); color:var(--muted);
    border-radius:6px; padding:4px 8px; font-size:11px; cursor:pointer; font-weight:500;
    transition:background .15s, color .15s;
  }
  .btn-sim-opt:hover{
    background:var(--surface-solid); color:var(--ink); border-color:var(--border-strong);
  }
  .btn-sim-opt:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

  @media (max-width:400px){
    .otp-inputs{ gap:5px; }
    .otp-input{ height:48px; font-size:19px; border-radius:8px; }
  }

  .sim-items{ width:100%; border-collapse:collapse; margin-top:2px; min-width:480px; }
  .sim-items th{ text-align:left; font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; padding:6px 8px; border-bottom:1px solid var(--border); }
  .sim-items td{ padding:6px 8px; border-bottom:1px solid var(--border); font-size:13px; vertical-align:middle; }
  .sim-items td.desc{ max-width:220px; }
  .sim-items input{ width:90px; padding:6px 8px; border-radius:7px; border:1px solid var(--border); background:var(--bg-2); color:var(--ink); font:600 13px "IBM Plex Sans"; text-align:right; font-variant-numeric:tabular-nums; }
  .sim-items input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .sim-items td.subtotal{ text-align:right; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }

  /* ============================================================
     APP SHELL (todo lo demás)
     ============================================================ */
  #appShell{ display:none; min-height:100vh; }
  #appShell.active{ display:flex; }

  .sidebar{
    width:var(--sidebar-w); flex:none; background:var(--surface-solid); border-right:1px solid var(--border);
    display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow:hidden;
    transition:width .18s ease;
  }
  .sidebar.collapsed{ width:var(--sidebar-w-collapsed); }
  .sidebar-head{ padding:16px 14px; border-bottom:1px solid var(--border); flex:none; }
  .sidebar-brand{ display:flex; align-items:center; gap:9px; margin-bottom:12px; }
  .sidebar-brand .brand-mark{ height:24px; }
  .sidebar.collapsed .sidebar-brand span, .sidebar.collapsed .rut-select, .sidebar.collapsed .nav-label, .sidebar.collapsed .vault-widget-text, .sidebar.collapsed .sidebar-foot-text{ display:none; }
  .rut-select select{
    width:100%; padding:8px 9px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg-2); color:var(--ink); font:600 12px "IBM Plex Sans"; cursor:pointer;
  }
  .collapse-toggle{
    position:absolute; top:14px; right:-11px; width:22px; height:22px; border-radius:50%;
    background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--muted);
    font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }

  .nav-list{ flex:1; overflow-y:auto; padding:10px 8px; display:flex; flex-direction:column; gap:2px; }
  .nav-item{
    display:flex; align-items:center; gap:11px; padding:10px 11px; border-radius:9px;
    color:var(--muted); font-size:13.5px; font-weight:600; cursor:pointer; border:1px solid transparent;
    background:none; width:100%; text-align:left;
  }
  .nav-item .ico{ flex:none; width:18px; text-align:center; }
  .nav-item .badge{
    margin-left:auto; font:700 10.5px "IBM Plex Mono"; padding:1px 7px; border-radius:999px;
    background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd);
  }
  .nav-item:hover{ background:var(--bg-2); color:var(--ink); }
  .nav-item.active{ background:color-mix(in srgb, var(--accent) 13%, transparent); color:var(--ink); border-color:var(--border-strong); }
  .nav-item.active .ico{ color:var(--accent); }
  .nav-spacer{ margin-top:auto; }

  .sidebar-foot{ border-top:1px solid var(--border); padding:13px 14px; flex:none; }
  .vault-widget-label{ display:flex; justify-content:space-between; font-size:11px; color:var(--muted); margin-bottom:6px; }
  .vault-widget-label b{ color:var(--good); font-family:"IBM Plex Mono"; }
  .bar{ height:7px; border-radius:999px; background:var(--bg-2); border:1px solid var(--border); overflow:hidden; }
  .bar > span{ display:block; height:100%; border-radius:999px; background:linear-gradient(90deg, var(--accent), var(--accent-2)); }
  .sidebar-foot-text{ font-size:10.5px; color:var(--muted); margin-top:10px; }

  /* ---- main ---- */
  .main{ flex:1; min-width:0; }
  .main-inner{ max-width:1080px; margin:0 auto; padding:0 24px 60px; }
  .topbar{
    display:flex; align-items:center; gap:12px; padding:16px 24px; position:sticky; top:0;
    background:color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter:blur(8px);
    border-bottom:1px solid var(--border); z-index:10;
  }
  .crumb{ font-size:12.5px; color:var(--muted); }
  .crumb b{ color:var(--ink); font-weight:700; }
  .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:8px; position:relative; }
  .icon-btn{
    border:1px solid var(--border); background:var(--surface-solid); color:var(--muted);
    border-radius:8px; width:34px; height:34px; cursor:pointer; font-size:14px; position:relative;
    display:flex; align-items:center; justify-content:center; flex:none;
  }
  .icon-btn .dot{ position:absolute; top:5px; right:5px; width:7px; height:7px; border-radius:50%; background:var(--bad); border:1.5px solid var(--surface-solid); }
  .notif-pop{
    position:absolute; top:42px; right:0; width:300px; background:var(--surface-solid); border:1px solid var(--border-strong);
    border-radius:12px; box-shadow:var(--shadow); padding:8px; display:none; z-index:20;
  }
  .notif-pop.open{ display:block; }
  .notif-item{ display:flex; gap:9px; padding:9px 8px; border-radius:8px; font-size:12.5px; }
  .notif-item:hover{ background:var(--bg-2); }
  .notif-item .ico{ flex:none; margin-top:1px; }
  .notif-item b{ display:block; font-size:12.5px; }
  .notif-item span{ color:var(--muted); font-size:11.5px; }
  .restart-btn{ border:1px solid var(--border); background:transparent; color:var(--muted); border-radius:8px; padding:7px 10px; font-size:12px; cursor:pointer; }

  .toast{
    position:fixed; top:16px; left:50%; transform:translateX(-50%) translateY(-140%); z-index:60;
    background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--ink);
    padding:10px 16px; border-radius:10px; font-size:13px; font-weight:600; box-shadow:var(--shadow);
    transition:transform .25s ease;
  }
  .toast.show{ transform:translateX(-50%) translateY(0); }

  /* ---- screens ---- */
  .screen{ display:none; padding-top:20px; }
  .screen.active{ display:block; animation:fade .2s ease both; }
  @keyframes fade{ from{ opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;} }

  .helper{
    display:flex; gap:11px; align-items:flex-start;
    background:color-mix(in srgb, var(--accent) 8%, var(--surface));
    border:1px solid var(--border-strong); border-radius:12px;
    padding:13px 15px; margin-bottom:20px; font-size:13px; line-height:1.55;
  }
  .helper .ico{ font-size:16px; flex:none; margin-top:1px; }
  .helper b{ color:var(--accent); }

  .view-head{ margin-bottom:16px; }
  .view-head h2{ font-size:24px; font-weight:800; letter-spacing:-.01em; }
  .view-sub{ color:var(--muted); font-size:13.5px; margin-top:5px; max-width:62ch; }

  /* ---- sub-stepper de postulación ---- */
  .substepper{ display:flex; gap:2px; margin:0 0 22px; overflow-x:auto; }
  .sstep{
    flex:1; min-width:96px; text-align:center; padding:9px 4px 11px;
    border-bottom:3px solid var(--border); color:var(--muted); font-size:11.5px; font-weight:600;
    white-space:nowrap;
  }
  .sstep .n{
    display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px;
    border-radius:50%; background:var(--surface-solid); border:1px solid var(--border); font-size:11px;
    margin-right:5px; font-family:"IBM Plex Mono"; vertical-align:-4px;
  }
  .sstep.done{ border-color:var(--good); color:var(--ink); }
  .sstep.done .n{ background:var(--good-bg); border-color:var(--good-bd); color:var(--good); }
  .sstep.active{ border-color:var(--accent); color:var(--ink); }
  .sstep.active .n{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); color:var(--accent-ink); border-color:transparent; }

  /* ---- bóveda ---- */
  .rubros{ display:flex; gap:8px; flex-wrap:wrap; margin-top:6px; }
  .rubro{
    font:600 12px "IBM Plex Sans"; padding:6px 12px; border-radius:8px;
    background:var(--surface-solid); border:1px solid var(--border-strong); color:var(--ink);
  }
  .doc-list{ display:flex; flex-direction:column; gap:2px; }
  .doc-row{ display:flex; align-items:center; gap:11px; padding:10px 0; border-top:1px solid var(--border); }
  .doc-row:first-child{ border-top:0; }
  .doc-check{
    width:22px; height:22px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center;
    background:var(--good-bg); border:1px solid var(--good-bd); color:var(--good); font-size:12px;
  }
  .doc-name{ font-weight:500; font-size:13.5px; }
  .doc-meta{ color:var(--muted); font-size:11.5px; }

  .cols{ display:grid; grid-template-columns:1.05fr 1fr; gap:14px; align-items:start; }
  @media (max-width:820px){ .cols{ grid-template-columns:1fr; } }

  /* ---- radar ---- */
  .radar-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:13px; }
  .opp{
    background:var(--surface); border:1px solid var(--border); border-radius:13px;
    padding:15px; box-shadow:var(--shadow); display:flex; flex-direction:column; gap:9px;
    backdrop-filter:blur(14px) saturate(140%);
  }
  .opp-top{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; }
  .opp-type{
    font:600 10.5px "IBM Plex Mono"; letter-spacing:.02em; color:var(--accent);
    background:color-mix(in srgb, var(--accent) 12%, transparent);
    border:1px solid color-mix(in srgb, var(--accent) 30%, transparent);
    padding:3px 8px; border-radius:7px; white-space:nowrap;
  }
  .score-pill{ font:700 12.5px "IBM Plex Mono"; padding:4px 9px; border-radius:7px; flex:none; }
  .score-hi{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .score-mid{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .score-lo{ background:var(--bg-2); color:var(--muted); border:1px solid var(--border); }
  .opp-title{ font:600 14.5px/1.35 "IBM Plex Sans"; }
  .opp-org{ color:var(--muted); font-size:12.5px; }
  .opp-meta{ display:flex; flex-wrap:wrap; gap:7px 13px; font-size:12px; color:var(--muted); border-top:1px solid var(--border); padding-top:9px; }
  .opp-meta b{ color:var(--ink); font-family:"IBM Plex Mono"; font-weight:600; }
  .flag{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600; padding:4px 8px; border-radius:7px; border:0; cursor:default; font-family:"IBM Plex Sans"; text-align:left; }
  .flag-desert{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .flag-incumbent{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
  .flag-basesmod{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  button.flag[data-heur-toggle]{ cursor:pointer; }
  button.flag[data-heur-toggle]:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .heur-detail{ display:none; font-size:12px; line-height:1.5; color:var(--muted); background:var(--bg-2); border:1px solid var(--border); border-radius:8px; padding:9px 11px; }
  .heur-detail.open{ display:block; }
  .opp-cta{
    margin-top:2px; align-self:flex-start; font:600 12px "IBM Plex Sans"; color:var(--accent);
    background:none; border:0; padding:0; cursor:pointer;
  }
  .opp-cta:disabled{ color:var(--muted); cursor:not-allowed; }

  .state-badge{ display:inline-flex; align-items:center; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; padding:3px 8px; border-radius:6px; border:1px solid var(--border); color:var(--muted); background:var(--bg-2); align-self:flex-start; }
  .state-badge.nueva{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 34%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .state-badge.borrador{ color:var(--warn); border-color:var(--warn-bd); background:var(--warn-bg); }
  .state-badge.suspendida{ color:var(--bad); border-color:var(--bad-bd); background:var(--bad-bg); }

  .radar-filters{ display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center; margin-bottom:14px; padding:12px; background:var(--surface); border:1px solid var(--border); border-radius:12px; backdrop-filter:blur(14px) saturate(140%); }
  .radar-filters input[type="search"]{ flex:1 1 220px; min-width:160px; padding:9px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg-2); color:var(--ink); font:500 13px "IBM Plex Sans"; }
  .radar-filters select{ padding:9px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-2); color:var(--ink); font:500 12.5px "IBM Plex Sans"; }
  .radar-filters select option{ background:var(--bg-2); color:var(--ink); }
  .radar-filters .filter-toggle{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--muted); white-space:nowrap; cursor:pointer; }
  .radar-filters .filter-toggle input{ width:16px; height:16px; accent-color:var(--accent); }
  .radar-filters input:focus, .radar-filters select:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .radar-filters-close, .radar-filters-toggle{ display:none; }
  .radar-result-count{ font-size:12px; color:var(--muted); margin:-4px 0 12px; }
  .radar-empty{ text-align:center; padding:40px 20px; color:var(--muted); border:1px dashed var(--border); border-radius:14px; font-size:13.5px; }
  .radar-empty .btn{ margin-top:14px; }
  .radar-filters-backdrop{ display:none; }

  @media (max-width:768px){
    .radar-filters-toggle{ display:inline-flex; align-items:center; gap:6px; margin-bottom:12px; font:600 12.5px "IBM Plex Sans"; color:var(--accent); background:var(--surface); border:1px solid var(--border); padding:9px 14px; border-radius:9px; cursor:pointer; }
    .radar-filters{ display:none; }
    .radar-filters.sheet-open{
      display:flex; position:fixed; left:0; right:0; bottom:0; z-index:60;
      background:var(--surface-solid); border-radius:16px 16px 0 0; box-shadow:var(--shadow);
      padding:16px 16px 20px; flex-direction:column; align-items:stretch; max-height:75vh; overflow-y:auto;
    }
    .radar-filters.sheet-open input[type="search"], .radar-filters.sheet-open select{ width:100%; }
    .radar-filters-close{ display:block; align-self:flex-end; font:600 12px "IBM Plex Sans"; color:var(--muted); background:none; border:0; cursor:pointer; padding:4px; }
    .radar-filters-backdrop.open{ display:block; position:fixed; inset:0; background:rgba(2,8,18,.55); z-index:55; }
  }

  /* ---- postulaciones ---- */
  .post-list{ display:flex; flex-direction:column; gap:10px; }
  .post-item{
    background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:15px 17px;
    display:flex; align-items:center; gap:14px; flex-wrap:wrap; box-shadow:var(--shadow);
  }
  .post-info{ flex:1; min-width:220px; }
  .post-title{ font-weight:600; font-size:14px; }
  .post-org{ color:var(--muted); font-size:12px; margin-top:2px; }
  .post-badge{ font:700 11px "IBM Plex Mono"; padding:4px 9px; border-radius:7px; white-space:nowrap; }
  .post-badge.draft{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .post-badge.sent{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .section-label{ font-size:11px; text-transform:uppercase; letter-spacing:.07em; color:var(--muted); font-weight:700; margin:22px 0 10px; }
  .section-label:first-child{ margin-top:0; }

  /* ---- ficha / score ---- */
  .ficha-head{ display:flex; flex-wrap:wrap; gap:16px; justify-content:space-between; align-items:flex-start; }
  .ficha-id{ font:500 12px "IBM Plex Mono"; color:var(--muted); }
  .ficha-title{ font-size:18px; font-weight:700; margin-top:4px; max-width:52ch; }
  .ficha-org{ color:var(--muted); font-size:13px; margin-top:3px; }
  .ficha-stats{ display:flex; gap:20px; flex-wrap:wrap; }
  .stat{ text-align:right; }
  .stat-label{ font-size:10.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); }
  .stat-value{ font:600 16px "IBM Plex Mono"; margin-top:2px; }
  .stat-value.warn{ color:var(--warn); }

  .score-row{ display:grid; grid-template-columns:150px 1fr 40px; align-items:center; gap:10px; font-size:13px; margin-bottom:11px; }
  .score-row:last-child{ margin-bottom:2px; }
  .score-name{ color:var(--muted); }
  .score-num{ text-align:right; font:600 13px "IBM Plex Mono"; }
  .global-score{ display:flex; align-items:baseline; gap:8px; margin-top:14px; padding-top:14px; border-top:1px dashed var(--border); }
  .global-score b{ font:800 26px "Manrope"; color:var(--accent); }
  .global-score span{ color:var(--muted); font-size:12px; }

  .sim-direct-input-row{
    background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
    padding:12px 14px; margin-bottom:14px; display:flex; flex-direction:column; gap:6px;
  }
  .sim-direct-input-wrap{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
  }
  .sim-direct-input-wrap input{
    padding:9px 12px; border-radius:8px; border:1px solid var(--border-strong);
    background:var(--surface); color:var(--ink); font:600 14px "IBM Plex Mono"; width:180px;
    min-height:44px;
  }
  .sim-direct-input-wrap input:focus{ outline:2px solid var(--accent); }

  /* ---- semáforo ---- */
  .semaforo-banner{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px;
    font-weight:600; font-size:13px; margin-bottom:14px; transition:all .2s ease;
  }
  .semaforo-banner.bad{ background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--bad); }
  .semaforo-banner.ok{ background:var(--good-bg); border:1px solid var(--good-bd); color:var(--good); }
  .semaforo-banner .dot{ width:9px; height:9px; border-radius:50%; background:currentColor; flex:none; }

  .check{ display:flex; gap:10px; align-items:flex-start; padding:10px 0; border-top:1px solid var(--border); }
  .check:first-of-type{ border-top:0; padding-top:2px; }
  .check-icon{ width:20px; height:20px; border-radius:6px; display:flex; align-items:center; justify-content:center; font-size:12px; flex:none; margin-top:1px; transition:all .2s ease; }
  .check-icon.ok{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .check-icon.warn{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .check-icon.bad{ background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd); }
  .check-text b{ display:block; font-size:13px; font-weight:600; }
  .check-text span{ font-size:12px; color:var(--muted); }
  .check-fix{ margin-left:auto; }
  .semaforo-counter{ font-size:12px; color:var(--muted); margin:-4px 0 2px; }

  /* ---- oferta / semáforo cruzado (F-13) ---- */
  .oferta-cintillo{
    display:flex; flex-wrap:wrap; gap:6px 16px; font-size:12px; color:var(--muted);
    background:var(--surface); border:1px solid var(--border); border-radius:10px;
    padding:9px 14px; margin-bottom:12px; font-family:"IBM Plex Mono";
  }
  .oferta-cintillo b{ color:var(--ink); font-weight:600; }
  .oferta-tabs{ display:none; }
  .anexo-id-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px 20px; }
  .anexo-id-grid > div > div{ font-size:13.5px; font-weight:500; margin-top:2px; }
  .anexo-textarea{
    width:100%; min-height:120px; padding:11px 12px; border-radius:9px; border:1px solid var(--border);
    background:var(--bg-2); color:var(--ink); font:400 13px/1.5 "IBM Plex Sans"; resize:vertical;
  }
  .anexo-textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .tab-badge{ font:700 10.5px "IBM Plex Mono"; padding:1px 6px; border-radius:6px; margin-left:5px; }
  .tab-badge.bad{ background:var(--bad-bg); color:var(--bad); }
  .tab-badge.ok{ background:var(--good-bg); color:var(--good); }

  .boveda-mobile-nav{ display:none; }
  .catb-dropzone{
    min-height:56px; width:100%; display:flex; align-items:center; justify-content:center;
    gap:12px; padding:12px 16px; background:var(--bg-2); border:2px dashed var(--border-strong);
    border-radius:10px; cursor:pointer; color:var(--ink); text-align:left;
    font:500 13px "IBM Plex Sans"; transition:border-color .2s, background .2s; margin-top:8px;
  }
  .catb-dropzone:hover, .catb-dropzone:focus-visible{
    border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-2));
  }
  .catb-dropzone .ico{ font-size:22px; flex:none; }
  .check-critico-box{ flex-direction:column; align-items:stretch; }
  .catb-uploader-row{ width:100%; }

  @media (max-width:768px){
    /* Bóveda: tabs dedicados en mobile */
    .boveda-mobile-nav{
      display:flex; gap:6px; margin-bottom:12px; overflow-x:auto; padding-bottom:4px;
      -webkit-overflow-scrolling:touch;
    }
    .boveda-mobile-tab{
      flex:1; min-height:48px; padding:8px 12px; border-radius:9px; border:1px solid var(--border);
      background:var(--surface); color:var(--muted); font:600 12px "IBM Plex Sans";
      cursor:pointer; white-space:nowrap; text-align:center;
    }
    .boveda-mobile-tab.active{
      color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent);
      background:color-mix(in srgb, var(--accent) 12%, transparent);
    }
    [data-screen="boveda"] .boveda-sec{ display:none; }
    [data-screen="boveda"] .boveda-sec.active{ display:block; }

    /* Ficha: matriz en tarjetas apiladas dedicadas */
    [data-screen="ficha"] .score-row{
      display:grid;
      grid-template-areas:
        "name num"
        "bar bar";
      grid-template-columns:1fr auto;
      gap:6px;
      background:var(--bg-2); border:1px solid var(--border); border-radius:10px;
      padding:11px 13px; margin-bottom:9px;
    }
    [data-screen="ficha"] .score-row .score-name{ grid-area:name; color:var(--ink); font-weight:600; font-size:13px; }
    [data-screen="ficha"] .score-row .score-num{ grid-area:num; font:700 13px "IBM Plex Mono"; color:var(--accent); }
    [data-screen="ficha"] .score-row .bar{ grid-area:bar; width:100%; height:8px; margin:2px 0 0; }

    /* Oferta */
    .oferta-tabs{ display:flex; gap:8px; margin-bottom:12px; }
    .oferta-tab{
      flex:1; font:600 13px "IBM Plex Sans"; padding:10px; border-radius:9px; border:1px solid var(--border);
      background:var(--surface); color:var(--muted); cursor:pointer; min-height:48px;
    }
    .oferta-tab.active{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
    [data-screen="oferta"] .cols{ display:block; }
    [data-screen="oferta"] .oferta-panel{ display:none; }
    [data-screen="oferta"] .oferta-panel.active{ display:block; }
    .anexo-id-grid{ grid-template-columns:1fr; }
  }

  table.oferta{ width:100%; border-collapse:collapse; font-size:13px; }
  table.oferta th{ text-align:left; color:var(--muted); font-weight:600; font-size:11px; text-transform:uppercase; letter-spacing:.05em; padding-bottom:8px; border-bottom:1px solid var(--border); }
  table.oferta td{ padding:9px 0; border-bottom:1px solid var(--border); }
  table.oferta td:last-child, table.oferta th:last-child{ text-align:right; font-family:"IBM Plex Mono"; }
  table.oferta tr:last-child td{ border-bottom:0; }
  .oferta-total td{ font-weight:700; padding-top:12px; color:var(--accent); }
  .table-scroll{ overflow-x:auto; }

  .ia-note{
    display:flex; gap:9px; background:color-mix(in srgb, var(--accent) 9%, transparent);
    border:1px solid var(--border-strong); border-radius:11px;
    padding:11px 13px; font-size:12.5px; color:var(--ink); margin-top:14px; line-height:1.5;
  }
  .ia-note b{ color:var(--accent); }

  /* ---- modal ---- */
  .modal-overlay{
    position:fixed; inset:0; background:rgba(2,8,18,.6); backdrop-filter:blur(2px);
    display:none; align-items:center; justify-content:center; z-index:50; padding:20px;
  }
  .modal-overlay.open{ display:flex; }
  .modal-box{
    max-width:440px; width:100%; background:var(--surface-solid); border:1px solid var(--warn-bd);
    border-radius:14px; padding:22px; box-shadow:var(--shadow);
  }
  .modal-box h3{ font-size:16px; display:flex; align-items:center; gap:8px; color:var(--warn); }
  .modal-box p{ font-size:13px; color:var(--muted); line-height:1.55; margin:10px 0 0; }
  .modal-actions{ display:flex; gap:10px; margin-top:18px; flex-wrap:wrap; }

  .warn-banner{
    display:flex; align-items:center; gap:10px; padding:11px 14px; border-radius:11px;
    background:var(--warn-bg); border:1px solid var(--warn-bd); color:var(--warn);
    font-weight:600; font-size:13px; margin-bottom:14px;
  }

  /* ---- descarga ---- */
  .zip-download-row{
    display:flex; justify-content:space-between; align-items:center; gap:14px; flex-wrap:wrap;
    padding:13px 16px; background:var(--bg-2); border:1px solid var(--border); border-radius:11px; margin:12px 0;
  }
  .zip-filename{ font:600 13px "IBM Plex Mono"; word-break:break-all; }
  .zip-list{ display:flex; flex-direction:column; gap:8px; margin:14px 0; }
  .zip-item{ display:flex; align-items:center; gap:10px; padding:10px 12px; border:1px solid var(--border); border-radius:9px; background:var(--bg-2); font-size:13px; flex-wrap:wrap; }
  .zip-item .ico{ color:var(--accent); }
  .zip-item .zip-name{ flex:1 1 160px; min-width:140px; }
  .zip-item .zip-hash{ font:500 11px "IBM Plex Mono"; color:var(--muted); }
  .guide-box{
    background:var(--bg-2); border:1px dashed var(--border-strong); border-radius:11px; padding:14px 16px; margin-top:14px;
  }
  .guide-header-btn{
    width:100%; display:flex; justify-content:space-between; align-items:center;
    background:none; border:0; padding:0 0 8px; cursor:pointer; color:inherit;
    min-height:44px; text-align:left;
  }
  .guide-acc-arrow{ font-size:16px; color:var(--muted); transition:transform .2s ease; }
  .guide-header-btn[aria-expanded="false"] .guide-acc-arrow{ transform:rotate(-90deg); }
  .guide-content{ transition:all .2s ease; }
  .guide-content.collapsed{ display:none; }

  .guide-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; font-size:13px; padding:6px 0; border-top:1px solid var(--border); }
  .guide-row:first-child{ border-top:0; }
  .guide-row b{ font-family:"IBM Plex Mono"; }
  .copy-btn{ font:600 11px "IBM Plex Sans"; background:var(--surface-solid); border:1px solid var(--border); color:var(--accent); padding:4px 9px; border-radius:7px; cursor:pointer; flex:none; }

  .mobile-sticky-bar{ display:none; }

  @media (max-width:768px){
    .guide-box{ padding:12px; }
    .guide-row{ flex-wrap:wrap; min-height:48px; }
    .guide-row .copy-btn{ min-height:40px; padding:0 12px; }
    .mobile-sticky-bar{
      display:flex; position:fixed; bottom:56px; left:0; right:0; z-index:42;
      background:var(--surface-solid); border-top:1px solid var(--border);
      padding:10px 16px; align-items:center; justify-content:space-between; gap:12px;
      box-shadow:0 -4px 16px rgba(0,0,0,.25);
    }
    .mobile-sticky-bar .btn{ min-height:48px; padding:0 16px; flex:none; }
    .sticky-info{ min-width:0; }
    [data-screen="descarga"]{ padding-bottom:70px; }
  }

  /* ---- BI ---- */
  .bi-toolbar{ display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:10px; margin-bottom:14px; }
  .bi-toolbar select{ padding:8px 10px; border-radius:8px; border:1px solid var(--border); background:var(--bg-2); color:var(--ink); font:500 12.5px "IBM Plex Sans"; }
  .bi-sync{ font-size:11.5px; color:var(--muted); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
  .kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(170px,1fr)); gap:13px; margin-bottom:16px; }
  .kpi{ background:var(--surface); border:1px solid var(--border); border-radius:13px; padding:15px 17px; box-shadow:var(--shadow); backdrop-filter:blur(14px) saturate(140%); }
  .kpi-label{ font-size:11.5px; color:var(--muted); }
  .kpi-value{ font:800 25px "Manrope"; margin-top:6px; color:var(--ink); }
  .kpi-delta{ font-size:11.5px; margin-top:4px; font-weight:600; color:var(--muted); }
  .kpi-delta.up{ color:var(--good); }

  .diag-card{ border-top:1px solid var(--border); padding-top:12px; margin-top:12px; }
  .diag-card:first-of-type{ border-top:0; margin-top:0; padding-top:0; }
  .diag-head{ display:flex; justify-content:space-between; gap:10px; font-size:13px; font-weight:600; flex-wrap:wrap; }
  .diag-result{ font-family:"IBM Plex Mono"; font-size:11px; padding:2px 8px; border-radius:6px; white-space:nowrap; }
  .diag-win{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .diag-lose{ background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd); }
  .diag-pending{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .diag-desert{ background:var(--bg-2); color:var(--muted); border:1px solid var(--border); }
  .diag-text{ color:var(--muted); font-size:12px; margin-top:5px; line-height:1.5; }

  table.diag-compare{ width:100%; border-collapse:collapse; margin-top:9px; font-size:12px; }
  table.diag-compare caption{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin-bottom:5px; }
  table.diag-compare th, table.diag-compare td{ padding:4px 6px; text-align:right; font-variant-numeric:tabular-nums; }
  table.diag-compare thead th{ color:var(--muted); font-size:10.5px; text-transform:uppercase; font-weight:600; }
  table.diag-compare thead th:first-child, table.diag-compare tbody th{ text-align:left; }
  table.diag-compare tbody th{ color:var(--muted); font-weight:500; }
  table.diag-compare tbody tr{ border-top:1px solid var(--border); }

  @media (max-width:768px){
    .kpi-grid{ grid-template-columns:1fr 1fr; }
    table.diag-compare, table.diag-compare thead, table.diag-compare tbody, table.diag-compare tr{ display:block; }
    table.diag-compare thead{ display:none; }
    table.diag-compare tr{ display:flex; justify-content:space-between; padding:4px 0; }
    table.diag-compare td{ text-align:right; }
  }

  /* ---- configuración (stub F-10) ---- */
  /* ---- configuración (F-10) ---- */
  .config-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
  .config-tab{
    font:600 12.5px "IBM Plex Sans"; padding:10px 14px; border-radius:9px; border:1px solid var(--border);
    background:var(--surface); color:var(--muted); cursor:pointer; min-height:44px; display:inline-flex; align-items:center;
  }
  .config-tab:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
  .config-tab.active{ color:var(--accent); border-color:color-mix(in srgb, var(--accent) 40%, transparent); background:color-mix(in srgb, var(--accent) 12%, transparent); }
  .config-panel{ display:none; }
  .config-panel.active{ display:block; }
  .cfg-field{ display:flex; flex-direction:column; gap:4px; }
  .cfg-field label{ font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; }
  .cfg-input{
    width:100%; margin-top:4px; padding:10px 12px; border-radius:8px; border:1px solid var(--border);
    background:var(--bg-2); color:var(--ink); font:500 13.5px "IBM Plex Sans"; min-height:44px;
  }
  .cfg-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .cfg-input:disabled{ opacity:.6; cursor:not-allowed; }
  .role-badge{ font:600 10.5px "IBM Plex Mono"; padding:2px 8px; border-radius:6px; white-space:nowrap; }
  .role-badge.dueno{ background:color-mix(in srgb, var(--accent) 14%, transparent); color:var(--accent); border:1px solid color-mix(in srgb, var(--accent) 34%, transparent); }
  .role-badge.admin{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .role-badge.editor{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .role-badge.lectura{ background:var(--bg-2); color:var(--muted); border:1px solid var(--border); }
  .notif-channel-row, .notif-filter-row{ display:flex; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:13px; min-height:44px; cursor:pointer; }
  .notif-channel-row:first-child, .notif-filter-row:first-child{ border-top:0; }
  .notif-channel-row input, .notif-filter-row input{ width:18px; height:18px; accent-color:var(--accent); cursor:pointer; }
  .plan-status-row{ display:flex; justify-content:space-between; align-items:baseline; flex-wrap:wrap; gap:8px; padding:8px 0; border-top:1px solid var(--border); font-size:13px; }
  .plan-status-row:first-child{ border-top:0; }
  .invoice-row{ display:flex; justify-content:space-between; align-items:center; gap:10px; padding:9px 0; border-top:1px solid var(--border); font-size:12.5px; min-height:44px; }
  .invoice-row:first-child{ border-top:0; }

  @media (max-width:768px){
    .config-tabs{ overflow-x:auto; flex-wrap:nowrap; padding-bottom:4px; -webkit-overflow-scrolling:touch; }
    .config-tab{ white-space:nowrap; min-height:48px; }
    .btn{ min-height:48px; }
    .btn-link{ min-height:44px; display:inline-flex; align-items:center; }
    .filter-toggle{ min-height:48px; }
    .login-wrap .btn{ min-height:48px; }
    #sendComprobanteBtn, #landingCtaBtn{ min-height:48px; }
  }

  footer{ text-align:center; color:var(--muted); font-size:11px; margin-top:34px; padding-top:16px; border-top:1px solid var(--border); }

  /* ============================================================
     MOBILE — bottom tab bar + drawer, sidebar oculto
     ============================================================ */
  .bottom-tabs{ display:none; }
  .drawer-overlay{ display:none; }
  .drawer{ display:none; }
  @media (max-width:768px){
    .sidebar{ display:none; }
    .collapse-toggle{ display:none; }
    .main-inner{ padding:0 16px 90px; }
    .topbar{ padding:14px 16px; }
    .topbar .restart-btn{ display:none; } /* duplicado en el drawer "Más" — evita overflow horizontal en <768px */
    .crumb{ font-size:11.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:38vw; }
    #appShell.active{ padding-bottom:0; }

    .bottom-tabs{
      display:flex; position:fixed; bottom:0; left:0; right:0; z-index:40;
      background:var(--surface-solid); border-top:1px solid var(--border);
      padding:6px 4px calc(6px + env(safe-area-inset-bottom));
    }
    .tab-item{
      flex:1; display:flex; flex-direction:column; align-items:center; gap:2px;
      background:none; border:0; color:var(--muted); font-size:10px; font-weight:600; padding:6px 2px;
      min-height:48px; cursor:pointer; border-radius:9px;
    }
    .tab-item .ico{ font-size:17px; }
    .tab-item.active{ color:var(--accent); }

    .drawer-overlay{ position:fixed; inset:0; background:rgba(2,8,18,.55); z-index:45; display:none; }
    .drawer-overlay.open{ display:block; }
    .drawer{
      display:block; position:fixed; right:0; top:0; bottom:0; width:min(80vw,320px); background:var(--surface-solid);
      border-left:1px solid var(--border); z-index:46; padding:18px; transform:translateX(100%);
      transition:transform .2s ease; overflow-y:auto;
    }
    .drawer.open{ transform:translateX(0); }
    .drawer h3{ font-size:15px; margin-bottom:14px; }
    .drawer .nav-item{ color:var(--ink); }
  }

  /* ============================================================
     LANDING PÚBLICA (F-16 / Pantalla 8)
     ============================================================ */
  #landingScreen{ min-height:100vh; background:var(--bg); }
  .landing-shell{ max-width:1080px; margin:0 auto; padding:0 20px 60px; }
  .landing-nav{ display:flex; align-items:center; justify-content:space-between; padding:16px 0; }
  .landing-nav .brand-mark{ height:26px; }
  .landing-hero{ padding:20px 0 28px; display:grid; grid-template-columns:1.1fr .9fr; gap:32px; align-items:center; }
  @media (max-width:820px){ .landing-hero{ grid-template-columns:1fr; padding-top:12px; } }
  .landing-hero h1{ font-size:clamp(24px,3.6vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.15; }
  .landing-hero h1 .hl{ background:linear-gradient(135deg, var(--accent), var(--accent-2)); -webkit-background-clip:text; background-clip:text; color:transparent; }
  .landing-hero p{ color:var(--muted); font-size:14.5px; margin-top:12px; max-width:52ch; line-height:1.55; }
  .landing-hero-visual{
    background:linear-gradient(165deg, color-mix(in srgb, var(--accent) 9%, var(--surface)), var(--surface));
    border:1px solid var(--border-strong); border-radius:16px; padding:20px 20px 18px;
    box-shadow:var(--shadow); backdrop-filter:blur(14px) saturate(140%);
  }
  .hero-power-title{
    font-size:11.5px; font-weight:700; color:var(--accent); margin:0 0 14px;
    text-transform:uppercase; letter-spacing:.07em;
  }

  .power-checklist{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:16px; }
  .power-checklist li{ display:flex; gap:13px; align-items:flex-start; }
  .power-checklist b{ display:block; font-size:13.5px; color:var(--ink); margin-bottom:2px; }
  .power-checklist span{ display:block; font-size:11.5px; color:var(--muted); line-height:1.45; }
  .check-dot{
    flex:none; display:flex; align-items:center; justify-content:center;
    color:var(--accent); margin-top:2px;
  }
  .check-dot svg{ width:26px; height:26px; display:block; }


  .landing-section{ padding:24px 0; border-top:1px solid var(--border); }
  .landing-section h2{ font-size:20px; font-weight:800; margin-bottom:5px; }
  .landing-section .view-sub{ margin-bottom:16px; }

  .steps-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; position:relative; }
  .steps-grid::before{
    content:""; position:absolute; top:34px; left:calc(12.5% + 27px); right:calc(12.5% + 27px);
    height:2px; background:linear-gradient(90deg, var(--accent), var(--accent-2));
    opacity:.35; z-index:0;
  }
  @media (max-width:820px){
    .steps-grid{ grid-template-columns:1fr 1fr; gap:16px 14px; }
    .steps-grid::before{ display:none; }
  }
  @media (max-width:480px){ .steps-grid{ grid-template-columns:1fr; } }
  .step-card{
    position:relative; z-index:1; background:var(--surface); border:1px solid var(--border);
    border-radius:14px; padding:20px 16px; margin:0 6px;
  }
  .step-icon{
    width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center;
    color:var(--accent); background:color-mix(in srgb, var(--accent) 14%, var(--surface));
    border:1px solid var(--border-strong); margin-bottom:12px;
  }
  .step-icon svg{ width:21px; height:21px; }
  .step-card .n{ font:800 11px "IBM Plex Mono"; color:var(--accent); text-transform:uppercase; letter-spacing:.08em; }
  .step-card h4{ font-size:14.5px; margin:6px 0 6px; }
  .step-card p{ font-size:12.5px; color:var(--muted); line-height:1.55; }

  .plans-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
  @media (max-width:820px){ .plans-grid{ grid-template-columns:1fr; } }
  .plan-card{ background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:20px; box-shadow:var(--shadow); position:relative; }
  .plan-card.rec{ border-color:var(--border-strong); box-shadow:0 0 0 1px var(--accent) inset, var(--shadow); }
  .plan-rec-badge{ position:absolute; top:-11px; right:16px; font:700 10px "IBM Plex Sans"; background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:var(--accent-ink); padding:3px 10px; border-radius:999px; }
  .plan-name{ font:700 14px "Manrope"; }
  .plan-price{ font:800 26px "Manrope"; margin-top:8px; }
  .plan-price span{ font:500 12px "IBM Plex Sans"; color:var(--muted); }
  .plan-feat{ list-style:none; padding:0; margin:14px 0 0; display:flex; flex-direction:column; gap:8px; font-size:12.5px; color:var(--muted); }
  .plan-feat li{ display:flex; gap:7px; align-items:flex-start; }
  .plan-feat li b{ color:var(--ink); font-weight:600; }

  /* ============================================================
     CONTRATACIÓN / GATE DE PAGO (F-16)
     ============================================================ */
  #gateScreen{ min-height:100vh; background:var(--bg); padding:20px; }
  .gate-shell{ max-width:640px; margin:0 auto; padding-top:20px; }
  .plan-pick{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:14px; }
  @media (max-width:600px){ .plan-pick{ grid-template-columns:1fr; } }
  .plan-pick label{ cursor:pointer; }
  .plan-pick input{ position:absolute; opacity:0; }
  .plan-opt{ border:1px solid var(--border); border-radius:12px; padding:13px; background:var(--bg-2); transition:all .15s ease; }
  .plan-pick input:checked + .plan-opt{ border-color:var(--accent); background:color-mix(in srgb, var(--accent) 10%, var(--bg-2)); box-shadow:0 0 0 1px var(--accent) inset; }
  .plan-opt .pname{ font:700 12.5px "IBM Plex Sans"; }
  .plan-opt .pprice{ font:800 16px "Manrope"; margin-top:4px; }
  .plan-opt .pprice span{ font:500 10.5px "IBM Plex Sans"; color:var(--muted); }

  .bank-card{ background:var(--bg-2); border:1px dashed var(--border-strong); border-radius:12px; padding:14px 16px; margin-top:16px; }
  .bank-row{ display:flex; justify-content:space-between; font-size:13px; padding:6px 0; border-top:1px solid var(--border); }
  .bank-row:first-child{ border-top:0; }
  .bank-row b{ font-family:"IBM Plex Mono"; }

  .uploader{
    border:2px dashed var(--border-strong); border-radius:12px; padding:24px 16px; text-align:center;
    margin-top:16px; cursor:pointer; background:var(--bg-2);
  }
  .uploader.has-file{ border-color:var(--good-bd); background:var(--good-bg); }
  .uploader .ico{ font-size:24px; }
  .uploader p{ font-size:12.5px; color:var(--muted); margin-top:6px; }

  .pending-badge{ display:inline-flex; align-items:center; gap:7px; font:700 12px "IBM Plex Sans"; padding:6px 12px; border-radius:999px; background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .sla-box{ background:var(--bg-2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-top:16px; font-size:12.5px; color:var(--muted); line-height:1.6; }

  /* ============================================================
     BÓVEDA DOCUMENTAL — slots reales (F-06)
     ============================================================ */
  .doc-slots{ display:flex; flex-direction:column; gap:12px; }
  .doc-slot{ border-top:1px solid var(--border); padding-top:14px; }
  .doc-slot:first-child{ border-top:0; padding-top:0; }
  .doc-slot-head{ display:flex; justify-content:space-between; gap:10px; align-items:flex-start; margin-bottom:9px; }
  .doc-slot-name{ font:600 13.5px "IBM Plex Sans"; }
  .doc-slot-help{ font-size:11.5px; color:var(--muted); margin-top:2px; max-width:52ch; }
  .doc-status{ font:700 10.5px "IBM Plex Sans"; padding:3px 9px; border-radius:7px; white-space:nowrap; flex:none; }
  .doc-status.ok{ background:var(--good-bg); color:var(--good); border:1px solid var(--good-bd); }
  .doc-status.warn{ background:var(--warn-bg); color:var(--warn); border:1px solid var(--warn-bd); }
  .doc-status.bad{ background:var(--bad-bg); color:var(--bad); border:1px solid var(--bad-bd); }
  .doc-status.pending{ background:var(--bg-2); color:var(--muted); border:1px solid var(--border); }
  .dropzone{
    width:100%; border:2px dashed var(--border-strong); border-radius:11px; background:var(--bg-2);
    padding:14px; text-align:center; font-size:12.5px; color:var(--muted); cursor:pointer;
  }
  .dropzone:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }
  .doc-slot.loaded .dropzone{ display:none; }
  .doc-error{ background:var(--bad-bg); border:1px solid var(--bad-bd); color:var(--bad); border-radius:10px; padding:10px 12px; font-size:12px; margin-top:8px; line-height:1.5; }
  .doc-error a, .doc-error button.inline-link{ background:none; border:0; padding:0; color:var(--bad); font-weight:700; text-decoration:underline; cursor:pointer; font-size:12px; }

  .chip-x{ background:none; border:0; color:inherit; cursor:pointer; font-size:13px; padding:0 0 0 4px; }

  .region-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; max-height:220px; overflow-y:auto; padding-right:4px; }
  .region-item{ display:flex; align-items:center; gap:7px; font-size:12px; padding:5px 2px; }
  .region-item input{ accent-color:var(--accent); width:15px; height:15px; flex:none; }
  .region-item label{ cursor:pointer; }