:root { --bg: #f7f8fa; --surface: #ffffff; --surface-muted: #eef1f3; --ink: #14181d; --muted: #626c78; --line: #e2e6ea; --accent: #087f8c; --accent-strong: #05616b; --green: #2f9e44; --blue: #277da1; --yellow: #f9c74f; --orange: #f9844a; --red: #d9480f; --gray: #adb5bd; --shadow: 0 1px 2px rgba(20, 30, 38, 0.05), 0 1px 1px rgba(20, 30, 38, 0.04); --shadow-float: 0 16px 40px rgba(20, 30, 38, 0.16); } /* Modo oscuro: preferencia PERSONAL de cada usuario (guardada en su perfil, ver users.theme_preference), no del hotel -- por eso se activa con un atributo en puesto por JS al cargar sesion, no por prefers-color-scheme. Mismos nombres de variable que :root a proposito: todo lo que ya usa var(--x) se adapta solo, sin tocar cada regla. */ html[data-theme="dark"] { --bg: #10161a; --surface: #1a2126; --surface-muted: #212a30; --ink: #e9eef1; --muted: #93a1ab; --line: #2c363d; --gray: #5c6a73; /* --accent-strong se usa como COLOR DE TEXTO directo sobre --surface (ej. .ghost-button) -- el valor de modo claro (#05616b) es un teal oscuro pensado para leerse sobre blanco, casi invisible sobre superficie oscura (contraste real medido: 2.27, deberia ser 4.5+). --accent en cambio se usa sobre todo como FONDO de boton con texto blanco encima, eso ya funciona igual en los dos temas y no necesita cambiar. */ --accent-strong: #5eead4; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 1px 1px rgba(0, 0, 0, 0.25); --shadow-float: 0 16px 40px rgba(0, 0, 0, 0.55); } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button, input, select { font: inherit; } /* Los