/* Hallmark · genre: modern-minimal · macrostructure: Workbench (app interna) · theme: custom
 * vibe: "taller ordenado, petróleo sobrio, sin brillo" · anchor hue: 210 (petróleo del logo v3)
 * paper oklch(97.6% 0.004 210) · accent oklch(46% 0.07 210) petróleo · display/body: system-ui (cero descargas)
 * axes: light / grotesk-sans / cool · nav: N3 side-rail · footer: none (app)
 * Reglas: sin degradados, sin glow, sin translúcidos de color, sin neón. Acento ≤ 3 % del viewport.
 * Hallmark · pre-emit critique: P4 H4 E4 S4 R5 V4 */
:root{
  /* Superficies y tinta: grises con un rastro del tono del logo, nunca #000/#fff. */
  --color-paper:   oklch(97.6% 0.004 210);
  --color-panel:   oklch(99.3% 0.002 210);
  --color-paper-2: oklch(94.8% 0.006 210);
  --color-rule:    oklch(88.5% 0.008 210);
  --color-muted:   oklch(47% 0.012 210);
  --color-ink:     oklch(22% 0.025 215);
  --color-rail:    oklch(24% 0.035 215);   /* petróleo #0B2A30 aclarado un paso */
  --color-rail-ink:oklch(86% 0.012 210);
  --color-rail-dim:oklch(64% 0.018 210);
  --color-rail-on: oklch(31% 0.04 215);
  /* Un solo acento: el petróleo medio del logo (#1F6B78). Sordo a propósito. */
  --color-accent:  oklch(46% 0.07 210);
  --color-accent-ink: oklch(98% 0.004 210);
  --color-mark:    oklch(70% 0.105 212);   /* cian del logo: sólo el isotipo, nunca superficies */
  --color-focus:   oklch(46% 0.07 210);
  /* Estados: tinta con tono, nunca rellenos de color. */
  --color-ok:      oklch(45% 0.09 155);
  --color-warn:    oklch(50% 0.11 70);
  --color-bad:     oklch(48% 0.15 28);
  --font-ui: system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --font-mono: ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --text-xs:12px;--text-sm:13px;--text-md:15px;--text-lg:17px;--text-xl:22px;--text-2xl:28px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-8:32px;--space-12:48px;
  --radius:6px;--radius-sm:4px;
  --rule:1px solid var(--color-rule);
  --ease-out:cubic-bezier(.2,.7,.2,1);--dur:140ms;
  color-scheme:light dark;
}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --color-paper:   oklch(17% 0.012 215);
  --color-panel:   oklch(20.5% 0.014 215);
  --color-paper-2: oklch(24% 0.016 215);
  --color-rule:    oklch(31% 0.016 215);
  --color-muted:   oklch(70% 0.014 210);
  --color-ink:     oklch(93% 0.006 210);
  --color-rail:    oklch(13.5% 0.012 215);
  --color-rail-on: oklch(24% 0.02 215);
  --color-accent:  oklch(72% 0.07 210);
  --color-accent-ink: oklch(17% 0.012 215);
  --color-focus:   oklch(72% 0.07 210);
  --color-ok:      oklch(74% 0.09 155);
  --color-warn:    oklch(78% 0.11 75);
  --color-bad:     oklch(72% 0.13 28);
}}

*{box-sizing:border-box}
html,body{overflow-x:clip}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--color-paper);color:var(--color-ink);font:var(--text-md)/1.5 var(--font-ui);font-variant-numeric:tabular-nums}
@media (prefers-color-scheme:dark){body{font-weight:350}}
a{color:var(--color-accent);text-decoration:none;text-underline-offset:2px}
a:hover{text-decoration:underline}
h1{font-size:var(--text-2xl);line-height:1.15;margin:0;letter-spacing:-.02em;font-weight:620;overflow-wrap:anywhere;min-width:0}
h2{font-size:var(--text-lg);margin:0 0 var(--space-3);font-weight:620;letter-spacing:-.01em}
h3{font-size:var(--text-md);margin:0 0 var(--space-2);font-weight:600}
p{margin:0 0 var(--space-3)}
small,.suave{color:var(--color-muted)}
code{font:var(--text-sm) var(--font-mono);background:var(--color-paper-2);padding:1px 5px;border-radius:var(--radius-sm);overflow-wrap:anywhere}
:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}

