/* ===========================================================================
   ALUCOM Supply · Portal de suplidores — hoja de estilo (Fase 0)
   TASK-011 · dashboard de comparación de precios (admin).
   App PHP server-rendered, sin build step, sin framework. Vanilla CSS.
   Tokens de marca portados de alucomsite/src/styles/global.css (DEC-020),
   extendidos con una capa semántica de producto (estados hover/focus/…)
   y un tema claro/oscuro completo.
   =========================================================================== */

/* Fuentes co-brand SupplyAlu (DEC-cobrand): display/labels = Bahnschrift (nativa
   en Windows, gratis) con fallback web Saira Semi Condensed (OFL); cuerpo/datos =
   Archivo (OFL). Se cargan por CDN de Google Fonts, YA permitido por el CSP actual
   (style-src fonts.googleapis.com · font-src fonts.gstatic.com — ver src/Csp.php).
   IBM Plex Mono se mantiene para cifras tabulares (--font-mono). */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&family=Saira+Semi+Condensed:wght@500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ===========================================================================
   Rebrand co-branded "SupplyAlu" (ALINOX + ALUCOM) — sistema de tokens portado
   del mockup aprobado (scratchpad/supplyalu-mockup.html).
   Acento azul→teal (une ALINOX azul + ALUCOM teal); rojo RESERVADO a danger.
   Los NOMBRES de token se conservan 1:1 con la capa previa para que TODAS las
   vistas y componentes hereden sin tocar su markup. Se AÑADEN tokens nuevos del
   co-brand: --blue/--blue-ink, --teal-ink, --red-ink, --grad, --amber, --green,
   --ink-3, --line-soft. Mapeo de acento del mockup: pata A→teal, pata B→azul
   (por eso --sup-b y --caoba se re-tiñen a azul).
   =========================================================================== */

/* ---- Tokens: tema claro (base :root) ----------------------------------- */
:root{
  /* marca co-brand */
  --teal:#0E5A6B; --teal-deep:#0A4757; --teal-ink:#0B4757; --teal-pale:#E5F1F3;
  --blue:#1256BF; --blue-ink:#0B3F92;
  --red:#CE0E2D;  --red-ink:#A90B25;
  --amber:#9A6412; --green:#1C7A4A;
  --grad:linear-gradient(100deg,var(--blue),var(--teal));
  /* re-teñidos a azul (pata B / badges admin / acoplamientos) */
  --caoba:#1256BF; --caoba-pale:#E6EFFB;

  /* superficies / texto */
  --bg:#EEF2F5; --bg2:#E6ECF0;
  --surface:#FFFFFF;
  --surface-2:#F4F7F9;
  --surface-3:#E6ECF0;
  --ink:#12222E;
  --ink-2:#3F5666;
  --ink-3:#6F8494;
  --muted:#6F8494;
  --line:#D5DEE5;
  --line-soft:#E4EBF0;
  --line-strong:#C2CCD4;

  /* acentos por pata del comparativo (A=teal · B=azul). DEC-046: los nombres de
     suplidor NO viven en los assets estáticos; llegan del backend en runtime. */
  --sup-a:#0E5A6B;   --sup-a-soft:#E5F1F3;
  --sup-b:#1256BF;    --sup-b-soft:#E6EFFB;

  /* estados semánticos */
  --success:#1C7A4A; --success-bg:#E2F1E9; --success-line:#B7DEC8;
  --warn:#9A6412;    --warn-bg:#FBF0D8;    --warn-line:#EBD39A;
  --danger:#CE0E2D;  --danger-bg:#FBE4E7;  --danger-line:#F0BAC2;
  --info:#0E5A6B;    --info-bg:#E5F1F3;

  /* elevación */
  --shadow-sm:0 1px 2px rgba(20,40,60,.08);
  --shadow-md:0 6px 20px -10px rgba(20,40,60,.24);
  --shadow-lg:0 18px 44px -22px rgba(20,40,60,.38);

  --ring:var(--blue);
  --ease:cubic-bezier(.23,1,.32,1);
  --radius:14px; --radius-sm:10px;
  /* Bahnschrift nativa (Windows) → Saira Semi Condensed (web OFL) → sistema */
  --font-ui:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --font-disp:'Bahnschrift','Saira Semi Condensed','Archivo',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  /* z-scale semántica */
  --z-sticky:20; --z-dropdown:40; --z-toast:80;
  color-scheme:light;
}

/* ---- Tokens: tema oscuro ------------------------------------------------ */
:root[data-theme="dark"]{
  /* marca co-brand (dark premium industrial) */
  --teal:#19A3BD; --teal-deep:#147E93; --teal-ink:#7FDCEE; --teal-pale:rgba(25,163,189,.16);
  --blue:#2F7AE5; --blue-ink:#8FBCFF;
  --red:#E11D3A;  --red-ink:#FF90A0;
  --amber:#E5A63B; --green:#37B26B;
  --grad:linear-gradient(100deg,var(--blue),var(--teal));
  --caoba:#8FBCFF; --caoba-pale:rgba(47,122,229,.16);

  --bg:#0E141A; --bg2:#121B23;
  --surface:#16212B;
  --surface-2:#1C2B37;
  --surface-3:#24333F;
  --ink:#EEF4F8;
  --ink-2:#AEBECB;
  --ink-3:#7D92A2;
  --muted:#7D92A2;
  --line:#293A48;
  --line-soft:#1F2D38;
  --line-strong:#35495A;

  --sup-a:#7FDCEE;   --sup-a-soft:rgba(25,163,189,.18);
  --sup-b:#8FBCFF;    --sup-b-soft:rgba(47,122,229,.18);

  --success:#63C795; --success-bg:rgba(55,178,107,.16); --success-line:rgba(99,199,149,.32);
  --warn:#E5A63B;    --warn-bg:rgba(229,166,59,.14);    --warn-line:rgba(229,166,59,.32);
  --danger:#FF90A0;  --danger-bg:rgba(225,29,58,.18);   --danger-line:rgba(255,144,160,.34);
  --info:#7FDCEE;    --info-bg:rgba(25,163,189,.14);

  --shadow-sm:0 1px 2px rgba(0,0,0,.4);
  --shadow-md:0 10px 30px -12px rgba(0,0,0,.6);
  --shadow-lg:0 22px 50px -24px rgba(0,0,0,.7);
  --ring:#2F7AE5;
  color-scheme:dark;
}

/* Respeta prefers-color-scheme cuando el usuario no ha elegido (data-theme ausente) */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-theme="dark"]){
    --teal:#19A3BD; --teal-deep:#147E93; --teal-ink:#7FDCEE; --teal-pale:rgba(25,163,189,.16);
    --blue:#2F7AE5; --blue-ink:#8FBCFF; --red:#E11D3A; --red-ink:#FF90A0;
    --amber:#E5A63B; --green:#37B26B; --caoba:#8FBCFF; --caoba-pale:rgba(47,122,229,.16);
    --bg:#0E141A; --bg2:#121B23; --surface:#16212B; --surface-2:#1C2B37; --surface-3:#24333F;
    --ink:#EEF4F8; --ink-2:#AEBECB; --ink-3:#7D92A2; --muted:#7D92A2;
    --line:#293A48; --line-soft:#1F2D38; --line-strong:#35495A;
    --sup-a:#7FDCEE; --sup-a-soft:rgba(25,163,189,.18);
    --sup-b:#8FBCFF; --sup-b-soft:rgba(47,122,229,.18);
    --success:#63C795; --success-bg:rgba(55,178,107,.16); --success-line:rgba(99,199,149,.32);
    --warn:#E5A63B; --warn-bg:rgba(229,166,59,.14); --warn-line:rgba(229,166,59,.32);
    --danger:#FF90A0; --danger-bg:rgba(225,29,58,.18); --danger-line:rgba(255,144,160,.34);
    --info:#7FDCEE; --info-bg:rgba(25,163,189,.14);
    --shadow-md:0 10px 30px -12px rgba(0,0,0,.6);
    --ring:#2F7AE5; color-scheme:dark;
  }
}

