:root{
    /* Paleta: seguridad institucional + cumplimiento. Azul pizarra profundo,
       acero, y un ámbar señal para alertas — el color del "riesgo detectado". */
    --ink:#0e1726;
    --slate-900:#16233a;
    --slate-800:#1d2e49;
    --slate-700:#273a59;
    --line:#2c3e5c;
    --line-soft:#e4e8f0;
    --paper:#f7f8fb;
    --paper-2:#ffffff;
    --steel:#5b6b85;
    --steel-2:#8896ad;
    --mist:#aeb9cc;
    --brand:#1f5fbf;       /* azul acción */
    --brand-deep:#16448a;
    --brand-soft:#e8f0fc;
    --signal:#d98324;      /* ámbar señal/alerta */
    --signal-soft:#fcefdc;
    --alert:#c0392b;       /* alerta crítica */
    --alert-soft:#fbe7e4;
    --ok:#2e8b57;
    --ok-soft:#e3f3ea;
    --txt:#1a2538;
    --txt-soft:#5b6b85;
    --radius:10px;
    --radius-lg:16px;
    --shadow:0 1px 2px rgba(14,23,38,.06),0 6px 20px rgba(14,23,38,.08);
    --shadow-lg:0 12px 40px rgba(14,23,38,.16);
    --mono:'SFMono-Regular',ui-monospace,'JetBrains Mono',Menlo,Consolas,monospace;
    --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
    --display:'Inter',-apple-system,'Segoe UI',sans-serif;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{height:100%}
  body{font-family:var(--sans);color:var(--txt);background:var(--paper);
    -webkit-font-smoothing:antialiased;font-size:14px;line-height:1.5}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  input,select,textarea{font-family:inherit;font-size:14px}
  a{color:var(--brand);text-decoration:none}
  ::selection{background:var(--brand-soft)}
  #app{min-height:100vh}

  /* ---------- utilidades ---------- */
  .hidden{display:none!important}
  .mono{font-family:var(--mono)}
  .muted{color:var(--txt-soft)}
  .tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
    padding:3px 9px;border-radius:100px;letter-spacing:.02em}
  .tag.sarlaft{background:var(--brand-soft);color:var(--brand-deep)}
  .tag.ptee{background:#efe9fb;color:#5b3a9e}
  .tag.gd{background:var(--ok-soft);color:#1f6b42}
  .tag.sgc{background:#fff3e0;color:#b8662a}
  .tag.sig{background:var(--signal-soft);color:#9a5a13}
  .tag.crit{background:var(--alert-soft);color:var(--alert)}
  .tag.ok{background:var(--ok-soft);color:#1f6b42}
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;
    padding:4px 11px;border-radius:100px;border:1px solid var(--line-soft);background:#fff}

  /* ===================================================================
     PANTALLA DE BIENVENIDA / AUTENTICACIÓN
     =================================================================== */
  .gate{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr;
    background:var(--ink)}
  @media(max-width:880px){
    .gate{grid-template-columns:1fr}
    .gate-art{display:none}
    .gate-form{padding:28px 20px;flex-direction:column}
    /* cabecera de marca compacta solo en móvil */
    .mobile-brand{display:flex !important}
  }
  /* ===== PORTADA v5.0 — identidad CENSELC (azul #1f295a + ámbar) ===== */
  .gate-art{position:relative;overflow:hidden;
    background:
      radial-gradient(130% 100% at 12% 8%,#26346e 0%,transparent 52%),
      radial-gradient(100% 90% at 88% 92%,#152452 0%,transparent 58%),
      linear-gradient(155deg,#0d1533 0%,#1f295a 55%,#0a1128 100%)}
  /* malla de puntos tenue */
  .gate-art .art-mesh{position:absolute;inset:0;opacity:.6;
    background-image:radial-gradient(rgba(150,180,240,.10) 1px,transparent 1.4px);
    background-size:26px 26px;
    mask-image:radial-gradient(120% 120% at 25% 15%,#000 35%,transparent 82%)}
  /* anillos concéntricos tipo radar */
  .gate-art .art-rings{position:absolute;width:640px;height:640px;right:-180px;top:50%;
    transform:translateY(-50%);border-radius:50%;pointer-events:none;
    background:
      radial-gradient(circle, transparent 0 118px, rgba(150,180,240,.07) 119px 120px, transparent 121px),
      radial-gradient(circle, transparent 0 178px, rgba(150,180,240,.06) 179px 180px, transparent 181px),
      radial-gradient(circle, transparent 0 248px, rgba(150,180,240,.05) 249px 250px, transparent 251px),
      radial-gradient(circle, transparent 0 318px, rgba(245,177,61,.10) 319px 321px, transparent 322px);
    animation:ringPulse 7s ease-in-out infinite}
  @keyframes ringPulse{0%,100%{opacity:.65}50%{opacity:1}}
  /* línea de escaneo que baja */
  .gate-art .art-scan{position:absolute;left:0;right:0;height:180px;top:-180px;pointer-events:none;
    background:linear-gradient(180deg,transparent,rgba(120,160,240,.08) 60%,rgba(245,177,61,.05));
    animation:scanDown 6s linear infinite}
  @keyframes scanDown{0%{top:-180px}100%{top:100%}}

  /* marca de agua: composición de seguridad (cámara, señal, escudo, móvil) */
  .gate-art::after{content:"";position:absolute;right:-2%;bottom:2%;width:min(48%,560px);height:70%;
    background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20420%20420%22%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%20%3C%21--%20c%C3%A1mara%20de%20seguridad%20moderna%20--%3E%20%3Cg%3E%20%3Crect%20x%3D%2270%22%20y%3D%22120%22%20width%3D%22150%22%20height%3D%2270%22%20rx%3D%2214%22/%3E%20%3Cpath%20d%3D%22M220%20138%20L292%20112%20L292%20198%20L220%20172%20Z%22/%3E%20%3Ccircle%20cx%3D%22112%22%20cy%3D%22155%22%20r%3D%2218%22/%3E%20%3Ccircle%20cx%3D%22112%22%20cy%3D%22155%22%20r%3D%227%22/%3E%20%3Cpath%20d%3D%22M104%20190%20L104%20224%20M170%20190%20L170%20224%22/%3E%20%3Cpath%20d%3D%22M84%20244%20Q137%20218%20190%20244%22/%3E%20%3C%21--%20soporte%20--%3E%20%3Cpath%20d%3D%22M137%20224%20L137%20244%22/%3E%20%3C/g%3E%20%3C%21--%20ondas%20de%20se%C3%B1al%20saliendo%20de%20la%20c%C3%A1mara%20--%3E%20%3Cpath%20d%3D%22M300%20120%20Q330%20155%20300%20190%22%20opacity%3D%220.7%22/%3E%20%3Cpath%20d%3D%22M320%20100%20Q365%20155%20320%20210%22%20opacity%3D%220.5%22/%3E%20%3C%21--%20escudo%20con%20check%20%28protecci%C3%B3n%29%20--%3E%20%3Cg%20transform%3D%22translate%28250%2C250%29%22%3E%20%3Cpath%20d%3D%22M55%2010%20L100%2028%20L100%2070%20Q100%20110%2055%20130%20Q10%20110%2010%2070%20L10%2028%20Z%22/%3E%20%3Cpath%20d%3D%22M38%2068%20L50%2082%20L76%2052%22/%3E%20%3C/g%3E%20%3C%21--%20m%C3%B3vil%20con%20la%20app%20%28control%20desde%20el%20celular%29%20--%3E%20%3Cg%20transform%3D%22translate%2870%2C250%29%22%3E%20%3Crect%20x%3D%2220%22%20y%3D%2210%22%20width%3D%2270%22%20height%3D%22120%22%20rx%3D%2212%22/%3E%20%3Ccircle%20cx%3D%2255%22%20cy%3D%22115%22%20r%3D%224%22/%3E%20%3Crect%20x%3D%2234%22%20y%3D%2228%22%20width%3D%2242%22%20height%3D%2230%22%20rx%3D%224%22%20opacity%3D%220.7%22/%3E%20%3Cpath%20d%3D%22M34%2072%20L76%2072%20M34%2086%20L64%2086%22%20opacity%3D%220.6%22/%3E%20%3C/g%3E%20%3C/svg%3E") no-repeat right bottom/contain;
    opacity:.09;z-index:1;pointer-events:none}
  @media(max-width:900px){.gate-art::after{display:none}}

  .gate-art .art-body{position:relative;z-index:2;height:100%;
    display:flex;flex-direction:column;justify-content:space-between;padding:46px 50px;color:#cdd8ec}

  .art-top{display:flex;align-items:center;gap:14px}
  .art-logo-wrap{width:62px;height:62px;border-radius:50%;flex:none;overflow:hidden;
    box-shadow:0 6px 22px rgba(0,0,0,.4),0 0 0 3px #fff,0 0 0 4px rgba(245,177,61,.5),0 0 34px rgba(245,177,61,.28)}
  .art-logo{width:100%;height:100%;object-fit:cover;display:block;border-radius:50%;transform:scale(1.02)}
  .art-brand-txt b{display:block;font-size:17px;color:#fff;letter-spacing:1.5px;font-weight:800}
  .art-brand-txt span{font-size:11.5px;color:#f5b13d;letter-spacing:1px;text-transform:uppercase}

  .art-headline{max-width:460px}
  .art-badge{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;font-weight:600;
    color:#cfe0ff;background:rgba(120,160,240,.10);border:1px solid rgba(150,180,240,.22);
    padding:6px 13px;border-radius:100px;margin-bottom:20px}
  .art-badge .pulse{width:8px;height:8px;border-radius:50%;background:#f5b13d;
    box-shadow:0 0 0 0 rgba(245,177,61,.6);animation:pulseDot 2s infinite}
  @keyframes pulseDot{0%{box-shadow:0 0 0 0 rgba(245,177,61,.6)}70%{box-shadow:0 0 0 10px rgba(245,177,61,0)}100%{box-shadow:0 0 0 0 rgba(245,177,61,0)}}
  .art-headline h1.spdc{font-family:var(--display);font-weight:800;font-size:72px;
    line-height:1;color:#fff;letter-spacing:2px;margin:0;
    text-shadow:0 4px 30px rgba(90,140,240,.3)}
  .art-headline h1.spdc .spdc-ver{font-size:22px;font-weight:600;color:#f5b13d;
    letter-spacing:.5px;vertical-align:baseline;margin-left:8px;text-shadow:none}
  .art-headline .spdc-tagline{margin-top:10px;font-size:16px;font-weight:600;color:#f5b13d;letter-spacing:2px;text-transform:uppercase}
  .art-headline .spdc-sub{margin-top:12px;font-size:14px;color:#aebdda;line-height:1.6;max-width:430px}

  .art-systems{display:flex;flex-direction:column;gap:12px;margin-top:34px}
  .art-sys{display:flex;align-items:center;gap:13px;padding:9px 13px;border-radius:11px;
    background:rgba(255,255,255,.035);border:1px solid rgba(150,180,240,.10);
    transition:transform .2s,background .2s}
  .art-sys:hover{transform:translateX(4px);background:rgba(255,255,255,.06)}
  .art-sys .sys-ic{width:34px;height:34px;border-radius:9px;flex:none;display:grid;place-items:center;
    color:#fff;font-weight:800;font-size:12.5px;letter-spacing:.3px;box-shadow:0 4px 12px rgba(0,0,0,.25)}
  .art-sys b{display:block;font-size:13px;color:#eef3fb;font-weight:600}
  .art-sys small{font-size:11px;color:#8aa0c4}
  .art-foot{font-size:11px;color:#6d82ab;line-height:1.6}

  .gate-form{display:flex;align-items:center;justify-content:center;padding:40px;
    background:var(--paper)}
  .auth-card{width:100%;max-width:400px}
  .auth-card .head{margin-bottom:26px}
  .auth-card .head h2{font-size:23px;font-weight:800;letter-spacing:-.4px;color:var(--ink)}
  .auth-card .head p{margin-top:6px;font-size:13px;color:var(--txt-soft)}
  .field{margin-bottom:15px}
  .field label{display:block;font-size:12px;font-weight:600;color:var(--txt);margin-bottom:6px}
  .field input,.field select{width:100%;padding:11px 13px;border:1px solid var(--line-soft);
    border-radius:var(--radius);background:#fff;color:var(--txt);transition:.15s;outline:none}
  .field input:focus,.field select:focus{border-color:var(--brand);
    box-shadow:0 0 0 3px var(--brand-soft)}
  .field .hint{font-size:11px;color:var(--txt-soft);margin-top:5px}
  .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
    padding:11px 18px;border-radius:var(--radius);font-weight:600;font-size:14px;
    transition:.15s;white-space:nowrap}
  .btn-primary{background:var(--brand);color:#fff;width:100%}
  .btn-primary:hover{background:var(--brand-deep)}
  .btn-ghost{background:#fff;border:1px solid var(--line-soft);color:var(--txt)}
  .btn-ghost:hover{border-color:var(--steel-2);background:var(--paper)}
  .btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
  .btn-signal{background:var(--signal);color:#fff}
  .btn-signal:hover{filter:brightness(.94)}
  .btn-danger{background:var(--alert);color:#fff}
  .btn-block{width:100%}
  .auth-switch{margin-top:18px;text-align:center;font-size:13px;color:var(--txt-soft)}
  .auth-switch button{color:var(--brand);font-weight:600}
  .auth-err{background:var(--alert-soft);color:var(--alert);font-size:12.5px;
    padding:9px 12px;border-radius:8px;margin-bottom:14px;font-weight:500}
  .auth-note{margin-top:20px;padding:12px 14px;background:var(--brand-soft);
    border-radius:10px;font-size:12px;color:var(--brand-deep);line-height:1.55}
  .seed-list{font-family:var(--mono);font-size:11px;margin-top:8px;line-height:1.7}

  /* ===================================================================
     APLICACIÓN (post-login)
     =================================================================== */
  .shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh}
  @media(max-width:920px){.shell{grid-template-columns:1fr}}
  .sidebar{background:var(--ink);color:#aeb9cc;display:flex;flex-direction:column;
    position:sticky;top:0;height:100vh}
  .side-brand{padding:20px 18px;border-bottom:1px solid rgba(140,170,220,.1);
    display:flex;align-items:center;gap:11px}
  .side-brand .art-mark{width:38px;height:38px;font-size:15px;border-radius:10px}
  .side-brand b{color:#fff;font-size:14px;display:block;line-height:1.1}
  .side-brand span{font-size:10.5px;color:#7f93b6}
  .nav{flex:1;overflow-y:auto;padding:12px 10px}
  .nav-group{margin-bottom:6px}
  .nav-group .lbl{font-size:10px;font-weight:700;letter-spacing:.08em;
    text-transform:uppercase;color:#5f7398;padding:12px 12px 6px}
  .nav-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:9px;
    font-size:13.5px;color:#aeb9cc;width:100%;text-align:left;transition:.12s;position:relative}
  .nav-item:hover{background:rgba(140,170,220,.08);color:#fff}
  .nav-item.active{background:var(--brand);color:#fff;font-weight:600}
  .nav-item .ic{width:18px;height:18px;flex:none;opacity:.9}
  .nav-item .badge{margin-left:auto;background:var(--signal);color:#fff;font-size:10px;
    font-weight:700;padding:1px 7px;border-radius:100px;min-width:18px;text-align:center}
  .nav-item.active .badge{background:rgba(255,255,255,.25)}
  .side-user{padding:12px;border-top:1px solid rgba(140,170,220,.1)}
  .su-card{display:flex;align-items:center;gap:10px;padding:8px;border-radius:10px;
    background:rgba(140,170,220,.06)}
  .su-avatar{width:34px;height:34px;border-radius:9px;background:var(--brand);color:#fff;
    display:grid;place-items:center;font-weight:700;font-size:13px;flex:none}
  .su-info{flex:1;min-width:0}
  .su-info b{color:#fff;font-size:12.5px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .su-info span{font-size:10.5px;color:#8aa0c4}
  .su-out{color:#8aa0c4;padding:6px;border-radius:8px}
  .su-out:hover{background:rgba(192,57,43,.2);color:#ff9b8f}

  .main{display:flex;flex-direction:column;min-width:0;background:var(--paper)}
  .topbar{position:sticky;top:0;z-index:30;background:rgba(247,248,251,.9);
    backdrop-filter:blur(10px);border-bottom:1px solid var(--line-soft);
    padding:14px 26px;display:flex;align-items:center;gap:16px}
  .topbar h1{font-size:18px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
  .topbar .crumb{font-size:12px;color:var(--txt-soft);margin-top:1px}
  .topbar .spacer{flex:1}
  .topsearch{position:relative}
  .topsearch input{width:220px;padding:8px 12px 8px 32px;border:1px solid var(--line-soft);
    border-radius:9px;background:#fff;outline:none}
  .topsearch input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
  .topsearch svg{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--steel-2)}
  .view{padding:26px;max-width:1240px;width:100%;margin:0 auto;flex:1}
  @media(max-width:920px){.view{padding:16px}.topbar{padding:12px 16px}}

  /* tarjetas y secciones */
  .card{background:#fff;border:1px solid var(--line-soft);border-radius:var(--radius-lg);
    box-shadow:var(--shadow)}
  .card-pad{padding:20px}
  .grid{display:grid;gap:16px}
  .g-2{grid-template-columns:repeat(2,1fr)}
  .g-3{grid-template-columns:repeat(3,1fr)}
  .g-4{grid-template-columns:repeat(4,1fr)}
  @media(max-width:900px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}
  .section-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
  .section-head h2{font-size:16px;font-weight:700;color:var(--ink)}
  .section-head .spacer{flex:1}

  /* KPI */
  .kpi{padding:18px 18px 16px;border-radius:var(--radius-lg);background:#fff;
    border:1px solid var(--line-soft);box-shadow:var(--shadow);position:relative;overflow:hidden}
  .kpi .k-top{display:flex;align-items:center;justify-content:space-between}
  .kpi .k-ic{width:36px;height:36px;border-radius:10px;display:grid;place-items:center}
  .kpi .k-val{font-size:30px;font-weight:800;letter-spacing:-1px;color:var(--ink);margin-top:10px}
  .kpi .k-lbl{font-size:12.5px;color:var(--txt-soft);margin-top:2px}
  .kpi .k-trend{font-size:11px;font-weight:600;margin-top:8px;display:inline-flex;gap:4px;align-items:center}

  /* tablas */
  .tbl-wrap{overflow-x:auto;border-radius:var(--radius-lg);border:1px solid var(--line-soft)}
  table{width:100%;border-collapse:collapse;background:#fff;font-size:13px}
  thead th{text-align:left;font-size:11px;font-weight:700;letter-spacing:.03em;
    text-transform:uppercase;color:var(--steel);padding:11px 14px;
    background:var(--paper);border-bottom:1px solid var(--line-soft);white-space:nowrap}
  tbody td{padding:11px 14px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
  tbody tr:last-child td{border-bottom:none}
  tbody tr:hover{background:var(--paper)}
  td.num{text-align:right;font-family:var(--mono);font-size:12.5px}
  .row-actions{display:flex;gap:6px;justify-content:flex-end}
  .icon-btn{width:30px;height:30px;border-radius:8px;display:grid;place-items:center;
    color:var(--steel);border:1px solid transparent}
  .icon-btn:hover{background:var(--paper);border-color:var(--line-soft);color:var(--brand)}
  .icon-btn.del:hover{color:var(--alert);background:var(--alert-soft);border-color:transparent}

  /* formularios en panel */
  .form-grid{display:grid;gap:14px}
  .form-grid.two{grid-template-columns:1fr 1fr}
  @media(max-width:700px){.form-grid.two{grid-template-columns:1fr}}
  textarea{width:100%;padding:11px 13px;border:1px solid var(--line-soft);border-radius:var(--radius);
    background:#fff;outline:none;resize:vertical;min-height:80px;line-height:1.55}
  textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}

  /* drawer / modal */
  .overlay{position:fixed;inset:0;background:rgba(14,23,38,.5);backdrop-filter:blur(2px);
    z-index:100;display:flex;justify-content:flex-end;animation:fade .2s}
  @keyframes fade{from{opacity:0}to{opacity:1}}
  .drawer{width:520px;max-width:92vw;background:var(--paper);height:100%;overflow-y:auto;
    box-shadow:var(--shadow-lg);animation:slide .25s cubic-bezier(.2,.7,.3,1)}
  @keyframes slide{from{transform:translateX(30px);opacity:.5}to{transform:translateX(0);opacity:1}}
  .drawer-head{position:sticky;top:0;background:#fff;padding:18px 22px;
    border-bottom:1px solid var(--line-soft);display:flex;align-items:center;gap:12px;z-index:2}
  .drawer-head h3{font-size:16px;font-weight:700;color:var(--ink)}
  .drawer-head .x{margin-left:auto;width:32px;height:32px;border-radius:8px;display:grid;
    place-items:center;color:var(--steel)}
  .drawer-head .x:hover{background:var(--paper);color:var(--alert)}
  .drawer-body{padding:22px}
  .drawer-foot{position:sticky;bottom:0;background:#fff;padding:14px 22px;
    border-top:1px solid var(--line-soft);display:flex;gap:10px;justify-content:flex-end}

  /* Variante ancha y centrada (para formularios con muchos campos, ej. titular) */
  .overlay.centered{justify-content:center;align-items:flex-start;padding:32px 16px}
  .overlay.centered .drawer{width:920px;max-width:96vw;height:auto;max-height:calc(100vh - 64px);
    border-radius:14px;animation:pop .22s cubic-bezier(.2,.7,.3,1)}
  @keyframes pop{from{transform:translateY(14px) scale(.99);opacity:.4}to{transform:none;opacity:1}}
  .overlay.centered .drawer-head{border-radius:14px 14px 0 0}
  .form-grid.three{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
  @media(max-width:820px){.form-grid.three{grid-template-columns:1fr 1fr}}
  @media(max-width:560px){.form-grid.three{grid-template-columns:1fr}}
  .form-sec{margin:6px 0 2px;padding-top:14px;border-top:1px solid var(--line-soft)}
  .form-sec:first-child{border-top:none;padding-top:0}
  .form-sec h4{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--brand-deep);margin-bottom:2px}
  .form-sec p{font-size:11.5px;color:var(--txt-soft)}

  /* toast */
  #toasts{position:fixed;bottom:20px;right:20px;z-index:200;display:flex;
    flex-direction:column;gap:10px}
  .toast{background:var(--ink);color:#fff;padding:12px 16px;border-radius:10px;
    box-shadow:var(--shadow-lg);font-size:13px;display:flex;align-items:center;gap:10px;
    animation:slideUp .25s;max-width:340px}
  @keyframes slideUp{from{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}
  .toast.ok{background:#1f6b42}.toast.warn{background:var(--signal)}.toast.err{background:var(--alert)}

  /* misc */
  .empty{text-align:center;padding:44px 20px;color:var(--txt-soft)}
  .empty svg{margin:0 auto 12px;color:var(--mist)}
  .empty b{display:block;color:var(--txt);font-size:14px;margin-bottom:4px}
  .chip-row{display:flex;flex-wrap:wrap;gap:8px}
  .filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:16px}
  .filterbar select,.filterbar input{padding:8px 11px;border:1px solid var(--line-soft);
    border-radius:9px;background:#fff;outline:none}
  .filterbar select:focus,.filterbar input:focus{border-color:var(--brand)}
  .seg{display:inline-flex;background:var(--paper);border:1px solid var(--line-soft);
    border-radius:10px;padding:3px}
  .seg button{padding:7px 14px;border-radius:7px;font-size:13px;font-weight:600;color:var(--txt-soft)}
  .seg button.active{background:#fff;color:var(--brand);box-shadow:var(--shadow)}
  .bar-track{height:8px;border-radius:100px;background:var(--line-soft);overflow:hidden}
  .bar-fill{height:100%;border-radius:100px}
  .meta-row{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--txt-soft)}
  .divider{height:1px;background:var(--line-soft);margin:18px 0}
  .stat-line{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--line-soft);font-size:13px}
  .stat-line:last-child{border-bottom:none}
  .access-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:5px;text-transform:uppercase;letter-spacing:.03em}
  .locked-note{padding:40px;text-align:center;color:var(--txt-soft)}
  .locked-note svg{color:var(--mist);margin-bottom:14px}
  .alert-row{border-left:3px solid var(--mist)}
  .alert-row.crit{border-left-color:var(--alert);background:var(--alert-soft)}
  .alert-row.high{border-left-color:var(--signal)}
  .timeline{position:relative;padding-left:24px}
  .timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--line-soft)}
  .tl-item{position:relative;padding:0 0 18px}
  .tl-item::before{content:"";position:absolute;left:-21px;top:3px;width:12px;height:12px;
    border-radius:50%;background:#fff;border:2px solid var(--brand)}
  .tl-item .t-time{font-size:11px;color:var(--steel-2);font-family:var(--mono)}
  .tl-item .t-txt{font-size:13px;margin-top:2px}
  details.acc{border:1px solid var(--line-soft);border-radius:10px;margin-bottom:10px;background:#fff;overflow:hidden}
  details.acc summary{padding:13px 16px;font-weight:600;font-size:13.5px;cursor:pointer;
    display:flex;align-items:center;gap:10px;list-style:none}
  details.acc summary::-webkit-details-marker{display:none}
  details.acc summary .chev{margin-left:auto;transition:.2s}
  details.acc[open] summary .chev{transform:rotate(90deg)}
  details.acc .acc-body{padding:0 16px 16px;font-size:13px;color:var(--txt-soft);line-height:1.6}
/* ===== Personalización bienvenida SPDC + logo ===== */
.art-logo-wrap{ display:flex; justify-content:center; margin-bottom:4px; }
.art-logo{
  width:118px; height:118px; border-radius:50%;
  object-fit:cover; background:#fff;
  box-shadow:0 10px 34px rgba(0,0,0,.34), 0 0 0 4px rgba(255,255,255,.10);
}
/* (estilos de portada v5.0 definidos arriba en el bloque .gate-art) */

/* logo en barra lateral del panel */
.side-logo{
  width:40px; height:40px; border-radius:9px; object-fit:cover;
  background:#fff; flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.12);
}

/* =====================================================================
   MEJORA MÓVIL (SPDC v2.0) — menú deslizable, hamburguesa, tablas
   ===================================================================== */

/* El botón hamburguesa solo aparece en pantallas pequeñas */
.hamburger{ display:none; flex-direction:column; gap:4px; background:none; border:none;
  cursor:pointer; padding:8px; margin-right:4px; border-radius:8px; }
.hamburger span{ display:block; width:22px; height:2.5px; background:var(--txt);
  border-radius:2px; transition:.25s; }
.hamburger.open span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); }
.hamburger.open span:nth-child(2){ opacity:0; }
.hamburger.open span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); }

/* Overlay oscuro que aparece tras la sidebar abierta en móvil */
.sidebar-overlay{ display:none; position:fixed; inset:0; background:rgba(8,14,26,.5);
  z-index:40; opacity:0; transition:opacity .25s; }
.sidebar-overlay.show{ display:block; opacity:1; }

@media(max-width:920px){
  /* La sidebar se vuelve un panel deslizable desde la izquierda */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; width:264px; z-index:50;
    transform:translateX(-100%); transition:transform .28s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.3);
  }
  .sidebar.open{ transform:translateX(0); }
  .hamburger{ display:flex; }
  /* El título de la topbar más compacto en móvil */
  .topbar h1{ font-size:16px; }
  .crumb{ font-size:11px; }
  /* Ocultar las píldoras de sistemas en pantallas muy chicas para dar aire */
  #sys-pills{ display:none; }
}

@media(max-width:520px){
  .view{ padding:12px; }
  .card-pad{ padding:16px; }
  /* Tablas: permitir scroll horizontal suave con indicador */
  .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  table{ min-width:560px; }
  /* Drawer ocupa casi toda la pantalla en móvil */
  .drawer{ width:100% !important; max-width:100% !important; }
  /* KPIs en una sola columna */
  .g-4,.g-3,.g-2{ grid-template-columns:1fr !important; }
  /* Botones de la topbar y secciones se envuelven mejor */
  .section-head{ flex-wrap:wrap; gap:8px; }
  h1.spdc{ font-size:48px; }
}

/* Mejora de accesibilidad táctil: áreas de toque más grandes en móvil */
@media(max-width:920px){
  .nav-item{ padding:13px 12px; }
  .icon-btn{ min-width:38px; min-height:38px; }
  .btn-sm{ padding:9px 14px; }
}

/* Cabecera de marca compacta para la pantalla de login en móvil */
.mobile-brand{ display:none; flex-direction:column; align-items:center; gap:10px;
  margin-bottom:24px; text-align:center; }
.mobile-brand img{ width:76px; height:76px; border-radius:50%; object-fit:cover;
  background:#fff; box-shadow:0 6px 20px rgba(0,0,0,.15); }
.mobile-brand .mb-title{ font-size:30px; font-weight:800; letter-spacing:3px; color:var(--ink); }
.mobile-brand .mb-sub{ font-size:12px; color:var(--txt-soft); margin-top:-6px; }

/* Secciones del formulario de conocimiento (KYC) */
.kyc-sec{
  font-size:11.5px;font-weight:700;color:var(--brand);
  text-transform:uppercase;letter-spacing:.4px;
  margin:16px 0 9px;padding-bottom:5px;border-bottom:2px solid var(--brand-soft);
}
.grid.g-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){ .grid.g-2{grid-template-columns:1fr} }

/* Spinner de progreso (descarga de listas restrictivas) */
@keyframes lrspin { to { transform: rotate(360deg); } }