:root{
    --bg:#F6F6F8; --surface:#FFFFFF; --surface-2:#FAFAFC; --sunken:#F1F1F4;
    --border:#ECECF1; --border-strong:#DBDCE3;
    --ink:#14151A; --ink-2:#414652; --muted:#6E7480; --faint:#A6ABB5;
    /* Marca Deployment64 — navy #0D1170 como color primario/acción */
    --accent:#0D1170; --accent-ink:#FFFFFF; --accent-weak:#E9EAF6; --accent-strong:#191D8F;
    --brand:#0D1170;
    /* Estados (sistema monocromo): resuelto = navy sólido, en curso = tinte navy */
    --ok:#0D1170; --ok-weak:#E9EAF6;
    /* espera / pendiente = gris neutro */
    --warn:#5B6270; --warn-weak:#EAEDF1;
    --info:#0D1170; --info-weak:#E9EAF6;
    /* rojo reservado sólo para lo urgente */
    --danger:#B24036; --danger-weak:#F6EAE8;
    --violet:#5B6270; --violet-weak:#EAEDF1;
    --shadow:0 1px 2px rgba(17,18,25,.03);
    --shadow-lift:0 8px 26px -14px rgba(17,18,25,.16), 0 2px 6px rgba(17,18,25,.04);
    --r:10px; --r-sm:7px; --r-lg:12px;
    --font-ui:'Archivo',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
    --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  }
  @media (prefers-color-scheme:dark){
    :root:not([data-theme="light"]){
      /* dark como sistema propio — base navy-tintada + accent de marca */
      --bg:#0B0D16; --surface:#141726; --surface-2:#1B1F31; --sunken:#0E1019;
      --border:#282D42; --border-strong:#363C54;
      --ink:#E8EAF3; --ink-2:#B2B9CC; --muted:#848BA0; --faint:#5B6276;
      --accent:#6A72EA; --accent-ink:#0A0D22; --accent-weak:#1E2340; --accent-strong:#8890FF;
      --brand:#6A72EA;
      --ok:#6A72EA; --ok-weak:#1E2340;
      --warn:#98A0B2; --warn-weak:#252B37;
      --info:#6A72EA; --info-weak:#1E2340;
      --danger:#ED6E60; --danger-weak:#331A17;
      --violet:#98A0B2; --violet-weak:#252B37;
      --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -8px rgba(0,0,0,.6);
    }
  }
  :root[data-theme="dark"]{
    /* dark como sistema propio — base navy-tintada + accent de marca */
    --bg:#0B0D16; --surface:#141726; --surface-2:#1B1F31; --sunken:#0E1019;
    --border:#282D42; --border-strong:#363C54;
    --ink:#E8EAF3; --ink-2:#B2B9CC; --muted:#848BA0; --faint:#5B6276;
    --accent:#6A72EA; --accent-ink:#0A0D22; --accent-weak:#1E2340; --accent-strong:#8890FF;
    --brand:#6A72EA;
    --ok:#6A72EA; --ok-weak:#1E2340;
    --warn:#98A0B2; --warn-weak:#252B37;
    --info:#6A72EA; --info-weak:#1E2340;
    --danger:#ED6E60; --danger-weak:#331A17;
    --violet:#98A0B2; --violet-weak:#252B37;
    --shadow:0 1px 2px rgba(0,0,0,.4); --shadow-lift:0 10px 30px -8px rgba(0,0,0,.6);
  }

  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;background:var(--bg);color:var(--ink);
    font-family:var(--font-ui);font-size:14px;line-height:1.45;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  }
  ::selection{background:var(--accent-weak);color:var(--ink)}
  a{color:inherit;text-decoration:none}
  button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
  h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.01em;text-wrap:balance}
  .mono{font-family:var(--font-mono);font-feature-settings:"zero" 1}
  .tnum{font-variant-numeric:tabular-nums}
  .eyebrow{font-size:10.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
  :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}

  /* ---------- shell ---------- */
  .app{display:grid;grid-template-columns:248px 1fr;height:100vh;overflow:hidden}
  .side{background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0}
  .brand{display:flex;align-items:center;gap:11px;padding:18px 18px 14px}
  .brand .logo{width:34px;height:34px;border-radius:9px;background:linear-gradient(150deg,var(--ink),#2a3340);color:#fff;display:grid;place-items:center;font-family:var(--font-mono);font-weight:600;font-size:15px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
  .brand b{font-size:15px;font-weight:700;letter-spacing:-.02em;display:block;line-height:1.1}
  .brand span{font-size:11px;color:var(--muted)}
  .side .newbtn{margin:4px 14px 8px}
  .nav{padding:6px 10px;overflow-y:auto;flex:1;min-height:0}
  .nav .grp{font-size:10.5px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);padding:14px 10px 6px}
  .nav a{display:flex;align-items:center;gap:11px;padding:8px 10px;border-radius:var(--r-sm);color:var(--ink-2);font-weight:500;position:relative}
  .nav a svg{width:19px;height:19px;flex:0 0 auto;color:var(--muted)}
  .nav a .cnt{margin-left:auto;font-family:var(--font-mono);font-size:11px;color:var(--muted);background:var(--sunken);border-radius:20px;padding:1px 7px}
  .nav a:hover{background:var(--surface-2);color:var(--ink)}
  .nav a.on{background:var(--accent-weak);color:var(--accent);font-weight:600}
  .nav a.on svg{color:var(--accent)}
  .nav a.on .cnt{background:transparent;color:var(--accent)}
  .side .me{border-top:1px solid var(--border);padding:10px 12px;display:flex;align-items:center;gap:10px;border-radius:0}
  .side .me:hover{background:var(--surface-2)}
  .memenu{position:absolute;bottom:calc(100% + 6px);left:10px;right:10px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);box-shadow:var(--shadow-lift);padding:6px;z-index:50}
  .memenu a,.memenu button{display:flex;width:100%;align-items:center;gap:10px;padding:9px 10px;border:none;background:none;border-radius:var(--r-sm);font-size:13px;color:var(--ink-2);font-family:inherit;cursor:pointer;text-align:left;text-decoration:none}
  .memenu a:hover,.memenu button:hover{background:var(--surface-2);color:var(--ink)}
  .memenu svg{width:16px;height:16px;color:var(--muted);flex:none}
  .memenu form{margin:0}
  .memenu form button{border-top:1px solid var(--border);border-radius:0;margin-top:4px;padding-top:11px}

  .main{display:flex;flex-direction:column;min-width:0;min-height:0}
  .top{height:60px;flex:0 0 auto;background:color-mix(in srgb,var(--surface) 85%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:14px;padding:0 22px;position:sticky;top:0;z-index:20}
  .search{flex:1;max-width:440px;display:flex;align-items:center;gap:9px;background:var(--surface-2);border:1px solid var(--border);border-radius:var(--r);padding:8px 12px;color:var(--muted)}
  .search input{border:0;background:none;outline:none;flex:1;color:var(--ink);font-size:13.5px}
  .search kbd{font-family:var(--font-mono);font-size:11px;color:var(--faint);border:1px solid var(--border);border-radius:5px;padding:1px 5px}
  .suc{display:flex;align-items:center;gap:8px;padding:7px 11px;border:1px solid var(--border);border-radius:var(--r);background:var(--surface);font-weight:500;font-size:13px}
  .suc .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)}
  .iconbtn{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;color:var(--muted);border:1px solid transparent}
  .iconbtn:hover{background:var(--surface-2);color:var(--ink);border-color:var(--border)}
  .av{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;font-weight:600;font-size:12.5px;color:#fff;flex:0 0 auto}

  .scroll{flex:1;overflow-y:auto;min-height:0}
  .wrap{padding:24px 26px 40px;max-width:1240px;margin:0 auto}
  .board-wrap{padding:18px 0 0 22px} /* board scrolls x full-width */

  .screen[hidden]{display:none}
  .phead{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
  .phead h1{font-size:23px;font-weight:700;letter-spacing:-.02em}
  .phead .sub{color:var(--muted);font-size:13.5px;margin-top:3px}

  /* ---------- buttons ---------- */
  .btn{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:var(--r);font-weight:600;font-size:13.5px;border:1px solid var(--border-strong);background:var(--surface);color:var(--ink);white-space:nowrap;transition:.12s}
  .btn:hover{background:var(--surface-2)}
  .btn svg{width:17px;height:17px}
  .btn.pri{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
  .btn.pri:hover{background:var(--accent-strong)}
  .btn.big{padding:12px 20px;font-size:15px;border-radius:var(--r)}
  .btn.ghost{border-color:transparent;background:transparent;color:var(--ink-2)}
  .btn.ghost:hover{background:var(--surface-2)}

  /* ---------- pills ---------- */
  .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:20px;line-height:1.5;white-space:nowrap}
  .pill .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
  .pill.gray{background:var(--sunken);color:var(--ink-2)}
  .pill.info{background:var(--info-weak);color:var(--info)}
  .pill.warn{background:var(--warn-weak);color:var(--warn)}
  .pill.ok{background:var(--accent);color:var(--accent-ink)}
  .pill.ok .dot{display:none}
  .pill.violet{background:var(--violet-weak);color:var(--violet)}
  .pill.danger{background:var(--danger-weak);color:var(--danger)}
  .prio{font-family:var(--font-ui);font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:2px 7px;border-radius:5px}
  .prio.alta{background:var(--danger-weak);color:var(--danger)}
  .prio.normal{background:var(--sunken);color:var(--muted)}
  .prio.baja{background:var(--sunken);color:var(--faint)}

  /* ---------- cards / generic ---------- */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow)}
  .card.pad{padding:18px}

  /* ---------- dashboard queues ---------- */
  .qgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));gap:14px}
  .queue{text-align:left;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);padding:15px 16px 14px;box-shadow:var(--shadow);transition:.14s;display:block}
  .queue:hover{box-shadow:var(--shadow-lift);transform:translateY(-1px);border-color:var(--border-strong)}
  .queue .q-top{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12.5px;font-weight:500;margin-bottom:10px}
  .queue .q-ic{width:26px;height:26px;border-radius:7px;display:grid;place-items:center}
  .queue .q-ic svg{width:15px;height:15px}
  .queue .n{font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1;font-family:var(--font-mono)}
  .queue .q-sub{font-size:12px;color:var(--faint);margin-top:7px}
  .queue.alert{border-color:color-mix(in srgb,var(--danger) 35%,var(--border))}
  .queue.alert .n{color:var(--danger)}

  .money{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
  .money .m{padding:16px 18px;border-right:1px solid var(--border)}
  .money .m:last-child{border-right:0}
  .money .m .k{font-size:12px;color:var(--muted);display:flex;align-items:center;gap:7px}
  .money .m .v{font-size:22px;font-weight:700;font-family:var(--font-mono);letter-spacing:-.01em;margin-top:6px}
  .money .m .d{font-size:11.5px;margin-top:4px;color:var(--muted)}
  .money .m .d.up{color:var(--ok)}

  .split{display:grid;grid-template-columns:1.5fr 1fr;gap:18px;margin-top:18px}
  @media(max-width:900px){.split{grid-template-columns:1fr}}
  .lhead{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--border)}
  .lhead h3{font-size:15px}

  /* ---------- Dashboard (escritorio) ---------- */
  /* Filtro de sucursal (selector de pestañas) */
  .dtools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .segfilter{display:inline-flex;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:3px;box-shadow:var(--shadow);gap:2px}
  .segbtn{border:none;background:none;font-family:inherit;font-size:12.5px;font-weight:500;color:var(--muted);padding:7px 12px;border-radius:calc(var(--r) - 3px);cursor:pointer;white-space:nowrap;transition:.12s}
  .segbtn:hover{color:var(--ink);background:var(--surface-2)}
  .segbtn.act{background:var(--accent);color:var(--accent-ink);font-weight:600}
  .segbtn:disabled{opacity:.5;cursor:default}
  .selnat{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--border-strong);border-radius:var(--r);padding:0 10px;box-shadow:var(--shadow)}
  .selnat svg{width:15px;height:15px;color:var(--accent);flex:none}
  .selnat select{border:none;background:none;font-family:inherit;font-size:13px;font-weight:500;color:var(--ink);padding:9px 4px;outline:none;cursor:pointer;max-width:220px}

  /* Delta badge para KPIs */
  .kdelta{display:inline-flex;align-items:center;gap:4px;font-size:11.5px;font-weight:600;margin-top:6px;padding:2px 7px;border-radius:20px}
  .kdelta.up{color:var(--accent);background:var(--accent-weak)}
  .kdelta.down{color:var(--danger);background:var(--danger-weak)}
  .kdelta svg{width:12px;height:12px}

  /* Grilla de analíticos */
  .agrid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:14px;margin-top:14px}
  .agrid.tri{grid-template-columns:1fr 1fr 1fr}
  @media(max-width:900px){.agrid,.agrid.tri{grid-template-columns:1fr}}
  .acard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px 18px}
  .acard h3{font-size:13.5px;font-weight:600}
  .acard .ch{font-size:11.5px;color:var(--faint);margin-top:2px}

  /* Barras agrupadas */
  .dbars{display:flex;align-items:flex-end;gap:16px;height:128px;margin-top:16px}
  .dbcol{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;height:100%}
  .dbpair{flex:1;display:flex;align-items:flex-end;gap:5px;justify-content:center;width:100%}
  .dbar{width:16px;min-height:3px;border-radius:4px 4px 0 0}
  .dbar.a{background:var(--accent-weak)}
  .dbar.b{background:var(--accent)}
  .dblab{font-size:11px;color:var(--faint)}
  .dlegend{display:flex;gap:16px;margin-top:14px;font-size:11.5px;color:var(--muted)}
  .dlegend span{display:inline-flex;align-items:center;gap:6px}
  .dsw{width:10px;height:10px;border-radius:3px}

  /* Dona */
  .ddonut-wrap{display:flex;align-items:center;gap:18px;margin-top:14px}
  .ddonut{position:relative;width:104px;height:104px;flex:none}
  .ddonut .val{position:absolute;inset:0;display:grid;place-items:center;font-size:22px;font-weight:700;font-family:var(--font-mono)}
  .dleg{font-size:12px;color:var(--muted);line-height:1.7}
  .dleg b{color:var(--ink);font-family:var(--font-mono)}

  /* Número grande */
  .dbigstat{font-size:38px;font-weight:700;letter-spacing:-.02em;font-family:var(--font-mono);margin-top:16px;line-height:1}
  .dbigstat small{font-size:15px;color:var(--muted);font-weight:500;font-family:var(--font-ui)}

  /* Lista tipo ranking */
  .dtop{margin-top:14px;display:flex;flex-direction:column;gap:11px}
  .dtrow{display:flex;align-items:center;gap:10px;font-size:12.5px}
  .dtrow .nm{width:96px;color:var(--ink-2);flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .dtrack{flex:1;height:9px;background:var(--sunken);border-radius:20px;overflow:hidden}
  .dfill{height:100%;background:var(--accent);border-radius:20px}
  .dfill.dgr{background:var(--danger)}
  .dtrow .vv{width:28px;text-align:right;font-family:var(--font-mono);color:var(--muted);flex:none}

  /* Tarjetas por sucursal */
  .bgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px}
  .bcard{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
  .bcard .bh{display:flex;align-items:center;gap:11px;padding:15px 18px 13px;border-bottom:1px solid var(--border)}
  .bcard .bflag{width:34px;height:34px;border-radius:9px;background:var(--accent-weak);color:var(--accent);display:grid;place-items:center;flex:none}
  .bcard .bflag svg{width:18px;height:18px}
  .bcard .bt{font-size:14.5px;font-weight:700;letter-spacing:-.01em}
  .bcard .bl{font-size:11.5px;color:var(--faint);margin-top:1px}
  .bcard .bbody{padding:14px 18px 18px}
  .ministats{display:flex;gap:8px}
  .ms{flex:1;background:var(--surface-2);border-radius:var(--r-sm);padding:9px 10px;text-align:center}
  .ms .v{font-size:18px;font-weight:700;font-family:var(--font-mono);line-height:1}
  .ms.alert .v{color:var(--danger)}
  .ms .k{font-size:10.5px;color:var(--muted);margin-top:4px}
  .bmoney{display:flex;justify-content:space-between;align-items:flex-end;margin-top:15px}
  .bmoney .mlab{font-size:11.5px;color:var(--muted)}
  .bmoney .mbig{font-size:21px;font-weight:700;font-family:var(--font-mono);letter-spacing:-.02em;margin-top:3px}
  .bmoney .cobrar{text-align:right}
  .bmoney .cobrar .cv{font-size:14px;font-weight:600;font-family:var(--font-mono);color:var(--ink-2);margin-top:3px}

  /* Tabla por sucursal */
  .dtbl{width:100%;border-collapse:collapse}
  .dtbl th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;padding:10px 12px;border-bottom:1px solid var(--border)}
  .dtbl th.r,.dtbl td.r{text-align:right}
  .dtbl td{padding:12px;font-size:13px;border-bottom:1px solid var(--border);color:var(--ink-2)}
  .dtbl tr:last-child td{border-bottom:none}
  .dtbl td.nm{font-weight:600;color:var(--ink)}
  .dtbl .mono{font-family:var(--font-mono)}
  .dtbl td.al{color:var(--danger);font-family:var(--font-mono)}
  .dtbl tr.tot td{font-weight:700;color:var(--ink);background:var(--surface-2)}
  .row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-bottom:1px solid var(--border)}
  .row:last-child{border-bottom:0}
  .row .folio{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}
  .row .who{font-weight:600;font-size:13.5px}
  .row .eq{font-size:12.5px;color:var(--muted)}
  .row .amt{margin-left:auto;font-family:var(--font-mono);font-weight:600}

  .stockrow{display:flex;align-items:center;gap:12px;padding:11px 18px;border-bottom:1px solid var(--border)}
  .stockrow:last-child{border-bottom:0}
  .stockrow .bar{flex:1;height:6px;border-radius:6px;background:var(--sunken);overflow:hidden}
  .stockrow .bar i{display:block;height:100%;border-radius:6px;background:var(--danger)}

  /* ---------- board ---------- */
  .toolbar{display:flex;align-items:center;gap:10px;margin-bottom:16px;flex-wrap:wrap}
  .seg{display:inline-flex;background:var(--sunken);border-radius:var(--r-sm);padding:3px}
  .seg button{padding:6px 13px;border-radius:5px;font-weight:600;font-size:13px;color:var(--muted)}
  .seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--shadow)}
  .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-size:13px;font-weight:500;color:var(--ink-2)}
  .chip svg{width:15px;height:15px;color:var(--muted)}

  .board{display:flex;gap:14px;overflow-x:auto;padding:2px 22px 26px 0;scroll-snap-type:x proximity}
  .board::-webkit-scrollbar{height:10px}
  .board::-webkit-scrollbar-thumb{background:var(--border-strong);border-radius:20px;border:3px solid var(--bg)}
  .col{flex:0 0 288px;scroll-snap-align:start;display:flex;flex-direction:column;min-height:0}
  .col-h{display:flex;align-items:center;gap:9px;padding:2px 4px 12px}
  .col-h .stripe{width:8px;height:8px;border-radius:2px}
  .col-h h4{font-size:13px;font-weight:600}
  .col-h .c{font-family:var(--font-mono);font-size:11.5px;color:var(--muted);background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:0 8px;line-height:18px}
  .col-h .add{margin-left:auto;color:var(--faint)}
  .col-h .add:hover{color:var(--accent)}
  .stack{display:flex;flex-direction:column;gap:10px}
  .tk{background:var(--surface);border:1px solid var(--border);border-radius:var(--r);padding:13px;box-shadow:var(--shadow);cursor:pointer;transition:.13s;text-align:left;width:100%;display:block}
  .tk:hover{box-shadow:var(--shadow-lift);border-color:var(--border-strong);transform:translateY(-1px)}
  .tk .tk-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
  .tk .folio{font-family:var(--font-mono);font-size:11.5px;color:var(--muted)}
  .tk .who{font-weight:600;font-size:14px;letter-spacing:-.01em}
  .tk .eq{font-size:12.5px;color:var(--muted);margin-top:2px;display:flex;align-items:center;gap:6px}
  .tk .tk-foot{display:flex;align-items:center;gap:8px;margin-top:12px;padding-top:11px;border-top:1px solid var(--border)}
  .tk .tech{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-2);font-weight:500}
  .tk .next{margin-left:auto;font-size:11.5px;font-weight:600;color:var(--accent);display:flex;align-items:center;gap:4px}
  .tk .next svg{width:13px;height:13px}
  .tk.unassigned .tech{color:var(--faint);font-style:italic}
  .miniav{width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:700;color:#fff;flex:0 0 auto}
  .dashav{width:20px;height:20px;border-radius:50%;border:1.5px dashed var(--border-strong);flex:0 0 auto}

  /* ---------- cockpit (detalle) ---------- */
  .back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:13px;font-weight:500;margin-bottom:14px}
  .back:hover{color:var(--ink)}
  .cohead{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
  .cohead .fol{font-family:var(--font-mono);font-size:26px;font-weight:600;letter-spacing:-.02em}
  .cohead .cli{color:var(--ink-2);font-size:14px;margin-top:6px}
  .cohead .cli b{font-weight:600;color:var(--ink)}
  .cta{display:flex;align-items:center;gap:10px}
  .nextbanner{margin:18px 0 4px;display:flex;align-items:center;gap:12px;background:var(--accent-weak);border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:var(--r);padding:12px 14px}
  .nextbanner .lbl{font-size:12px;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.06em}
  .nextbanner b{font-size:15px}

  .stepper{display:flex;gap:0;margin:22px 0 4px;overflow-x:auto;padding-bottom:4px}
  .step{flex:1;min-width:96px;display:flex;flex-direction:column;gap:8px;position:relative;padding-top:4px}
  .step .bar{height:4px;border-radius:4px;background:var(--sunken)}
  .step.done .bar,.step.now .bar{background:var(--ok)}
  .step .lab{font-size:12px;color:var(--faint);font-weight:500;display:flex;align-items:center;gap:6px}
  .step.done .lab{color:var(--ink-2)}
  .step.now .lab{color:var(--ok);font-weight:700}
  .step .tick{width:15px;height:15px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;flex:0 0 auto}
  .step .tick svg{width:10px;height:10px}
  .step.now .tick{background:var(--surface);border:2px solid var(--ok);box-shadow:0 0 0 3px var(--ok-weak)}
  .step.now .tick svg{display:none}
  .step.todo .tick{background:var(--sunken);border:2px solid var(--border-strong)}
  .step.todo .tick svg{display:none}

  .cogrid{display:grid;grid-template-columns:1fr 320px;gap:18px;margin-top:22px;align-items:start}
  @media(max-width:920px){.cogrid{grid-template-columns:1fr}}
  .tabs{display:flex;gap:2px;border-bottom:1px solid var(--border);margin-bottom:2px;overflow-x:auto}
  .tabs button{padding:11px 14px;font-weight:600;font-size:13.5px;color:var(--muted);border-bottom:2px solid transparent;margin-bottom:-1px;white-space:nowrap}
  .tabs button.on{color:var(--ink);border-color:var(--accent)}
  .tabpane[hidden]{display:none}
  .kv{display:grid;grid-template-columns:150px 1fr;gap:2px 16px;padding:14px 4px}
  .kv dt{color:var(--muted);font-size:13px;padding:7px 0}
  .kv dd{margin:0;font-size:13.5px;padding:7px 0;font-weight:500}
  .prose{padding:16px 4px;color:var(--ink-2);font-size:13.5px;line-height:1.6}
  .lineitem{display:flex;align-items:center;gap:12px;padding:12px 4px;border-bottom:1px solid var(--border)}
  .lineitem .li-t{font-weight:500;font-size:13.5px}
  .lineitem .li-s{font-size:12px;color:var(--muted)}
  .lineitem .li-a{margin-left:auto;font-family:var(--font-mono);font-weight:600}
  .rail{display:flex;flex-direction:column;gap:14px}
  .rail .card.pad{padding:16px}
  .rail h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--faint);margin-bottom:12px}
  .rail .cli-row{display:flex;align-items:center;gap:11px;margin-bottom:6px}
  .rail .cli-row .who{font-weight:600}
  .rail .cli-row .who small{display:block;color:var(--muted);font-weight:400;font-size:12px;font-family:var(--font-mono)}
  .rail .cli-line{display:flex;align-items:center;gap:9px;color:var(--ink-2);font-size:13px;padding:5px 0}
  .rail .cli-line svg{width:15px;height:15px;color:var(--muted)}
  .totrow{display:flex;align-items:center;justify-content:space-between;padding:8px 0;font-size:13.5px}
  .totrow .n{font-family:var(--font-mono);font-weight:600}
  .totrow.saldo{border-top:1px dashed var(--border-strong);margin-top:6px;padding-top:12px;font-size:15px}
  .totrow.saldo .n{color:var(--warn);font-size:17px}

  /* ---------- recepción form ---------- */
  .formgrid{display:grid;grid-template-columns:1fr 340px;gap:18px;align-items:start}
  @media(max-width:920px){.formgrid{grid-template-columns:1fr}}
  .fsec{padding:18px}
  /* Grilla de formulario a 2 columnas (llena el ancho; .wide ocupa toda la fila) */
  .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
  .fgrid .wide{grid-column:1 / -1}
  @media(max-width:760px){.fgrid{grid-template-columns:1fr}}
  .fsec + .fsec{margin-top:16px}

  /* Gestión de catálogo (líneas / modelos): dos paneles limpios */
  .catcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
  @media(max-width:760px){.catcols{grid-template-columns:1fr}}
  .catpanel{border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--surface)}
  .catpanel-h{font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:11px 14px;border-bottom:1px solid var(--border);background:var(--surface-2)}
  .catadd{display:flex;gap:8px;padding:11px 12px;border-bottom:1px solid var(--border)}
  .catadd .inp{flex:1}
  .catlist{max-height:300px;overflow-y:auto}
  .catitem{display:flex;align-items:center;gap:8px;padding:9px 12px 9px 14px;border-bottom:1px solid var(--border)}
  .catitem:last-child{border-bottom:0}
  .catitem.sel{background:var(--accent-weak)}
  .catitem .cn{flex:1;min-width:0;text-align:left;background:none;border:0;font:inherit;font-size:13px;font-weight:500;color:var(--ink);cursor:pointer;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .catitem.sel .cn{color:var(--accent);font-weight:600}
  .catitem.off .cn{color:var(--faint);text-decoration:line-through}
  .catitem .cbtn{width:26px;height:26px;display:grid;place-items:center;border:0;background:none;border-radius:6px;color:var(--muted);cursor:pointer;flex:none}
  .catitem .cbtn:hover{background:var(--sunken);color:var(--ink)}
  .catitem .cbtn.del:hover{background:var(--danger-weak);color:var(--danger)}
  .catitem .cbtn svg{width:15px;height:15px}
  .catempty{padding:30px 14px;text-align:center;color:var(--faint);font-size:12.5px}

  /* Checklist de tipos de identificador (modal de marca) */
  .idcheck{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
  .idopt{display:inline-flex;align-items:center;gap:7px;padding:6px 11px;border:1px solid var(--border-strong);border-radius:20px;font-size:12.5px;font-weight:500;color:var(--ink-2);cursor:pointer;user-select:none}
  .idopt input{margin:0;width:13px;height:13px;accent-color:var(--accent)}
  .idopt.on{background:var(--accent-weak);border-color:var(--accent);color:var(--accent);font-weight:600}
  .fsec h3{font-size:14px;margin-bottom:2px}
  .fsec .hint{color:var(--muted);font-size:12.5px;margin-bottom:16px}
  .field{margin-bottom:14px}
  .field:last-child{margin-bottom:0}
  .field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin-bottom:6px}
  .field label .req{color:var(--danger)}
  .inp{width:100%;padding:10px 13px;border:1px solid var(--border-strong);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:13.5px;transition:border-color .12s,box-shadow .12s}
  .inp::placeholder{color:var(--faint)}
  .inp:hover{border-color:var(--muted)}
  .inp:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-weak)}
  textarea.inp{resize:vertical;min-height:74px}
  .frow{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .checks{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
  .chk{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface-2);font-size:13px;font-weight:500}
  .chk .seg{background:var(--surface);border:1px solid var(--border)}
  .chk .seg button{padding:3px 8px;font-size:11px}
  .chk .seg button.ok.on{background:var(--ok-weak);color:var(--ok)}
  .chk .seg button.obs.on{background:var(--warn-weak);color:var(--warn)}
  .chk .seg button.no.on{background:var(--sunken);color:var(--muted)}
  .drop{border:1.5px dashed var(--border-strong);border-radius:var(--r);padding:22px;text-align:center;color:var(--muted);font-size:13px;background:var(--surface-2)}
  .drop b{color:var(--accent)}
  .summary{position:sticky;top:78px}
  .summary .s-eq{font-weight:600;font-size:14px}
  .summary .s-line{display:flex;justify-content:space-between;padding:7px 0;font-size:13px;border-bottom:1px solid var(--border)}
  .summary .s-line span:first-child{color:var(--muted)}

  /* tablas */
  .tablecard{overflow-x:auto}
  .table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:660px}
  .table th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--faint);font-weight:600;padding:11px 16px;border-bottom:1px solid var(--border);white-space:nowrap}
  .table td{padding:12px 16px;border-bottom:1px solid var(--border);vertical-align:middle}
  .table tbody tr:last-child td{border-bottom:0}
  .table tbody tr:hover{background:var(--surface-2)}
  .table .r{text-align:right;font-family:var(--font-mono);font-variant-numeric:tabular-nums}
  .cellmain{font-weight:600}
  .cellsub{font-size:12px;color:var(--muted)}

  /* two-pane clientes */
  .twopane{display:grid;grid-template-columns:326px 1fr;gap:18px;align-items:start}
  @media(max-width:940px){.twopane{grid-template-columns:1fr}}
  .clist{max-height:calc(100vh - 210px);overflow-y:auto}
  .citem{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:1px solid var(--border);width:100%;text-align:left}
  .citem:last-child{border-bottom:0}
  .citem:hover{background:var(--surface-2)}
  .citem.on{background:var(--accent-weak)}
  .citem .who{font-weight:600;font-size:13.5px}
  .citem .meta{font-size:11.5px;color:var(--muted)}
  .profstats{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--border);border-radius:var(--r);overflow:hidden;margin:16px 0}
  .profstats .s{padding:13px 15px;border-right:1px solid var(--border)}
  .profstats .s:last-child{border-right:0}
  .profstats .s .v{font-size:19px;font-weight:700;font-family:var(--font-mono)}
  .profstats .s .k{font-size:11.5px;color:var(--muted)}
  .eqrow{display:flex;align-items:center;gap:12px;padding:11px 4px;border-bottom:1px solid var(--border)}
  .eqrow:last-child{border-bottom:0}
  .eqrow .ic{width:32px;height:32px;border-radius:8px;background:var(--surface-2);border:1px solid var(--border);display:grid;place-items:center;color:var(--muted);flex:0 0 auto}
  .eqrow .ic svg{width:16px;height:16px}

  /* charts */
  .colchart{display:flex;align-items:flex-end;gap:8px;height:150px;padding:10px 2px 0}
  .colchart .bar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:7px;height:100%}
  .colchart .bar i{width:100%;max-width:24px;background:var(--accent);border-radius:5px 5px 0 0;min-height:3px}
  .colchart .bar.hi i{background:var(--brand)}
  .colchart .bar span{font-size:10px;color:var(--faint)}
  .barlist{display:flex;flex-direction:column;gap:14px;padding:6px 2px}
  .barlist .b{display:grid;grid-template-columns:130px 1fr 54px;gap:12px;align-items:center;font-size:13px}
  .barlist .track{height:9px;border-radius:9px;background:var(--sunken);overflow:hidden}
  .barlist .track i{display:block;height:100%;border-radius:9px;background:var(--accent)}
  .barlist .val{font-family:var(--font-mono);font-weight:600;font-size:12.5px;text-align:right}
  .repgrid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:18px}
  @media(max-width:900px){.repgrid{grid-template-columns:1fr 1fr}}
  @media(max-width:620px){.repgrid{grid-template-columns:1fr}}

  /* cliente adaptativo */
  .rut-input{position:relative;max-width:270px}
  .rut-input input{padding-right:80px}
  .rut-badge{position:absolute;right:7px;top:50%;transform:translateY(-50%);font-size:11px;font-weight:700;padding:2px 9px;border-radius:20px;letter-spacing:.02em;pointer-events:none}
  .rut-badge.info{background:var(--info-weak);color:var(--info)}
  .rut-badge.ok{background:var(--ok-weak);color:var(--ok)}
  .autohint{font-size:12px;color:var(--muted);margin:12px 0 8px}
  .autohint b{color:var(--ink);font-weight:600}
  .typeseg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .typeseg button{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);font-weight:600;font-size:12.5px;color:var(--muted)}
  .typeseg button:hover{border-color:var(--border-strong);color:var(--ink)}
  .typeseg button.on{border-color:var(--accent);background:var(--accent-weak);color:var(--accent)}
  .typeseg button .tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent);border-radius:4px;padding:1px 4px}
  .tform[hidden]{display:none}
  .note{font-size:12px;color:var(--faint);text-align:center;padding:22px}
  .demoflag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;color:var(--warn);background:var(--warn-weak);padding:3px 9px;border-radius:20px}
  @media (prefers-reduced-motion:reduce){*{transition:none!important}}
  @media(max-width:720px){.app{grid-template-columns:1fr}.side{display:none}}

