/* =====================================================================
       Rehavid · Gestión de proyectos — piel visual inspirada en Jira Premium
       (Atlassian Design System): barra superior blanca, barra lateral,
       pestañas de vista subrayadas en azul, lozenges de estado y tarjetas
       planas con borde gris. Las clases se conservan de la versión anterior.
       ===================================================================== */
    :root{
      /* marca → paleta Atlassian (los nombres históricos se conservan) */
      --rv:#0C66E4; --rv2:#0055CC; --rv3:#09326C;
      --rvl:#E9F2FF; --rvl2:#F3F9FF; --rvl3:#F7F8F9;
      --gr:#22A06B; --grd:#216E4E; --grl:#DCFFF1;

      /* superficies y texto */
      --bg:#FFFFFF;
      --card:#FFFFFF;
      --card-2:#F7F8F9;
      --line:#DCDFE4;
      --line-2:#EBECF0;
      --line-3:#B3B9C4;
      --ink:#172B4D;
      --ink-2:#44546F;
      --muted:#626F86;
      --faint:#8590A2;

      /* semántica — nombres que ya usa la aplicación */
      --accent:#0C66E4;
      --accent-2:#0055CC;
      --accent-soft:#E9F2FF;
      --indigo:#8270DB;
      --indigo-soft:#F3F0FF;
      --epic:#5E4DB2;
      --epic-soft:#F3F0FF;
      --ok:#216E4E;
      --ok-soft:#DCFFF1;
      --warn:#A54800;
      --warn-soft:#FFF7D6;
      --bad:#AE2E24;
      --bad-soft:#FFECEB;
      --info:#0055CC;
      --info-soft:#E9F2FF;

      --r:8px;
      --r-sm:4px;
      --sh:0 1px 1px rgba(9,30,66,.11);
      --sh-2:0 8px 12px rgba(9,30,66,.15),0 0 1px rgba(9,30,66,.31);
      --mono:ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
      --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    }
    *{box-sizing:border-box}
    html{font-size:14px}
    body{margin:0;padding:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
    button,input,select,textarea{font:inherit;color:inherit}
    button{cursor:pointer}
    a{color:var(--rv)}
    h1,h2,h3,h4{margin:0;font-weight:600;letter-spacing:-.003em}
    p{margin:0}
    .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
    :focus-visible{outline:2px solid var(--rv);outline-offset:2px}
    .num{font-variant-numeric:tabular-nums}
    .mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
    svg.i{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}

    /* ---------------- Armazón: topbar + lateral + contenido ---------------- */
    .shell{display:flex;flex-direction:column;min-height:100vh}
    .hdr{display:flex;align-items:center;gap:12px;padding:8px 16px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40;flex-wrap:wrap}
    .hdr-burger{display:none;border:0;background:transparent;width:32px;height:32px;border-radius:4px;color:var(--ink-2);align-items:center;justify-content:center}
    .hdr-burger:hover{background:var(--line-2)}
    .hdr-mark{display:flex;align-items:center;gap:8px;flex:none}
    .hdr-mark .m{width:26px;height:26px;border-radius:6px;background:var(--rv);color:#fff;display:grid;place-items:center;font-weight:800;font-size:11px;letter-spacing:.5px;flex:none}
    .hdr-mark b{color:var(--ink);font-size:14px;font-weight:700;display:block;line-height:1.15}
    .hdr-mark span{color:var(--muted);font-size:10px;display:block}
    .hdr-search{flex:1;min-width:160px;max-width:780px;position:relative;display:flex;align-items:center}
    .hdr-search input{width:100%;height:32px;border:1px solid var(--line-3);border-radius:5px;padding:0 12px 0 32px;background:#fff;outline:none;font-size:13px;color:var(--ink)}
    .hdr-search input::placeholder{color:var(--faint)}
    .hdr-search input:focus{border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
    .hdr-search svg{position:absolute;left:10px;width:15px;height:15px;color:var(--muted);pointer-events:none}
    .hdr-right{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}
    .whoami{display:flex;align-items:center;gap:8px;border:1px solid var(--line);border-radius:20px;padding:3px 12px 3px 4px;background:#fff;height:36px}
    .whoami:hover{background:var(--rvl3)}
    .avatar{width:26px;height:26px;border-radius:50%;background:var(--rv);color:#fff;display:grid;place-items:center;font-size:10px;font-weight:800;flex:none}
    .whoami select{border:0;outline:none;font-size:12.5px;font-weight:600;background:transparent;color:var(--ink);max-width:150px;padding:0;cursor:pointer}
    .whoami small{display:block;font-size:9.5px;color:var(--muted);margin-top:-1px}

    .accent{display:none}

    .body-wrap{display:flex;flex:1;align-items:stretch;min-height:0}

    /* ---------------- Barra lateral ---------------- */
    .sidebar{width:232px;flex:none;border-right:1px solid var(--line);background:#fff;padding:12px 8px 16px;display:flex;flex-direction:column;gap:2px;position:sticky;top:49px;height:calc(100vh - 49px);overflow-y:auto}
    .sb-item{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:5px;padding:7px 10px;font-size:13px;font-weight:500;color:var(--ink-2);text-align:left}
    .sb-item svg{width:16px;height:16px;color:var(--muted);flex:none}
    .sb-item:hover{background:var(--line-2)}
    .sb-item.active{background:var(--rvl);color:var(--rv2);font-weight:600}
    .sb-item.active svg{color:var(--rv)}
    .sb-item .badge{margin-left:auto;background:var(--line-2);color:var(--ink-2);border-radius:10px;font-size:10.5px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center}
    .sb-item .badge.hot{background:#FFECEB;color:var(--bad)}
    .sb-item .badge.zero{display:none}
    .sb-group{font-size:11px;font-weight:700;color:var(--muted);padding:14px 10px 4px;text-transform:none;letter-spacing:.2px}
    .sb-space{display:flex;align-items:center;gap:9px;padding:7px 10px;font-size:13px;font-weight:600;color:var(--ink)}
    .sb-space .sb-mark{width:22px;height:22px;border-radius:5px;background:linear-gradient(135deg,#0C66E4,#8270DB);color:#fff;display:grid;place-items:center;font-size:9.5px;font-weight:800;flex:none}
    .sb-sub{margin-left:14px;border-left:1px solid var(--line-2);padding-left:6px;display:flex;flex-direction:column;gap:2px}
    .sb-foot{margin-top:auto;padding:12px 10px 0;border-top:1px solid var(--line-2);font-size:10.5px;color:var(--muted);line-height:1.6}
    .saved{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--grd);font-weight:600;white-space:nowrap;margin-top:6px}
    .saved i{width:7px;height:7px;border-radius:50%;background:var(--gr);flex:none;font-style:normal}
    .flow{display:block;font-size:10px;color:var(--faint);line-height:1.6}

    /* ---------------- Contenido ---------------- */
    .content{flex:1;min-width:0;display:flex;flex-direction:column}
    .crumbs{padding:14px 24px 0;font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
    .crumbs b{color:var(--muted);font-weight:500}
    .proj-head{display:flex;align-items:center;gap:10px;padding:2px 24px 0;flex-wrap:wrap}
    .proj-head h1{font-size:20px;font-weight:700;color:var(--ink)}
    .proj-head .psub{font-size:12.5px;color:var(--muted);flex-basis:100%;margin-top:2px}

    /* ---------------- Pestañas de vista (estilo Jira) ---------------- */
    .tabs{display:flex;gap:2px;padding:6px 24px 0;border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin;background:#fff;position:sticky;top:49px;z-index:30}
    .tabs::-webkit-scrollbar{height:5px}
    .tabs::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
    .tab{flex:0 0 auto;display:flex;align-items:center;gap:7px;padding:8px 11px 10px;border:0;background:transparent;border-radius:5px 5px 0 0;
      font-size:13px;font-weight:500;color:var(--ink-2);white-space:nowrap;position:relative;transition:background .12s,color .12s}
    .tab svg{width:16px;height:16px;color:var(--muted)}
    .tab:hover{background:var(--line-2);color:var(--ink)}
    .tab.active{color:var(--rv);font-weight:600}
    .tab.active svg{color:var(--rv)}
    .tab.active::after{content:"";position:absolute;left:8px;right:8px;bottom:-1px;height:2.5px;border-radius:2px 2px 0 0;background:var(--rv)}
    .tab .badge{background:var(--line-2);color:var(--ink-2);border-radius:10px;font-size:10.5px;font-weight:700;padding:1px 7px;min-width:20px;text-align:center;line-height:1.5}
    .tab .badge.hot,.tab.active .badge.hot{background:#FFECEB;color:var(--bad)}
    .tab .badge.zero{display:none}

    /* ---------------- Barra de herramientas del módulo ---------------- */
    .toolbar{display:flex;align-items:center;gap:10px;padding:12px 24px 0;flex-wrap:wrap}
    .find{flex:1;min-width:180px;max-width:400px;position:relative;display:flex;align-items:center}
    .find input{width:100%;height:32px;border:1px solid var(--line-3);border-radius:5px;padding:0 11px 0 31px;background:#fff;outline:none;font-size:12.5px}
    .find input:focus{border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
    .find svg{position:absolute;left:10px;width:14px;height:14px;color:var(--muted);pointer-events:none}
    .page{padding:14px 24px 32px;flex:1}

    /* ---------------- Botones ---------------- */
    .btn{border:1px solid var(--line-3);background:#fff;color:var(--ink);border-radius:4px;padding:0 12px;height:32px;font-weight:600;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;white-space:nowrap;transition:background .12s,border-color .12s}
    .btn svg{width:14px;height:14px}
    .btn:hover{background:var(--line-2)}
    .btn:disabled{opacity:.5;cursor:not-allowed;background:var(--line-2);color:var(--muted);border-color:var(--line-2)}
    .btn-pri{background:var(--rv);border-color:var(--rv);color:#fff}
    .btn-pri:hover{background:var(--rv2);border-color:var(--rv2);color:#fff}
    .btn-ok{background:#1F845A;border-color:#1F845A;color:#fff}
    .btn-ok:hover{background:var(--grd);border-color:var(--grd);color:#fff}
    .btn-bad{color:var(--bad);border-color:#F8AEA9}
    .btn-bad:hover{background:var(--bad);border-color:var(--bad);color:#fff}
    .btn-plain{border-color:transparent;background:transparent;color:var(--ink-2)}
    .btn-plain:hover{background:var(--line-2);color:var(--ink);border-color:transparent}
    .btn-s{height:26px;padding:0 9px;font-size:11.5px;border-radius:4px}
    .btn-s svg{width:12px;height:12px}
    .btn-ico{width:32px;padding:0}
    .hdr-right .btn-pri{font-weight:600}

    /* ---------------- Tarjetas ---------------- */
    .card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
    .card+.card{margin-top:14px}
    .card-h{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:#fff}
    .card-h h2{font-size:14px;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px}
    .card-h h2 svg{width:15px;height:15px;color:var(--muted)}
    .card-h p{font-size:12px;color:var(--muted);margin:2px 0 0;font-weight:400}
    .card-h .sp{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .card-b{padding:16px}
    .card-b.tight{padding:0}
    .muted{color:var(--muted)}
    .faint{color:var(--faint)}
    .xs{font-size:11px}
    .sm{font-size:12px}
    .note{font-size:12px;color:var(--muted);line-height:1.6}
    .note b{color:var(--ink-2)}
    .sec-title{font-size:12.5px;font-weight:700;color:var(--ink);margin-bottom:10px;display:inline-block}

    /* ---------------- Filtros ---------------- */
    .filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:12px;align-items:flex-end;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:10px 12px}
    .filt{display:flex;flex-direction:column;gap:3px;min-width:146px;flex:1;max-width:210px}
    .filt label{font-size:10.5px;font-weight:600;color:var(--muted)}
    .filt select{height:30px;border:1px solid var(--line-3);border-radius:4px;background:#fff;padding:0 8px;font-size:12px;color:var(--ink)}
    .filt select:focus{outline:none;border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
    .filt select.set{border-color:var(--rv);background:var(--rvl);font-weight:600;color:var(--rv2)}
    .filt label .cnt{display:inline-block;background:var(--rv);color:#fff;border-radius:10px;padding:0 6px;font-size:9.5px;margin-left:3px}
    .filters>.btn{margin-left:auto}
    .chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 12px}
    .chips:empty{margin:0}
    .chip{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:4px;border:1px solid var(--line-3);background:#fff;font-size:11.5px;font-weight:600;color:var(--ink-2)}
    .chip:hover{background:var(--line-2)}
    .chip.info{background:var(--rvl);border-color:var(--rvl);color:var(--rv2);cursor:default}
    .chip.clear{border-color:var(--line-3);color:var(--ink-2);background:#fff}
    .chip.clear:hover{background:var(--bad-soft);color:var(--bad);border-color:#F8AEA9}
    .chip.clear svg{width:11px;height:11px}

    /* ---------------- Tiles de indicadores (estilo Jira) ---------------- */
    .stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px;border:0;border-radius:0;overflow:visible}
    .stat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:0;text-align:left;display:flex;flex-direction:column;justify-content:center;transition:box-shadow .12s,border-color .12s;min-height:74px}
    .stat[role="button"]{cursor:pointer}
    .stat:hover{border-color:var(--line-3);box-shadow:var(--sh)}
    .stat[aria-pressed="true"]{border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
    .stat .ico{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:600;padding:12px 14px 0;background:transparent;color:var(--muted)}
    .stat .ico svg{width:14px;height:14px;color:var(--muted)}
    .stat .ico.i svg{color:var(--gr)} .stat .ico.w svg{color:#B38600} .stat .ico.b svg{color:#C9372C} .stat .ico.o svg{color:var(--grd)}
    .stat .tx{display:flex;align-items:baseline;gap:8px;padding:2px 14px 12px}
    .stat .tx span{display:none}
    .stat .tx strong{font-size:24px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
    .stat .tx small{font-size:11.5px;color:var(--muted);line-height:1.4}
    .sublk{border:0;background:transparent;padding:0;font:inherit;color:var(--rv);font-weight:600;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
    .sublk:hover{color:var(--rv2)}

    /* ---------------- Gráficos ---------------- */
    .charts{display:grid;gap:14px;margin-bottom:14px}
    .chart-row-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;margin-top:14px}
    .chart-row-2>.card{margin-top:0}
    .donut-wrap{display:flex;gap:20px;align-items:center;flex-wrap:wrap}
    .donut{position:relative;width:128px;height:128px;flex:none}
    .donut svg{width:100%;height:100%;display:block;transform:rotate(-90deg)}
    .donut .mid{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;line-height:1.15;pointer-events:none}
    .donut .mid b{display:block;font-size:22px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
    .donut .mid span{display:block;font-size:9.5px;color:var(--muted);font-weight:600;margin-top:2px}
    .legend{display:grid;gap:5px;flex:1;min-width:170px;max-width:460px}
    .leg{display:flex;align-items:center;gap:8px;font-size:12px;width:100%;border:0;background:transparent;padding:4px 8px;border-radius:4px;text-align:left}
    .leg:hover{background:var(--line-2)}
    .leg i{width:10px;height:10px;border-radius:2px;flex:none;font-style:normal}
    .leg .lgn{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:500;text-align:left;color:var(--ink-2)}
    .leg .vl{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
    .leg .pc{color:var(--muted);font-size:11px;min-width:36px;text-align:right;font-variant-numeric:tabular-nums}
    .hbars{display:grid;gap:10px}
    .hbar{display:grid;grid-template-columns:minmax(92px,150px) minmax(0,1fr) auto;gap:11px;align-items:center;font-size:12px}
    .hbar .lb{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;border:0;background:transparent;padding:0;text-align:left;color:var(--rv)}
    .hbar .lb:hover{text-decoration:underline}
    .hbar .tr{height:18px;background:var(--line-2);border-radius:3px;overflow:hidden;display:flex;cursor:pointer}
    .hbar .tr i{display:block;height:100%;font-style:normal}
    .hbar .vv{font-variant-numeric:tabular-nums;font-weight:700;font-size:12px;min-width:60px;text-align:right;border:0;background:transparent;padding:0;color:inherit;cursor:pointer}
    .hbar .vv:hover{color:var(--rv);text-decoration:underline}
    .mini-legend{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:11px;padding-top:9px;border-top:1px solid var(--line-2)}
    .mini-legend span,.mleg,.mleg-off{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--muted);font-weight:500}
    .mini-legend i{width:9px;height:9px;border-radius:2px;font-style:normal;flex:none}
    .mleg{border:0;background:transparent;padding:3px 9px;border-radius:4px;transition:background .12s,color .12s,opacity .12s}
    .mleg:hover{background:var(--line-2);color:var(--ink)}
    .mleg.on{background:var(--rvl);color:var(--rv2);font-weight:600}
    .mleg.dim{opacity:.45}
    .mleg-off{padding:3px 9px}
    .donut svg{animation:aro-entra .45s cubic-bezier(.2,.8,.2,1) both}
    @keyframes aro-entra{from{opacity:0;transform:rotate(-90deg) scale(.82)}to{opacity:1;transform:rotate(-90deg) scale(1)}}
    circle.arc{cursor:pointer;transition:opacity .2s,stroke-width .2s}
    circle.arc:hover,circle.arc:focus-visible{stroke-width:23;outline:none}
    circle.arc.on{stroke-width:23}
    circle.arc.dim{opacity:.25}
    .hbar .tr i.seg{cursor:pointer;transition:width .5s cubic-bezier(.2,.8,.2,1),opacity .2s,filter .2s}
    .hbar .tr i.seg:hover{filter:brightness(1.12) saturate(1.15)}
    .hbar .tr i.seg:focus-visible{outline:2px solid #fff;outline-offset:-2px}
    .hbar .tr i.seg.dim{opacity:.28}
    .hbar{transition:opacity .2s}
    .hbar.dim{opacity:.42}
    .hbar.on .lb{text-decoration:underline;text-underline-offset:3px}
    .leg{transition:background .12s,opacity .12s}
    .leg.on{background:var(--rvl);box-shadow:inset 3px 0 0 var(--rv)}
    .leg.dim{opacity:.42}
    .prog i{transition:width .5s cubic-bezier(.2,.8,.2,1)}

    /* ---------------- Tablas ---------------- */
    .tw{overflow:auto;border:1px solid var(--line);border-radius:var(--r)}
    .card-b.tight .tw{border:0;border-radius:0}
    table.t{width:100%;border-collapse:collapse;font-size:12px}
    table.t th{position:sticky;top:0;background:var(--rvl3);color:var(--ink-2);font-size:11px;font-weight:600;text-align:left;padding:8px 12px;white-space:nowrap;z-index:1;cursor:pointer;user-select:none;border-bottom:1px solid var(--line)}
    table.t th:empty{cursor:default}
    table.t th:hover:not(:empty){background:var(--line-2)}
    table.t th.s-asc::after{content:" ▲";font-size:8px;opacity:.8}
    table.t th.s-desc::after{content:" ▼";font-size:8px;opacity:.8}
    table.t td{padding:8px 12px;border-bottom:1px solid var(--line-2);font-size:12px;vertical-align:middle;color:var(--ink)}
    table.t tbody tr:last-child td{border-bottom:0}
    table.t tbody tr:hover td{background:var(--rvl3)}
    table.t tfoot td{background:var(--rvl3);font-weight:700;color:var(--ink);border-top:1px solid var(--line);border-bottom:0}
    .rt{text-align:right}
    .nm{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
    table.t td.code{white-space:nowrap}
    .lk{border:0;background:transparent;padding:0;text-align:left;color:var(--rv);font-weight:600;font-size:12px}
    .lk:hover{text-decoration:underline}
    .fv{border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;cursor:pointer}
    .fv:hover{color:var(--rv);text-decoration:underline}

    /* ---------------- Lozenges de estado (Jira) ---------------- */
    .pill{display:inline-flex;align-items:center;gap:4px;border-radius:3px;padding:2px 6px;font-size:11px;font-weight:700;white-space:nowrap;max-width:100%;line-height:1.45}
    .pill.a{background:var(--rvl);color:var(--rv2)}
    .pill.i{background:var(--info-soft);color:var(--info)}
    .pill.o{background:var(--grl);color:var(--grd)}
    .pill.w{background:var(--warn-soft);color:var(--warn)}
    .pill.b{background:var(--bad-soft);color:var(--bad)}
    .pill.g{background:#F1F2F4;color:var(--ink-2)}
    .pill.e{background:var(--epic-soft);color:var(--epic)}
    .pill.pf{border:1px solid transparent;cursor:pointer;transition:filter .12s,box-shadow .12s}
    .pill.pf:hover{filter:brightness(.95);box-shadow:0 0 0 2px var(--rvl)}
    .pill.pf.on{box-shadow:0 0 0 2px var(--rv);border-color:var(--rv)}
    .pill.pf::after{content:"";width:0}
    .tags{display:flex;flex-wrap:wrap;gap:6px}
    .al-lk{border:0;background:transparent;padding:0;font:inherit;font-weight:700;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
    .al-lk:hover{opacity:.7}
    .dot{width:7px;height:7px;border-radius:50%;flex:none;display:inline-block}
    .dot.o{background:var(--gr)}.dot.w{background:#B38600}.dot.b{background:#C9372C}.dot.g{background:var(--faint)}.dot.a{background:var(--rv)}
    .prog{height:6px;background:var(--line-2);border-radius:3px;overflow:hidden;position:relative;flex:1;min-width:66px}
    .prog i{display:block;height:100%;border-radius:3px;background:var(--rv);font-style:normal}
    .prog.b i{background:#C9372C}.prog.w i{background:#B38600}.prog.o i{background:var(--gr)}
    .prog .tick{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.35;border-radius:2px}
    .progline{display:flex;align-items:center;gap:9px;min-width:110px}
    .progline b{font-variant-numeric:tabular-nums;font-size:12px;min-width:34px;text-align:right;font-weight:700}

    /* ---------------- Ficha de empresa ---------------- */
    .co-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
    .co-hero{display:flex;gap:14px;align-items:center;padding:14px 16px;background:#fff;border-bottom:1px solid var(--line-2)}
    .co-mark{width:40px;height:40px;border-radius:8px;background:linear-gradient(135deg,#0C66E4,#8270DB);color:#fff;display:grid;place-items:center;font-weight:800;font-size:14px;flex:none}
    .co-id{flex:1;min-width:170px}
    .co-id h2{font-size:16px;color:var(--ink);font-weight:700}
    .co-id p{font-size:12px;color:var(--muted);margin:3px 0 0}
    .co-hero .sp{display:flex;gap:7px;flex-wrap:wrap;align-items:center}
    .co-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr));gap:0;background:var(--rvl3)}
    .co-kpi{border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);text-align:center;padding:9px 6px}
    .co-kpi:last-child{border-right:0}
    .co-kpi span{display:block;font-size:10px;color:var(--muted);font-weight:600}
    .co-kpi b{display:block;font-size:16px;font-weight:700;font-variant-numeric:tabular-nums;margin-top:3px;letter-spacing:-.02em;color:var(--ink)}
    .co-contacts{display:flex;gap:9px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--line-2);background:#fff}
    .ct{border:1px solid var(--line);border-radius:6px;padding:8px 11px;font-size:12px;min-width:180px;background:#fff}
    .ct b{display:block;font-size:12px;color:var(--ink)}
    .ct span{display:block;color:var(--muted);font-size:11px;margin-top:2px}
    .ct a{color:var(--rv);text-decoration:none}
    .ct a:hover{text-decoration:underline}
    .prj{border-top:1px solid var(--line)}
    .prj-h{display:flex;gap:11px;align-items:center;padding:10px 16px;flex-wrap:wrap;background:var(--rvl3);border-bottom:1px solid var(--line-2)}
    .prj-h h3{font-size:12.5px;color:var(--ink);font-weight:700}
    .prj-h .sp{margin-left:auto;display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .prods{padding:14px 16px 16px;display:grid;gap:12px}

    /* ---------------- Tarjeta de producto ---------------- */
    .pd{border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden;box-shadow:var(--sh)}
    .pd.b{border-left:3px solid #C9372C}
    .pd.w{border-left:3px solid #B38600}
    .pd.o{border-left:3px solid var(--gr)}
    .pd.g{border-left:3px solid var(--line-3)}
    .pd.off{opacity:.45;filter:saturate(.4)}
    .pd.off:hover{opacity:1;filter:none}
    .pd.off .pd-acts,.pd.off .pd-alerts{display:none}
    .pd-off-tag{font-size:10px;font-weight:600;color:var(--faint);align-self:center}
    .pd-h{display:flex;gap:12px;align-items:flex-start;padding:11px 14px 9px;flex-wrap:wrap;border-bottom:1px solid var(--line-2)}
    .pd-h .ti{flex:1;min-width:180px}
    .pd-h .ti h4{font-size:13px;color:var(--ink);font-weight:600;display:flex;align-items:center;gap:6px}
    .pd-h .ti h4 svg{width:14px;height:14px;flex:none;color:var(--rv)}
    .pd-h .ti p{font-size:11.5px;color:var(--muted);margin:3px 0 0}
    .pd-h .st{display:flex;gap:5px;flex-wrap:wrap;align-items:center}
    .pd-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(124px,1fr));gap:0}
    .pd-grid>div{padding:8px 14px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);min-width:0}
    .pd-grid>div span{display:block;font-size:10px;color:var(--muted);font-weight:600}
    .pd-grid>div b{display:block;font-size:12.5px;margin-top:3px;font-variant-numeric:tabular-nums;font-weight:600;color:var(--ink)}
    .pd-grid>div small{display:block;font-size:11px;color:var(--faint);margin-top:1px}
    .pd-alerts{padding:10px 14px 0;display:grid;gap:5px}
    .pd-alert{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;background:var(--bad-soft);border-radius:4px;padding:7px 10px;color:var(--bad);line-height:1.5}
    .pd-alert.w{background:var(--warn-soft);color:var(--warn)}
    .pd-alert.o{background:var(--grl);color:var(--grd)}
    .pd-alert.i{background:var(--info-soft);color:var(--info)}
    .pd-alert svg{width:13px;height:13px;flex:none;margin-top:1px}
    .pd-alert b{font-weight:700;flex:none}
    .pd-acts{display:flex;gap:6px;flex-wrap:wrap;padding:10px 14px;background:var(--rvl3);border-top:1px solid var(--line-2);align-items:center}
    .lockmsg{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
    .lockmsg svg{width:12px;height:12px}
    .tl{padding:10px 14px 12px}
    .tl-item{display:grid;grid-template-columns:96px 1fr;gap:11px;font-size:11.5px;padding:7px 0;border-top:1px solid var(--line-2)}
    .tl-item time{color:var(--faint);font-size:11px;font-variant-numeric:tabular-nums}
    .tl-item b{display:block;font-size:12px;color:var(--ink)}
    .tl-item span{display:block;color:var(--muted);margin-top:2px;line-height:1.55}

    /* ---------------- Plan de trabajo (gantt) ---------------- */
    .gantt{overflow-x:auto;padding:2px 0}
    .g-in{min-width:620px;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
    .g-r{display:grid;grid-template-columns:180px 1fr;align-items:stretch;border-bottom:1px solid var(--line-2)}
    .g-r:last-child{border-bottom:0}
    .g-r.hd{background:var(--rvl3);border-bottom:1px solid var(--line)}
    .g-r.hd .g-l{color:var(--ink-2);font-size:11px;font-weight:600;border-right-color:var(--line-2)}
    .g-l{padding:7px 12px;border-right:1px solid var(--line-2);font-size:11.5px;display:flex;align-items:center;gap:7px;min-width:0}
    .g-l span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .g-nm{border:0;background:transparent;padding:0;font:inherit;color:inherit;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;min-width:0}
    .g-nm:hover{color:var(--rv);text-decoration:underline}
    button.dot{border:0;padding:0;cursor:pointer;transition:transform .15s}
    button.dot:hover{transform:scale(1.4)}
    .g-r:hover{background:var(--rvl3)}
    .g-t{position:relative;min-height:30px;--c:6;background-image:repeating-linear-gradient(90deg,transparent,transparent calc(100%/var(--c) - 1px),var(--line-2) calc(100%/var(--c) - 1px),var(--line-2) calc(100%/var(--c)))}
    .g-s{display:flex;font-size:10.5px;color:var(--muted);position:relative;font-weight:600}
    .g-s div{flex:1;padding:7px 4px;text-align:center;border-right:1px solid var(--line-2);white-space:nowrap;overflow:hidden}
    .g-b{position:absolute;top:8px;height:13px;border-radius:10px;background:var(--rvl);overflow:hidden;cursor:pointer;transition:filter .15s}
    .g-b:hover{filter:brightness(1.08)}
    .g-b i{display:block;height:100%;background:var(--rv);font-style:normal}
    .g-b.b{background:var(--bad-soft)} .g-b.b i{background:#C9372C}
    .g-b.w{background:var(--warn-soft)} .g-b.w i{background:#B38600}
    .g-b.o{background:var(--grl)} .g-b.o i{background:var(--gr)}
    .g-base{position:absolute;top:24px;height:3px;border-radius:3px;background:repeating-linear-gradient(90deg,var(--faint),var(--faint) 4px,transparent 4px,transparent 8px)}
    .g-m{position:absolute;top:9px;width:10px;height:10px;border-radius:2px;background:#fff;border:2px solid var(--rv2);transform:rotate(45deg)}
    .g-m.done{background:var(--gr);border-color:var(--grd)}
    .g-m.late{background:#C9372C;border-color:var(--bad)}
    .g-now{position:absolute;top:0;bottom:0;width:2px;background:var(--gr);opacity:.8}
    .g-r.hd .g-now::after{content:"hoy";position:absolute;top:2px;left:4px;font-size:9px;color:var(--grd);font-weight:700}
    .g-empty{position:absolute;left:10px;top:9px;font-size:11px;color:var(--faint)}

    /* ---------------- Alertas por empresa ---------------- */
    .al-co{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:14px;overflow:hidden}
    .al-h{display:flex;gap:11px;align-items:center;padding:11px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:#fff}
    .al-h h3{font-size:13px;color:var(--ink);font-weight:700;display:inline-flex;align-items:center;gap:7px}
    .al-h .co-mark,.card-h .co-mark{width:30px;height:30px;font-size:11px;border-radius:6px}
    .al-h h3 svg{width:15px;height:15px;color:var(--muted)}
    .al-h .sp{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}

    /* ---------------- Formularios ---------------- */
    .grid{display:grid;grid-template-columns:repeat(12,1fr);gap:11px}
    .f{grid-column:span 4;min-width:0}
    .c2{grid-column:span 2}.c3{grid-column:span 3}.c4{grid-column:span 4}.c5{grid-column:span 5}
    .c6{grid-column:span 6}.c7{grid-column:span 7}.c8{grid-column:span 8}.c9{grid-column:span 9}.c12{grid-column:span 12}
    .f label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px}
    .f input,.f select,.f textarea{width:100%;border:1px solid var(--line-3);border-radius:4px;background:#fff;padding:7px 10px;font-size:12.5px;outline:none;color:var(--ink)}
    .f input,.f select{height:34px}
    .f input[type=number]{font-variant-numeric:tabular-nums;text-align:right}
    .f textarea{min-height:70px;resize:vertical;line-height:1.55}
    .f input:focus,.f select:focus,.f textarea:focus{border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
    .f input[readonly]{background:var(--rvl3);color:var(--muted)}
    .f .hint{display:block;font-size:11px;color:var(--faint);margin-top:4px;line-height:1.5;font-weight:400}
    .f .ck{display:flex;gap:9px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:9px 11px;font-size:12px;cursor:pointer;background:#fff}
    .f .ck:hover{background:var(--rvl3);border-color:var(--line-3)}
    .f .ck strong{display:block;font-size:12px;color:var(--ink)}
    .f .ck span{display:block;color:var(--muted);font-size:11px;margin-top:2px;line-height:1.5;font-weight:400}
    .row{display:flex;gap:8px;flex-wrap:wrap}

    /* ---------------- Parametrización ---------------- */
    .cols2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;align-items:start}
    .crud{display:grid;gap:7px}
    .crud-hd,.crud-r{display:grid;gap:7px;align-items:center}
    .crud-hd{font-size:11px;font-weight:600;color:var(--muted);padding-bottom:6px;border-bottom:1px solid var(--line)}
    .crud-r{padding:1px 0}
    .crud-r .f label{display:none}
    .crud-r>.f{grid-column:auto}
    .del{border:0;background:transparent;color:var(--bad);font-size:14px;line-height:1;width:28px;height:30px;border-radius:4px}
    .del:hover{background:var(--bad-soft)}

    /* ---------------- Cajón lateral (detalle) ---------------- */
    .veil{position:fixed;inset:0;background:rgba(9,30,66,.4);z-index:60;opacity:0;pointer-events:none;transition:opacity .18s}
    .veil.open{opacity:1;pointer-events:auto}
    .drawer{position:fixed;top:0;right:0;height:100vh;width:min(1020px,97vw);background:#fff;z-index:65;transform:translateX(101%);transition:transform .22s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;box-shadow:var(--sh-2)}
    .drawer.open{transform:translateX(0)}
    .dr-h{padding:12px 20px;display:flex;align-items:flex-start;gap:12px;background:#fff;border-bottom:1px solid var(--line)}
    .dr-h .t{flex:1;min-width:0}
    .dr-h .t span{display:block;color:var(--muted);font-size:12px;font-weight:500}
    .dr-h .t h2{font-size:17px;color:var(--ink);font-weight:700;margin:3px 0 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .dr-h .t p{font-size:12px;color:var(--muted);margin:3px 0 0}
    .dr-b{overflow:auto;flex:1;padding:16px 20px 26px;background:var(--rvl3)}
    .dr-f{padding:10px 20px;border-top:1px solid var(--line);display:flex;align-items:center;gap:8px;background:#fff;flex-wrap:wrap}
    .dr-f .sp{flex:1}
    .strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(112px,1fr));gap:0;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:14px}
    .strip>div{padding:9px 12px;border-right:1px solid var(--line-2);min-width:0}
    .strip>div:last-child{border-right:0}
    .strip>div span{display:block;font-size:10px;color:var(--muted);font-weight:600}
    .strip>div b{display:block;font-size:13px;margin-top:3px;font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
    .acc{background:#fff;border:1px solid var(--line);border-radius:var(--r);margin-bottom:12px;overflow:hidden}
    .acc>summary{list-style:none;cursor:pointer;padding:11px 16px;display:flex;align-items:center;justify-content:space-between;gap:11px;font-size:13px;font-weight:600;color:var(--ink);background:#fff}
    .acc>summary:hover{background:var(--rvl3)}
    .acc>summary::-webkit-details-marker{display:none}
    .acc>summary::after{content:"⌄";color:var(--muted);font-size:14px;transition:transform .15s}
    .acc[open]>summary::after{transform:rotate(180deg)}
    .acc[open]>summary{border-bottom:1px solid var(--line-2)}
    .acc-b{padding:16px}
    .sub{border:1px solid var(--line);border-radius:6px;margin-top:12px;background:#fff;overflow:hidden}
    .sub>summary{padding:9px 12px;font-size:12px;font-weight:600;cursor:pointer;color:var(--ink-2);background:var(--rvl3)}
    .sub-b{border-top:1px solid var(--line-2);padding:12px}
    .box{border:1px solid var(--line);border-radius:6px;background:#fff;padding:12px;margin-bottom:10px}
    .box-h{display:flex;align-items:center;justify-content:space-between;gap:9px;margin-bottom:10px}
    .box-h strong{font-size:12.5px;color:var(--ink)}
    .box-h span{font-size:11px;color:var(--muted)}

    /* ---------------- Asistente (wizard) ---------------- */
    .steps{display:flex;gap:0;margin-bottom:14px;flex-wrap:wrap;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:#fff}
    .step{flex:1;min-width:126px;border:0;border-right:1px solid var(--line-2);background:#fff;padding:10px 14px;text-align:left}
    .step:last-child{border-right:0}
    .step b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
    .step span{display:block;font-size:11px;color:var(--muted);margin-top:2px}
    .step .n{width:22px;height:22px;border-radius:50%;background:var(--line-2);color:var(--ink-2);display:inline-grid;place-items:center;font-size:11px;font-weight:700;margin-bottom:6px}
    .step.on{background:var(--rvl);box-shadow:inset 0 -2.5px 0 var(--rv)}
    .step.on b{color:var(--rv2)}
    .step.on .n{background:var(--rv);color:#fff}
    .step.done .n{background:var(--gr);color:#fff}
    .checks{display:grid;gap:7px}
    .chk{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);border-radius:6px;padding:9px 12px;font-size:12px;background:#fff}
    .chk.ok{border-color:#7EE2B8;background:var(--grl)}
    .chk.no{border-color:#F8AEA9;background:var(--bad-soft)}
    .chk .m{width:18px;height:18px;border-radius:50%;display:grid;place-items:center;flex:none;font-size:10px;font-weight:800;color:#fff}
    .chk.ok .m{background:#1F845A}
    .chk.no .m{background:#C9372C}
    .chk strong{display:block;font-size:12px}
    .chk span{display:block;color:var(--muted);font-size:11px;margin-top:3px;line-height:1.55}
    .chk.no span{color:var(--bad)}

    /* ---------------- Tablero kanban ---------------- */
    .kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(268px,320px);gap:12px;overflow-x:auto;align-items:start;padding-bottom:8px}
    .kcol{background:var(--rvl3);border-radius:var(--r);border-top:4px solid var(--kc,#8590A2);min-height:180px;display:flex;flex-direction:column}
    .kcol-h{display:flex;align-items:center;gap:8px;padding:10px 14px 6px;font-size:11.5px;font-weight:700;letter-spacing:.6px;color:var(--muted);text-transform:uppercase}
    .kcol-h .kn{background:var(--line-2);color:var(--ink-2);border-radius:10px;font-size:10.5px;padding:1px 8px;font-weight:700;letter-spacing:0}
    .kcol-h svg{width:14px;height:14px;color:var(--grd)}
    .kcol-b{display:flex;flex-direction:column;gap:8px;padding:6px 8px 10px}
    .kcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh);padding:10px 12px;text-align:left;cursor:pointer;transition:box-shadow .12s,border-color .12s;width:100%}
    .kcard:hover{box-shadow:var(--sh-2);border-color:var(--line-3)}
    .kcard .kt{font-size:12.5px;font-weight:500;color:var(--ink);line-height:1.45;display:block}
    .vpills{display:flex;gap:2px;align-items:center;flex-wrap:wrap;margin-left:6px}
    .vpill{border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:600;padding:5px 12px;border-radius:20px;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s}
    .vpill:hover{background:var(--rvl3);color:var(--ink)}
    .vpill.on{color:var(--rv);background:var(--rvl);box-shadow:inset 0 0 0 1px var(--rv)}
    .softlz{display:inline-flex;align-items:center;gap:6px;border-radius:4px;padding:3px 10px;font-size:11.5px;font-weight:600;white-space:nowrap}
    .softlz.o{background:var(--grl);color:var(--grd)}
    .softlz.w{background:var(--warn-soft);color:var(--warn)}
    .softlz.b{background:var(--bad-soft);color:var(--bad)}
    .softlz.g{background:var(--line-2);color:var(--ink-2)}
    .score{border-radius:4px;padding:1px 7px;font-size:10.5px;font-weight:800;font-variant-numeric:tabular-nums;flex:none}
    .score.o{background:var(--grl);color:var(--grd)}
    .score.w{background:var(--warn-soft);color:var(--warn)}
    .score.b{background:var(--bad-soft);color:var(--bad)}
    .score.g{background:var(--line-2);color:var(--ink-2)}
    .datechip{display:inline-flex;align-items:center;gap:5px;border:1px solid var(--line);border-radius:6px;padding:2px 8px;font-size:11px;color:var(--ink-2);white-space:nowrap}
    .datechip svg{color:var(--muted)}
    .owner{display:inline-flex;align-items:center;gap:7px;white-space:nowrap}
    .avmini{width:20px;height:20px;border-radius:50%;background:var(--rv);color:#fff;display:inline-grid;place-items:center;font-size:8.5px;font-weight:800;flex:none}
    .kcard .kco,.un-item .kco{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .un-item .kco{font-size:10.5px;margin-top:2px}
    .kcard .ke{margin:7px 0 0;display:flex;gap:5px;flex-wrap:wrap}
    .kcard .kf{display:flex;align-items:center;gap:7px;margin-top:9px}
    .kcard .kf svg{width:14px;height:14px;color:var(--rv);flex:none}
    .kcard .kf .kcode{font-size:11.5px;color:var(--muted);font-weight:600}
    .kcard .kf .kdue{font-size:10.5px;color:var(--muted);font-variant-numeric:tabular-nums}
    .kcard .kf .kdue.late{color:var(--bad);font-weight:700}
    .kcard .kav{margin-left:auto;width:22px;height:22px;border-radius:50%;background:var(--rv);color:#fff;display:grid;place-items:center;font-size:9px;font-weight:800;flex:none}
    .kcard .kprog{margin-top:8px}

    /* ---------------- Calendario ---------------- */
    .cal-top{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line-2);flex-wrap:wrap;background:#fff}
    .cal-top h2{font-size:14px;color:var(--ink);font-weight:700}
    .cal-ctl{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
    .cal-ctl select{height:30px;border:1px solid var(--line-3);border-radius:4px;background:#fff;font-size:12px;padding:0 8px}
    .cal-wrap{display:grid;grid-template-columns:minmax(0,1fr) 300px;align-items:start}
    .cal-main{min-width:0}
    .cal{display:grid;grid-template-columns:repeat(7,minmax(112px,1fr));overflow:auto}
    .wd{background:var(--rvl3);color:var(--muted);font-size:11px;font-weight:600;padding:7px 9px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line)}
    .wd:last-child{border-right:0}
    .dy{min-height:104px;padding:6px 7px;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);background:#fff}
    .dy[data-day-open]{cursor:pointer}
    .dy[data-day-open]:hover{background:var(--rvl3)}
    .dy.out{background:var(--rvl3);color:var(--faint)}
    .dy.today{background:#fff}
    .dy.hol{background:#FFFDF3}
    .dy-n{display:flex;justify-content:space-between;gap:5px;font-size:11.5px;font-weight:600;margin-bottom:4px;color:var(--ink-2)}
    .dy.today .dy-n>span:first-child{background:var(--rv);color:#fff;border-radius:4px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding:0 4px}
    .dy.out .dy-n{color:var(--faint)}
    .dy-h{font-size:9.5px;color:var(--warn);text-align:right;max-width:72px;font-weight:600}
    .ev{display:block;width:100%;border:0;border-left:3px solid var(--rv);background:var(--rvl);color:var(--rv2);text-align:left;padding:3px 6px;margin-top:3px;border-radius:3px;font-size:10.5px}
    .ev.b{background:var(--bad-soft);color:var(--bad);border-left-color:#C9372C}
    .ev.w{background:var(--warn-soft);color:var(--warn);border-left-color:#B38600}
    .ev.o{background:var(--grl);color:var(--grd);border-left-color:var(--gr)}
    .ev b{display:block;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .ev span{display:block;font-size:9.5px;opacity:.85;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .more{border:0;background:transparent;color:var(--rv);font-size:11px;font-weight:600;padding:3px 0}
    .hols{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 16px;border-bottom:1px solid var(--line-2);background:#FFFDF3}
    .hol-c{font-size:11px;border:1px solid #F5E6B8;background:var(--warn-soft);color:var(--warn);padding:2px 8px;border-radius:3px;font-weight:600}
    .cal-side{border-left:1px solid var(--line);padding:14px;background:#fff;position:sticky;top:0}
    .cal-side h3{font-size:14px;font-weight:700;color:var(--ink);margin-bottom:4px}
    .cal-side .note{margin-bottom:10px}
    .un-list{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow:auto}
    .un-item{border:1px solid var(--line);border-radius:6px;background:#fff;padding:9px 11px;text-align:left;cursor:pointer;transition:border-color .12s,box-shadow .12s;width:100%}
    .un-item:hover{border-color:var(--line-3);box-shadow:var(--sh)}
    .un-item .ut{font-size:12px;font-weight:500;color:var(--ink);display:block;line-height:1.4}
    .un-item .uf{display:flex;align-items:center;gap:7px;margin-top:6px}
    .un-item .uf svg{width:13px;height:13px;color:var(--rv);flex:none}
    .un-item .uf .kcode{font-size:11px;color:var(--muted);font-weight:600}
    .un-item .uf .pill{margin-left:auto}

    /* ---------------- Modal y avisos ---------------- */
    .mveil{position:fixed;inset:0;background:rgba(9,30,66,.45);z-index:80;display:none;place-items:center;padding:18px}
    .mveil.open{display:grid}
    .modal{width:min(860px,97vw);max-height:88vh;overflow:auto;background:#fff;border-radius:8px;box-shadow:var(--sh-2)}
    .m-h{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;gap:11px;background:#fff;border-bottom:1px solid var(--line)}
    .m-h h2{font-size:15px;color:var(--ink);font-weight:700}
    .m-b{padding:16px 20px}
    .m-f{padding:12px 20px;border-top:1px solid var(--line-2);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap;background:#fff}
    .pre{border:1px solid var(--line);border-radius:6px;padding:12px;background:var(--rvl3);font-size:11.5px;line-height:1.7;white-space:pre-wrap;font-family:var(--mono);max-height:320px;overflow:auto}
    .toasts{position:fixed;right:22px;bottom:22px;z-index:95;display:grid;gap:9px}
    .toast{background:#fff;border:1px solid var(--line);border-left:3px solid var(--rv);border-radius:6px;padding:10px 13px;font-size:12px;min-width:250px;max-width:340px;line-height:1.55;box-shadow:var(--sh-2);color:var(--muted)}
    .toast strong{display:block;font-size:12.5px;margin-bottom:2px;color:var(--ink)}
    .toast.error{border-left-color:#C9372C}
    .toast.error strong{color:var(--bad)}
    .toast.warning{border-left-color:#B38600}
    .toast.warning strong{color:var(--warn)}
    .empty{padding:48px 20px;text-align:center;color:var(--muted)}
    .empty svg{width:44px;height:44px;opacity:.5;margin-bottom:12px;color:var(--rv)}
    .empty strong{display:block;color:var(--ink);font-size:15px;font-weight:700;margin-bottom:5px}
    .empty p{font-size:12.5px;margin:0 auto 14px;max-width:520px;line-height:1.65;color:var(--muted)}
    .empty .row{gap:8px;justify-content:center}

    /* ---------------- Guía ---------------- */
    .gmod{padding:14px 0;border-bottom:1px solid var(--line-2)}
    .gmod:last-of-type{border-bottom:0}
    .gmod-t{display:flex;align-items:center;gap:10px}
    .gmod-t h3{font-size:14px;font-weight:600;color:var(--ink);flex:1}
    .gfun{margin:10px 0 0;padding:10px 14px;background:var(--rvl3);border:1px solid var(--line-2);border-radius:8px}
    .gfun>b{font-size:11.5px;color:var(--ink)}
    .gfun ul{margin:6px 0 0;padding-left:18px}
    .gfun li{font-size:11.5px;color:var(--ink-2);margin:3px 0;line-height:1.55}
    .gshot{display:block;width:100%;max-width:980px;margin:12px auto 0;border:1px solid var(--line);border-radius:8px;box-shadow:var(--sh)}
    .guide-step{display:flex;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--line-2)}
    .guide-step:last-child{border-bottom:0}
    .guide-num{flex:0 0 34px;width:34px;height:34px;border-radius:50%;background:var(--rvl);color:var(--rv);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
    .guide-body{flex:1;min-width:0}

    /* ---------------- Adaptación ---------------- */
    @media(max-width:1280px){
      .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
      .chart-row-2{grid-template-columns:minmax(0,1fr)}
      .cols2{grid-template-columns:minmax(0,1fr)}
      .cal-wrap{grid-template-columns:minmax(0,1fr)}
      .cal-side{border-left:0;border-top:1px solid var(--line)}
    }
    .sbveil{display:none}
    @media(max-width:1100px){
      .sidebar{position:fixed;left:0;top:0;height:100vh;z-index:56;transform:translateX(-105%);transition:transform .2s;box-shadow:var(--sh-2)}
      .shell.sb-open .sidebar{transform:translateX(0)}
      .shell.sb-open .sbveil{display:block;position:fixed;inset:0;background:rgba(9,30,66,.45);z-index:54}
      .hdr-burger{display:inline-flex}
    }
    @media(max-width:960px){
      .hdr{padding:8px 12px}
      .crumbs,.proj-head{padding-left:14px;padding-right:14px}
      .tabs{padding:6px 14px 0}
      .toolbar{padding:12px 14px 0}
      .page{padding:14px 14px 24px}
      .grid{grid-template-columns:repeat(2,1fr)}
      .f,.c2,.c3,.c4,.c5,.c6,.c7,.c8,.c9,.c12{grid-column:span 1}
      .f.c12,.f.c9,.f.c8,.f.c7,.f.c6{grid-column:1/-1}
      .drawer{width:100vw}
      .g-r{grid-template-columns:120px 1fr}
      .crud-hd{display:none}
      .crud-r{grid-template-columns:1fr!important}
      .hbar{grid-template-columns:minmax(78px,108px) minmax(0,1fr) auto}
      .steps{flex-direction:column}
      .step{border-right:0;border-bottom:1px solid var(--line-2)}
    }
    @media(max-width:560px){
      .stats{grid-template-columns:1fr}
      .grid{grid-template-columns:1fr}
      .f,.f.c12,.f.c9,.f.c8,.f.c7,.f.c6{grid-column:1}
      .cal{grid-template-columns:repeat(7,104px)}
      .donut-wrap{justify-content:center}
      .find{max-width:none}
      .hdr-search{order:5;flex-basis:100%;max-width:none}
      .whoami select{max-width:96px}
      .kanban{grid-auto-columns:minmax(240px,280px)}
    }
    @media print{
      .tabs,.toolbar,.filters,.chips,.pd-acts,.drawer,.veil,.card-h .sp,.hdr-right,.sidebar,.hdr-search{display:none!important}
      body{background:#fff;padding:0}
      .shell{box-shadow:none;max-width:none}
      .page{padding:0}
      .card,.co-card,.al-co{break-inside:avoid}
    }
    @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* =====================================================================
   Añadido para el port a Django — NO existe en el prototipo original.
   Los forms de Django se renderizan con {{ form.as_p }} (salida por
   defecto, sin clases propias); este bloque viste esa salida con la
   misma piel que .f/.grid del sistema original, sin tocar forms.py.
   ===================================================================== */
/* El original distribuye los campos del formulario en una grilla densa de
   12 columnas con anchos por campo (c3/c4/c5/c6); `{{ form.as_p }}` no
   permite ese control por campo sin reescribir cada formulario a mano, así
   que acá se aproxima con una grilla automática: campos cortos (texto,
   select, fecha, número) quedan lado a lado, y los de texto largo
   (textarea, multi-select, checkboxes) ocupan la fila completa. */
.f-wrap:not(.row){display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:0 14px;align-items:start}
.f-wrap p{margin:0 0 11px;min-width:0}
.f-wrap p:has(textarea),.f-wrap p:has(select[multiple]),.f-wrap p:has(input[type=checkbox]),.f-wrap p:has(input[type=radio]){grid-column:1/-1}
.f-wrap label{display:block;font-size:11px;font-weight:600;color:var(--muted);margin-bottom:4px}
.f-wrap input,.f-wrap select,.f-wrap textarea{width:100%;border:1px solid var(--line-3);border-radius:4px;background:#fff;padding:7px 10px;font-size:12.5px;outline:none;color:var(--ink);font:inherit}
.f-wrap input,.f-wrap select{height:34px}
.f-wrap select[multiple]{height:auto;min-height:110px}
.f-wrap input[type=checkbox],.f-wrap input[type=radio]{width:auto;height:auto}
.f-wrap textarea{min-height:70px;resize:vertical;line-height:1.55}
.f-wrap input:focus,.f-wrap select:focus,.f-wrap textarea:focus{border-color:var(--rv);box-shadow:0 0 0 1px var(--rv)}
.f-wrap ul.errorlist{list-style:none;margin:4px 0 0;padding:0;color:var(--bad);font-size:11.5px}

/* El original nunca acotó la altura de .kcol-b porque su data de muestra
   era pequeña; con el histórico real (cientos de productos) una columna
   sin tope crece a decenas de miles de px. Se limita solo acá. */
.kcol{max-height:calc(100vh - 220px);overflow:hidden}
.kcol-b{flex:1 1 auto;min-height:0;overflow-y:auto}
.f-wrap .helptext{display:block;font-size:11px;color:var(--faint);margin-top:4px}

/* Mismo motivo que .kcol-b arriba: catálogos nuevos (sin referencia en el
   original) que con el histórico real pueden tener decenas de filas. */
.tw-cap{max-height:420px}

/* El original solo estiliza `.whoami select` (ahí la sesión es un selector
   de cargo demostrativo, sin login real); esta app tiene autenticación
   real, así que el nombre/correo va en un <b> — mismo peso visual que el
   select original: 12.5px/600, una sola línea, recortado con elipsis. */
.whoami b{display:block;font-size:12.5px;font-weight:600;color:var(--ink);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* Páginas de autenticación (login/logout/cambio de contraseña/2FA/etc).
   El original nunca tuvo login real — esto no existe ahí — así que se
   diseña una tarjeta centrada con la misma piel visual del resto de la app
   (mismas variables de color, mismos .btn/.pd-alert), envolviendo las
   plantillas `allauth/layouts/base.html` + `allauth/elements/*`. */
.auth-shell{min-height:100vh;display:flex;align-items:center;justify-content:center;background:var(--rvl3);padding:24px}
.auth-card{width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh-2);padding:28px 26px}
.auth-mark{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:20px}
.auth-mark .m{width:30px;height:30px;border-radius:7px;background:var(--rv);color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px;letter-spacing:.5px;flex:none}
.auth-mark b{color:var(--ink);font-size:15px;font-weight:700;display:block;line-height:1.2}
.auth-mark span{color:var(--muted);font-size:10.5px;display:block}
.auth-card h1{font-size:17px;font-weight:700;color:var(--ink);margin:0 0 6px;text-align:center}
.auth-card h2{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:0 0 10px;text-align:center}
.auth-card>p,.auth-card form>p.note{font-size:12px;color:var(--muted);margin:0 0 16px;text-align:center}
.auth-card>p a{color:var(--rv);font-weight:600;text-decoration:none}
.auth-card>p a:hover{text-decoration:underline}
.auth-card .f-wrap{margin:0}
.auth-card .f-wrap p{margin:0 0 12px}
.auth-card .btn-pri{width:100%;height:36px;margin-top:4px}
.auth-card hr{border:0;border-top:1px solid var(--line-2);margin:18px 0}
.auth-card ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.auth-card ul .btn{width:100%}
.auth-links{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:18px;padding-top:16px;border-top:1px solid var(--line-2)}
.auth-links a{font-size:11px;color:var(--muted);text-decoration:none;font-weight:600}
.auth-links a:hover{color:var(--rv);text-decoration:underline}