/* ---- Reset ------------------------------------------------------------- */
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--ink);
  font-family:var(--font-ui);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100dvh;
}
h1,h2,h3{font-family:var(--font-disp);font-weight:700;line-height:1.08;letter-spacing:.01em;text-wrap:balance}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--ring);outline-offset:2px;border-radius:3px}
::selection{background:var(--teal);color:#fff}

/* ---- App shell --------------------------------------------------------- */
.app{display:flex;flex-direction:column;min-height:100dvh}

.topbar{
  position:sticky;top:0;z-index:var(--z-sticky);
  display:flex;align-items:center;gap:18px;
  height:60px;padding:0 clamp(16px,3vw,28px);
  background:color-mix(in srgb,var(--surface) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
/* ---- Lockup de marca co-brand (ambos marks + wordmark SupplyAlu) -------- */
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.brand-marks{display:inline-flex;align-items:center;gap:9px;flex:none}
.brand-marks svg{display:block}
.brand-div{width:1px;height:22px;background:var(--line);flex:none}
.brand-text{display:flex;flex-direction:column;min-width:0;line-height:1}
.brandword{font-family:var(--font-disp);font-weight:700;font-size:1.12rem;letter-spacing:.02em;line-height:1}
.brandword .alu{color:var(--ink)}
.brandword .sfx{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.brandsub{font-family:var(--font-disp);font-size:.62rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);display:block;margin-top:3px}
.topbar .spacer{flex:1}

.env-pill{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.64rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--line);
  padding:5px 9px;border-radius:100px;white-space:nowrap
}
.env-pill .dot{width:7px;height:7px;border-radius:50%;background:var(--warn);box-shadow:0 0 0 3px var(--warn-bg)}

/* theme toggle */
.theme-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:3px}
.theme-toggle button{border:none;background:transparent;color:var(--muted);
  width:34px;height:28px;border-radius:100px;display:grid;place-items:center;
  transition:background .18s var(--ease),color .18s var(--ease)}
.theme-toggle button svg{width:16px;height:16px}
.theme-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--sup-a);box-shadow:var(--shadow-sm)}

/* language switcher (REF-6) — segmented control de texto, on-brand */
.locale-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:3px;margin-right:8px}
.locale-toggle button{border:none;background:transparent;color:var(--muted);cursor:pointer;
  min-width:34px;height:28px;padding:0 10px;border-radius:100px;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.72rem;font-weight:600;letter-spacing:.04em;
  transition:background .18s var(--ease),color .18s var(--ease)}
.locale-toggle button:hover{color:var(--ink)}
.locale-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--sup-a);box-shadow:var(--shadow-sm)}
.locale-toggle button:focus-visible{outline:2px solid var(--sup-a);outline-offset:2px}
/* switcher en el login (standalone, sin topbar) */
.auth-topbar{position:absolute;top:clamp(12px,3vw,20px);right:clamp(12px,3vw,20px);z-index:2}

/* ---- Main -------------------------------------------------------------- */
.main{flex:1;width:100%;max-width:1200px;margin:0 auto;padding:clamp(18px,3vw,32px) clamp(16px,3vw,28px) 48px}

.page-head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 22px;margin-bottom:22px}
.page-head h1{font-size:clamp(1.4rem,2.4vw,1.85rem)}
.page-head .desc{color:var(--muted);font-size:.92rem;max-width:60ch}
.page-head .meta{margin-left:auto;text-align:right;font-family:var(--font-mono);font-size:.72rem;color:var(--muted);line-height:1.7}
.page-head .meta b{color:var(--ink-2);font-weight:600}

/* ---- Controls (query form) --------------------------------------------- */
.controls{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:14px 18px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;box-shadow:var(--shadow-sm);margin-bottom:20px
}
.field{display:flex;flex-direction:column;gap:6px;min-width:0}
.field > label{font-size:.72rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.field .hint{font-size:.68rem;color:var(--muted)}

.input{
  height:40px;padding:0 12px;font-family:var(--font-mono);font-size:.95rem;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease),background .16s var(--ease)
}
.input:hover{border-color:var(--teal)}
.input:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-pale)}
input[type="number"].input{width:110px}
input[type="date"].input{width:168px}

/* segmented control */
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);padding:3px;gap:2px}
.seg button{border:none;background:transparent;color:var(--muted);
  font-weight:600;font-size:.85rem;padding:6px 13px;border-radius:5px;min-height:34px;
  transition:background .16s var(--ease),color .16s var(--ease),box-shadow .16s var(--ease)}
.seg button:hover{color:var(--ink)}
/* pressed color viene de los tokens --sup-* que se adaptan a claro / oscuro
   (explícito y del sistema), garantizando contraste en ambos temas. */
.seg button[aria-pressed="true"]{background:var(--surface);color:var(--sup-a);box-shadow:var(--shadow-sm);font-weight:700}
.seg.fx button[aria-pressed="true"]{color:var(--sup-b)}
/* DEC-037 · el grado de metal pertenece a la pata B → acento B en el pressed */
.seg.grade button[aria-pressed="true"]{color:var(--sup-b)}
.seg .mono{font-family:var(--font-mono)}

.controls .apply{margin-left:auto;display:flex;gap:10px;align-items:flex-end}
.btn{
  display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;
  font-family:var(--font-disp);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  border:1px solid transparent;border-radius:var(--radius-sm);
  transition:background .16s var(--ease),box-shadow .16s var(--ease),transform .12s var(--ease),color .16s var(--ease)
}
/* Co-brand: el botón primario usa el gradiente azul→teal (une ALINOX + ALUCOM) */
.btn.primary{background:var(--grad);color:#fff;letter-spacing:.03em}
.btn.primary:hover{box-shadow:var(--shadow-md);filter:saturate(1.08) brightness(1.03)}
.btn.primary:active{transform:scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn.ghost:hover{border-color:var(--teal);color:var(--teal)}
.btn[disabled]{opacity:.5;cursor:not-allowed;box-shadow:none;transform:none}
.btn .spin{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;
  border-top-color:transparent;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---- Banners ----------------------------------------------------------- */
.banners{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.banner{
  display:flex;gap:11px;align-items:flex-start;
  padding:12px 15px;border-radius:var(--radius-sm);border:1px solid;font-size:.9rem
}
.banner svg{width:18px;height:18px;flex:none;margin-top:1px}
.banner b{font-weight:700}
.banner .x{margin-left:auto;background:none;border:none;color:inherit;opacity:.6;
  padding:2px;border-radius:4px;line-height:0}
.banner .x:hover{opacity:1}
.banner.warn{background:var(--warn-bg);border-color:var(--warn-line);color:var(--warn)}
.banner.danger{background:var(--danger-bg);border-color:var(--danger-line);color:var(--danger)}
.banner.info{background:var(--info-bg);border-color:color-mix(in srgb,var(--info) 30%,transparent);color:var(--info)}
.banner .body{color:var(--ink-2)}
.banner.warn .body,.banner.danger .body,.banner.info .body{color:inherit}
.banner .reasons{margin:6px 0 0;padding-left:16px;font-size:.82rem;opacity:.92}
.banner .reasons li{margin:1px 0}

/* ---- Card wrapper ------------------------------------------------------ */
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.panel-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line)}
.panel-head h2{font-size:1.02rem;font-weight:700}
.panel-head .tag{margin-left:auto}

/* ---- Comparison table -------------------------------------------------- */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
/* DEC-040 · 4 columnas por suplidor (Metal/Processing/Freight/Total) => tabla más ancha */
table.cmp{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;min-width:880px}
.cmp thead th{
  position:sticky;top:0;background:var(--surface-2);
  font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  text-align:right;padding:11px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap;
  vertical-align:bottom
}
.cmp thead th.grp{text-align:center;border-bottom:2px solid;padding-bottom:7px;font-size:.7rem}
.cmp thead tr.groups th{background:var(--surface-2);border-bottom:none;padding-top:12px;padding-bottom:4px}
.cmp thead th.g-sup-a{color:var(--sup-a);border-color:var(--sup-a)}
.cmp thead th.g-sup-b{color:var(--sup-b);border-color:var(--sup-b)}
.cmp thead th.g-verdict{color:var(--ink-2)}
.cmp thead th.col-finish,.cmp tbody th.col-finish{text-align:left}

/* sticky first column so el acabado queda visible al hacer scroll horizontal */
.cmp th.col-finish{position:sticky;left:0;z-index:1;background:var(--surface-2)}
.cmp tbody th.col-finish{background:var(--surface)}
.cmp tbody tr:hover th.col-finish{background:var(--surface-3)}

.cmp tbody td,.cmp tbody th{padding:12px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.cmp tbody tr:last-child td,.cmp tbody tr:last-child th{border-bottom:none}
.cmp tbody tr{transition:background .14s var(--ease)}
.cmp tbody tr:hover{background:var(--surface-3)}

.cmp tbody th.col-finish{font-weight:600;font-size:.92rem;color:var(--ink)}
.cmp .fin-name{display:flex;flex-direction:column;gap:1px}
.cmp .fin-name .code{font-family:var(--font-mono);font-size:.66rem;color:var(--muted);letter-spacing:.02em}

.num{font-family:var(--font-mono);font-size:.9rem;color:var(--ink-2);font-feature-settings:"tnum"}
.num .u{color:var(--muted);font-size:.72em;margin-left:3px}
.num.sub{color:var(--muted);font-size:.78rem}
.num.zero{color:var(--muted)}
td.total{font-weight:600}
td.total .num{font-size:1rem;color:var(--ink);font-weight:600}
.kg{display:block;font-family:var(--font-mono);font-size:.7rem;color:var(--muted);margin-top:2px}

/* borde suave que separa los dos bloques de suplidor */
.cmp .sep-l{border-left:1px solid var(--line)}
.cmp td.tot-a{background:var(--sup-a-soft)}
.cmp td.tot-b{background:var(--sup-b-soft)}

/* celda ganadora */
td.win{position:relative}
td.win .num{color:var(--success)!important}
td.win::after{content:"";position:absolute;inset:4px 3px;border:1.5px solid var(--success-line);
  border-radius:6px;pointer-events:none}
:root[data-theme="dark"] td.win .num{color:var(--success)!important}

/* verdict chip */
.verdict{display:inline-flex;flex-direction:column;align-items:flex-end;gap:3px}
.chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-disp);font-weight:700;
  font-size:.76rem;padding:4px 10px;border-radius:100px;white-space:nowrap;letter-spacing:.01em}
.chip .dot{width:7px;height:7px;border-radius:50%}
.chip.sup-a{background:var(--sup-a-soft);color:var(--sup-a)}
.chip.sup-a .dot{background:var(--sup-a)}
.chip.sup-b{background:var(--sup-b-soft);color:var(--sup-b)}
.chip.sup-b .dot{background:var(--sup-b)}
.chip.none{background:var(--surface-2);color:var(--muted)}
.chip.est{opacity:.9}
/* DEC-040 · el Δ puede envolver entre el valor y la unidad, pero "USD/t · x%" se
   mantiene como átomo (.du nowrap) => en móvil NO se corta a "USD/..." */
.verdict .delta{font-family:var(--font-mono);font-size:.74rem;color:var(--muted);white-space:normal;text-align:right}
.verdict .delta b{color:var(--ink-2);font-weight:600}
.verdict .delta .du{white-space:nowrap}
.verdict .est-tag{font-family:var(--font-mono);font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--warn);display:inline-flex;align-items:center;gap:4px}