/* ── Armazón: riel lateral (N3) ── */
.app{display:grid;grid-template-columns:216px minmax(0,1fr);min-height:100vh}
.lado{background:var(--color-rail);color:var(--color-rail-ink);padding:var(--space-5) var(--space-3);position:sticky;top:0;height:100vh;overflow:auto;display:flex;flex-direction:column}
.marca{display:flex;gap:var(--space-2);align-items:center;color:var(--color-rail-ink);font-weight:650;margin:0 var(--space-2) var(--space-6);font-size:var(--text-md)}
.marca i{width:14px;height:14px;border-radius:3px;background:var(--color-mark);display:block;flex:none}
.lado nav{display:flex;flex-direction:column;gap:1px}
.lado nav a{display:flex;justify-content:space-between;align-items:center;color:var(--color-rail-ink);padding:6px var(--space-2);border-radius:var(--radius-sm);font-size:14px;white-space:nowrap}
.lado nav a:hover{background:var(--color-rail-on);text-decoration:none}
.lado nav a[aria-current]{background:var(--color-rail-on);box-shadow:inset 2px 0 0 var(--color-mark)}
.lado nav a b{font-size:var(--text-xs);font-weight:600;color:var(--color-rail-dim)}
.lado .grupo{font-size:11px;color:var(--color-rail-dim);margin:var(--space-4) var(--space-2) var(--space-1)}
.lado .pie{margin-top:auto;padding:var(--space-4) var(--space-2) 0;font-size:var(--text-xs);color:var(--color-rail-dim)}
.lado .pie button{margin-top:var(--space-2);background:transparent;border:1px solid var(--color-rail-on);color:var(--color-rail-ink)}
.principal{padding:var(--space-6) var(--space-8) var(--space-12);min-width:0;max-width:1440px}
.cabeza{display:flex;gap:var(--space-3);align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:var(--space-5);padding-bottom:var(--space-4);border-bottom:var(--rule)}
.cabeza .suave{display:block;font-size:var(--text-sm);margin-top:2px}
.buscador input{width:240px}
@media (max-width:860px){
  .app{grid-template-columns:minmax(0,1fr)}
  .lado{position:static;height:auto;padding:var(--space-3)}
  .lado nav{flex-direction:row;overflow-x:auto;scrollbar-width:none;gap:2px}
  .lado .grupo,.lado .pie{display:none}
  .marca{margin:0 var(--space-1) var(--space-2)}
  .principal{padding:var(--space-4) var(--space-4) var(--space-12)}
  .buscador,.buscador input{width:100%}
}

/* ── Superficies ── */
.panel{background:var(--color-panel);border:var(--rule);border-radius:var(--radius);padding:var(--space-4);min-width:0}
.panel>h2:first-child{display:flex;justify-content:space-between;align-items:baseline;gap:var(--space-2)}
.rejilla{display:grid;gap:var(--space-4);grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr))}
.dos{display:grid;gap:var(--space-4);grid-template-columns:minmax(0,2fr) minmax(0,1fr);align-items:start}
@media (max-width:1000px){.dos{grid-template-columns:minmax(0,1fr)}}
.pila>*+*{margin-top:var(--space-4)}

/* Cifras: una franja con divisiones, no tarjetas sueltas. */
.cifras{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));border:var(--rule);border-radius:var(--radius);background:var(--color-panel);margin-bottom:var(--space-4)}
.cifras div{padding:var(--space-3) var(--space-4);border-left:var(--rule);margin-left:-1px}
.cifras b{display:block;font-size:var(--text-xl);font-weight:620;letter-spacing:-.01em}
.cifras span{font-size:var(--text-sm);color:var(--color-muted)}
.cifras .warn b{color:var(--color-warn)}.cifras .bad b{color:var(--color-bad)}

/* ── Tablas ── */
.tabla{width:100%;border-collapse:collapse;font-size:14px}
.tabla th{text-align:left;font-weight:500;font-size:var(--text-sm);color:var(--color-muted);padding:var(--space-2);border-bottom:var(--rule);white-space:nowrap}
.tabla td{padding:9px var(--space-2);border-bottom:var(--rule);vertical-align:top}
.tabla tr:last-child td{border-bottom:0}
.tabla tbody tr:hover td{background:var(--color-paper)}
.tabla .num{text-align:right;white-space:nowrap}
.desplaza{overflow-x:auto;margin:0 calc(var(--space-4) * -1);padding:0 var(--space-4)}

