/* ═══════════════════════════════════════════════════════════════════════════
   R10 · Compras · Logística · Vista Cliente — oficio visual (P3, oleada W2)
   ---------------------------------------------------------------------------
   Contrato consumido: redesign-plan/r10-audit/S1-contract.md (.r10-sheet,
   .r10-table, .r10-section-title, tokens --r10-*, tinta --ink/--ink-soft/
   --ink-faint sobre --surface/--surface-2 — AA garantizado en claro Y oscuro
   sin contraparte body.light: desde R12 los tokens VOLTEAN de valor con el
   tema, así que el par superficie/tinta se sostiene solo). Se carga tras
   css/r10-system.css (el <link> lo puso S2).

   Alcance: SOLO las clases que emiten js/ui.js (Compras/Logística),
   js/ext-review-docs.js (contexto de pack + copiar lista) y
   js/ext-review-client.js (previsualización «lo que verá el cliente»).
   Estas clases (.shop-*, .log-*, .rev-*, .cv-*) no las usa ningún otro
   fichero — restilarlas aquí no toca las tablas .ctable de resultados,
   dashboard, mobiliario, etc. (results.js/dashboard.js/ext-day-items.js,
   fuera de mi alcance).

   Por qué hacen falta contrapartidas body.light explícitas: las reglas
   legacy de css/styles.css (línea ~990 y ~1120, ~1580, ~1648) fijan
   box-shadow/background/border-color de .shop-provider/.log-phase/
   .shop-grand con selectores «body.light .clase» → especificidad (0,2,0),
   más alta que ".clase" sola (0,1,0). Sin esa contrapartida, esta hoja
   (que carga DESPUÉS de styles.css) perdería el pulso en tema claro. Los
   valores en ambos casos son los MISMOS tokens de papel (estables entre
   temas) — no es un tema "claro" distinto, es neutralizar el override viejo.

   Cero cambios de negocio: solo presentación. Ver P3-report.md para los
   ratios de contraste medidos antes/después.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── COMPRAS · la tabla de trabajo real ──────────────────────────────────── */

/* Cada proveedor es un grupo sobre papel: cabecera en el "pozo" (--surface-2,
   igual convención que la cabecera sticky de .r10-table), cuerpo en papel
   pleno (--surface) para que la tabla cumpla la exigencia del contrato
   ("vive SOBRE PAPEL"). Sin sombra anidada (la hoja .r10-sheet ya eleva). */
.shop-provider{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:none;
  margin-bottom:var(--sp-4);
}
body.light .shop-provider{
  background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:none;
}
.shop-prov-head:hover{
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.shop-prov-name{ color:var(--ink); }
.shop-prov-total{
  color:var(--gold-on-surface);
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}
.shop-prov-body{
  background:var(--surface);
  border-top:1px solid var(--line);
  padding:0 var(--sp-4) var(--sp-3);
}

/* Contenedor de scroll que exige la primitiva .r10-table para que la cabecera
   sticky tenga sentido en proveedores con muchas líneas. Acotado (no la
   página entera) para no competir con la topbar/tab-bar, también sticky. */
.r10-table-scroll{
  max-height:44vh;
  overflow-y:auto;
  margin-top:var(--sp-2);
  border-radius:var(--r-xs);
}
.shop-table{ background:var(--surface); }
.shop-table .marca{ font-weight:500; color:var(--ink); }
.shop-table .qty{ color:var(--ink); font-weight:500; }
.shop-table .uprice{ color:var(--ink-soft); font-size:var(--t-2xs); }
.shop-table .cost{ color:var(--gold-on-surface); font-weight:600; }
.shop-table .shop-days{
  font-size:var(--t-2xs);
  color:var(--ink-faint);
  white-space:nowrap;
}

/* Fila comprada (marcada por ext-review-docs.js): el tachado + opacidad ya
   funcionan sobre cualquier tinta; solo homogeneizamos el hover de fila. */
#compras-content .shop-provider tbody tr:hover{
  background:color-mix(in srgb, var(--ink) 3%, transparent);
}

/* Total general: cierre editorial sobre papel, acento oro-sobre-papel, sin
   glow ni gradiente (bans DESIGN.md) — un hairline dorado como firma. */
