/* =========================================================================
   lawster · Sistema (CRM/ERP) · diseño · "Menos papel, más negocio"
   Tokens OKLCH (claro + oscuro) · sin dependencias externas (offline/PWA)
   ========================================================================= */
:root{
  --paper:oklch(.985 .005 295); --paper-1:oklch(.97 .008 295); --paper-2:oklch(.945 .011 295);
  --line:oklch(.9 .012 295); --line-2:oklch(.84 .016 295);
  --ink:oklch(.215 .03 280); --ink-2:oklch(.36 .026 280); --ink-3:oklch(.55 .02 282);
  --v:oklch(.58 .232 290); --v-7:oklch(.5 .21 290); --v-1:oklch(.965 .024 291); --v-2:oklch(.915 .05 291);
  --ok:oklch(.55 .13 150); --ok-bg:oklch(.95 .04 150);
  --warn:oklch(.62 .12 70); --warn-bg:oklch(.96 .05 80);
  --bad:oklch(.55 .16 25); --bad-bg:oklch(.95 .035 25);
  --e1:0 1px 2px oklch(.215 .03 280/.06); --e2:0 4px 12px oklch(.215 .03 280/.08);
  --e3:0 14px 34px oklch(.215 .03 280/.12); --e4:0 30px 70px oklch(.215 .03 280/.18);
  --ease:cubic-bezier(.23,1,.32,1);
  --display:'Outfit',system-ui,sans-serif; --text:'Plus Jakarta Sans',system-ui,sans-serif; --mono:'Space Mono',ui-monospace,monospace;
  --sb:248px;
}
.dark{
  --paper:oklch(.19 .018 285); --paper-1:oklch(.23 .02 285); --paper-2:oklch(.275 .022 285);
  --line:oklch(.32 .024 285); --line-2:oklch(.4 .028 285);
  --ink:oklch(.95 .01 285); --ink-2:oklch(.8 .015 285); --ink-3:oklch(.62 .02 285);
  --v:oklch(.68 .2 291); --v-7:oklch(.75 .18 291); --v-1:oklch(.29 .07 291); --v-2:oklch(.36 .09 291);
  --ok:oklch(.72 .15 150); --ok-bg:oklch(.28 .06 150);
  --warn:oklch(.78 .12 80); --warn-bg:oklch(.3 .05 80);
  --bad:oklch(.65 .16 25); --bad-bg:oklch(.3 .06 25);
}
*{margin:0;box-sizing:border-box}
html,body{height:100%}
body{background:var(--paper-2);color:var(--ink);font-family:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased}
::selection{background:var(--v-2)}
::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:6px;border:3px solid var(--paper-2)}
a{color:inherit;text-decoration:none}
svg{width:18px;height:18px;flex:none}
.num{font-family:var(--mono);font-feature-settings:"tnum"}
.mono{font-family:var(--mono)} .disp{font-family:var(--display)}
.mut{color:var(--ink-3)} .v{color:var(--v-7)}
.t-xs{font-size:11px}.t-sm{font-size:12.5px}.t-lg{font-size:16px}
.b{font-weight:700}.sb{font-weight:600}
h1,h2,h3,h4{font-family:var(--display);letter-spacing:-.01em}
.hide{display:none!important}

