/* Radar de Pendientes — piezas propias sobre el tema KM Solutions · Adelca */
:root{
  --st-pend:#7b8494; --st-asig:#1d5fa8; --st-cur:#d08a00; --st-res:#1e7a46; --st-ven:#c8102e;
  --pv-1:#1f3864; --pv-2:#c8102e; --pv-3:#1d5fa8; --pv-4:#d08a00; --pv-5:#1e7a46; --pv-6:#7a4fb5; --pv-7:#0f7f86; --pv-8:#7b8494;
}
.st-pend{background:var(--st-pend)}.st-asig{background:var(--st-asig)}.st-cur{background:var(--st-cur)}.st-res{background:var(--st-res)}.st-ven{background:var(--st-ven)}
.side .nav-btn .tab-dot{align-self:center}

/* ---------- barra lateral que se contrae y se expande ---------- */
.menu-btn{display:inline-block}
.side{transition:width .2s ease,padding .2s ease,border-color .2s ease}
@media (min-width:821px){
  .app.side-off .side{width:0;padding-left:0;padding-right:0;border-right-color:transparent;overflow:hidden}
  .app.side-off .side > *{visibility:hidden}
}
@media (max-width:820px){
  .side-scrim{position:fixed;inset:0;z-index:29;background:rgba(20,24,33,.35)}
}