/* ── Formularios ── */
label{display:block;font-size:var(--text-sm);color:var(--color-muted);margin:0 0 var(--space-1)}
input,select,textarea{width:100%;font:inherit;color:inherit;background:var(--color-panel);border:1px solid var(--color-rule);border-radius:var(--radius-sm);padding:7px 10px;min-height:36px}
input:hover,select:hover,textarea:hover{border-color:var(--color-muted)}
input:disabled,select:disabled,textarea:disabled{opacity:.55;cursor:not-allowed}
input:user-invalid{border-color:var(--color-bad)}
textarea{min-height:88px;resize:vertical}
input[type=checkbox]{width:auto;min-height:0;margin:0 6px 0 0;accent-color:var(--color-accent)}
.check{display:flex;align-items:flex-start;color:var(--color-ink);font-size:14px}
.campos{display:grid;gap:var(--space-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr))}
.campos .ancho{grid-column:1/-1}
.fila{display:flex;gap:var(--space-2);align-items:center;flex-wrap:wrap}
.fila>input,.fila>select{flex:1;min-width:120px}

/* Botones: 8 estados. */
button,.boton{display:inline-flex;align-items:center;justify-content:center;gap:6px;font:inherit;font-weight:550;font-size:14px;
  background:var(--color-accent);color:var(--color-accent-ink);border:1px solid var(--color-accent);border-radius:var(--radius-sm);
  padding:7px 14px;min-height:36px;cursor:pointer;white-space:nowrap;transition:transform var(--dur) var(--ease-out),opacity var(--dur) var(--ease-out)}
button:hover,.boton:hover{opacity:.9;text-decoration:none}
button:active,.boton:active{transform:translateY(1px)}
button:disabled,button[aria-busy=true]{opacity:.5;cursor:not-allowed}
.secundario{background:var(--color-panel);color:var(--color-ink);border-color:var(--color-rule)}
.secundario:hover{border-color:var(--color-muted);opacity:1}
.peligro{background:var(--color-panel);color:var(--color-bad);border-color:var(--color-rule)}
.chico{padding:3px 10px;min-height:30px;font-size:var(--text-sm)}
.acciones{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-top:var(--space-4)}
form.en-linea{display:inline}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ── Estado: punto + texto, nada de pastillas de colores ── */
.estado{display:inline-flex;align-items:center;gap:6px;font-size:var(--text-sm);white-space:nowrap;color:var(--color-ink)}
.estado:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-muted);flex:none}
.estado.ok:before{background:var(--color-ok)}.estado.warn:before{background:var(--color-warn)}
.estado.bad:before{background:var(--color-bad)}.estado.on:before{background:var(--color-accent)}
.etiqueta{display:inline-block;font-size:var(--text-xs);padding:1px 6px;border:var(--rule);border-radius:var(--radius-sm);color:var(--color-muted);white-space:nowrap}
.aviso{border:var(--rule);border-left:3px solid var(--color-accent);background:var(--color-panel);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-4);margin-bottom:var(--space-4)}
.aviso.error{border-left-color:var(--color-bad)}
.vacio{color:var(--color-muted);font-size:14px;padding:var(--space-5) var(--space-1)}

/* ── Embudo / tablero de tareas ── */
.kanban{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(232px,1fr);gap:var(--space-3);overflow-x:auto;padding-bottom:var(--space-2)}
.columna{border-top:2px solid var(--color-rule);padding-top:var(--space-2);min-height:120px}
.columna h3{display:flex;justify-content:space-between;font-size:var(--text-sm);font-weight:600}
.columna h3 small{font-weight:400}
.tarjeta{background:var(--color-panel);border:var(--rule);border-radius:var(--radius-sm);padding:var(--space-3);margin-top:var(--space-2);font-size:14px}
.tarjeta.atrasada{border-color:var(--color-warn)}
.tarjeta select{min-height:30px;padding:3px 6px;font-size:var(--text-sm);margin-top:var(--space-2)}

