/* ================================================================ MexCloud — Sistema de diseño (núcleo de tokens y temas) ---------------------------------------------------------------- Hereda la identidad de WebDav MexMail: mismos nombres de token, misma estética base (radios, sombras, tipografía, densidad). Cuatro temas seleccionables (Fase 3): - Sistema → sin data-theme, sigue prefers-color-scheme. - Claro → [data-theme="claro"] (también el :root por defecto). - Oscuro → [data-theme="oscuro"]. - Alto contraste → [data-theme="contraste"]. Anti-parpadeo: aplicar el tema ANTES de pintar. En el , antes de este CSS: ================================================================ */ /* ---- Tipografía auto-hospedada (regla del proyecto: nada de CDN) ---- Fraunces solo la usa el tema «Vainilla». El navegador NO la descarga si ninguna regla activa la referencia, así que los demás temas no pagan estos 72 KB. */ /* Fraunces es una tipografía VARIABLE: un solo archivo cubre todo el rango de pesos, y se declara con `font-weight: 100 900` en vez de un @font-face por peso. Don Centavo la sirve tres veces (Regular/SemiBold/Black son el MISMO archivo, md5 idéntico) y lo mismo con Inter: son ~250 KB descargados de más. Aquí va una sola vez, 36 KB. */ @font-face { font-family: 'Fraunces'; src: url('/assets/fonts/Fraunces-Variable.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; } /* Baloo 2 (SIL Open Font License): redondeada y con mucho carácter, para el tema «Aventura». Variable y solo el subconjunto latino: 33 KB, y el navegador NO la descarga si ese tema no está puesto, igual que con Fraunces. */ @font-face { font-family: 'Baloo 2'; src: url('/assets/fonts/Baloo2-Variable.woff2') format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } /* ---- Estética base: tokens que los temas PUEDEN redefinir ---- Antes decía «que NO cambian entre temas». Se abrieron a propósito: un tema es una identidad completa (tipografía y forma), no solo una paleta. Como `:root` y `[data-theme=…]` tienen la MISMA especificidad, basta con que el bloque del tema vaya después en este archivo para que gane. */ :root { --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; --shadow-sm: 0 1px 3px var(--color-shadow); --shadow-md: 0 4px 6px var(--color-shadow); --shadow-lg: 0 10px 25px var(--color-shadow); --font-sans: 'Inter', system-ui, -apple-system, sans-serif; /* Tipografía de títulos. Por defecto la misma del cuerpo: así los temas actuales no cambian ni un pixel, y un tema con letra de display solo tiene que redefinirla. */ --font-title: var(--font-sans); --font-mono: 'JetBrains Mono', 'Fira Code', monospace; --font-size: 14px; --line-height: 1.6; --sidebar-width: 240px; --navbar-height: 56px; --transition: 0.2s ease; } /* ---- Scrollbars y controles nativos combinados con el tema ---- */ /* color-scheme hace que el navegador pinte controles nativos (y scrollbars por defecto) en claro u oscuro según el tema, evitando las barras blancas en oscuro. */ :root, [data-theme="claro"], [data-theme="contraste"], [data-theme="vainilla"] { color-scheme: light; } [data-theme="aventura"] { color-scheme: light; } [data-theme="oscuro"] { color-scheme: dark; } [data-theme="madrugada"] { color-scheme: dark; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-border) transparent; } /* WebKit/Blink: pulgar sutil (con «padding» por el borde transparente), pista invisible. */ ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-corner { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: 10px; border: 3px solid transparent; background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--color-text-muted); background-clip: padding-box; } /* ---- Claro (por defecto) — identidad WebDav MexMail ---- */ :root, [data-theme="claro"] { --color-bg: #f5f7fa; --color-surface: #ffffff; --color-surface-2: #eef1f6; --color-border: #d8dde6; --color-text: #1a202c; --color-text-2: #4a5568; --color-text-muted: #718096; --color-primary: #2563eb; --color-primary-h: #1d4ed8; --color-primary-fg: #ffffff; --color-success: #16a34a; --color-warning: #d97706; --color-danger: #dc2626; --color-info: #0891b2; --color-sidebar-bg: #eef1f6; --color-sidebar-fg: #334155; --color-sidebar-act: #2563eb; --color-shadow: rgba(0, 0, 0, 0.08); --color-overlay: rgba(0, 0, 0, 0.45); } /* ---- Sistema: sin data-theme, sigue al S.O. cuando prefiere oscuro ---- */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #263349; --color-border: #334155; --color-text: #f1f5f9; --color-text-2: #cbd5e1; --color-text-muted: #94a3b8; --color-primary: #3b82f6; --color-primary-h: #2563eb; --color-primary-fg: #ffffff; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #22d3ee; --color-sidebar-bg: #0f172a; --color-sidebar-fg: #94a3b8; --color-sidebar-act: #3b82f6; --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7); } } /* ---- Oscuro — identidad WebDav MexMail ---- */ [data-theme="oscuro"] { --color-bg: #0f172a; --color-surface: #1e293b; --color-surface-2: #263349; --color-border: #334155; --color-text: #f1f5f9; --color-text-2: #cbd5e1; --color-text-muted: #94a3b8; --color-primary: #3b82f6; --color-primary-h: #2563eb; --color-primary-fg: #ffffff; --color-success: #22c55e; --color-warning: #f59e0b; --color-danger: #ef4444; --color-info: #22d3ee; --color-sidebar-bg: #0f172a; --color-sidebar-fg: #94a3b8; --color-sidebar-act: #3b82f6; --color-shadow: rgba(0, 0, 0, 0.4); --color-overlay: rgba(0, 0, 0, 0.7); } /* ---- Alto contraste — accesibilidad (WCAG), bordes y texto reforzados ---- */ [data-theme="contraste"] { --color-bg: #ffffff; --color-surface: #ffffff; --color-surface-2: #f0f0f0; --color-border: #000000; --color-text: #000000; --color-text-2: #1a1a1a; --color-text-muted: #333333; --color-primary: #0033cc; --color-primary-h: #002499; --color-primary-fg: #ffffff; --color-success: #006600; --color-warning: #8a4b00; --color-danger: #cc0000; --color-info: #005580; --color-sidebar-bg: #000000; --color-sidebar-fg: #ffffff; --color-sidebar-act: #4d7fff; --color-shadow: rgba(0, 0, 0, 0.25); --color-overlay: rgba(0, 0, 0, 0.7); } /* ---- Vainilla — identidad de Don Centavo ------------------------------------ Un tema es más que una paleta: aquí cambian también la TIPOGRAFÍA de títulos (Fraunces, con serifa) y los RADIOS, que en Don Centavo son notablemente más redondeados. Por eso se abrieron esos tokens a los temas. Los neutros son CÁLIDOS (tiran a crema, no a gris) y las sombras van en marrón —rgba(61,40,23)— en vez de negro: una sombra negra sobre fondo crema se ve sucia. Los colores se toman tal cual del sistema de diseño de Don Centavo (doncentavo/public/css/variables.css); solo se traducen los nombres de token. ---------------------------------------------------------------------------- */ [data-theme="vainilla"] { /* Terracota. NO es el #d97742 exacto de Don Centavo: aquel es para una app móvil con texto de 18 px, donde basta 3:1; MexCloud usa 14 px y exige 4.5:1, y el original da 3.15:1 con letra blanca encima —botones ilegibles—. Se baja la luminosidad lo justo conservando tono y saturación, así que el color sigue siendo el mismo terracota. */ --color-primary: #bc5b26; --color-primary-h: #9d4c20; --color-primary-fg: #ffffff; /* El terracota original se conserva para adornos SIN texto encima (el propio Don Centavo lo usa como color de marca). */ --color-acento: #d97742; /* Neutros cálidos */ --color-bg: #faf6f0; --color-surface: #ffffff; --color-surface-2: #f5ebdd; --color-border: #e8ddd0; /* Texto: marrones, no grises */ --color-text: #3d2817; --color-text-2: #6b5544; --color-text-muted: #7e6f5f; /* el #9b8b7a original daba 3.06:1 sobre el crema */ /* Estados de Don Centavo, oscurecidos igual y por lo mismo: se usan de fondo con texto blanco (insignias, botones), y los tonos originales daban 2.4–2.5:1. */ --color-success: #578144; --color-warning: #9c6e16; --color-danger: #c84b4b; /* este ya cumplía (4.60:1) */ --color-info: #477ba6; --color-sidebar-bg: #f5ebdd; --color-sidebar-fg: #6b5544; --color-sidebar-act: #bc5b26; /* Sombras marrones, no negras */ --color-shadow: rgba(61, 40, 23, 0.12); --color-overlay: rgba(61, 40, 23, 0.45); /* Tipografía y forma: lo que de verdad distingue a Don Centavo */ --font-title: 'Fraunces', Georgia, 'Times New Roman', serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; } /* ---- Aventura ---- Nació de una nieta de tres años que, viendo MexCloud, pidió dibujos animados. Tenía razón: un gestor de archivos no está obligado a ser gris. Los colores son los de los cachorros de rescate que ve —rojo bombero, azul policía, amarillo de obra, verde y turquesa—, pero SIN el nombre ni nada de la marca: la paleta es de todos, la marca no. Los colores de dibujos animados tienen un problema: son luminosos, y sobre ellos el texto blanco no se lee. El amarillo vivo da 1.6:1 con letra blanca, cuando hace falta 4.5:1. Así que cada color de FONDO va oscurecido hasta cumplir, conservando su tono, y los tonos brillantes de verdad se reservan para adornos sin texto encima (`--color-acento`), que es donde alegran sin estorbar. */ [data-theme="aventura"] { /* Azul de patrulla. 6.0:1 con letra blanca. */ --color-primary: #1560c4; --color-primary-h: #0f52ac; --color-primary-fg: #ffffff; /* El amarillo de casco: SOLO para adornos, nunca con texto encima. */ --color-acento: #ffc414; /* Cielo despejado */ --color-bg: #eef6ff; --color-surface: #ffffff; --color-surface-2: #dceafc; --color-border: #b9d4f0; /* Texto azul marino, no gris: hasta las letras son del mundo del tema */ --color-text: #10243d; --color-text-2: #1b3a5c; --color-text-muted: #4f6a87; /* Los demás cachorros, en tonos que sí aguantan letra blanca encima */ --color-success: #1f7a3a; /* verde 5.38:1 */ --color-warning: #9c6600; /* ámbar 4.87:1 */ --color-danger: #d22a1e; /* rojo 5.13:1 */ --color-info: #0b7a8a; /* turquesa 5.04:1 */ --color-sidebar-bg: #dceafc; --color-sidebar-fg: #1b3a5c; --color-sidebar-act: #1560c4; /* Sombras azules, no negras */ --color-shadow: rgba(16, 36, 61, 0.14); --color-overlay: rgba(16, 36, 61, 0.45); /* Lo que de verdad lo hace alegre: letra redondeada y esquinas muy suaves. Los botones quedan como pastillas, que es como se ven los juguetes. */ --font-title: 'Baloo 2', ui-rounded, 'Segoe UI Rounded', system-ui, sans-serif; --radius-sm: 0.5rem; --radius-md: 0.9rem; --radius-lg: 1.4rem; } /* ---- Madrugada ---- Este lo elegí yo, y el nombre también. Es la hora en que se trabaja sin ruido y se piensa mejor; y es, literalmente, cuando este sistema hace lo suyo: los respaldos de las 3:30, las purgas, los crones que nadie mira. La idea es la contraria de «Aventura»: en vez de muchos colores alegres, UN solo acento —el cian de una pantalla encendida en una habitación a oscuras— sobre un azul de noche. Nunca negro puro: el negro absoluto contra texto claro deslumbra y cansa a las dos horas, que es justo cuando se usa un tema así. El detalle del que estoy más contento: el botón principal lleva texto OSCURO sobre el cian, no blanco. Da 7.8:1 en vez de los 2 y pico que daría el blanco, y de paso hace que lo importante brille de verdad en la pantalla. Los títulos van en monoespaciada. No es un guiño técnico gratuito: es letra de registro, de bitácora, de cosas anotadas con cuidado para que otro las lea después. Que es de lo que va todo esto. */ [data-theme="madrugada"] { /* La pantalla encendida. Con texto oscuro encima: 7.82:1. */ --color-primary: #4fb8c9; --color-primary-h: #63c9d9; --color-primary-fg: #0e1620; --color-acento: #7ad4e2; /* Noche azul, no negra */ --color-bg: #0e1620; --color-surface: #151f2b; --color-surface-2: #1c2836; --color-border: #293a4c; /* Texto de madrugada: alto contraste, sin llegar al blanco puro */ --color-text: #e8eef5; /* 15.6:1 */ --color-text-2: #a8b8c9; /* 9.0:1 */ --color-text-muted: #8fa2b7; /* 7.0:1 */ --color-success: #3fb984; --color-warning: #e0a340; --color-danger: #f0655f; --color-info: #5ec8d8; --color-sidebar-bg: #0b121a; --color-sidebar-fg: #8fa2b7; --color-sidebar-act: #4fb8c9; /* Sombras profundas y un velo denso: de noche, lo de detrás se aparta. */ --color-shadow: rgba(0, 0, 0, 0.55); --color-overlay: rgba(6, 11, 17, 0.78); /* Sobrio y nítido: esquinas discretas, nada de pastillas. */ --font-title: ui-monospace, 'JetBrains Mono', 'Cascadia Code', 'SF Mono', Menlo, Consolas, monospace; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; }