/* Sistema visual compartido por el panel, el móvil y la pantalla. * * El tema lo resuelve `static/js/theme.js` ANTES de pintar y lo deja en * ``, con la preferencia real (que puede ser «auto») en * `data-theme-pref`. Por eso aquí solo hay dos bloques de color y ninguno duplicado. */ :root { color-scheme: light; /* --- Superficies: papel cálido, nada de blanco clínico ------------------ */ --bg: #fbf6f1; --surface: #ffffff; --surface-2: #fdf8f3; --surface-sunken: #f6ede4; /* Manchas de color muy diluidas que dan profundidad al fondo. */ --aurora-1: rgba(240, 168, 106, 0.16); --aurora-2: rgba(168, 196, 214, 0.14); --aurora-3: rgba(226, 154, 168, 0.1); /* --- Tinta --------------------------------------------------------------- Los tres tonos llevan texto real (etiquetas, encabezados, autores de comentario), así que los tres cumplen 4.5:1. Un gris más claro se vería más «elegante» y sería ilegible para media oficina. */ --ink: #2b2420; --ink-2: #6c615a; --ink-3: #7b6f66; --line: #efe4d9; --line-soft: #f7f0e9; /* --- Acento naranja ------------------------------------------------------ `accent` es para rellenos, bordes y aros: cumple 3:1, que es lo que pide un elemento de interfaz. `accent-strong` va en texto y botones sólidos, donde hace falta 4.5:1. Es el naranja MÁS VIVO que cumple las tres medidas a la vez: como texto sobre el fondo (4.65:1), con blanco encima (4.99:1) y sobre el tinte suave (4.54:1). Si lo aclaras, alguna de las tres deja de cumplir. */ --accent: #e0701f; --accent-strong: #c34612; --accent-soft: #fef2ea; --accent-ring: rgba(224, 112, 31, 0.22); /* --- Marca del cliente --------------------------------------------------- Azul corporativo de Llumar, tomado del logotipo original. Da 10.2:1 sobre el fondo claro pero solo 1.7:1 sobre el oscuro, por eso hay dos versiones de cada imagen en static/img/ (la oscura va recoloreada a #9aa8f0). El naranja sigue siendo el color de ACCIÓN; este es solo el de IDENTIDAD. */ --brand: #283582; /* --- Señales pastel ------------------------------------------------------ */ --ok: #3f7a5e; --ok-soft: #e7f3ec; --ok-ring: rgba(63, 122, 94, 0.2); --alert: #be3d57; --alert-soft: #fce9ec; --alert-ring: rgba(190, 61, 87, 0.22); --info: #3c6e9f; --info-soft: #e9f0f7; /* --- Formas -------------------------------------------------------------- */ --r-sm: 10px; --r: 16px; --r-lg: 22px; --r-pill: 999px; --shadow-1: 0 1px 2px rgba(74, 50, 32, 0.05), 0 2px 8px rgba(74, 50, 32, 0.04); --shadow-2: 0 2px 6px rgba(74, 50, 32, 0.07), 0 14px 30px rgba(74, 50, 32, 0.08); /* --- Movimiento --------------------------------------------------------- Curvas de salida largas: la sensación es de algo que se posa, no que frena. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1); --t-fast: 0.16s; --t: 0.28s; --t-slow: 0.5s; --font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --bg: #17130f; --surface: #211b16; --surface-2: #1b1611; --surface-sunken: #14100c; --aurora-1: rgba(224, 112, 31, 0.16); --aurora-2: rgba(86, 126, 158, 0.14); --aurora-3: rgba(158, 84, 102, 0.1); --ink: #f4ece4; --ink-2: #b6a79b; --ink-3: #95867a; --line: #34291f; --line-soft: #261f18; --accent: #f2954f; --accent-strong: #ffb178; --accent-soft: #33231a; --accent-ring: rgba(242, 149, 79, 0.24); --ok: #6fc79c; --ok-soft: #17281f; --ok-ring: rgba(111, 199, 156, 0.2); --brand: #9aa8f0; --alert: #f08ba0; --alert-soft: #2c1a1e; --alert-ring: rgba(240, 139, 160, 0.24); --info: #8ab6e0; --info-soft: #16202b; --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3); --shadow-2: 0 2px 6px rgba(0, 0, 0, 0.45), 0 14px 30px rgba(0, 0, 0, 0.4); } /* ------------------------------------------------------------------- base */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--ink); line-height: 1.55; transition: background-color var(--t) var(--ease), color var(--t) var(--ease); } /* Manchas de color difuminadas detrás de todo: dan profundidad sin ruido y no interceptan ningún clic. */ body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(58rem 40rem at 12% -12%, var(--aurora-1), transparent 62%), radial-gradient(46rem 34rem at 104% 4%, var(--aurora-2), transparent 58%), radial-gradient(40rem 30rem at 50% 108%, var(--aurora-3), transparent 60%); } h1, h2, h3 { margin: 0; letter-spacing: -0.018em; line-height: 1.25; } h1 { font-size: 1.45rem; } h2 { font-size: 1.12rem; } p { margin: 0; } a { color: var(--accent-strong); } ::selection { background: var(--accent-ring); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } [hidden] { display: none !important; } /* ------------------------------------------------------------- movimiento */ @keyframes surgir { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @keyframes entrar-lateral { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; } } @keyframes marcar { 0% { transform: scale(0.4); opacity: 0; } 60% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1); opacity: 1; } } /* Latido lentísimo: llama la atención sin llegar a molestar en una pared. */ @keyframes latido { 0%, 100% { box-shadow: 0 0 0 0 var(--alert-ring); } 50% { box-shadow: 0 0 0 8px transparent; } } @keyframes respirar { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } /* Quien pide menos movimiento, no lo recibe. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } /* ---------------------------------------------------------------- botones */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; font: inherit; font-size: 0.9rem; font-weight: 560; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-pill); background: var(--surface); color: var(--ink); padding: 0.5rem 1rem; cursor: pointer; transition: transform var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease); } .btn:hover:not(:disabled) { border-color: var(--accent); transform: translateY(-1px); box-shadow: var(--shadow-1); } .btn:active:not(:disabled) { transform: translateY(0) scale(0.98); } .btn:disabled { opacity: 0.3; cursor: default; } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); border-color: var(--accent); } .btn-primary { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; align-self: flex-start; } :root[data-theme="dark"] .btn-primary { color: #2a1608; } .btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); box-shadow: var(--shadow-2); } .btn-quiet { background: transparent; border-color: transparent; color: var(--ink-2); } .btn-quiet:hover:not(:disabled) { background: var(--surface); color: var(--ink); } .btn-danger { background: transparent; color: var(--alert); border-color: transparent; } .btn-danger:hover:not(:disabled) { border-color: var(--alert); background: var(--alert-soft); } .btn-icon { padding: 0.3rem 0.55rem; line-height: 1; border-radius: var(--r-sm); } /* ---------------------------------------------------------------- señales */ .badge { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.68rem; font-weight: 680; text-transform: uppercase; letter-spacing: 0.06em; padding: 0.18rem 0.55rem; border-radius: var(--r-pill); vertical-align: middle; white-space: nowrap; } .badge-today { background: var(--accent-soft); color: var(--accent-strong); } .badge-carry { background: var(--alert-soft); color: var(--alert); text-transform: none; letter-spacing: 0; font-weight: 620; } .badge-rol { background: var(--info-soft); color: var(--info); } /* Punto de estado con halo: la señal más pequeña que se lee de lejos. */ .senal { flex: none; width: 0.62rem; height: 0.62rem; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-ring); transition: background-color var(--t) var(--ease), box-shadow var(--t) var(--ease); } .senal-ok { background: var(--ok); box-shadow: 0 0 0 4px var(--ok-ring); } .senal-alerta { background: var(--alert); box-shadow: 0 0 0 4px var(--alert-ring); } /* ------------------------------------------------------- selector de tema */ .tema { display: inline-flex; padding: 3px; gap: 2px; background: var(--surface-sunken); border: 1px solid var(--line); border-radius: var(--r-pill); } .tema-opcion { font: inherit; font-size: 0.78rem; font-weight: 580; line-height: 1; color: var(--ink-2); background: transparent; border: 0; border-radius: var(--r-pill); padding: 0.4rem 0.7rem; cursor: pointer; transition: background-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); } .tema-opcion:hover { color: var(--ink); } .tema-opcion[aria-pressed="true"] { background: var(--surface); color: var(--accent-strong); box-shadow: var(--shadow-1); } .tema-opcion:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-ring); }