/* ---- Traceability panel ------------------------------------------------ */
.trace-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;
  background:var(--line)}
.trace-cell{background:var(--surface);padding:14px 16px}
.trace-cell .k{font-size:.68rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  display:flex;align-items:center;gap:6px;margin-bottom:6px}
.trace-cell .v{font-family:var(--font-mono);font-size:1.02rem;color:var(--ink);font-weight:500}
.trace-cell .v small{font-size:.7rem;color:var(--muted);font-weight:400}
.trace-cell .src{font-size:.7rem;color:var(--muted);margin-top:4px}
.src-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.src-dot.a{background:var(--sup-a)}
.src-dot.b{background:var(--sup-b)}
.src-dot.feed{background:var(--warn)}

.proc-mini{width:100%;border-collapse:collapse;margin-top:2px;font-size:.82rem}
.proc-mini th,.proc-mini td{padding:7px 14px;text-align:right;border-bottom:1px solid var(--line)}
.proc-mini th{font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.proc-mini td:first-child,.proc-mini th:first-child{text-align:left}
.proc-mini tbody tr:last-child td{border-bottom:none}
.proc-mini .num{font-size:.82rem}
.proc-mini .ph{color:var(--warn)}

.section-gap{margin-top:22px}

/* pequeñas etiquetas */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.66rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  padding:4px 9px;border-radius:100px;border:1px solid}
.badge.prov{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.badge.firm{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.badge.fx{background:var(--surface-2);color:var(--ink-2);border-color:var(--line-strong)}
/* DEC-041 · badge ADMIN (azul solido) para la cabecera del editor de venta */
.badge.admin{background:var(--blue);color:#fff;border-color:var(--blue)}

/* DEC-042 · Precios de venta — MARGEN editable; PRECIO DE VENTA = resultado destacado */
.sale-input{max-width:150px;margin-left:auto;text-align:right}
.sale-input.sale-neg-input{border-color:var(--danger-line);color:var(--danger)}
.dt thead th.sale-edit-col{color:var(--blue-ink)}
.dt thead th.sale-result-col{color:var(--ink);box-shadow:inset 0 -2px 0 var(--blue)}
.dt tbody td.sale-result-col{font-weight:700;font-size:.95rem;color:var(--ink);background:var(--caoba-pale)}
.dt tbody tr.sale-dirty td.sale-result-col{color:var(--blue-ink)}
.dt tbody td.sale-result-col .muted{font-weight:400;font-size:.82rem}
.sale-preview-tag{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:100px;
  font-family:var(--font-ui);font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  vertical-align:middle;color:var(--blue-ink);border:1px solid currentColor}
.dt tbody td.sale-edit-col .field-error{justify-content:flex-end;margin-top:4px;white-space:normal}

/* legend / footer note */
.legend{display:flex;flex-wrap:wrap;gap:14px 22px;margin-top:16px;font-size:.78rem;color:var(--muted)}
.legend .item{display:inline-flex;align-items:center;gap:7px}
.legend .sw{width:12px;height:12px;border-radius:3px}
.legend .sw.a{background:var(--sup-a-soft);border:1px solid var(--sup-a)}
.legend .sw.b{background:var(--sup-b-soft);border:1px solid var(--sup-b)}
.legend .sw.w{border:1.5px solid var(--success-line);background:var(--success-bg)}

.foot-note{margin-top:30px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--muted);line-height:1.7}
.foot-note code{font-family:var(--font-mono);background:var(--surface-2);padding:1px 6px;border-radius:4px;
  border:1px solid var(--line);font-size:.9em}

/* skeleton (loading) */
.results.loading{opacity:.5;pointer-events:none;transition:opacity .2s var(--ease)}

/* empty / error state */
.state{padding:44px 24px;text-align:center;color:var(--muted)}
.state svg{width:34px;height:34px;margin:0 auto 12px;opacity:.6}
.state h3{font-size:1.05rem;color:var(--ink);margin-bottom:6px}
.state p{max-width:44ch;margin:0 auto;font-size:.9rem}

/* ---- Responsive -------------------------------------------------------- */
@media (max-width:780px){
  .page-head .meta{margin-left:0;text-align:left;width:100%}
  .controls .apply{margin-left:0;width:100%}
  .controls .apply .btn{flex:1}
  .field.grow{flex:1 1 100%}
}
@media (max-width:560px){
  .topbar{gap:10px}
  .brand .sub{display:none}
  .env-pill{display:none}
  .main{padding-left:14px;padding-right:14px}
}

@media (prefers-reduced-motion:reduce){
  *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

/* ===========================================================================
   OLA 4 — layer añadida (TASK-014 login/rol · TASK-018 CRUD · REF-2/REF-3)
   Reusa los mismos tokens de marca. Sin nuevas dependencias.
   =========================================================================== */

/* ---- Nav por rol (subbarra bajo la topbar) ----------------------------- */
.nav{
  position:sticky;top:60px;z-index:calc(var(--z-sticky) - 1);
  display:flex;gap:2px;align-items:stretch;
  padding:0 clamp(12px,3vw,24px);
  background:color-mix(in srgb,var(--surface) 92%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);overflow-x:auto;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  padding:0 14px;min-height:46px;position:relative;
  font-family:var(--font-disp);font-weight:700;font-size:.85rem;letter-spacing:.01em;
  color:var(--muted);border-bottom:2px solid transparent;
  transition:color .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease)
}
.nav a svg{width:16px;height:16px;flex:none}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current="page"]{color:var(--sup-a);border-bottom-color:var(--sup-a)}
/* Badge admin: sólido azul ALINOX (co-brand), texto blanco */
.nav a.admin-only::after{content:"admin";margin-left:6px;font-family:var(--font-disp);font-size:.56rem;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#fff;
  background:var(--blue);padding:2px 6px;border-radius:5px}

/* ---- Login / auth (co-brand: hero + card, dos columnas) ---------------- */
.auth{position:relative;min-height:100dvh;display:grid;grid-template-columns:1.05fr .95fr;background:var(--bg)}
@media(max-width:860px){.auth{grid-template-columns:1fr}}

/* columna hero (izquierda) */
.auth-hero{position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:space-between;
  gap:26px;padding:clamp(28px,4vw,46px);border-right:1px solid var(--line);
  background:radial-gradient(120% 90% at 15% 0%,var(--surface-2) 0%,var(--bg2) 46%,var(--bg) 100%)}
:root[data-theme="dark"] .auth-hero{background:radial-gradient(120% 90% at 15% 0%,#15303a 0%,var(--bg2) 46%,var(--bg) 100%)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .auth-hero{background:radial-gradient(120% 90% at 15% 0%,#15303a 0%,var(--bg2) 46%,var(--bg) 100%)}}
.auth-hero .pattern{position:absolute;inset:0;opacity:.06;pointer-events:none;background-image:
  repeating-linear-gradient(60deg,var(--teal) 0 2px,transparent 2px 26px),
  repeating-linear-gradient(-60deg,var(--blue) 0 2px,transparent 2px 26px)}
.auth-hero>*{position:relative}
.auth-hero .hero-lock{display:flex;align-items:center;gap:12px}
.auth-hero h2{font-family:var(--font-disp);font-weight:700;font-size:clamp(1.9rem,4vw,2.9rem);
  line-height:1.02;margin:0 0 14px}
.auth-hero .hero-body{color:var(--ink-2);max-width:46ch;margin:0;font-size:.98rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}
.chip{font-family:var(--font-disp);font-size:.74rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  color:var(--ink-2);border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:6px 12px}
.opby{font-family:var(--font-disp);font-size:.6rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
@media(max-width:860px){
  .auth-hero{border-right:none;border-bottom:1px solid var(--line);gap:18px;padding:26px 22px}
  .auth-hero h2{font-size:clamp(1.6rem,7vw,2.1rem)}
  .auth-hero .hero-body{font-size:.9rem}
}
@media(max-width:560px){.auth-hero .chips,.auth-hero .opby{display:none}}

/* columna del formulario (derecha) */
.auth-form-col{position:relative;display:grid;place-items:center;padding:clamp(24px,4vw,40px) clamp(16px,3vw,26px)}
.auth-card{width:100%;max-width:400px;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:clamp(24px,4vw,32px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.auth-card::before{content:"";position:absolute;inset:0 0 auto 0;height:3px;background:var(--grad)}
.auth-brand{display:flex;align-items:center;gap:12px;margin-bottom:22px}
.auth-card h1{font-size:1.4rem;margin-bottom:4px}
.auth-card .lede{color:var(--muted);font-size:.88rem;margin-bottom:20px}
.auth-card .btn.primary{width:100%;justify-content:center;height:44px;margin-top:8px}
.auth-foot{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-size:.72rem;color:var(--muted);line-height:1.6}
.auth-foot code{font-family:var(--font-mono);background:var(--surface-2);padding:1px 5px;border-radius:4px;border:1px solid var(--line)}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:none;color:var(--muted);padding:8px;border-radius:6px;line-height:0}
.pw-toggle:hover{color:var(--ink);background:var(--surface-2)}
.pw-toggle svg{width:18px;height:18px}

/* ---- Formularios genéricos --------------------------------------------- */
.form{display:flex;flex-direction:column;gap:16px}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px 16px}
.form-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.form-field.span-2{grid-column:span 2}
.form-field > label{font-size:.74rem;font-weight:600;letter-spacing:.03em;color:var(--ink-2)}
.form-field > label .req{color:var(--red);margin-left:2px}
.control{
  width:100%;height:42px;padding:0 12px;font-family:var(--font-mono);font-size:.92rem;
  color:var(--ink);background:var(--surface-2);
  border:1px solid var(--line-strong);border-radius:var(--radius-sm);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)
}
textarea.control{height:auto;min-height:78px;padding:10px 12px;font-family:var(--font-ui);line-height:1.5;resize:vertical}
select.control{cursor:pointer;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23556360' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:32px}
.control:hover{border-color:var(--teal)}
.control:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px var(--teal-pale)}
.control[aria-invalid="true"]{border-color:var(--danger);box-shadow:0 0 0 3px var(--danger-bg)}
.control:disabled,.control[readonly]{opacity:.65;cursor:not-allowed;background:var(--surface-3)}
.control[readonly]{opacity:1;color:var(--muted)}
.help{font-size:.7rem;color:var(--muted);line-height:1.4}
.field-error{font-size:.72rem;color:var(--danger);font-weight:600;display:none;align-items:center;gap:5px}
.field-error.show{display:flex}
.field-error svg{width:13px;height:13px;flex:none}
.form-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-top:4px}
.form-actions .grow{flex:1}
.btn.sm{height:34px;padding:0 13px;font-size:.82rem}
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(.94);box-shadow:var(--shadow-md)}
.btn.subtle{background:var(--surface-2);color:var(--ink-2);border-color:var(--line)}
.btn.subtle:hover{border-color:var(--teal);color:var(--teal)}
.btn.block{width:100%;justify-content:center}

/* fieldset visual */
.fieldset{border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.fieldset > legend{padding:0 8px;font-family:var(--font-disp);font-weight:700;font-size:.82rem;color:var(--ink-2)}

/* ---- Tabs de página ---------------------------------------------------- */
.tabs{display:inline-flex;gap:3px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:3px;margin-bottom:18px;flex-wrap:wrap}
.tabs button{border:none;background:transparent;color:var(--muted);font-family:var(--font-disp);
  font-weight:700;font-size:.82rem;padding:7px 15px;border-radius:100px;min-height:36px;
  transition:background .16s var(--ease),color .16s var(--ease)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--sup-a);box-shadow:var(--shadow-sm)}

/* ---- Data table (listados CRUD) ---------------------------------------- */
.dt-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.dt{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums;min-width:640px}
.dt thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;
  font-size:.66rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:11px 14px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.dt thead th.n,.dt tbody td.n{text-align:right}
.dt tbody td,.dt tbody th{padding:12px 14px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;vertical-align:middle}
.dt tbody th{font-weight:600;color:var(--ink)}
.dt tbody tr:last-child td,.dt tbody tr:last-child th{border-bottom:none}
.dt tbody tr{transition:background .14s var(--ease)}
.dt tbody tr:hover{background:var(--surface-3)}
.dt tbody tr.clickable{cursor:pointer}
.dt .n{font-family:var(--font-mono);color:var(--ink-2)}
.dt .muted{color:var(--muted)}
.dt .row-actions{display:flex;gap:6px;justify-content:flex-end}

/* ---- Status pills ------------------------------------------------------ */
.status{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:.68rem;font-weight:600;letter-spacing:.03em;text-transform:uppercase;
  padding:3px 9px;border-radius:100px;border:1px solid;white-space:nowrap}
.status .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.status.pendiente{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.status.confirmada{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.status.en_transito{background:var(--caoba-pale);color:var(--sup-b);border-color:color-mix(in srgb,var(--sup-b) 34%,transparent)}
.status.recibida,.status.confirmada.ok{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.status.vencida,.status.rechazada,.status.cancelada{background:var(--surface-3);color:var(--muted);border-color:var(--line-strong)}

/* ---- Toast (aria-live) ------------------------------------------------- */
.toast-host{position:fixed;bottom:18px;right:18px;left:auto;z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:10px;max-width:min(380px,calc(100vw - 32px));pointer-events:none}
.toast{display:flex;gap:10px;align-items:flex-start;pointer-events:auto;
  padding:12px 14px;border-radius:var(--radius-sm);border:1px solid;font-size:.86rem;
  background:var(--surface);box-shadow:var(--shadow-lg);
  animation:toast-in .24s var(--ease)}
.toast svg{width:17px;height:17px;flex:none;margin-top:1px}
.toast.ok{border-color:var(--success-line);color:var(--success)}
.toast.err{border-color:var(--danger-line);color:var(--danger)}
.toast.info{border-color:var(--line-strong);color:var(--ink-2)}
.toast .body{color:var(--ink-2)}
.toast .t{font-weight:700;color:var(--ink);display:block}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* ---- Unit toggle (REF-2, mini segmented) ------------------------------- */
.unit-toggle{display:inline-flex;background:var(--surface-2);border:1px solid var(--line);
  border-radius:100px;padding:2px;gap:2px}
.unit-toggle button{border:none;background:transparent;color:var(--muted);font-family:var(--font-mono);
  font-weight:600;font-size:.7rem;letter-spacing:.02em;padding:4px 10px;min-height:28px;border-radius:100px;
  transition:background .16s var(--ease),color .16s var(--ease)}
.unit-toggle button:hover{color:var(--ink)}
.unit-toggle button[aria-pressed="true"]{background:var(--surface);color:var(--ink);box-shadow:var(--shadow-sm)}
.anchor-note{font-family:var(--font-mono);font-size:.64rem;color:var(--muted);letter-spacing:.02em}
/* la unidad ancla (USD/ton) nunca cambia; el toggle sólo cambia la línea secundaria .kg */

/* ---- Detalle de documento (drawer inline) ------------------------------ */
.doc-detail{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-sm);overflow:hidden}
.doc-detail .dh{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;
  padding:14px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.doc-detail .dh h3{font-size:1.02rem}
.doc-detail .dh .spacer{flex:1}
.doc-meta{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:var(--line)}
.doc-meta .m{background:var(--surface);padding:12px 16px}
.doc-meta .m .k{font-size:.66rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:3px}
.doc-meta .m .v{font-family:var(--font-mono);font-size:.94rem;color:var(--ink)}
.totals-bar{display:flex;flex-wrap:wrap;gap:18px 26px;padding:14px 18px;border-top:1px solid var(--line);
  background:var(--surface-2);justify-content:flex-end}
.totals-bar .t{text-align:right}
.totals-bar .t .k{font-size:.64rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.totals-bar .t .v{font-family:var(--font-mono);font-size:1.06rem;color:var(--ink);font-weight:600}
.totals-bar .t.grand .v{color:var(--sup-a);font-size:1.2rem}

/* ---- Editor de líneas (items) ------------------------------------------ */
.items-editor{display:flex;flex-direction:column;gap:10px}
.item-row{display:grid;grid-template-columns:1.1fr 1fr .66fr .66fr .8fr .9fr .9fr auto;gap:8px;align-items:end;
  padding:12px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.item-row .form-field > label{font-size:.62rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.item-row .control{height:38px;font-size:.86rem}
.item-row .rm{height:38px;width:38px;padding:0;display:grid;place-items:center;
  background:transparent;border:1px solid var(--line-strong);border-radius:var(--radius-sm);color:var(--muted)}
.item-row .rm:hover{border-color:var(--danger);color:var(--danger)}
.item-row .rm svg{width:16px;height:16px}
.item-derived{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--font-mono);
  font-size:.7rem;color:var(--muted);padding-top:2px}
.item-derived b{color:var(--ink-2);font-weight:600}

/* ---- Settings coupling (REF-3) ----------------------------------------- */
.coupling-note{display:flex;gap:9px;align-items:flex-start;padding:11px 14px;border-radius:var(--radius-sm);
  background:var(--caoba-pale);border:1px solid color-mix(in srgb,var(--caoba) 26%,transparent);
  color:var(--sup-b);font-size:.82rem;margin-bottom:4px}
.coupling-note svg{width:17px;height:17px;flex:none;margin-top:1px}
.coupling-note .body{color:var(--ink-2)}
.coupled-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.6rem;
  font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--sup-b);
  background:var(--caoba-pale);border:1px solid color-mix(in srgb,var(--caoba) 26%,transparent);
  padding:2px 7px;border-radius:100px}
.derived-out{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.derived-out b{color:var(--ink-2)}

/* card list para móvil (colapsa tablas anchas) */
.card-list{display:none;flex-direction:column;gap:10px}
.mini-card{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);padding:13px 15px}
.mini-card .mc-top{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.mini-card .mc-top .spacer{flex:1}
.mini-card .mc-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.mini-card .mc-grid .k{font-size:.62rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
.mini-card .mc-grid .v{font-family:var(--font-mono);font-size:.86rem;color:var(--ink)}

.section-title{display:flex;align-items:center;gap:10px;margin:26px 0 12px}
.section-title h2{font-size:1.08rem}
.section-title .spacer{flex:1}
.section-title .hint{font-size:.76rem;color:var(--muted)}

/* ---- Responsive de la capa Ola 4 --------------------------------------- */
@media (max-width:820px){
  .item-row{grid-template-columns:1fr 1fr;gap:10px}
  .item-row .rm{width:100%;justify-self:stretch}
  .form-field.span-2{grid-column:span 1}
}
@media (max-width:640px){
  .nav{top:56px}
  .dt-scroll table.dt{min-width:560px}
  .toast-host{right:12px;bottom:12px}
}
@media (max-width:560px){
  .hide-sm{display:none!important}
}

/* ===========================================================================
   Capa REF-7/8/9/10 (última pasada de UI)
   =========================================================================== */

/* ---- utilidad accesible ------------------------------------------------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- Status pills · pasos nuevos (REF-7) -------------------------------- */
.status.en_produccion{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.status.despachada{background:var(--teal-pale);color:var(--teal);border-color:color-mix(in srgb,var(--teal) 34%,transparent)}
.status.en_aduana{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}

/* ---- REF-7 · Tracker de estatus (estilo Domino's) ---------------------- */
.track-panel .track-body{padding:18px;display:flex;flex-direction:column;gap:16px}
.track-step-label{font-family:var(--font-mono);font-size:.72rem;color:var(--muted)}
.tracker{list-style:none;display:flex;margin:0;padding:4px 0 2px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.tracker .tstep{position:relative;flex:1 0 92px;display:flex;flex-direction:column;align-items:center;
  text-align:center;gap:9px;padding:0 4px}
.tracker .tstep .node{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-mono);font-size:.82rem;font-weight:600;border:2px solid var(--line-strong);
  background:var(--surface);color:var(--muted);position:relative;z-index:1;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)}
.tracker .tstep .node svg{width:15px;height:15px}
.tracker .tstep .lbl{font-size:.72rem;color:var(--muted);line-height:1.25;max-width:13ch}
/* conector hacia el paso anterior */
.tracker .tstep::before{content:"";position:absolute;top:14px;left:-50%;width:100%;height:2px;
  background:var(--line-strong);z-index:0}
.tracker .tstep:first-child::before{display:none}
/* completado */
.tracker .tstep.done .node{background:var(--teal);border-color:var(--teal);color:#fff}
.tracker .tstep.done .lbl{color:var(--ink-2)}
.tracker .tstep.done::before,.tracker .tstep.current::before{background:var(--teal)}
/* actual */
.tracker .tstep.current .node{background:var(--surface);border-color:var(--teal);color:var(--teal);
  box-shadow:0 0 0 4px var(--teal-pale)}
.tracker .tstep.current .lbl{color:var(--ink);font-weight:700}
/* cancelada => flujo apagado */
.tracker.is-cancelled .tstep .node{opacity:.45}
.tracker.is-cancelled .tstep .lbl{opacity:.55}
.track-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.track-btns{display:flex;flex-wrap:wrap;gap:8px}
.track-cancelled{padding:11px 14px;border-radius:var(--radius-sm);background:var(--surface-3);
  color:var(--muted);font-size:.84rem;border:1px solid var(--line-strong)}
.track-cancelled b{color:var(--ink-2)}

/* ---- REF-9 · Embarque -------------------------------------------------- */
.ship-body{padding:18px;display:flex;flex-direction:column;gap:14px}
.ship-view{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.ship-empty{color:var(--muted);font-size:.86rem}
.ship-edit>summary{cursor:pointer;list-style:none;font-size:.82rem;color:var(--teal);font-weight:600;
  padding:8px 0;display:inline-flex;align-items:center;gap:6px}
.ship-edit>summary::-webkit-details-marker{display:none}
.ship-edit>summary::before{content:"+";font-family:var(--font-mono);font-weight:700}
.ship-edit[open]>summary::before{content:"–"}
.ship-edit .form-grid{margin-top:6px}

/* ---- REF-8 · Editor de línea Material / Molde-Die ---------------------- */
.item-row{display:flex;flex-direction:column;gap:10px}
.item-row-head{display:flex;align-items:flex-end;gap:10px}
.item-row-head .li-f-type{min-width:160px}
.item-row-head .rm{margin-left:auto}
.item-fields{display:grid;gap:8px;align-items:end}
.item-fields.li-mat{grid-template-columns:1.1fr 1fr .66fr .66fr .8fr .9fr .9fr}
.item-fields.li-tool{grid-template-columns:1.7fr .6fr .9fr 1.5fr}
.item-fields .tool-help{display:flex;align-items:flex-end;padding-bottom:9px}
.item-row[data-line-type="material"] .li-tool{display:none}
.item-row[data-line-type="tooling"] .li-mat{display:none}
/* tag "Molde/Die" en el detalle + fila tooling */
.tool-tag{display:inline-block;font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;padding:1px 6px;border-radius:100px;
  background:var(--info-bg);color:var(--info);border:1px solid color-mix(in srgb,var(--info) 30%,transparent);
  vertical-align:middle;margin-right:4px}
.dt tbody tr.row-tooling td,.dt tbody tr.row-tooling th{background:var(--surface-2)}

/* ---- REF-10 · badge placeholder de transporte local -------------------- */
.prov-badge{display:inline-flex;align-items:center;gap:5px;font-family:var(--font-mono);font-size:.62rem;
  font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:100px;
  background:var(--warn-bg);color:var(--warn);border:1px solid var(--warn-line)}
.prov-badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor}
.coupling-note.is-firm{background:var(--success-bg);border-color:var(--success-line);color:var(--success)}

/* ---- controles de estatus de cotización -------------------------------- */
.status-controls{padding:14px 18px;border-top:1px solid var(--line)}
.status-terminal{padding:14px 18px;border-top:1px solid var(--line);color:var(--muted);font-size:.84rem}

/* ===========================================================================
   Feature C · Historial de precios por acabado (una fila por finish + modal)
   Reemplaza el enfoque previo de badges Vigente/Histórico en fila (E11).
   La tabla muestra SOLO la versión vigente por terminación; el nombre del
   acabado es clickeable (cuando hay historial) y abre el modal-lightbox.
   =========================================================================== */

/* ---- Disparador: el nombre del acabado clickeable ---------------------- */
.finish-hist-trigger{
  display:inline-flex;align-items:center;gap:6px;
  font:inherit;color:var(--ink);font-weight:600;
  background:transparent;border:none;padding:2px 0;margin:0;cursor:pointer;
  border-radius:5px;transition:color .16s var(--ease)
}
.finish-hist-trigger .fh-name{text-decoration:underline;text-decoration-color:var(--line-strong);
  text-underline-offset:3px;transition:text-decoration-color .16s var(--ease)}
.finish-hist-trigger .fh-ic{color:var(--muted);flex:none;transition:color .16s var(--ease)}
.finish-hist-trigger .fh-count{font-family:var(--font-mono);font-size:.62rem;font-weight:600;
  line-height:1;color:var(--muted);background:var(--surface-3);border:1px solid var(--line);
  border-radius:100px;padding:2px 6px;min-width:18px;text-align:center}
.finish-hist-trigger:hover{color:var(--sup-a)}
.finish-hist-trigger:hover .fh-name{text-decoration-color:var(--sup-a)}
.finish-hist-trigger:hover .fh-ic{color:var(--sup-a)}
.finish-hist-trigger:focus-visible{outline:2px solid var(--ring);outline-offset:2px}

/* ---- Modal / lightbox -------------------------------------------------- */
body.modal-open{overflow:hidden}
.modal-backdrop{
  position:fixed;inset:0;z-index:70;
  display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(8,20,24,.6);
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  animation:modal-fade .18s var(--ease)
}
.modal-card{
  width:100%;max-width:520px;max-height:min(80vh,640px);
  display:flex;flex-direction:column;overflow:hidden;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);animation:modal-pop .2s var(--ease)
}
.modal-card:focus{outline:none}
.modal-head{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line);background:var(--surface-2)}
.modal-title{font-size:1.02rem;font-weight:700;line-height:1.25;flex:1;min-width:0}
.modal-close{display:grid;place-items:center;width:34px;height:34px;flex:none;
  background:transparent;border:1px solid var(--line);border-radius:var(--radius-sm);
  color:var(--muted);transition:border-color .16s var(--ease),color .16s var(--ease),background .16s var(--ease)}
.modal-close:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-bg)}
.modal-body{padding:6px 0;overflow-y:auto;-webkit-overflow-scrolling:touch}

/* ---- Tabla de historial dentro del modal ------------------------------ */
.hist-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.hist-table{width:100%;border-collapse:separate;border-spacing:0;font-variant-numeric:tabular-nums}
.hist-table thead th{position:sticky;top:0;background:var(--surface-2);z-index:1;
  font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted);
  text-align:left;padding:10px 18px;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.hist-table thead th.n,.hist-table tbody td.n{text-align:right}
.hist-table tbody td{padding:11px 18px;border-bottom:1px solid var(--line);text-align:left;
  white-space:nowrap;color:var(--ink-2)}
.hist-table tbody tr:last-child td{border-bottom:none}
.hist-table tbody td.n{font-family:var(--font-mono);color:var(--ink-2)}
.hist-table tbody tr.is-current td{background:var(--success-bg)}
.hist-table tbody tr.is-current td.n{color:var(--ink)}

/* etiquetas de estado de versión (Vigente / Programado) */
.hist-tag{display:inline-flex;align-items:center;font-family:var(--font-mono);
  font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  padding:3px 8px;border-radius:100px;border:1px solid;white-space:nowrap}
.hist-tag.current{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.hist-tag.scheduled{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}

.hist-empty{padding:34px 24px;text-align:center;color:var(--muted);font-size:.9rem}

@keyframes modal-fade{from{opacity:0}to{opacity:1}}
@keyframes modal-pop{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}}
@media (max-width:560px){
  .modal-backdrop{padding:0;align-items:flex-end}
  .modal-card{max-width:none;max-height:88vh;border-radius:var(--radius) var(--radius) 0 0}
}
@media (prefers-reduced-motion:reduce){
  .modal-backdrop,.modal-card{animation:none}
}

/* ---- responsive de la capa REF-7/8/9/10 -------------------------------- */
@media (max-width:820px){
  .item-fields.li-mat,.item-fields.li-tool{grid-template-columns:1fr 1fr}
  .item-fields .tool-help{grid-column:1/-1;padding-bottom:0}
}
@media (max-width:560px){
  .tracker .tstep{flex-basis:78px}
  .tracker .tstep .lbl{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){
  .tracker .tstep .node{transition:none}
}

/* ===========================================================================
   Co-brand SupplyAlu — footer del shell (identidad operadora + tax IDs)
   =========================================================================== */
.app-foot{max-width:1200px;width:100%;margin:0 auto;
  padding:18px clamp(16px,3vw,28px) 26px;
  display:flex;flex-wrap:wrap;gap:8px 26px;align-items:center;justify-content:space-between;
  border-top:1px solid var(--line);color:var(--muted);font-size:.72rem}
.app-foot .op{font-family:var(--font-disp);letter-spacing:.02em}
.app-foot .op b{color:var(--ink-2);font-weight:600}
.app-foot .ids{font-variant-numeric:tabular-nums;font-family:var(--font-mono);letter-spacing:.02em}
@media (max-width:560px){.app-foot{padding-left:14px;padding-right:14px}}

/* ===========================================================================
   DEC-038 · toggle de disponibilidad por grado (switches, Ajustes admin).
   El editor de premio único de grado quedó RETIRADO (DEC-039): el precio por
   grado se edita en el editor de processing (por acabado × grado). Tokens
   co-brand; tema claro/oscuro heredado por variables.
   =========================================================================== */
/* Toggle de disponibilidad por grado (settings.php #gs-list). */
.grade-toggles{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.grade-toggles li.help{color:var(--muted);font-size:.8rem;padding:6px 0}
.grade-toggle{display:flex;align-items:center;gap:14px;padding:12px 14px;
  border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.grade-toggle .gt-main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0}
.grade-toggle .gt-name{font-family:var(--font-disp);font-weight:600;color:var(--ink);letter-spacing:.01em}
.grade-toggle .gt-meta{font-size:.7rem;color:var(--muted)}
.grade-toggle .gt-state{font-size:.72rem;font-weight:600;min-width:8.5ch;text-align:right}
.grade-toggle .gt-state.is-on{color:var(--success)}
.grade-toggle .gt-state.is-off{color:var(--muted)}

/* Switch accesible: input real (oculto visualmente) + pista/pulgar decorativos. */
.switch{position:relative;display:inline-flex;flex:none;width:44px;height:24px;cursor:pointer}
.switch input{position:absolute;inset:0;margin:0;opacity:0;width:100%;height:100%;cursor:pointer}
.switch .switch-track{position:absolute;inset:0;border-radius:999px;background:var(--line-strong);
  transition:background .16s ease}
.switch .switch-thumb{position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;
  background:var(--surface);box-shadow:var(--shadow-sm);transition:transform .16s ease}
.switch input:checked ~ .switch-track{background:var(--teal)}
.switch input:checked ~ .switch-track .switch-thumb{transform:translateX(20px)}
.switch input:focus-visible ~ .switch-track{outline:2px solid var(--teal);outline-offset:2px}
.switch input:disabled ~ .switch-track{opacity:.55;cursor:progress}
@media (prefers-reduced-motion:reduce){
  .switch .switch-track,.switch .switch-thumb{transition:none}
}

/* ===========================================================================
   DEC-043 / EPIC FUT-1 · Proformas + Clientes + Emisores (PF11–PF13). ADMIN-ONLY.
   Solo tokens existentes (tema claro/oscuro heredado). Prefijo `pf-` para no chocar
   con estilos de cotizaciones/ordenes del suplidor.
   =========================================================================== */
.pf-pad{padding:16px 18px}
.pf-stack{display:flex;flex-direction:column;gap:18px}
.pf-mb{margin:0 0 10px}
.pf-grow{flex:1 1 240px}
.pf-wrap{white-space:normal!important;min-width:160px}
.pf-mono{font-family:var(--font-mono);font-weight:600;letter-spacing:.01em}
.pf-upper{text-transform:uppercase}
.pf-code{display:inline-flex;align-items:center;font-family:var(--font-mono);font-size:.66rem;font-weight:700;
  letter-spacing:.06em;padding:2px 8px;border-radius:100px;color:var(--ink-2);background:var(--surface-3);border:1px solid var(--line)}
.pf-subhead{font-family:var(--font-disp);font-weight:700;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:18px 0 10px}
.pf-subhead:first-child{margin-top:0}
.pf-subhead-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pf-subhead-row .pf-subhead{margin:0}
.pf-subhead-row .spacer{flex:1}
.pf-check{display:inline-flex;align-items:center;gap:8px;font-size:.84rem;color:var(--ink-2);cursor:pointer;min-height:40px}
.pf-check input{width:16px;height:16px;accent-color:var(--teal)}
.pf-toolbar{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:flex-end;padding:14px 18px;border-bottom:1px solid var(--line)}
.pf-toolbar .form-field{min-width:170px}
.pf-internal-tag{display:inline-flex;align-items:center;margin-left:6px;font-family:var(--font-mono);font-size:.58rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:1px 7px;border-radius:100px;vertical-align:middle;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line)}
.dt tbody tr.pf-row-inactive th,.dt tbody tr.pf-row-inactive td{opacity:.62}
.dt tbody tr.pf-row-current{background:var(--teal-pale)}

/* DEC-048 · LC-07 — Costo fabrica · Venta · Margen USD en la lista (solo pinta lo que manda el API admin) */
.pf-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.dt td.pf-margin-cell{color:var(--ink);font-weight:600}
.dt td.pf-fig.pf-neg{color:var(--danger);font-weight:700}
.pf-live{display:inline-flex;align-items:center;margin-left:4px;font-family:var(--font-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:100px;vertical-align:middle;
  color:var(--info);background:var(--info-bg);border:1px solid color-mix(in srgb,var(--info) 30%,transparent)}
.pf-live-dot{display:inline-block;width:6px;height:6px;margin-right:6px;border-radius:50%;vertical-align:middle;
  background:var(--info);box-shadow:0 0 0 2px var(--info-bg)}
.pf-partial{display:inline-flex;align-items:center;margin-left:4px;font-family:var(--font-mono);font-size:.56rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:1px 6px;border-radius:100px;vertical-align:middle;cursor:help;
  color:var(--warn);background:var(--warn-bg);border:1px dashed var(--warn-line)}
.pf-mini-flag{display:inline-grid;place-items:center;width:15px;height:15px;margin-left:3px;border-radius:50%;vertical-align:middle;
  font-family:var(--font-ui);font-size:.62rem;font-weight:800;color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);cursor:help}
/* anuladas y canceladas: cifras apagadas (no son negocio). La fila sigue clicable. */
.dt tbody tr.pf-row-off td.pf-fig{color:var(--muted);font-weight:400;opacity:.55}
.dt tbody tr.pf-row-off .pf-live,.dt tbody tr.pf-row-off .pf-partial,.dt tbody tr.pf-row-off .pf-mini-flag{color:var(--muted);background:transparent;border-color:var(--line-strong)}
.dt tbody tr.pf-row-off .pf-live-dot{background:var(--muted);box-shadow:none}

/* estados de proforma (+ activo/inactivo de clientes/cuentas) */
.status.pf-st-borrador{background:var(--surface-3);color:var(--ink-2);border-color:var(--line-strong)}
.status.pf-st-emitida{background:var(--info-bg);color:var(--info);border-color:color-mix(in srgb,var(--info) 30%,transparent)}
.status.pf-st-aceptada{background:var(--success-bg);color:var(--success);border-color:var(--success-line)}
.status.pf-st-vencida{background:var(--warn-bg);color:var(--warn);border-color:var(--warn-line)}
.status.pf-st-anulada{background:var(--danger-bg);color:var(--danger);border-color:var(--danger-line)}
/* DEC-049 · cancelada = negocio perdido: neutra y discontinua, a proposito distinta de anulada (rojo = documento sin validez) */
.status.pf-st-cancelada{background:transparent;color:var(--muted);border-color:var(--line-strong);border-style:dashed}
.status.pf-st-cancelada .dot{background:transparent;box-shadow:inset 0 0 0 1.5px currentColor}

/* creacion desde cotizacion */
.pf-create{margin-bottom:20px}
.pf-summary{cursor:pointer;padding:14px 18px;font-family:var(--font-disp);font-weight:700;list-style:none;display:flex;align-items:center;gap:10px}
.pf-summary::-webkit-details-marker{display:none}
.pf-create[open] .pf-summary{border-bottom:1px solid var(--line)}
.pf-summary:focus-visible{outline:2px solid var(--ring);outline-offset:-2px;border-radius:var(--radius)}

/* ---- editor ---- */
.pf-doc{overflow:visible}
.pf-doc .dh{position:sticky;top:0;z-index:var(--z-sticky);border-radius:var(--radius) var(--radius) 0 0}
.pf-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pf-actions .btn.is-busy{opacity:.6;pointer-events:none}
.btn.pf-danger-ghost{background:transparent;color:var(--danger);border-color:var(--danger-line)}
.btn.pf-danger-ghost:hover{background:var(--danger-bg);border-color:var(--danger)}
.pf-dirty{font-family:var(--font-mono);font-size:.64rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  color:var(--warn);background:var(--warn-bg);border:1px solid var(--warn-line);padding:3px 9px;border-radius:100px}
.pf-banners{display:flex;flex-direction:column;gap:10px;padding-bottom:0}
.pf-annul{border:1px solid var(--danger-line);background:var(--danger-bg);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pf-annul[hidden]{display:none}
/* DEC-049 · LC-09 — cancelar negocio (ambar, reversible) vs anular (rojo, definitivo): ejes distintos a la vista */
.pf-cancel-box{border:1px dashed var(--warn-line);background:var(--warn-bg);border-radius:var(--radius-sm);padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.pf-cancel-box[hidden]{display:none}
.pf-cancel-box .form-field > label{color:var(--warn)}
.btn.pf-cancel-ghost{background:transparent;color:var(--warn);border-color:var(--warn-line)}
.btn.pf-cancel-ghost:hover{background:var(--warn-bg);border-color:var(--warn)}
.btn.pf-cancel-solid{background:var(--warn);color:var(--surface);border-color:var(--warn)}
.btn.pf-cancel-solid:hover{filter:brightness(.94);box-shadow:var(--shadow-md)}
.pf-statebox .btn.is-busy{opacity:.6;pointer-events:none}
.banner.pf-ro-cancelled{background:var(--surface-2);border-color:var(--line-strong);border-style:dashed;color:var(--ink-2)}
.banner.pf-ro-cancelled .body{color:inherit;overflow-wrap:anywhere}
/* DEC-050 · CC-11 — informe de "Rellenar codigos desde la cotizacion" + campos recien rellenados */
.banner.pf-fill-report .body{min-width:0;overflow-wrap:anywhere}
.banner.pf-fill-report .pf-fill-sub{margin:8px 0 0;font-size:.82rem}
.banner.pf-fill-report .pf-fill-sub:last-child{opacity:.85}
.pf-line .control.pf-filled{border-color:var(--success);box-shadow:0 0 0 3px var(--success-bg)}
.pf-add{display:flex;gap:8px;flex-wrap:wrap}
.pf-lines-wrap{border-top:1px solid var(--line)}
.pf-lines{display:flex;flex-direction:column;gap:12px;margin-top:12px}
.pf-empty-lines{padding:18px;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius-sm)}
.pf-line{border:1px solid var(--line);border-left:3px solid var(--line-strong);border-radius:var(--radius-sm);background:var(--surface-2);
  padding:10px 14px 12px;transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.pf-line-material{border-left-color:var(--teal)}
.pf-line-tooling{border-left-color:var(--blue)}
.pf-line-charge{border-left-color:var(--amber)}
.pf-line.has-error{border-color:var(--danger-line);box-shadow:0 0 0 3px var(--danger-bg)}
.pf-line-head{display:flex;align-items:center;gap:8px;margin-bottom:8px;min-height:32px}
.pf-line-head .spacer{flex:1}
.pf-line-n{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--surface-3);
  font-family:var(--font-mono);font-size:.72rem;font-weight:700;color:var(--ink-2)}
.pf-type-tag{font-family:var(--font-mono);font-size:.6rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  padding:2px 8px;border-radius:100px;border:1px solid}
.pf-type-material{color:var(--teal-ink);background:var(--teal-pale);border-color:color-mix(in srgb,var(--teal) 30%,transparent)}
.pf-type-tooling{color:var(--blue-ink);background:var(--caoba-pale);border-color:color-mix(in srgb,var(--blue) 30%,transparent)}
.pf-type-charge{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.pf-line-title{font-family:var(--font-mono);font-size:.82rem;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.pf-icon-btn{display:grid;place-items:center;width:32px;height:32px;padding:0;background:transparent;border:1px solid var(--line-strong);
  border-radius:var(--radius-sm);color:var(--muted);transition:border-color .16s var(--ease),color .16s var(--ease)}
.pf-icon-btn svg{width:16px;height:16px}
.pf-icon-btn:hover:not([disabled]){border-color:var(--teal);color:var(--teal)}
.pf-icon-btn.danger:hover:not([disabled]){border-color:var(--danger);color:var(--danger)}
.pf-icon-btn[disabled]{opacity:.35;cursor:not-allowed}
.pf-line-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 12px}
.pf-line-grid .form-field > label{font-size:.64rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted)}
.pf-line-grid .control{height:38px;font-size:.86rem}
.pf-line-calc{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:flex-end;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-strong)}
.pf-line-calc.is-stale .pf-kv .v,.pf-totals.is-stale .t .v{opacity:.45;text-decoration:line-through;text-decoration-color:var(--line-strong)}
.pf-kv{display:flex;flex-direction:column;gap:1px}
.pf-kv .k{font-size:.6rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pf-kv .v{font-family:var(--font-mono);font-size:.88rem;color:var(--ink-2)}
.pf-kv .v small{font-size:.66rem;color:var(--muted)}
.pf-kv.strong .v{color:var(--ink);font-weight:700}
.pf-flags{display:flex;gap:6px;flex-wrap:wrap;flex-basis:100%}
.pf-flag{font-size:.7rem;font-weight:600;padding:2px 8px;border-radius:100px;border:1px solid}
.pf-flag.warn{color:var(--warn);background:var(--warn-bg);border-color:var(--warn-line)}
.pf-flag.danger{color:var(--danger);background:var(--danger-bg);border-color:var(--danger-line)}
.pf-line-calc .field-error{flex-basis:100%}
.pf-totals .field-error{flex-basis:100%;justify-content:flex-end}
.pf-incomplete{padding:0 18px 12px;text-align:right;margin:0;background:var(--surface-2)}

/* bloque INTERNO (colapsado por defecto) */
.pf-internal{border:1px dashed var(--warn-line);border-radius:var(--radius-sm);background:var(--surface)}
.pf-internal > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;padding:10px 14px;
  font-family:var(--font-disp);font-weight:700;font-size:.86rem;color:var(--ink-2)}
.pf-internal > summary::-webkit-details-marker{display:none}
.pf-internal > summary svg{width:16px;height:16px;color:var(--warn)}
.pf-internal > summary:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.pf-internal-body{padding:0 14px 14px;display:flex;flex-direction:column;gap:10px}
.pf-internal-body .doc-meta{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.pf-internal-table{min-width:1040px}
/* migration-028 · precio unitario manual */
.pf-price-field .pf-price-state{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.pf-price-field .pf-price-state[hidden]{display:none}
.pf-flag.info{color:var(--ink-2);background:var(--surface-2);border-color:var(--line-strong)}
.pf-link-btn{background:none;border:0;padding:0;font:inherit;font-size:.72rem;font-weight:600;color:var(--accent,var(--ink-2));text-decoration:underline;cursor:pointer}
.pf-link-btn:focus-visible{outline:2px solid var(--ring);outline-offset:2px}
.pf-internal > summary .pf-flag{margin-left:auto}
.pf-internal-table tr.pf-below-cost td{background:var(--danger-bg)}
.pf-internal-table .pf-neg{color:var(--danger);font-weight:700}
/* DEC-045.5 · totales de margen de la orden (dentro del bloque interno; jamas en el documento).
   Presentacion: UN numero prominente (cuanto se gana en USD) + desglose secundario discreto. */
.pf-internal-body .pf-margin-head{margin:2px 0 0}
.pf-margin-box{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);overflow:hidden}
.pf-margin-box.is-partial{border-color:var(--warn-line)}
.pf-margin-hero{padding:14px 18px;text-align:right}
.pf-margin-hero .k{font-size:.64rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.pf-margin-amount{font-family:var(--font-mono);font-size:2.1rem;line-height:1.15;font-weight:700;color:var(--sup-a)}
.pf-margin-hero.is-neg .pf-margin-amount{color:var(--danger)}
.pf-margin-sub{font-family:var(--font-mono);font-size:.84rem;font-weight:600;color:var(--ink-2);margin-top:2px}
.pf-margin-hero.is-neg .pf-margin-sub{color:var(--danger)}
.pf-margin-subk{font-family:var(--font-ui);font-size:.64rem;font-weight:600;letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted)}
.pf-internal-body .pf-margin-totals{margin:0}
.pf-margin-breakdown{gap:10px 20px;padding:8px 18px 10px;background:var(--surface-2)}
.pf-margin-breakdown .t .k{font-size:.6rem}
.pf-margin-breakdown .t .v{font-size:.84rem;font-weight:600;color:var(--ink-2)}
.pf-margin-theo{margin:0;padding:0 18px 12px;text-align:right;font-size:.76rem;background:var(--surface-2)}
.pf-margin-totals .pf-neg{color:var(--danger);font-weight:700}
@media (max-width:640px){.pf-margin-amount{font-size:1.7rem}}
/* DEC-044 · CL08 · panel "Link del cliente" (solo proformas no-borrador) */
.pf-link-pad{padding-bottom:0}
.pf-link{border:1px solid var(--line);border-left:3px solid var(--teal);border-radius:var(--radius-sm);background:var(--surface)}
.pf-link[aria-busy="true"] .pf-link-actions .btn{opacity:.6;pointer-events:none}
.pf-link-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:10px 14px;border-bottom:1px solid var(--line)}
.pf-link-head > svg{width:16px;height:16px;color:var(--teal);flex:none}
.pf-link-head h4{margin:0;font-family:var(--font-disp);font-weight:700;font-size:.9rem;color:var(--ink)}
.pf-link-head h4:focus{outline:none}
.pf-link-head .spacer{flex:1}
.pf-link-actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end}
.pf-link-body{padding:10px 14px 14px;display:flex;flex-direction:column;gap:10px}
.pf-link-body .help{margin:0}
.pf-link-reason{margin:0;font-size:.84rem;color:var(--ink-2)}
.pf-link-url-row{display:flex;gap:8px;align-items:center}
.pf-link-url-row .control{flex:1 1 auto;min-width:0;height:36px;font-size:.8rem}
.pf-link-meta{border:1px solid var(--line);border-radius:var(--radius-sm);overflow:hidden}
.pf-link-meta .m .v small{font-family:var(--font-ui);font-size:.72rem;color:var(--muted)}
.pf-link-accesses{display:flex;flex-direction:column;gap:6px}
.pf-link-accesses .pf-subhead{margin:4px 0 0}
.pf-link-acc{min-width:560px}
.pf-link-acc .pf-flag.ok{color:var(--success);background:var(--success-bg);border-color:var(--success-line)}
@media (max-width:640px){
  .pf-link-actions{justify-content:flex-start;width:100%}
  .pf-link-url-row{flex-wrap:wrap}
}

/* ---- emisores (Ajustes) ---- */
.pf-issuer .panel-head{flex-wrap:wrap}
.pf-issuer .panel-head .tag{font-size:.74rem}
.pf-assets{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.pf-asset{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2);padding:12px;display:flex;flex-direction:column;gap:8px}
.pf-asset.is-busy{opacity:.6;pointer-events:none}
.pf-asset-head{display:flex;align-items:baseline;gap:8px;justify-content:space-between}
.pf-asset-frame{display:grid;place-items:center;height:130px;border-radius:var(--radius-sm);
  background:repeating-conic-gradient(var(--surface-3) 0 25%,var(--surface) 0 50%) 50%/16px 16px;border:1px solid var(--line)}
.pf-asset-img{max-width:92%;max-height:116px;object-fit:contain}
.pf-asset-empty{font-size:.78rem;color:var(--muted);text-align:center;padding:0 12px}
.pf-asset .form-actions:has(input[type="file"]:focus-visible) .pf-file-btn{outline:2px solid var(--ring);outline-offset:2px}
.pf-file-btn{cursor:pointer}
.pf-acc-list{display:flex;flex-direction:column;gap:8px;margin-bottom:8px}
.pf-acc{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface-2)}
.pf-acc > summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:10px 14px;min-height:44px}
.pf-acc > summary::-webkit-details-marker{display:none}
.pf-acc > summary::before{content:"";width:8px;height:8px;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(-45deg);transition:transform .16s var(--ease);flex:none}
.pf-acc[open] > summary::before{transform:rotate(45deg)}
.pf-acc > summary:focus-visible{outline:2px solid var(--ring);outline-offset:-2px}
.pf-acc-bank{font-weight:600;color:var(--ink)}
.pf-acc-meta{font-family:var(--font-mono);font-size:.76rem;color:var(--muted)}
.pf-acc-body{padding:4px 14px 14px;border-top:1px solid var(--line)}
.pf-acc-new{border-style:dashed}
.pf-acc-new > summary .pf-acc-bank{color:var(--teal)}

@media (max-width:640px){
  .pf-doc .dh{position:static}
  .pf-actions{justify-content:flex-start}
  .pf-line-grid{grid-template-columns:1fr 1fr}
}
@media (prefers-reduced-motion:reduce){
  .pf-line,.pf-icon-btn,.pf-acc > summary::before{transition:none}
}