/* ---- modales y formularios del cockpit (G.2) ---- */
.modal-backdrop{position:fixed;inset:0;background:rgba(16,20,28,.5);display:grid;place-items:start center;padding:56px 16px;z-index:60;overflow-y:auto}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow-lift);width:100%;max-width:540px;padding:22px}
.modal h3{font-size:16px;margin-bottom:4px}
.modal .mhint{color:var(--muted);font-size:13px;margin-bottom:16px}
.modal .mfoot{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}
.err{color:var(--danger);font-size:12px;margin-top:5px}
.itemcard{border:1px solid var(--border);border-radius:var(--r-sm);padding:12px;margin-bottom:10px;background:var(--surface-2);position:relative}
.itemcard .del{position:absolute;top:8px;right:8px;color:var(--faint)}
.itemcard .del:hover{color:var(--danger)}
.toast{position:fixed;right:18px;bottom:18px;background:var(--ink);color:var(--surface);padding:11px 15px;border-radius:var(--r);font-size:13.5px;font-weight:500;box-shadow:var(--shadow-lift);z-index:70;display:flex;align-items:center;gap:9px}

/* alias para EstadoOrden::color() (warning/success/primary) y x-cloak de Alpine */
.pill.warning{background:var(--warn-weak);color:var(--warn)}
.pill.success{background:var(--ok-weak);color:var(--ok)}
.pill.primary{background:var(--accent-weak);color:var(--accent)}
[x-cloak]{display:none!important}

