/* ═══════════════════════════════════════════════════════════════════════════
   R10 · Superficie «Proponer» — comparador + momento precio (P2, oleada W2)
   ---------------------------------------------------------------------------
   «El precio es el héroe» (R10-APP-FEEL-DESIGN §2). Estiliza el comparador
   #event-summary-bar (js/ext-summary.js) sobre el sistema de oficio de S1
   (redesign-plan/r10-audit/S1-contract.md). Consume las primitivas ya provistas
   — .r10-price (héroe Fraunces), .r10-price-quiet (comparación retrocedida),
   .r10-num (tabular), .is-recalc (el latido) — aplicadas por P2 en el markup;
   aquí solo se componen contenedor, columnas, filas de métrica y sub-pestañas.

   Reglas seguidas:
   · Cero valores hardcodeados: todo color/espaciado sale de var(--…).
   · El comparador vive SOBRE --surface (papel en claro, panel oscuro desde R12)
     → la tinta --ink/--ink-soft/--ink-faint queda AA en ambas pieles sin
     overrides. Las SEÑALES no: usan --ok-on-surface/--danger-on-surface/
     --gold-on-surface, porque --ok y --danger son sólidos de fondo (2,2:1 de
     texto sobre el panel oscuro).
   · La display font (Fraunces) SOLO en la cifra héroe (.r10-price, la aporta la
     primitiva S1). Datos, labels y comparación silenciosa van en Archivo (--sans).
   · Se carga tras styles.css y r10-system.css → puede afinar sin reintroducir el
     <style> inyectado en runtime (que ganaba a .r10-price en la cascada).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── El comparador como hoja de papel ancha ────────────────────────────────
   Papel claro elevado sobre el lienzo bosque; agrupación por aire, no por caja
   con borde. Contiene la meta del evento + las 4 columnas de pack. */
.evt-summary{
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--r3);
  box-shadow:var(--shadow-md);
  padding:var(--sp-4) var(--sp-5);
  margin-bottom:var(--sp-4);
  display:flex;
  flex-direction:column;
  gap:var(--sp-4);
}

/* ── Fila global (meta del evento): retrocedida, callada ───────────────────
   Pax / Días / Margen de contribución / Comisión → nivel de dato secundario. */
.evt-row{display:flex;gap:var(--sp-4);flex-wrap:wrap;align-items:center}
.evt-row-global{padding-bottom:var(--sp-3);border-bottom:1px solid var(--line)}
.evt-chip{
  display:flex;flex-direction:column;gap:2px;
  padding:0 var(--sp-4) 0 0;
  border-right:1px solid var(--line);
  min-width:90px;
}
.evt-chip:last-child{border-right:none}
.evt-k{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.01em}
.evt-v{
  font-family:var(--sans);font-size:var(--t-md);font-weight:600;color:var(--ink);
  font-variant-numeric:tabular-nums;font-feature-settings:var(--num-tabular);
}
.evt-v.orange{color:var(--gold-on-surface)}   /* comisión: acento oro sobre papel (AA) */

/* ── Columnas de pack ──────────────────────────────────────────────────────
   Aire, no cajas: sin marco por columna; el peso lo da el TAMAÑO del precio
   (héroe vs silencioso), no un borde. Solo el pack PROPUESTO lleva regla dorada. */
.evt-row-packs{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-4);align-items:start}
.evt-pack{
  display:flex;flex-direction:column;gap:var(--sp-1);
  padding:var(--sp-2) var(--sp-3);
  border-radius:var(--r);
  border:1px solid transparent;
}
/* Pack propuesto (selección R4.4): regla dorada legible + leve wash.
   C2 #3 (WCAG 1.4.11): borde/anillo en --gold-on-surface (4,58:1 sobre papel,
   6,57:1 sobre el panel oscuro), nunca --gold (2,71:1 sobre papel).
   --gold-dim (wash de fondo) no cambia. */
.evt-pack.evt-pack-active{
  border-color:var(--gold-on-surface);
  box-shadow:0 0 0 1px var(--gold-on-surface) inset;
  background:var(--gold-dim);
}
.evt-pack-h{
  display:flex;align-items:center;
  font-family:var(--sans);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-soft);margin-bottom:var(--sp-1);
}
.evt-pack.evt-pack-active .evt-pack-h{color:var(--gold-on-surface)}

/* ── Momento precio: héroe vs comparación silenciosa ───────────────────────
   La tipografía la mandan las primitivas S1 (.r10-price / .r10-price-quiet): NO
   se redefine aquí font/size/color → sigue habiendo UN solo momento display
   Fraunces. Aquí solo el ritmo alrededor de la cifra. */
.cmp-hero .cmp-price{white-space:nowrap}          /* el héroe no parte la cifra */
.cmp-quiet .cmp-price{margin:var(--sp-2) 0 var(--sp-1)}
.cmp-perpax{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);margin-bottom:var(--sp-2)}
.cmp-perpax em{font-style:normal;color:var(--gold-on-surface);font-size:var(--t-xs);letter-spacing:.01em}

/* ── Filas de métrica (contribución / overheads / beneficio) ───────────────
   Números tabulares alineados a la derecha en TODAS las columnas (.r10-num en
   el markup). Salud del margen por color estable AA sobre papel. */
