/* ============================================================
   APP.CSS — Hoja de estilos única de la Plataforma BCS
   ------------------------------------------------------------
   ORIGEN : extraído de frontend/index.html (bloques <style>
            originales líneas 9-631 y 1586-1685)
   USO   : <link rel="stylesheet" href="css/app.css"> en <head>
   ESTÁNDAR: comentado por secciones, orden semántico (KISS)
   ------------------------------------------------------------
   ÍNDICE DE SECCIONES:
     1.  TOKENS / TEMA        : variables :root + tema claro/oscuro
     2.  BASE / RESET         : estilos globales, tipografía, scrollbar
     3.  LOGO / MARCA         : imagen de logo
     4.  DECORACIÓN FONDO     : orbs, deco backdrop
     5.  CONTROLES COMPARTIDOS: botones, inputs, pills, badges
     6.  ORGANISMO TOPBAR     : header superior (brand, pill, CTA)
     7.  VISTAS APLICACIÓN    : layout de vistas, footer pegado
     8.  ORGANISMO LANDING    : hero, sección índigo
     9.  MOLÉCULA AUTH CARD   : login/registro
     10. ENCABEZADOS SECCIÓN  : phead, eyebrow, h2
     11. BUILDERS (admin)     : estados, horarios, checklist
     12. MOLÉCULA PHASE TRACKER: progreso por fases
     13. EXPEDIENTE CLIENTE   : exp-grid, doc sheet, task steps
     14. ORGANISMO PANEL ADMIN: shell sidebar/tabs, cards glass
     15. DOCUMENTOS / OFERTAS : orden de servicio, impresión
     16. FLATPICKR OVERRIDES  : tema del datepicker
     17. SWEETALERT2 THEME    : tema de modales
     18. RESPONSIVE           : media queries
   ============================================================ */