/* ---- campana de avisos (topbar) ---- */
.bell{position:relative}
.bell .badge{position:absolute;top:2px;right:3px;min-width:16px;height:16px;padding:0 4px;border-radius:20px;background:var(--danger);color:#fff;font-size:10px;font-weight:700;display:grid;place-items:center;font-family:var(--font-mono);border:2px solid var(--surface)}
.bell-panel{position:absolute;top:46px;right:0;width:308px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lift);z-index:50;overflow:hidden}
.bell-panel .bh{padding:12px 14px;border-bottom:1px solid var(--border);font-weight:600;font-size:13.5px;display:flex;justify-content:space-between;align-items:center}
.bell-item{display:flex;gap:11px;padding:11px 14px;border-bottom:1px solid var(--border);align-items:flex-start}
.bell-item:last-child{border-bottom:0}
.bell-item:hover{background:var(--surface-2)}
.bell-item .bi{width:28px;height:28px;border-radius:7px;display:grid;place-items:center;flex:0 0 auto}
.bell-item .bt{font-weight:600;font-size:13px}
.bell-item .bs{font-size:11.5px;color:var(--muted)}
.bell-empty{padding:28px;text-align:center;color:var(--faint);font-size:13px}

/* ---- sidebar colapsable (solo íconos) ---- */
.app.sidecollapsed{grid-template-columns:72px 1fr}
.app.sidecollapsed .side .brand{justify-content:center;padding:18px 0 14px}
.app.sidecollapsed .brandtxt{display:none}
.app.sidecollapsed .newbtn{padding:0}
.app.sidecollapsed .newbtn .btn{width:44px!important;height:44px;padding:0!important;margin:0 auto;border-radius:12px}
.app.sidecollapsed .newbtn .btn svg{width:20px;height:20px}
.app.sidecollapsed .newbtn .lbl{display:none}
.app.sidecollapsed .nav{padding:8px 12px}