.shop-grand{
  background:var(--surface-2);
  border:none;
  border-top:2px solid var(--gold-on-surface);
  border-radius:var(--r-sm);
  box-shadow:none;
}
body.light .shop-grand{
  background:var(--surface-2);
  border:none;
  border-top:2px solid var(--gold-on-surface);
  box-shadow:none;
}
.shop-grand-label{ color:var(--ink-soft); }
body.light .shop-grand-label{ color:var(--ink-soft); }
.shop-grand-total{
  color:var(--gold-on-surface);
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}
body.light .shop-grand-total{ color:var(--gold-on-surface); }

/* ── LOGÍSTICA · misma pasada de oficio (jerarquía + aire, no cajas) ──────── */
.log-phase{
  background:var(--surface-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:none;
  margin-bottom:var(--sp-4);
}
body.light .log-phase{
  background:var(--surface-2);
  border:1px solid var(--line);
  box-shadow:none;
}
.log-phase-head:hover{
  background:color-mix(in srgb, var(--ink) 4%, transparent);
}
.log-phase-title{ color:var(--ink); }
.log-phase-icon{ color:var(--gold-on-surface); }
.log-phase-body{
  background:var(--surface);
  border-top:1px solid var(--line);
}
/* Rótulo de categoría de Logística: es un eyebrow de SECCIÓN («Pedidos a
   proveedores», «Equipo y material»…) → fuera el uppercase (ban DESIGN.md,
   C1 m1). Frase normal, tinta oro-sobre-papel. */
.log-cat-title{ color:var(--gold-on-surface); text-transform:none; letter-spacing:normal; }
.log-cat-title .bbp-icon{ color:var(--gold-on-surface); }
.log-item{
  color:var(--ink-soft);
  border-bottom-color:var(--line);
}
.log-item input[type=checkbox]{ accent-color:var(--gold-on-surface); }
.log-item.checked{ color:var(--ink-faint); }

/* ── CONTEXTO DE PACK (rev-context, ext-review-docs.js) sobre papel ───────── */
.rev-context{
  background:var(--surface-2);
  border:1px solid var(--line);
  color:var(--ink-soft);
}
.rev-context-txt strong{ color:var(--gold-on-surface); }

/* ── VISTA CLIENTE · marcada como EXTERNA a golpe de vista ────────────────── */
/* Flag de cabecera: icono ojo + rótulo en frase normal (NO uppercase — no es
   un eyebrow de sección, es un aviso de procedencia) + regla punteada que
   deliberadamente NO usa el mismo lenguaje que .r10-section-title, para que
   se lea como "esto viene de fuera del panel del operador". */
.cv-external-flag{
  display:flex;
  align-items:center;
  gap:var(--sp-2);
  padding-bottom:var(--sp-3);
  margin-bottom:var(--sp-4);
  border-bottom:1px dashed var(--line-strong);
  color:var(--gold-on-surface);
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-sm);
}
.cv-external-ic{ display:inline-flex; line-height:0; flex-shrink:0; }
.cv-external-ic:empty{ display:none; }

.cv-note{
  color:var(--ink-soft);
  background:var(--surface-2);
  border:1px solid var(--line);
}
.cv-note strong{ color:var(--gold-on-surface); }
.cv-hero-name{ color:var(--ink); }
.cv-hero-meta{ color:var(--ink-soft); }
.cv-pack{
  background:var(--surface-2);
  border:1px solid var(--line);
}
.cv-pack-name{ color:var(--gold-on-surface); }
.cv-pack-price{ color:var(--ink); }
.cv-pack-pax{ color:var(--ink-soft); }
.cv-sec-t{ color:var(--gold-on-surface); }
.cv-cock{
  background:var(--surface-2);
  color:var(--ink-soft);
  border:1px solid var(--line);
}
.cv-extra{ color:var(--ink-soft); }

