:root{ --vw-volt:#C6F82B; --vw-volt-vivo:#D3FF4A; --vw-volt-tinte:rgba(198,248,43,.14); --vw-volt-halo:rgba(198,248,43,.34); --vw-fondo:#0B0F0E; --vw-superficie:#1C2422; --vw-superficie-alta:#232C2A; --vw-borde:#2E3A36; --vw-borde-fuerte:#6E7B76; --vw-texto:#F1F5F3; --vw-secundario:#8B948F; --vw-disponible:#3DE08A; --vw-ocupado:#FF5A5F; --vw-parcial:#FFB020; --vw-ubicacion:#4C9DFF; --vw-disponible-halo:rgba(61,224,138,.22); --vw-ocupado-halo:rgba(255,90,95,.22); --vw-parcial-halo:rgba(255,176,32,.22); --vw-ubicacion-halo:rgba(76,157,255,.22); /* El fallback dentro de var() no es cosmético: sin él, si el layout de /voltiway no montara las fuentes, font-family quedaría inválida y el texto heredaría Fraunces/Public Sans del sitio clínico. */ --vw-display:var(--font-vw-display,'Space Grotesk'),ui-sans-serif,system-ui,sans-serif; --vw-cuerpo:var(--font-vw-body,'Manrope'),ui-sans-serif,system-ui,sans-serif; --vw-r-sm:10px;--vw-r-md:14px;--vw-r-lg:20px;--vw-r-xl:28px;--vw-r-pastilla:999px; --vw-sombra:0 18px 44px rgba(0,0,0,.45); --vw-ritmo:clamp(56px,9vw,104px); --vw-caja:1080px; /* La tinta ENCIMA del Volt. Es el mismo carbón en los dos modos —igual que 'onPrimary' en app/src/theme.ts— y por eso es un token aparte y no --vw-fondo. Con --vw-fondo, en modo día el botón primario quedaba en verde oliva con texto casi blanco: 1.6:1, ilegible. */ --vw-sobre-volt:#0B0F0E; --vw-volt-sombra:rgba(198,248,43,.22); --vw-volt-sombra-fuerte:rgba(198,248,43,.34); /* El Volt cuando hace de TINTA —texto, enlace, anillo de foco, subrayado de la pestaña activa— en vez de relleno. En noche es el mismo Volt; en día tiene que oscurecerse o no se lee. Ver el bloque de modo día. */ --vw-volt-tinta:#C6F82B; } :root[data-tema='claro']{ --vw-volt:#94BC0F; /* * El Volt NO SIRVE como tinta sobre papel, ni siquiera el de día. * * #94BC0F sobre los tres fondos claros da 2,05:1 / 2,22:1 / 1,96:1. WCAG pide * 4,5:1 para texto y 3:1 para un anillo de foco. Cuando se estrenó el modo * día, ese verde arrastró 19 textos de la portada, el contador del mapa y el * foco de teclado de los 22 elementos alcanzables — todos ilegibles, y todos * en el modo que ve cualquiera con el móvil en claro. * * #556D06 da 5,42:1 / 5,87:1 / 5,18:1 sobre esos mismos tres fondos. Se * eligió midiendo, no a ojo: el primer candidato (#5F7A08) pasaba sobre el * fondo y sobre blanco, pero se quedaba en 4,33:1 sobre la superficie alta. * * El relleno sigue siendo #94BC0F: como fondo de un botón con tinta carbón * encima el contraste lo pone la tinta, no el verde. */ --vw-volt-tinta:#556D06; --vw-volt-vivo:#7EA00C; --vw-volt-tinte:rgba(148,188,15,.14); --vw-volt-halo:rgba(148,188,15,.30); --vw-volt-sombra:rgba(148,188,15,.26); --vw-volt-sombra-fuerte:rgba(148,188,15,.38); --vw-fondo:#F4F6F8; --vw-superficie:#FFFFFF; --vw-superficie-alta:#EEF1F4; --vw-borde:rgba(15,23,42,.12); /* Gris de componente: 5,3:1 sobre blanco, muy por encima del 3:1 que pide WCAG 1.4.11 para bordes que identifican un control. */ --vw-borde-fuerte:#5B6673; --vw-texto:#0F172A; --vw-secundario:#5B6673; --vw-disponible:#16A34A; --vw-ocupado:#DC2626; --vw-parcial:#D97706; --vw-ubicacion:#1D6FF2; --vw-disponible-halo:rgba(22,163,74,.18); --vw-ocupado-halo:rgba(220,38,38,.18); --vw-parcial-halo:rgba(217,119,6,.18); --vw-ubicacion-halo:rgba(29,111,242,.18); /* Sombra de tinta, no de negro puro: sobre papel el negro al 45% se ve sucio. */ --vw-sombra:0 18px 44px rgba(15,23,42,.12); } /* EL PANEL SIEMPRE ES DE DÍA (2026-08-23, piel CRM). * * /admin se comprometió con la piel clara y retiró el interruptor de tema, pero * sus tokens los redefine admin.css en [data-panel-admin], que es un * DESCENDIENTE del . Las dos piezas del cromo raíz —el banner de cookies * y el enlace de salto— cuelgan del , o sea POR ENCIMA de ese nodo, y * están escritas contra los --conv-* que aquí abajo se puentean a var(--vw-*): * a la altura del esos --vw-* seguían siendo los de NOCHE, así que abrir * el consentimiento estando en el panel sacaba una tarjeta carbón sobre el papel * del CRM. Aclarando la marca también en el mientras haya un panel * montado, el puente resuelve solo y no hay que duplicar ni un hex. * * VA EN UNA REGLA APARTE, no como segundo selector del bloque de arriba, y esa * es la razón de que DIA sea una constante: en una lista separada por comas, * un selector que el navegador no entiende TIRA LA REGLA ENTERA. Acoplar el * modo día de todo el sitio al soporte de :has() cambiaba un banner feo en el * panel por un sitio sin modo claro, que es mucho peor. * * No toca el sitio público: [data-panel-admin] solo lo pone app/admin/layout.tsx. * Y no le disputa nada al panel: es otro ELEMENTO (el ), no otra * especificidad — dentro de [data-panel-admin] manda su propia declaración. */ body:has([data-panel-admin]){ --vw-volt:#94BC0F; /* * El Volt NO SIRVE como tinta sobre papel, ni siquiera el de día. * * #94BC0F sobre los tres fondos claros da 2,05:1 / 2,22:1 / 1,96:1. WCAG pide * 4,5:1 para texto y 3:1 para un anillo de foco. Cuando se estrenó el modo * día, ese verde arrastró 19 textos de la portada, el contador del mapa y el * foco de teclado de los 22 elementos alcanzables — todos ilegibles, y todos * en el modo que ve cualquiera con el móvil en claro. * * #556D06 da 5,42:1 / 5,87:1 / 5,18:1 sobre esos mismos tres fondos. Se * eligió midiendo, no a ojo: el primer candidato (#5F7A08) pasaba sobre el * fondo y sobre blanco, pero se quedaba en 4,33:1 sobre la superficie alta. * * El relleno sigue siendo #94BC0F: como fondo de un botón con tinta carbón * encima el contraste lo pone la tinta, no el verde. */ --vw-volt-tinta:#556D06; --vw-volt-vivo:#7EA00C; --vw-volt-tinte:rgba(148,188,15,.14); --vw-volt-halo:rgba(148,188,15,.30); --vw-volt-sombra:rgba(148,188,15,.26); --vw-volt-sombra-fuerte:rgba(148,188,15,.38); --vw-fondo:#F4F6F8; --vw-superficie:#FFFFFF; --vw-superficie-alta:#EEF1F4; --vw-borde:rgba(15,23,42,.12); /* Gris de componente: 5,3:1 sobre blanco, muy por encima del 3:1 que pide WCAG 1.4.11 para bordes que identifican un control. */ --vw-borde-fuerte:#5B6673; --vw-texto:#0F172A; --vw-secundario:#5B6673; --vw-disponible:#16A34A; --vw-ocupado:#DC2626; --vw-parcial:#D97706; --vw-ubicacion:#1D6FF2; --vw-disponible-halo:rgba(22,163,74,.18); --vw-ocupado-halo:rgba(220,38,38,.18); --vw-parcial-halo:rgba(217,119,6,.18); --vw-ubicacion-halo:rgba(29,111,242,.18); /* Sombra de tinta, no de negro puro: sobre papel el negro al 45% se ve sucio. */ --vw-sombra:0 18px 44px rgba(15,23,42,.12); } /* La página de descarga (/descarga) vive SIEMPRE en modo día, sea cual sea el tema del visitante: es la cara de conversión y comparte familia visual con la landing Gallery. Misma mecánica y misma razón de regla INDEPENDIENTE que el panel: como socia de una lista por comas, un navegador sin :has() habría tirado el modo claro entero del sitio. */ body:has([data-pagina-dia]){ --vw-volt:#94BC0F; /* * El Volt NO SIRVE como tinta sobre papel, ni siquiera el de día. * * #94BC0F sobre los tres fondos claros da 2,05:1 / 2,22:1 / 1,96:1. WCAG pide * 4,5:1 para texto y 3:1 para un anillo de foco. Cuando se estrenó el modo * día, ese verde arrastró 19 textos de la portada, el contador del mapa y el * foco de teclado de los 22 elementos alcanzables — todos ilegibles, y todos * en el modo que ve cualquiera con el móvil en claro. * * #556D06 da 5,42:1 / 5,87:1 / 5,18:1 sobre esos mismos tres fondos. Se * eligió midiendo, no a ojo: el primer candidato (#5F7A08) pasaba sobre el * fondo y sobre blanco, pero se quedaba en 4,33:1 sobre la superficie alta. * * El relleno sigue siendo #94BC0F: como fondo de un botón con tinta carbón * encima el contraste lo pone la tinta, no el verde. */ --vw-volt-tinta:#556D06; --vw-volt-vivo:#7EA00C; --vw-volt-tinte:rgba(148,188,15,.14); --vw-volt-halo:rgba(148,188,15,.30); --vw-volt-sombra:rgba(148,188,15,.26); --vw-volt-sombra-fuerte:rgba(148,188,15,.38); --vw-fondo:#F4F6F8; --vw-superficie:#FFFFFF; --vw-superficie-alta:#EEF1F4; --vw-borde:rgba(15,23,42,.12); /* Gris de componente: 5,3:1 sobre blanco, muy por encima del 3:1 que pide WCAG 1.4.11 para bordes que identifican un control. */ --vw-borde-fuerte:#5B6673; --vw-texto:#0F172A; --vw-secundario:#5B6673; --vw-disponible:#16A34A; --vw-ocupado:#DC2626; --vw-parcial:#D97706; --vw-ubicacion:#1D6FF2; --vw-disponible-halo:rgba(22,163,74,.18); --vw-ocupado-halo:rgba(220,38,38,.18); --vw-parcial-halo:rgba(217,119,6,.18); --vw-ubicacion-halo:rgba(29,111,242,.18); /* Sombra de tinta, no de negro puro: sobre papel el negro al 45% se ve sucio. */ --vw-sombra:0 18px 44px rgba(15,23,42,.12); } /* DOS ATRIBUTOS, y la diferencia importa: [data-voltiway] — tokens, tipografía y color de Voltiway en un TROZO de página. Se puede montar dentro de la home de Impulsa PR sin contaminarla. [data-voltiway-pagina] — además, la página entera es de Voltiway: tiñe el , oculta el filete azul del otro sitio y retematiza el cromo (cookies, enlace de salto). Se separaron al montar la banda de Voltiway en la home: con un solo atributo, esa banda ponía la home ENTERA en negro. main.vwp y main.vwd siguen listados por compatibilidad mientras queden páginas sin migrar. */ [data-voltiway],main.vwp,main.vwd{ background:var(--vw-fondo);color:var(--vw-texto); font-family:var(--vw-cuerpo);-webkit-font-smoothing:antialiased; } /* El del sitio es papel cálido y asomaría como franja clara por encima y por debajo. El !important es necesario: el lleva el fondo en un STYLE EN LÍNEA y una declaración en línea gana a cualquier selector. */ body:has([data-voltiway-pagina]),body:has(main.vwp),body:has(main.vwd){background:var(--vw-fondo) !important} /* El filete de 2px en Azul Impulsa que corona todas las páginas es marca del otro sitio: sobre el carbón de Voltiway era una línea azul huérfana. */ body:has([data-voltiway-pagina])::before,body:has(main.vwp)::before,body:has(main.vwd)::before{display:none} /* ── Cromo del sitio que se cuela dentro de Voltiway ───────────────────────── Dos piezas se montan en el layout RAÍZ, o sea fuera de [data-voltiway], y por eso ningún selector descendiente las alcanza: el banner de cookies (el consentimiento es del dominio entero, tiene que salir también aquí) y el enlace de salto. Las dos están escritas contra los tokens --conv-*, así que en /voltiway aparecían tal cual el sitio clínico: tarjeta de papel blanco, titular en Fraunces y botón en Azul Impulsa sobre el carbón. No se duplica su marcado: se redefinen sus tokens en el mientras haya una página de Voltiway montada. Los contrastes resultantes están calculados: texto #F1F5F3 sobre superficie #1C2422 = 14.41:1; secundario #8B948F sobre la misma = 5.08:1; y carbón #0B0F0E sobre Volt (el botón principal) = 15.49:1, que es la única dirección legible del acento. */ body:has([data-voltiway-pagina]),body:has(main.vwp),body:has(main.vwd){ --conv-paper:var(--vw-fondo); --conv-bg-2:var(--vw-superficie-alta); --conv-bg-3:var(--vw-superficie); --conv-bg-overlay-2:rgba(11,15,14,.78); --conv-ink:var(--vw-texto); --conv-ink-2:var(--vw-secundario); --conv-muted:var(--vw-secundario); --conv-line:var(--vw-borde); --conv-line-strong:var(--vw-borde-fuerte); --conv-glass-medium:var(--vw-superficie); --conv-glass-divider:var(--vw-borde); /* El enlace del banner y el enlace de salto: Volt, no violeta. */ --conv-violet:var(--vw-volt); --conv-violet-2:var(--vw-volt); --conv-grad-cta:var(--vw-volt); --conv-font-display:var(--vw-display); --conv-font-body:var(--vw-cuerpo); --conv-radius-sm:var(--vw-r-sm); --conv-radius-md:var(--vw-r-md); --conv-radius-xl:var(--vw-r-xl); --conv-shadow-card:var(--vw-sombra); /* Panel "Necesarias" del modal de preferencias. Sin esto se queda con su lavado verde menta y el título —que ahora es --vw-texto— desaparece encima. Superficie alta en vez de un tinte verde a propósito: sobre #232C2A el gris secundario da 4.59:1, y sobre cualquier tinte de Disponible bajaba a 3.1:1. El "está siempre encendido" lo dice la pastilla y el borde, no el relleno. */ --conv-necesarias-fondo:var(--vw-superficie-alta); --conv-necesarias-borde:var(--vw-disponible); --conv-necesarias-pastilla-fondo:var(--vw-fondo); --conv-necesarias-pastilla-tinta:var(--vw-disponible); /* Pomo del interruptor encendido: carbón sobre Volt (15.49:1). */ --conv-switch-pomo-on:var(--vw-sobre-volt); } /* .conv-btn-primary cablea color:#fff a fuego para el azul del otro sitio. Sobre Volt eso da 1.13:1: hay que devolverlo a carbón. */ body:has([data-voltiway-pagina]) .conv-btn-primary, body:has(main.vwp) .conv-btn-primary, body:has(main.vwd) .conv-btn-primary{color:var(--vw-sobre-volt)} /* El enlace de salto usa las utilidades bg-primary/text-primary-foreground de Tailwind, que no pasan por --conv-*: se reasigna aquí para que al tabular no salte un rectángulo azul del sitio clínico sobre el carbón. */ body:has([data-voltiway-pagina]) a.sr-only, body:has(main.vwp) a.sr-only, body:has(main.vwd) a.sr-only{ --tw-bg-opacity:1; background-color:var(--vw-volt) !important; color:var(--vw-sobre-volt) !important; font-family:var(--vw-display); font-weight:700; } /* ── Ritmo y contenedor ─────────────────────────────────────────────────── */ .vw-seccion{position:relative;padding-block:var(--vw-ritmo)} .vw-seccion--superficie{background:var(--vw-superficie);border-block:1px solid var(--vw-borde)} .vw-caja{width:100%;max-width:var(--vw-caja);margin-inline:auto;padding-inline:clamp(20px,5vw,32px)} .vw-caja--estrecha{max-width:760px} .vw-caja--ancha{max-width:1240px} /* ── Tipografía ─────────────────────────────────────────────────────────── */ .vw-epigrafe{display:inline-flex;align-items:center;gap:10px;margin:0 0 14px; font-family:var(--vw-display);font-weight:700;font-size:.72rem;letter-spacing:.16em; text-transform:uppercase;color:var(--vw-volt-tinta)} .vw-epigrafe::before{content:"";flex:none;width:22px;height:6px;border-radius:var(--vw-r-pastilla);background:var(--vw-volt)} .vw-titular{margin:0;font-family:var(--vw-display);font-weight:700;letter-spacing:-.03em; color:var(--vw-texto);text-wrap:balance} .vw-titular--xl{font-size:clamp(2rem,7.2vw,3.4rem);line-height:1.04} .vw-titular--lg{font-size:clamp(1.55rem,4.6vw,2.3rem);line-height:1.1} .vw-titular--md{font-size:clamp(1.15rem,3.2vw,1.45rem);line-height:1.22;letter-spacing:-.02em} .vw-acento{color:var(--vw-volt-tinta)} .vw-lede{margin:16px 0 0;max-width:62ch;font-family:var(--vw-cuerpo); font-size:clamp(1rem,2.4vw,1.15rem);line-height:1.65;color:var(--vw-secundario);text-wrap:pretty} .vw-cifra{font-family:var(--vw-display);font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:-.02em;color:var(--vw-texto)} /* ── Superficies ────────────────────────────────────────────────────────── */ .vw-tarjeta{background:var(--vw-superficie);border:1px solid var(--vw-borde); border-radius:var(--vw-r-lg);padding:clamp(20px,4vw,28px);color:var(--vw-texto)} .vw-seccion--superficie .vw-tarjeta{background:var(--vw-superficie-alta)} .vw-tarjeta--interactiva{transition:transform .22s cubic-bezier(.22,1,.36,1),border-color .22s ease,box-shadow .22s ease} .vw-tarjeta--interactiva:hover{transform:translateY(-4px);border-color:var(--vw-volt-halo);box-shadow:var(--vw-sombra)} .vw-rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))} .vw-rejilla--amplia{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))} /* ── Botones ────────────────────────────────────────────────────────────── */ .vw-boton{display:inline-flex;align-items:center;justify-content:center;gap:10px; max-width:100%;text-align:center;font-family:var(--vw-display);font-weight:700; font-size:1rem;line-height:1.2;text-decoration:none;cursor:pointer; border:1px solid transparent;border-radius:var(--vw-r-pastilla); min-height:44px;padding:12px 24px; /* 44px = objetivo táctil mínimo */ transition:transform .18s ease,background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease} .vw-boton--lg{min-height:52px;padding:15px 30px;font-size:1.06rem} /* Carbón sobre Volt = 15.49:1. Es la ÚNICA dirección válida: texto claro sobre Volt da 1.13:1 y es ilegible. */ .vw-boton--primario{background:var(--vw-volt);color:var(--vw-sobre-volt);box-shadow:0 12px 34px var(--vw-volt-sombra)} .vw-boton--primario:hover{background:var(--vw-volt-vivo);transform:translateY(-2px);box-shadow:0 16px 42px var(--vw-volt-sombra-fuerte)} .vw-boton--secundario{background:transparent;border-color:var(--vw-borde-fuerte);color:var(--vw-texto)} .vw-boton--secundario:hover{border-color:var(--vw-volt-tinta);color:var(--vw-volt-tinta);background:var(--vw-volt-tinte)} .vw-boton--discreto{background:transparent;color:var(--vw-secundario);padding-inline:10px} .vw-boton--discreto:hover{color:var(--vw-texto)} .vw-boton[disabled],.vw-boton[aria-disabled="true"]{opacity:.5;pointer-events:none} /* ── Estados del mapa ───────────────────────────────────────────────────── */ .vw-punto{display:inline-flex;align-items:center;gap:11px;font-family:var(--vw-cuerpo); font-weight:600;font-size:.86rem;line-height:1.3;color:var(--vw-texto)} .vw-punto--chip{background:var(--vw-superficie);border:1px solid var(--vw-borde); border-radius:var(--vw-r-pastilla);padding:8px 15px;min-height:36px} /* Un chip dentro de una tarjeta o de una banda de Superficie sube un escalón para no desaparecer sobre su propio color. */ .vw-seccion--superficie .vw-punto--chip,.vw-tarjeta .vw-punto--chip{background:var(--vw-superficie-alta)} .vw-punto__bola{flex:none;width:10px;height:10px;border-radius:50%; background:var(--vw-punto-color);box-shadow:0 0 0 3px var(--vw-punto-halo)} .vw-punto--enfasis .vw-punto__etiqueta{color:var(--vw-punto-color)} .vw-punto__glosa{color:var(--vw-secundario);font-weight:500} .vw-leyenda{display:flex;flex-wrap:wrap;gap:10px;margin:0;padding:0;list-style:none} .vw-leyenda--columna{flex-direction:column;align-items:flex-start} /* ── Marca (imágenes recortadas a su caja óptica) ───────────────────────── */ .vw-logo,.vw-mascota{position:relative;display:inline-block;overflow:hidden;flex:none;line-height:0;vertical-align:middle} .vw-logo img,.vw-mascota img{position:absolute;max-width:none} /* Los dos logotipos horizontales llevan el fondo carbón COCIDO en el PNG (lo avisa la firma de ), así que en modo día quedan como un rectángulo negro recortado a cuchillo encima del papel. Redondeado se lee como lo que es —una placa de marca, igual que el distintivo del App Store que va al lado— en vez de como un recorte mal hecho. En modo noche el fondo del PNG y el de la página coinciden y no hay nada que redondear. */ :root[data-tema='claro'] .vw-logo{border-radius:9px} .vw-isotipo{display:inline-block;vertical-align:middle;flex:none} /* ── Enlaces y foco ─────────────────────────────────────────────────────── */ .vw-enlace{color:var(--vw-volt-tinta);text-decoration:underline;text-underline-offset:3px; text-decoration-color:var(--vw-volt-halo);transition:text-decoration-color .18s ease,color .18s ease} .vw-enlace:hover{text-decoration-color:var(--vw-volt-tinta)} [data-voltiway] :is(a,button,summary,[tabindex]):focus-visible, main.vwp :is(a,button,summary,[tabindex]):focus-visible, main.vwd :is(a,button,summary,[tabindex]):focus-visible{ outline:3px solid var(--vw-volt);outline-offset:3px;border-radius:4px} @media (prefers-reduced-motion:reduce){ .vw-boton,.vw-tarjeta--interactiva,.vw-enlace{transition:none} .vw-boton--primario:hover,.vw-tarjeta--interactiva:hover{transform:none} }