/* ── Conversación ── */
.hilo{display:flex;flex-direction:column;gap:var(--space-2);max-height:62vh;overflow:auto;padding:var(--space-1)}
.msj{max-width:78%;padding:var(--space-2) var(--space-3);border-radius:var(--radius);background:var(--color-paper-2);white-space:pre-wrap;overflow-wrap:anywhere}
.msj.salida{align-self:flex-end;background:var(--color-panel);border:var(--rule)}
.msj.nota{align-self:stretch;max-width:none;background:transparent;border:1px dashed var(--color-rule);font-size:var(--text-sm)}
.msj small{display:block;font-size:11px;margin-top:3px}
.barra{height:4px;background:var(--color-paper-2);border-radius:2px;overflow:hidden}
.barra i{display:block;height:100%;background:var(--color-accent)}

.tiempo{list-style:none;margin:0;padding:0}
.tiempo li{padding:var(--space-2) 0 var(--space-2) var(--space-4);border-left:var(--rule);position:relative;font-size:14px}
.tiempo li:before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-muted);position:absolute;left:-4px;top:15px}

/* ── Público y documentos ── */
.publica{max-width:860px;margin:0 auto;padding:var(--space-8) var(--space-4) var(--space-12)}
.documento{background:var(--color-panel);border:var(--rule);border-radius:var(--radius);padding:var(--space-8)}
.documento .encabezado{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;border-bottom:2px solid var(--color-ink);padding-bottom:var(--space-4);margin-bottom:var(--space-5)}
.totales{margin-left:auto;max-width:320px}
.totales div{display:flex;justify-content:space-between;gap:var(--space-4);padding:3px 0}
.totales .gran{font-size:var(--text-lg);font-weight:650;border-top:var(--rule);padding-top:var(--space-2);margin-top:var(--space-1)}
.prueba img{max-width:100%;border-radius:var(--radius-sm);border:var(--rule)}
.entrar{min-height:100vh;display:grid;place-items:center;padding:var(--space-4)}
.entrar .panel{width:100%;max-width:360px;padding:var(--space-6)}
@media (max-width:600px){.documento{padding:var(--space-4)}}
@media print{
  :root{--color-paper:#fff;--color-panel:#fff}
  .no-imprimir,.lado{display:none!important}
  .documento{border:0;padding:0}.publica{padding:0}
}
@view-transition{navigation:auto}
.mt{margin-top:var(--space-4)}
progress{display:block;width:100%;height:4px;appearance:none;border:0;border-radius:2px;background:var(--color-paper-2);overflow:hidden;margin-top:var(--space-1)}
progress::-webkit-progress-bar{background:var(--color-paper-2)}
progress::-webkit-progress-value{background:var(--color-accent)}
progress::-moz-progress-bar{background:var(--color-accent)}
summary{cursor:pointer;font-weight:550}

/* ── Membrete de documentos (2026-09-30): réplica de la proforma y la factura físicas de Camaleón.
   --m1 banda/bordes (#0F206C), --m2 cabecera de tabla y número (#009490); vienen del tenant. ── */
.membrete{--m1:#0F206C;--m2:#009490;--m-rojo:#FF151B;padding:0;overflow:hidden;color:#1a1a1a;background:#fff;font-size:14px}
.membrete .m-banda{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:var(--space-4);background:var(--m1);color:#fff;padding:var(--space-5) var(--space-6);font-size:13px;line-height:1.45}
.membrete .m-der{text-align:right}
.membrete .m-logo img{display:block;width:150px;height:auto}
.membrete .m-regimen{display:inline-block;margin-top:6px;letter-spacing:.04em}
.membrete .m-titulo{display:flex;flex-direction:column;align-items:center;margin-top:-1px}
.membrete .m-titulo span{background:var(--m1);color:#fff;font-weight:700;font-size:20px;letter-spacing:.03em;padding:6px 26px 8px;border-radius:0 0 10px 10px}
.membrete .m-titulo strong{color:var(--m2);font-size:18px;margin-top:6px}
.membrete .m-titulo small{color:#666}
.membrete .m-datos{padding:var(--space-4) var(--space-6) 0}
.membrete .m-datos p{margin:0 0 var(--space-2);display:flex;gap:6px;align-items:baseline;flex-wrap:wrap}
.membrete .m-datos u{text-decoration:none;border-bottom:1px solid #333;padding:0 6px;min-width:2.5em;text-align:center}
.membrete .m-datos u.m-linea{flex:1;text-align:left;min-width:10em}
.membrete .m-vence{margin-left:auto;color:#666}
.membrete .m-asunto{padding:0 var(--space-6);font-weight:600}
.membrete .m-tabla{margin:var(--space-4) var(--space-6) 0;border:1.5px solid var(--m1);border-radius:10px;overflow:hidden;display:flex;flex-direction:column}
.membrete .m-tabla table{width:100%;border-collapse:collapse}
.membrete .m-tabla th{background:var(--m2);color:#fff;font-size:13px;font-weight:700;padding:10px 8px;text-align:center}
.membrete .m-tabla th:nth-child(1){width:16%}.membrete .m-tabla th:nth-child(3),.membrete .m-tabla th:nth-child(4){width:18%}
.membrete .m-tabla td{padding:8px;vertical-align:top;border-left:1px solid var(--m1)}
.membrete .m-tabla td:first-child{border-left:0}
.membrete .m-tabla td.c{text-align:center}
.membrete .m-tabla td.num{text-align:right;font-variant-numeric:tabular-nums}
.membrete .m-relleno td{height:150px}
.membrete .m-nota{color:var(--m-rojo);font-style:italic;font-size:12.5px;margin:0;padding:var(--space-2) var(--space-3) var(--space-3)}
.membrete .m-cierre{display:flex;justify-content:space-between;gap:var(--space-4);flex-wrap:wrap;padding:var(--space-3) var(--space-6) 0}
.membrete .m-condiciones{font-weight:700;max-width:46ch;margin:0}
.membrete .m-importe{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.membrete .m-importe div{display:flex;align-items:center;gap:var(--space-3);font-weight:700}
.membrete .m-importe output{border:1.5px solid var(--m1);border-radius:10px;padding:3px 18px;min-width:9ch;text-align:center;font-size:16px;font-variant-numeric:tabular-nums}
.membrete .m-importe small{color:#555}
.membrete h3,.membrete h3+p,.membrete .m-tabla+p{padding:0 var(--space-6)}
.membrete .m-firmas{display:flex;justify-content:space-between;gap:var(--space-6);padding:56px var(--space-6) 0}
.membrete .m-firmas span{flex:0 1 240px;border-top:1px solid #333;padding-top:6px;text-align:center;font-weight:700}
.membrete .m-leyenda{margin:var(--space-4) var(--space-6) 0;padding:var(--space-2) 0;border-top:1px dotted #999;border-bottom:1px dotted #999;text-align:center;font-style:italic;font-size:12.5px}
.membrete .m-pie{text-align:center;color:#777;font-size:11px;padding:var(--space-2) var(--space-6) var(--space-5);margin:0}
/* Factura: talonario monocromo en el azul de marca, número en rojo, pie de imprenta DGI. */
.membrete.factura .m-banda{background:#fff;color:var(--m1);border-bottom:0}
.membrete.factura .m-pastilla{display:inline-block;background:var(--m1);color:#fff;font-weight:700;border-radius:12px;padding:4px 16px;margin-top:6px}
.membrete.factura .m-num{display:flex;align-items:center;gap:var(--space-3)}
.membrete.factura .m-num strong{color:var(--m-rojo);font-size:24px;font-variant-numeric:tabular-nums}
.membrete.factura .m-tabla th{background:var(--m1)}
.membrete .m-imprenta{font-size:9.5px;color:var(--m1);text-align:center;padding:4px var(--space-6) 0;margin:0;font-weight:600}
@media (max-width:600px){
  .membrete .m-banda{grid-template-columns:1fr;text-align:center;padding:var(--space-4)}
  .membrete .m-der{text-align:center}.membrete .m-logo img{margin:0 auto}
  .membrete .m-datos,.membrete .m-cierre,.membrete .m-firmas{padding-left:var(--space-4);padding-right:var(--space-4)}
  .membrete .m-tabla{margin:var(--space-3) var(--space-3) 0}
  .membrete .m-tabla th,.membrete .m-tabla td{padding:6px 4px;font-size:12px}
  .membrete .m-relleno td{height:60px}
}
@media print{
  @page{size:letter;margin:10mm}
  .membrete{-webkit-print-color-adjust:exact;print-color-adjust:exact;border:0}
}
.membrete.factura .m-num-col{display:flex;flex-direction:column;align-items:center;gap:6px}