/* =========================================================================== EasyTable · base.css — fundamentos --------------------------------------------------------------------------- Tokens (variables), reset, tipografía, botones, campos de formulario y utilidades genéricas reutilizables en todo el proyecto. Orden de carga: base → layout → components → screens. =========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap'); :root { --bg: #eef0f4; --card: #ffffff; --ink: #2a2a48; --ink-soft: #3c3c5c; --muted: #9097a8; --line: #eef0f3; --line-2: #e3e6ec; --crimson: #ef1149; --crimson-d: #d20c40; --green: #1fbf6c; --green-d: #18a85d; --amber: #f5a623; --navy: #29274b; --navy-solid: #29274b; /* fondos sólidos "navy" (botón, insignias…): NO cambia con el tema, a diferencia de --navy (que sí, porque también se usa como color de texto de encabezados). */ --purple: #a855f7; --blue: #3b82f6; --pink: #ec4899; --shadow: 0 8px 24px rgba(25, 28, 60, 0.06); --shadow-sm: 0 3px 10px rgba(25, 28, 60, 0.05); /* Tokens de superficie (además de --bg/--card) para que los rellenos tenues, inputs y overlays también respondan al tema oscuro. */ --surface-soft: #f4f6fb; --surface-soft-2: #e7ebf5; /* segundo tono del degradado de logo/avatar */ --input-bg: #ffffff; --overlay: rgba(40, 40, 70, .55); font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; } /* ---- Modo oscuro ---------------------------------------------------------- Se activa con [data-theme="dark"] en (ver script inline en dashboard.html + ET.setTheme en et-api.js). Solo remapea tokens: el resto del CSS ya consume var(--bg)/var(--card)/var(--ink)/etc., así que hereda el tema automáticamente donde se usan las variables. */ [data-theme="dark"] { --bg: #14141f; --card: #1c1c2c; --ink: #eef0f7; --ink-soft: #c7c9db; --muted: #8b8fa3; --line: #2a2a3d; --line-2: #34344a; --navy: #f3f4fb; --surface-soft: #262638; --surface-soft-2: #2f2f45; --input-bg: #20202f; --overlay: rgba(0, 0, 0, .65); --shadow: 0 8px 24px rgba(0, 0, 0, .45); --shadow-sm: 0 3px 10px rgba(0, 0, 0, .35); } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--ink); transition: background-color .15s, color .15s; } h1, h2, h3, h4 { margin: 0; } button { font: inherit; cursor: pointer; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); border-radius: 10px; padding: 9px 14px; transition: filter .12s, background .12s, border-color .12s, box-shadow .12s, transform .12s; } /* Botones claros (por defecto): fondo gris suave; botones de color: elevación */ button:hover:not(:disabled) { filter: brightness(.96); } .btn-crimson:hover:not(:disabled), .btn-green:hover:not(:disabled), .btn-amber:hover:not(:disabled), .btn-navy:hover:not(:disabled) { filter: brightness(1.1); box-shadow: 0 5px 16px rgba(20, 20, 50, .16); transform: translateY(-1px); } .btn-outline-green:hover:not(:disabled) { background: #e4f5ec; border-color: var(--green); filter: none; } button:disabled { opacity: .5; cursor: not-allowed; } .btn-crimson { background: var(--crimson); border-color: var(--crimson); color: #fff; font-weight: 600; } .btn-green { background: var(--green); border-color: var(--green); color: #fff; font-weight: 600; } .btn-amber { background: var(--amber); border-color: var(--amber); color: #fff; font-weight: 600; } .btn-navy { background: var(--navy-solid); border-color: var(--navy-solid); color: #fff; font-weight: 600; } .btn-outline-green { color: var(--green-d); border: 1.5px dashed var(--green); background: #f3fbf6; font-weight: 600; } /* Los