/* ---------- estados y prioridad ---------- */
.est{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:2px 9px 2px 7px;border-radius:999px;white-space:nowrap;background:var(--surface-2);color:#4d5563}
.est i{width:7px;height:7px;border-radius:50%;display:block}
.est.e-pend{background:#eef0f3;color:#4d5563}
.est.e-asig{background:var(--info-bg);color:var(--info)}
.est.e-cur{background:var(--warn-bg);color:var(--warn)}
.est.e-res{background:var(--ok-bg);color:var(--ok)}
.est.e-ven{background:var(--bad-bg);color:var(--bad)}
.prio{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.prio i{display:inline-flex;gap:2px}.prio i b{width:4px;height:11px;border-radius:1px;background:#dfe2e7;display:block}
.prio.p-crit{color:var(--red)}.prio.p-crit i b{background:var(--red)}
.prio.p-alta i b:nth-child(-n+3){background:#d08a00}
.prio.p-media i b:nth-child(-n+2){background:var(--info)}
.prio.p-baja i b:nth-child(1){background:#7b8494}
.prog{display:flex;align-items:center;gap:8px;min-width:120px}
.prog .trk{flex:1;height:7px;border-radius:4px;background:#eef0f3;overflow:hidden}
.prog .trk i{display:block;height:100%}
.prog small{font-variant-numeric:tabular-nums;color:var(--text-secondary);min-width:32px;text-align:right;font-size:11.5px}
.late{color:var(--red);font-weight:700}
td.ttl{white-space:normal;min-width:220px;font-weight:600}
td.ttl small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.scroll tbody tr.clk{cursor:pointer}
.scroll input[type=checkbox],.panel input[type=checkbox]{width:16px;height:16px;accent-color:var(--red);cursor:pointer;margin:0}
.av{width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;font-size:10px;font-weight:700;background:#eef0f3;color:#4d5563;flex:none;overflow:hidden}
.av img{width:100%;height:100%}

/* ---------- barra de selección múltiple ---------- */
.selbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--navy);color:#fff;border-radius:9px;padding:8px 12px}
.selbar b{font-variant-numeric:tabular-nums;margin-right:4px}
.main .selbar select{padding:5px 8px;font-size:12.5px}
.main .selbar button{padding:5px 11px}
.main .selbar button.lnk{background:transparent;border-color:transparent;color:#fff;text-decoration:underline}

/* ---------- radar (gráfico) ---------- */
.radar-svg{width:100%;height:auto;max-height:340px;display:block}
.radar-svg text{font-family:var(--sans);fill:#4d5563}
.radar-svg .lb{font-size:11.5px;font-weight:600}
.radar-svg .tk{font-size:9.5px;fill:#8a919d}

/* ---------- alertas ---------- */
.alertas{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;max-height:330px;overflow:auto}
.alertas li{display:grid;grid-template-columns:8px minmax(0,1fr) auto;gap:10px;align-items:center;padding:7px 6px;border-bottom:1px solid #eceef2;cursor:pointer;border-radius:6px}
.alertas li:hover{background:var(--surface-2)}
.alertas .dt{width:8px;height:8px;border-radius:50%}
.alertas .tt{font-weight:600;font-size:13px;min-width:0}
.alertas .tt small{display:block;font-weight:400;color:var(--muted);font-size:11.5px}
.alertas .dd{font-size:12px;font-weight:700;white-space:nowrap}

/* ---------- bienvenida (radar vacío) ---------- */
.vacio{background:#fff;border:1px dashed #c3c7cf;border-radius:9px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;align-items:flex-start}
.vacio h3{margin:0;color:var(--navy);font-size:16px}
.vacio ol{margin:0;padding-left:20px;color:var(--text-secondary);display:flex;flex-direction:column;gap:4px}

/* ---------- proyectos / Gantt ---------- */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
#main .pcard{all:unset;box-sizing:border-box;background:#fff;border:1px solid var(--line);border-top:3px solid var(--navy);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;cursor:pointer;min-width:0}
#main .pcard:hover{border-color:#aab0bb;border-top-color:var(--navy)}
#main .pcard[aria-pressed="true"]{border-color:var(--red);border-top-color:var(--red);background:#fffafb}
#main .pcard:focus-visible{outline:2px solid var(--red)}
.pcard b{font-size:13.5px;line-height:1.25}
.pcard .note{display:flex;gap:8px;flex-wrap:wrap}
.gantt{overflow:auto;border:1px solid var(--line);border-radius:9px;background:#fff;max-height:620px;position:relative}
.g-in{position:relative}
.g-row{display:flex;height:34px;border-bottom:1px solid #eceef2}
.g-row.g-p{background:#f7f8fa;height:38px}
.g-l{position:sticky;left:0;z-index:3;width:var(--gl);flex:none;background:#fff;border-right:1px solid var(--line);display:flex;align-items:center;gap:8px;padding:0 10px;box-sizing:border-box;min-width:0;font-size:12.5px}
.g-p .g-l{background:#f7f8fa;font-weight:700;color:var(--navy);font-size:13px}
.g-l .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.g-l .pc{font-variant-numeric:tabular-nums;color:var(--muted);font-size:11.5px;width:34px;text-align:right}
.g-l .code{color:var(--muted);font-size:11px}
.g-t{position:relative;flex:none}
.g-h{position:sticky;top:0;z-index:5;height:50px;background:#f7f8fa}
.g-h .g-l{background:#f7f8fa;z-index:6;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#4d5563;font-weight:700}
.g-m{position:absolute;top:0;height:25px;border-left:1px solid var(--line);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;padding:5px 6px;box-sizing:border-box;white-space:nowrap;overflow:hidden;color:var(--navy)}
.g-d{position:absolute;top:25px;height:25px;font-size:10.5px;color:var(--muted);line-height:25px;font-variant-numeric:tabular-nums;border-top:1px solid var(--line);box-sizing:border-box}
.g-d.we{background:rgba(31,56,100,.05)}
#main .g-b{all:unset;box-sizing:border-box;position:absolute;top:7px;height:20px;border-radius:4px;border:1px solid var(--c);background:color-mix(in srgb,var(--c) 22%,#fff);cursor:pointer;overflow:hidden;display:flex;align-items:center}
#main .g-b:hover{filter:brightness(.96)}
#main .g-b:focus-visible{outline:2px solid var(--red);outline-offset:1px}
.g-b > span{position:absolute;left:0;top:0;bottom:0;background:var(--c)}
.g-b em{position:relative;font-style:normal;font-size:10.5px;font-weight:700;color:#1d2330;padding:0 6px;white-space:nowrap}
#main .g-b.ven{box-shadow:0 0 0 2px var(--red)}
.g-sum{position:absolute;top:13px;height:10px;background:var(--navy);border-radius:2px}
.g-sum span{display:block;height:100%;background:var(--red);border-radius:2px}
.g-lb{position:absolute;top:9px;font-size:11px;color:var(--muted);white-space:nowrap;pointer-events:none}
.g-hoy{position:absolute;top:25px;bottom:0;width:2px;background:var(--red);z-index:2;pointer-events:none}
.g-hoy b{position:absolute;top:0;left:-15px;background:var(--red);color:#fff;font-size:9.5px;padding:0 4px;border-radius:3px;text-transform:uppercase}
.ley i.c{border-radius:50%}

/* ---------- tabla dinámica ---------- */
.pv{border-collapse:separate!important;border-spacing:0}
.pv th,.pv td{border-right:1px solid #eceef2}
.pv tbody th{position:sticky;left:0;background:#fff;text-align:left;font-weight:600;z-index:1;white-space:nowrap}
.pv td{text-align:right;font-variant-numeric:tabular-nums;cursor:pointer}
.pv td:hover{outline:2px solid var(--red);outline-offset:-2px}
.pv td.z{color:#b5bac3;cursor:default}.pv td.z:hover{outline:0}
.pv .tot{font-weight:700;background:#f7f8fa!important}

/* ---------- modal de edición ---------- */
.mdl{width:min(640px,100%);max-height:calc(100vh - 32px)}
.mdl-bd{padding:14px 16px;overflow:auto;display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}
.mdl-bd .full{grid-column:1/-1}
.mdl-bd label{display:flex;flex-direction:column;gap:4px;font-size:12px;font-weight:600;color:#4d5563}
.mdl-bd input,.mdl-bd select,.mdl-bd textarea{font:inherit;font-size:13.5px;color:var(--fg);border:1px solid var(--line);border-radius:7px;padding:7px 10px;background:#fff;min-width:0}
.mdl-bd input:disabled,.mdl-bd select:disabled,.mdl-bd textarea:disabled{background:#f4f5f7;color:#636b7a}
.mdl-bd textarea{min-height:70px;resize:vertical}
.mdl-bd input[type=range]{accent-color:var(--red);padding:0;border:none}
.mdl-ft{display:flex;gap:8px;align-items:center;padding:12px 16px;border-top:1px solid var(--line)}
.mdl-ft .sp{flex:1}
.modal button.danger{color:var(--bad);border-color:#f0b7b2}
.modal button.danger.armado{background:var(--red);color:#fff;border-color:var(--red)}
.mdl-err{grid-column:1/-1;color:var(--bad);font-size:13px;margin:0;min-height:1em}
.mdl-ro{grid-column:1/-1}
@media (max-width:560px){.mdl-bd{grid-template-columns:minmax(0,1fr)}}

/* ---------- reportes ---------- */
.rp-hd{display:flex;align-items:center;gap:14px;justify-content:space-between;flex-wrap:wrap}
.rp-hd img{height:34px}
.area-chips{display:flex;flex-wrap:wrap;gap:6px}
.area-chips span{display:inline-flex;align-items:center;gap:6px;background:var(--surface-2);border:1px solid var(--line);border-radius:999px;padding:3px 4px 3px 11px;font-size:12.5px}
.main .area-chips button{padding:0 7px!important;border-radius:999px!important;font-size:12px!important;line-height:18px}
#main .hb-btn{border:none;background:none;padding:2px 4px;border-radius:6px}
#main .hb-btn:hover{background:var(--surface-2)}