:root{
  --ol:#556B2F; --ol-osc:#3E4F22; --ol-2:#6B8E23; --ol-cl:#EEF2E3; --ol-cl2:#F6F8F0;
  --oro:#B8962E; --tx:#1F2617; --mu:#6B7363; --bo:#DDE3D0; --bl:#fff;
  --ok:#2E7D32; --ok-cl:#E6F4E7; --adv:#B26A00; --adv-cl:#FFF3DF; --err:#B3261E; --err-cl:#FDECEA; --inf:#2F5D8A; --inf-cl:#E7EFF8;
  --rad:10px; --sombra:0 1px 2px rgba(30,40,20,.06),0 4px 14px rgba(30,40,20,.06);
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--ol-cl2);color:var(--tx);font:14px/1.45 "Segoe UI",Roboto,Helvetica,Arial,sans-serif}
button,input,select,textarea{font:inherit;color:inherit}
a{color:var(--ol)}
[hidden]{display:none!important}

/* ---------- Ingreso ---------- */
.login{min-height:100vh;display:grid;place-items:center;padding:16px;background:linear-gradient(135deg,var(--ol-osc),var(--ol) 55%,var(--ol-2))}
.login .box{background:var(--bl);border-radius:16px;box-shadow:0 20px 60px rgba(0,0,0,.25);padding:32px 28px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:12px}
.login h1{margin:0;color:var(--ol);font-size:28px;letter-spacing:.5px}
.login .err{color:var(--err);min-height:1.2em}
.login .logo-grande{width:64px;height:64px;border-radius:16px;background:var(--ol);color:#fff;display:grid;place-items:center;font-size:32px;font-weight:700}

/* ---------- Estructura ---------- */
#app{display:flex;min-height:100vh}
#menu{width:236px;flex:none;background:var(--ol-osc);color:#E8EDDD;display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:auto}
.marca{display:flex;gap:10px;align-items:center;padding:18px 16px;border-bottom:1px solid rgba(255,255,255,.08)}
.marca b{display:block;font-size:17px;color:#fff}.marca small{display:block;color:#B9C4A4;font-size:12px;line-height:1.2}
.logo-chico{width:38px;height:38px;border-radius:10px;background:var(--ol-2);color:#fff;display:grid;place-items:center;font-weight:700;font-size:18px;overflow:hidden;flex:none}
.logo-chico img{width:100%;height:100%;object-fit:contain;background:#fff}
#nav{padding:8px;flex:1}
#nav .grupo{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:#9DAA86;padding:12px 10px 4px}
#nav a{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:8px;color:#E8EDDD;text-decoration:none}
#nav a:hover{background:rgba(255,255,255,.07)}
#nav a.act{background:var(--ol);color:#fff;font-weight:600}
#nav a .ic{width:20px;text-align:center}
#nav a .cnt{margin-left:auto;background:var(--oro);color:#fff;border-radius:10px;font-size:11px;padding:0 7px}
.pie-menu{padding:12px 16px;border-top:1px solid rgba(255,255,255,.08);font-size:12px;color:#B9C4A4}
.pie-menu .lnk{color:#fff}
#cuerpo{flex:1;min-width:0;display:flex;flex-direction:column}
#barra{display:flex;align-items:center;gap:12px;padding:12px 20px;background:var(--bl);border-bottom:1px solid var(--bo);position:sticky;top:0;z-index:5}
#barra h1{font-size:19px;margin:0;flex:1;color:var(--ol-osc)}
.acciones-barra{display:flex;gap:8px;align-items:center}
#buscarTodo{width:280px}
#bMenu{display:none}
#aviso{background:var(--adv-cl);color:var(--adv);padding:8px 20px;font-size:13px;border-bottom:1px solid #F3DDB5}
#vista{padding:20px;max-width:1400px;width:100%}

/* ---------- Controles ---------- */
.b{background:var(--ol);color:#fff;border:0;border-radius:8px;padding:8px 14px;cursor:pointer;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.b:hover{background:var(--ol-osc)}.b:disabled{opacity:.5;cursor:default}
.b.sec{background:var(--bl);color:var(--ol);border:1px solid var(--ol)}.b.sec:hover{background:var(--ol-cl)}
.b.peligro{background:var(--err)}.b.oro{background:var(--oro)}
a.b{text-decoration:none}
.b.ch{padding:4px 9px;font-size:12px;font-weight:600;border-radius:6px}
.lnk{background:none;border:0;color:var(--ol);cursor:pointer;padding:0;text-decoration:underline}
.ico{background:none;border:0;cursor:pointer;font-size:16px;padding:4px 6px;border-radius:6px;color:var(--mu)}
.ico:hover{background:var(--ol-cl);color:var(--ol)}
input,select,textarea{border:1px solid var(--bo);border-radius:8px;padding:7px 9px;background:#fff;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:2px solid rgba(85,107,47,.25);border-color:var(--ol)}
input[type=checkbox]{width:auto}
textarea{resize:vertical;min-height:70px}
label.f{display:flex;flex-direction:column;gap:4px;font-size:12px;color:var(--mu);font-weight:600}
label.f>input,label.f>select,label.f>textarea{font-weight:400;color:var(--tx);font-size:14px}
label.chk{display:flex;gap:8px;align-items:center;font-size:13px;cursor:pointer}
.rejilla{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px}
.rejilla .full{grid-column:1/-1}.rejilla .doble{grid-column:span 2}
.fila{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.fila.fin{justify-content:flex-end}.fila.sep{justify-content:space-between}
.esp{flex:1}
.mute{color:var(--mu)}.chico{font-size:12px}.der{text-align:right}.cen{text-align:center}.neg{font-weight:700}
.verde{color:var(--ok)}.rojo{color:var(--err)}.ambar{color:var(--adv)}

/* ---------- Tarjetas y tablas ---------- */
.card{background:var(--bl);border:1px solid var(--bo);border-radius:var(--rad);box-shadow:var(--sombra);padding:16px;margin-bottom:16px}
.card h2{font-size:16px;margin:0 0 12px;color:var(--ol-osc);display:flex;align-items:center;gap:8px}
.card h3{font-size:14px;margin:14px 0 8px;color:var(--ol)}
.kpis{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:16px}
.kpi{background:var(--bl);border:1px solid var(--bo);border-radius:var(--rad);padding:14px 16px;box-shadow:var(--sombra);border-left:4px solid var(--ol)}
.kpi .v{font-size:24px;font-weight:700;color:var(--ol-osc);line-height:1.2}
.kpi .l{font-size:12px;color:var(--mu);text-transform:uppercase;letter-spacing:.04em}
.kpi .s{font-size:12px;color:var(--mu)}
.kpi.oro{border-left-color:var(--oro)}.kpi.rojo{border-left-color:var(--err)}.kpi.azul{border-left-color:var(--inf)}
.dos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.tres{display:grid;grid-template-columns:2fr 1fr;gap:16px}
.tabla-wrap{overflow:auto}
table.t{width:100%;border-collapse:collapse;font-size:13px}
table.t th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--mu);background:var(--ol-cl2);padding:8px;border-bottom:1px solid var(--bo);white-space:nowrap}
table.t td{padding:8px;border-bottom:1px solid #EEF1E8;vertical-align:middle}
table.t tr.clic{cursor:pointer}table.t tr.clic:hover td{background:var(--ol-cl2)}
table.t tfoot td{font-weight:700;background:var(--ol-cl2)}
table.t td.num,table.t th.num{text-align:right;white-space:nowrap}
table.t input,table.t select{padding:4px 6px;font-size:13px}
.vacio{padding:28px;text-align:center;color:var(--mu)}
.est{display:inline-block;border-radius:20px;padding:2px 10px;font-size:11px;font-weight:700;white-space:nowrap}
.est.gris{background:#EEE;color:#555}.est.azul{background:var(--inf-cl);color:var(--inf)}.est.verde{background:var(--ok-cl);color:var(--ok)}
.est.ambar{background:var(--adv-cl);color:var(--adv)}.est.rojo{background:var(--err-cl);color:var(--err)}.est.olivo{background:var(--ol-cl);color:var(--ol-osc)}
.tag{display:inline-block;background:var(--ol-cl);color:var(--ol-osc);border-radius:6px;padding:1px 7px;font-size:11px;margin:1px}
.barra-filtros{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-bottom:12px}
.barra-filtros input,.barra-filtros select{width:auto;min-width:160px}
.pestanas{display:flex;gap:4px;border-bottom:2px solid var(--bo);margin-bottom:16px;flex-wrap:wrap}
.pestanas button{background:none;border:0;padding:9px 14px;cursor:pointer;font-weight:600;color:var(--mu);border-bottom:3px solid transparent;margin-bottom:-2px}
.pestanas button.act{color:var(--ol);border-bottom-color:var(--ol)}
.alerta{border-radius:8px;padding:9px 12px;margin-bottom:8px;font-size:13px;display:flex;gap:8px;align-items:flex-start}
.alerta.adv{background:var(--adv-cl);color:#6B4300}.alerta.err{background:var(--err-cl);color:var(--err)}.alerta.inf{background:var(--inf-cl);color:var(--inf)}.alerta.ok{background:var(--ok-cl);color:var(--ok)}
.lista-simple{list-style:none;margin:0;padding:0}
.lista-simple li{padding:9px 0;border-bottom:1px solid #EEF1E8;display:flex;gap:10px;align-items:center}
.lista-simple li:last-child{border-bottom:0}
.fecha-chip{flex:none;width:46px;text-align:center;background:var(--ol-cl);border-radius:8px;padding:4px 0;line-height:1.1}
.fecha-chip b{display:block;font-size:18px;color:var(--ol-osc)}.fecha-chip small{font-size:10px;text-transform:uppercase;color:var(--ol)}
.progreso{height:8px;background:#E7EBDD;border-radius:6px;overflow:hidden}
.progreso>div{height:100%;background:var(--ol-2)}

/* ---------- Totales del cotizador ---------- */
.totales{min-width:280px;margin-left:auto}
.totales div{display:flex;justify-content:space-between;padding:4px 0;gap:20px}
.totales .gran{font-size:20px;font-weight:800;color:var(--ol-osc);border-top:2px solid var(--ol);margin-top:4px;padding-top:8px}
.interno{background:#FBFAF3;border:1px dashed var(--oro);border-radius:8px;padding:10px 12px}
.interno b{color:var(--oro)}
.linea-paq td{background:#FAFBF6}
.ajustado{background:#FFF8E1!important}
.opciones-paq{font-size:12px;color:var(--mu);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chips label{border:1px solid var(--bo);border-radius:16px;padding:3px 10px;font-size:12px;cursor:pointer;display:flex;gap:5px;align-items:center;background:#fff}
.chips label.si{background:var(--ol);color:#fff;border-color:var(--ol)}
.chips input{display:none}

/* ---------- Agenda ---------- */
.cal{display:grid;grid-template-columns:repeat(7,1fr);border:1px solid var(--bo);border-radius:var(--rad);overflow:hidden;background:var(--bo);gap:1px}
.cal .dn{background:var(--ol);color:#fff;text-align:center;font-size:12px;font-weight:700;padding:6px 0;text-transform:uppercase}
.cal .d{background:#fff;min-height:108px;padding:4px 5px;cursor:pointer;overflow:hidden}
.cal .d:hover{background:var(--ol-cl2)}
.cal .d.fuera{background:#FAFAF7;color:#B0B5A8}
.cal .d.hoy .num{background:var(--ol);color:#fff;border-radius:50%}
.cal .num{font-size:12px;font-weight:700;width:22px;height:22px;display:grid;place-items:center}
.cal .ev{font-size:11px;border-radius:4px;padding:1px 5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#fff;background:var(--ol)}
.cal .ev.cita{background:var(--inf)}.cal .ev.pago{background:var(--oro)}.cal .ev.cancel{background:#9E9E9E;text-decoration:line-through}
.cal .ev.reservado{background:var(--ol-2)}.cal .ev.realizado{background:#7C8A6A}
.leyenda{display:flex;gap:14px;flex-wrap:wrap;font-size:12px;color:var(--mu);margin-top:8px}
.leyenda i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.dia-agenda{margin-bottom:14px}
.dia-agenda h4{margin:0 0 6px;font-size:13px;color:var(--ol);text-transform:capitalize;border-bottom:1px solid var(--bo);padding-bottom:4px}
.it-agenda{display:flex;gap:10px;padding:6px 8px;border-radius:8px;align-items:center;cursor:pointer}
.it-agenda:hover{background:var(--ol-cl2)}
.it-agenda .hora{width:92px;flex:none;font-weight:700;color:var(--ol-osc);font-size:13px}
.it-agenda .bar{width:4px;align-self:stretch;border-radius:3px;background:var(--ol)}

/* ---------- Gráficos ---------- */
.graf{width:100%;height:auto;display:block}
.graf text{font-size:11px;fill:var(--mu)}

/* ---------- Modal y avisos ---------- */
#modal{position:fixed;inset:0;background:rgba(25,32,15,.45);z-index:50;display:flex;align-items:flex-start;justify-content:center;padding:30px 12px;overflow:auto}
#modal .caja{background:#fff;border-radius:14px;box-shadow:0 20px 60px rgba(0,0,0,.3);width:100%;max-width:720px;padding:20px}
#modal .caja.ancha{max-width:1000px}
#modal h2{margin:0 0 14px;color:var(--ol-osc);font-size:18px}
#modal .pie{display:flex;gap:8px;justify-content:flex-end;margin-top:16px;flex-wrap:wrap}
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);background:var(--ol-osc);color:#fff;padding:10px 18px;border-radius:10px;opacity:0;transition:.25s;pointer-events:none;z-index:60;max-width:90vw}
#toast.ver{opacity:1}#toast.error{background:var(--err)}
.zona-logo{border:2px dashed var(--ol-2);border-radius:12px;padding:16px;text-align:center;cursor:pointer;background:var(--ol-cl2);display:flex;flex-direction:column;align-items:center;gap:8px}
.zona-logo.encima{background:var(--ol-cl)}
.zona-logo img{max-height:90px;max-width:240px}
.vista-doc{background:#E9ECE3;padding:16px;border-radius:10px;max-height:70vh;overflow:auto}
.vista-doc .hoja{margin:0 auto;box-shadow:0 2px 12px rgba(0,0,0,.15)}
#docTmp{position:fixed;left:-10000px;top:0}

/* ---------- Documentos (cotización, contrato, recibo) ---------- */
.hoja{width:794px;background:#fff;color:#222;padding:40px 46px;font:12.5px/1.5 "Segoe UI",Roboto,Helvetica,Arial,sans-serif}
.hoja .cab{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;border-bottom:3px solid var(--dcol,#556B2F);padding-bottom:14px}
.hoja .cab img{max-height:80px;max-width:220px}
.hoja .cab .emp{text-align:right;font-size:11.5px;color:#555}
.hoja .cab .emp b{font-size:15px;color:var(--dcol,#556B2F);display:block}
.hoja .tit{display:flex;justify-content:space-between;align-items:center;margin:18px 0 12px}
.hoja .tit h1{margin:0;font-size:22px;color:var(--dcol,#556B2F);letter-spacing:1px}
.hoja .tit .nro{text-align:right;font-size:12px}
.hoja .tit .nro b{font-size:15px}
.hoja .bloques{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.hoja .bloque{background:#F5F7EF;border-radius:6px;padding:10px 12px;font-size:12px}
.hoja .bloque h4{margin:0 0 4px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dcol,#556B2F)}
.hoja table{width:100%;border-collapse:collapse;font-size:12px}
.hoja th{background:var(--dcol,#556B2F);color:#fff;text-align:left;padding:7px 8px;font-size:11px;text-transform:uppercase}
.hoja td{padding:7px 8px;border-bottom:1px solid #E3E7DA;vertical-align:top}
.hoja td.n,.hoja th.n{text-align:right;white-space:nowrap}
.hoja .det{font-size:11px;color:#666}
.hoja .tot{width:290px;margin:12px 0 0 auto;font-size:12.5px}
.hoja .tot div{display:flex;justify-content:space-between;padding:3px 0}
.hoja .tot .g{font-size:16px;font-weight:800;border-top:2px solid var(--dcol,#556B2F);padding-top:6px;margin-top:4px;color:var(--dcol,#556B2F)}
.hoja .caja-ant{border:1px solid var(--dcol,#556B2F);border-radius:6px;padding:10px 12px;margin-top:14px;display:flex;justify-content:space-between;gap:12px;background:#FAFBF6}
.hoja .cond{margin-top:16px;font-size:11px;color:#444;white-space:pre-wrap}
.hoja .cond h4{font-size:11px;color:var(--dcol,#556B2F);text-transform:uppercase;margin:0 0 4px}
.hoja .firmas{display:flex;justify-content:space-around;margin-top:60px;gap:40px;text-align:center;font-size:11.5px}
.hoja .firmas div{flex:1;border-top:1px solid #333;padding-top:6px}
.hoja .pie-doc{margin-top:22px;border-top:1px solid #DDD;padding-top:8px;font-size:10.5px;color:#888;text-align:center}
.hoja .clausulas{font-size:12px;text-align:left}
.hoja .clausulas p{margin:0 0 9px}
.hoja .clausulas b{color:#222}
.hoja .sello{display:inline-block;border:2px solid var(--dcol,#556B2F);color:var(--dcol,#556B2F);border-radius:6px;padding:4px 12px;font-weight:800;transform:rotate(-4deg);letter-spacing:1px}
.hoja .monto-grande{font-size:26px;font-weight:800;color:var(--dcol,#556B2F)}
.hoja .salto{page-break-before:always}
.hoja tr{page-break-inside:avoid}

@media (max-width:980px){
  .dos,.tres{grid-template-columns:1fr}
  #menu{position:fixed;left:-260px;z-index:40;transition:.2s;box-shadow:0 0 30px rgba(0,0,0,.3)}
  #menu.abierto{left:0}
  #bMenu{display:block}
  #buscarTodo{width:140px}
  #vista{padding:12px}
  .cal .d{min-height:70px}.cal .ev{font-size:10px}
}
@media print{
  body{background:#fff}
  #app,#modal,#toast,#pre{display:none!important}
}