/* ═══════════════════════════════════════════════════════════════════════════
   R10 · SISTEMA DE OFICIO VISUAL — primitivas (S1)
   ---------------------------------------------------------------------------
   «Papel elevado sobre lienzo bosque» (DESIGN.md §Tema) llevado a primitivas
   reutilizables. Este fichero NO estiliza ninguna pantalla concreta: entrega
   las piezas que P1 (Preparar), P2 (Proponer + momento precio) y P3 (Compras)
   componen en la siguiente oleada.

   Contrato: redesign-plan/r10-audit/S1-contract.md
   Se carga 2º (tras css/styles.css). El <link> lo añade S2, no S1.

   Reglas seguidas:
   · Cero valores hardcodeados: todo color/espaciado sale de var(--…) declarada
     en el :root de css/styles.css (tokens --r10-* y tokens «La Carta» base).
   · Prefijo único «r10-» en TODA clase → greppable, cero colisión con el
     legado (.acc-*, .pack-*, .ws-*, .bbp-*).
   · La display font (Fraunces) solo aparece en el título de sección y en la
     cifra héroe. Los datos, labels y la comparación silenciosa van en Archivo
     (respeta el ban «display font en labels/datos/botones»).
   · Contraste AA en claro y oscuro: la hoja es la superficie del tema activo
     (--surface) con su tinta (--ink / --ink-soft / --ink-faint). R12 (2026-07-10)
     volteó esos tokens —papel en claro, panel oscuro en oscuro—; el PAR sigue
     siendo AA en ambos, pero ya no puedes asumir un color concreto.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── LA HOJA (sheet) ──────────────────────────────────────────────────────
   Superficie de trabajo: papel claro elevado sobre el lienzo bosque, en
   columna única con márgenes de lectura (65–75ch). Es donde vive «Preparar».
   Poner UNA hoja por acto; agrupar dentro con espacio, no con más cajas. */
.r10-sheet{
  max-width:calc(var(--r10-measure) + 2 * var(--r10-sheet-pad-x));
  margin-inline:auto;
  padding:var(--r10-sheet-pad-y) var(--r10-sheet-pad-x);
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--r3);
  box-shadow:var(--shadow-lg);
}
/* Variante a ancho completo (comparador / revisión): mantiene el papel y la
   elevación pero suelta el corsé de la columna de lectura. */
.r10-sheet--wide{
  max-width:none;
}

/* Utilidad de medida: limita cualquier prosa/pista al ancho de lectura sin
   convertirla en hoja. */
.r10-measure{ max-width:var(--r10-measure); }

/* ── TRES NIVELES DE JERARQUÍA ────────────────────────────────────────────
   1 · sección (serif, la voz de marca) › 2 · grupo › 3 · campo.
   El peso cae por tamaño + familia + color, no por bordes. */

/* Nivel 1 — título de sección. Único uso de Fraunces junto a la cifra héroe. */
.r10-section-title{
  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);
}
/* Firma: regla dorada corta bajo el título (rule, no side-stripe). */
.r10-section-title::after{
  content:'';
  position:absolute;
  left:0;bottom:0;
  width:40px;height:1px;
  background:var(--gold-line);
  opacity:.6;
}

/* Nivel 2 — título de grupo. Sans, semibold: firme pero sin gritar. */
.r10-group-title{
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-md);
  line-height:1.3;
  letter-spacing:0;
  color:var(--ink);
}

/* Nivel 3 — etiqueta de campo. El nivel más callado. NO uppercase (ban de
   eyebrow por sección). */
.r10-field-label{
  display:block;
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-sm);
  line-height:1.35;
  letter-spacing:.005em;
  color:var(--ink-soft);
}
/* Pista auxiliar bajo un campo. */
.r10-field-hint{
  font-family:var(--sans);
  font-size:var(--t-xs);
  line-height:1.45;
  color:var(--ink-faint);
  max-width:var(--r10-measure);
  margin-top:var(--sp-1);
}

/* ── RITMO VERTICAL (aire, no cajas) ──────────────────────────────────────
   Utilidades «owl»: separan hijos hermanos con espacio. Sustituyen a los
   bordes/hairlines anidados como mecanismo de agrupación.
   Genérica: .r10-flow (lee --r10-flow, default = grupo).
   Nombradas: eligen el paso de la escala directamente. */