/* ── REVISIÓN · tira fina de guardarraíl (C1 Crítico · degrada el hero-metric) ─
   El #review-header era una banda OSCURA de 3 tarjetas hero (TOTAL/€/pax/margen)
   arriba-izquierda: el ojo aterrizaba ahí y NO en el precio héroe Fraunces del
   comparador (que quedaba bajo el pliegue). Es literalmente el `hero-metric
   template` + `card-grids idénticas` que DESIGN.md prohíbe. Aquí se degrada a una
   TIRA fina sobre papel que conserva su función real de R5 —salud del margen +
   floor— pero SIN robar el momento display: los números van en tratamiento quiet,
   jamás grandes. Así, al entrar en «Proponer», el único número grande es el
   Fraunces del pack propuesto, sobre el pliegue.
   Solo presentación: se conservan los nodos .rev-hd-* que leen los specs
   (rev-hd-pack, rev-hd-kpi.rev-hd-{ok,warn,danger}, textos «Revisión/Total/
   €/pax/Margen de contribución»). Carga tras styles.css → estos overrides ganan
   por orden de cascada a igual especificidad. */
.review-header{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2) var(--sp-5);
  margin:0 0 var(--sp-4);
  padding:var(--sp-2) var(--sp-4);
  background:var(--surface-2);         /* pozo de la superficie del tema (no la banda --bg2) */
  color:var(--ink);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
}
.review-header .rev-hd-lead{ margin:0; gap:var(--sp-2); align-items:baseline; }
/* «Revisión»: eyebrow de SECCIÓN → sin uppercase (ban, C1 m1); oro-sobre-papel AA. */
.review-header .rev-hd-eyebrow{
  font-size:var(--t-xs);
  letter-spacing:normal;
  text-transform:none;
  color:var(--gold-on-surface);
}
/* Nombre del pack: dato callado en Archivo (la display font queda SOLO en el héroe). */
.review-header .rev-hd-pack{
  font-family:var(--sans);
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink);
}
/* Las tres métricas dejan de ser una parrilla de tarjetas: fila inline, aire, sin cajas. */
.review-header .rev-hd-kpis{
  display:flex;
  flex-wrap:wrap;
  align-items:baseline;
  gap:var(--sp-2) var(--sp-4);
}
.review-header .rev-hd-kpi,
.review-header .rev-hd-kpi.rev-hd-ok,
.review-header .rev-hd-kpi.rev-hd-warn,
.review-header .rev-hd-kpi.rev-hd-danger{
  display:flex;
  align-items:baseline;
  gap:5px;
  padding:0;
  border-radius:0;
  background:none;             /* fuera las cajas hero (incl. el tinte de salud de fondo) */
}
/* Micro-etiqueta de dato de una cifra (frontera): se deja como está, NO es eyebrow de sección. */
.review-header .rev-hd-k{ margin:0; font-size:var(--t-2xs); color:var(--ink-faint); }
/* Valor en tratamiento QUIET: nunca display. */
.review-header .rev-hd-v{
  font-family:var(--sans);
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink);
}
.review-header .rev-hd-note{ margin:0; font-size:var(--t-xs); font-weight:600; }
/* Salud del margen (información de negocio de R5, NO decorativa): conservada AA
   sobre papel — color en el valor Y en la nota, tonos profundos estables entre
   temas (mismos que usa el comparador). Reemplaza al tinte de tarjeta suprimido. */
.review-header .rev-hd-kpi.rev-hd-ok     .rev-hd-v,
.review-header .rev-hd-kpi.rev-hd-ok     .rev-hd-note{ color:var(--ok-on-surface); }
.review-header .rev-hd-kpi.rev-hd-warn   .rev-hd-v,
.review-header .rev-hd-kpi.rev-hd-warn   .rev-hd-note{ color:var(--gold-on-surface); }
.review-header .rev-hd-kpi.rev-hd-danger .rev-hd-v,
.review-header .rev-hd-kpi.rev-hd-danger .rev-hd-note{ color:var(--danger-on-surface); }
/* Floor: guardarraíl real, línea fina de aviso (no tarjeta), AA sobre papel. */
.review-header .rev-hd-floor{
  flex-basis:100%;
  margin:0;
  padding:var(--sp-1) 0 0;
  background:none;
  border:none;
  border-radius:0;
  font-size:var(--t-xs);
  font-weight:600;
  color:var(--danger-on-surface);
}
.review-header .rev-hd-empty{ color:var(--ink-soft); }

