/* ═══════════════════════════════════════════════════════════════════════════
R11 · #tab-resultados SOBRE PAPEL — la última superficie sin portar
---------------------------------------------------------------------------
R10 papelizó 4 de las 5 sub-pestañas de «Proponer» (r10-docs.css: Compras,
Logística, Resumen, Cliente). Resultados se quedó en bosque → escalón claro
/oscuro dentro de la misma vista. Esta hoja cierra el porte.
Se carga la ÚLTIMA (tras las r10-*). El orden de los es load-bearing,
no cosmético: la cascada de estas hojas gana a styles.css por ORDEN, no por
especificidad. `tests/unit/link-order.test.js` lo custodia.
DOS DECISIONES DE FORMA, más allá del color:
1 · UNA HOJA POR DÍA, no una tarjeta por bloque. `.day-results-panel` es el
papel elevado sobre lienzo (DESIGN.md §Tema); dentro NO hay tarjetas
anidadas: `.rblock` y `.acc-item` se aplanan a secciones separadas por
aire y hairline. Nested cards are always wrong.
2 · «EL AIRE SEPARA, NO LA LÍNEA». Las tablas de partidas dejan de parecer
una hoja de cálculo: cero reglas verticales; reglas horizontales solo
donde hay jerarquía (bajo la cabecera, sobre el TOTAL); entre filas de
datos, altura — no línea. Los inputs pierden el borde en reposo pero
CONSERVAN fondo de campo: nunca escondas lo que se puede tocar (esa fue
exactamente la trampa del candado de partidas de R5.6).
REGLA DE COLOR (R12): el oro de TEXTO es siempre --gold-on-surface. Nunca
--gold (lo redefine body.light; 2,71:1 sobre papel), nunca --gold-deep a pelo
(2,99:1 sobre el panel oscuro), nunca --gold-bright a pelo (1,9:1 sobre papel).
Hasta R11 la regla decía «siempre --gold-deep»: valía solo porque el trabajo
ocurría sobre papel en las dos pieles. Ya no.
═══════════════════════════════════════════════════════════════════════════ */
/* ── Tinta de pack sobre la superficie del tema activo ────────────────────
Los colores de pack (#5c9ee0 · #e8a87a · #c9a84c · #4caf7a) se calcularon
para el lienzo bosque: sobre PAPEL caen a 1,96–2,72:1. Sobre el panel oscuro
que R12 devuelve dan 5,02–6,98:1, así que ahí la tinta ES el color del pack
y solo el modo claro necesita contrapartes profundas (≥5:1).
NOMBRE APARTE, A PROPÓSITO. Los tokens --pack-standard/-custom/-premium/-green
YA EXISTEN en :root (styles.css) y los leen el anillo del acordeón, la
alerta de suelo, las tarjetas de guardrail, la Estación Green y los colores
del gráfico del dashboard —que vive en la pestaña «Resumen», dentro de esta
misma superficie—. Redefinirlos aquí los repintaba todos en silencio.
AHORA SON GLOBALES (R15 §1): viven en `:root` para que el chipbar de packs
los lea también FUERA de la superficie de revisión (el modo guía retira
body.bbp-surface-review — de ahí venían los botones grises). Los consumidores
antiguos siguen scopeados a `body.bbp-surface-review …` y son más específicos,
así que no cambian de valor. La pareja clara se escribe `body.light` (0,1,1) y
gana por ESPECIFICIDAD tag+clase sobre `:root` (0,1,0), no por orden de .
Premium hereda --gold-on-surface y por tanto ya voltea solo. */
:root{
--pack-ink-standard:var(--pack-standard);
--pack-ink-custom:var(--pack-custom);
--pack-ink-premium:var(--gold-on-surface);
--pack-ink-green:var(--pack-green);
}
body.light{
--pack-ink-standard:#1E5C96;
--pack-ink-custom:#A8541E;
--pack-ink-green:#2E6B4F;
}
/* ═══ 0 · PRIMITIVAS QUE R11 INTRODUCE ══════════════════════════════════
Viven aquí (y no en styles.css) porque nacen con este porte y solo las usa
la superficie «Proponer». Si una tercera superficie las necesita, se suben. */
/* Texto solo para lectores de pantalla. */
.bbp-sr-only{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
/* Marca maciza de pack. Hereda la tinta del contenedor vía currentColor: un
solo asset sirve a papel y a bosque. */
.bbp-pack-mark{ flex:none; vertical-align:-.28em; }
body.bbp-surface-review .evt-pack[data-pack="STANDARD"] .bbp-pack-mark{ color:var(--pack-ink-standard); }
body.bbp-surface-review .evt-pack[data-pack="CUSTOM"] .bbp-pack-mark{ color:var(--pack-ink-custom); }
body.bbp-surface-review .evt-pack[data-pack="PREMIUM"] .bbp-pack-mark{ color:var(--pack-ink-premium); }
body.bbp-surface-review .evt-pack[data-pack="GREEN"] .bbp-pack-mark{ color:var(--pack-ink-green); }
/* Tooltip propio. Sustituye a `title=`, cuyo globo lo pinta el SISTEMA (claro
en macOS) y no es tematizable: eso era la «caja clara» del tema oscuro. El
texto vive además en un .bbp-sr-only para no perderlo con lector de pantalla. */
[data-tip]{ position:relative; }
[data-tip]::after{
content:attr(data-tip);
position:absolute;
bottom:calc(100% + 8px);
left:50%;
transform:translateX(-50%) translateY(4px);
z-index:var(--z-tooltip);
width:max-content;
max-width:min(260px, 60vw);
padding:var(--sp-2) var(--sp-3);
background:var(--canvas-2);
color:var(--on-dark);
border-radius:var(--r-sm);
font-family:var(--sans);
font-size:var(--t-2xs);
font-weight:400;
line-height:1.45;
letter-spacing:0;
text-align:left;
text-transform:none;
white-space:normal;
box-shadow:var(--shadow);
opacity:0;
pointer-events:none;
transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease);
}
[data-tip]:hover::after,
[data-tip]:focus-visible::after{
opacity:1;
transform:translateX(-50%) translateY(0);
}
/* Las columnas de los extremos empujarían el globo fuera de la hoja. */
.evt-pack:first-child [data-tip]::after,
.evt-pack:first-child[data-tip]::after{ left:0; transform:translateX(0) translateY(4px); }
.evt-pack:first-child [data-tip]:hover::after,
.evt-pack:first-child[data-tip]:hover::after{ transform:translateX(0) translateY(0); }
.evt-pack:last-child [data-tip]::after,
.evt-pack:last-child[data-tip]::after{ left:auto; right:0; transform:translateX(0) translateY(4px); }
.evt-pack:last-child [data-tip]:hover::after,
.evt-pack:last-child[data-tip]:hover::after{ transform:translateX(0) translateY(0); }
@media (prefers-reduced-motion:reduce){
[data-tip]::after{ transition:none; transform:translateX(-50%); }
[data-tip]:hover::after,[data-tip]:focus-visible::after{ transform:translateX(-50%); }
}
/* ═══ 1 · LA HOJA DEL DÍA ═══════════════════════════════════════════════ */
body.bbp-surface-review #tab-resultados .day-results-panel{
background:var(--surface);
color:var(--ink);
border-radius:var(--r3);
box-shadow:var(--shadow-lg);
padding:var(--sp-5) var(--sp-5) var(--sp-4);
}
/* Título del día: Fraunces en tinta, no en oro. El oro se reserva para la
acción y la selección; un encabezado no es ninguna de las dos. */
body.bbp-surface-review #tab-resultados .day-sep{
color:var(--ink);
border-bottom-color:var(--line);
margin-top:0;
}
body.bbp-surface-review #tab-resultados .day-sep-tag{ color:var(--ink-faint); }
/* Pestañas de día (eventos multi-día) */
body.bbp-surface-review #tab-resultados .day-tab-btn{
background:transparent;
border-color:var(--line);
color:var(--ink-soft);
}
body.bbp-surface-review #tab-resultados .day-tab-btn.active{
background:var(--surface-2);
border-color:var(--gold-on-surface);
color:var(--ink);
}
/* ═══ 2 · APLANAR LAS TARJETAS ANIDADAS ═════════════════════════════════
.rblock (Personal · Mobiliario · Hielo) y .acc-item (los 4 packs) eran
tarjetas con borde y fondo DENTRO de la tarjeta del día. Se convierten en
secciones de la hoja: sin fondo, sin borde, sin radio. Separadas por aire y
una hairline superior. */
body.bbp-surface-review #tab-resultados .rblock{
background:transparent;
border:none;
border-radius:0;
padding:var(--sp-4) 0 0;
margin-bottom:var(--sp-5);
border-top:1px solid var(--line);
}
body.bbp-surface-review #tab-resultados .rblock-t{
color:var(--ink-faint);
}
/* Fila de total de bloque: la regla va ARRIBA (cierra la suma), no abajo. */
body.bbp-surface-review #tab-resultados .dtotal-row{
border-top:1px solid var(--line-strong);
border-bottom:none;
}
body.bbp-surface-review #tab-resultados .dtotal-l{ color:var(--ink-soft); }
body.bbp-surface-review #tab-resultados .dtotal-v{
color:var(--ink);
font-weight:600;
font-variant-numeric:tabular-nums;
}
/* ═══ 3 · LOS CUATRO PACKS ══════════════════════════════════════════════ */
body.bbp-surface-review #tab-resultados .packs-group-t{
color:var(--ink-faint);
}
/* La app ya resuelve la tinta de pack con --pack-color (styles.css:1446). Sobre
papel solo hay que repuntarlo: la etiqueta, la flecha y el tag lo heredan. */
body.bbp-surface-review #tab-resultados .acc-item[data-pack="STANDARD"]{ --pack-color:var(--pack-ink-standard); }
body.bbp-surface-review #tab-resultados .acc-item[data-pack="CUSTOM"] { --pack-color:var(--pack-ink-custom); }
body.bbp-surface-review #tab-resultados .acc-item[data-pack="PREMIUM"] { --pack-color:var(--pack-ink-premium); }
body.bbp-surface-review #tab-resultados .acc-item[data-pack="GREEN"] { --pack-color:var(--pack-ink-green); }
body.bbp-surface-review #tab-resultados .acc-item{
background:transparent;
border:none;
border-radius:0;
border-top:1px solid var(--line);
margin-bottom:0;
overflow:visible;
box-shadow:none;
}
/* El ribbon vertical de 3px del borde izquierdo (.acc-item::before) es un
side-stripe de color: nunca es intencionado. Sobre papel el pack ya se
distingue por el nombre en su tinta y, si está propuesto, por el lavado de
oro de toda la fila. Fuera. */
body.bbp-surface-review #tab-resultados .acc-item::before,
body.bbp-surface-review #tab-resultados .acc-item::after{ display:none; }
/* Y el halo exterior tintado del pack abierto: sobre papel un glow de color
ensucia; la selección la dice el lavado, no un resplandor. */
body.bbp-surface-review #tab-resultados .acc-item.is-open{ box-shadow:none; }
body.bbp-surface-review #tab-resultados .acc-head{
padding:var(--sp-3) 0;
background:transparent;
}
body.bbp-surface-review #tab-resultados .acc-head:hover{
background:transparent;
}
body.bbp-surface-review #tab-resultados .acc-head:hover .acc-pack-label{
text-decoration:underline;
text-underline-offset:3px;
text-decoration-thickness:1px;
}
/* El pack abierto se marca en su CABECERA, no bañando la sección entera: un
acordeón abierto mide más de mil píxeles y teñirlo todo convierte el papel en
un bloque beige. La regla superior en oro basta para decir «este es». */
body.bbp-surface-review #tab-resultados .acc-item.is-open{
background:transparent;
border-top-color:var(--gold-on-surface);
}
body.bbp-surface-review #tab-resultados .acc-item.is-open .acc-head{
background:var(--diff);
border-radius:var(--r-sm);
padding-inline:var(--sp-3);
margin-inline:calc(-1 * var(--sp-3));
}
body.bbp-surface-review #tab-resultados .acc-body{
border-top:1px solid var(--line);
padding-inline:0;
}
body.bbp-surface-review #tab-resultados .acc-pack-tag{ color:var(--ink-faint); }
/* styles.css tiñe el tag del pack abierto con color-mix(--pack-color, --text2):
--text2 es crema, así que sobre papel hay que rehacer la mezcla con tinta. */
body.bbp-surface-review #tab-resultados .acc-item.is-open .acc-pack-tag{
color:color-mix(in srgb, var(--pack-color) 45%, var(--ink-soft));
}
/* El precio del acordeón es SOPORTE, no el momento editorial. El precio que
vende vive una vez, en el comparador (lección de R10: no gritar el mismo
total cuatro veces). Aquí: tinta, tabular, sin Fraunces. */
body.bbp-surface-review #tab-resultados .acc-price{
color:var(--ink);
font-variant-numeric:tabular-nums;
}
body.bbp-surface-review #tab-resultados .acc-arrow{ color:var(--ink-faint); }
/* ═══ 4 · LAS TABLAS: EL AIRE SEPARA, NO LA LÍNEA ═══════════════════════ */
body.bbp-surface-review #tab-resultados .ctable,
body.bbp-surface-review #tab-resultados .staff-t{
font-variant-numeric:tabular-nums;
}
/* CADA CATEGORÍA ES SU PROPIA
. Con layout automático, Destilados,
Licores, Vino, Mobiliario y Hielo negocian anchos por separado y «PROVEEDOR»
acaba cayendo en cinco sitios distintos de la misma hoja. Un ancho fijo y
compartido las alinea a todas — es la mitad de la queja de alineación, y no
se ve en una sola tabla: hay que mirar la página. */
/* min-width: por debajo de ~520px los porcentajes aplastan los inputs (56px
fijos) contra los importes y se solapan — sin desbordar la página, así que
ningún test lo ve. A partir de ahí la tabla mantiene su forma y desplaza
dentro de su contenedor (ver el @media del final). */
body.bbp-surface-review #tab-resultados .ctable{ table-layout:fixed; min-width:520px; }
body.bbp-surface-review #tab-resultados .ctable th:nth-child(1){ width:36%; }
body.bbp-surface-review #tab-resultados .ctable th:nth-child(2){ width:21%; }
body.bbp-surface-review #tab-resultados .ctable th:nth-child(3){ width:15%; }
body.bbp-surface-review #tab-resultados .ctable th:nth-child(4){ width:13%; }
body.bbp-surface-review #tab-resultados .ctable th:nth-child(5){ width:15%; }
/* Sin reglas verticales, la única cosa que separa dos columnas es el hueco.
Sin él, «CANTIDAD» y «SUBTOTAL» se tocan. */
body.bbp-surface-review #tab-resultados .ctable th + th,
body.bbp-surface-review #tab-resultados .ctable td + td{ padding-left:var(--sp-3); }
/* El nombre del producto es lo único que puede desbordar. */
body.bbp-surface-review #tab-resultados .ctable td:first-child{
overflow:hidden;
text-overflow:ellipsis;
}
/* La cabecera «Subtotal» debe caer sobre los importes, no sobre el canalón de
la ✕ que styles.css reserva en .cost (28px). */
body.bbp-surface-review #tab-resultados .ctable th:last-child{ padding-right:28px; }
/* Cabecera de columnas: una sola regla, la que introduce la tabla. */
body.bbp-surface-review #tab-resultados .ctable th,
body.bbp-surface-review #tab-resultados .staff-t th{
color:var(--ink-faint);
border-bottom:1px solid var(--line);
padding-bottom:var(--sp-2);
}
/* Data rows: a VERY faint separation rule between rows (--row-line) and a
CLEARLY visible amber hover band (--row-hover) + a 2px gold left edge.
.totrow keeps its --line-strong top rule (further below). Text color does
NOT change on hover (rule 10): the band is a wash that stays AA-safe in
both skins (guarded by contrast-aa). The TOTAL row never lights up (it is
a summary, not a navigable data row) — excluded at the source with
:not(.totrow), because a counter-suppressing `.totrow:hover td` rule loses
on specificity to the `tr:hover td:first-child` edge rule ((1,4,2) vs (1,4,4)). */
body.bbp-surface-review #tab-resultados .ctable td,
body.bbp-surface-review #tab-resultados .staff-t td{
border-bottom:none;
padding-top:var(--sp-2);
padding-bottom:var(--sp-2);
color:var(--ink-soft);
}
body.bbp-surface-review #tab-resultados .ctable tbody tr + tr td,
body.bbp-surface-review #tab-resultados .staff-t tbody tr + tr td{
border-top:1px solid var(--row-line);
}
body.bbp-surface-review #tab-resultados .ctable tbody tr,
body.bbp-surface-review #tab-resultados .staff-t tbody tr{
transition:background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
body.bbp-surface-review #tab-resultados .ctable tbody tr:not(.totrow):hover td,
body.bbp-surface-review #tab-resultados .staff-t tbody tr:not(.totrow):hover td{
background:var(--row-hover);
}
body.bbp-surface-review #tab-resultados .ctable tbody tr:not(.totrow):hover td:first-child,
body.bbp-surface-review #tab-resultados .staff-t tbody tr:not(.totrow):hover td:first-child{
box-shadow:inset 2px 0 0 var(--row-hover-edge);
}
body.bbp-surface-review #tab-resultados .ctable .marca,
body.bbp-surface-review #tab-resultados .staff-t .marca{ color:var(--ink); }
body.bbp-surface-review #tab-resultados .ctable .prov{ color:var(--ink-faint); }
/* El «/ud» que acompaña al input de precio y el sufijo «bolsas» de las
cantidades de hielo (styles.css los pinta en --text3, crema sobre crema). */
body.bbp-surface-review #tab-resultados .uprice{ color:var(--ink-faint); }
body.bbp-surface-review #tab-resultados .ctable .qty .qunit{ color:var(--ink-faint); }
/* Fila TOTAL: sin wash blanco (era rgba(255,255,255,.02), invisible sobre papel
y ruido sobre él). Solo la regla superior manda. */
body.bbp-surface-review #tab-resultados .ctable .totrow td{
background:transparent;
border-top:1px solid var(--line-strong);
}
body.bbp-surface-review #tab-resultados .ctable .totrow .totrow-l{ color:var(--ink-faint); }
body.bbp-surface-review #tab-resultados .ctable .totrow .qty,
body.bbp-surface-review #tab-resultados .ctable .totrow .cost{
color:var(--ink);
font-weight:600;
}
body.bbp-surface-review #tab-resultados .ctable .qty{ color:var(--ink); }
body.bbp-surface-review #tab-resultados .ctable .cost{
color:var(--ink);
font-weight:500;
}
body.bbp-surface-review #tab-resultados .ctable .nota-s{ color:var(--gold-on-surface); }
body.bbp-surface-review #tab-resultados .ctable .fixed-row td{ color:var(--ink-faint); }
body.bbp-surface-review #tab-resultados .ctable .fixed-row .marca{ color:var(--ink-soft); }
body.bbp-surface-review #tab-resultados .staff-meal{ color:var(--ink-faint); }
/* (La fila TOTAL de categoría se trata más abajo, junto a .totrow.) */
/* Cabecera de categoría (DESTILADOS, CERVEZA…): versalitas en oro de papel,
sin fondo y sin regla propia — la regla de la cabecera de columnas basta. */
body.bbp-surface-review #tab-resultados .ccat{ margin-bottom:var(--sp-5); }
body.bbp-surface-review #tab-resultados .ccat-t{
color:var(--gold-on-surface);
border-bottom:none;
padding-bottom:0;
margin-bottom:var(--sp-2);
}
/* ═══ 5 · CAMPOS: SIN BORDE, PERO CON FONDO ═════════════════════════════
El input se lee como campo por su fondo (--surface-2), no por su caja. El
borde aparece al acercarse. Afordancia intacta, rejilla muerta. */
body.bbp-surface-review #tab-resultados .qty-ed,
body.bbp-surface-review #tab-resultados .time-ed,
body.bbp-surface-review #tab-resultados .rate-ed,
body.bbp-surface-review #tab-resultados .price-ed,
body.bbp-surface-review #tab-resultados .qty-inp{
background:var(--surface-2);
border:1px solid transparent;
color:var(--ink);
font-variant-numeric:tabular-nums;
transition:border-color var(--dur) var(--ease),background var(--dur) var(--ease);
}
body.bbp-surface-review #tab-resultados .qty-ed:hover,
body.bbp-surface-review #tab-resultados .time-ed:hover,
body.bbp-surface-review #tab-resultados .rate-ed:hover,
body.bbp-surface-review #tab-resultados .price-ed:hover,
body.bbp-surface-review #tab-resultados .qty-inp:hover{
border-color:var(--line-strong);
}
body.bbp-surface-review #tab-resultados .qty-ed:focus,
body.bbp-surface-review #tab-resultados .time-ed:focus,
body.bbp-surface-review #tab-resultados .rate-ed:focus,
body.bbp-surface-review #tab-resultados .price-ed:focus,
body.bbp-surface-review #tab-resultados .qty-inp:focus{
background:var(--surface);
border-color:var(--gold-on-surface);
box-shadow:0 0 0 2px rgba(139,111,46,.18);
}
/* ═══ 6 · ACCIONES DE FILA ══════════════════════════════════════════════ */
/* La ✕ está SIEMPRE presente, solo callada. Nada de opacity:0 + hover-reveal:
Leo revisó staging y concluyó que borrar no existía, precisamente porque el
modo lectura la escondía. Un affordance que hay que descubrir no existe. */
body.bbp-surface-review #tab-resultados .row-del{
background:transparent;
border-color:transparent;
color:var(--ink-faint);
opacity:.4;
transition:opacity var(--dur) var(--ease),color var(--dur) var(--ease),background var(--dur) var(--ease);
}
body.bbp-surface-review #tab-resultados tr:hover .row-del,
body.bbp-surface-review #tab-resultados .row-del:focus-visible{
opacity:1;
}
body.bbp-surface-review #tab-resultados .row-del:hover{
background:var(--danger);
border-color:var(--danger);
color:#fff;
}
body.bbp-surface-review #tab-resultados .btn-add-row{
background:transparent;
border-color:var(--line-strong);
color:var(--ink-soft);
}
body.bbp-surface-review #tab-resultados .btn-add-row:hover{
border-color:var(--gold-on-surface);
color:var(--gold-on-surface);
background:var(--surface-2);
}
/* Barra de sincronizar, ya reubicada como barra de herramientas del grupo de
packs: lavado de oro discreto sobre papel. */
body.bbp-surface-review #tab-resultados .sync-bar{
background:var(--surface-2);
border-color:var(--line);
color:var(--ink-soft);
}
body.bbp-surface-review #tab-resultados .sync-bar .sync-state{
color:var(--ink-faint);
}
/* Resumen de cócteles del día */
body.bbp-surface-review #tab-resultados .cock-line{ color:var(--ink-soft); }
body.bbp-surface-review #tab-resultados .cock-line strong{ color:var(--gold-on-surface); }
/* Desglose de costes por categoría (.dblock) */
body.bbp-surface-review #tab-resultados .dblock{
background:var(--surface-2);
border:none;
}
body.bbp-surface-review #tab-resultados .dcat{ color:var(--ink-soft); }
body.bbp-surface-review #tab-resultados .damt{
color:var(--ink);
font-variant-numeric:tabular-nums;
}
/* ═══ 7 · RESPONSIVE ════════════════════════════════════════════════════
Estructural, no tipográfico (register product). Una tabla de partidas con
cinco columnas no cabe en 375px sin mentir: en vez de aplastarla, se desplaza
dentro de su propio contenedor. La PÁGINA nunca desplaza en horizontal. */
@media (max-width:760px){
body.bbp-surface-review #tab-resultados .acc-body,
body.bbp-surface-review #tab-resultados .rblock{
overflow-x:auto;
-webkit-overflow-scrolling:touch;
}
body.bbp-surface-review #tab-resultados .staff-t{ min-width:520px; }
body.bbp-surface-review #tab-resultados .day-results-panel{
padding:var(--sp-4) var(--sp-3) var(--sp-3);
}
}
/* ═══ 8 · MOVIMIENTO ════════════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
body.bbp-surface-review #tab-resultados .ctable tbody tr,
body.bbp-surface-review #tab-resultados .staff-t tbody tr,
body.bbp-surface-review #tab-resultados .qty-ed,
body.bbp-surface-review #tab-resultados .time-ed,
body.bbp-surface-review #tab-resultados .rate-ed,
body.bbp-surface-review #tab-resultados .price-ed,
body.bbp-surface-review #tab-resultados .qty-inp,
body.bbp-surface-review #tab-resultados .row-del{
transition:none;
}
}
/* R13 §4: una sola cabecera de columnas por pack. Los de las 11
categorías siguen en el DOM (accesibilidad + selectores nth-child) pero no
pintan; una tabla-cabecera pegajosa los sustituye visualmente. Alinea porque
TODAS las tablas son .ctable → mismo table-layout:fixed + mismos anchos %.
R13 §4: los de categoría se ocultan SIN salir del flujo de la
tabla (nada de position:absolute) para que th:nth-child(n) siga fijando
los anchos de columna de table-layout:fixed. visibility:hidden + altura
aplastada = cero espacio visible, columnas correctas. */
body.bbp-surface-review #tab-resultados thead.cat-thead-hidden{ visibility:hidden; }
body.bbp-surface-review #tab-resultados thead.cat-thead-hidden th{
height:0; padding:0; border:0; line-height:0; font-size:0;
}
/* Garantía de anchos también en el cuerpo, por si un thead oculto no los
fijara en algún navegador: mismos % que th:nth-child (r11-results.css). */
body.bbp-surface-review #tab-resultados .ctable td:nth-child(1){ width:36%; }
body.bbp-surface-review #tab-resultados .ctable td:nth-child(2){ width:21%; }
body.bbp-surface-review #tab-resultados .ctable td:nth-child(3){ width:15%; }
body.bbp-surface-review #tab-resultados .ctable td:nth-child(4){ width:13%; }
body.bbp-surface-review #tab-resultados .ctable td:nth-child(5){ width:15%; }
body.bbp-surface-review #tab-resultados .pack-head-table{
position:sticky; top:0; z-index:2; margin:0 0 var(--sp-2);
background:var(--surface);
}
body.bbp-surface-review #tab-resultados .pack-head-table thead th{
border-bottom:1px solid var(--line);
}
/* ═══ R15 §1 · CHIPS DE PACK: elegir qué se ve y qué se compara ══════════
Scopeado a #tab-resultados .pack-chipbar SIN body.bbp-surface-review: en modo
guía esa clase se retira y el navegador pintaría botones grises. Aquí el chip
es siempre deliberado (ghost con borde hairline; activo = relleno tintado). */
#tab-resultados .pack-chipbar{
display:flex; flex-wrap:wrap; gap:var(--sp-3);
margin:0 0 var(--sp-4);
}
/* When 2+ packs compare, .packs-grid becomes a multi-column grid (see ~:586).
The chipbar is a plain grid child (buildChipbar injects it as firstChild) and
would otherwise be squeezed into cell (1,1), stacking its chips vertically.
Span the whole row so the chips sit in a horizontal band ON TOP and the pack
cards use the full width below. One rule covers every breakpoint. */
#tab-resultados .packs-grid.is-multi > .pack-chipbar{ grid-column:1 / -1; }
#tab-resultados .pack-chip{
--pc:var(--gold-on-surface);
cursor:pointer; font:inherit; font-weight:500;
border:1px solid var(--line); background:transparent; color:var(--ink-soft);
border-radius:var(--r-pill); padding:8px 16px;
display:inline-flex; align-items:center; gap:8px;
transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease),
color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
#tab-resultados .pack-chip[data-pack="STANDARD"]{ --pc:var(--pack-ink-standard); }
#tab-resultados .pack-chip[data-pack="CUSTOM"] { --pc:var(--pack-ink-custom); }
#tab-resultados .pack-chip[data-pack="PREMIUM"] { --pc:var(--pack-ink-premium); }
#tab-resultados .pack-chip[data-pack="GREEN"] { --pc:var(--pack-ink-green); }
#tab-resultados .pack-chip-mark{ display:inline-flex; color:var(--pc); }
#tab-resultados .pack-chip-mark svg{ width:15px; height:15px; }
#tab-resultados .pack-chip-name{ font-size:.85rem; }
#tab-resultados .pack-chip-price{
font-family:var(--serif); font-size:.82rem; color:var(--ink-faint);
font-variant-numeric:tabular-nums;
}
#tab-resultados .pack-chip:hover{ border-color:color-mix(in srgb, var(--pc) 45%, var(--line)); }
#tab-resultados .pack-chip:focus-visible{ outline:2px solid var(--pc); outline-offset:2px; }
#tab-resultados .pack-chip[aria-pressed="true"]{
color:var(--pc); font-weight:600; border-color:currentColor;
background:color-mix(in srgb, var(--pc) 16%, transparent);
}
#tab-resultados .pack-chip[aria-pressed="true"] .pack-chip-price{ color:var(--pc); font-weight:600; }
#tab-resultados .pack-chip[aria-pressed="true"][data-last="1"]{ cursor:default; }
/* Distintivo «Propuesto» — punto dorado + versalita */
#tab-resultados .pack-chip-proposed{
display:inline-flex; align-items:center; gap:5px;
font-size:.58rem; letter-spacing:.1em; text-transform:uppercase; font-weight:600;
color:var(--gold-on-surface);
padding-left:8px; border-left:1px solid color-mix(in srgb, var(--gold-on-surface) 32%, transparent);
}
#tab-resultados .pack-chip-proposed::before{
content:""; width:6px; height:6px; border-radius:50%; background:var(--gold-on-surface);
}
/* Pack no seleccionado: fuera de la vista, pero el nodo sigue en el DOM. */
#tab-resultados .packs-grid .acc-item.pack-collapsed{ display:none; }
/* Presupuesto bloqueado: los chips son lectura → se pueden pulsar para MIRAR
en comparación (la edición sigue cortada por bbp-locked en el resto del main). */
body.bbp-locked #workspace-view .main #tab-resultados .pack-chipbar{ pointer-events:auto; }
/* 2+ chips → columnas (mismos breakpoints que R13). Un solo selector para todas
las anchuras: sin acordeones-cerrados-como-barras, sin order:-1. */
#tab-resultados .packs-grid{ display:block; }
@media (min-width:1100px){
#tab-resultados .packs-grid.is-multi{
display:grid; align-items:start; gap:var(--sp-3);
grid-template-columns:repeat(2, minmax(0,1fr));
}
#tab-resultados .packs-grid.is-multi .acc-item{ min-width:0; }
#tab-resultados .packs-grid.is-multi .ctable{ min-width:0; overflow-x:clip; }
#tab-resultados .packs-grid.is-multi .acc-head{
width:100%; box-sizing:border-box; flex-direction:column; align-items:stretch; gap:4px;
}
#tab-resultados .packs-grid.is-multi .acc-head-left{ min-width:0; }
#tab-resultados .packs-grid.is-multi .acc-pack-label{
min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
}
/* Columns = min(selected packs, breakpoint cap). `data-compare-cols` (set by
bbpApplyPackSelection) pins the count to the SELECTION so 2 packs always
split the full width in halves and 3 in thirds — no phantom empty column.
The unqualified rules keep the old breakpoint behavior as a fallback if the
attribute is ever missing; the attribute selectors win by specificity. */
@media (min-width:1350px){
#tab-resultados .packs-grid.is-multi{ grid-template-columns:repeat(3, minmax(0,1fr)); }
#tab-resultados .packs-grid.is-multi[data-compare-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (min-width:1600px){
#tab-resultados .packs-grid.is-multi{ grid-template-columns:repeat(4, minmax(0,1fr)); }
#tab-resultados .packs-grid.is-multi[data-compare-cols="2"]{ grid-template-columns:repeat(2, minmax(0,1fr)); }
#tab-resultados .packs-grid.is-multi[data-compare-cols="3"]{ grid-template-columns:repeat(3, minmax(0,1fr)); }
}