.r10-flow > * + *{ margin-top:var(--r10-flow, var(--r10-flow-group)); }
.r10-flow-fields > * + *{ margin-top:var(--r10-flow-field); }
.r10-flow-groups > * + *{ margin-top:var(--r10-flow-group); }
.r10-flow-sections > * + *{ margin-top:var(--r10-flow-section); }

/* ── TABULAR-NUMS (primitiva) ─────────────────────────────────────────────
   Para cualquier cifra que deba alinearse en columna. */
.r10-num{
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}

/* ── MOMENTO PRECIO ───────────────────────────────────────────────────────
   UN solo momento display por pantalla: el precio del pack propuesto.
   Héroe = Fraunces grande con aire. Los otros tres RETROCEDEN a Archivo
   silenciado (.r10-price-quiet). */
.r10-price{
  display:block;
  font-family:var(--serif);
  font-optical-sizing:auto;
  font-weight:500;
  font-size:var(--r10-price-size);
  line-height:1.02;
  letter-spacing:-.02em;
  color:var(--ink);
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
  margin-block:var(--sp-4) var(--sp-3);
  transform-origin:left center;   /* el latido crece sin empujar el layout */
}
/* Sufijo del precio («/pax», «€»): sans, retrocedido, oro legible sobre papel. */
.r10-price__unit{
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--t-md);
  letter-spacing:0;
  color:var(--gold-on-surface);
  margin-left:.2em;
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}
/* Comparación silenciosa: los precios que NO son el propuesto. Sans + tinta
   suave → presentes pero sin disputar el foco. Puede repetirse (uno por pack);
   la cifra héroe (.r10-price) no. */
.r10-price-quiet{
  font-family:var(--sans);
  font-weight:600;
  font-size:var(--r10-price-quiet-size);
  line-height:1.1;
  letter-spacing:0;
  color:var(--ink-soft);
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}

/* Latido del precio al recalcular — transición DE ESTADO, nunca coreografía.
   P2 añade .is-recalc cuando calcular() resuelve y la quita en 'animationend'
   (para re-disparar hay que quitarla antes). Un beat sutil de escala. */
@keyframes r10-price-pulse{
  0%{   transform:scale(1); }
  42%{  transform:scale(1.022); }
  100%{ transform:scale(1); }
}
.r10-price.is-recalc{
  animation:r10-price-pulse var(--r10-pulse-dur) var(--ease-soft);
}
/* Obligatorio: sin movimiento bajo reduced-motion. El número se actualiza,
   pero no late. */
@media (prefers-reduced-motion:reduce){
  .r10-price.is-recalc{ animation:none; }
}

/* ── TABLA DE TRABAJO (Compras) ───────────────────────────────────────────
   Primitiva reutilizable para la pantalla con la que se pide de verdad.
   Números a la derecha (clase .num en la celda), cabecera sticky, hairlines
   suaves. Vive SOBRE LA SUPERFICIE del tema (dentro de .r10-sheet o de un
   contenedor --surface): así la tinta --ink queda garantizada AA en ambos. */
.r10-table{
  width:100%;
  border-collapse:collapse;
  color:var(--ink);
  font-family:var(--sans);
  font-size:var(--t-sm);
}
.r10-table th,
.r10-table td{
  padding:var(--sp-2) var(--sp-3);
  text-align:left;
  vertical-align:middle;
  border-bottom:1px solid var(--line);
}
/* Cabecera sticky: fondo de pozo para que las filas se escondan debajo. */
.r10-table thead th{
  position:sticky;
  top:0;
  z-index:var(--z-sticky);
  background:var(--surface-2);
  color:var(--ink-soft);
  font-weight:600;
  font-size:var(--t-xs);
  letter-spacing:.02em;
  border-bottom:1px solid var(--line-strong);
}
/* Columnas numéricas: a la derecha + tabulares. */
.r10-table th.num,
.r10-table td.num{
  text-align:right;
  font-variant-numeric:tabular-nums;
  font-feature-settings:var(--num-tabular);
}
.r10-table tbody tr:last-child td{ border-bottom:none; }
/* Fila de total: separación reforzada, sin caja. */
.r10-table .r10-table-total td{
  border-top:1px solid var(--line-strong);
  font-weight:600;
  color:var(--ink);
}