/* ── RESUMEN · el dashboard del presupuesto llevado a papel (M3 · oleada W4b) ──
   Compras/Logística/Cliente ya son papel; «Resumen» seguía siendo el dashboard
   legacy sobre lienzo oscuro: fila de 6 KPIs de colores (hero-metric template,
   ban), paneles oscuros densos (card-grids idénticas, ban) y eyebrows de sección
   en mayúsculas (ban) — la costura de autor más visible de «Proponer».
   Aquí se lleva al MISMO oficio que sus hermanas, SOLO por CSS (patrón de F2 con
   #review-header): hoja de papel, jerarquía de 3 niveles, números tabulares, aire
   en vez de cajas. Todo scoped a #dashboard-content → NO toca las clases .dash,
   .ctable ni .gr de otras pantallas (Control, Resultados sobre lienzo oscuro).
   Los selectores llevan el id #dashboard-content (0,1,1,0) → ganan por
   especificidad a TODAS las reglas legacy de styles.css, incluidas las body.light
   (0,0,3,0). Los tokens de papel (--surface, --ink, --gold-deep) son estables entre
   temas → una sola regla sirve claro y oscuro (AA garantizado, ver F5-report.md).
   NINGÚN número, porcentaje ni agrupación cambia: es puro tratamiento visual.
   dashboard.js solo recibió swaps de token de color inline (--text*→--ink*,
   --gold→--gold-deep) que no pueden alcanzarse limpiamente por CSS. */

/* La hoja: #dashboard-content deja el lienzo oscuro y flota como papel elevado
   dentro de #tab-dashboard (.tab-content, 22px de padding → margen contra el
   borde), misma primitiva que Compras (.r10-sheet--wide). */
#dashboard-content{
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--r3);
  box-shadow:var(--shadow-lg);
  padding:var(--r10-sheet-pad-y) var(--r10-sheet-pad-x);
}

/* Nivel 1 — «Resumen — <cliente>» como título de sección: Fraunces + regla
   dorada, igual que el <h2 class="r10-section-title"> de Compras. */
#dashboard-content .dash-heading{
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:var(--t-xl);
  line-height:1.15;
  letter-spacing:-.01em;
  color:var(--ink);
  position:relative;
  padding-bottom:var(--sp-2);
  margin-bottom:var(--sp-6);
}
#dashboard-content .dash-heading::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:40px;height:1px;
  background:var(--gold-line);
  opacity:.6;
}

/* La fila de KPIs deja de ser la parrilla hero de colores (hero-metric template,
   ban): se degrada a una tira-resumen callada sobre papel. Valores en tinta
   (NUNCA coloreados → no introduce un segundo momento display; el único número
   grande de «Proponer» sigue siendo el precio héroe del comparador), etiquetas
   apagadas, cifras tabulares; una regla fina la separa del detalle (rule, no
   caja). Los puntos de color de identificación desaparecen (parte del look hero). */
#dashboard-content .dash-kpi-row{
  gap:var(--sp-5);
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-6);
  border-bottom:1px solid var(--line);
}
#dashboard-content .dash-kpi-value{
  color:var(--ink);
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-md);
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}
#dashboard-content .dash-kpi-label{
  color:var(--ink-faint);
  font-size:var(--t-xs);
}
#dashboard-content .dash-kpi-label::before{ display:none; }

/* Aire en vez de cajas: las .dash-card dejan de ser cajas oscuras (fondo --bg2 +
   borde + sombra) y se aplanan sobre el papel. La jerarquía la dan el título y el
   espacio, no el borde (bans: card-grids idénticas). */
#dashboard-content .dash-card{
  background:none;
  border:none;
  border-radius:0;
  box-shadow:none;
  padding:0;
}
#dashboard-content .dash-grid{ gap:var(--sp-6); }

/* Nivel 2 — títulos de panel como group-title: fuera el uppercase (eyebrow de
   sección, ban) y fuera la barrita dorada vertical (side-stripe, ban). Sans
   semibold, tinta. Aplica también al panel «Margen de contribución por pack»
   que ext-overheads appendea aquí (mismo .dash-card-title). */
#dashboard-content .dash-card-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-md);
  letter-spacing:0;
  text-transform:none;
  color:var(--ink);
  padding-left:0;
  margin-bottom:var(--sp-4);
}
#dashboard-content .dash-card-title::before{ display:none; }
#dashboard-content .dash-card-note{ color:var(--ink-faint); }

