:root{--nar:#F64F00;--nar2:#FF8A3D;--nar-s:#FFF1E8;--ver:#3E9B0F;--ver-s:#ECF7E4;--nav:#00334A;--nav2:#0B4A66;--azu:#014D82;--roj:#C7362B;--roj-s:#FDECEA;--ama:#B7791F;--ama-s:#FFF6E0;
--tx:#1C2B33;--tx2:#5B6B73;--ln:#E3E8EB;--bg:#F5F7F8;--card:#fff;--r:14px;--sh:0 1px 2px rgba(0,30,45,.06),0 4px 14px rgba(0,30,45,.05)}
*{box-sizing:border-box}html,body{margin:0}body{font:15px/1.5 Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--tx);background:var(--bg);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:Poppins,Inter,sans-serif;margin:0 0 .4em;line-height:1.2;color:var(--nav)}h1{font-size:1.55rem}h2{font-size:1.2rem}h3{font-size:1.02rem}
a{color:var(--azu)}button,input,select,textarea{font:inherit;color:inherit}
.btn{display:inline-flex;align-items:center;gap:.4em;border:0;border-radius:10px;padding:.55em 1em;background:var(--nar);color:#fff;font-weight:600;cursor:pointer;text-decoration:none;white-space:nowrap;min-height:40px}
.btn:hover{filter:brightness(1.06)}.btn:disabled{opacity:.5;cursor:default}.btn.sec{background:#fff;color:var(--nav);box-shadow:inset 0 0 0 1.5px var(--ln)}.btn.ver{background:var(--ver)}.btn.nav{background:var(--nav)}.btn.roj{background:var(--roj)}.btn.peq{padding:.3em .7em;font-size:.85rem;min-height:32px}
input,select,textarea{border:1.5px solid var(--ln);border-radius:10px;padding:.5em .7em;background:#fff;min-height:40px;max-width:100%}textarea{min-height:70px;width:100%}input:focus,select:focus,textarea:focus{outline:2px solid var(--nar2);outline-offset:0;border-color:transparent}
label{display:block;font-size:.85rem;color:var(--tx2);font-weight:600;margin:.5em 0 .2em}
.card{background:var(--card);border-radius:var(--r);box-shadow:var(--sh);padding:18px;min-width:0}
.grid{display:grid;gap:14px}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:1100px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.g2,.g3,.g4{grid-template-columns:minmax(0,1fr)}}
.kpi .v{font:700 1.6rem Poppins,sans-serif;color:var(--nav);line-height:1.15}.kpi .l{font-size:.82rem;color:var(--tx2);font-weight:600;text-transform:uppercase;letter-spacing:.03em}.kpi .s{font-size:.85rem;color:var(--tx2);margin-top:2px}
.chip{display:inline-block;border-radius:99px;padding:.1em .6em;font-size:.78rem;font-weight:600;background:#EEF2F4;color:var(--tx2);white-space:nowrap}
.chip.ok{background:var(--ver-s);color:var(--ver)}.chip.al{background:var(--roj-s);color:var(--roj)}.chip.am{background:var(--ama-s);color:var(--ama)}.chip.na{background:var(--nar-s);color:var(--nar)}.chip.az{background:#E6F0F8;color:var(--azu)}
.fuente{font-size:.75rem;color:var(--tx2);margin-top:.6em}.fuente b{color:var(--ver)}.fuente i{color:var(--ama);font-style:normal;font-weight:600}
.tabla{width:100%;border-collapse:collapse;font-size:.88rem}.tabla th{text-align:left;font-size:.75rem;text-transform:uppercase;letter-spacing:.03em;color:var(--tx2);border-bottom:2px solid var(--ln);padding:.5em .55em;white-space:nowrap;position:sticky;top:0;background:#fff}
.tabla td{border-bottom:1px solid var(--ln);padding:.5em .55em;vertical-align:top}.tabla tr:hover td{background:#FAFBFC}.tabla .n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.scroll{overflow:auto;max-width:100%}.scroll.alto{max-height:520px}
.mut{color:var(--tx2)}.peq{font-size:.85rem}.neg{color:var(--roj)}.pos{color:var(--ver)}.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.esp{flex:1}
.aviso{border-radius:12px;padding:.8em 1em;background:var(--ama-s);color:#6B4A0E;font-size:.9rem}.aviso.ok{background:var(--ver-s);color:#24590A}.aviso.al{background:var(--roj-s);color:#7A1F17}.aviso.az{background:#E6F0F8;color:#073A63}
/* ---------- login ---------- */
.login{min-height:100vh;display:grid;grid-template-columns:1.1fr 1fr}
.login .foto{background:linear-gradient(180deg,rgba(0,51,74,.15),rgba(0,51,74,.85)),url(img/huerto.jpg) center/cover;color:#fff;display:flex;flex-direction:column;justify-content:flex-end;padding:44px}
.login .foto h1{color:#fff;font-size:2.1rem;max-width:520px}.login .foto p{max-width:520px;opacity:.92}
.login .form{display:flex;align-items:center;justify-content:center;padding:32px 20px;background:#fff}.login .caja{width:100%;max-width:400px}
.login .marca{display:flex;align-items:center;gap:12px;margin-bottom:22px}.login .marca img{height:56px}.login .marca b{font:700 1.25rem Poppins;color:var(--nav)}.login .marca span{display:block;font-size:.85rem;color:var(--tx2)}
.cuentas{display:grid;gap:6px;margin-top:16px}.cuentas button{text-align:left;border:1.5px solid var(--ln);background:#fff;border-radius:10px;padding:.5em .8em;cursor:pointer}.cuentas button:hover{border-color:var(--nar2)}.cuentas b{display:block;font-size:.9rem}.cuentas span{font-size:.8rem;color:var(--tx2)}
@media(max-width:860px){.login{grid-template-columns:1fr}.login .foto{min-height:220px;padding:24px}.login .foto h1{font-size:1.5rem}}
/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px minmax(0,1fr);min-height:100vh}
.side{background:var(--nav);color:#D5E3EA;padding:16px 12px;position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.side .marca{display:flex;align-items:center;gap:10px;padding:4px 8px 16px}.side .marca img{height:38px}.side .marca b{color:#fff;font:600 1rem Poppins;display:block;line-height:1.1}.side .marca span{font-size:.75rem;opacity:.75}
.side a{display:flex;align-items:center;gap:10px;color:#D5E3EA;text-decoration:none;padding:.55em .75em;border-radius:10px;font-weight:500;font-size:.93rem}.side a:hover{background:rgba(255,255,255,.07)}.side a.on{background:var(--nar);color:#fff}
.side .grupo{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;opacity:.55;margin:14px 10px 4px}.side .pie{margin-top:auto;padding:12px 8px 0;font-size:.8rem;opacity:.85}.side .pie img{height:16px;vertical-align:middle;filter:brightness(0) invert(1);opacity:.8}
.main{padding:22px 26px 60px;min-width:0}.top{display:flex;align-items:center;gap:12px;margin-bottom:18px;flex-wrap:wrap}.top h1{margin:0}.top .yo{margin-left:auto;font-size:.85rem;color:var(--tx2);text-align:right}
.menu-btn{display:none}
@media(max-width:900px){.shell{grid-template-columns:1fr}.side{position:fixed;inset:0 auto 0 0;width:270px;z-index:50;transform:translateX(-100%);transition:transform .2s}.side.abierto{transform:none;box-shadow:0 0 0 100vw rgba(0,0,0,.35)}
.menu-btn{display:inline-flex}.main{padding:14px 16px 60px}.top .yo{display:none}}
/* ---------- gráficos ---------- */
.graf{width:100%;height:auto;display:block}.graf text{font:11px Inter,sans-serif;fill:var(--tx2)}.graf .eje{stroke:var(--ln)}
.barras-h{display:grid;gap:6px}.barras-h .b{display:grid;grid-template-columns:150px minmax(0,1fr) 110px;gap:8px;align-items:center;font-size:.85rem}.barras-h .t{height:16px;background:#EEF2F4;border-radius:6px;position:relative;overflow:hidden}.barras-h .t i{position:absolute;top:0;bottom:0;border-radius:6px}
@media(max-width:600px){.barras-h .b{grid-template-columns:96px minmax(0,1fr) 84px;font-size:.78rem}}
/* ---------- mapa del camión ---------- */
.camion{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;border:3px solid var(--nav);border-radius:10px;padding:8px;background:#FAFCFD}
.camion .pos{border:1.5px dashed var(--ln);border-radius:8px;padding:6px 8px;min-height:62px;font-size:.78rem;background:#fff}.camion .pos b{font-size:.75rem;color:var(--tx2)}.camion .pos .l{display:flex;justify-content:space-between;gap:6px}
.camion .pos.dif{border:2px solid var(--roj);background:var(--roj-s)}
/* ---------- calendario de asistencia ---------- */
.cal td.d{padding:0;text-align:center;font-size:.7rem;font-weight:700;min-width:22px;height:24px}.cal .P{background:var(--ver-s);color:var(--ver)}.cal .T{background:#FFE7D6;color:var(--nar)}.cal .L{background:#E6F0F8;color:var(--azu)}.cal .V{background:#EEE6F8;color:#6A3FA0}
.cal .A{background:var(--roj-s);color:var(--roj)}.cal .X{background:var(--ama-s);color:var(--ama)}.cal .f{background:#F0F2F3}.cal td.d.al{box-shadow:inset 0 0 0 2px var(--roj)}
/* ---------- chat ---------- */
.chat{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;min-height:520px}.chat .lista{overflow:auto;max-height:620px}.chat .conv{padding:10px;border-radius:10px;cursor:pointer;border:1.5px solid transparent}.chat .conv:hover{background:#F7F9FA}.chat .conv.on{border-color:var(--nar2);background:var(--nar-s)}
.msgs{display:flex;flex-direction:column;gap:6px;background:#EFE9E1;border-radius:12px;padding:12px;min-height:360px;max-height:520px;overflow:auto}
.msg{max-width:78%;padding:.45em .75em;border-radius:12px;font-size:.92rem;white-space:pre-wrap;box-shadow:0 1px 1px rgba(0,0,0,.06)}.msg.cliente{background:#fff;align-self:flex-start}.msg.agente{background:#DCF8C6;align-self:flex-end}.msg.equipo{background:#D6ECFF;align-self:flex-end}.msg small{display:block;font-size:.7rem;color:var(--tx2)}
@media(max-width:800px){.chat{grid-template-columns:1fr}}
/* ---------- modal ---------- */
.modal{position:fixed;inset:0;background:rgba(0,30,45,.45);display:flex;align-items:center;justify-content:center;z-index:80;padding:16px}.modal .card{width:100%;max-width:520px;max-height:90vh;overflow:auto}
.toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--nav);color:#fff;padding:.7em 1.1em;border-radius:12px;z-index:99;box-shadow:var(--sh);max-width:90vw}.toast.al{background:var(--roj)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px}.tabs button{border:0;background:#E9EEF0;border-radius:99px;padding:.35em .9em;cursor:pointer;font-weight:600;font-size:.88rem}.tabs button.on{background:var(--nav);color:#fff}
.pregunta{border-left:4px solid var(--nar);padding:.2em 0 .2em 14px;margin-bottom:18px}.pregunta h3{margin-bottom:.2em}
.vacio{padding:24px;text-align:center;color:var(--tx2)}
.tabla td{overflow-wrap:anywhere}
@media(max-width:700px){.card{overflow-x:auto}.fila>input[type=date]{max-width:150px}}