/* ==================================================================== AUTÓNOMA · SOBERANÍA — TEMA "VIVO" (paleta alternativa) -------------------------------------------------------------------- Identidad más colorida y moderna, inspirada en las capas del terreno del hero: montaña carmín (energía), río teal (agua), bosque verde (alimento), sobre azul noche. ACTIVACIÓN: se agrega la clase .sob-vivid en (script temprano de header-autonoma.php, ?theme=vivid). Sin esa clase, este archivo NO aplica nada → la versión terrosa queda intacta. MODOS: oscuro (azul noche, DEFAULT al activar) y claro. El oscuro/claro lo maneja la clase .ly-dark-mode existente; acá damos paleta para ambos. ALCANCE: solo la herramienta (.aut-soberania). No toca el resto del sitio. Los colores de canvas/SVG (anillos, gráficos) los pone el JS leyendo la misma bandera .sob-vivid; acá van las superficies, bordes y barras. ==================================================================== */ /* Fondo de página (body global) — evita que el crema terroso asome por los márgenes. Scope con :has para tocar SOLO la página de la herramienta. */ .sob-vivid body:has(.aut-soberania){ background:#EEF2F7; } .sob-vivid.ly-dark-mode body:has(.aut-soberania){ background:#0B0F17; } /* ───────────────── PALETA · MODO CLARO (vivo) ───────────────── Basada en la referencia (imagen 3): predominan rojo, azul y verde petróleo, con variantes de tono entre medio. El rojo VIVO queda reservado casi exclusivamente al título del hero (--sob-title-accent); el acento general de interfaz (CTA, activos, hover) es ÁMBAR TIERRA — pocos usos, sobrios, de la misma familia que el mostaza de suelo. Energía usa un rojo APAGADO (terracota), distinto de ambos, para no competir con ninguno. */ .sob-vivid .aut-soberania{ --paper: #FFFFFF; /* tarjetas, inputs */ --ink: #10192A; /* texto (azul tinta) */ --muted: #566274; --rule: rgba(16,25,42,.12); --acc: #E0AC12; /* AMARILLO DORADO (16-jul: "muy naranja, debería ser más amarillo, menos terroso" — hue 37°→45°) */ --sob-title-accent: #E8402A; /* rojo vivo — SOLO el título del hero (fondo siempre oscuro) */ --sob-energy: #A3462E; /* terracota — energía, rojo apagado */ --sob-water: #1A7C9A; /* agua (azul petróleo) */ --sob-food: #1C8A5C; /* vegetación / alimento (verde petróleo) */ --sob-soil: #B9862E; /* suelo / tierra (mostaza) */ --sob-tint-a: #F6F8FB; /* bandas (clima / programa / diagnóstico) */ --sob-tint-b: #EEF2F7; --sob-tint-c: #E7EDF4; --sob-tint-ink:#10192A; } /* ───────────────── PALETA · MODO OSCURO (vivo, azul noche) ───────────────── */ .sob-vivid.ly-dark-mode .aut-soberania{ --paper: #161F2E; /* tarjetas elevadas sobre el fondo */ --ink: #ECE6D8; /* blanco cálido (como el título de la ref.) */ --muted: #8A98AB; --rule: rgba(255,255,255,.10); --acc: #F0C238; /* AMARILLO DORADO, brillante sobre navy (mismo ajuste de hue que el modo claro) */ --sob-energy: #C15D3E; /* terracota */ --sob-water: #1E88A8; /* azul petróleo */ --sob-food: #1F9E6E; /* verde petróleo */ --sob-soil: #CE9B43; /* mostaza */ --sob-tint-a: #0B0F17; /* azul noche, banda más profunda */ --sob-tint-b: #0E1420; --sob-tint-c: #111A28; --sob-tint-ink:#ECE6D8; } /* En vivo-oscuro las reglas viejas de dark-mode fuerzan texto #f2f0eb en algunos nodos; lo unificamos al blanco frío del tema. */ .sob-vivid.ly-dark-mode .aut-soberania :is(.axis__cap,.axis__ringnum span,.axis__plain,.axis__bar-v,.axis__data b,.aut-sob-res .big,.aut-sob-res .bd b){ color:var(--ink); } /* ───────────────── COLOR POR EJE — barras horizontales ───────────────── Los anillos ya llevan el color por eje (vía JS). Acá pintamos las barras de cobertura/macros con el mismo código: energía carmín, agua teal, alimento verde. Un solo set sirve para claro y oscuro. */ /* Dos tonos por eje: la PISTA es un tinte suave del color y el RELLENO el color pleno — como las barras de la referencia. */ .sob-vivid #sob-axis-energia .bar{ background:rgba(163,70,46,.15); } .sob-vivid #sob-axis-energia .bar i{ background:var(--sob-energy); } .sob-vivid #sob-axis-agua .bar{ background:rgba(26,124,154,.15); } .sob-vivid #sob-axis-agua .bar i{ background:var(--sob-water); } .sob-vivid #sob-foodSection .bar{ background:rgba(28,138,92,.15); } .sob-vivid #sob-foodSection .bar i{ background:var(--sob-food); } /* El superíndice "%" de cada eje toma su color (detalle de marca). */ .sob-vivid #sob-axis-energia .big sup{ color:var(--sob-energy); } .sob-vivid #sob-axis-agua .big sup{ color:var(--sob-water); } .sob-vivid #sob-foodSection .big sup{ color:var(--sob-food); } /* Título del hero: la 2ª línea ("cuando falle el sistema?") ahora usa el MISMO ámbar que el resto de los acentos de la interfaz (16-jul, pedido del usuario: "el título en rojo debería ser amarillo, porque los acentos ahora son amarillos"). Antes usaba su propia variable (--sob-title-accent, rojo vivo) para diferenciarse a propósito del --acc de interfaz — esa decisión queda revertida; ahora referencia var(--acc) directo (no una copia fija) para que quede sincronizado automáticamente sin importar el modo claro/ oscuro del tema vivid. --sob-title-accent queda definida pero sin uso, por si en el futuro se quisiera diferenciar de nuevo. */ .sob-vivid .aut-sob-h1 .sob-h1-accent{ color:var(--acc); } /* ═══════════════ SOBRIEDAD — el acento es ACENTO, no constante ═══════════════ --acc (ámbar) se reserva para pocas acciones reales: CTA y nav activa. El foco va aparte, siempre neutro (ver más abajo). Los valores y controles rutinarios van en neutro; las alertas y restricciones del territorio, en ámbar/mostaza de la misma familia — así la interfaz respira. */ /* Valores de slider: neutro legible, no rojo. */ .sob-vivid .aut-sob-io .field label .val, .sob-vivid .aut-sob-simplerow .field label .val{ color:var(--ink); } /* Thumbs y pista de slider: neutro sobrio, no rojo. */ .sob-vivid .aut-sob-io input[type=range], .sob-vivid .aut-sob-simplerow input[type=range]{ accent-color:var(--muted); } /* Encabezados de sección ("03 TU PROGRAMA", "04 LOS DATOS"): antes pasaban casi inadvertidos. Ahora marcan claramente el inicio de sección — un divisor arriba, número grande con color (sale del gold viejo), y título más grande y firme. */ .sob-vivid .aut-sob-steplabel{ align-items:baseline; border-top:1px solid var(--rule); padding-top:clamp(40px,5vw,66px); margin-top:6px; } .sob-vivid .aut-sob-steplabel .sub{ align-self:flex-start; } .sob-vivid .aut-sob-steplabel .n{ color:var(--sob-soil); opacity:.92; font-weight:400; font-size:clamp(36px,4.4vw,52px); } .sob-vivid .aut-sob-steplabel .h{ font-size:clamp(30px,3.8vw,44px); font-weight:600; } /* Sub-encabezados (los que NO abren sección numerada) no llevan divisor. */ .sob-vivid .aut-sob-steplabel--sub{ border-top:none; padding-top:clamp(18px,2.4vw,30px); margin-top:0; } /* ── Programa: el desplegable "¿Qué querés imaginar?" pasaba desapercibido, y el usuario DEBE actuar ahí. Se explica antes de elegir y se destaca visualmente. */ .aut-sob-intent__lead{ font-size:14px; line-height:1.55; color:var(--muted); max-width:640px; margin:8px 0 16px; } .sob-vivid .aut-sob-intent__q{ font-size:clamp(19px,2.2vw,26px); font-weight:600; color:var(--ink); display:block; } .sob-vivid .aut-sob-intent__select{ font-size:16px; font-weight:600; padding:15px 18px; border:2px solid var(--acc); border-radius:10px; background:var(--paper); color:var(--ink); max-width:520px; cursor:pointer; } .sob-vivid .aut-sob-intent__select:hover{ border-color:var(--acc); box-shadow:0 0 0 3px rgba(193,127,20,.16); } .sob-vivid.ly-dark-mode .aut-sob-intent__select:hover{ box-shadow:0 0 0 3px rgba(230,169,58,.18); } /* Foco (teclado/click): NEUTRO, no ámbar — el foco es una señal de interacción, no debe leer como acento de marca. */ .sob-vivid .aut-sob-intent__select:focus{ border-color:var(--ink); box-shadow:none; } /* MOSTAZA = restricción del territorio. Alertas de reserva/sequía en ámbar (no rojo) y notas de contexto territorial (habitabilidad, deshielo) con filete tierra. El rojo queda liberado para la marca. */ .sob-vivid .aut-sob-hint--warn{ background:rgba(185,134,46,.12); color:#9A6F22; } .sob-vivid .aut-sob-hint--warn::before{ background:#B9862E; } .sob-vivid.ly-dark-mode .aut-sob-hint--warn{ background:rgba(206,155,67,.16); color:#E3C079; } .sob-vivid.ly-dark-mode .aut-sob-hint--warn::before{ background:#CE9B43; } .sob-vivid .aut-sob-habnote, .sob-vivid .aut-sob-snownote{ border-left:3px solid var(--sob-soil); padding-left:12px; } /* Leyenda de las ruedas: la vieja (dots gold/verde/azul/rosa) es del sistema anterior de vueltas por color; en el tema vivo cada eje tiene su propio color y las vueltas se marcan por tono. Se intercambia por texto correcto. */ .rk-vivid{ display:none; } .sob-vivid .rk-earthy{ display:none; } .sob-vivid .rk-vivid{ display:inline; } /* (Override eliminado — 13-jul: pintaba el FAB con --paper/--ink, que en modo oscuro es azul marino sobre azul marino, casi invisible contra el mapa ("es transparente y no se ve", reporte del usuario). Tenía sentido cuando vivid era opt-in y el FAB era una pastilla ancha con texto; ahora que vivid es el tema por defecto y el FAB es un círculo de solo ícono, necesita ser inconfundible siempre — vuelve al degradé dorado de autonoma.css en cualquier tema.) */ /* ───────────────── HERO ───────────────── El hero ya es oscuro con la imagen de capas; solo reforzamos el acento y, en modo claro, evitamos que el velo lo aclare de más (queremos que el hero siga siendo el momento dramático aun con el resto de la página clara). */ .sob-vivid .aut-sob-hero__eyebrow{ color:rgba(236,230,216,.66); letter-spacing:.14em; } .sob-vivid .aut-sob-hero__cred{ color:rgba(236,230,216,.55); } /* Botón "COMENZAR/REEVALUAR" (clase real: .hsb-go — el fondo ya sale de --acc por el CSS base). Texto oscuro en vez de blanco: en modo oscuro --acc es un ámbar bastante claro y el blanco pierde contraste; el ink oscuro funciona sobre CUALQUIER tono de ámbar. El hover tenía un marrón viejo hardcodeado (#9a8550, del tema terroso) — se corrige a un ámbar más profundo. */ .sob-vivid .hsb-go{ color:#1B1508; } .sob-vivid .hsb-go:hover{ background:#A66B10; } .sob-vivid.ly-dark-mode .hsb-go:hover{ background:#C6931F; } /* Sección activa del subnav fijo: tenía un gold hardcodeado (#D2A24C) del tema anterior, ajeno a la paleta viva. */ .sob-vivid .hsb-subnav a.is-active{ color:var(--acc); background:rgba(230,169,58,.16); } /* ───────────────── FOCO — siempre NEUTRO, nunca ámbar/rojo ───────────────── El foco es una señal de interacción, no un acento de marca: no debe leer como alerta ni competir con el CTA. var(--ink) autoadapta — blanco cálido en oscuro, tinta oscura en claro — igual criterio que "Cómo calculamos" (ver abajo). Cubre el catch-all (:focus-visible) y los campos que ya traían un :focus explícito en ámbar/rojo desde el CSS base. */ .sob-vivid .aut-soberania :focus-visible{ outline-color:var(--ink); } .sob-vivid .aut-sob-searchbox input:focus, .sob-vivid .aut-sob-io select:focus, .sob-vivid .aut-sob-io input[type=number]:focus, .sob-vivid .aut-sob-cta input:focus, .sob-vivid .aut-sob-cta select:focus, .sob-vivid .aut-sob-hero__search input:focus, .sob-vivid .aut-sob-hero__search.is-pinned input:focus{ outline-color:var(--ink); } /* "Cómo calculamos →": no es un acento, es un link de encuadre — blanco puro en oscuro / negro puro en claro (var(--ink)) ya lo destaca por contraste, sin sumarle color de marca. */ .sob-vivid .aut-sob-scoreframe__link{ color:var(--ink); text-decoration-color:var(--rule); } .sob-vivid .aut-sob-scoreframe__link:hover{ text-decoration-color:var(--ink); } /* Chips del subnav / progreso activos: acento del tema (ámbar, uso acotado). */ .sob-vivid .aut-sob-progscore a.is-active, .sob-vivid #sob-subnav a.is-active{ color:var(--acc); }