/* ============================================================ SISTEMA DE TEMAS (design tokens) ------------------------------------------------------------ Todo el diseño se controla desde acá. Para cambiar el look completo, cambiá el atributo data-theme en (o usá el selector de abajo a la izquierda en la app). Para crear un tema nuevo: copiá un bloque [data-theme="..."], cambiale el nombre y los valores. Listo, sin tocar el resto. ============================================================ */ :root, [data-theme="fresco"] { /* color de marca / acento */ --accent: #0f6e56; --accent-strong: #085041; --accent-bright: #1d9e75; --accent-soft: #e1f5ee; --accent-soft2: #9fe1cb; --on-accent: #ffffff; /* texto sobre el acento */ /* superficies y texto */ --bg: #f4f8f6; /* fondo de la página */ --surface: #ffffff; /* tarjetas, paneles, barra */ --text: #16201d; --text-muted: #5c6b66; --border: #e3eae7; /* forma */ --radius: 14px; --shadow: 0 6px 24px rgba(4, 52, 44, .08); --shadow-lg: 0 24px 60px rgba(4, 52, 44, .18); /* tipografía */ --font-display: "Space Grotesk", "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; /* fondo del login */ --login-bg: radial-gradient(900px 500px at 15% 10%, rgba(29,158,117,.22), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(15,110,86,.20), transparent 60%), linear-gradient(135deg, #062a23, #0a3a30 60%, #04342c); /* estados (pills) */ --pill-info-bg: #e6effb; --pill-info-text: #2b6cb0; --pill-ok-bg: var(--accent-soft); --pill-ok-text: var(--accent-strong); --pill-danger-bg: #fdeaea; --pill-danger-text: #c0392b; --pill-warn-bg: #fff7ed; --pill-warn-text: #b45309; /* avisos flotantes */ --toast-bg: #16201d; --toast-text: #ffffff; } /* ---------- Tema oscuro ---------- */ [data-theme="noche"] { --accent: #2bb38a; --accent-strong: #1d9e75; --accent-bright: #3ed29f; --accent-soft: #11241d; --accent-soft2: #1c3a30; --on-accent: #04211a; --bg: #0d1411; --surface: #141d19; --text: #e9f2ee; --text-muted: #92a39c; --border: #26332d; --shadow: 0 6px 24px rgba(0,0,0,.35); --shadow-lg: 0 24px 60px rgba(0,0,0,.5); --login-bg: radial-gradient(900px 500px at 15% 10%, rgba(43,179,138,.18), transparent 60%), linear-gradient(135deg, #0a120f, #0d1812 60%, #060c0a); --pill-info-bg: #16263a; --pill-info-text: #8cc0f0; --pill-ok-bg: #10281f; --pill-ok-text: #5fd6aa; --pill-danger-bg: #33181a; --pill-danger-text: #f0928c; --pill-warn-bg: #332817; --pill-warn-text: #e0b06a; --toast-bg: #e9f2ee; --toast-text: #0d1411; } /* ---------- Tema cálido (coral) ---------- */ [data-theme="coral"] { --accent: #e2553d; --accent-strong: #c0432d; --accent-bright: #f47a63; --accent-soft: #fdeee9; --accent-soft2: #f6c3b7; --on-accent: #ffffff; --bg: #fbf6f4; --surface: #ffffff; --text: #2a1c18; --text-muted: #7a6661; --border: #efe2dd; --shadow: 0 6px 24px rgba(120,40,20,.08); --shadow-lg: 0 24px 60px rgba(120,40,20,.16); --login-bg: radial-gradient(900px 500px at 15% 10%, rgba(226,85,61,.22), transparent 60%), linear-gradient(135deg, #3a140c, #4a1a10 60%, #34120a); --pill-info-bg: #e9eefb; --pill-info-text: #3a5bd0; --pill-ok-bg: #e6f6ee; --pill-ok-text: #1d8a5a; --pill-danger-bg: #fdeaea; --pill-danger-text: #c0392b; --pill-warn-bg: #fff3e0; --pill-warn-text: #b5750a; --toast-bg: #2a1c18; --toast-text: #ffffff; } /* ---------- Tema sobrio (mono) ---------- */ [data-theme="mono"] { --accent: #16201d; --accent-strong: #000000; --accent-bright: #3a4a44; --accent-soft: #eef1f0; --accent-soft2: #d4dbd8; --on-accent: #ffffff; --bg: #f6f7f7; --surface: #ffffff; --text: #16201d; --text-muted: #6b7770; --border: #e4e8e6; --radius: 8px; --shadow: 0 6px 24px rgba(0,0,0,.06); --shadow-lg: 0 24px 60px rgba(0,0,0,.14); --font-display: "Inter", system-ui, sans-serif; --login-bg: linear-gradient(135deg, #1d2a26, #16201d 60%, #0c1310); --pill-info-bg: #eceff1; --pill-info-text: #44524c; --pill-ok-bg: #e9f1ed; --pill-ok-text: #1f5e46; --pill-danger-bg: #f6e9e9; --pill-danger-text: #a3302b; --pill-warn-bg: #f3efe6; --pill-warn-text: #7a5a1e; --toast-bg: #16201d; --toast-text: #ffffff; } /* ---------- Tema cálido (miel) ---------- */ [data-theme="miel"] { --accent: #c98a2b; --accent-strong: #a06b18; --accent-bright: #e0a64a; --accent-soft: #fbf0db; --accent-soft2: #f0d9a8; --on-accent: #ffffff; --bg: #faf6ef; --surface: #ffffff; --text: #241d12; --text-muted: #7a6c55; --border: #ece2d2; --radius: 16px; --shadow: 0 6px 24px rgba(120,84,16,.08); --shadow-lg: 0 24px 60px rgba(120,84,16,.16); --login-bg: radial-gradient(900px 500px at 15% 10%, rgba(201,138,43,.20), transparent 60%), linear-gradient(135deg, #3a2c10, #4a3a14 60%, #322610); --pill-info-bg: #e9eefb; --pill-info-text: #3a5bd0; --pill-ok-bg: #eef5ea; --pill-ok-text: #5a7a1e; --pill-danger-bg: #fdeaea; --pill-danger-text: #c0392b; --pill-warn-bg: #fbf0db; --pill-warn-text: #a06b18; --toast-bg: #241d12; --toast-text: #ffffff; } /* ============================================================ Aliases de compatibilidad: para que styles.css siga usando sus nombres viejos (--green-600, --ink, etc.) pero ahora manejados por el tema activo. No hace falta tocar styles.css. ============================================================ */ :root { --green-900: #04342c; --green-700: var(--accent-strong); --green-600: var(--accent); --green-500: var(--accent-bright); --green-100: var(--accent-soft2); --green-50: var(--accent-soft); --ink: var(--text); --muted: var(--text-muted); --bg-alt: var(--bg); } /* ============================================================ Selector de temas (herramienta para probar diseños). Es un ayudante de desarrollo — se puede sacar fácil después borrando el #theme-switcher de acá y de theme.js. ============================================================ */ #theme-switcher { position: fixed; bottom: 16px; left: 16px; z-index: 300; display: flex; align-items: center; gap: 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 30px; padding: 7px 12px; box-shadow: var(--shadow); font-family: var(--font-body); font-size: 12px; color: var(--text-muted); } #theme-switcher .ts-label { font-weight: 600; } #theme-switcher .ts-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; transition: transform .12s ease; } #theme-switcher .ts-dot:hover { transform: scale(1.12); } #theme-switcher .ts-dot.active { border-color: var(--text); transform: scale(1.12); }