/* ---------- layout ---------- */
.shell{display:flex;min-height:100dvh}
.side{width:var(--sb);flex:none;background:var(--paper);border-right:1px solid var(--line);position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;z-index:30}
.side .brand{height:60px;display:flex;align-items:center;gap:9px;padding:0 18px;border-bottom:1px solid var(--line)}
.side .brand img{height:22px}
.side .brand .em{height:24px;width:auto}
.side .brand .wm{font-family:var(--display);font-weight:800;font-size:19px;letter-spacing:-.025em;color:var(--v-7);line-height:1;display:inline-flex;align-items:flex-start}
.side .brand .wm sup{font-size:9px;font-weight:600;margin-left:1px;top:-.1em}
.nav{flex:1;padding:12px;display:flex;flex-direction:column;gap:3px;overflow-y:auto}
.nav .sep{height:1px;background:var(--line);margin:9px 4px}
.nav a{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:11px;font-size:13.5px;font-weight:500;color:var(--ink-2);transition:background .15s var(--ease),color .15s}
.nav a:hover{background:var(--paper-2)}
.nav a.on{background:var(--v-1);color:var(--v-7);font-weight:600}
.nav-h{font-family:var(--mono);font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:12px 12px 4px}
.nav-h:first-child{padding-top:2px}
.nav a svg{width:18px;height:18px;flex:none}
.side .me{width:100%;padding:11px 12px;border:0;border-top:1px solid var(--line);background:transparent;color:inherit;font:inherit;text-align:left;display:flex;align-items:center;gap:10px;cursor:pointer;transition:background .15s var(--ease)}
.side .me:hover{background:var(--paper-2)}
.side .me .me-id{line-height:1.2;flex:1;min-width:0}
.side .me .me-id>div{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .me .me-cv{width:16px;height:16px;flex:none;color:var(--ink-3)}
.umenu{position:fixed;left:12px;bottom:64px;z-index:60;width:230px;background:var(--paper);border:1px solid var(--line-2);border-radius:14px;box-shadow:var(--e4);padding:6px;animation:umenu .16s var(--ease)}
@keyframes umenu{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.umenu .uhead{padding:9px 10px 7px;border-bottom:1px solid var(--line);margin-bottom:4px}
.umenu button{width:100%;display:flex;align-items:center;gap:10px;padding:9px 10px;border:0;border-radius:9px;background:transparent;color:var(--ink);font:inherit;font-size:13.5px;text-align:left;cursor:pointer;transition:background .12s}
.umenu button:hover{background:var(--paper-2)}
.umenu button svg{width:17px;height:17px;flex:none;color:var(--ink-3)}
.umenu button.danger{color:var(--bad,oklch(.55 .2 25))}.umenu button.danger svg{color:currentColor}
@media(max-width:880px){.umenu{left:50%;transform:translateX(-50%);bottom:auto;top:50%;margin-top:-90px}}
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.top{position:sticky;top:0;z-index:20;height:60px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 18px;background:color-mix(in oklch,var(--paper),transparent 14%);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top .ttl{font-weight:700;font-size:17px}.top .sub{font-size:11.5px;color:var(--ink-3)}
.content{flex:1;padding:20px}
.wrap{max-width:1080px;margin:0 auto}
.mobnav{display:none}
.burger{display:none!important}

/* ---------- responsive ---------- */
@media (max-width:860px){
  .side{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .3s var(--ease);box-shadow:var(--e4)}
  body.menu .side{transform:none}
  body.menu #overlay{position:fixed;inset:0;background:oklch(.2 .02 285/.4);z-index:25}
  .burger{display:grid!important}
  .content{padding:14px 14px 84px}
  .mobnav{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:30;background:color-mix(in oklch,var(--paper),transparent 6%);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:6px 4px env(safe-area-inset-bottom)}
  .mobnav a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font-size:9.5px;color:var(--ink-3);font-weight:600}
  .mobnav a.on{color:var(--v-7)}.mobnav a svg{width:20px;height:20px}
}
@media (min-width:861px){ .burger{display:none} }

/* ---------- componentes ---------- */
.btn{font-family:var(--display);font-weight:700;font-size:13px;border-radius:11px;padding:9px 15px;border:1px solid transparent;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:transform .14s var(--ease),background .15s,border-color .15s;white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn svg{width:16px;height:16px}
.btn-pri{background:var(--v);color:#fff} .btn-pri:hover{background:var(--v-7)}
.btn-sec{background:var(--paper);color:var(--ink);border-color:var(--line-2)} .btn-sec:hover{border-color:var(--v)}
.btn-ghost{background:transparent;color:var(--v-7)} .btn-ghost:hover{background:var(--v-1)}
.btn-sm{padding:6px 11px;font-size:12px;border-radius:9px}
.icon-btn{height:38px;width:38px;display:grid;place-items:center;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink-2);cursor:pointer;transition:border-color .15s}
.icon-btn:hover{border-color:var(--v)}

.card{background:var(--paper);border:1px solid var(--line);border-radius:16px}
.card.pad{padding:18px}
.sec-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.sec-h h3{font-size:15px;font-weight:700}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;background:var(--paper);overflow:hidden}
.kpi{padding:16px 18px;border-left:1px solid var(--line)}
.kpi:first-child{border-left:none}
.kpi .l{font-size:12px;color:var(--ink-3)} .kpi .n{font-family:var(--mono);font-weight:700;font-size:25px;margin-top:3px}
.kpi .s{font-size:11px;color:var(--ink-3);margin-top:4px}
@media(max-width:680px){.kpis{grid-template-columns:1fr 1fr}.kpi:nth-child(3),.kpi:nth-child(4){border-top:1px solid var(--line)}.kpi:nth-child(odd){border-left:none}}

.badge{font-family:var(--mono);font-weight:700;font-size:11px;display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:99px}
.badge .dot{height:6px;width:6px;border-radius:50%;background:currentColor}
.avatar{display:inline-flex;align-items:center;justify-content:center;border-radius:50%;color:#fff;font-family:var(--display);font-weight:700;flex:none}

.row{display:grid;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--line);cursor:pointer;transition:background .14s}
.row:hover{background:var(--paper-1)}
.row:first-of-type{border-top:none}
.thead{display:grid;gap:14px;padding:10px 18px;background:var(--paper-1);font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}

.bar{height:6px;border-radius:6px;background:var(--paper-2);overflow:hidden}
.bar > i{display:block;height:100%;border-radius:6px;background:var(--v);transition:width .6s var(--ease)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:13px}
.field label{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.input{font-family:var(--text);font-size:13.5px;padding:10px 12px;border-radius:10px;border:1px solid var(--line-2);background:var(--paper);color:var(--ink);width:100%;outline:none;transition:border-color .15s,box-shadow .15s}
.input:focus{border-color:var(--v);box-shadow:0 0 0 3px var(--v-2)}
select.input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px}
.err{color:var(--bad);font-size:11px;margin-top:-7px;margin-bottom:8px}
/* input de dinero con prefijo $ */
.money-inp{position:relative;display:flex;align-items:center}
.money-inp>.ms{position:absolute;left:12px;color:var(--ink-3);font-family:var(--mono);font-size:13.5px;pointer-events:none;z-index:1}
.money-inp>input{padding-left:22px}
/* buscador de clave SAT (autocompletado en vivo) */
.clavef{position:relative}
.clave-res{display:none;position:absolute;left:0;right:0;top:100%;z-index:6;margin-top:4px;max-height:260px;overflow-y:auto;background:var(--paper);border:1px solid var(--line-2);border-radius:12px;box-shadow:var(--e3)}
.clave-opt{display:block;width:100%;text-align:left;border:0;border-bottom:1px solid var(--line);background:transparent;padding:8px 12px;cursor:pointer;font:inherit;font-size:12px;line-height:1.4;color:var(--ink)}
.clave-opt:last-child{border-bottom:0}.clave-opt:hover{background:var(--paper-2)}
.clave-opt b{color:var(--v-7);margin-right:7px}.clave-opt span{color:var(--ink-2)}

/* drawer + modal */
#overlay.show{position:fixed;inset:0;background:oklch(.2 .02 285/.42);z-index:40;animation:fade .2s var(--ease)}
.drawer{position:fixed;top:0;right:0;height:100dvh;width:min(440px,92vw);background:var(--paper);border-left:1px solid var(--line);z-index:45;box-shadow:var(--e4);display:flex;flex-direction:column;animation:slidein .32s var(--ease)}
.drawer .dh{padding:18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}
.drawer .db{padding:18px;overflow-y:auto;flex:1}
.drawer .df{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:min(520px,92vw);max-height:90dvh;overflow:auto;background:var(--paper);border:1px solid var(--line);border-radius:18px;z-index:45;box-shadow:var(--e4);animation:pop .28s var(--ease)}
@keyframes slidein{from{transform:translateX(100%)}to{transform:none}}
@keyframes pop{from{opacity:0;transform:translate(-50%,-48%) scale(.97)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
.fade{animation:fade .35s var(--ease)}

/* timeline */
.tl{position:relative;padding-left:0}
.tl .step{position:relative;padding-left:30px;padding-bottom:18px}
.tl .step:last-child{padding-bottom:0}
.tl .step::before{content:"";position:absolute;left:5px;top:4px;width:11px;height:11px;border-radius:50%;border:2px solid var(--line-2);background:var(--paper)}
.tl .step.done::before{background:var(--ok);border-color:var(--ok)}
.tl .step.current::before{background:var(--v);border-color:var(--v);box-shadow:0 0 0 4px var(--v-2)}
.tl .step::after{content:"";position:absolute;left:10px;top:16px;bottom:0;width:1px;background:var(--line)}
.tl .step:last-child::after{display:none}
.tl .step.done::after{background:var(--ok)}

/* toast */
#toast{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:60}
.toast{display:flex;align-items:center;gap:10px;background:var(--ink);color:var(--paper);font-size:13px;padding:11px 15px;border-radius:12px;box-shadow:var(--e3);animation:fade .25s var(--ease)}

/* calculadora */
.calc-out{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.calc-out .o{background:var(--paper-1);border:1px solid var(--line);border-radius:12px;padding:14px}
.calc-out .o .l{font-size:11px;color:var(--ink-3)} .calc-out .o .n{font-family:var(--mono);font-weight:700;font-size:21px;margin-top:3px}

.empty{padding:46px 18px 42px;text-align:center;display:flex;flex-direction:column;align-items:center}
.empty .ic{width:42px;height:42px;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-3);margin:0 0 13px}
.empty>.t-sm{max-width:38ch;line-height:1.55}
.empty>.t-sm+*{margin-top:22px}

.skel{background:linear-gradient(90deg,var(--paper-1),var(--paper-2),var(--paper-1));background-size:200% 100%;animation:sh 1.2s infinite;border-radius:14px}
@keyframes sh{to{background-position:-200% 0}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* =================== HOJA MEMBRETADA (documento imprimible) =============== */
.doc{background:#fff;color:oklch(.215 .03 280);width:100%;max-width:780px;margin:0 auto;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-family:var(--text)}
.doc .dhead{display:flex;justify-content:space-between;align-items:flex-start;padding:26px 32px 20px;border-bottom:2px solid oklch(.58 .232 290)}
.doc .dhead img{height:26px}
.doc .dmeta{text-align:right;font-family:var(--mono);font-size:10px;color:oklch(.5 .02 282);line-height:1.6}
.doc .dbody{padding:22px 32px}
.doc h2.dtitle{font-family:var(--display);font-size:19px;font-weight:800;margin-bottom:3px}
.doc table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px}
.doc th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:oklch(.5 .02 282);padding:6px 0;border-bottom:1px solid oklch(.84 .016 295)}
.doc td{padding:8px 0;border-bottom:1px solid oklch(.92 .01 295)}
.doc .tot{margin-left:auto;width:fit-content;min-width:250px;max-width:100%;margin-top:14px;font-size:13px}
.doc .tot .ln{display:flex;justify-content:space-between;gap:18px;padding:3px 0;white-space:nowrap}
.doc .tot .ln>span{white-space:nowrap}
.doc .tot .grand{font-weight:800;font-size:16px;border-top:1px solid oklch(.84 .016 295);padding-top:7px;margin-top:5px}
.doc .dfoot{padding:14px 32px;background:oklch(.97 .008 295);border-top:1px solid oklch(.9 .012 295);display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:9px;color:oklch(.5 .02 282)}
.doc .dfoot img{height:18px;opacity:.85}
/* fichas de servicio: varias hojas membretadas en un mismo documento */
#printable .doc + .doc,#printArea .doc + .doc{margin-top:20px}
/* hoja de datos fiscales y bancarios: densa, para que SIEMPRE quepa en una carta */
.doc.dp .dp-intro{font-size:12px;line-height:1.55;color:var(--ink-2);margin-top:2px}
.doc.dp .dp-rot{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:oklch(.58 .232 290);margin:15px 0 7px;padding-bottom:4px;border-bottom:1px solid oklch(.88 .012 295)}
.doc.dp .dp-bank{border:1px solid oklch(.88 .012 295);border-radius:9px;padding:9px 12px;margin-bottom:8px;break-inside:avoid;page-break-inside:avoid}
.doc.dp .dp-bh{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.doc.dp .dp-bn{font-family:var(--display);font-size:12.5px;font-weight:700}
.doc.dp .dp-bt{font-size:9.5px;color:oklch(.5 .02 282);text-align:right}
.doc.dp .dp-g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px 14px;margin-top:8px}
.doc.dp .dp-fisc{margin-top:0}
.doc.dp .dp-d.wide{grid-column:1/-1}
.doc.dp .dp-l{font-family:var(--mono);font-size:7.5px;letter-spacing:.09em;text-transform:uppercase;color:oklch(.55 .02 282);margin-bottom:1px}
.doc.dp .dp-v{font-size:11.5px;font-weight:600;line-height:1.35;word-break:break-word}
.doc.dp .dp-cierre{font-size:11.5px;color:var(--ink-2);margin-top:14px}
@media (max-width:560px){.doc.dp .dp-g{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* tarjetas de paquetes/precios dentro de la hoja membretada */
.doc .plans{display:grid;gap:12px;margin-top:18px;align-items:stretch}
.doc .plan{position:relative;border:1px solid oklch(.88 .012 295);border-radius:14px;padding:18px 16px 16px;display:flex;flex-direction:column}
.doc .plan-sello{position:absolute;top:-9px;left:50%;transform:translateX(-50%);white-space:nowrap;background:oklch(.58 .232 290);color:#fff;font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-transform:uppercase;padding:4px 10px;border-radius:99px}
.doc .plan-n{font-family:var(--display);font-size:12.5px;font-weight:700;letter-spacing:-.01em}
.doc .plan-p{font-family:var(--display);font-size:29px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:7px 0 2px}
.doc .plan-m{font-family:var(--mono);font-size:8.5px;font-weight:400;letter-spacing:.06em;margin-left:4px;vertical-align:super}
.doc .plan-d{display:block;font-family:var(--mono);font-size:8px;font-weight:400;letter-spacing:.1em;text-transform:uppercase;margin-bottom:-2px}
.doc .plan-l{list-style:none;margin:11px 0 0;padding:11px 0 0;border-top:1px solid oklch(.85 .02 295 / .5);display:grid;gap:7px;font-size:10.5px;line-height:1.45}
.doc .plan-l li{display:flex;gap:7px;align-items:flex-start}
.doc .plan-b{font-weight:700;flex:0 0 auto;line-height:1.35}
@media (max-width:640px){.doc .plans{grid-template-columns:1fr!important}}
@media print{
  #printArea .doc{page-break-after:always;break-after:page}
  #printArea .doc:last-child{page-break-after:auto;break-after:auto}
  #printArea .plan{break-inside:avoid;page-break-inside:avoid}
}

@media print{
  @page{size:A4;margin:14mm}
  body{background:#fff}
  .side,.top,.mobnav,#toast,.no-print,.drawer .df{display:none!important}
  #overlay{position:static!important;background:none!important}
  .drawer{position:static;width:auto;border:none;box-shadow:none;height:auto;animation:none}
  .doc{border:none;border-radius:0;max-width:none}
  .print-only{display:block!important}
}
.print-only{display:none}
/* Impresión aislada del documento (v81): al imprimir, body.printing-doc oculta
   TODO menos #printArea (el clon del documento). Así window.print() de la página
   principal saca solo la cotización, con el CSS y las fuentes ya cargados. */
#printArea{display:none}
@media print{
  @page{size:letter;margin:0}
  body.printing-doc{background:#fff!important}
  body.printing-doc>*{display:none!important}
  body.printing-doc>#printArea{display:block!important}
  body.printing-doc #printArea .doc{border:none!important;border-radius:0!important;max-width:none!important;box-shadow:none!important}
  body.printing-doc #printArea .doc .dhead{padding:36px 44px 20px}
  body.printing-doc #printArea .doc .dbody{padding:26px 44px}
  body.printing-doc #printArea .doc .dfoot{padding:20px 44px}
  body.printing-doc #printArea .dc{padding:36px 44px}
}

/* swaps de tema / responsive */
.sun-i{display:none}.dark .sun-i{display:block}
.moon-i{display:block}.dark .moon-i{display:none}
.dark .side .brand img{filter:brightness(0) invert(1)}
/* red de seguridad: los hijos de un grid responsivo nunca deben crecer por contenido
   largo (nombres de archivo, URLs). min-width:0 permite que el ellipsis recorte en vez
   de provocar scroll horizontal. */
.g-resp>*{min-width:0}
@media (max-width:760px){ .g-resp{grid-template-columns:1fr!important} }

/* preview de logo en formulario de cliente */
.logo-prev{width:56px;height:56px;flex:none;border-radius:12px;border:1px solid var(--line);background:#fff;display:flex;align-items:center;justify-content:center;overflow:hidden;text-align:center}
.logo-prev img{width:100%;height:100%;object-fit:contain}

/* botón WhatsApp en ficha de cliente */
.wa-btn{display:inline-grid;place-items:center;width:26px;height:26px;border-radius:8px;border:1px solid var(--line-2);background:var(--paper);text-decoration:none;transition:border-color .15s,background .15s}
.wa-btn:hover{border-color:#25D366;background:rgba(37,211,102,.1)}

/* ============ AGENDA / TAREAS ============ */
.task{display:flex;align-items:center;gap:11px;padding:11px 18px;border-top:1px solid var(--line)}
.task:first-child{border-top:none}
.task-check{flex:none;width:22px;height:22px;border-radius:7px;border:1.8px solid var(--line-2);background:var(--paper);display:grid;place-items:center;cursor:pointer;color:transparent;transition:background .15s,border-color .15s}
.task-check svg{width:14px;height:14px}
.task-check:hover{border-color:var(--v)}
.task-check.on{background:var(--ok);border-color:var(--ok);color:#fff}
.task.done .task-ttl{text-decoration:line-through;color:var(--ink-3)}
.task-main{flex:1;min-width:0;cursor:pointer}
.task-ttl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ============ KPI clickeable ============ */
a.kpi{text-decoration:none;color:inherit;transition:background .15s}
a.kpi:hover{background:var(--paper-1)}

/* ============ BÚSQUEDA GLOBAL ============ */
.search-modal{display:flex;flex-direction:column;max-height:72vh}
.search-top{display:flex;align-items:center;gap:11px;padding:16px 18px;border-bottom:1px solid var(--line)}
.search-input{flex:1;border:0;background:none;outline:none;font-family:var(--text);font-size:16px;color:var(--ink)}
.search-results{overflow-y:auto;padding:8px}
.search-item{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border:0;border-radius:11px;background:transparent;color:var(--ink);cursor:pointer;text-align:left;font:inherit;transition:background .12s}
.search-item:hover{background:var(--paper-2)}
.search-ic{width:30px;height:30px;flex:none;border-radius:9px;background:var(--v-1);display:grid;place-items:center}
.search-ic svg{width:16px;height:16px}

/* ============ PESTAÑAS (Tesorería) ============ */
.tabs{display:flex;gap:4px;background:var(--paper-1);border:1px solid var(--line);border-radius:13px;padding:4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:1;min-width:max-content;padding:9px 16px;border:0;border-radius:10px;background:transparent;color:var(--ink-2);font-family:var(--display);font-weight:600;font-size:13px;cursor:pointer;white-space:nowrap;transition:background .15s,color .15s}
.tab.on{background:var(--paper);color:var(--v-7);box-shadow:var(--e1)}
.tab:hover:not(.on){color:var(--ink)}

/* ============ Detalle de cotización: documento + panel de acciones ============ */
.cot-detail{max-width:1160px}
.cot-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(290px,1fr);gap:18px;align-items:start;margin-top:14px}
.cot-doc{min-width:0}
.cot-doc .doc{max-width:none}
.cot-actions{position:sticky;top:74px}
@media(max-width:860px){ .cot-grid{grid-template-columns:1fr;margin-top:10px} .cot-actions{position:static;order:-1} }

/* ============ GRÁFICAS (reportes) ============ */
.chart{display:flex;align-items:flex-end;justify-content:space-between;gap:8px;height:175px}
.chart-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%}
.chart-bar{width:62%;max-width:48px;border-radius:7px 7px 0 0;background:linear-gradient(var(--v),var(--v-7));min-height:3px;transition:height .5s var(--ease)}
.chart-val{margin-bottom:6px;min-height:13px}

/* ============ MÓVIL: filas → tarjeta (sin desbordes horizontales) ============ */
@media(max-width:640px){
  .thead{display:none!important}
  .row{grid-template-columns:1fr 1fr!important;row-gap:4px!important;column-gap:10px!important;padding:13px 15px!important;align-items:start!important}
  .row>*{min-width:0}
  .row>*:first-child{grid-column:1/-1}
  .kpis{grid-template-columns:1fr 1fr!important}
  .task{padding:12px 15px}
  .content .wrap{max-width:100%}
}
@media(max-width:430px){ .chart{height:150px} .chart-bar{max-width:30px} }

/* ---- dictamen imprimible (dictamen-pdf.js) ---- */
/* El papel siempre sale claro: se re-declaran los tokens en su valor de tema
   claro dentro de .dc, para que un dictamen impreso desde modo oscuro no
   quede con tinta clara sobre hoja blanca (mismo criterio que .doc).
   Un solo sistema de aislamiento: el dictamen se monta dentro del MISMO
   #printArea que ya usa docs.js (printDoc/v81) — nada de un #printable
   paralelo con sus propias reglas de display, que es lo que rompía la
   impresión de cotizaciones/notas/fichas al empatar especificidad con la
   regla `body.printing-doc>#printArea{display:block!important}`.
   El cuerpo del dictamen (clases, cercanas, recomendación) REUSA los mismos
   componentes .card/.row/.thead/.badge que la pantalla (busquedas.js, bd*):
   como son custom properties, .dc los reescribe para TODO su árbol — el
   mismo .card que en pantalla obedece al tema, aquí sale siempre en claro.
   Sólo el membrete (logo, kicker, h1) es exclusivo de .dc. */
.dc{
  --paper:oklch(.985 .005 295); --paper-1:oklch(.97 .008 295); --paper-2:oklch(.945 .011 295);
  --line:oklch(.9 .012 295); --line-2:oklch(.84 .016 295);
  --ink:oklch(.215 .03 280); --ink-2:oklch(.36 .026 280); --ink-3:oklch(.55 .02 282);
  --v:oklch(.58 .232 290); --v-7:oklch(.5 .21 290); --v-1:oklch(.965 .024 291); --v-2:oklch(.915 .05 291);
  --ok:oklch(.55 .13 150); --ok-bg:oklch(.95 .04 150);
  --warn:oklch(.62 .12 70); --warn-bg:oklch(.96 .05 80);
  --bad:oklch(.55 .16 25); --bad-bg:oklch(.95 .035 25);
  color:var(--ink);
}
.dc-top{ display:flex; justify-content:space-between; align-items:baseline; border-bottom:1px solid var(--line); padding-bottom:10px; margin-bottom:22px }
.dc-wm{ display:flex; align-items:flex-start; gap:1px }
.dc-wm img{ height:20px }
.dc-r{ font-family:var(--mono); font-size:9px; color:var(--v); line-height:1 }
.dc-kick{ font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--v-7) }
.dc-h1{ font-family:var(--display); font-size:27px; line-height:1.15; margin:6px 0 4px }
.dc-marca{ font-family:var(--mono) }
.dc-sub{ color:var(--ink-2); font-size:13.5px }
.dc-mut{ color:var(--ink-3); font-size:11.5px }
.dc-meta{ display:flex; gap:22px; flex-wrap:wrap; margin-top:16px; padding-top:14px; border-top:1px solid var(--line); font-size:12px; color:var(--ink-3) }
.dc-meta b{ color:var(--ink); font-weight:600 }
.dc-body{ display:grid; gap:14px; margin-top:22px }
/* que una tarjeta o fila no se parta entre dos hojas */
#printArea .dc .card,#printArea .dc section{ break-inside:avoid; page-break-inside:avoid }