/* ========================================================================== SinRutina Experience · TEMAS DE COLOR -------------------------------------------------------------------------- Aquí viven todas las paletas. Las páginas ya no deciden sus colores: cada una trae
y este archivo hace el resto. PARA CAMBIAR DE PALETA Cambia el data-tema en las tres páginas (index, anfitriones y el panel): data-tema="0" → como estaba antes del 27 de julio data-tema="1" → los colores de "Brand Image/Prueba 2/Prueba 1.jpeg" data-tema="marca" → los hex exactos de "Brand Image/Gama de Colores.jpeg" data-tema="3" → "Brand Image/Prueba 3/BRAND PROCESS - SIN RUTINA.pdf" (paleta, tipografías y logo; además usa marca.css) Este archivo gana sobre los colores que traen las páginas por dentro (el selector #sre-root[data-tema] pesa más que #sre-root a secas), así que no hay que tocar nada más para probar una paleta. ⚠️ OJO CON LOS NOMBRES DE LAS VARIABLES --pink, --orange, --blue, etc. son etiquetas heredadas, NO promesas de color. Lo que importa es el ROL que juega cada una en el sitio: --paper fondo de toda la página (el área más grande) --card tarjetas, KPIs y formularios --berry los bloques grandes: hero, marquesina, footer, etiquetas --orange botones principales --lime botón alterno y sección de misión --pink stickers, tarjeta de regalo, citas --blue bandas y banners informativos --cream barra superior y texto sobre fondos oscuros --ink texto y bordes de todo el sitio En la Prueba 1 varios roles cambiaron de color justamente para respetar la proporción de la imagen. Guíate por el rol, no por el nombre. ========================================================================== */ /* ========================================================================== PRUEBA 0 · Como estaba hasta el 27 de julio de 2026 ========================================================================== */ #sre-root[data-tema="0"]{ --pink: #F7B2BE; --orange: #FF4B00; --cream: #F6F1CF; --lime: #C9C84D; --blue: #CBDFF3; --berry: #9B1C50; --ink: #3A1220; --paper: #FBF8EA; --muted: #7d5a66; --card: #fff; --ink-rgb: 58,18,32; --green: #2e7d32; --red: #c62828; } /* ========================================================================== PRUEBA 1 · "Brand Image/Prueba 2/Prueba 1.jpeg" (activa hasta oct 2026) -------------------------------------------------------------------------- La imagen no es una paleta suelta: es un mapa de proporciones. El tamaño de cada bloque dice cuánto debe pesar ese color en el sitio. Medido: Rojo ladrillo #A82C22 34.9% ← el dominante Azul claro #D1E7FE 22.1% Crema #FFFADA 11.3% Chartreuse #BFCC24 10.9% Rosa #FFA6C4 10.7% Naranja #FFA84B 5.1% Azul marino #202EA9 5.1% Por eso los roles se reacomodaron: · El ladrillo se lleva los bloques más grandes (hero, marquesina, footer). Antes ese lugar lo tenía el naranja, que ahora pesa 5% y por eso quedó solo en los botones. · El azul claro, segundo en tamaño, se lleva las tarjetas y las bandas. · El crema es el fondo de la página. · El marino es la tinta: poquísima área, pero se ve en cada letra y borde. ========================================================================== */ #sre-root[data-tema="1"]{ --berry: #A82C22; /* ladrillo · hero, marquesina, footer, etiquetas */ --card: #D1E7FE; /* azul claro · tarjetas, KPIs, calendario */ --blue: #D1E7FE; /* azul claro · bandas y banners */ --paper: #FFFADA; /* crema · fondo de toda la página */ --cream: #FFFADA; /* crema · barra superior y texto sobre oscuro */ --lime: #BFCC24; /* chartreuse · botón alterno, sección de misión */ --pink: #FFA6C4; /* rosa · stickers, regalo, citas, avisos */ --orange: #FFA84B; /* naranja · botones principales, y nada más */ --ink: #202EA9; /* marino · TODO el texto y TODOS los bordes */ --muted: #4A52A0; /* marino aclarado · texto secundario */ --ink-rgb: 32,46,169;/* marino en RGB · sombras y velos */ --green: #1b5e20; /* verde oscurecido para que se lea sobre el azul */ --red: #c62828; } /* --- Reacomodos que exige la proporción de la imagen ---------------------- */ /* 1. EL CAMBIO MÁS VISIBLE: el hero deja de ser naranja y pasa a ladrillo. El naranja bajó a 5% y no puede ocupar el bloque más grande del sitio. Crema sobre ladrillo da 6.54:1, así que el titular se lee mejor que antes. */ #sre-root[data-tema="1"] .sre-hero{ background: var(--berry); } /* 2. Los botones son lo único naranja. El texto pasa a marino porque crema sobre naranja da 1.82:1 — se perdía por completo. Marino da 5.41:1. */ #sre-root[data-tema="1"] .sre-btn{ background: var(--orange); color: var(--ink); } #sre-root[data-tema="1"] .sre-btn.alt{ background: var(--lime); color: var(--ink); } #sre-root[data-tema="1"] .sre-btn.blue{ background: var(--pink); color: var(--ink); } /* 3. Marino sobre ladrillo da 1.51:1: los bordes desaparecían. Todo lo que va encima del ladrillo se delinea en crema. */ #sre-root[data-tema="1"] .sre-marquee, #sre-root[data-tema="1"] .sre-eyebrow, #sre-root[data-tema="1"] .sre-tag, #sre-root[data-tema="1"] .sre-mtag, #sre-root[data-tema="1"] .sre-paso, #sre-root[data-tema="1"] .sre-amt.active, #sre-root[data-tema="1"] .sre-cat.active{ border-color: var(--cream); } /* 4. El footer era casi negro. Ahora es ladrillo pleno con texto crema: es el segundo bloque más grande y ayuda a llegar al 35% del dominante. */ #sre-root[data-tema="1"] .sre-footer{ background: var(--berry); color: var(--cream); border-top: 3px solid var(--ink); } #sre-root[data-tema="1"] .sre-footer a{ color: var(--cream); } /* 5. La barra del panel: marino pleno. Es poca área y le da presencia al color que menos pesa. */ #sre-root[data-tema="1"] .sre-header{ background: var(--ink); color: var(--cream); } #sre-root[data-tema="1"] .sre-sel{ background: var(--blue); } /* 6. El aviso de demo traía amarillo de semáforo, fuera de paleta. */ #sre-root[data-tema="1"] .sre-demo{ background: var(--pink); color: var(--ink); border-color: var(--ink); } /* 7. Los campos de captura quedaban azul sobre azul. Van en crema. */ #sre-root[data-tema="1"] .sre-field input, #sre-root[data-tema="1"] .sre-field select, #sre-root[data-tema="1"] .sre-slot input, #sre-root[data-tema="1"] .sre-selrow select, #sre-root[data-tema="1"] .sre-search input{ background: var(--cream); color: var(--ink); } /* 8. Los días apagados del horario semanal necesitan distinguirse de los prendidos, que usan --card. */ #sre-root[data-tema="1"] .sre-dia{ background: var(--cream); } #sre-root[data-tema="1"] .sre-dia.on{ background: var(--card); } /* ========================================================================== MARCA · Los hex exactos de "Brand Image/Gama de Colores.jpeg" -------------------------------------------------------------------------- Se queda guardado como referencia: son los colores reales del archivo de marca, muestreados pixel por pixel. Ojo: cuatro de las seis parejas de esa imagen no se leen en tamaño de texto (rosa+naranja 1.96:1, crema+chartreuse 1.48:1). Funcionan ahí porque la tipografía es enorme. ========================================================================== */ #sre-root[data-tema="marca"]{ --pink: #F6B6B7; --orange: #FF4C02; --cream: #F8F4CF; --lime: #D0CF51; --blue: #D0E6FB; --berry: #99124A; --ink: #99124A; --paper: #F8F4CF; --muted: #A85B78; --card: #FFFCEB; --ink-rgb: 153,18,74; --green: #2e7d32; --red: #c62828; } #sre-root[data-tema="marca"] .sre-btn{ border-color: var(--cream); box-shadow: 4px 4px 0 var(--berry); } #sre-root[data-tema="marca"] .sre-btn.alt, #sre-root[data-tema="marca"] .sre-btn.blue, #sre-root[data-tema="marca"] .sre-btn.ghost{ border-color: var(--ink); } #sre-root[data-tema="marca"] .sre-footer{ background: var(--berry); color: var(--pink); border-top: 3px solid var(--cream); } #sre-root[data-tema="marca"] .sre-demo{ background: var(--blue); color: var(--berry); } #sre-root[data-tema="marca"] .sre-field input, #sre-root[data-tema="marca"] .sre-field select, #sre-root[data-tema="marca"] .sre-slot input{ background: #FFFDF2; } /* ========================================================================== PRUEBA 3 · "Brand Image/Prueba 3/BRAND PROCESS - SIN RUTINA.pdf" ← ACTIVA -------------------------------------------------------------------------- El brand book final. Cuatro colores más el crema de fondo de sus páginas, muestreados del PDF: Terracota #B24210 protagonista: hero, botones, titulares Azul #B3CCEA acento frío: botón alterno, bandas, stickers Vino #520405 tinta: todo el texto, bordes, marquesina, footer Hueso #F4F3EE tarjetas y texto sobre fondos oscuros Crema #FFFDF3 fondo de toda la página El brand book lo dice explícito: "el terracota funciona como protagonista, los tonos claros aportan aire y legibilidad, y los acentos en azul generan un contraste inesperado". Por eso el azul NO va en las tarjetas (como en la Prueba 1): va en acentos. Contraste (mínimo 4.5:1 para texto normal): vino sobre crema 14.94 · vino sobre hueso 13.71 · vino sobre azul 9.24 hueso sobre terracota 5.14 · terracota sobre crema 5.60 · azul sobre vino 9.24 ⚠️ Dos parejas del brand book NO sirven para texto chico, solo para elementos grandes o decorativos (como los círculos de su lámina de contrastes): terracota sobre azul 3.46 y vino sobre terracota 2.67. Las tipografías, el logo y los detalles de forma viven en marca.css. ========================================================================== */ #sre-root[data-tema="3"]{ --orange: #B24210; /* terracota · botones principales y acentos */ --berry: #520405; /* vino · marquesina, etiquetas, footer */ --lime: #B3CCEA; /* azul · botón alterno, misión */ --blue: #B3CCEA; /* azul · bandas y banners */ --pink: #B3CCEA; /* azul · stickers, hovers, seleccionados */ --cream: #F4F3EE; /* hueso · barra superior, texto sobre oscuro */ --card: #F4F3EE; /* hueso · tarjetas, KPIs, formularios */ --paper: #FFFDF3; /* crema · fondo de toda la página */ --ink: #520405; /* vino · TODO el texto y TODOS los bordes */ --muted: #7A3B2E; /* vino aclarado · ≥5:1 sobre crema, hueso y azul */ --ink-rgb: 82,4,5; --green: #1b5e20; --red: #c62828; /* Los colores de cada taller y de cada plan vienen de la base de datos con los hex viejos. datos.js los traduce a estas variables (sreTono). */ --tono-rosa: #B3CCEA; --tono-rosa-txt: #520405; --tono-naranja: #B24210; --tono-naranja-txt: #F4F3EE; --tono-crema: #F4F3EE; --tono-crema-txt: #520405; --tono-lima: #B24210; --tono-lima-txt: #F4F3EE; --tono-azul: #B3CCEA; --tono-azul-txt: #520405; --tono-berry: #520405; --tono-berry-txt: #B3CCEA; --tono-papel: #FFFDF3; --tono-papel-txt: #520405; }