: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); /* Sobre carbón la tinta ES el color vivo: #3DE08A da 10,9:1 y #FF5A5F 6,4:1. Los valores oscuros de la piel clara aquí serían ilegibles. Ver el bloque de día, donde estos cuatro cambian y aquellos no. */ --vw-disponible-tinta:#3DE08A; --vw-ocupado-tinta:#FF5A5F; --vw-parcial-tinta:#FFB020; --vw-ubicacion-tinta:#4C9DFF; /* 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); /* * LOS CUATRO SEMÁNTICOS CUANDO ESCRIBEN, no cuando rellenan. Misma historia * que --vw-volt-tinta y por la misma razón: el color de un pin no sirve como * tinta sobre papel. Los vivos de la noche dan 2,4 / 3,8 / 2,2 / 3,3:1 sobre * blanco; estos dan 4,9 / 6,5 / 4,8 / 6,9:1 en el peor de sus fondos * (el verde y el ámbar se oscurecieron el 2026-09-07: en su propio tinte se * quedaban en 3,80 y 3,93, y hasta ese día nadie lo había medido porque la * sonda de contraste creía estar mirando la piel clara y miraba la oscura). * * Los valores NO son nuevos: son los que admin.css ya tenía medidos para el * panel. Suben aquí porque el portal del operador los necesita igual. * * EL PANEL CONSERVA SU COPIA A PROPÓSITO, y esto es un ESPEJO: admin.css los * declara dentro de data-panel-admin, que es como declara toda su paleta, sin * depender de que el navegador entienda :has(). Si aquí cambia uno, tiene que * cambiar allí (admin.css, bloques de noche y de día) — y al revés. Los dos * sitios llevan este mismo aviso cruzado. * * (Sin tildes invertidas: este comentario vive DENTRO de una plantilla de * cadena y una sola la cerraría.) */ --vw-disponible-tinta:#136C34; --vw-ocupado-tinta:#B91C1C; --vw-parcial-tinta:#A04708; --vw-ubicacion-tinta:#1553C4; /* 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). * * El panel redefine sus tokens 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-*). Sin esta regla, * abrir el consentimiento estando en el panel saca una tarjeta con la piel del * SITIO sobre la del panel. * * ESTABA AL REVÉS (corregido el 2026-09-06). La escribió la etapa en la que el * panel vestía el CRM CLARO: aclaraba el para que el banner casara con * un panel de papel. Con el panel en carbón desde el rediseño «Tablero de * estación», lo que hacía era servir una tarjeta de papel sobre una página * negra — y obligaba a admin.css a ganarle el lienzo con un !important. * * Ahora sigue al TEMA, que es lo que tenía que haber hecho siempre: noche por * defecto, día cuando el visitante lo pide. * * VA EN REGLAS APARTE, no como segundo selector de los bloques de arriba, y esa * es la razón de que DIA y NOCHE sean constantes: en una lista separada por * comas, un selector que el navegador no entiende TIRA LA REGLA ENTERA. Acoplar * el tema de todo el sitio al soporte de :has() cambiaba un banner feo en el * panel por un sitio sin tema, 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:#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); /* Sobre carbón la tinta ES el color vivo: #3DE08A da 10,9:1 y #FF5A5F 6,4:1. Los valores oscuros de la piel clara aquí serían ilegibles. Ver el bloque de día, donde estos cuatro cambian y aquellos no. */ --vw-disponible-tinta:#3DE08A; --vw-ocupado-tinta:#FF5A5F; --vw-parcial-tinta:#FFB020; --vw-ubicacion-tinta:#4C9DFF; /* 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'] 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); /* * LOS CUATRO SEMÁNTICOS CUANDO ESCRIBEN, no cuando rellenan. Misma historia * que --vw-volt-tinta y por la misma razón: el color de un pin no sirve como * tinta sobre papel. Los vivos de la noche dan 2,4 / 3,8 / 2,2 / 3,3:1 sobre * blanco; estos dan 4,9 / 6,5 / 4,8 / 6,9:1 en el peor de sus fondos * (el verde y el ámbar se oscurecieron el 2026-09-07: en su propio tinte se * quedaban en 3,80 y 3,93, y hasta ese día nadie lo había medido porque la * sonda de contraste creía estar mirando la piel clara y miraba la oscura). * * Los valores NO son nuevos: son los que admin.css ya tenía medidos para el * panel. Suben aquí porque el portal del operador los necesita igual. * * EL PANEL CONSERVA SU COPIA A PROPÓSITO, y esto es un ESPEJO: admin.css los * declara dentro de data-panel-admin, que es como declara toda su paleta, sin * depender de que el navegador entienda :has(). Si aquí cambia uno, tiene que * cambiar allí (admin.css, bloques de noche y de día) — y al revés. Los dos * sitios llevan este mismo aviso cruzado. * * (Sin tildes invertidas: este comentario vive DENTRO de una plantilla de * cadena y una sola la cerraría.) */ --vw-disponible-tinta:#136C34; --vw-ocupado-tinta:#B91C1C; --vw-parcial-tinta:#A04708; --vw-ubicacion-tinta:#1553C4; /* 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); } /* AQUÍ VIVÍA «data-pagina-dia», y ya no existe (2026-09-06, 3ª vuelta). * * Era el interruptor que clavaba una página en modo día pasara lo que pasara: * lo estrenó /descarga cuando la conversión iba en papel y lo heredó el portal * del operador. /descarga lo soltó con la piel «Volt oscura»; el portal se * quedó con él, y por eso era la ÚNICA superficie del producto que ignoraba el * interruptor de la barra: quien elegía noche en voltiway.com entraba a su * portal y recibía papel. * * El comentario que había aquí decía que ya no lo ponía nadie. No era verdad — * app/operador/layout.tsx lo ponía— y una regla que se conserva «por si acaso» * con un consumidor que nadie recuerda es peor que no tenerla: parece muerta y * está viva. Ahora el portal sigue al tema como el sitio y el panel, y la regla * se retira en vez de quedarse sin consumidores. * * Si algún día hace falta otra vez una página anclada a una piel, el patrón * está dos bloques más arriba (el del panel) y en git. */ /* EL SITIO PÚBLICO VUELVE A OBEDECER AL INTERRUPTOR (2026-09-06, 2ª vuelta). * * NOTA PARA QUIEN EDITE ESTE COMENTARIO: está DENTRO de una plantilla de * cadena, así que una tilde invertida lo cerraría y el archivo dejaría de * compilar. Los nombres de selector y de archivo van aquí sin marcar. * * Aquí vivía una regla —:root[data-tema='claro']:has([data-landing='volt'])— * que reimponía la paleta de NOCHE en las páginas de la piel «Volt oscura». * Nació el día que el sitio se comprometió con el carbón: mientras la mitad * clara no estuviera escrita, un visitante con el sistema en claro recibía los * tokens --vw-* de DÍA dentro de una página negra, y la leyenda del mapa, el * popup del pin y el sello de verificado se perdían sobre el fondo. * * Se retira ahora que el modo día del sitio existe otra vez. El defecto NO * cambia: el :root{…} de arriba sigue siendo la noche, y el día solo se * pinta bajo [data-tema='claro'], que es lo que escribe el script del * cuando el visitante lo ha pedido con el interruptor de la barra. * * Queda dicho para el próximo que lo lea: los tokens --vw-* son solo la MITAD * del color de estas páginas. La otra mitad son los --vwl-* de * (sitio)/landing.module.css y el CSS_CROMO de _landing/base.ts, que * fijan el lienzo carbón por su cuenta. Un día completo necesita las tres * piezas de acuerdo; con esta sola, la página se queda oscura y los * componentes de marca se aclaran. */ /* 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} /* ── El interruptor de tema en la barra del sitio ──────────────────────────── OJO: este comentario viaja DENTRO de un elemento de estilo, así que no puede contener el signo «menor que». El parser HTML trata ese elemento como texto crudo, y un «menor que» suelto ahí dentro hacía que el árbol del servidor y el del cliente no coincidieran: React tiraba la hidratación de TODAS las páginas del sitio con el error 418, sin decir dónde. El botón lo pinta components/tema.tsx con la clase GLOBAL .boton-tema, y su hoja de siempre —components/marco.css— ya no la carga nadie: marco.tsx quedó huérfano al rehacerse el sitio. Su forma se le da aquí, que es la hoja global que todas las páginas de la piel ya montan (el componente TokensVoltiway). ACOTADO a [data-landing='volt'] por una razón concreta: esta hoja se emite TAMBIÉN dentro del panel, que tiene su propio .boton-tema en admin.css. Como esta hoja va en línea dentro del cuerpo —o sea después del CSS del panel—, una regla sin acotar le ganaría el empate de especificidad y le cambiaría el botón al panel desde otro archivo. El sitio marca su raíz con ese atributo y el panel no. Colores en tokens --vw-*, no en los --vwl-* de la barra: los --vw-* ya están partidos día/noche con sus contrastes medidos (ver el bloque DIA), así que el botón se lee en los dos modos pase lo que pase con la paleta de la landing. El tinte de hover es --vw-volt-tinta y no --vw-volt: sobre papel el Volt da ~2:1 y el aro desaparecería justo en el modo que este botón sirve. */ [data-landing='volt'] .vw-nav-acciones{display:flex;align-items:center;gap:12px} [data-landing='volt'] .boton-tema{ /* 44px = objetivo táctil mínimo, y además la altura exacta de la píldora «Descargar» que va al lado (9 + 26 + 9), así que los dos se alinean sin que nadie tenga que centrarlos a mano. */ width:44px;height:44px;flex:none; display:grid;place-items:center; border-radius:50%; border:1.5px solid var(--vw-borde); background:transparent; color:var(--vw-texto); transition:color .18s ease,border-color .18s ease; } [data-landing='volt'] .boton-tema:hover{color:var(--vw-volt-tinta);border-color:var(--vw-volt-tinta)} /* ── El interruptor de idioma (ES / EN), al lado del de tema ───────────────── Lo pinta lib/i18n/cliente.tsx con la clase GLOBAL .boton-idioma, y como el de tema, cada superficie lo viste: el portal en operador.module.css y el sitio aquí, acotado a [data-landing='volt'] por la misma razón de arriba. Mide 44px de alto para alinearse con el botón redondo y con la píldora «Descargar»; las dos pastillas de dentro no llegan a 44 cada una, pero la cápsula entera sí pasa el objetivo táctil. La activa lleva el Volt de relleno con tinta encima (el mismo par que el disco de la píldora). */ [data-landing='volt'] .boton-idioma{ flex:none;display:inline-flex;align-items:center;gap:2px; height:44px;padding:3px;box-sizing:border-box; border-radius:999px;border:1.5px solid var(--vw-borde); font-family:var(--vw-display);font-weight:700;font-size:.72rem;letter-spacing:.06em; } [data-landing='volt'] .boton-idioma button{ min-width:34px;height:36px;padding:0 9px;border:0;border-radius:999px; background:transparent;color:var(--vw-secundario);font:inherit;cursor:pointer; transition:background-color .16s ease,color .16s ease; } [data-landing='volt'] .boton-idioma button[aria-pressed='true']{background:var(--vw-volt);color:var(--vw-sobre-volt)} [data-landing='volt'] .boton-idioma button:not([aria-pressed='true']):hover{color:var(--vw-texto)} /* ── 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{ /* --vw-volt-tinta y no --vw-volt: es la misma decisión que ya tomó el panel para su --adm-foco. En noche los dos valen #C6F82B y no cambia nada; en día el Volt decorativo (#94BC0F) da ~2:1 sobre los tres fondos claros y WCAG 1.4.11 pide 3:1 para un indicador no textual — o sea que quien navega con teclado dejaba de ver dónde está en cuanto encendía el modo día. El paso de tinta (#556D06) da 5,18:1 en el peor de los tres. */ outline:3px solid var(--vw-volt-tinta);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} }

Map of EV chargers in Puerto Rico and Colombia