/* ---------- Logo de marca en el sidebar ---------- */
/* Expandido: imagotipo (Deployment64). Colapsado: solo el isotipo. */
.brand-iso{display:none;align-items:center;justify-content:center}
.brand-iso img{width:32px;height:auto;display:block}
.brand-word{height:28px;width:auto}
.brandtxt span{display:block}
.app.sidecollapsed .brand-iso{display:flex}
/* Swap de color según tema (mismo esquema de 3 estados que los tokens) */
.only-dark{display:none}
.only-light{display:block}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .only-light{display:none}
  :root:not([data-theme="light"]) .only-dark{display:block}
}
:root[data-theme="dark"] .only-light{display:none}
:root[data-theme="dark"] .only-dark{display:block}
:root[data-theme="light"] .only-light{display:block}
:root[data-theme="light"] .only-dark{display:none}
.app.sidecollapsed .nav a{width:48px;height:44px;margin:3px auto;padding:0;justify-content:center;border-radius:10px;gap:0}
.app.sidecollapsed .nav a svg{width:20px;height:20px}
.app.sidecollapsed .nav a .lbl,
.app.sidecollapsed .nav a .cnt{display:none}
.app.sidecollapsed .nav .grp{display:none}
.app.sidecollapsed .me{justify-content:center;padding:12px 0}
.app.sidecollapsed .metxt{display:none}

/* ---- dropdown de acciones (cockpit) ---- */
.dd{position:relative}
.dd-menu{position:absolute;top:46px;right:0;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--r);box-shadow:var(--shadow-lift);z-index:50;overflow:hidden;padding:5px}
.dd-menu button{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:9px 11px;border-radius:var(--r-sm);font-size:13.5px;font-weight:500;color:var(--ink-2)}
.dd-menu button:hover{background:var(--surface-2);color:var(--ink)}
.dd-menu button svg{width:16px;height:16px;color:var(--muted);flex:0 0 auto}
.dd-menu button.danger{color:var(--danger)}
.dd-menu button.danger svg{color:var(--danger)}
  /* Botones-icono para acciones en filas de tabla */
  .rowacts{display:flex;gap:2px;justify-content:flex-end;align-items:center}
  .iconbtn{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border:1px solid transparent;border-radius:8px;background:none;color:var(--muted);cursor:pointer;transition:background .12s,color .12s}
  .iconbtn svg{width:16px;height:16px}
  .iconbtn:hover{background:var(--surface-2);color:var(--ink)}
  .iconbtn.danger:hover{background:rgba(192,57,43,.1);color:var(--danger)}