/* SyntaxFlow Compras y Familia — shared styles (px-base).
   ===========================================================================
   Loaded after base.css and sf.css by the Compras and Familia pages. It uses
   their tokens (--surface, --ink, --rule, --pass, --fail, --warn…) and those
   of px-tokens.css (the product colours), and adds what is built on them.

   The two product colours, and why they are these, are in px-tokens.css,
   the only file that writes them; every page loads it before this one
   (13-10-2026: the home and the landings were drawing with their own
   fallbacks, a teal and another berry, so the same product had three colours
   across the site).
   =========================================================================== */
:root{
  --px-compras-tint:color-mix(in srgb,var(--px-compras) 10%,var(--surface,#fff));
  --px-familia-tint:color-mix(in srgb,var(--px-familia) 10%,var(--surface,#fff));
  /* the colour of the product on this page; neutral until data-px says which */
  --px:var(--glass,#0B7A68); --px-ink:#FFFFFF; --px-tint:var(--glass-tint,#D5EBE5);
}
@media (prefers-color-scheme: dark){
  :root{ --px-ink:#0E1316; }
}
[data-px="compras"]{ --px:var(--px-compras); --px-ink:var(--px-compras-ink); --px-tint:var(--px-compras-tint); }
[data-px="familia"]{ --px:var(--px-familia); --px-ink:var(--px-familia-ink); --px-tint:var(--px-familia-tint); }

/* ---------- the opening band of an app page, in its product's colour ----------
   The apps are written on the documents' frame (tools/build-app-pages.cjs puts
   data-area="docs" on <body>), whose band is drafting-ink indigo (base.css).
   On a page that holds a Compras or Familia app the band takes the product's
   deep colour instead, in both themes, like the landings, and the world
   accents of the page (--wd, --wt: the spines of the headings, tables, focus)
   take the product colour too. White on the deep colours is 7.86:1 and
   6.78:1; the lead at 92 % white stays above 6:1 and 5.4:1. */
body[data-area]:has(.sf-app[data-px="compras"]){ --pxb:var(--px-compras-deep); --wd:var(--px-compras); --wt:var(--px-compras-tint); }
body[data-area]:has(.sf-app[data-px="familia"]){ --pxb:var(--px-familia-deep); --wd:var(--px-familia); --wt:var(--px-familia-tint); }
body[data-area]:has(.sf-app[data-px]){ --wb:var(--pxb); --wbi:#FFFFFF; --wbi2:rgba(255,255,255,.92); --wba:#FFFFFF; --wimg:none; }

.btn.px-primary{ background:var(--px); border-color:var(--px); color:var(--px-ink); font-weight:640; }
.btn.px-primary:hover{ background:color-mix(in srgb,var(--px) 86%,var(--ink)); border-color:color-mix(in srgb,var(--px) 86%,var(--ink)); color:var(--px-ink); }

.px-icon{ flex:none; width:20px; height:20px; }

/* ---------- where it happens ---------- */
.px-badge{ display:inline-flex; align-items:center; gap:6px; flex-wrap:wrap; padding:3px 10px 3px 8px; border-radius:var(--r-pill,999px);
  border:1px solid; font-size:.84rem; font-weight:600; line-height:1.35; max-width:100%; }
.px-badge .px-icon{ width:16px; height:16px; }
.px-badge-why{ flex-basis:100%; font-weight:450; color:var(--ink-2); padding-left:22px; }
.px-badge--local   { color:var(--glass-deep); background:var(--glass-tint); border-color:color-mix(in srgb,var(--glass) 45%,var(--rule)); }
.px-badge--server  { color:var(--alu);        background:var(--alu-tint);   border-color:color-mix(in srgb,var(--alu) 45%,var(--rule)); }
.px-badge--external{ color:var(--wool);       background:var(--wool-tint);  border-color:color-mix(in srgb,var(--wool) 45%,var(--rule)); }
.px-badge--sync    { color:var(--steel);      background:var(--steel-tint); border-color:color-mix(in srgb,var(--steel) 45%,var(--rule)); }

/* ---------- the mandatory states ---------- */
.px-state{ --c:var(--ink-3); display:flex; gap:12px; align-items:flex-start; padding:14px 16px; margin:12px 0;
  border:1px solid color-mix(in srgb,var(--c) 35%,var(--rule)); border-left:4px solid var(--c); border-radius:10px;
  background:color-mix(in srgb,var(--c) 6%,var(--surface)); color:var(--ink); }
.px-state > .px-icon{ color:var(--c); margin-top:2px; }
.px-state-body{ min-width:0; flex:1; }
.px-state-title{ margin:0; font-weight:640; color:var(--ink); }
.px-state-text{ margin:4px 0 0; color:var(--ink-2); font-size:.95rem; line-height:1.5; }
.px-state-acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.px-state--empty       { --c:var(--ink-3); border-style:dashed; border-left-style:solid; background:var(--surface); }
.px-state--example     { --c:var(--px); background:var(--px-tint); }
.px-state--loading     { --c:var(--ink-3); }
.px-state--success     { --c:var(--pass); }
.px-state--recoverable { --c:var(--warn); }
.px-state--permanent   { --c:var(--fail); }
.px-state--forbidden   { --c:var(--fail); }
.px-state--quota       { --c:var(--warn); }
.px-state--unconfigured{ --c:var(--steel); }
.px-state--expired     { --c:var(--warn); }
.px-state--offline     { --c:var(--steel); }
.px-state--conflict    { --c:var(--warn); }
.px-spin{ animation:px-spin 1s linear infinite; }
@keyframes px-spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .px-spin{ animation:none; } }

/* ---------- review states ---------- */
.px-chip{ --c:var(--ink-2); display:inline-flex; align-items:center; gap:5px; padding:2px 9px 2px 6px; border-radius:var(--r-pill,999px);
  font-size:.82rem; font-weight:600; line-height:1.4; color:var(--c); border:1px solid color-mix(in srgb,var(--c) 45%,var(--rule));
  background:color-mix(in srgb,var(--c) 9%,var(--surface)); }
.px-chip .px-icon{ width:15px; height:15px; }
.px-chip--confirmed{ --c:var(--pass); }
.px-chip--edited   { --c:var(--alu); }
.px-chip--extracted{ --c:var(--warn); }
.px-chip--conflict { --c:var(--fail); }
.px-chip--rejected { --c:var(--ink-3); }
.px-chip--rejected span{ text-decoration:line-through; }

/* ---------- source of a value ---------- */
.px-source{ font-size:.92rem; color:var(--ink-2); }
.px-source-where{ display:flex; align-items:center; gap:6px; margin:0; font-weight:560; color:var(--ink); }
.px-source-where .px-icon{ width:16px; height:16px; color:var(--ink-3); }
.px-source-snippet{ margin:6px 0 0; padding:6px 10px; border-left:3px solid var(--px); background:var(--surface-2); color:var(--ink);
  white-space:pre-wrap; overflow-wrap:anywhere; font-size:.92rem; }
.px-source-by{ margin:4px 0 0; font-size:.82rem; color:var(--ink-3); }

/* ---------- documents ---------- */
.px-docs{ list-style:none; margin:12px 0; padding:0; display:grid; gap:10px; }
.px-doc{ padding:12px 14px; border:1px solid var(--rule); border-radius:10px; background:var(--surface); min-width:0; }
.px-doc p{ margin:0; }
.px-doc-name{ display:flex; gap:8px; align-items:center; font-weight:620; color:var(--ink); overflow-wrap:anywhere; }
.px-doc-name .px-icon{ color:var(--ink-3); }
.px-doc-meta{ margin-top:4px !important; font-size:.9rem; color:var(--ink-2); }
.px-doc-hash{ margin-top:2px !important; font-size:.82rem; color:var(--ink-3); }
.px-doc-hash code{ font-family:var(--mono); font-size:.82rem; color:var(--ink-2); }
.px-doc-status{ display:flex; gap:6px; align-items:flex-start; margin-top:8px !important; font-size:.92rem; color:var(--ink-2); }
.px-doc-status .px-icon{ width:18px; height:18px; margin-top:1px; }
.px-doc--text-ready .px-doc-status .px-icon{ color:var(--pass); }
.px-doc--no-text .px-doc-status .px-icon{ color:var(--warn); }
.px-doc--rejected{ border-color:color-mix(in srgb,var(--fail) 40%,var(--rule)); }
.px-doc--rejected .px-doc-status .px-icon{ color:var(--fail); }
.px-doc--duplicate .px-doc-status .px-icon{ color:var(--alu); }
.px-doc .btn{ margin-top:10px; margin-right:6px; }

.px-drop{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 14px; padding:18px 16px; border:2px dashed var(--rule-2);
  border-radius:12px; background:var(--surface); }
.px-drop.over{ border-color:var(--px); background:var(--px-tint); }
.px-drop-title{ margin:0; font-weight:600; color:var(--ink); }
.px-drop-hint{ flex-basis:100%; margin:0; font-size:.88rem; color:var(--ink-3); }

@media print{ .px-drop, .px-state-acts, .px-doc .btn{ display:none !important; } }