.cmp-marg,.cmp-ov{
  display:flex;justify-content:space-between;align-items:baseline;
  padding:var(--sp-1) 0;border-top:1px solid var(--line);
}
.cmp-lbl{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint)}
.cmp-marg-v{font-family:var(--sans);font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.cmp-marg-ok   .cmp-marg-v{color:var(--ok-on-surface)}          /* verde profundo, AA papel */
.cmp-marg-warn .cmp-marg-v{color:var(--gold-on-surface)}   /* ámbar profundo, AA papel */
.cmp-marg-bad  .cmp-marg-v{color:var(--danger-on-surface)}      /* rojo profundo, AA papel */
.cmp-ov-v{font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);text-align:right}
.cmp-ov-tag{
  font-family:var(--sans);font-style:normal;font-size:var(--t-xs);
  font-variant-numeric:normal;white-space:nowrap;
  padding:1px 6px;border-radius:var(--r-sm);margin-left:6px;
  background:var(--surface-2);color:var(--ink-faint);
}
.cmp-ov-tag.on{background:var(--gold-dim);color:var(--gold-on-surface)}
.cmp-benefrow{border-top:1px solid var(--line);padding-top:var(--sp-1);margin-top:2px}

/* Fila genérica (beneficio, «Cliente vio»): dato callado, valor firme. */
.evt-pack-row{
  display:flex;justify-content:space-between;align-items:baseline;
  font-family:var(--sans);font-size:var(--t-sm);color:var(--ink-soft);
}
.evt-pack-row span:last-child{color:var(--ink);font-weight:600}
.cmp-benef.pos{color:var(--ok-on-surface)}
.cmp-benef.neg{color:var(--danger-on-surface)}

/* Referencia «Cliente vio €X»: atenuada; el delta (+/−) con señal AA sobre papel. */
.evt-pack-row.evt-seen span{color:var(--ink-faint);font-weight:400}
.evt-pack-row.evt-seen small{font-size:var(--t-xs);margin-left:5px;font-weight:600}
.evt-pack-row.evt-seen small.up{color:var(--gold-on-surface)}   /* subió vs lo cotizado */
.evt-pack-row.evt-seen small.down{color:var(--ok-on-surface)}        /* bajó vs lo cotizado */

/* ── Radio «Proponer este pack» (R4.4): una sola señal de selección ────────
   Oro cuando propuesto; label en Archivo (NO uppercase, ban de eyebrow). */
.cmp-propose{
  display:flex;align-items:center;gap:7px;cursor:pointer;
  border-top:1px solid var(--line);padding-top:var(--sp-2);margin-top:var(--sp-1);
}
/* C2 #3 (WCAG 1.4.11): accent + anillo de foco en --gold-deep (4.58:1 estable),
   no --gold (2.71:1 sobre papel en oscuro). */
.cmp-propose input[type=radio]{accent-color:var(--gold-on-surface);cursor:pointer;margin:0;width:15px;height:15px;flex:none}
.cmp-propose input[type=radio]:focus-visible{outline:2px solid var(--gold-on-surface);outline-offset:2px}
.cmp-propose-lbl{
  font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint);
  line-height:1.25;transition:color var(--dur) var(--ease);
}
.cmp-propose.on .cmp-propose-lbl{color:var(--gold-on-surface);font-weight:600}

/* ── Sub-pestañas del paso (Resultados/Compras/Logística/Resumen/Cliente) ──
   Legibles pero claramente secundarias: no compiten con el precio héroe. Se
   conserva el color y el subrayado oro activo de styles.css (theme-safe); aquí
   solo se calma el peso tipográfico. */
.tab-bar .tab-btn{font-family:var(--sans);font-size:var(--t-sm);font-weight:500;letter-spacing:0}

/* ── Anuncio del recálculo para lectores de pantalla (C2 #2) ───────────────
   Región aria-live visualmente oculta que ext-summary.js actualiza UNA vez por
   recálculo resuelto (enganchada a pulseHeroPrice, nunca por tecla). Técnica
   sr-only estándar; el contenido lo escribe el JS. */
.bbp-sr-live{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ── Responsive estructural (colapso de columnas, sin tipografía fluida) ───── */
@media(max-width:900px){
  .evt-row-packs{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:520px){
  .evt-row-packs{grid-template-columns:1fr}
  .evt-chip{min-width:auto;padding:0 var(--sp-2) 0 0}
  .evt-v{font-size:var(--t-sm)}
}

/* ── Modo de propuesta (Terna S/P/G vs Custom) — ext-proposal-mode.js ──────
   Tira fina de papel sobre el comparador. El modo es la decisión COMERCIAL;
   el radio «referencia» de las columnas es operativo (compras/números). */
.pmode-bar{
  background:var(--surface);
  color:var(--ink);
  border-radius:var(--r3);
  box-shadow:var(--shadow-md);
  padding:var(--sp-3) var(--sp-5);
  margin-bottom:var(--sp-3);
  display:flex;
  align-items:center;
  gap:var(--sp-4);
  flex-wrap:wrap;
}
.pmode-k{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint);letter-spacing:.01em}
.pmode-seg{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r2);overflow:hidden}
.pmode-btn{
  font-family:var(--sans);font-size:var(--t-sm);font-weight:600;
  color:var(--ink-soft);background:transparent;border:none;cursor:pointer;
  padding:6px var(--sp-4);transition:color var(--dur) var(--ease),background var(--dur) var(--ease);
}
.pmode-btn + .pmode-btn{border-left:1px solid var(--line)}
.pmode-btn.on{color:var(--gold-on-surface);background:var(--gold-dim)}
.pmode-btn:focus-visible{outline:2px solid var(--gold-on-surface);outline-offset:-2px}
.pmode-btn[disabled]{cursor:default;opacity:.55}
.pmode-state{
  font-family:var(--sans);font-size:var(--t-xs);font-weight:600;
  color:var(--gold-on-surface);border:1px solid var(--gold-on-surface);
  border-radius:999px;padding:2px 10px;
}
.pmode-note{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint)}
/* Nota bajo la cifra héroe del comparador (ext-summary.js, Task 2) */
.cmp-refnote{font-family:var(--sans);font-size:var(--t-xs);color:var(--ink-faint);line-height:1.3}