/* Fuentes editoriales del ecosistema (Instrument Serif titulos + Instrument * Sans cuerpo). @import aca las carga en TODAS las paginas del CRM que enlazan * tokens.css, sin tocar cada HTML. Permitido por la CSP (style-src googleapis). */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Instrument+Sans:ital,wght@0,400..700;1,400&display=swap'); /* ========================================== * DESIGN TOKENS — SyncroApp CRM (rebrand 2026-07-31: "Bruma") * ========================================== * REBRAND: paleta migrada de "Aurora Hibrida" (hielo+violeta neon sobre * dark casi-negro) a "Bruma" — fria y PASTEL, hermana del subsistema * Eventos/Anfitrion (que usa crema+sage). Bruma traduce esa calma a * familia FRIA: teal petroleo + lavanda + niebla, superficies claras. * * Pedido del founder (2026-07-31): "colores frios y pasteles como el * subsistema de eventos, adaptable a cualquier movil". * * Estrategia (igual que el rebrand anterior): mantener NOMBRES legacy * (--brand, --accent, --steel, --bg, etc.) para no romper codigo. Solo * cambian los VALORES. El modo CLARO pasa a ser el default (es donde el * pastel vive de verdad); el oscuro queda como variante petroleo suave. * NOTA: como el default de la app ahora es light, los valores de :root * son los CLAROS y body.dark-mode / body:not(.light-mode) legacy se * maneja en index.html — ver seccion 10. * * Paleta Bruma: * --brand = #33707e (teal petroleo — primario, AA sobre blanco) * --accent = #666fb2 (lavanda — secundario) * --steel = #46708e (azul niebla) * --cyan-deep= #3f8f8b (teal verdoso) * success = #4f7d62 (sage frio — guiño a Eventos #4A5E45) * danger = #b0473a (terracota — mismo danger de Eventos) * * Estructura: * 1. Colores brand (Bruma — LIGHT default) * 2. Colores semanticos (frios/muted) * 3. Superficies y texto (LIGHT default) * 4. Tipografia * 5. Espaciado * 6. Border radius * 7. Sombras * 8. Z-index * 9. Transiciones * 10. DARK MODE overrides (body.dark-mode — petroleo pastel) * 11. Pipeline tokens (legacy specifico de dominio) * ========================================== */ /* ============================================ * 1. COLORES BRAND — Bruma (LIGHT default) * ============================================ */ :root { /* Brand LAVANDA — primario. ALINEADO CON EL LANDING de Estudio (2026-08-04): la landing usa #6C5CA8 sobre crema lavanda #EDE9F6; la app estaba teal y el founder pidio que se parezcan. #6c5ca8 sobre blanco = 4.7:1 AA. */ --brand: #6c5ca8; /* lavanda-600 = brand exacto del landing */ --brand-hover: #574a8f; /* lavanda-700 — hover states */ --brand-light: #e8e4f4; /* lavanda pastel — backgrounds suaves, badges */ --brand-dark: #473d72; /* lavanda-800 — pressed states */ --brand-50: rgba(108, 92, 168, 0.05); /* hover muy sutil */ --brand-200: rgba(108, 92, 168, 0.22); /* bordes brand */ --brand-300: #b8acdc; /* chips, separadores pastel */ --brand-900: #3a325c; /* gradient inicio en CTAs */ /* Acento CIRUELA — secundario. Es el color de los CTA del landing (#2F2A45), usado para botones oscuros de alto contraste sobre la crema lavanda. */ --accent: #2f2a45; /* ciruela oscuro del landing (CTA) */ --accent-hover: #221e34; /* ciruela mas profundo */ --accent-light: #e8e4f4; /* lavanda pastel */ --accent-dark: #1a1727; /* ciruela pressed */ /* Acentos auxiliares — lavanda (alineados al landing) */ --steel: #746fb6; /* lavanda suave para gradientes */ --steel-hover: #6360a2; /* lavanda hover */ --cyan-deep: #7d6bb8; /* lavanda medio */ --cyan-deep-hover: #6c5ca8; /* lavanda hover */ --frost: #2f2a45; /* ciruela profundo sobre claro */ /* Glows (rgba suaves — pastel, nunca neon) */ --glow-brand: rgba(108, 92, 168, 0.20); --glow-accent: rgba(47, 42, 69, 0.18); --glow-steel: rgba(108, 92, 168, 0.16); /* ============================================ * 2. COLORES SEMANTICOS — frios/muted (familia Eventos) * ============================================ */ --color-success: #4f7d62; /* sage frio (Eventos usa #4A5E45) */ --color-success-bg: rgba(79, 125, 98, 0.12); --color-success-fg: #4f7d62; --color-success-strong: #3d6350; --color-warning: #96702d; /* gold muted (Eventos usa #C9A96E) */ --color-warning-bg: rgba(201, 169, 110, 0.16); --color-warning-fg: #96702d; --color-warning-strong: #7a5a22; --color-danger: #b0473a; /* terracota — MISMO danger de Eventos */ --color-danger-bg: rgba(176, 71, 58, 0.10); --color-danger-fg: #b0473a; --color-danger-strong: #8f382e; --color-info: #46708e; /* azul niebla */ --color-info-bg: rgba(70, 112, 142, 0.10); --color-info-fg: #46708e; --color-info-strong: #3a5e78; /* ============================================ * 3. SUPERFICIES Y TEXTO (LIGHT default — niebla fria) * ============================================ */ /* Backgrounds — crema lavanda del landing de Estudio (#EDE9F6) para que la app y su landing sean la misma piel (2026-08-04). */ --bg: #ede9f6; /* crema lavanda — fondo general (landing) */ --content-bg: #ede9f6; --sidebar-bg: #ffffff; /* sidebar blanco limpio */ --surface: rgba(255, 255, 255, 0.85); /* glass claro */ --surface-solid: #ffffff; /* cards */ --surface2: #e6e1f2; /* superficie elevada / hover (lavanda) */ --surface3: #ddd6ec; /* superficie max elevada (lavanda) */ /* Texto — slate frio, escala WCAG AA verificada contra los 3 fondos reales de la app: niebla #f2f6f7, card #ffffff y slate-50 #f8fafc. FIX 2026-08-01: --text3 era #66797f, que da 4.19:1 sobre la niebla y 4.36:1 sobre slate-50 — por debajo del minimo AA de 4.5 para texto normal (el comentario anterior decia "4.7:1 ✓" pero estaba medido contra blanco puro, no contra el fondo real). Como --text3 es el color de casi todos los subtitulos y descripciones de las vistas, el fallo se repetia en las 21 pantallas. #5c6f75 da 4.84 / 5.27 / 5.04 y sigue leyendose claramente como texto terciario. */ /* Texto — ciruela del landing. Contrastes medidos sobre la crema #ede9f6: #2f2a45 = 13.4:1, #4b4563 = 8.0:1, #625b7f = 4.9:1 (todos AA). */ --text: #2f2a45; /* Primario — ciruela landing 13.4:1 ✓ */ --text2: #4b4563; /* Secundario — 8.0:1 ✓ */ --text3: #625b7f; /* Terciario — 4.9:1 sobre crema ✓ */ /* Bordes — sutiles con hint lavanda */ --borde: #e2ddf0; --borde-strong: rgba(108, 92, 168, 0.25); --borde-input: #cec6e4; /* Grises legacy (mantener compat) */ --gris-1: #2f2a45; --gris-2: #4b4563; --gris-3: #625b7f; --gris-4: #e6e1f2; /* Los aliases semanticos y legacy NO se declaran aqui a proposito — viven en la seccion 3b (regla `body`), despues del dark-mode. Ver la explicacion del scope de var() alli. */ /* ============================================ * 4. TIPOGRAFIA — editorial del ecosistema (2026-08-04): Instrument Sans * en cuerpo + Instrument Serif en titulos. Fallbacks a Manrope/Inter. * ============================================ */ --font-sans: 'Instrument Sans', 'Manrope', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Instrument Serif', Georgia, 'Times New Roman', serif; --font-mono: 'Geist Mono', 'JetBrains Mono', 'SF Mono', 'Monaco', 'Cascadia Code', 'Roboto Mono', Consolas, monospace; /* Aliases SEMANTICOS de tipografia — usar ESTOS en los componentes (`font-family: var(--font-titulo)`), NUNCA 'Instrument...' hardcodeado. Cambiar la tipografia de TODA la plataforma = reasignar estas 2 lineas. */ --font-titulo: var(--font-serif); /* titulos / headings */ --font-cuerpo: var(--font-sans); /* cuerpo / UI */ /* Tamaño escala (typescale Major Third 1.250) */ --font-size-xs: 0.72rem; --font-size-sm: 0.85rem; --font-size-base: 1rem; --font-size-md: 1.05rem; --font-size-lg: 1.25rem; --font-size-xl: 1.5rem; --font-size-2xl: 1.875rem; --font-size-3xl: 2.25rem; --font-size-display: 3rem; /* Pesos */ --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --font-weight-extrabold:800; /* Line heights */ --line-height-tight: 1.2; --line-height-normal: 1.5; --line-height-relaxed: 1.7; /* Letter spacing */ --letter-spacing-tight: -0.025em; --letter-spacing-normal:0; --letter-spacing-wide: 0.04em; --letter-spacing-wider: 0.06em; /* ============================================ * 5. ESPACIADO * ============================================ */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* ============================================ * 6. BORDER RADIUS * ============================================ */ --radius-none: 0; --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 12px; --radius-2xl: 14px; --radius-3xl: 20px; --radius-full: 9999px; /* ============================================ * 7. SOMBRAS — Bruma (suaves y frias, sin neon) * ============================================ */ --shadow-xs: 0 1px 2px rgba(34, 50, 58, 0.06); --shadow-sm: 0 1px 3px rgba(34, 50, 58, 0.08), 0 1px 2px rgba(34, 50, 58, 0.05); --shadow-md: 0 4px 6px -1px rgba(34, 50, 58, 0.08), 0 2px 4px -2px rgba(34, 50, 58, 0.06); --shadow-lg: 0 10px 15px -3px rgba(34, 50, 58, 0.10), 0 4px 6px -4px rgba(34, 50, 58, 0.06); --shadow-xl: 0 20px 25px -5px rgba(34, 50, 58, 0.12), 0 8px 10px -6px rgba(34, 50, 58, 0.08); --shadow-2xl: 0 25px 50px -12px rgba(34, 50, 58, 0.20); /* Sombras coloreadas — halos pastel muy sutiles */ --shadow-brand-sm: 0 4px 14px var(--glow-brand); --shadow-brand-md: 0 10px 30px var(--glow-brand); --shadow-accent-sm: 0 4px 14px var(--glow-accent); --shadow-accent-md: 0 10px 30px var(--glow-accent); /* ============================================ * 8. Z-INDEX * ============================================ */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; --z-sidebar: 300; --z-modal-backdrop: 900; --z-modal: 1000; --z-popover: 1100; --z-toast: 1200; --z-tooltip: 1300; /* ============================================ * 9. TRANSICIONES * ============================================ */ --transition-fast: 150ms ease; --transition-base: 200ms ease; --transition-slow: 300ms ease; --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94); --ease-in-out-cubic: cubic-bezier(0.65, 0.05, 0.36, 1); --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1); } /* ============================================ * 10. DARK MODE OVERRIDES — Bruma nocturna (petroleo pastel) * ============================================ * IMPORTANTE (cambio de default 2026-07-31): el modo CLARO ahora es el * default (:root arriba). El oscuro se activa con body.dark-mode. * COMPAT: body.light-mode se mantiene como no-op inofensivo (los valores * ya son los claros) para que codigo/CSS legacy que la referencia no * rompa nada durante la migracion. */ body.dark-mode { --bg: #0c1417; /* petroleo profundo (no negro) */ --content-bg: #0c1417; --sidebar-bg: #101b1f; --surface: rgba(255, 255, 255, 0.04); --surface-solid: #101b1f; --surface2: #152227; --surface3: #1b2b31; --text: #eef4f5; --text2: #c6d4d6; --text3: #91a5a9; --borde: rgba(255, 255, 255, 0.07); --borde-strong: rgba(143, 212, 208, 0.18); /* hint teal pastel */ --borde-input: rgba(255, 255, 255, 0.10); --gris-1: #eef4f5; --gris-2: #91a5a9; --gris-3: #6d8287; --gris-4: #152227; /* Brand dark-mode: LAVANDA PASTEL (alineado al landing, claro sobre oscuro) */ --brand: #b8acdc; /* lavanda pastel — alto contraste sobre #0c1417 ✓ */ --brand-hover: #cabfe6; --brand-light: rgba(184, 172, 220, 0.12); --brand-dark: #9585c9; --brand-50: rgba(184, 172, 220, 0.06); --brand-200: rgba(184, 172, 220, 0.25); --brand-300: #b8acdc; --brand-900: #2b2547; /* Accent dark-mode: lavanda pastel mas claro */ --accent: #cabfe6; --accent-hover: #ddd4f0; --accent-light: rgba(202, 191, 230, 0.12); --accent-dark: #b8acdc; /* Auxiliares pastel nocturnos — lavanda */ --steel: #a7a0d6; --steel-hover: #bbb4e2; --cyan-deep: #b8acdc; --cyan-deep-hover: #cabfe6; --frost: #e8e4f4; /* Semanticos nocturnos — claros para contraste sobre petroleo */ --color-success: #6fae87; --color-success-bg: rgba(111, 174, 135, 0.12); --color-success-fg: #6fae87; --color-success-strong: #8fc4a3; --color-warning: #d0a95c; --color-warning-bg: rgba(208, 169, 92, 0.12); --color-warning-fg: #d0a95c; --color-warning-strong: #ddbe80; --color-danger: #d96c5e; --color-danger-bg: rgba(217, 108, 94, 0.12); --color-danger-fg: #d96c5e; --color-danger-strong: #e48d81; --color-info: #7fa9c4; --color-info-bg: rgba(127, 169, 196, 0.12); --color-info-fg: #7fa9c4; --color-info-strong: #9dbfd4; /* Glows nocturnos — pastel tenue, jamas neon */ --glow-brand: rgba(143, 212, 208, 0.25); --glow-accent: rgba(173, 182, 227, 0.25); --glow-steel: rgba(127, 169, 196, 0.22); /* Sombras nocturnas (mas profundas) */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.25), 0 1px 2px rgba(0, 0, 0, 0.15); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.30), 0 2px 4px -2px rgba(0, 0, 0, 0.20); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.35), 0 4px 6px -4px rgba(0, 0, 0, 0.25); --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.40), 0 8px 10px -6px rgba(0, 0, 0, 0.28); --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.55); } /* ============================================ * 3b. ALIASES SEMANTICOS Y LEGACY — se declaran sobre `body`, NO sobre :root * ============================================ * FIX 2026-08-01 (bug de texto invisible). * * Problema original: las vistas usan ~80 veces variables que nunca se * llegaron a definir — `var(--text-primary, #f1f5f9)`, * `var(--card-bg, #1e293b)`, `var(--border-color, #334155)`, etc. Al no * existir, el navegador aplicaba SIEMPRE el fallback, y todos esos * fallbacks son hexes del tema OSCURO. Mientras el default de la app fue * oscuro nadie lo noto; al pasar el default a claro (Bruma) quedo texto * casi blanco sobre fondo casi blanco. Caso real: el titulo "Empiece por * aqui" del dashboard era ilegible. * * Por que sobre `body` y no sobre `:root`: la sustitucion de var() se * resuelve EN EL ELEMENTO DONDE SE DECLARA la variable, y despues el valor * ya resuelto se hereda. Si se declarara `--text-primary: var(--text)` en * `:root` (o sea ), `--text` ahi vale siempre el color CLARO, porque * el override oscuro se declara sobre `body.dark-mode`. Resultado: en modo * oscuro los alias seguian devolviendo los colores claros (verificado: el * titulo quedaba #22323a sobre fondo #0c1417). * * Declarandolos sobre `body` la sustitucion ocurre en el mismo elemento que * recibe el override de tema, asi que `var(--text)` resuelve al valor * correcto en claro Y en oscuro con una sola declaracion. * ============================================ */ body { /* Aliases semanticos preferidos para codigo nuevo */ --color-bg: var(--bg); --color-surface: var(--surface-solid); --color-surface-alt: var(--surface2); --color-text-primary: var(--text); --color-text-secondary: var(--text2); --color-text-muted: var(--text3); --color-border: var(--borde); --color-border-strong: var(--borde-strong); /* Aliases LEGACY que las vistas ya usaban sin que existieran */ --text-primary: var(--text); /* Texto principal */ --text-secondary: var(--text2); /* Texto secundario */ --text-tertiary: var(--text3); /* Texto terciario / muted */ --text1: var(--text); /* Alias antiguo de --text */ --card-bg: var(--surface-solid); /* Fondo de tarjetas */ --border-color: var(--borde); /* Color de borde generico */ --verde: var(--color-success); /* Verde semantico (sage Bruma) */ --rojo: var(--color-danger); /* Rojo semantico (terracota Bruma) */ } /* ============================================ * 11. PIPELINE TOKENS (legacy domain-specific) — retintados Bruma * ============================================ */ :root { --cita-vencida-bg: rgba(176, 71, 58, 0.08); --cita-vencida-borde: rgba(176, 71, 58, 0.28); --cita-vencida-titulo: #b0473a; --cita-vencida-sub: #c4685c; --cita-futura-bg: rgba(201, 169, 110, 0.12); --cita-futura-borde: rgba(201, 169, 110, 0.35); --cita-futura-titulo: #96702d; --cita-futura-sub: #7a5a22; --cita-btn-eliminar-bg: rgba(176, 71, 58, 0.12); --cita-btn-eliminar-color: #b0473a; --cita-btn-iniciar-bg: rgba(79, 125, 98, 0.14); --cita-btn-iniciar-color:#4f7d62; } body.dark-mode { --cita-vencida-titulo: #d96c5e; --cita-vencida-sub: #e48d81; --cita-futura-titulo: #d0a95c; --cita-futura-sub: #ddbe80; --cita-btn-eliminar-color: #d96c5e; --cita-btn-iniciar-color: #6fae87; } /* ───────────────────────────────────────────────────────────────────────── HIGHLIGHT ON NAVIGATE — paleta Bruma (halo teal suave) ───────────────────────────────────────────────────────────────────────── */ .navegar-highlight { box-shadow: 0 0 0 2px var(--brand), /* teal: ring */ 0 0 12px 2px var(--glow-brand); /* halo difuso */ background-color: var(--brand-light) !important; transition: box-shadow 400ms ease-out, background-color 400ms ease-out; border-radius: 8px; outline: none; } @media (prefers-reduced-motion: reduce) { .navegar-highlight { transition: none; } } /* ───────────────────────────────────────────────────────────────────────── AURORA BACKGROUND — reusada por landing/marketing. Retintada Bruma: niebla teal + lavanda MUY sutil (pastel, no neon). ───────────────────────────────────────────────────────────────────────── */ .aurora-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .aurora-bg::before, .aurora-bg::after { content: ''; position: absolute; border-radius: 50%; filter: blur(120px); animation: aurora-float 18s ease-in-out infinite; } .aurora-bg::before { top: -15%; left: -10%; width: 60%; height: 60%; background: radial-gradient(circle, var(--brand-300, #93c2c9) 0%, transparent 70%); opacity: 0.18; } .aurora-bg::after { bottom: -20%; right: -15%; width: 65%; height: 65%; background: radial-gradient(circle, var(--accent) 0%, transparent 70%); opacity: 0.14; animation-delay: -9s; } @keyframes aurora-float { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(40px, -30px) scale(1.05); } 66% { transform: translate(-30px, 40px) scale(0.95); } } body.dark-mode .aurora-bg::before { opacity: 0.20; } body.dark-mode .aurora-bg::after { opacity: 0.16; } /* ───────────────────────────────────────────────────────────────────────── RESPONSIVE GUARANTEES (2026-07-31) — moviles de cualquier tamano Reglas globales de proteccion que aplican a las 32 vistas sin tocarlas. ───────────────────────────────────────────────────────────────────────── */ /* Tablas: nunca romper el layout — scroll horizontal contenido */ .tabla-scroll, .overflow-x-auto { overflow-x: auto; -webkit-overflow-scrolling: touch; } @media (max-width: 767px) { /* Cualquier tabla del contenido scrollea horizontalmente dentro de si misma en vez de estirar la pagina. FIX 2026-08-01: antes el selector era `#main-content table` — ese id NO EXISTE en index.html (el contenedor de vistas es `#content`), asi que la regla nunca se aplicaba a nada. Se corrige el selector y se usa el patron `width:max-content + min-width:100%`: cuando la tabla es angosta ocupa el 100% como siempre, y cuando es ancha scrollea sin romper el layout. */ #content table { display: block; width: max-content; min-width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* FullCalendar arma su grilla con anidadas y necesita el display nativo — si se convierten a block el calendario se desarma. */ #content .fc table { display: table; width: 100%; overflow: visible; } /* Inputs a 16px: evita el auto-zoom de iOS al enfocar campos */ input, select, textarea { font-size: 16px !important; } /* Touch targets: minimo recomendado 44px de alto en controles */ button, .sidebar-link, a.btn, [role="button"] { min-height: 42px; } /* Imagenes y video jamas desbordan (se reescalan manteniendo proporcion). FIX 2026-08-01: antes esta regla incluia `svg` y `canvas` con `height:auto`. En los con width/height explicitos (iconos Lucide, ilustraciones de los wizards) el `height:auto` pisaba el alto declarado y los deformaba; en los de Chart.js competia con el alto que la libreria calcula. Ahora solo se les limita el ancho maximo, que es lo unico necesario para que no desborden. */ img, video { max-width: 100%; height: auto; } svg, canvas { max-width: 100%; } } /* ========================================== * TITULARES EDITORIALES (2026-08-04) * Instrument Serif en h1/h2/h3 para alinear el CRM con las landings y el * resto del ecosistema. Peso 400 (unico que trae) + font-synthesis:none * para evitar negrita sintetica. Las clases utilitarias pueden sobrescribir. * ========================================== */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 400; font-synthesis: none; } /* ========================================== * ACENTOS POR APP (modelo "base comun + acento por app", 2026-08-11) * ========================================== * TODAS las apps comparten fondos, texto, tipografia, espaciado y componentes * (definidos arriba en :root). Lo UNICO que cambia por app es el COLOR DE * ACENTO (--brand y sus dos variantes). Aqui viven TODOS los acentos, en un * solo lugar: cambiar el color de una app = editar su linea; cambiar el de toda * la plataforma = editar el :root de arriba. * * USO: la app pone la clase en su (ej. ) y * enlaza este tokens.css. Sus componentes usan var(--brand) — nunca un hex. * * Colores = la identidad que cada app ya tiene en el chooser /mis-apps. * (Inerte hasta que cada app adopte la clase + reemplace sus hex por var()). * ========================================== */ /* FUENTE UNICA DE VERDAD del color de cada app. * * Estan en :root (no dentro de .app-*) a proposito: asi una app puede usar el * acento de otra sin adoptar todo el sistema de tokens. Academia, por ejemplo, * tiene su propia hoja de estilos y solo necesita var(--brand-academia) — si * los acentos vivieran unicamente dentro de .app-academia, tendria que poner * esa clase en el y heredaria tambien --bg, que en su caso significa * otra cosa (el blanco de sus tarjetas) y le romperia el diseño. * * CAMBIAR EL COLOR DE UNA APP = editar UNA linea de aqui. */ :root { --brand-estudio: #6c5ca8; /* lavanda */ --brand-talonario: #2e7d6b; /* teal */ --brand-eventos: #46708e; /* azul acero (color original de Anfitrion) */ --brand-academia: #3a6ea5; /* azul de estudio (diseño aprobado 2026-08-14) */ --brand-gastos: #1f6e60; /* verde petroleo */ } /* Cada app: su ACENTO propio + su FONDO FRIO propio (familia fria: lavanda, teal, azul acero, verde). Fondos claros y frios (pedido del founder). */ .app-estudio { --brand: var(--brand-estudio); --bg: #ede9f6; --surface2: #e6e1f2; --surface3: #ddd6ec; } .app-talonario { --brand: var(--brand-talonario); --bg: #e8f1ee; --surface2: #dcebe5; --surface3: #cfe1da; } .app-eventos { --brand: var(--brand-eventos); --bg: #e9eef3; --surface2: #dde6ee; --surface3: #cfdce7; } .app-academia { --brand: var(--brand-academia); --bg: #e9eef4; --surface2: #dde5ee; --surface3: #cfdae7; } .app-gastos { --brand: var(--brand-gastos); --bg: #e8f1ee; --surface2: #dcebe5; --surface3: #cfe1da; } /* Variantes derivadas del acento (hover mas oscuro, light muy tenue) para no tener que declarar 3 hex por app. color-mix tiene soporte amplio (2023+). */ .app-estudio, .app-talonario, .app-eventos, .app-academia, .app-gastos { --brand-hover: color-mix(in srgb, var(--brand) 82%, #000); --brand-light: color-mix(in srgb, var(--brand) 14%, #fff); --content-bg: var(--bg); /* mantener coherente el fondo de contenido */ }