/* ============================================================
   SECCIÓN 1-17 : ESTILOS PRINCIPALES (bloque 1 original)
   Incluye tokens, base, topbar, landing, auth, builders,
   expediente, admin, documentos, flatpickr y sweetalert2.
   ============================================================ */
  :root{
    --brand:#3E35A8; --brand-2:#5646c9; --brand-soft:#efeefb; --brand-ghost:rgba(62,53,168,.08);
    --teal:#0ea5e9; --teal-soft:#e0f2fe; --teal-ink:#0369a1; --on-teal:#0c4a6e;
    --indigo-deep:#28206d;
    --p-blue:#cbdef5; --p-peach:#fbe2b2;
    --orange:#f97316; --orange-soft:#ffedd5; --amber:#f59e0b; --amber-soft:#fef3c7; --sky:#38bdf8; --sky-soft:#e0f2fe;
    --paper:#f8fafc; --surface:#ffffff; --surface-2:#f1f5f9;
    --text:#0f172a; --text-soft:#475569; --text-faint:#64748b;
    --line:#e2e8f0; --line-soft:#f1f5f9;
    --ok:#10b981; --ok-soft:#d1fae5; --warn:#f59e0b; --warn-soft:#fef3c7; --err:#ef4444; --err-soft:#fee2e2; --err-ghost:rgba(239,68,68,.08);
    --bg:var(--paper); --fg:var(--text); --fg-soft:var(--text-soft); --fg-faint:var(--text-faint);
    --border:var(--line); --border-soft:var(--line-soft);
    --primary:var(--brand); --primary-2:var(--brand-2); --primary-ghost:var(--brand-ghost); --primary-soft:var(--brand-soft);
    --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05);
    --shadow:0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1);
    --shadow-md:0 4px 14px -2px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg:0 14px 34px -4px rgba(62,53,168,.16), 0 4px 12px -2px rgba(0,0,0,0.05);
    --shadow-brand:0 8px 24px -4px rgba(62,53,168,.24);
    --shadow-glow:0 0 20px rgba(86,70,201,.22);
    --radius-sm:8px; --radius-md:12px; --radius:16px; --radius-lg:20px; --radius-xl:28px; --radius-pill:999px;
    --eyebrow-bg:rgba(62,53,168,.08); --eyebrow-fg:var(--brand);
    --grad-edge-top:#f8fafc; --grad-edge-bottom:#f1f5f9;
    --on-brand:#ffffff;
    --sans:"Poppins",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    --display:"Quicksand",ui-rounded,"Poppins",system-ui,sans-serif;
    --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
    --orb-sky:rgba(56,189,248,.25); --orb-orange:rgba(249,115,22,.20); --orb-indigo:rgba(62,53,168,.20);
  }

  :root[data-theme="light"]{
    --paper:#f8fafc;--surface:#fff;--surface-2:#f1f5f9;--text:#0f172a;--text-soft:#475569;--text-faint:#64748b;
    --line:#e2e8f0;--line-soft:#f1f5f9;--brand:#3E35A8;--brand-2:#5646c9;--brand-soft:#efeefb;--brand-ghost:rgba(62,53,168,.08);
    --teal:#0ea5e9;--teal-soft:#e0f2fe;--teal-ink:#0369a1;--on-teal:#0c4a6e;--on-brand:#fff;
    --radius-sm:8px;--radius-md:12px;--radius:16px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
    --shadow-brand:0 8px 24px -4px rgba(62,53,168,.24);--eyebrow-bg:rgba(62,53,168,.08);--p-blue:#cbdef5;--p-peach:#fbe2b2;
    --err:#ef4444;--err-soft:#fee2e2;--err-ghost:rgba(239,68,68,.08);
    --ok:#10b981;--ok-soft:#d1fae5;--warn:#f59e0b;--warn-soft:#fef3c7;
    --shadow-md:0 4px 14px -2px rgba(0,0,0,0.08), 0 2px 6px -2px rgba(0,0,0,0.04);
    --shadow-lg:0 14px 34px -4px rgba(62,53,168,.16);
  }
  :root[data-theme="dark"]{
    --paper:#0b0f19;--surface:#111827;--surface-2:#1f2937;--text:#f8fafc;--text-soft:#94a3b8;--text-faint:#64748b;
    --line:#1f2937;--line-soft:#111827;--brand:#818cf8;--brand-2:#a5b4fc;--brand-soft:#1e1b4b;--brand-ghost:rgba(129,140,248,.12);
    --teal:#38bdf8;--teal-soft:#082f49;--teal-ink:#7dd3fc;--on-teal:#082f49;--on-brand:#0b0f19;
    --radius-sm:8px;--radius-md:12px;--radius:16px;--radius-lg:20px;--radius-xl:28px;--radius-pill:999px;
    --shadow-brand:0 8px 24px -4px rgba(129,140,248,.25);--eyebrow-bg:rgba(129,140,248,.14);--p-blue:#1e293b;--p-peach:#3b2d18;
    --err:#f87171;--err-soft:#450a0a;--err-ghost:rgba(248,113,113,.12);
    --ok:#34d399;--ok-soft:#064e3b;--warn:#fbbf24;--warn-soft:#451a03;
    --shadow-md:0 6px 18px -2px rgba(0,0,0,0.5);
    --shadow-lg:0 20px 48px -6px rgba(0,0,0,0.7);
  }

  *{box-sizing:border-box}
  html,body{margin:0}
  body{background:var(--bg);color:var(--fg);font-family:var(--sans);line-height:1.55;-webkit-font-smoothing:antialiased;font-size:15.5px}
  h1,h2,h3,h4,.phead h2,.dash-kpi .v,.kpi .v{font-family:var(--display);letter-spacing:-.02em}
  h1,h2,h3,h4{margin:0}
  a{color:var(--brand);text-decoration:none;transition:color .18s ease}
  a:hover{color:var(--brand-2)}

  /* ---- logo ---- */
  .logo{display:inline-flex;align-items:center;gap:15px;color:var(--brand)}
  .logo .e{width:38px;height:38px;flex:0 0 auto}
  .logo .e svg{width:100%;height:100%;display:block}
  .logo .wm{display:flex;align-items:center;gap:9px}
  .logo .bcs{font-size:25px;font-weight:800;letter-spacing:-.03em;color:var(--brand);line-height:1}
  .logo .bar{width:2px;height:26px;background:var(--brand);border-radius:2px;opacity:.85}
  .logo .sub{font-size:10.5px;line-height:1.12;color:var(--brand);font-weight:600;letter-spacing:0}
  .logo.sm .e{width:30px;height:30px}.logo.sm .bcs{font-size:20px}.logo.sm .bar{height:21px}.logo.sm .sub{font-size:9px}
  .logoimg{display:block;height:38px;width:auto}
  .logoimg.sm{height:30px;cursor:pointer}
  .logoimg.lg{height:64px;width:auto;margin:0 auto 34px}
  .logoimg.auth{height:44px;margin:0 auto 22px}
  .logoimg.sheetlogo{height:40px}
  :root[data-theme="dark"] .logoimg{filter:none}
  #brandImg,.logoimg.auth,.logoimg.lg{transition:content 200ms}
  :root[data-theme="dark"] #brandImg,
  :root[data-theme="dark"] .logoimg.auth,
  :root[data-theme="dark"] .logoimg.lg{content:url("/assets/logo-bcs-blanco.png")}
  :root[data-theme="dark"] .logoimg.sheetlogo{filter:none}
  :root[data-theme="light"] .logoimg{filter:none}

  /* ---- card container con elevación sutil ---- */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 24px;box-shadow:var(--shadow-sm);transition:box-shadow .2s ease,border-color .2s ease}
  .card:hover{box-shadow:var(--shadow-md)}

  /* ---- deco backdrop ---- */
  .deco{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none}
  .deco svg{position:absolute;inset:0;width:100%;height:100%}
  .deco .orb{display:none}

  /* ---- shared controls (Botones Contemporáneos) ---- */
  .btn{font-family:inherit;font-size:13.5px;font-weight:600;border-radius:var(--radius-pill);padding:9px 18px;cursor:pointer;border:1px solid transparent;transition:all .18s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;gap:7px;justify-content:center;text-decoration:none;user-select:none}
  .btn svg{width:15px;height:15px;flex:0 0 auto}
  .btn.pri{background:linear-gradient(135deg,var(--brand),var(--brand-2));color:var(--on-brand);box-shadow:0 4px 12px -2px rgba(62,53,168,.35)}
  .btn.pri:hover{transform:translateY(-1.5px);box-shadow:0 8px 20px -3px rgba(62,53,168,.45);filter:brightness(1.04)}
  .btn.pri:active{transform:translateY(0.5px) scale(.99);box-shadow:0 2px 6px rgba(62,53,168,.25)}
  .btn.ghost{background:var(--surface);border-color:var(--border);color:var(--fg-soft);box-shadow:var(--shadow-sm)}
  .btn.ghost:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);transform:translateY(-1px)}
  .btn.ghost:active{transform:translateY(0.5px)}
  .btn.ghost:disabled{opacity:.4;cursor:not-allowed;transform:none}
  .btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
  .btn.teal{background:var(--teal);color:#ffffff;box-shadow:0 4px 12px -2px rgba(14,165,233,.35)}
  .btn.teal:hover{transform:translateY(-1.5px);filter:brightness(1.05)}
  .btn.sm{padding:6px 12px;font-size:12px}
  .btn.danger{background:var(--err-soft);color:var(--err);border-color:transparent}
  .btn.danger:hover{background:var(--err);color:#ffffff;border-color:transparent;box-shadow:0 4px 12px rgba(239,68,68,.3)}

  .field{display:flex;flex-direction:column;gap:6px;min-width:0}
  .field label{font-size:12.5px;font-weight:600;color:var(--fg-soft);display:flex;align-items:center;gap:5px}
  .req{color:var(--brand)}
  .hint{font-size:11.5px;color:var(--fg-faint);font-weight:400}
  input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],textarea,select{
    font-family:inherit;font-size:14px;color:var(--fg);background:var(--surface-2);border:1px solid var(--border);
    border-radius:var(--radius-md);padding:10px 13px;width:100%;transition:all .18s cubic-bezier(.16,1,.3,1)}
  input[data-mono]{font-family:var(--mono)}
  textarea{resize:vertical;min-height:70px}
  input:focus,textarea:focus,select:focus{outline:none;border-color:var(--brand);background:var(--surface);box-shadow:0 0 0 3.5px var(--brand-ghost)}
  input::placeholder,textarea::placeholder{color:var(--fg-faint)}
  .field.bad input,.field.bad textarea,.field.bad select{border-color:var(--err);box-shadow:0 0 0 3.5px var(--err-ghost)}
  .err-msg{font-size:11.5px;color:var(--err);display:none;align-items:center;gap:4px;font-weight:500}
  .field.bad .err-msg{display:flex}

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

  /* ---- topbar ---- */
  .topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;width:100%;padding:0 22px;border-bottom:1px solid var(--line);background:color-mix(in srgb, var(--surface) 92%, transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.topbar-in{display:flex;align-items:center;gap:20px;width:100%;max-width:1080px;margin:0 auto;min-height:80px;padding:12px 0}.topbar .logoimg{height:auto;width:144px;object-fit:contain}.cta-primary{display:inline-flex;align-items:center;justify-content:center;background:var(--brand);color:#fff;font-size:14px;font-weight:700;padding:12px 24px;border-radius:999px;box-shadow:0 10px 15px -3px rgba(62,53,168,.2);transition:transform 150ms cubic-bezier(.4,0,.2,1),background 150ms,filter 150ms}.cta-primary:hover{transform:translateY(-2px);background:#3e35a8e6;color:#fff;text-decoration:none}@media(min-width:640px){.topbar .logoimg{width:176px}}@media(min-width:1024px){.topbar .logoimg{width:192px}}.site-foot{background:#13223c;color:rgba(255,255,255,.7);padding:48px 0;font-family:var(--body)}.foot-shell{max-width:1080px;margin:0 auto;padding:0 22px}.foot-cols{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:start}.foot-brand img{width:160px;height:auto}.foot-brand p{margin-top:20px;max-width:28rem;font-size:14px;line-height:1.6;color:rgba(255,255,255,.6)}.foot-links{display:grid;grid-template-columns:1fr 1fr;gap:32px}.foot-title{font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}.foot-links ul{margin-top:16px;list-style:none;padding:0}.foot-links li+li{margin-top:12px}.foot-links a{font-size:14px;color:rgba(255,255,255,.8);text-decoration:none;transition:color 150ms}.foot-links a:hover{color:#fff}.foot-callout{margin-top:24px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.06);border-radius:24px;padding:16px 18px}.foot-callout-label{display:block;font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.5)}.foot-callout-link{display:inline-block;margin-top:6px;font-size:14px;font-weight:600;color:#fff}.foot-callout p{margin-top:6px;font-size:13px;color:rgba(255,255,255,.55)}.foot-legal{margin-top:40px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:14px}.foot-legal p{margin:0}.foot-legal p+p{margin-top:4px;color:rgba(255,255,255,.5)}@media(max-width:768px){.foot-cols{grid-template-columns:1fr;gap:32px}.foot-links{grid-template-columns:1fr;gap:24px}}
  .topbar .sp{flex:1}
  .pill{font-size:11.5px;font-weight:600;padding:5px 12px;border-radius:99px;background:var(--brand-soft);color:var(--brand);display:inline-flex;align-items:center;gap:6px}
  .tbtn{border:1px solid var(--border);background:var(--surface);color:var(--fg-soft);width:38px;height:38px;border-radius:10px;cursor:pointer;display:grid;place-items:center;transition:.16s}
  .tbtn:hover{color:var(--brand);border-color:var(--brand)}
  .tbtn svg{width:18px;height:18px}
  .wrap{position:relative;z-index:2;max-width:1080px;margin:0 auto;padding:8px 22px 90px}
  /* Las vistas de DATOS (panel interno, detalle de cliente, editor de manuales) aprovechan
     más ancho en pantallas grandes; los formularios/lectura siguen en 1080px por legibilidad. */
  #v-admin>.wrap,#v-admin-cli>.wrap,#v-manuales-editor>.wrap{max-width:min(1440px,94vw)}

  .view{display:none;animation:fade .3s ease}
  .view.on{display:block}
  /* Vistas de aplicación: estiran su alto para que el footer quede pegado abajo
     aunque el contenido no llene la pantalla (vistas cortas: panel, mi cuenta, config). */
  #v-admin.on,#v-admin-cli.on{min-height:calc(100vh - 80px)}
  @keyframes fade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
  @media(prefers-reduced-motion:reduce){.view,.view.on{animation:none}}

  /* ---- landing ---- */
  .hero{min-height:calc(100vh - 76px);display:grid;place-items:center;text-align:center;padding:20px}
  .hero-inner{max-width:640px}
  .hero .logo{transform:scale(1.35);margin-bottom:34px}
  .hero h1{font-size:clamp(28px,5vw,42px);font-weight:800;text-wrap:balance;margin-bottom:14px}
  .hero p{color:var(--fg-soft);font-size:16px;max-width:52ch;margin:0 auto 34px}
  .hero-cta{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:36px}
  .btn.lg{padding:14px 34px;font-size:16px;border-radius:var(--radius-pill)}
  .hero-note{color:var(--fg-soft);font-size:13.5px;margin:0;max-width:44ch}
  .hero-feats{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 22px;max-width:600px;margin:0 auto}
  .hf{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--fg-soft)}
  .hf svg{width:19px;height:19px;flex:0 0 auto;color:var(--teal)}
  @media(max-width:540px){.hero-feats{flex-direction:column;align-items:flex-start;text-align:left;max-width:280px}}

  /* ---- auth card ---- */
  .authwrap{min-height:calc(100vh - 76px);display:grid;place-items:center;padding:20px}
  .authcard{width:100%;max-width:440px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg);padding:34px 32px}
  .authcard .logo{display:flex;justify-content:center;margin-bottom:22px}
  .authcard h2{text-align:center;font-size:22px;margin-bottom:6px}
  .authcard .lead{text-align:center;color:var(--fg-soft);font-size:13.5px;margin-bottom:24px}
  .authcard .field{margin-bottom:16px}
  .authcard .btn{width:100%}
  .authback{display:block;text-align:center;margin-top:18px;font-size:13px;color:var(--fg-faint);cursor:pointer}
  .authback:hover{color:var(--brand)}
  .note{font-size:12.5px;border-radius:10px;padding:11px 13px;display:none;align-items:flex-start;gap:8px;margin-bottom:16px}
  .note.on{display:flex}
  .note.err{background:var(--err-ghost);color:var(--err)}
  .note.ok{background:var(--teal-soft);color:var(--teal-ink)}
  .note svg{width:15px;height:15px;flex:0 0 auto;margin-top:1px}

  /* ---- section headings ---- */
  .phead{margin-bottom:18px}
  .phead .eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);background:var(--eyebrow-bg);padding:5px 12px;border-radius:var(--radius-pill);display:inline-block}
  .phead h2{font-size:28px;font-weight:700;margin:6px 0 4px;color:var(--text)}
  .phead p{color:var(--text-soft);font-size:15.5px;margin:0}

  /* estados builder */
  .estado-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .estado-item { display: flex; align-items: center; gap: 6px; }
  .estado-item .qty { width: 66px; padding: 6px 8px; font-size: 13px; font-family: var(--mono); border: 1px solid var(--border); border-radius: 8px; display: none; background: var(--surface); color: var(--fg); text-align: center; }
  .estado-item.on .qty { display: block; }


  /* horarios builder */
  .h-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
  .h-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; background: var(--surface-2); border-radius: 8px; font-size: 13px; }
  .h-item .dias { font-weight: 600; color: var(--brand); }
  .h-item .horas { color: var(--fg-soft); }
  .h-item .del { cursor: pointer; color: var(--err); border: none; background: transparent; padding: 4px; border-radius: 4px; }
  .h-item .del:hover { background: var(--err-ghost); }

  /* ---- phase tracker contemporáneo ---- */
  .phases{display:flex;gap:10px;margin:20px 0;position:relative}
  .ph{flex:1;min-width:0;position:relative}
  .ph .dot{height:7px;border-radius:var(--radius-pill);background:var(--border);transition:all .3s ease;position:relative;overflow:hidden}
  .ph.done .dot{background:var(--ok);box-shadow:0 0 10px rgba(16,185,129,.35)}
  .ph.cur .dot{background:linear-gradient(90deg,var(--brand),var(--brand-2));box-shadow:0 0 12px rgba(99,102,241,.5)}
  .ph.cur .dot::after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.6),transparent);animation:phaseShimmer 2s infinite}
  @keyframes phaseShimmer{0%{left:-100%}100%{left:100%}}
  .ph .t{font-size:11.5px;font-weight:600;color:var(--fg-faint);margin-top:8px;display:flex;gap:6px;align-items:center;transition:color .2s ease}
  .ph.done .t{color:var(--fg)}
  .ph.cur .t{color:var(--brand);font-weight:700}
  .ph .n{font-family:var(--mono);font-size:10px;padding:1px 5px;border-radius:4px;background:var(--surface-2)}
  .ph.cur .n{background:var(--brand-soft);color:var(--brand)}
  .ph.done .n{background:var(--ok-soft);color:var(--ok)}
  @media(max-width:720px){.ph .t .lbl{display:none}}
  .phases.has-par{margin-bottom:32px}
  .phases .par{flex:2;display:flex;gap:10px;position:relative}
  .phases .par::before{content:"";position:absolute;left:4px;right:4px;bottom:-10px;height:8px;border:1.5px solid var(--border);border-top:0;border-radius:0 0 8px 8px}
  .phases .par .parlbl{position:absolute;left:0;right:0;bottom:-26px;text-align:center;font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-faint);font-weight:700}
  
  /* Control segmentado global */
  .seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-2);padding:2px;gap:2px}
  .segbtn{font-family:inherit;font-size:12px;font-weight:600;padding:5px 12px;background:transparent;color:var(--fg-soft);border:0;border-radius:calc(var(--radius-md) - 3px);cursor:pointer;transition:all .16s ease;white-space:nowrap}
  .segbtn:hover{color:var(--fg);background:rgba(0,0,0,0.04)}
  .segbtn.on{background:var(--surface);box-shadow:var(--shadow-sm);color:var(--fg)}
  .segbtn.on.pendiente{color:var(--fg-faint);background:var(--surface-2)}
  .segbtn.on.en_curso{color:var(--brand);background:var(--brand-soft)}
  .segbtn.on.completada,.segbtn.on.conforme{color:var(--ok);background:var(--ok-soft)}
  .segbtn.on.observado,.segbtn.on.observada{color:var(--err);background:rgba(239,68,68,0.12)}

  /* control de estado por fase (admin) */
  #adFaseControls{display:flex;flex-direction:column;gap:8px;margin-top:10px}
  .facerow{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 16px;background:var(--surface-2);border:1px solid var(--border-soft);border-radius:var(--radius-md);transition:all .2s ease}
  .facerow:hover{background:var(--surface);border-color:var(--border);box-shadow:var(--shadow-sm)}
  .fname{font-size:13.5px;font-weight:600;color:var(--fg);display:flex;align-items:center;gap:10px}
  .fname b{font-family:var(--mono);font-size:11.5px;padding:2px 8px;border-radius:6px;background:var(--surface);border:1px solid var(--border);color:var(--brand);min-width:24px;text-align:center}
  .partag{font-family:var(--mono);font-size:10px;font-weight:700;color:var(--brand);background:var(--brand-soft);border:1px solid var(--brand-ghost);padding:2px 7px;border-radius:6px;letter-spacing:.04em}
  .facerow .seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface);padding:2px;gap:2px;flex-shrink:0}
  .facerow .segbtn{font-family:inherit;font-size:12px;font-weight:600;padding:6px 14px;text-align:center;background:transparent;color:var(--fg-soft);border:0;border-radius:calc(var(--radius-md) - 3px);cursor:pointer;transition:all .16s ease;white-space:nowrap}
  .facerow .segbtn:hover{color:var(--fg);background:rgba(0,0,0,0.04)}
  .facerow .segbtn.on{box-shadow:var(--shadow-sm)}
  .facerow .segbtn.on.pendiente{color:var(--fg-faint);background:var(--surface-2)}
  .facerow .segbtn.on.en_curso{color:var(--brand);background:var(--brand-soft)}
  .facerow .segbtn.on.completada{color:var(--ok);background:var(--ok-soft)}
  @media(max-width:640px){
    .facerow{flex-direction:column;align-items:flex-start;gap:10px}
    .facerow .seg{width:100%}
    .facerow .segbtn{flex:1;padding:6px 4px}
  }

  /* ---- expediente cliente ---- */
  .exp-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  @media(max-width:640px){.exp-grid{grid-template-columns:1fr}}
  .stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:all .2s ease}
  .stat:hover{box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .stat .k{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-faint)}
  .stat .v{font-size:18px;font-weight:700;margin-top:4px}
  .stat .v.mono{font-family:var(--mono);font-size:15px;color:var(--brand)}

  /* Tarjetas de manuales en el expediente (CSP-safe, sin onmouseover inline). */
  .exp-manual-card:hover{border-color:var(--exp-card-accent,#3E35A8)!important;transform:translateY(-2px)}

  .callout{display:flex;gap:14px;align-items:flex-start;background:var(--brand-soft);border:1px solid rgba(62,53,168,.15);border-radius:var(--radius);padding:16px 18px;margin:16px 0}
  .callout .ic{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--brand),var(--brand-2));display:grid;place-items:center;flex:0 0 auto;box-shadow:0 4px 10px rgba(62,53,168,.3)}
  .callout .ic svg{width:18px;height:18px;color:#fff}
  .callout h4{font-size:14px;margin-bottom:3px;font-weight:700}
  .callout p{font-size:12.5px;color:var(--fg-soft);margin:0;line-height:1.5}

  /* task steps */
  .steps2{display:flex;flex-direction:column;gap:10px;margin-top:6px}
  .taskcard{display:flex;gap:14px;align-items:center;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;box-shadow:var(--shadow-sm);transition:all .2s cubic-bezier(.16,1,.3,1)}
  .taskcard:hover{box-shadow:var(--shadow-md);border-color:rgba(62,53,168,.25)}
  .taskcard .tn{width:32px;height:32px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center;font-family:var(--mono);font-weight:700;font-size:13px;background:var(--surface-2);color:var(--fg-soft)}
  .taskcard.ok .tn{background:var(--ok-soft);color:var(--ok)}
  .taskcard .ti{flex:1;min-width:0}
  .taskcard .ti h4{font-size:14.5px;font-weight:700;margin:0}
  .taskcard .ti p{font-size:12.5px;color:var(--fg-soft);margin:2px 0 0}
  .taskcard .actions{display:flex;gap:8px;align-items:center}
  
  /* Status Badges contemporáneos (Soft-Pill) */
  .status{font-size:11.5px;font-weight:700;padding:3.5px 10px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;line-height:1.2;border:1px solid transparent}
  .status::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block;opacity:.85}
  .status.pend{background:var(--surface-2);color:var(--fg-faint);border-color:var(--border)}
  .status.ready{background:var(--brand-soft);color:var(--brand);border-color:rgba(62,53,168,.18)}
  .status.done2{background:var(--ok-soft);color:var(--ok);border-color:rgba(16,185,129,.25)}
  .status.warn{background:var(--warn-soft);color:var(--warn);border-color:rgba(245,158,11,.25)}
  .status.obs{background:var(--err-soft);color:var(--err);border-color:rgba(239,68,68,.25)}
  @media(max-width:560px){.taskcard{flex-wrap:wrap}.taskcard .actions{width:100%;justify-content:flex-end}}

  /* legal document */
  .legal h5{font-size:12px;margin:16px 0 6px;color:var(--brand);text-transform:uppercase;letter-spacing:.03em;font-weight:700}
  .legal p{margin:0 0 11px;font-size:12.5px;line-height:1.65;text-align:justify;color:var(--fg)}
  .legal ul{margin:0 0 11px;padding-left:20px}
  .legal li{font-size:12.5px;line-height:1.6;margin-bottom:5px;text-align:justify;color:var(--fg)}
  .legal .fill{color:var(--brand);font-weight:700}
  .legal .blank{color:var(--fg-faint);font-style:italic}
  .legal .cl-t{font-weight:700;color:var(--fg)}

  /* ---- admin ---- */
  .admin-cols{display:grid;grid-template-columns:1.6fr 1fr;gap:18px;align-items:start}
  @media(max-width:860px){.admin-cols{grid-template-columns:1fr}}
  .tablecard{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-sm)}
  .tablecard .th{display:flex;align-items:center;gap:10px;padding:14px 18px;border-bottom:1px solid var(--border);background:var(--surface-2)}
  .tblscroll{
    overflow-x:auto;
    position:relative;
    cursor:grab;
    scrollbar-width:thin;
    scrollbar-color:var(--border) transparent;
    transition:box-shadow .2s ease;
  }
  .tblscroll.tbl-dragging{cursor:grabbing;user-select:none}
  .tblscroll.has-scroll-left::before{
    content:"";
    position:sticky;
    left:0;
    top:0;
    bottom:0;
    width:24px;
    margin-right:-24px;
    background:linear-gradient(to right, rgba(0,0,0,0.12), transparent);
    pointer-events:none;
    z-index:2;
  }
  .tblscroll.has-scroll-right::after{
    content:"";
    position:sticky;
    right:0;
    top:0;
    bottom:0;
    width:24px;
    margin-left:-24px;
    background:linear-gradient(to left, rgba(0,0,0,0.12), transparent);
    pointer-events:none;
    z-index:2;
  }
  table{width:100%;border-collapse:collapse;border-spacing:0;text-align:left}
  thead{background:var(--surface-2)}
  th{
    text-align:left;
    font-size:11.5px;
    text-transform:uppercase;
    letter-spacing:.06em;
    color:var(--fg-soft);
    font-weight:700;
    padding:13px 16px;
    border:0;
    border-bottom:1px solid var(--border);
    background:transparent;
    white-space:nowrap;
  }
  td{
    padding:13px 16px;
    border:0;
    border-bottom:1px solid var(--border-soft);
    vertical-align:middle;
    font-size:13.5px;
    color:var(--fg);
  }
  tr{transition:background .15s ease}
  tr:hover td{background:rgba(62,53,168,.03)}
  tr:last-child td{border-bottom:0}
  .emp{font-weight:600;min-width:180px}.emp small{display:block;color:var(--fg-faint);font-weight:400;font-family:var(--mono);font-size:11px}
  .badge{font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
  .badge.f0{background:var(--brand-soft);color:var(--brand);border-color:rgba(62,53,168,.15)}
  .badge.f1{background:#e0f2fe;color:#0369a1;border-color:rgba(3,105,161,.2)}
  .badge.f2{background:#fef3c7;color:#b45309;border-color:rgba(180,83,9,.2)}
  .badge.f3{background:#f3e8ff;color:#7e22ce;border-color:rgba(126,34,206,.2)}
  .badge.f4{background:var(--teal-soft);color:var(--teal-ink);border-color:rgba(14,165,233,.2)}
  .badge.done{background:var(--ok-soft);color:var(--ok);border-color:rgba(16,185,129,.2)}
  [data-theme="dark"] .badge.f1{background:#082f49;color:#7dd3fc;border-color:rgba(125,211,252,.2)}
  [data-theme="dark"] .badge.f2{background:#451a03;color:#fde68a;border-color:rgba(253,230,138,.2)}
  [data-theme="dark"] .badge.f3{background:#3b0764;color:#d8b4fe;border-color:rgba(216,180,254,.2)}
  [data-theme="dark"] .badge.done{background:#064e3b;color:#6ee7b7;border-color:rgba(110,231,183,.2)}
  .rowbtns{display:flex;gap:6px;align-items:center}
  .icbtn{width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--fg-soft);cursor:pointer;display:grid;place-items:center;transition:all .16s ease;box-shadow:var(--shadow-sm)}
  .icbtn:hover{border-color:var(--brand);color:var(--brand);background:var(--brand-soft);transform:translateY(-1px);box-shadow:var(--shadow-md)}
  .icbtn:active{transform:translateY(0.5px)}
  .icbtn svg{width:15px;height:15px}
  .empty{padding:34px 18px;text-align:center;color:var(--fg-faint);font-size:13px}
  .wl-item{display:flex;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-soft)}
  .wl-item:last-child{border-bottom:0}
  .wl-item .e2{flex:1;min-width:0}
  .wl-item .e2 b{font-size:13px;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wl-item .e2 small{font-size:11px;color:var(--fg-faint);font-family:var(--mono)}
  .usr-item{display:grid;grid-template-columns:1fr 118px 32px 32px;align-items:center;gap:10px;padding:11px 14px;border-bottom:1px solid var(--border-soft)}
  .usr-item:last-child{border-bottom:0}
  .usr-item .e2{min-width:0}
  .usr-item .e2 b{font-size:13px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .usr-item .e2 small{font-size:11px;color:var(--fg-faint);display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .usr-item select{width:100%;font-family:inherit;font-size:12.5px;padding:6px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--fg)}
  .tpl-chips-wrap{margin-bottom:12px}
  .tpl-chips-lbl{display:block;font-size:11px;font-weight:600;color:var(--fg-soft);margin-bottom:6px}
  .tpl-chips{display:flex;flex-wrap:wrap;gap:6px}
  .tpl-chip{font-family:var(--mono);font-size:11.5px;padding:4px 9px;border-radius:7px;border:1px solid var(--border);background:var(--surface-2);color:var(--brand);cursor:pointer;transition:.14s}
  .tpl-chip:hover{background:var(--brand-ghost);border-color:var(--brand)}
  .tpl-preview{border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#fff}
  .tpl-preview-bar{display:flex;align-items:center;gap:7px;padding:8px 12px;background:var(--surface-2);border-bottom:1px solid var(--border);font-size:11.5px;font-weight:600;color:var(--fg-soft)}
  .tpl-preview-bar svg{width:15px;height:15px}
  .tpl-preview-subj{padding:8px 12px;font-size:12.5px;color:#13223c;background:#fafaff;border-bottom:1px solid var(--border)}
  .tpl-preview-subj b{color:#13223c}
  #tplPreview{width:100%;height:340px;border:0;background:#fff;display:block}
  .campos-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
  .campos-tbl th,.campos-tbl td{text-align:left;padding:7px 10px;border-bottom:1px solid var(--border-soft)}
  .campos-tbl th{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint)}
  .campos-tbl code{font-family:var(--mono);color:var(--brand);font-size:12px}
  .campos-amb{font-size:10.5px;padding:2px 7px;border-radius:6px;background:var(--surface-2);color:var(--fg-soft);white-space:nowrap}
  .tmeta{display:flex;flex-wrap:wrap;gap:5px 14px;margin-top:7px}
  .tmeta span{font-size:11px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
  .tm-cli{color:var(--fg-soft)}
  .tm-cli::before{content:"";width:7px;height:7px;border-radius:50%;background:#1f9d6b;flex:0 0 auto}
  .tm-bcs{color:var(--brand)}
  .tm-bcs::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--brand);flex:0 0 auto}
  .franja{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .franja-t{display:flex;align-items:center;gap:8px}
  .franja-t input[type=text]{width:125px;padding:9px 11px;cursor:pointer}
  .franja-t span{color:var(--fg-faint);font-size:13px}
  .franja .chip.sm{font-size:13px}
  .franja-t input:disabled{opacity:.45}
  .pk-item{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--border-soft)}
  .pk-item:last-child{border-bottom:0}
  .pk-item span{flex:1;font-size:13px}
  .pk-item small{display:block;font-size:11px;color:var(--fg-faint)}
  .pk-list{margin-bottom:4px}
  .matriz-box{border:1px solid var(--border);border-left:4px solid var(--brand);border-radius:12px;padding:8px 14px 2px;margin-bottom:12px;background:var(--surface-2)}
  .matriz-box.grp-legales{border-left-color:var(--brand)}
  .matriz-box.grp-técnicas{border-left-color:var(--teal)}
  .matriz-box.grp-administrativas{border-left-color:var(--orange)}
  .matriz-grp{font-weight:700;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--fg-soft);margin-bottom:2px}
  .matriz-box.grp-legales .matriz-grp{color:var(--brand)}
  .matriz-box.grp-técnicas .matriz-grp{color:var(--teal)}
  .matriz-box.grp-administrativas .matriz-grp{color:var(--orange)}
  .matriz-box .matriz-row:last-child{border-bottom:0}
  .matriz-row{display:grid;grid-template-columns:1fr 150px 210px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--border-soft)}
  .matriz-lbl{font-size:12.5px;color:var(--fg)}
  .matriz-row input{font-family:inherit;font-size:12.5px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--fg)}
  .matriz-row input:disabled{opacity:.5}
  .matriz-same{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--fg-soft);margin:0 0 12px;cursor:pointer}
  @media(max-width:640px){.matriz-row{grid-template-columns:1fr;gap:4px}}
  .resp-note{margin-top:8px}
  .resp-chip{font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--surface-2);color:var(--fg-soft);border:1px solid var(--border)}
  .resp-chip.me{background:var(--brand-ghost);color:var(--brand);border-color:transparent}
  .txt-excel{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .txt-quick{margin-top:16px;border-top:1px solid var(--border-soft);padding-top:8px}
  .txt-quick summary{cursor:pointer;font-size:12.5px;font-weight:600;color:var(--brand);list-style:none;padding:6px 0}
  .txt-quick summary::-webkit-details-marker{display:none}
  .txt-quick summary::before{content:"▸ ";color:var(--fg-faint)}
  .txt-quick[open] summary::before{content:"▾ "}
  .pc-item{display:grid;grid-template-columns:30px 1fr 118px auto 32px;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--border-soft)}
  .pc-item:last-child{border-bottom:0}
  .pc-item .pc-lbl{width:100%;font-size:13px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--fg)}
  .pc-item .pc-tipo{width:100%;font-family:inherit;font-size:12.5px;padding:7px 8px;border:1px solid var(--border);border-radius:8px;background:var(--surface-2);color:var(--fg)}
  .cred-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cred-card{border:1px solid var(--border);border-radius:12px;padding:13px 15px;background:var(--surface-2)}
  .cred-card.locked{opacity:.6}
  .cred-card h4{font-size:13px;margin:0 0 9px;display:flex;align-items:center;gap:8px}
  .cred-card .cf{margin-bottom:8px}
  .cred-card .cf label{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);font-weight:600;margin-bottom:3px}
  .cred-card input[type=text],.cred-card input[type=date]{width:100%;font-family:inherit;font-size:12.5px;padding:7px 9px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg)}
  .cred-card .sw{display:flex;align-items:center;justify-content:space-between;font-size:12.5px;color:var(--fg-soft);padding:2px 0}
  @media(max-width:640px){.cred-grid{grid-template-columns:1fr}}
  .addrow{display:flex;flex-direction:column;gap:9px;padding:14px}

  /* ---- checklist cierre ---- */
  .cl{display:flex;flex-direction:column;gap:2px}
  .cl-row{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border-soft)}
  .cl-row:last-child{border-bottom:0}
  .cl-row .lbl2{flex:1;font-size:13px}
  .cl-item{padding:12px 4px;border-bottom:1px solid var(--border-soft)}
  .cl-item:last-child{border-bottom:0}
  .cl-top{display:flex;align-items:center;gap:12px}
  .cl-top .lbl2{flex:1;font-size:13px;font-weight:600}
  .cl-meta{display:flex;gap:10px;margin-top:9px;flex-wrap:wrap}
  .cl-meta input{font-size:12.5px;padding:8px 10px;border:1px solid var(--border);border-radius:8px;background:var(--surface);color:var(--fg)}
  .cl-meta .ck-resp{flex:1;min-width:150px}
  .cl-meta .ck-fecha{width:150px}
  .cl-item.on{background:color-mix(in srgb,var(--ok) 6%,transparent);border-radius:10px}
  .oftbl{width:100%;border-collapse:collapse;font-size:12.5px}
  .oftbl th{text-align:left;font-size:11px;color:var(--fg-faint);font-weight:600;padding:4px 6px}
  .oftbl td{padding:3px 6px;border-bottom:1px solid var(--border-soft);vertical-align:middle}
  .oftbl input{width:100%;font-size:12.5px;padding:7px 8px;border:1px solid var(--border);border-radius:7px;background:var(--surface);color:var(--fg)}
  .switch{position:relative;display:inline-block;width:38px;height:22px;flex:0 0 auto}
  .switch input{opacity:0;width:0;height:0}
  .switch .tr{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;background:var(--border);transition:.3s;border-radius:22px}
  .switch .tr:before{position:absolute;content:"";height:16px;width:16px;left:3px;bottom:3px;background:white;transition:.3s;border-radius:50%}
  .switch input:checked+.tr{background:var(--ok)}
  .switch input:checked+.tr:before{transform:translateX(16px)}

  /* Flatpickr BCS Overrides */
  .flatpickr-calendar {
    font-family: inherit !important;
    background: var(--surface) !important;
    border: 1px solid var(--border) !important;
    box-shadow: var(--shadow) !important;
    border-radius: var(--radius-sm) !important;
  }
  .flatpickr-time {
    border-top: none !important;
  }
  .flatpickr-time input:hover, .flatpickr-time .flatpickr-am-pm:hover, 
  .flatpickr-time input:focus, .flatpickr-time .flatpickr-am-pm:focus {
    background: var(--brand-ghost) !important;
    color: var(--brand) !important;
  }
  @media(max-width: 600px) {
    .franja-t input[type=text] { width: 100px; font-size: 13px; }
  }
  .switch:focus-within .tr{box-shadow:0 0 0 3px var(--brand-ghost)}

  /* ===== FORM (Fase 1, embedded) ===== */
  .fcard{overflow:hidden;margin-top:4px}
  .stepper{display:flex;gap:6px;padding:20px 22px 0}
  .step{flex:1;min-width:0;cursor:pointer;background:none;border:0;padding:0;text-align:left;font-family:inherit}
  .step .sbar{height:4px;border-radius:99px;background:var(--border);transition:.3s}
  .step.done .sbar,.step.active .sbar{background:var(--brand)}
  .step .slab{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:11.5px;color:var(--fg-faint)}
  .step.active .slab{color:var(--fg)}.step.done .slab{color:var(--fg-soft)}
  .step .snum{font-family:var(--mono);font-size:10px;font-weight:600;width:18px;height:18px;border-radius:6px;display:grid;place-items:center;background:var(--surface-2);border:1px solid var(--border);flex:0 0 auto}
  .step.active .snum{background:var(--brand);color:#fff;border-color:var(--brand)}
  .step.done .snum{background:var(--brand-ghost);color:var(--brand);border-color:transparent}
  .step .stxt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  @media(max-width:620px){.step .stxt{display:none}.step .slab{justify-content:center}}
  .panel{display:none;padding:22px}
  .panel.on{display:block;animation:fade .3s ease}
  .panel .peyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);background:var(--eyebrow-bg);padding:5px 12px;border-radius:var(--radius-pill);display:inline-block}
  .panel h3.pt{font-size:23px;font-weight:700;margin:6px 0 4px;color:var(--text)}
  .panel .psub{color:var(--text-soft);font-size:14.5px;margin:0 0 20px;max-width:60ch}
  .grid{display:grid;gap:15px 17px;grid-template-columns:1fr 1fr}
  .grid .full{grid-column:1/-1}
  @media(max-width:560px){.grid{grid-template-columns:1fr}}
  .choices{display:flex;flex-wrap:wrap;gap:9px}
  .chip{position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;border:1px solid var(--border);background:var(--surface-2);border-radius:99px;padding:8px 15px 8px 12px;font-size:13.5px;color:var(--fg-soft);transition:.16s;user-select:none}
  .chip:hover{border-color:var(--brand);color:var(--fg)}
  .chip input{position:absolute;opacity:0;pointer-events:none}
  .chip .cdot{width:16px;height:16px;border-radius:50%;border:1.5px solid var(--border);flex:0 0 auto;display:grid;place-items:center;transition:.16s}
  .chip .cdot.sq{border-radius:5px}
  .chip input:checked ~ .cdot{border-color:var(--brand);background:var(--brand)}
  .chip input:checked ~ .cdot::after{content:"";width:7px;height:7px;border-radius:50%;background:#fff}
  .chip input:checked ~ .cdot.sq::after{border-radius:0;width:5px;height:8px;background:none;border:2px solid #fff;border-top:0;border-left:0;transform:rotate(42deg) translate(-1px,-1px)}
  .chip:has(input:checked){border-color:var(--brand);color:var(--fg);background:var(--brand-ghost)}
  .chip:focus-within{outline:2px solid var(--brand);outline-offset:2px}
  .sublabel{font-size:12.5px;font-weight:600;color:var(--fg-soft);margin:0 0 2px}
  .cond{margin-top:6px;padding:16px;border:1px dashed var(--border);border-radius:var(--radius-sm);background:var(--surface-2);display:none}
  .cond.on{display:block;animation:fade .25s ease}
  .bio-block{border:1px solid var(--border-soft);border-radius:var(--radius-sm);padding:14px 16px;background:var(--surface-2);display:none}
  .bio-block.on{display:block}
  .bio-block h4{margin:0 0 12px;font-size:13px;display:flex;align-items:center;gap:8px}
  .bio-tag{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:5px;background:var(--brand-ghost);color:var(--brand)}
  .docs-list{display:flex;flex-direction:column;gap:2px}
  .doc-row{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border-soft)}
  .doc-row:last-child{border-bottom:0}
  .doc-row .di{width:30px;height:30px;border-radius:8px;background:var(--brand-ghost);color:var(--brand);display:grid;place-items:center;flex:0 0 auto}
  .doc-row .di svg{width:16px;height:16px}
  .doc-row .dt{flex:1;font-size:13.5px}
  .doc-row .dt small{display:block;color:var(--fg-faint);font-size:11.5px;font-weight:400}
  .consent{display:flex;gap:12px;align-items:flex-start;padding:16px;border:1px solid var(--border);border-radius:var(--radius-sm);background:var(--surface-2);margin-top:16px}
  .clause{font-size:13px;color:var(--fg-soft);line-height:1.55;max-width:64ch}
  .fnav{display:flex;align-items:center;gap:12px;padding:16px 22px;border-top:1px solid var(--border)}
  .fnav .sp{flex:1}
  .banner{display:flex;gap:10px;align-items:flex-start;background:var(--brand-soft);border:1px solid var(--brand-ghost);border-radius:var(--radius-sm);padding:12px 14px;margin:0 0 18px;font-size:12.5px;color:var(--fg-soft)}
  .banner svg{width:16px;height:16px;color:var(--brand);flex:0 0 auto;margin-top:1px}

  /* ---- document sheet ---- */
  .doc-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}
  .doc-actions .sp{flex:1}
  .sheet{background:#fff;color:#181a2e;border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--border);padding:44px 46px;max-width:820px;margin:0 auto;font-size:13px;line-height:1.5}
  .sheet .s-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:2px solid #3E35A8;padding-bottom:18px;margin-bottom:22px}
  .sheet .s-meta{text-align:right;font-family:var(--mono);font-size:11px;color:#4a4c68}
  .sheet .s-meta b{display:block;font-size:15px;color:#3E35A8}
  .sheet h1.s-title{font-size:19px;margin:0 0 4px;color:#181a2e}
  .sheet .s-lead{color:#6a6c86;font-size:12px;margin:0 0 24px}
  .sheet .s-sec{margin:0 0 22px;break-inside:avoid}
  .sheet .s-sec h4{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#3E35A8;border-bottom:1px solid #e6e6f0;padding-bottom:6px;margin:0 0 12px}
  .sheet .s-kv{display:grid;grid-template-columns:1fr 1fr;gap:8px 26px}
  .sheet .s-kv.one{grid-template-columns:1fr}
  .sheet .kv{display:flex;flex-direction:column;gap:1px;padding:5px 0;border-bottom:1px dotted #e2e2ee;break-inside:avoid}
  .sheet .kv .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em;color:#8688a2}
  .sheet .kv .v{font-size:13px;color:#181a2e;font-weight:500}
  .sheet .kv .v.mono{font-family:var(--mono)}
  .sheet .kv .v.empty{color:#b6b8c8;font-weight:400;font-style:italic}
  .sheet .s-docs{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:7px}
  .sheet .s-docs li{display:flex;align-items:center;gap:9px;font-size:12px;color:#2c2e46}
  .sheet .s-docs .box{width:15px;height:15px;border:1.5px solid #3E35A8;border-radius:4px;flex:0 0 auto;display:grid;place-items:center}
  .sheet .s-docs .box svg{width:10px;height:10px;color:#3E35A8}
  .sheet .s-docs .box.off{border-color:#c6c8d6}
  .sheet .s-clause{font-size:11px;color:#6a6c86;line-height:1.55;background:#f4f4fa;border-radius:8px;padding:12px 14px}
  .sign-area{display:grid;grid-template-columns:1fr 1fr;gap:34px;margin-top:30px;break-inside:avoid}
  .sign-box .scw{border:1px dashed #b9bbcf;border-radius:8px;background:#fbfbfe;height:120px;position:relative;overflow:hidden}
  .sign-box canvas{width:100%;height:100%;display:block;cursor:crosshair;touch-action:none}
  .sign-box .sph{position:absolute;inset:0;display:grid;place-items:center;color:#b6b8c8;font-size:11px;pointer-events:none}
  .sign-line{border-top:1px solid #181a2e;margin-top:8px;padding-top:6px;font-size:11px;color:#6a6c86;display:flex;justify-content:space-between;align-items:center}
  .sign-clear{font-family:inherit;font-size:11px;border:0;background:none;color:#3E35A8;cursor:pointer;padding:0}
  .sheet .s-foot{margin-top:30px;padding-top:14px;border-top:1px solid #e6e6f0;display:flex;justify-content:space-between;font-size:10px;color:#8688a2;font-family:var(--mono)}
  @media(max-width:640px){
    .sheet{padding:26px 20px}.sheet .s-top{flex-direction:column;gap:12px}.sheet .s-meta{text-align:left}
    .sheet .s-kv{grid-template-columns:1fr;gap:2px}.sheet .s-docs{grid-template-columns:1fr}
    .sign-area{grid-template-columns:1fr;gap:22px}.sheet .s-foot{flex-direction:column;gap:4px}
  }

  .toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);background:#181a2e;color:#fff;padding:11px 18px;border-radius:11px;font-size:13px;box-shadow:0 12px 32px -10px rgba(0,0,0,.5);opacity:0;pointer-events:none;transition:.25s;z-index:60}
  .toast.on{opacity:1;transform:translateX(-50%) translateY(0)}

  .modal{position:fixed;inset:0;z-index:70;background:rgba(20,20,40,.5);display:none;place-items:center;padding:20px}
  .modal.on{display:grid}
  .modal .box{background:var(--surface);border-radius:var(--radius);max-width:440px;width:100%;padding:24px;box-shadow:var(--shadow-lg)}
  .modal h3{font-size:17px;margin-bottom:6px}
  .modal p{color:var(--fg-soft);font-size:13.5px;margin:0 0 18px}
  .modal .mbtns{display:flex;gap:10px;justify-content:flex-end}

  .btn:focus-visible,.tbtn:focus-visible,.role:focus-visible,.step:focus-visible,.icbtn:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

  /* ---- escala de lectura: fuentes más grandes ---- */
  .field label{font-size:14px}
  .hint{font-size:13px}
  .psub{font-size:15px}
  .phead h2{font-size:30px}
  .phead p{font-size:16px}
  .peyebrow,.panel .peyebrow{font-size:12px}
  table{font-size:14.5px}
  th{font-size:12px}
  td{padding:14px}
  .emp{font-size:14.5px}
  .emp small{font-size:12.5px}
  .badge{font-size:12px}
  .status{font-size:13px}
  .stat .k{font-size:12.5px}
  .stat .v{font-size:19px}
  .stat .v.mono{font-size:16px}
  .taskcard .ti h4{font-size:16px}
  .taskcard .ti p{font-size:13.5px}
  .brand h1{font-size:17px}.brand p{font-size:13px}
  .role h3{font-size:18px}.role p{font-size:14px}
  .hero p{font-size:17px}
  .authcard h2{font-size:23px}.authcard .lead{font-size:14.5px}
  .chip{font-size:14.5px}
  .panel h3.pt{font-size:24px}
  .banner{font-size:13.5px}
  .clause{font-size:14px}
  .wl-item .e2 b{font-size:14.5px}.wl-item .e2 small{font-size:12.5px}
  .cl-row .lbl2{font-size:14px}
  .doc-row .dt{font-size:14.5px}.doc-row .dt small{font-size:12.5px}
  .note{font-size:13.5px}
  .fname{font-size:14.5px}
  .legal p,.legal li{font-size:13.5px}
  .sheet{font-size:14px}

  .fileinfo{display:flex;align-items:center;gap:8px;font-size:13px;padding:9px 12px;border-radius:9px;background:var(--teal-soft);color:var(--teal-ink)}
  .fileinfo svg{width:16px;height:16px;flex:0 0 auto}
  .tpl-item{display:flex;align-items:center;gap:9px;padding:12px 14px;border-bottom:1px solid var(--border-soft);cursor:pointer;font-size:13.5px}
  .tpl-item:last-child{border-bottom:0}
  .tpl-item:hover{background:var(--surface-2)}
  .tpl-item.on{background:var(--brand-ghost);color:var(--brand);font-weight:600}
  .tpl-item .tdot{width:7px;height:7px;border-radius:50%;background:var(--warn);flex:0 0 auto}
  .tpl-item .tdot.def{background:var(--border)}

  /* guías de integración */
  .guide-body{font-size:14.5px;line-height:1.62}
  .guide-body p{margin:0 0 12px}
  .guide-body ul{margin:0 0 12px;padding-left:20px}
  .guide-body li{margin-bottom:6px}
  .guide-body code{font-family:var(--mono);font-size:.88em;background:var(--brand-ghost);color:var(--brand);padding:1px 6px;border-radius:5px}
  .gtbl{width:100%;border-collapse:collapse;margin:6px 0 14px;font-size:13.5px;display:block;overflow-x:auto}
  .gtbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--fg-faint);border-bottom:1px solid var(--border);padding:8px 10px;white-space:nowrap}
  .gtbl td{padding:8px 10px;border-bottom:1px solid var(--border-soft);vertical-align:top}
  .codeblock{position:relative;margin:8px 0 4px;border-radius:12px;overflow:hidden;border:1px solid #232b52;background:#0f1530}
  .codeblock .clabel{position:absolute;top:8px;left:14px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#7f88b3}
  .codeblock .ccopy{position:absolute;top:7px;right:7px;font-family:inherit;font-size:11.5px;font-weight:600;border:1px solid #33406a;background:#1a2140;color:#c7cef0;border-radius:7px;padding:5px 11px;cursor:pointer;z-index:2}
  .codeblock .ccopy:hover{background:#232b52}
  .codeblock .ccopy.ok{background:#173a2a;border-color:#1f9d6b;color:#5fe0a6}
  .codeblock pre{margin:0;padding:30px 14px 14px;color:#e6e9f5;font-family:var(--mono);font-size:12.5px;line-height:1.6;overflow-x:auto}
  .codeblock pre code{white-space:pre;background:none;color:inherit;padding:0}

  /* ----- Documento Orden de Servicio (oferta) ----- */
  .os{color:#25263f}
  .os-cover{background:linear-gradient(135deg,#3E35A8 0%,#5646c9 60%,#2ba7bd 100%);color:#fff;border-radius:12px;padding:30px 32px;margin-bottom:26px;position:relative;overflow:hidden}
  .os-cover .os-band{display:inline-block;background:#2ba7bd;color:#fff;font-size:15px;letter-spacing:.04em;padding:8px 18px;border-radius:8px;margin-bottom:18px}
  .os-cover h1{font-size:26px;font-weight:800;margin:0 0 4px}
  .os-cover .os-sub{font-size:13px;opacity:.9}
  .os-party{margin-top:18px;font-size:14.5px;line-height:1.9}
  .os-party b{color:#fbe2b2}
  .os-date{margin-top:14px;font-size:13.5px;opacity:.95}
  .os-h2{color:#3E35A8;font-size:17px;font-weight:800;margin:22px 0 8px;border-bottom:2px solid #e2f4f7;padding-bottom:4px}
  .os p{font-size:13px;line-height:1.6;margin:0 0 8px;color:#4a4c66}
  .os ul{margin:0 0 10px;padding-left:20px}.os li{font-size:13px;line-height:1.55;margin:3px 0;color:#4a4c66}
  .os .os-orange{color:#f5842a;font-weight:700}
  .os .os-teal{color:#2ba7bd;font-weight:700}
  .tarwrap{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}
  .tarcard{flex:1;min-width:240px;border:1px solid #e6e6f0;border-radius:8px;overflow:hidden}
  .tarcard table{width:100%;border-collapse:collapse;font-size:12px}
  .tarcard caption{padding:9px;font-weight:700;color:#fff;font-size:12.5px}
  .tarcard.dac caption{background:#f5842a}.tarcard.fac caption{background:#2ba7bd}
  .tarcard th{background:#f4f4fa;color:#6a6c86;font-weight:700;padding:7px 9px;font-size:11px;text-align:center;border-bottom:1px solid #e6e6f0}
  .tarcard td{padding:7px 9px;text-align:center;border-bottom:1px solid #f0f0f6;font-family:var(--mono)}
  .plantbl{width:100%;border-collapse:collapse;margin:10px 0;font-size:13px}
  .plantbl caption{background:#2ba7bd;color:#fff;font-weight:700;padding:10px;border-radius:8px 8px 0 0}
  .plantbl th{background:#f4f4fa;color:#6a6c86;font-weight:700;padding:9px 12px;font-size:11.5px;border-bottom:1px solid #e6e6f0}
  .plantbl th:nth-child(n+2),.plantbl td:nth-child(n+2){text-align:center}
  .plantbl td{padding:11px 12px;border-bottom:1px solid #f0f0f6;font-family:var(--mono)}
  .plantbl td:first-child{font-family:inherit}
  .plantbl .os-total td{background:#2ba7bd;color:#fff;font-weight:800}
  .os-noiva{text-align:center;color:#3E35A8;font-weight:800;font-size:15px;margin:18px 0}
  .os-foot{margin-top:26px;border-top:1px solid #eee;padding-top:12px;font-size:10.5px;color:#9092ab;text-align:center}
  .os-conf{font-size:10.5px;color:#9092ab;line-height:1.5;margin-top:16px}
  @media print{
    @page{size:A4;margin:12mm 14mm}
    /* Ocultar elementos de navegación, chrome web, cabeceras web, pies de página web, diálogos y controles interactivos */
    header,footer,.site-head,.site-foot,[data-component="header"],[data-component="footer"],
    .deco,.topbar,.doc-actions,.toast,.modal,.fcard,.phead,.callout,.exp-grid,.phases,
    .banner,button,.btn,a.btn,.adnav,.adshell-nav,.site-actions,.theme-btn,#themeBtn,
    #scrollToTopBtn,.scroll-to-top,.swal2-container,.table-actions,.ia-scan-modal-overlay,
    #dashPrint,#ndaFirmaBox,#ndaAcceptWrap,#ndaErr,#ndaBack,.consent{
      display:none !important;
    }
    
    /* En vista NDA y vistas de documentos, ocultar formularios interactivos y mostrar solo la hoja .sheet */
    #v-nda > .wrap > .card:not(.sheet),
    #v-nda > .wrap > .card:first-of-type {
      display: none !important;
    }

    /* Ocultar vistas inactivas y forzar visualización de la vista activa .on */
    .view:not(.on),section.view:not(.on){display:none !important}
    .view.on,section.view.on{display:block !important;visibility:visible !important;opacity:1 !important}

    html,body{background:#fff !important;color:#000 !important;width:100% !important;height:auto !important;overflow:visible !important;margin:0 !important;padding:0 !important}
    body{font-size:11pt !important;line-height:1.45 !important;-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
    .wrap{padding:0 !important;margin:0 !important;max-width:100% !important;width:100% !important}
    .adshell{display:block !important}
    .adcontent{padding:0 !important;margin:0 !important}
    .dash-kpi,.card{box-shadow:none !important}
    .dash-kpis{grid-template-columns:repeat(5,1fr)}
    .dash-cols{grid-template-columns:1.5fr 1fr}

    .sheet{
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      box-shadow:none !important;
      border:0 !important;
      max-width:100% !important;
      width:100% !important;
      padding:0 !important;
      margin:0 !important;
      background:transparent !important;
      font-size:9.5pt !important;
      line-height:1.36 !important;
    }
    .sheet .s-top{
      display:flex !important;
      visibility:visible !important;
      margin-bottom:12px !important;
      padding-bottom:8px !important;
      border-bottom:2px solid #3E35A8 !important;
    }
    .sheet .s-top .logoimg{height:30px !important}
    .sheet .legal, #ndaBody{
      display:block !important;
      visibility:visible !important;
      opacity:1 !important;
      color:#000 !important;
    }
    .sheet .legal p{
      font-size:9.5pt !important;
      line-height:1.35 !important;
      margin:0 0 7px !important;
      text-align:justify !important;
      color:#000 !important;
    }
    .sheet .legal ul{
      margin:0 0 7px !important;
      padding-left:18px !important;
    }
    .sheet .legal li{
      font-size:9.5pt !important;
      line-height:1.3 !important;
      margin-bottom:3px !important;
      text-align:justify !important;
      color:#000 !important;
    }
    .sheet .legal h5{
      font-size:10.5pt !important;
      font-weight:700 !important;
      margin:8px 0 4px !important;
      color:#000 !important;
    }
    .sheet .sign-area{
      display:grid !important;
      grid-template-columns:1fr 1fr !important;
      gap:20px !important;
      margin-top:14px !important;
      break-inside:avoid !important;
      page-break-inside:avoid !important;
    }
    .sheet .sign-box .scw{
      height:55px !important;
      border:1px solid #a0a0b0 !important;
      background:transparent !important;
    }
    .sheet .sign-line{
      font-size:8.5pt !important;
      margin-top:4px !important;
      padding-top:4px !important;
      color:#333 !important;
    }
    .sheet .s-foot{
      display:flex !important;
      justify-content:space-between !important;
      margin-top:12px !important;
      padding-top:6px !important;
      border-top:1px solid #d0d0d8 !important;
      font-size:8pt !important;
      color:#555 !important;
      break-inside:avoid !important;
      page-break-inside:avoid !important;
      break-before:avoid !important;
    }
    .sign-clear,.sign-box .sph{display:none !important}
    
    /* --- Control estricto de paginación para evitar cortes de párrafos y páginas en blanco --- */
    h1,h2,h3,h4,h5,.os-h2,.s-sec h4,.s-title,.cl-t,.plantbl caption,.tarcard caption{break-after:avoid !important;page-break-after:avoid !important}
    p,li{orphans:2;widows:2;break-inside:auto}
    .s-sec,.s-kv .kv,.sign-area,.sign-box,.s-foot,.os-h2,.tarwrap,.tarcard,.os-foot,.os-conf,.dash-kpi,.dash-card,.frow,.dash-alert{break-inside:avoid !important;page-break-inside:avoid !important}
    table{break-inside:auto}
    thead{display:table-header-group}
    tr{break-inside:avoid !important;page-break-inside:avoid !important}
    .sign-area{break-before:avoid !important}
    /* Colores de marca fieles en impresión */
    .os-cover,.tarcard caption,.plantbl caption,.plantbl .os-total td,.dash-kpi .v,.fchip,.fbar>i{-webkit-print-color-adjust:exact !important;print-color-adjust:exact !important}
  }

  /* ---- SweetAlert2 Custom Theme ---- */
  .swal2-popup { padding: 32px 45px !important; background: var(--surface) !important; color: var(--fg) !important; border: 1px solid var(--border) !important; border-radius: var(--radius) !important; box-shadow: var(--shadow-lg) !important; font-family: var(--sans) !important; }
  .swal2-title { color: var(--fg) !important; font-family: var(--display) !important; font-size: 22px !important; padding-top: 1em !important; }
  .swal2-html-container { color: var(--fg-soft) !important; font-size: 14.5px !important; margin-bottom: 0.5em !important; }
  .swal2-input { font-family: var(--sans) !important; font-size: 15px !important; color: var(--fg) !important; background: var(--surface-2) !important; border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; transition: .16s !important; max-width: 100% !important; margin: 1em auto !important; box-shadow: none !important; }
  .swal2-input:focus { outline: none !important; border-color: var(--brand) !important; box-shadow: 0 0 0 3px var(--brand-ghost) !important; }
  .swal2-input::placeholder { color: var(--fg-faint) !important; }
  .swal2-validation-message { background: var(--err-ghost) !important; color: var(--err) !important; font-size: 13px !important; font-weight: 500 !important; border-radius: var(--radius-sm) !important; padding: 10px 14px !important; border: 1px solid var(--err) !important; margin-top: 0 !important; }
  .swal2-actions { gap: 10px !important; margin-top: 1.5em !important; }
  .swal2-container.swal2-backdrop-show { background: rgba(0,0,0,0.4) !important; backdrop-filter: blur(4px) !important; }
/* ============================================================
   SECCIÓN 18 : ORGANISMO PANEL ADMIN + RESPONSIVE
   (bloque 2 original: shell admin índigo, variantes glass,
   media queries)
   ============================================================ */
  .dash-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:16px}
  .dash-date{font-size:11.5px;color:var(--fg-faint);text-align:right;line-height:1.5}
  .dash-date b{color:var(--fg);font-size:14px;font-family:var(--mono);font-weight:700}
  .dash-kpis{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
  .dash-kpi{
    background:linear-gradient(135deg,var(--surface) 0%,var(--surface-2) 100%);
    border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;
    box-shadow:var(--shadow-sm);transition:all .22s cubic-bezier(.16,1,.3,1);
    position:relative;overflow:hidden;
  }
  .dash-kpi:hover{
    transform:translateY(-2px);box-shadow:var(--shadow-md);border-color:rgba(62,53,168,.25);
  }
  .dash-kpi::before{
    content:"";position:absolute;top:0;left:0;right:0;height:3px;
    background:linear-gradient(90deg,var(--brand),var(--brand-2));opacity:0;transition:opacity .2s ease;
  }
  .dash-kpi:hover::before{opacity:1}
  .dash-kpi .k{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--fg-faint);font-weight:700;min-height:24px}
  .dash-kpi .v{font-size:32px;font-weight:800;line-height:1.1;margin-top:6px;color:var(--fg);letter-spacing:-.03em}
  .dash-kpi .s{font-size:11.5px;color:var(--fg-soft);margin-top:6px;font-weight:500}
  .dem-kpis{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  @media(max-width:560px){.dem-kpis{grid-template-columns:1fr}}
  .dem-kpi{border:1px solid var(--border);border-radius:var(--radius);padding:13px 15px}
  .dem-kpi.dac{border-left:4px solid var(--brand)}.dem-kpi.fac{border-left:4px solid var(--teal)}
  .dem-h{display:flex;align-items:center;gap:8px;font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-soft)}
  .dem-h .dot{width:10px;height:10px;border-radius:50%;flex:0 0 auto}
  .dem-h .dem-cli{margin-left:auto;font-weight:500;text-transform:none;letter-spacing:0;color:var(--fg-faint);font-size:11px}
  .dem-v{font-family:var(--font-head, "Quicksand"),sans-serif;font-weight:800;font-size:26px;margin-top:6px;font-variant-numeric:tabular-nums}
  .dem-v span{font-size:12px;font-weight:600;color:var(--fg-faint)}
  .dem-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;color:var(--fg-soft)}
  .dem-tpm{font-family:var(--mono);font-weight:600;color:var(--brand)}
  .dem-bar{display:flex;height:14px;border-radius:7px;overflow:hidden;margin:14px 0 8px;background:var(--surface-2)}
  .dem-bar i{height:100%}.dem-bar .bd{background:linear-gradient(90deg,var(--brand),var(--brand-2))}.dem-bar .bf{background:linear-gradient(90deg,var(--teal),#1f8fa2)}
  .dem-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:11.5px;color:var(--fg-soft)}
  .dem-legend span{display:inline-flex;align-items:center;gap:6px}
  .dem-legend .sw{width:11px;height:11px;border-radius:3px}
  .dem-legend .dem-tot{margin-left:auto;font-weight:600;color:var(--fg)}
  .dem-note{font-size:11px;color:var(--fg-faint);margin:12px 0 0;line-height:1.5}
  .dash-cols{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;margin-top:16px}
  .dash-card{padding:0;overflow:hidden}
  .dash-card>.th{padding:14px 16px 6px}.dash-card>.th h3{font-size:14px;margin:0}
  .dash-funnel{padding:8px 16px 18px;display:flex;flex-direction:column;gap:11px}
  .frow{display:grid;grid-template-columns:132px 1fr 30px;align-items:center;gap:10px;font-size:12.5px}
  .frow .lab{font-weight:600;display:flex;align-items:center;gap:7px}
  .frow .fbar{height:22px;background:var(--surface-2);border-radius:6px;overflow:hidden}
  .frow .fbar>i{display:block;height:100%;border-radius:6px}
  .frow .n{text-align:right;font-weight:800;font-variant-numeric:tabular-nums}
  .dash-alert{display:flex;align-items:center;gap:11px;padding:11px 16px;border-top:1px solid var(--border-soft);font-size:13px}
  .dash-alert .ab{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;color:#fff;flex:0 0 auto}
  .dash-alert .ab svg{width:16px;height:16px}
  .dash-alert .n{margin-left:auto;font-weight:800;font-size:17px;font-variant-numeric:tabular-nums}
  /* ----- sección índigo (patrón sitio real: fondo brand + cards glass) ----- */
  .sec-indigo{background:var(--brand);color:#fff;border-radius:24px;padding:48px 44px;margin:30px auto 56px;max-width:1080px;box-shadow:0 18px 48px rgba(62,53,168,.28)}
  .sec-indigo .eyebrow-light{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#fff;background:rgba(255,255,255,.15);padding:5px 12px;border-radius:99px;display:inline-block;margin-bottom:14px}
  .sec-indigo h2{font-family:var(--display);font-size:clamp(26px,4vw,36px);font-weight:800;line-height:1.15;margin:0 0 28px;max-width:36ch}
  .sec-indigo .glass-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
  .sec-indigo .glass-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);border-radius:16px;padding:20px}
  .sec-indigo .glass-card strong{font-family:var(--display);font-size:18px;display:block;margin-bottom:8px}
  .sec-indigo .glass-card span{font-size:14px;line-height:1.6;color:rgba(255,255,255,.8)}
  @media(max-width:640px){.sec-indigo{padding:32px 24px}.sec-indigo .glass-grid{grid-template-columns:1fr}}
  /* ----- variante índigo para cards del admin (alineado al patrón glass) ----- */
  .dash-card.indigo{background:var(--brand);border-color:transparent;color:#fff}
  .dash-card.indigo>.th h3{color:#fff}
  .dash-card.indigo .dash-alert{color:#fff;border-top-color:rgba(255,255,255,.12)}
  .dash-card.indigo .dash-alert .n{color:#fff}
  .dash-card.indigo .dash-alert.none{color:rgba(255,255,255,.75)}
  .dash-alert.none{color:var(--fg-faint);justify-content:center}
  .fchip{display:inline-block;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px}
  /* ----- Tooltip Popover para Conformidad de Clientes ----- */
  .conf-chip-wrap { position: relative; display: inline-block; cursor: pointer; }
  .conf-popover {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--surface);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: 12px;
    box-shadow: 0 14px 34px -4px rgba(0, 0, 0, 0.28), 0 6px 16px -2px rgba(0, 0, 0, 0.18);
    padding: 12px 14px;
    min-width: 250px;
    max-width: 320px;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    z-index: 9999;
    white-space: normal;
    text-align: left;
  }
  .conf-popover::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: var(--surface) transparent transparent transparent;
  }
  .conf-chip-wrap:hover .conf-popover {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
  }
  /* ----- shell del panel admin (sidebar / tabs híbrido) ----- */
  .adshell{display:grid;grid-template-columns:212px 1fr;gap:0;align-items:start}
  .adnav{position:sticky;top:14px;display:flex;flex-direction:column;gap:3px;padding-right:16px;border-right:1px solid var(--border)}
  .adnav-item{display:flex;align-items:center;gap:11px;font-family:inherit;font-size:14px;font-weight:600;color:var(--fg-soft);background:none;border:0;border-radius:10px;padding:10px 13px;cursor:pointer;text-align:left;transition:background .15s,color .15s}
  .adnav-item:hover{background:var(--surface-2);color:var(--fg)}
  .adnav-item.active{background:var(--brand-ghost);color:var(--brand)}
  .adnav-item svg{width:19px;height:19px;flex:0 0 auto}
  .adnav-foot{margin-top:16px;padding-top:14px;border-top:1px solid var(--border-soft);display:flex;flex-direction:column;gap:3px}
  .adnav-lbl{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:var(--fg-faint);font-weight:700;padding:0 8px 4px}
  .adnav-foot a{display:flex;align-items:center;gap:9px;font-size:12px;color:var(--fg-soft);text-decoration:none;padding:7px 9px;border-radius:8px}
  .adnav-foot a:hover{background:var(--surface-2);color:var(--fg)}
  .adnav-foot a svg{width:15px;height:15px;flex:0 0 auto}
  /* ===== GAMIFIED SUBTABS BAR CON PULSO MORADO (BCS THEME) ===== */
  @keyframes purpleGlowPulse {
    0%, 100% {
      box-shadow: 0 0 12px rgba(62, 53, 168, 0.25), 0 0 0 1px rgba(86, 70, 201, 0.35);
      border-color: rgba(86, 70, 201, 0.4);
    }
    50% {
      box-shadow: 0 0 26px rgba(109, 87, 247, 0.6), 0 0 10px rgba(175, 130, 255, 0.45), 0 0 0 1.5px rgba(142, 114, 255, 0.75);
      border-color: rgba(142, 114, 255, 0.8);
    }
  }

  @keyframes purpleNeonBreathing {
    0%, 100% {
      background-position: 0% 50%;
      filter: drop-shadow(0 0 6px rgba(86, 70, 201, 0.5));
    }
    50% {
      background-position: 100% 50%;
      filter: drop-shadow(0 0 14px rgba(154, 107, 255, 0.9));
    }
  }

  @keyframes neonArrowPulse {
    0%, 100% {
      box-shadow: 0 0 8px rgba(142, 114, 255, 0.4), inset 0 0 4px rgba(142, 114, 255, 0.25);
      border-color: rgba(142, 114, 255, 0.4);
      color: var(--brand-2);
      transform: scale(1);
    }
    50% {
      box-shadow: 0 0 18px rgba(168, 85, 247, 0.85), 0 0 8px #c084fc, inset 0 0 8px rgba(168, 85, 247, 0.55);
      border-color: #a855f7;
      color: #c084fc;
      transform: scale(1.08);
    }
  }

  @keyframes badgePulse {
    0%, 100% { transform: scale(1); opacity: 0.9; }
    50% { transform: scale(1.22); opacity: 1; filter: brightness(1.25); }
  }

  .subtabs-nav-wrap {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 22px;
  }

  .subtabs-scroll-btn {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2);
    border: 1px solid rgba(142, 114, 255, 0.4);
    color: var(--brand-2);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    animation: neonArrowPulse 2.5s ease-in-out infinite;
  }

  .subtabs-scroll-btn:hover {
    background: var(--surface);
    transform: scale(1.15);
  }

  .subtabs-scroll-btn svg {
    width: 16px;
    height: 16px;
  }

  .subtabs-bar {
    position: relative;
    display: flex;
    flex: 1;
    gap: 8px;
    background: linear-gradient(135deg, var(--surface-2) 0%, rgba(62, 53, 168, 0.08) 100%);
    padding: 8px;
    border-radius: 16px;
    border: 1px solid rgba(86, 70, 201, 0.3);
    overflow-x: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--brand-2) transparent;
    animation: purpleGlowPulse 4s ease-in-out infinite;
    scroll-behavior: smooth;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
  }

  .subtabs-bar.is-dragging {
    cursor: grabbing !important;
    scroll-behavior: auto !important;
  }

  .subtabs-bar.is-dragging .subtab-btn {
    cursor: grabbing !important;
  }

  /* Barra de Scroll Gamificada con Pulso Neón */
  .subtabs-bar::-webkit-scrollbar {
    height: 6px;
  }
  .subtabs-bar::-webkit-scrollbar-track {
    background: rgba(62, 53, 168, 0.06);
    border-radius: 10px;
    margin: 0 8px;
  }
  .subtabs-bar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--brand), #8f75ff, var(--brand-2));
    background-size: 200% 200%;
    border-radius: 10px;
    box-shadow: 0 0 8px rgba(142, 114, 255, 0.7);
    animation: purpleNeonBreathing 3s linear infinite;
  }
  .subtabs-bar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, #7c5cff, #b794f6, #6342ff);
    box-shadow: 0 0 14px rgba(175, 130, 255, 0.95);
  }

  .subtab-btn {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    color: var(--fg-soft);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
    border-radius: 11px;
    padding: 9px 16px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    letter-spacing: -0.01em;
  }

  .subtab-btn:hover {
    color: var(--fg);
    background: rgba(86, 70, 201, 0.12);
    border-color: rgba(142, 114, 255, 0.35);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(62, 53, 168, 0.2);
  }

  .subtab-btn.active {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(86, 70, 201, 0.18) 100%);
    color: var(--brand-2);
    border: 1px solid rgba(142, 114, 255, 0.6);
    box-shadow: 0 4px 16px rgba(62, 53, 168, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3);
    transform: translateY(-1px);
  }

  /* Pestaña especial de IA con Aura y Pulso Gamer */
  .subtab-btn[data-cfgtab="ia"] {
    background: linear-gradient(135deg, rgba(86, 70, 201, 0.08) 0%, rgba(142, 114, 255, 0.12) 100%);
    border-color: rgba(142, 114, 255, 0.25);
  }
  .subtab-btn[data-cfgtab="ia"]::after {
    content: "●";
    color: #a855f7;
    font-size: 9px;
    margin-left: 2px;
    animation: badgePulse 2s ease-in-out infinite;
    text-shadow: 0 0 8px #a855f7, 0 0 14px #d8b4fe;
  }
  .subtab-btn[data-cfgtab="ia"].active {
    background: linear-gradient(135deg, var(--surface) 0%, rgba(142, 114, 255, 0.25) 100%);
    color: #7c3aed;
    border-color: #9333ea;
    box-shadow: 0 0 18px rgba(147, 51, 234, 0.4), inset 0 0 8px rgba(168, 85, 247, 0.2);
  }
  #navBallWidget{position:fixed;bottom:24px;right:24px;z-index:99999;display:flex;flex-direction:column;gap:8px}
  #navBallTopBtn{width:46px;height:46px;border-radius:50%;background:var(--brand);color:var(--on-brand);border:0;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(62,53,168,.4);cursor:pointer;transition:transform .2s,background .2s}
  #navBallTopBtn:hover{transform:translateY(-3px) scale(1.05);background:var(--brand-2)}
  .adcontent{padding-left:24px;min-width:0}
  .adsec[hidden]{display:none}
  .adsec-head{margin-bottom:16px}
  .adsec-head h2,.dash-head h2{font-family:var(--display);font-size:30px;font-weight:800;letter-spacing:-.01em;color:var(--fg);margin:0 0 4px}
  .adsec-head p,.dash-head p{margin:0;font-size:15.5px;line-height:1.5;color:var(--fg-soft);max-width:70ch}
  .adsec-eyebrow{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--brand);background:var(--eyebrow-bg);padding:5px 12px;border-radius:var(--radius-pill);display:inline-block;margin-bottom:10px}
  .cli-tools{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
  .cli-search{flex:1;min-width:240px;display:flex;align-items:center;gap:10px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:0 14px;box-shadow:var(--shadow-sm);transition:all .18s ease}
  .cli-search:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ghost)}
  .cli-search svg{width:16px;height:16px;color:var(--fg-faint);flex:0 0 auto}
  .cli-search input{flex:1;border:0;background:none;padding:10px 0;font-family:inherit;font-size:14px;color:var(--fg);outline:none}
  .cli-search input:focus{outline:none;box-shadow:none}
  #cliFiltro,#cliMine{font-family:inherit;font-size:13.5px;font-weight:600;color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:10px 14px;cursor:pointer;box-shadow:var(--shadow-sm);transition:all .18s ease}
  #cliFiltro:hover,#cliMine:hover{border-color:var(--brand);color:var(--brand)}
  #cliFiltro:focus,#cliMine:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-ghost)}
  .cli-count{font-size:12.5px;color:var(--fg-faint);font-weight:700;white-space:nowrap;padding:4px 10px;border-radius:var(--radius-pill);background:var(--surface-2)}
  .cli-pagination-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 20px;border-top:1px solid var(--border-soft);flex-wrap:wrap;gap:14px;background:var(--surface)}
  .cli-pagination-info{font-size:13px;color:var(--fg-soft);font-weight:600}
  .cli-pagination-nav{display:flex;align-items:center;gap:6px}
  .cli-page-btn{min-width:34px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--border);background:var(--surface-2);color:var(--fg);font-family:inherit;font-size:13px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease}
  .cli-page-btn:hover:not(:disabled){background:var(--brand);color:#fff;border-color:var(--brand);transform:translateY(-1px);box-shadow:var(--shadow-sm)}
  .cli-page-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 4px 12px rgba(62,53,168,.35)}
  .cli-page-btn:disabled{opacity:0.35;cursor:not-allowed;transform:none}
  .tpl-cols{display:grid;grid-template-columns:230px 1fr;gap:14px}
  @media(max-width:820px){.dash-kpis{grid-template-columns:repeat(2,1fr)}.dash-cols{grid-template-columns:1fr}.tpl-cols{grid-template-columns:1fr}}
  @media(max-width:780px){
    .adshell{display:block}
    .adnav{position:static;flex-direction:row;overflow-x:auto;border-right:0;border-bottom:1px solid var(--border);padding:0 0 8px;gap:6px;margin-bottom:14px}
    .adnav-item{white-space:nowrap;flex:0 0 auto}
    .adnav-foot{flex-direction:row;flex-wrap:wrap;margin-top:0;border-top:0;padding-top:0}.adnav-lbl{display:none}
    .adcontent{padding-left:0}
  }
  /* ============================================================
     SECCIÓN 19: VISOR HOLOGRÁFICO & ESCÁNER IA DE DOCUMENTOS
     ============================================================ */
  .ia-scan-modal-overlay{position:fixed;inset:0;z-index:100000;background:rgba(10,14,38,.75);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:16px;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease}
  .ia-scan-modal-overlay.active{opacity:1;visibility:visible;pointer-events:auto}
  .ia-scan-modal-card{width:100%;max-width:960px;max-height:92vh;background:var(--surface);border:1px solid var(--border);border-radius:20px;box-shadow:0 25px 70px -15px rgba(62,53,168,.35);display:flex;flex-direction:column;overflow:hidden;transform:scale(.95) translateY(12px);transition:transform .28s cubic-bezier(.16,1,.3,1)}
  .ia-scan-modal-overlay.active .ia-scan-modal-card{transform:scale(1) translateY(0)}
  .ia-scan-modal-header{padding:16px 22px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--surface),var(--surface-2))}
  .ia-scan-modal-body{padding:18px 22px;overflow-y:auto;display:grid;grid-template-columns:1.05fr 1.15fr;gap:20px}
  @media(max-width:768px){.ia-scan-modal-body{grid-template-columns:1fr}}
  .ia-scan-viewer-box{background:var(--surface-2);border:1px solid var(--border);border-radius:14px;padding:14px;position:relative;overflow:hidden;display:flex;flex-direction:column;min-height:380px}
  .ia-scan-line{position:absolute;left:0;right:0;height:2.5px;background:linear-gradient(90deg,rgba(62,53,168,0) 0%,var(--brand) 50%,rgba(62,53,168,0) 100%);box-shadow:0 0 10px 1px var(--brand);animation:iaScanLineAnim 2.6s ease-in-out infinite alternate;z-index:10;pointer-events:none}
  @keyframes iaScanLineAnim{0%{top:4%;opacity:.2}50%{opacity:1}100%{top:95%;opacity:.2}}
  .ia-scan-grid-overlay{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,rgba(62,53,168,.04) 1px,transparent 1px),linear-gradient(to bottom,rgba(62,53,168,.04) 1px,transparent 1px);background-size:20px 20px;z-index:2}
  .ia-scan-tag{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:6px;font-size:11.5px;font-weight:600;background:var(--surface);border:1px solid var(--border);color:var(--fg);box-shadow:0 2px 6px rgba(0,0,0,.04)}
  .ia-scan-tab-btn{font-family:inherit;font-size:11px;font-weight:700;padding:4px 10px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--fg-soft);cursor:pointer;transition:all .15s ease}
  .ia-scan-tab-btn:hover{color:var(--brand);border-color:var(--brand)}
  .ia-scan-tab-btn.active{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 2px 8px rgba(62,53,168,.3)}
  .ia-real-pdf-iframe{width:100%;height:100%;min-height:280px;border:none;border-radius:8px;background:#fff;display:block}
  .ia-dossier-pill{font-family:inherit;font-size:11px;font-weight:700;padding:4px 9px;border-radius:6px;border:1px solid var(--border);background:var(--surface);color:var(--fg);cursor:pointer;transition:all .15s ease}
  .ia-dossier-pill:hover{border-color:var(--brand);color:var(--brand)}
  .ia-dossier-pill.active{background:var(--brand);color:#fff;border-color:var(--brand)}
  .ia-doc-real-paper{
    background:#ffffff;
    color:#111827;
    border-radius:8px;
    border:1px solid #d1d5db;
    box-shadow:0 8px 24px rgba(0,0,0,.15);
    padding:16px 18px;
    font-size:11.5px;
    line-height:1.45;
    flex:1;
    overflow-y:auto;
    max-height:280px;
    position:relative;
    box-sizing:border-box;
  }
  .ia-doc-real-paper h4{margin:0 0 4px;font-size:13px;color:#003366;text-transform:uppercase}
  .ia-doc-real-paper .doc-header-line{border-bottom:2px solid #003366;padding-bottom:6px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
  .ia-doc-stamp-seal{
    position:absolute;
    bottom:14px;
    right:16px;
    width:70px;
    height:70px;
    border:2px dashed #003366;
    border-radius:50%;
    color:#003366;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    font-size:6px;
    font-weight:bold;
    transform:rotate(-10deg);
    opacity:.85;
    pointer-events:none;
  }
  .ia-doc-stamp-seal.red{border-color:#8b0000;color:#8b0000}
  .ia-doc-stamp-seal.green{border-color:#15803d;color:#15803d}

  /* ---- BARRA DE PROGRESO GLOBAL SUPERIOR ---- */
  #globalProgressBar{position:fixed;top:0;left:0;width:100%;height:3.5px;background:transparent;z-index:99999;pointer-events:none;opacity:0;transition:opacity .25s ease}
  #globalProgressBar .bar{width:100%;height:100%;background:linear-gradient(90deg,var(--teal,#0ea5e9),var(--brand,#3E35A8),#a855f7,var(--teal,#0ea5e9));background-size:200% 100%;transform:translateX(-100%)}
  #globalProgressBar.loading{opacity:1}
  #globalProgressBar.loading .bar{animation:globalProgressIndeterminate 1.3s infinite ease-in-out}
  #globalProgressBar.done{opacity:1}
  #globalProgressBar.done .bar{transform:translateX(0);transition:transform .2s ease-out}
  @keyframes globalProgressIndeterminate{0%{transform:translateX(-100%)}50%{transform:translateX(0)}100%{transform:translateX(100%)}}

  /* ---- ESTADOS DE CARGA EN BOTONES (SPINNERS Y FEEDBACK) ---- */
  .btn-spinner{display:inline-block;width:13px;height:13px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:btnSpinnerRot 0.7s linear infinite;vertical-align:-2px;margin-right:6px;flex-shrink:0}
  @keyframes btnSpinnerRot{to{transform:rotate(360deg)}}
  .btn.is-loading,.btn:disabled.is-loading{opacity:0.78!important;cursor:wait!important;pointer-events:none!important}

  /* ---- TARJETAS DE ARTEFACTOS Y SDKS ---- */
  .artifact-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;align-items:center;gap:14px;transition:all .2s ease;margin-bottom:10px}
  .artifact-card:hover{border-color:var(--brand);box-shadow:var(--shadow-md);transform:translateY(-1px)}
  .artifact-icon{width:42px;height:42px;border-radius:10px;display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
  .artifact-icon.android{background:#e8f5e9;color:#2e7d32}
  .artifact-icon.ios{background:#f1f5f9;color:#0f172a}
  .artifact-icon.postman{background:#fff7ed;color:#ea580c}
  .artifact-icon.doc{background:var(--brand-soft);color:var(--brand)}
  .artifact-info{flex:1;min-width:0}
  .artifact-title{font-size:13.5px;font-weight:700;color:var(--fg);margin-bottom:2px}
  .artifact-desc{font-size:12px;color:var(--fg-soft);line-height:1.4}
  .artifact-badge{font-size:10.5px;padding:2px 7px;border-radius:99px;background:var(--surface-2);color:var(--fg-soft);font-weight:600;margin-left:6px}

  /* ---- H1/H24: hidden by class instead of inline style="…" ----
     .is-hidden carries !important to beat id/class rules that
     set display (e.g. #navBallWidget{display:flex}). Showing an
     element = removing the class; hiding it = adding it. */
  .is-hidden{display:none!important}
  /* H24: companion rule — the hidden attribute must beat any
     component display on nodes marked .admin-sensitive. */
  .admin-sensitive[hidden]{display:none!important}

  /* ---- COOKIE CONSENT BANNER ---- */
  .cookie-banner {
    position: fixed;
    bottom: 20px;
    right: 20px;
    max-width: 440px;
    width: calc(100% - 40px);
    z-index: 99999;
    animation: cbSlideUp 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  }
  @keyframes cbSlideUp {
    from { opacity: 0; transform: translateY(24px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
  }
  .cookie-banner.cb-closing {
    animation: cbSlideDown 0.3s ease forwards;
  }
  @keyframes cbSlideDown {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(20px); }
  }
  .cb-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow-lg);
    backdrop-filter: blur(12px);
  }
  .cb-header {
    display: flex;
    gap: 12px;
    align-items: flex-start;
  }
  .cb-icon {
    color: var(--brand);
    flex-shrink: 0;
    margin-top: 2px;
  }
  .cb-content h4 {
    font-size: 14.5px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--fg);
  }
  .cb-content p {
    font-size: 12px;
    color: var(--fg-soft);
    margin: 0;
    line-height: 1.45;
  }
  .cb-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
  }



/* Soporte para prefers-reduced-motion: transición instantánea */
@media (prefers-reduced-motion: reduce) {
  html.no-capture, body.no-capture { transition: none; }
}

/* ============================================================
   REQ-0008 — MONITOR DE ERRORES (PT-01..04). Clases con prefijo `mon-` para no
   colisionar con el resto del panel; reutiliza .card/.btn/.field/.badge/.tablecard.
   ============================================================ */
.mon-filtergrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.1fr;gap:12px}
.mon-filterrow{display:flex;align-items:flex-end;gap:12px;margin-top:12px;flex-wrap:wrap}
@media(max-width:860px){.mon-filtergrid{grid-template-columns:1fr 1fr}}
.mon-mono{font-family:var(--mono);font-size:12px}
.mon-reqlink{font-family:var(--mono);font-size:11.5px;font-weight:600;color:var(--brand)}
.mon-masked{font-family:var(--mono);font-size:12px;color:var(--fg);letter-spacing:.02em}
.mon-rowact{display:flex;gap:6px;justify-content:flex-end;white-space:nowrap}
.mon-msgcell{max-width:220px}
.mon-msgcell .m{display:block;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* segmentado severidad */
.mon-seg{display:inline-flex;border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;background:var(--surface-2);padding:2px;gap:2px}
.mon-seg button{font-family:inherit;font-size:12.5px;font-weight:600;border:0;background:none;color:var(--fg-soft);padding:7px 14px;border-radius:9px;cursor:pointer;transition:.15s}
.mon-seg button.active{background:var(--surface);color:var(--brand);box-shadow:var(--shadow-sm)}

/* badges severidad / fuente */
.mon-sev{font-size:11px;font-weight:700;padding:3px 10px;border-radius:var(--radius-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:5px;border:1px solid transparent}
.mon-sev::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;display:inline-block}
.mon-sev.error{background:var(--err-soft);color:#b91c1c;border-color:var(--err-ghost)}
.mon-sev.warn{background:var(--warn-soft);color:#b45309;border-color:rgba(245,158,11,.25)}
.mon-sev.info{background:var(--surface-2);color:var(--fg-faint);border-color:var(--border)}
.mon-src{font-size:11px;font-weight:600;padding:3px 9px;border-radius:7px;white-space:nowrap;border:1px solid transparent}
.mon-src.app{background:var(--brand-soft);color:var(--brand);border-color:var(--brand-ghost)}
.mon-src.correo{background:#e0f2fe;color:#0369a1;border-color:rgba(3,105,161,.2)}
.mon-src.geo{background:#ffedd5;color:#9a3412;border-color:rgba(154,52,18,.2)}
.mon-src.bd{background:#f3e8ff;color:#7e22ce;border-color:rgba(126,34,206,.2)}
.mon-src.activity{background:var(--surface-2);color:var(--fg-soft);border-color:var(--border)}

/* nota (aviso de retención, MSG-09) */
.mon-notebar{display:flex;align-items:center;gap:10px;font-size:12.5px;color:#92400e;padding:10px 14px;border-radius:var(--radius-md);background:var(--warn-soft);border:1px solid rgba(245,158,11,.3);margin-bottom:14px}

/* estados grandes (vacío / error / sin permiso) */
.mon-statewrap{display:grid;place-items:center;padding:52px 20px;text-align:center}
.mon-stateicon{width:60px;height:60px;border-radius:16px;display:grid;place-items:center;margin-bottom:16px}
.mon-stateicon svg{width:28px;height:28px}
.mon-stateicon.neutral{background:var(--surface-2);color:var(--fg-faint)}
.mon-stateicon.deny{background:var(--err-soft);color:var(--err)}
.mon-stateicon.err{background:var(--warn-soft);color:#b45309}
.mon-statewrap h3{font-size:18px;margin:0 0 6px}
.mon-statewrap p{color:var(--fg-soft);font-size:14px;margin:0 auto;max-width:46ch}

/* detalle + traza */
.mon-detail-grid{display:grid;grid-template-columns:1.25fr .95fr;gap:16px;align-items:start}
@media(max-width:1100px){.mon-detail-grid{grid-template-columns:1fr}}
.mon-kv{display:grid;grid-template-columns:150px 1fr;gap:10px 16px;padding:16px 18px;margin:0}
.mon-kv dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--fg-faint);font-weight:700}
.mon-kv dd{margin:0;font-size:13.5px;color:var(--fg);word-break:break-word}
.mon-revealbtn{font-family:inherit;font-size:11px;font-weight:700;border:1px solid var(--border);background:var(--surface);color:var(--brand);border-radius:7px;padding:2px 8px;margin-left:7px;cursor:pointer;display:inline-flex;align-items:center;gap:4px;vertical-align:middle}
.mon-revealbtn:hover{border-color:var(--brand);background:var(--brand-soft)}
.mon-revealbtn svg{width:11px;height:11px}
.mon-badge-rev{font-size:10px;font-weight:700;color:var(--ok);background:var(--ok-soft);border-radius:var(--radius-pill);padding:2px 8px;margin-left:6px}
.mon-secret{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:12px;color:var(--fg-faint)}
.mon-secret .lock{width:13px;height:13px;color:var(--fg-faint)}
.mon-secret .nolabel{font-size:10.5px;font-weight:600;color:var(--fg-faint)}
.mon-trace{padding:14px 18px 18px}
.mon-tstep{position:relative;padding:0 0 16px 28px;border-left:2px solid var(--border)}
.mon-tstep:last-child{border-left-color:transparent;padding-bottom:0}
.mon-tstep::before{content:"";position:absolute;left:-7px;top:2px;width:12px;height:12px;border-radius:50%;background:var(--surface);border:2px solid var(--brand)}
.mon-tstep.err::before{border-color:var(--err);background:var(--err-soft)}
.mon-tstep.ok::before{border-color:var(--ok);background:var(--ok-soft)}
.mon-tstep.warn::before{border-color:var(--warn);background:var(--warn-soft)}
.mon-tstep .tt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mon-tstep .tt b{font-size:13px}
.mon-tstep .ts{font-family:var(--mono);font-size:11px;color:var(--fg-faint)}
.mon-tstep .tbody{font-size:12.5px;color:var(--fg-soft);margin-top:3px;word-break:break-word}
.mon-auditline{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-faint)}
.mon-auditline svg{width:14px;height:14px;flex:0 0 auto;color:var(--brand)}

/* modal del Monitor (PT-03 / PT-04) */
.mon-modal-back{position:fixed;inset:0;z-index:1200;background:rgba(15,23,42,.45);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:grid;place-items:center;padding:20px}
.mon-modal-box{background:var(--surface);border-radius:var(--radius);max-width:468px;width:100%;box-shadow:var(--shadow-lg);overflow:hidden;border:1px solid var(--border)}
.mon-modal-head{display:flex;align-items:center;gap:12px;padding:20px 22px 0}
.mon-modal-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:0 0 auto}
.mon-modal-ic svg{width:21px;height:21px}
.mon-modal-ic.warn{background:var(--warn-soft);color:#b45309}
.mon-modal-ic.brand{background:var(--brand-soft);color:var(--brand)}
.mon-modal-box h3{font-size:17px;margin:0}
.mon-modal-body{padding:14px 22px 4px}
.mon-modal-body p{color:var(--fg-soft);font-size:13.5px;margin:0 0 12px;line-height:1.55}
.mon-effectbox{background:var(--surface-2);border:1px solid var(--border);border-radius:var(--radius-md);padding:12px 14px;font-size:12.5px;color:var(--fg-soft);margin:0 0 14px}
.mon-effectbox .row{display:flex;justify-content:space-between;gap:12px;padding:3px 0}
.mon-effectbox .row span:first-child{color:var(--fg-faint)}
.mon-effectbox .row span:last-child{font-weight:600;color:var(--fg);text-align:right}
.mon-modal-foot{display:flex;gap:10px;justify-content:flex-end;padding:16px 22px 20px}
@media(prefers-reduced-motion:reduce){.mon-revealbtn,.mon-seg button{transition:none}}

/* ============================================================
   REQ-0010 — Colaboración interna del staff (PT-01 / PT-02)
   ============================================================ */
.notas-panel .notas-header{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.notas-panel .notas-title{font-size:15px;margin:0}
.notas-panel .notas-interno{font-size:11px}
.notas-lista{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.nota-item{border:1px solid var(--line,#e2e8f0);border-radius:10px;padding:10px 12px;background:#fff}
.nota-item.nota-propia{background:#f3f1fb;border-color:#d8d3f2}
.nota-head{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--fg-soft,#64748b);margin-bottom:4px}
.nota-autor{font-weight:700;color:#1e293b}
.nota-rol{font-size:10px}
.nota-editado{font-style:italic}
.nota-cuerpo{font-size:13.5px;color:#1e293b;white-space:pre-wrap;word-break:break-word}
.nota-mencion{color:#3e35a8;font-weight:600;margin:0 2px}
.nota-marcador{color:#94a3b8}
.nota-acciones{display:flex;gap:6px;margin-top:6px}
.btn.mini{font-size:11px;padding:3px 8px}
.btn.mini.danger{color:#b3261e;border-color:#f3c9c4}
.notas-redaccion{border-top:1px solid var(--line,#e2e8f0);padding-top:12px}
.notas-aviso-pii{font-size:12px;color:#92400e;background:#fffbeb;border:1px solid #fde68a;border-radius:8px;padding:8px 10px;margin:0 0 8px}
.notas-textarea{width:100%;min-height:72px;resize:vertical;border:1px solid var(--line,#e2e8f0);border-radius:8px;padding:8px;font:inherit}
.notas-pie{display:flex;justify-content:space-between;font-size:11px;color:var(--fg-soft,#64748b);margin:4px 0 8px}
.notas-contador.warn{color:#b45309}
.notas-contador.danger{color:#b3261e;font-weight:700}
.notas-vacio{font-size:13px;color:var(--fg-soft,#64748b)}
.notif-badge{background:#b3261e;color:#fff;min-width:18px;text-align:center;display:none}
.notif-badge.on{display:inline-block}
.notif-panel{padding:12px 14px;margin:10px 0}
.notif-item{display:flex;gap:8px;align-items:center;padding:8px;border-radius:8px;cursor:pointer;font-size:13px}
.notif-item.no-leida{background:#f3f1fb}
.notif-actor{font-weight:700}
.notif-expediente{color:var(--fg-soft,#64748b);margin-left:auto}
.notif-pie{font-size:11px;color:var(--fg-soft,#64748b);margin-top:8px}

/* ============================================================
   FIN DE APP.CSS
   ============================================================ */