/* Barras: la pista deja de ser oscura (--bg3 inline en dashboard.js) y pasa a
   una pista clara translúcida sobre papel; el relleno conserva su color de dato
   (categoría / pack — dato, no decoración). El % y el importe, en tinta AA.
   El barrido de brillo (gloss decorativo) se retira sobre papel. */
#dashboard-content .dash-bar{
  background:color-mix(in srgb, var(--ink) 8%, transparent) !important;
}
#dashboard-content .dash-bar-fill::after{ display:none; }
#dashboard-content .dash-bar-label{ color:var(--ink); text-shadow:none; }
#dashboard-content .dash-bar:hover .dash-bar-label{ color:var(--ink); text-shadow:none; }
#dashboard-content .dash-num{ color:var(--ink); }
#dashboard-content .dash-num--gold{ color:var(--gold-on-surface); }

/* Tablas del resumen (Desglose por día · Histórico): la .ctable legacy está
   tintada para lienzo oscuro (--text, --gold). Aquí, scoped a #dashboard-content,
   se retinta a papel — NO afecta a las .ctable de Resultados (lienzo oscuro). */
#dashboard-content .ctable th{
  color:var(--ink-soft);
  text-transform:none;
  letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);
}
#dashboard-content .ctable td{
  color:var(--ink);
  border-bottom:1px solid var(--line);
}
#dashboard-content .ctable .marca,
#dashboard-content .ctable .qty{ color:var(--ink); }
#dashboard-content .ctable .cost,
#dashboard-content .ctable .nota-s{ color:var(--gold-on-surface); }
#dashboard-content .ctable .prov,
#dashboard-content .ctable .fixed-row td{ color:var(--ink-faint); }

/* Panel «Margen de contribución por pack» (ext-overheads → appendChild a
   #dashboard-content): sus .gr-card eran cajas oscuras con salud en el FONDO.
   Se aplanan sobre papel y la salud se muda al COLOR DEL TEXTO en tonos profundos
   estables (--ok/--gold-deep/--danger, AA sobre papel), exactamente como F2 hizo
   con la salud del #review-header. Solo presentación; el % lo calcula el módulo. */
#dashboard-content .gr-hint{ color:var(--ink-soft); opacity:1; }
#dashboard-content .gr-card{
  background:none;
  border:none;
  box-shadow:none;
  border-radius:0;
  padding:var(--sp-2) 0 0;
  border-top:1px solid var(--line);
}
#dashboard-content .gr-pack{ color:var(--ink); }
#dashboard-content .gr-values{ color:var(--ink-soft); }
#dashboard-content .gr-meta{ color:var(--ink-faint); opacity:1; }
#dashboard-content .gr-card.gr-ok     .gr-status{ color:var(--ok-on-surface); }
#dashboard-content .gr-card.gr-warn   .gr-status{ color:var(--gold-on-surface); }
#dashboard-content .gr-card.gr-danger .gr-status{ color:var(--danger-on-surface); }

/* Floor-alert (ext-overheads → insertBefore en #dashboard-content, solo si un
   pack cae bajo el suelo): era una caja roja para lienzo oscuro. Sobre la hoja se
   degrada a un aviso legible — tinte danger muy suave + firma danger a la
   izquierda (rule, no caja pesada), textos en tinta/danger AA.

   R12: el tinte y la firma salen de --danger-on-surface, NO del sólido --danger.
   Sobre el panel oscuro el sólido daba un tinte de ΔL* 0,95 y un filete de
   2,11:1 — el aviso se volvía invisible justo cuando más importa. En claro
   --danger-on-surface ES --danger, así que el modo claro no se mueve. */
#dashboard-content .floor-alert{
  background:color-mix(in srgb, var(--danger-on-surface) 7%, var(--surface));
  border:1px solid var(--line);
  border-left:2px solid var(--danger-on-surface);
  color:var(--ink);
  box-shadow:none;
}
#dashboard-content .floor-alert .fa-title,
#dashboard-content .floor-alert .fa-pack{ color:var(--danger-on-surface); }
#dashboard-content .floor-alert .fa-sub,
#dashboard-content .floor-alert .fa-margin,
#dashboard-content .floor-alert .fa-row-nums{ color:var(--ink-soft); }
#dashboard-content .floor-alert .fa-hint b{ color:var(--gold-on-surface); }