:root{--navy:#0B1F3A;--accent:#00A3E0;--bg:#F1F5F9;--card:#fff;--text:#0F172A;--muted:#64748B;--line:#E2E8F0;--ok:#16A34A;--warn:#CA8A04;--bad:#DC2626;--r:12px}
*{box-sizing:border-box}
body{margin:0;font-family:"Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px}
.hidden{display:none!important}
a{color:var(--accent)}
.brand{display:flex;align-items:center;gap:10px;color:#fff}
.brand b{letter-spacing:3px;font-size:15px}.brand small{display:block;font-size:11px;color:#94A3B8;letter-spacing:.3px}
.logo{width:34px;height:34px;border-radius:8px;background:var(--accent);color:var(--navy);display:grid;place-items:center;font-weight:900;font-size:18px}
.top{background:var(--navy);padding:12px 24px;display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.who{display:flex;gap:10px;align-items:center;color:#CBD5E1;font-size:13px;flex-wrap:wrap}
.pill{background:rgba(255,255,255,.12);color:#fff;padding:3px 10px;border-radius:99px;font-size:12px}
.tabs{background:var(--navy);padding:0 16px;display:flex;gap:2px;overflow-x:auto;border-bottom:3px solid var(--accent)}
.tabs button{background:none;border:0;color:#94A3B8;padding:12px 14px;font-size:14px;cursor:pointer;white-space:nowrap;border-radius:8px 8px 0 0}
.tabs button.active{background:var(--bg);color:var(--navy);font-weight:600}
.tabs button:hover:not(.active){color:#fff}
main{max-width:1400px;margin:0 auto;padding:20px 16px 60px}
h2{font-size:18px;margin:0 0 12px;color:var(--navy)}h3{font-size:15px;margin:0 0 10px;color:var(--navy)}
.grid{display:grid;gap:14px}.g4{grid-template-columns:repeat(4,1fr)}.g2{grid-template-columns:1fr 1fr}.g3{grid-template-columns:2fr 1fr}
@media(max-width:900px){.g4{grid-template-columns:1fr 1fr}.g2,.g3{grid-template-columns:1fr}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.stat .lbl{color:var(--muted);font-size:12px}.stat .val{font-size:28px;font-weight:700;color:var(--navy);margin-top:4px}.stat .sub{font-size:12px;color:var(--muted);margin-top:2px}
.bar{position:relative;height:10px;background:var(--line);border-radius:99px;overflow:visible}
.bar>i{position:absolute;left:0;top:0;bottom:0;border-radius:99px;background:var(--accent)}
.bar>b{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--navy);opacity:.6}
.arow{display:grid;grid-template-columns:200px 1fr 110px;gap:12px;align-items:center;padding:8px 0;border-bottom:1px solid var(--line)}
.arow:last-child{border:0}.arow .n{font-size:13px}.arow .p{text-align:right;font-size:13px}
@media(max-width:600px){.arow{grid-template-columns:1fr 80px}.arow .bar{grid-column:1/-1;order:3}}
.dot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:4px;vertical-align:middle}
.sem-verde,.stat .val.sem-verde{color:var(--ok)}.sem-amarillo,.stat .val.sem-amarillo{color:var(--warn)}.sem-rojo,.stat .val.sem-rojo{color:var(--bad)}
.tag{display:inline-block;padding:2px 7px;border-radius:5px;font-size:11px;color:#fff;white-space:nowrap}
.st{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:600;white-space:nowrap}
.st-pendiente{background:#E2E8F0;color:#475569}.st-en_curso{background:#DBEAFE;color:#1D4ED8}.st-en_revision{background:#FEF3C7;color:#92400E}.st-completada{background:#DCFCE7;color:#166534}.st-bloqueada{background:#FEE2E2;color:#991B1B}
.btn{border:1px solid var(--line);background:#fff;color:var(--text);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.btn:hover{border-color:var(--accent)}.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}.btn.primary:hover{filter:brightness(.95)}
.btn.danger{color:var(--bad)}.btn.ghost{background:transparent;color:#CBD5E1;border-color:rgba(255,255,255,.2)}.btn.sm{padding:5px 10px;font-size:12px}
input,select,textarea{font:inherit;border:1px solid var(--line);border-radius:8px;padding:8px 10px;background:#fff;color:var(--text);width:100%}
textarea{min-height:80px;resize:vertical}
label{display:block;font-size:12px;color:var(--muted);font-weight:600}label>input,label>select,label>textarea{margin-top:4px}
.filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center}.filters>*{width:auto;min-width:140px}
table.list{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden}
table.list th{background:#F8FAFC;text-align:left;font-size:12px;color:var(--muted);padding:10px;border-bottom:1px solid var(--line);position:sticky;top:0}
table.list td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.list tr.click:hover td{background:#F8FAFC;cursor:pointer}
.tbl-wrap{overflow:auto;border:1px solid var(--line);border-radius:var(--r);max-height:70vh}
.muted{color:var(--muted)}.small{font-size:12px}.right{text-align:right}.err{color:var(--bad);font-size:13px;min-height:1em}
.venc{color:var(--bad);font-weight:600}
.item{padding:9px 0;border-bottom:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;align-items:flex-start}.item:last-child{border:0}
.item .t{font-size:13px}.item .m{font-size:12px;color:var(--muted);margin-top:3px}
/* Gantt */
.gantt{overflow:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff;max-height:75vh}
.gantt table{border-collapse:collapse;font-size:12px;min-width:100%}
.gantt th,.gantt td{border-right:1px solid #F1F5F9;padding:0;height:26px}
.gantt thead th{position:sticky;top:0;background:#F8FAFC;z-index:2;font-weight:600;color:var(--muted);font-size:11px;padding:4px 2px;border-bottom:1px solid var(--line)}
.gantt thead tr:nth-child(2) th{top:24px}
.gantt .name{position:sticky;left:0;background:#fff;z-index:1;min-width:300px;max-width:300px;padding:3px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-right:1px solid var(--line)}
.gantt thead .name{z-index:3;background:#F8FAFC}
.gantt .wk{min-width:30px;width:30px}
.gantt .corte{border-right:2px solid #CBD5E1}
.gantt .today{background:rgba(0,163,224,.08)}
.gantt .grp td{background:#F8FAFC;font-weight:700;color:var(--navy)}
.gantt .grp .name{background:#F8FAFC}
.gb{height:16px;margin:0 -1px;border-radius:0}
.gb.s{border-top-left-radius:6px;border-bottom-left-radius:6px;margin-left:2px}.gb.e{border-top-right-radius:6px;border-bottom-right-radius:6px;margin-right:2px}
.gantt tr.click:hover td.name{color:var(--accent);cursor:pointer}
.legend{display:flex;gap:12px;flex-wrap:wrap;margin:8px 0 12px;font-size:12px}
/* Cortes */
.cortes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:16px}
.ccard{background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer}
.ccard.sel{border-color:var(--accent);box-shadow:0 0 0 2px rgba(0,163,224,.25)}
.ccard .n{font-weight:700;color:var(--navy)}.ccard .d{font-size:11px;color:var(--muted)}
.badge{font-size:10px;font-weight:700;padding:2px 6px;border-radius:4px;display:inline-block;margin-top:6px}
.b-futuro{background:#F1F5F9;color:#64748B}.b-actual{background:#DBEAFE;color:#1D4ED8}.b-cerrado{background:#FEF3C7;color:#92400E}.b-enviado{background:#DCFCE7;color:#166534}
.kgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:10px}
iframe.preview{width:100%;height:900px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* Modal */
dialog{border:0;border-radius:14px;padding:0;width:min(720px,95vw);box-shadow:0 20px 60px rgba(0,0,0,.3)}
dialog::backdrop{background:rgba(11,31,58,.5)}
dialog form{padding:20px;display:grid;gap:12px}
.mhead{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.mfoot{display:flex;justify-content:space-between;gap:8px;margin-top:6px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(100px);background:var(--navy);color:#fff;padding:10px 18px;border-radius:8px;transition:.3s;z-index:99;visibility:hidden}
.toast.show{transform:translateX(-50%) translateY(0);visibility:visible}
/* Login */
.login{min-height:100vh;display:grid;place-items:center;background:linear-gradient(135deg,var(--navy),#123A6B)}
.login-card{background:#fff;border-radius:16px;padding:28px;width:min(360px,92vw);display:grid;gap:14px}
.brand.big{color:var(--navy);margin-bottom:6px}.brand.big small{color:var(--muted)}
.empty{color:var(--muted);font-size:13px;padding:8px 0}
.gantt thead tr:nth-child(2) th{top:25px}
.gantt thead tr:nth-child(3) th{top:101px}