/* ── ANULACIONES · eyebrows en mayúsculas (ban DESIGN.md, F6 · residuo W4) ───
   Dos vistas puntuales quedaron con text-transform:uppercase en css/styles.css
   («hoja de cálculo», el mismo defecto que ninguna primitiva de este fichero
   se permite: .r10-field-label/.r10-group-title/.r10-table thead th/el eyebrow
   de tipo de vino ya van sin mayúscula). r10-system.css carga DESPUÉS de
   styles.css → basta con anular la propiedad puntual, no redeclarar la regla
   entera (tamaño/color/letter-spacing los fija cada dueño y siguen intactos).
   Global, sin scope de superficie: ambos elementos son persistentes/cross-
   superficie (el rail vive fuera de #ws-panel-*, en ambos modos; la pastilla
   de precio aparece en el day card tanto en «Preparar» como en modo guía) →
   no hay «Preparar arreglado / guía roto» posible, es el mismo look en todos
   los sitios donde ya aparecían, antes y después. */

/* Rail resumen (#ws-rail): «Resumen» titula la sección → eyebrow de sección,
   ban directo. «Pax»/«Días»/«Total»/«Pack propuesto» (.ws-rail-k) son
   etiquetas de dato bajo cada celda, no prosa de sección — la frontera que
   señaló C1 m1 — pero se uniforman con el título: dejarlas gritando en
   mayúscula justo DEBAJO de un título de sección que ya no grita habría
   invertido la jerarquía (el hijo más fuerte que el padre). El tamaño (10px)
   y el letter-spacing ya distinguen label de valor sin mayúscula, igual que
   .r10-field-label distingue una etiqueta de su input sin gritar. */
.ws-rail-h,
.ws-rail-k{ text-transform:none; }

/* AA (deuda F6, medida en ambos temas): la etiqueta del rail (.ws-rail-k) queda
   a 3.07:1 en claro y 3.39:1 en oscuro con --text3 sobre el pozo del rail —
   bajo AA en LOS DOS temas. --text2 (secundario, theme-aware) la sube a ~7.8:1
   claro / ~5.1:1 oscuro sin dejar de ser más callada que el valor (--text). */
.ws-rail-k{ color:var(--text2); }

/* Regresión W5 (V3): el TOTAL del rail (.ws-rail-total) se pintaba en Fraunces
   oro a 19px = un SEGUNDO momento display, compitiendo con el único héroe del
   comparador (DESIGN.md prohíbe la display font en datos; C1 lo admitió «en
   quiet, nunca display»). Se baja a sans callado + tinta --text (como el resto
   de valores del rail), tabular; sigue perfectamente legible como dato de
   contexto persistente. El oro de display de styles.css se anula por orden
   (r10-system carga tras styles.css) a igual especificidad. */
.ws-rail-v.ws-rail-total{
  font-family:var(--sans);
  color:var(--text);
  font-feature-settings:var(--num-tabular);
}

/* Pastilla «afecta al precio» / «no afecta al precio» (.gd-tag, day card):
   mismo ban. El texto ya sale en minúscula desde el markup (state.js /
   ext-wedding.js / ext-service-flow.js) — no hace falta tocarlo, solo dejar
   de forzarlo a mayúsculas. */
.gd-tag{ text-transform:none; }

/* AA (deuda F6): la pastilla «afecta al precio» (.gd-price) en «Preparar» quedaba
   a 3.85:1 claro / 3.99:1 oscuro — el oro sobre el lavado --gold-soft, que compone
   sobre un pozo ya claro. Sobre --surface SÓLIDO el mismo oro llega a AA, el ajuste
   que F6 ya hizo para .wine-chip.active. R12: ni el oro ni --surface son ya estables
   entre temas, pero la pareja SÍ — el texto usa --gold-on-surface (4,58:1 sobre el
   papel de claro, 6,57:1 sobre el panel de oscuro) y el fondo usa --surface, así que
   ambos voltean juntos y el ratio se conserva en las dos pieles. El !important
   derrota la regla de r10-prepare.css (background:--gold-soft, misma especificidad,
   carga después); cubre las dos apariciones (.gd-head normal y .wed-bar de boda) sin
   depender del anidamiento. Solo el fondo: el texto oro y el borde --gold-mid se
   conservan. */
body.bbp-surface-config #ws-panel-dias .gd-price{
  background:var(--surface) !important;
}