:root{ /* ═══ LA CARTA — paleta canónica (DESIGN.md · rediseño 2.5 · R0.1) ═══ */ --canvas:#101F17;--canvas-2:#0C1912; /* la página (bosque profundo · R12: un punto más honda para que el panel se despegue) */ --forest:#1E3A2F;--forest-soft:#2C4A3D; /* superficies oscuras intermedias */ --gold:#B8963E;--gold-bright:#D0AC52;--gold-deep:#8B6F2E;--gold-pale:#D9C58C; /* ═══ R12 (2026-07-10) · LA SUPERFICIE DE TRABAJO ES TEMA-DEPENDIENTE ═══ Hasta R11 estos 7 tokens vivían solo aquí con valores de PAPEL, y body.light no los redefinía: el trabajo ocurría sobre papel también en modo oscuro. Leo revirtió esa decisión — oscuro es oscuro, papel es el modo claro. Ahora :root = piel OSCURA y body.light = piel de PAPEL. Las ~305 referencias var(--surface|--ink|--line|…) repartidas por las hojas NO cambian: cambian de valor. Contrastes medidos sobre el panel #1A2F25: ink 11,49:1 · ink-soft 7,59:1 · ink-faint 5,38:1. Elevación página→panel ΔL* 7,2; panel→pozo ΔL* 3,9 (el papel vive con 3,6, así que el pozo se lee). */ --surface:#1A2F25;--surface-2:#142620; /* panel de trabajo · pozo (inputs) */ --ink:#ECE7D6; /* tinta sobre el panel */ --ink-soft:rgba(236,231,214,.78);--ink-faint:rgba(236,231,214,.62); --line:rgba(236,231,214,.12);--line-strong:rgba(236,231,214,.22); --on-dark:#ECE7D6;--on-dark-soft:rgba(236,231,214,.74); /* texto sobre lienzo */ --danger:#A4392B;--ok:#2E6B4F;--warn:#B07818; /* semánticos SÓLIDOS (fondos, color-mix) */ /* ═══ R12 · tinta legible sobre la superficie del tema activo ═══ Un color de TEXTO no puede ser el mismo en las dos pieles. Estos tokens resuelven al tono legible sobre --surface, sea papel o panel oscuro. --gold-on-surface sustituye al patrón que R10/R11 escribían a mano ocho veces (regla base --gold-bright + override body.light --gold-deep). Los sólidos de arriba se conservan para FONDOS: --danger sigue siendo el rojo macizo del hover de «borrar fila», y los color-mix() tiñen con él. OJO: hay que redeclararlos en body.light. var() dentro de una propiedad personalizada se sustituye en el elemento que la DECLARA (:root = ), no en el que la consume — no basta con que --pos/--neg volteen en . Sin --warn-on-surface a propósito: --warn no se usa como texto en ningún sitio (2 fondos color-mix + 1 border-color, que solo pide 3:1). */ --gold-on-surface:var(--gold-bright); /* 6,57:1 sobre el panel */ --danger-on-surface:var(--neg); /* 5,12:1 — el sólido da 2,17:1 */ --ok-on-surface:var(--pos); /* 8,36:1 — el sólido da 2,26:1 */ /* Tinta de los badges de ciclo de vida cuyo tono de oscuro no alcanzaba AA sobre su propia pastilla (los demás reusan --pos/--orange/--ink-soft/…). body.light los sobreescribe con sus tintas de papel. */ --badge-sent:#8ab8e6; /* 5,37:1 · era --blue #5c9ee0 → 3,96 */ --badge-rejected:#e89a95; /* 5,49:1 · era #e05c5c → 3,39 */ --bev-hide:#d99a9a; /* chip «ocultar bebida» (rojo apagado, distinto de --danger) */ --pos:#7ada9e;--neg:#e08080; /* salud de datos legible sobre lienzo oscuro (deltas, margen); light los sobreescribe */ --diff:rgba(184,150,62,.06); /* lavado del pack abierto. R12: en oscuro el oro ACLARA el panel y hunde la etiqueta del pack (#5c9ee0 caía a 4,05:1). A .06 todos pasan AA y el lavado sigue leyéndose (ΔL* 2,9). El claro conserva .14 en body.light. Un solo consumidor: .acc-item.is-open .acc-head (r11-results.css). */ /* R15 §3 · results rows: faint separation rule + clearly visible amber hover band + gold left edge. TEXT color does not change on hover (rule 10): the band is a wash that keeps AA in both skins. */ --row-line:rgba(236,231,214,.07); /* ~60% of --line's alpha (.12) */ --row-hover:rgba(212,175,55,.14); /* light gold over the dark panel */ --row-hover-edge:var(--gold-bright); /* 2px left edge */ --scrim:rgba(14,25,20,.72);--scrim-gate:rgba(14,25,20,.94);/* velo de diálogo (contextual · gate a pantalla completa) */ --amber:#D9A441; /* acento cerveza de tiro (data, distinto del oro de marca) */ --cat-spi:#c9a84c;--cat-vin:#a0c4ff;--cat-cer:#ffa07a;--cat-sft:#87d4e8;--cat-fru:#90ee90;--cat-con:#d4a0ff;--cat-hcl:#87ceeb;--cat-per:#98fb98;--cat-mob:#dda0dd; /* colores de categoría — gráfico de costes del dashboard */ /* Tipografía La Carta — Fraunces (marca) + Archivo (funcional) */ --serif:'Fraunces',Georgia,serif; --sans:'Archivo',system-ui,-apple-system,sans-serif; --t-2xl:2.4rem;--t-xl:1.9rem;--t-lg:1.3rem;--t-md:1.05rem;--t-base:.9rem;--t-sm:.8rem;--t-xs:.72rem;--t-2xs:.66rem; /* Espaciado 4pt + motion La Carta */ --sp-1:4px;--sp-2:8px;--sp-3:12px;--sp-4:16px;--sp-5:24px;--sp-6:36px;--sp-7:56px; --ease:cubic-bezier(.22,.68,.18,1);--dur:170ms; /* ═══ Alias legacy → repuntados a La Carta (los selectores existentes no cambian) ═══ */ --bg:var(--canvas);--bg2:var(--forest);--bg3:var(--forest-soft);--bg4:var(--canvas-2); --border:rgba(236,231,214,.14);--border2:rgba(236,231,214,.24); --gold2:var(--gold-bright);--gold-dim:rgba(184,150,62,.14); --text:var(--on-dark);--text2:var(--on-dark-soft);--text3:rgba(236,231,214,.52); --green:#4caf7a;--orange:#e8a87a;--blue:#5c9ee0;--red:#e05c5c; --r:6px;--r2:10px; /* === FOUNDATION TOKENS (Pase 1) === */ /* Radii — escala extendida (xs chips · sm controles · base cards · lg superficies grandes · pill) */ --r-xs:3px;--r-sm:4px;--r3:14px;--r4:18px;--r-pill:999px; /* Sombras — layered (highlight interno + drop ambient). Pensadas para superficies oscuras; light mode las sobreescribe. */ --shadow-sm:0 1px 2px rgba(0,0,0,.18); --shadow-md:0 4px 14px -3px rgba(0,0,0,.32), 0 1px 0 rgba(255,255,255,.04) inset; --shadow-lg:0 14px 36px -10px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.06) inset; --shadow-xl:0 24px 60px -16px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.08) inset; --shadow-inset-hairline:0 1px 0 rgba(255,255,255,.05) inset; --shadow-glow-gold:0 0 0 1px rgba(184,150,62,.4), 0 8px 24px -8px rgba(184,150,62,.45); --shadow-focus-gold:0 0 0 3px rgba(184,150,62,.28); /* Easings — curvas premium */ --ease-out:cubic-bezier(.2,.8,.2,1); --ease-soft:cubic-bezier(.4,0,.2,1); --ease-in-out:cubic-bezier(.65,0,.35,1); /* Duraciones — escala consistente */ --dur-fast:140ms; --dur-base:220ms; --dur-slow:320ms; --dur-slower:480ms; /* Variantes de oro — más allá del flat color */ --gold-soft:rgba(184,150,62,.06); --gold-mid:rgba(184,150,62,.22); --gold-glow:0 0 22px rgba(184,150,62,.32); --gold-shimmer:linear-gradient(135deg,#E0C078 0%,#D4B167 30%,#B8963E 55%,#8a6e2a 78%,#B8963E 100%); --gold-line:linear-gradient(90deg,transparent 0%,rgba(184,150,62,.55) 50%,transparent 100%); --gold-edge:linear-gradient(180deg,rgba(212,177,103,.5) 0%,rgba(184,150,62,.15) 100%); /* Z-index — tokens nombrados */ --z-sticky:50; --z-header:100; --z-overlay:1000; --z-modal:1500; --z-auth:2000; --z-toast:2500; --z-tooltip:3000; /* R11 · encima de todo: un tooltip nunca debe quedar tapado */ --z-banner:99999; --z-dialog:4000; /* confirm/alert — por encima de auth + modales */ /* Tipografía — feature flags (aplicados selectivamente más abajo) */ --num-tabular:'tnum' 1,'kern' 1,'calt' 1; /* Pack identity colors — coinciden con PACK_COLORS en results.js pero tokenizados para que el CSS los pueda usar sin estilos inline. */ --pack-standard:#5c9ee0; --pack-custom:#e8a87a; --pack-premium:#c9a84c; --pack-green:#4caf7a; /* Glint del shimmer del logo (más brillante que el oro base) */ --gold-glint:rgba(255,255,255,.55); /* ═══ R10 «oficio visual» — primitivas de sistema (S1, 2026-07-09) ═══ Consumidas por css/r10-system.css y por los packs P1–P4. Todo son lengths o alias a tokens theme-aware, así que ninguna necesita contraparte en body.light. OJO (R12, 2026-07-10): --surface/--ink/--line YA NO son estables entre temas —esa era la premisa de R10/R11 y se revirtió—, pero el par (superficie, tinta) sigue siendo AA en las DOS pieles: papel+tinta oscura en claro, panel oscuro+tinta crema en oscuro. Lo que dejó de valer es dar por hecho un COLOR concreto: un oro o un rojo escritos a pelo sobre --surface solo funcionan en una de las dos. Para eso están los tokens --gold-on-surface / --danger-on-surface / --ok-on-surface. */ --r10-measure:70ch; /* columna de lectura (rango 65–75ch, columna única) */ --r10-sheet-pad-x:clamp(var(--sp-5),4vw,var(--sp-7)); /* padding lateral de la hoja (24→56) */ --r10-sheet-pad-y:clamp(var(--sp-6),5vw,var(--sp-7)); /* padding vertical de la hoja (36→56) */ --r10-flow-field:var(--sp-3); /* ritmo vertical entre campos (nivel 3) */ --r10-flow-group:var(--sp-5); /* ritmo vertical entre grupos (nivel 2) */ --r11-day-inset:var(--sp-4); /* R11.1 · inset lateral ÚNICO del day card: lo declara la tarjeta y las cajas anidadas lo reponen tras sangrar, de modo que TODO el contenido comparte una columna */ --r10-flow-section:var(--sp-7); /* ritmo vertical entre secciones (nivel 1) */ --r10-price-size:3rem; /* cifra héroe (fija, sin clamp — ban de tipografía fluida) */ --r10-price-quiet-size:var(--t-lg); /* cifra de comparación silenciosa (1.3rem) */ --r10-pulse-dur:var(--dur-base); /* duración del latido del precio al recalcular (220ms) */ } *{box-sizing:border-box;margin:0;padding:0} body{ background:var(--bg);color:var(--text); font-family:var(--sans);font-size:14px;min-height:100vh; /* Foundation: typography refinement (sutil pero crisp en macOS y HiDPI) */ text-rendering:optimizeLegibility; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:'kern' 1,'liga' 1,'calt' 1; /* Reduce layout shift en transitions globales */ -webkit-tap-highlight-color:transparent; } /* === FOUNDATION TYPOGRAPHY HOOKS === Tabular numerals para alineación perfecta de cifras en columnas. Aplicado solo a selectores que muestran números (no afecta serifs/display). */ .acc-price,.cmp-price,.dash-kpi-value,.dtotal-v, .shop-grand-total,.shop-prov-total,.sl-val,.cock-count, .uprice,.dash-bar-label, .qty-inp,.qty-ed,.time-ed,.rate-ed, .glass-table td:last-child, .ctable td:not(:first-child), .staff-t td:not(:first-child), .acc-pack-tag,.day-tab-btn, .user-badge,.modal-ing-preview{ font-variant-numeric:tabular-nums; font-feature-settings:var(--num-tabular); } /* Display serif refinement — letter-spacing fino en titulares grandes */ .res-title,.day-sep,.empty-title,.modal-title,.auth-logo{ letter-spacing:-.01em; } /* Majúsculas pequeñas / mono micro — más aire para que no se peguen */ .sec-t,.dash-card-title,.ccat-t,.log-cat-title, .rblock-t,.day-sep-tag,.cock-group-title{ font-feature-settings:'kern' 1,'ss01' 1; } /* Reduced motion — respeta preferencia del sistema */ @media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; scroll-behavior:auto!important; } } /* HEADER */ .header{background:var(--bg2);border-bottom:1px solid var(--border);padding:0 24px;display:flex;align-items:center;justify-content:space-between;height:52px;position:sticky;top:0;z-index:100} .logo{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--gold)} .logo span{color:var(--text2);font-weight:400;font-size:12px;margin-left:9px;font-family:var(--sans)} .hact{display:flex;gap:7px;align-items:center} /* --- Overflow «⋯» del header (R1.2): dropdown de acciones secundarias --- */ .tb-overflow{position:relative;display:inline-flex} .tb-more-btn{line-height:1;font-size:16px;padding:6px 10px} .tb-more-menu{ position:absolute;top:calc(100% + 6px);right:0;z-index:var(--z-overlay); min-width:200px;padding:6px; background:var(--forest);border:1px solid var(--line-strong);border-radius:var(--r); box-shadow:var(--shadow-lg); display:flex;flex-direction:column;gap:2px; } .tb-more-menu[hidden]{display:none} .tb-more-item{ display:flex;align-items:center;gap:8px;width:100%;text-align:left; background:transparent;border:none;color:var(--on-dark); font-family:var(--sans);font-size:13px;letter-spacing:normal; padding:8px 10px;border-radius:var(--r-sm);cursor:pointer; transition:background var(--dur) var(--ease),color var(--dur) var(--ease); } .tb-more-item:hover{background:var(--forest-soft);color:var(--gold-bright)} .tb-more-item:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} /* LAYOUT — master-detail shell (R3.1 · rediseño 2.5): la config salió de la sidebar de 440px al lienzo. .sidebar se CONSERVA como panel ① (contrato Modo Alquiler / lock / light-mode lo leen por `.sidebar`). */ :root{ --ws-stepper-h:52px; --ws-rail-w:264px; } .main{display:grid;grid-template-columns:1fr var(--ws-rail-w);min-height:calc(100vh - 52px - var(--ws-stepper-h))} .sidebar{background:var(--bg2);border-right:1px solid var(--border);padding:18px;overflow-y:auto;max-height:calc(100vh - 52px)} .results-area{background:var(--bg)} /* ── Stepper: navegación de pasos, ancho completo bajo la topbar ── */ .ws-stepper{display:flex;align-items:stretch;gap:2px;height:var(--ws-stepper-h);padding:0 14px;background:var(--bg2);border-bottom:1px solid var(--border)} .ws-step{display:inline-flex;align-items:center;gap:9px;padding:0 16px;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text3);border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .ws-step:hover{color:var(--text2)} .ws-step:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .ws-step.active{color:var(--gold);border-bottom-color:var(--gold)} .ws-step-n{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--bg3);color:var(--text3);font-size:12px;font-weight:600;border:1px solid var(--border);transition:all .15s} .ws-step.active .ws-step-n{background:var(--gold);color:var(--bg);border-color:var(--gold)} .ws-step-l{white-space:nowrap} /* ── Lienzo (paneles ①②③) + rail ── */ .ws-canvas{overflow-y:auto;max-height:calc(100vh - 52px - var(--ws-stepper-h))} .ws-panel{display:none;padding:22px} .ws-panel.active{display:block} /* R8.3: se DESCARTÓ un fade de entrada en .ws-panel.active — animar opacity del panel pelea con las aserciones de nitidez del modo lectura (aprendizaje R6.4: el valor se muestrea a mitad de animación) y roza el ban de coreografía de carga (DESIGN.md). El motion de estado vive en el badge (.sbadge transition) y el subrayado del stepper. */ #ws-panel-resultados{padding:0} /* ① Evento reutiliza .sidebar: neutralizamos ancho fijo / scroll / borde de rail */ .ws-canvas .sidebar{max-width:840px;width:auto;max-height:none;overflow:visible;border-right:none;background:transparent;padding:22px} #ws-panel-dias{max-width:1120px} .ws-next{max-width:840px} /* ── Rail resumen (sticky a la derecha) ── */ .ws-rail{padding:20px 15px;background:var(--bg2);border-left:1px solid var(--border);overflow-y:auto;max-height:calc(100vh - 52px - var(--ws-stepper-h))} .ws-rail-h{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:14px} .ws-rail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px} .ws-rail-cell{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2,8px);padding:10px 12px} .ws-rail-wide{margin-bottom:10px} .ws-rail-k{font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--text3);margin-bottom:4px} .ws-rail-v{font-family:var(--serif);font-size:19px;font-weight:600;color:var(--text);font-variant-numeric:tabular-nums;line-height:1.1} .ws-rail-v.ws-rail-total{color:var(--gold)} .ws-rail-pending{font-family:var(--sans);font-size:12px;color:var(--text3)} .ws-rail-floor{margin-top:12px;padding:9px 11px;border-radius:var(--r2,8px);font-size:12px;line-height:1.35;background:rgba(217,164,65,.12);border:1px solid var(--amber,#D9A441);color:var(--amber,#D9A441)} /* R4.2: indicador "precios desactualizados" — el form de ② cambió desde el último cálculo (③ se refresca al abrir). */ .ws-rail-dirty{margin-top:12px;padding:8px 11px;border-radius:var(--r2,8px);font-size:11px;line-height:1.35;background:var(--gold-soft);border:1px solid var(--gold-mid);color:var(--gold-on-surface)} .ws-rail-dirty[hidden]{display:none} /* ── Paneles del rail (ext-rail-panels.js): desglose · por día · checklist ── */ .rail-p{margin-top:14px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2,8px);padding:10px 12px} .rail-p-h{font-size:10px;font-weight:600;letter-spacing:.05em;color:var(--text3);margin-bottom:8px} .rail-p-row{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--text2);padding:2px 0;font-variant-numeric:tabular-nums} .rail-p-row.rail-p-total{border-top:1px solid var(--border);margin-top:6px;padding-top:6px;color:var(--text);font-weight:600} .rail-p-row.rail-p-benef{color:var(--gold-on-surface);font-weight:600} .rail-p-empty{font-size:12px;color:var(--text3)} .rail-p-day{display:flex;justify-content:space-between;gap:8px;width:100%;background:none;border:none;border-bottom:1px solid var(--border);padding:6px 0;font-size:12px;color:var(--text2);cursor:pointer;text-align:left;font-variant-numeric:tabular-nums} .rail-p-day:last-child{border-bottom:none} .rail-p-day:hover{color:var(--text)} .rail-p-day-meta{color:var(--text3)} .rail-p-sig{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;padding:4px 0;font-size:12px;color:var(--text2);cursor:pointer;text-align:left} .rail-p-sig:hover{color:var(--text)} .rail-p-sig.is-ok .rail-p-mark{color:var(--ok-on-surface,var(--ok))} .rail-p-sig.is-todo .rail-p-mark{color:var(--text3)} .rail-p-sig.is-warn .rail-p-mark{color:var(--amber,#D9A441)} .rail-p-mark{width:14px;flex:none;text-align:center;display:inline-flex;align-items:center;justify-content:center} .rail-p-mark-dot{width:8px;height:8px;border-radius:50%;border:1.6px solid currentColor;display:inline-block} /* ── ① Evento — paso guiado (R3.2) ── */ .ws-panel-head{margin-bottom:20px;padding-bottom:16px;border-bottom:1px solid var(--border)} .ws-panel-title{font-family:var(--serif);font-size:26px;font-weight:600;color:var(--text);margin:0 0 5px;letter-spacing:-.01em} .ws-panel-sub{font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--text3);margin:0;max-width:54ch} .fr-hint{color:var(--text3);font-weight:400} /* ── R7 · Modo experto ── (rediseño 2.5) Un solo código, dos presentaciones. En experto: se ocultan los 4 pasos y la microcopy; el stepper colapsa a 2 superficies (.ws-xstep) y el display de los .ws-panel lo manda la superficie activa (no .active). Los 4 paneles siguen en el DOM — se re-coreografían. */ .ws-xstep{display:none;align-items:center;padding:0 18px;border:none;background:none;cursor:pointer;font-family:var(--sans);font-size:13px;font-weight:500;color:var(--text3);border-bottom:2px solid transparent;transition:color .15s,border-color .15s} .ws-xstep:hover{color:var(--text2)} .ws-xstep:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .ws-xstep.active{color:var(--gold);border-bottom-color:var(--gold)} body.bbp-expert .ws-step{display:none} body.bbp-expert .ws-xstep{display:inline-flex} /* Superficie: qué paneles se muestran (gana a .ws-panel.active por especificidad de id; sin !important para no romper la @media print que sí usa !important). */ body.bbp-expert .ws-panel{display:none} body.bbp-expert.bbp-surface-config #ws-panel-evento, body.bbp-expert.bbp-surface-config #ws-panel-dias{display:block} body.bbp-expert.bbp-surface-review #ws-panel-resultados, body.bbp-expert.bbp-surface-review #ws-panel-enviar{display:block} /* Experto = sin raíles: oculta la microcopy de paso y los CTA "Siguiente:". */ body.bbp-expert .ws-panel-sub, body.bbp-expert .ws-next{display:none} /* ── R7 · Overlay de atajos de teclado ── */ .bbp-shortcuts{position:fixed;inset:0;z-index:var(--z-modal,50);display:flex;align-items:center;justify-content:center;background:rgba(10,20,15,.55);padding:20px} .bbp-shortcuts[hidden]{display:none} .bbp-shortcuts-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--r,10px);box-shadow:var(--shadow,0 12px 40px rgba(0,0,0,.4));max-width:460px;width:100%;padding:20px 22px} .bbp-shortcuts-head{display:flex;align-items:center;justify-content:space-between;font-family:var(--serif);font-size:19px;font-weight:600;color:var(--text);margin-bottom:14px} .bbp-shortcuts-x{border:none;background:none;color:var(--text3);font-size:16px;cursor:pointer;line-height:1;padding:4px} .bbp-shortcuts-x:hover{color:var(--text)} .bbp-shortcuts-x:focus-visible{outline:2px solid var(--gold);outline-offset:2px} .bbp-shortcuts-list{display:grid;grid-template-columns:auto 1fr;gap:9px 16px;margin:0} .bbp-shortcuts-list dt{color:var(--text2);white-space:nowrap} .bbp-shortcuts-list dd{margin:0;color:var(--text3);font-size:13px} .bbp-shortcuts-list kbd{display:inline-block;font-family:var(--sans);font-size:11px;padding:1px 6px;border-radius:5px;background:var(--bg3);border:1px solid var(--border);color:var(--text2)} .sl-head-mt{margin-top:18px} /* Nudge anti-fantasma de comisión (D1): visible solo si hay comisión sin concierge. El attr `hidden` debe ganar a `display:flex` → regla [hidden]. */ .comm-nudge{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:10px;padding:10px 12px;border-radius:var(--r2,8px);background:rgba(217,164,65,.1);border:1px solid var(--amber,#D9A441)} .comm-nudge[hidden]{display:none} .comm-nudge-txt{flex:1;min-width:180px;font-size:12px;line-height:1.4;color:var(--amber,#D9A441)} .comm-nudge-btn{flex:none;padding:6px 12px;border-radius:6px;border:1px solid var(--amber,#D9A441);background:transparent;color:var(--amber,#D9A441);font-family:var(--sans);font-size:12px;font-weight:600;cursor:pointer;transition:background .15s,color .15s} .comm-nudge-btn:hover{background:var(--amber,#D9A441);color:var(--bg)} .comm-nudge-btn:focus-visible{outline:2px solid var(--gold);outline-offset:2px} /* TABS */ .tab-bar{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--bg2);position:sticky;top:0;z-index:50} .tab-btn{padding:10px 18px;font-size:12px;font-weight:500;color:var(--text3);cursor:pointer;border:none;background:none;font-family:var(--sans);letter-spacing:.03em;border-bottom:2px solid transparent;transition:all .15s} .tab-btn:hover{color:var(--text2)} .tab-btn:focus-visible{outline:2px solid var(--gold);outline-offset:-2px} .tab-btn.active{color:var(--gold);border-bottom-color:var(--gold)} .tab-content{display:none;padding:22px} .tab-content.active{display:block} /* SECTIONS */ .section{margin-bottom:18px} .sec-t{font-family:var(--sans);font-size:10px;font-weight:500;color:var(--gold);letter-spacing:.12em;text-transform:uppercase;margin-bottom:11px;display:flex;align-items:center;gap:8px} .sec-t::after{content:'';flex:1;height:1px;background:var(--border)} .sec-t.col{cursor:pointer;user-select:none}.sec-t.col:hover{color:var(--gold2)} /* FORMS */ .fr{margin-bottom:9px} .fr label{display:block;font-size:11px;color:var(--text2);margin-bottom:3px;font-weight:500;letter-spacing:.04em} .fr input,.fr select,.fr textarea{width:100%;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:13px;padding:7px 10px;border-radius:var(--r);outline:none;transition:border-color .15s} .fr input:focus,.fr select:focus{border-color:var(--gold)} .fr select option{background:#1e1e1e} .g2{display:grid;grid-template-columns:1fr 1fr;gap:8px} .g3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:6px} /* DAY CARDS */ .day-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--r2);padding:14px;margin-bottom:12px;transition:border-color .15s} .day-card:hover{border-color:var(--border2)} .day-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;cursor:pointer} .day-label{font-weight:600;font-size:13px;color:var(--gold2);display:flex;align-items:center;gap:8px} .day-label input{background:transparent;border:none;color:var(--gold2);font-family:var(--sans);font-size:13px;font-weight:600;width:120px;outline:none;padding:2px 4px;border-bottom:1px dashed var(--border2)} .day-label input:focus{border-bottom-color:var(--gold)} .day-actions{display:flex;gap:5px} .day-del{background:none;border:1px solid var(--border);color:var(--text3);font-size:11px;padding:3px 8px;border-radius:var(--r);cursor:pointer;transition:all .15s} .day-del:hover{border-color:#e05c5c;color:#e05c5c} .day-toggle{background:none;border:none;color:var(--text3);font-size:10px;cursor:pointer;padding:3px 6px} .day-body{overflow:hidden;transition:max-height .3s ease} /* PACK CARDS — bloque eliminado en R8.4: el grid de packs murió en c7fbceb (pack seleccionado = acordeón); #day-N-packs no se renderiza desde entonces. */ /* TOGGLES */ .tgrid{display:grid;grid-template-columns:1fr 1fr;gap:5px} .tchip{display:flex;align-items:center;gap:6px;background:var(--bg);border:1px solid var(--border);border-radius:var(--r);padding:7px 9px;cursor:pointer;transition:all .15s;font-size:12px;user-select:none} .tchip.active{border-color:var(--gold);color:var(--gold2)} .tchip input{display:none} .tdot{width:7px;height:7px;border-radius:50%;border:2px solid var(--text3);flex-shrink:0;transition:all .15s} .tchip.active .tdot{background:var(--gold);border-color:var(--gold)} /* Chips especiales de "Bebidas a incluir" (ext-cocktails.js): ocupan 2 cols. Estilo en CSS (no inline) para que el estado .active dé feedback claro — antes el style inline pisaba el border/dot de .active y no se notaba. */ .solo-cocktails-chip,.hide-bev-chip{grid-column:span 2} .solo-cocktails-chip{background:linear-gradient(90deg,rgba(212,175,90,.10),rgba(212,175,90,.03));border-color:rgba(212,175,90,.45)} .solo-cocktails-chip .tdot{border-color:#d4af5a} .solo-cocktails-chip.active{background:rgba(212,175,90,.22);border-color:var(--gold);color:var(--gold2)} .solo-cocktails-chip.active .tdot{background:var(--gold);border-color:var(--gold)} .hide-bev-chip{background:linear-gradient(90deg,rgba(176,124,124,.10),rgba(176,124,124,.03));border-color:rgba(176,124,124,.4)} .hide-bev-chip .tdot{border-color:#c98b8b} .hide-bev-chip.active{background:rgba(176,124,124,.26);border-color:var(--bev-hide);color:#e3a9a9} .hide-bev-chip.active .tdot{background:var(--bev-hide);border-color:var(--bev-hide)} /* COCKTAIL SELECTOR */ .cock-group{margin-bottom:10px} .cock-group-title{font-size:10px;color:var(--text3);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px;padding-bottom:4px;border-bottom:1px solid var(--border)} .cock-chips{display:flex;flex-wrap:wrap;gap:5px} .cock-chip{background:var(--bg);border:1px solid var(--border);border-radius:99px;padding:4px 10px;font-size:11px;cursor:pointer;transition:all .15s;color:var(--text2)} .cock-chip.active{border-color:var(--gold);color:var(--gold2);background:var(--gold-dim)} .cock-chip.disabled{opacity:.35;cursor:not-allowed} /* R3.4: buscador + fila de sugeridos por tipo de evento en la carta */ .cock-search{width:100%;box-sizing:border-box;background:var(--bg3);border:1px solid var(--border);color:var(--text);font-family:var(--sans);font-size:12px;padding:6px 10px;border-radius:var(--r);outline:none;margin-bottom:8px;transition:border-color .15s} .cock-search:focus{border-color:var(--gold)} .cock-search::placeholder{color:var(--text3)} .cock-suggested{margin-bottom:10px} .cock-suggested:empty{display:none} .cock-suggested-t{font-size:10px;color:var(--gold2);font-weight:500;letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px} /* R3.6: guion del día — cabecera + etiquetas de impacto en precio (afecta/no afecta) */ .gd-head{display:flex;align-items:center;gap:8px;margin:12px 0 4px} .gd-title{font-size:10px;color:var(--gold);font-weight:500;letter-spacing:.06em;text-transform:uppercase} .gd-help{font-size:11px;color:var(--text3);line-height:1.5;margin:0 0 8px} .gd-tag{font-size:9px;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 8px;border:1px solid var(--border);white-space:nowrap} .gd-price{color:var(--gold2);border-color:color-mix(in srgb,var(--gold) 45%,transparent);background:var(--gold-dim)} .gd-noprice{color:var(--text3);background:var(--bg)} .cock-count{font-family:var(--sans);font-size:11px;color:var(--text3)} .cock-warning{font-size:10px;color:var(--orange);margin-top:4px} /* SLIDER */ .slider-wrap{padding:2px 0 5px} .slider-wrap input[type=range]{width:100%;-webkit-appearance:none;height:3px;background:linear-gradient(to right,var(--gold) 0%,var(--gold) var(--pct,0%),var(--bg4) var(--pct,0%));border-radius:2px;outline:none;border:none;padding:0;cursor:pointer} .slider-wrap input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--gold);cursor:pointer;border:2px solid #0e0e0e} .sl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:5px} .sl-head label{font-size:11px;color:var(--text2);font-weight:500;letter-spacing:.04em} .sl-val{font-family:var(--sans);font-size:15px;font-weight:500;color:var(--gold2)} .sl-hint{font-size:10.5px;color:var(--text3);line-height:1.5;margin-top:6px} /* STATUS R12: la tinta de estas pastillas se mide CONTRA SU PROPIO fondo tintado —la pastilla aclara el panel y se come el contraste—, no contra el panel desnudo. Antes daba igual: en «Preparar» el panel era papel y una regla aparte (body.bbp-surface-config, ya retirada) las repintaba con tinta de papel. Ahora el panel es oscuro y esta regla es la única que manda en oscuro. Ratios sobre --surface #1A2F25: borrador 6,84 · enviado 5,37 · revisión 5,21 · aprobado 6,51 · pagado 4,59 · realizado 5,91 · rechazado 5,49 · cancelado 6,23. Bajar el alfa de la pastilla NO bastaba (rechazado topaba en 3,74:1). */ .sbadge{display:inline-flex;align-items:center;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px;letter-spacing:.03em} .st-borrador{background:rgba(90,88,86,.2);color:var(--ink-soft);border:1px solid var(--text3)} .st-enviado{background:rgba(92,158,224,.15);color:var(--badge-sent);border:1px solid rgba(92,158,224,.4)} .st-revision{background:rgba(232,168,122,.15);color:var(--orange);border:1px solid rgba(232,168,122,.4)} .st-aprobado{background:rgba(76,175,122,.15);color:var(--pos);border:1px solid rgba(76,175,122,.4)} .st-pagado{background:rgba(46,139,87,.18);color:#3fb87a;border:1px solid rgba(46,139,87,.5)} .st-realizado{background:rgba(134,211,144,.16);color:#9ad6a0;border:1px solid rgba(134,211,144,.45)} .st-rechazado{background:rgba(224,92,92,.15);color:var(--badge-rejected);border:1px solid rgba(224,92,92,.4)} .st-cancelado{background:rgba(90,90,90,.22);color:var(--on-dark-soft);border:1px solid rgba(140,140,140,.5)} /* BUTTONS */ .btn{display:inline-flex;align-items:center;gap:5px;padding:8px 13px;border-radius:var(--r);font-family:var(--sans);font-size:13px;font-weight:500;cursor:pointer;border:none;transition:all .15s} .btn-gold{background:var(--gold);color:#0e0e0e}.btn-gold:hover{background:var(--gold2)} .btn-ghost{background:transparent;color:var(--text2);border:1px solid var(--border2)}.btn-ghost:hover{border-color:var(--gold);color:var(--gold)} .btn-cal{background:rgba(76,175,122,.15);color:var(--green);border:1px solid rgba(76,175,122,.4)}.btn-cal:hover{background:rgba(76,175,122,.25)} .btn-sm{padding:4px 10px;font-size:11px} .btn-full{width:100%;justify-content:center} .btn-add{background:var(--gold-dim);color:var(--gold);border:1px dashed var(--gold);border-radius:var(--r);padding:10px;width:100%;text-align:center;cursor:pointer;font-size:12px;font-weight:500;transition:all .15s} .btn-add:hover{background:rgba(201,168,76,.2);border-style:solid} /* GLASS TABLE */ .glass-table{width:100%;font-size:12px;border-collapse:collapse} .glass-table td{padding:3px 0;vertical-align:middle} .glass-table td:first-child{color:var(--text2);padding-right:6px;font-size:11px} .glass-table td:last-child{text-align:right;font-family:var(--sans);color:var(--text3);font-size:11px;width:36px} .glass-table input{width:54px;padding:3px 6px;font-size:12px} /* RESULTS */ .res-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:18px} .res-title{font-family:var(--serif);font-size:26px;font-weight:600} .res-sub{font-size:11px;color:var(--text2);margin-top:2px;line-height:1.5} .res-badges{display:flex;gap:5px;flex-wrap:wrap;margin-top:5px;align-items:center} .badge-seg{background:rgba(76,175,122,.1);border:1px solid rgba(76,175,122,.3);color:var(--green);font-size:10px;font-weight:500;padding:2px 8px;border-radius:99px} /* COMPARE BAR — eliminado en R8.4: la compare-bar legacy no se renderiza; el comparador vivo es #event-summary-bar (ext-summary, con su