/* ========================================================================== * LOBBIA — TOKENS.CSS * Single source of truth for design tokens. * -------------------------------------------------------------------------- * STRUCTURE * §1. CANON DESIGN SYSTEM (Lobbia 2026) — new tokens, use these for new code * §2. DARK MODE OVERRIDES — [data-theme="dark"] * §3. PER-ROLE OVERRIDES — [data-role="residente|conserje|admin"] * §4. LEGACY TOKENS (PRESERVED) — old tokens kept verbatim so the * authenticated app shell + modules * continue rendering exactly as before. * Will be migrated in future PRs. * §5. BRIDGE ALIASES — semantic legacy → canon mapping * for modules that want to opt in. * §6. APP SHELL DECORATIONS (LEGACY) — body bg gradient, skyline svg, * card-custom styles, table styles, * pagination — preserved verbatim. * * PRINCIPLE * This file is ADDITIVE in PR 1. Nothing visual changes for the authenticated * app. Canon tokens become AVAILABLE for landing (PR 2) and login (PR 3) to * consume directly. Authenticated modules migrate gradually in future PRs. * * REFERENCE: docs/redesign/skill/references/tokens.md * ========================================================================== */ /* ========================================================================== * §1. CANON DESIGN SYSTEM — Lobbia 2026 (light mode, primary) * ========================================================================== */ :root { /* ── Background & surfaces (warm cream) ── */ --background: #FAF8F4; --bg: var(--background); --surface1: #FFFFFF; --surface2: #F2EFE8; --surface3: #E8E2D6; --border: #E8E2D6; --border-visible: #D4CBB8; --surface-tint: var(--surface2); /* ── Text (warm charcoal scale) ── */ --text1: #2A2418; --text2: #5C5240; --text3: #8A7E66; --text4: #B5A992; --text1-inverse: #FAF8F4; /* ── Accent (warm teal — primary brand) ── */ --accent: #2D8A87; --accent-subtle: #DDEEED; --accent-hover: #246E6C; /* ── Enlaces de texto (utilities.css) ── En claro, el acento oscuro de la piel (--accent-strong la define la piel C; sin ella cae en --accent-hover): el cian neón del tema oscuro daba 1,4:1 sobre blanco (QA 6-oct). */ --link: var(--accent-strong, var(--accent-hover)); --link-hover: var(--accent-hover); /* ── Pop (warm coral — residente CTAs, emocional) ── */ --pop: #E08267; --pop-subtle: #FBE5DD; --pop-hover: #C9624C; /* ── Status (warm-shifted, never electric) ── */ --success: #4B8E72; --success-bg: #EBF3EE; --warning: #D88828; --warning-bg: #FBF1E0; --error: #C25249; --error-bg: #FBEEEC; /* ── Oro: lo distinguido (la estrella del comité en la barra). Ícono sobre #FFF 3.7:1, sobre --oro-subtle 3.3:1 y sobre surface2 3.2:1 (mínimo 3:1 para un gráfico); no es para texto. ── */ --oro: #AD7C0B; --oro-subtle: #FBF1D9; /* ── A11y FOREGROUND tokens (WCAG AA) ── Separan el TINTE/FILL (claro, identidad — arriba) del FOREGROUND (texto/ícono/borde sobre fondos claros, más oscuro para pasar AA). NO oscurecer los base de arriba: estos son los que se usan como color de texto/borde donde el base fallaba contraste. */ --warning-text: #8F5212; /* sobre #FFF 6.2:1, surface2 5.4:1, warning-bg 5.5:1 */ --success-text: #356650; /* sobre #FFF 6.6:1 */ --error-text: #9E3B33; /* sobre #FFF 7.0:1, error-bg 6.2:1 (venía de landing.css) */ --text3-strong: #675C45; /* text3 que pasa AA en cuerpo chico: sobre #FFF 6.0:1 (venía de landing.css) */ --accent-strong: var(--accent-hover); /* foreground oscuro default; per-rol en §3 */ /* ── Typography ── --font-*-base son el fallback del sistema, SIN referenciar --font-*: una piel (§10) que hiciera `--font-display: "X", var(--font-display)` en un selector con la MISMA especificidad que :root (p. ej. [data-skin="c"]) formaría un ciclo — var() resolviendo contra su propia declaración en el mismo elemento — y el spec de custom properties invalida TODA la cadena (fallback a serif del navegador, hallazgo de gga en el rediseño C). Las pieles nuevas componen sobre el *-base, nunca sobre el token final. */ --font-display-base: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-body-base: "Lexend", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono-base: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --font-display: var(--font-display-base); --font-body: var(--font-body-base); --font-mono: var(--font-mono-base); --text-display: clamp(36px, 5.5vw, 60px); --text-h1: clamp(28px, 4vw, 42px); --text-h2: 28px; --text-h3: 22px; --text-h4: 18px; --text-body: 15px; --text-body-sm: 13px; --text-label: 12px; --text-caption: 11px; --text-money: 32px; /* ── Spacing (4px base) ── */ --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px; --space-3xl: 64px; --space-4xl: 96px; /* ── Radii (soft corners default; pill ONLY for status badges) ── */ --radius-element: 4px; --radius-control: 6px; --radius-button: 8px; --radius-card: 12px; --radius-container: 16px; --radius-pill: 999px; /* ── Motion (warm-spring personality) ── */ --ease-spring: cubic-bezier(0.34, 1.2, 0.64, 1); --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; /* ── Shadows (warm-tinted — rgba(42,36,24,X), never pure black) ── */ --shadow-sm: 0 2px 4px rgba(42, 36, 24, 0.05), 0 1px 2px rgba(42, 36, 24, 0.03); --shadow-md: 0 6px 12px rgba(42, 36, 24, 0.07), 0 2px 4px rgba(42, 36, 24, 0.04); --shadow-lg: 0 12px 24px rgba(42, 36, 24, 0.08), 0 4px 8px rgba(42, 36, 24, 0.05); --shadow-xl: 0 24px 48px rgba(42, 36, 24, 0.10), 0 8px 16px rgba(42, 36, 24, 0.06); /* Sombra HACIA ARRIBA para una barra pegada al borde inferior (la barra de guardado fija, ui-v2.css). Las demás van hacia abajo. */ --shadow-barra: 0 -6px 12px rgba(42, 36, 24, 0.07), 0 -1px 3px rgba(42, 36, 24, 0.04); } /* ========================================================================== * §2. DARK MODE OVERRIDES — opt-in via [data-theme="dark"] * ========================================================================== */ [data-theme="dark"]:not([data-theme="legacy-dark"]) { /* Chassis neutral cool (estilo Apple/Linear/Vercel) en lugar del warm brown previo que se sentía "vintage 60s". Accents siguen warm para conservar el carácter del brand. */ --background: #0F1115; --background-deep: #0A0C10; /* Primer stop del gradiente de body en §7 ([data-theme="dark"] body): vive acá (no como literal en §7) para que una piel (§10) pueda recolorear el fondo oscuro completo con solo redefinir tokens — hallazgo de gga: sin esto, §7 pisaba el --background de la piel C con un literal fijo y el chasis "neutros fríos" del lienzo no se veía. */ --dark-body-top: #232B29; --surface1: #181B22; --surface2: #21262E; --surface3: #2A3038; --border: #262C35; --border-visible: #363E48; --text1: #ECEFF2; --text2: #B1B8C2; --text3: #7A828D; --text4: #4F5862; --text1-inverse: #0F1115; --accent: #5EB1AA; --accent-subtle: #0E2422; --accent-hover: #8DCAC4; /* Enlaces: en oscuro el cian brillante sí contrasta (utilities.css). */ --link: var(--dash-accent); --link-hover: var(--dash-gold-light); --pop: #E69679; --pop-subtle: #3D1F18; --pop-hover: #ECAB91; --success: #6FA88C; --success-bg: #1A2C24; --warning: #E6A14D; --warning-bg: #3D2A12; --error: #D67269; --error-bg: #3D1F1B; --oro: #E8BC4A; /* sobre surface1 oscuro 10.3:1, sobre --oro-subtle 8.8:1 */ --oro-subtle: #2A2210; /* A11y FOREGROUND en dark: el foreground debe ser CLARO sobre fondos oscuros, así que apunta a los base dark (ya claros), NO a un derivado oscuro como en light. */ --warning-text: var(--warning); --success-text: var(--success); --error-text: var(--error); --text3-strong: #969EA9; /* entre text3 y text2; sobre surface1 6.5:1 */ --accent-strong: var(--accent-hover); --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.30), 0 1px 2px rgba(0, 0, 0, 0.20); --shadow-md: 0 6px 12px rgba(0, 0, 0, 0.40), 0 2px 4px rgba(0, 0, 0, 0.25); --shadow-lg: 0 12px 24px rgba(0, 0, 0, 0.50), 0 4px 8px rgba(0, 0, 0, 0.30); --shadow-xl: 0 24px 48px rgba(0, 0, 0, 0.60), 0 8px 16px rgba(0, 0, 0, 0.35); --shadow-barra: 0 -6px 12px rgba(0, 0, 0, 0.40), 0 -1px 3px rgba(0, 0, 0, 0.25); } /* ========================================================================== * §3. PER-ROLE OVERRIDES — diferenciador único de Lobbia * Applied via [data-role="..."] on a wrapper element. Composes with dark mode. * ========================================================================== */ [data-role="residente"] { --accent: #E08267; --accent-subtle: #FBE5DD; --accent-hover: #C9624C; --surface-tint: #FAF1EC; --accent-strong: #A8472F; } [data-role="conserje"] { --accent: #5C6373; --accent-subtle: #E5E7EA; --accent-hover: #454B57; --surface-tint: #F4F5F7; } [data-role="admin"] { --accent: #A4742C; --accent-subtle: #F3EBD9; --accent-hover: #875D1F; --surface-tint: #FAF5E9; --accent-strong: #6E4A16; } /* En dark, las surface-tint van a canon cool slate (#21262E base) con micro-hint por rol via accent-subtle. Esto evita los tintes cafe que se sentian "60s". */ [data-theme="dark"][data-role="residente"] { --accent: #E69679; --accent-subtle: #2A1B20; --accent-hover: #ECAB91; --surface-tint: #1F232B; } [data-theme="dark"][data-role="conserje"] { --accent: #7B8392; --accent-subtle: #1A1C22; --accent-hover: #A2A8B2; --surface-tint: #1A1C22; } [data-theme="dark"][data-role="admin"] { --accent: #BC9846; --accent-subtle: #2A2210; --accent-hover: #D2B673; --surface-tint: #21232A; } /* ========================================================================== * §4. LEGACY TOKENS (PRESERVED — DO NOT MODIFY IN PR 1) * -------------------------------------------------------------------------- * These are the GuardiaExpress + Calypso + Aurora tokens used by the existing * authenticated app shell (layouts/header.php) and modules (operator/, admin/, * resident/, guard/). Kept verbatim with their original values so nothing * breaks visually. Migration to canon tokens (§1) happens in future PRs. * * IMPORTANT: New code MUST NOT reference these. Use canon tokens from §1. * ========================================================================== */ :root { /* GuardiaExpress — Midnight Navy palette */ --dash-bg: #1E3A8A; --dash-surface: rgba(255, 255, 255, 0.08); --dash-surface-active: rgba(255, 255, 255, 0.12); --dash-border: rgba(255, 255, 255, 0.15); --dash-border-light: rgba(255, 255, 255, 0.08); --dash-text: #F8FAFC; --dash-text-secondary: #94A3B8; --dash-accent: #00E5FF; --dash-accent-text: #00E5FF; --dash-accent-glow: rgba(0, 229, 255, 0.15); --dash-gold: #D4A843; --dash-gold-light: #F5D77A; --dash-gold-glow: rgba(212, 168, 67, 0.15); /* Calypso Cyan — main app brand (legacy) */ --bs-primary: #2BB5F4; --lobbia-primary: #2BB5F4; --lobbia-primary-light: #7DD3FC; --lobbia-primary-dark: #0891B2; --lobbia-accent-cyan: #00D2FF; --lobbia-accent-coral: #FF6B6B; --lobbia-accent-green: #00E676; /* Aurora Palette (5 accent gradients) */ --aurora-indigo: #2BB5F4; --aurora-indigo-light: #7DD3FC; --aurora-cyan: #0EA5E9; --aurora-cyan-light: #67E8F9; --aurora-emerald: #10B981; --aurora-emerald-light: #6EE7B7; --aurora-amber: #F59E0B; --aurora-amber-light: #FCD34D; --aurora-rose: #F43F5E; --aurora-rose-light: #FDA4AF; /* Navigation (legacy) */ --nav-bg: linear-gradient(180deg, #0C4A6E 0%, #0E7490 100%); --nav-border: rgba(255, 255, 255, 0.08); --nav-active-border: linear-gradient(180deg, var(--aurora-indigo), var(--aurora-cyan)); /* Glassmorphism (legacy) */ --glass-bg: rgba(255, 255, 255, 0.92); --glass-border: rgba(255, 255, 255, 0.9); --glass-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.08); /* Content (legacy) */ --text-main: #1e293b; --text-muted: #64748b; --bg-body: #F0F7FC; --bg-card: rgba(255, 255, 255, 0.92); --border-light: rgba(0, 0, 0, 0.06); --hover-bg: rgba(43, 181, 244, 0.04); /* Tile dimensions (legacy) */ --tile-radius: 1rem; --tile-border-width: 3px; } /* Legacy dark mode — kept verbatim for module compat */ [data-theme="dark"] { --glass-bg: rgba(15, 23, 42, 0.7); --glass-border: rgba(255, 255, 255, 0.08); --glass-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.5); --text-main: #F8FAFC; --text-muted: #94A3B8; --text-secondary: #CBD5E1; --bg-body: #0A192F; --bg-card: rgba(15, 23, 42, 0.7); --border-light: rgba(255, 255, 255, 0.08); --hover-bg: rgba(43, 181, 244, 0.12); --topbar-bg: rgba(10, 25, 47, 0.6); --aurora-indigo: rgba(43, 181, 244, 0.85); --aurora-cyan: rgba(14, 165, 233, 0.5); --aurora-emerald: rgba(16, 185, 129, 0.5); --aurora-amber: rgba(245, 158, 11, 0.5); --aurora-rose: rgba(244, 63, 94, 0.5); } /* ========================================================================== * §5. BRIDGE ALIASES — semantic legacy → canon * Opt-in for modules that want to migrate one token at a time without * touching their existing references. NOT used automatically — modules * can adopt these as needed. * -------------------------------------------------------------------------- * Usage example (in a module CSS): * .my-component { background: var(--lobbia-bg-canon); } // → uses --background (cream) * ========================================================================== */ :root { --lobbia-bg-canon: var(--background); --lobbia-surface-canon: var(--surface1); --lobbia-text-canon: var(--text1); --lobbia-text-2-canon: var(--text2); --lobbia-border-canon: var(--border); --lobbia-accent-canon: var(--accent); --lobbia-success-canon: var(--success); --lobbia-warning-canon: var(--warning); --lobbia-error-canon: var(--error); } /* ========================================================================== * §6. APP SHELL DECORATIONS * -------------------------------------------------------------------------- * D.1a foundation flip (2026-05-31): * - Light mode (default): canon warm cream + per-role surface-tint en body * - Dark mode (opt-in): legacy navy glassmorphism preserved verbatim * - Skyline silhouette SVG removida (decisión usuario en Phase D pre-flight) * * El sidebar/topbar del header.php todavía usan inline styles dark legacy. * D.1b reescribe esos elementos con canon. Hasta entonces, light mode se * verá visualmente "broken" en el shell (sidebar/topbar mantienen su look * dark contra cream bg) — intencional. * ========================================================================== */ /* ── LIGHT MODE (default) — canon ── */ body { min-height: 100vh; background: var(--surface-tint); color: var(--text1); } /* ── DARK MODE — canon warm dark (D.3, 2026-06-01) ── Legacy navy/cyan/glassmorphism scoped a [data-theme="legacy-dark"] como bridge por si algo lo necesita; default dark = canon warm. */ [data-theme="dark"] body { background: var(--background); color: var(--text1); } /* body::before radial glow removed — D.3 clean neutral dark, no teal tinting */ /* Token overrides legacy — D.3 remapea a canon dark. Los var(--dash-*) siguen disponibles si algo los necesita explícito. Los aliases legacy (--bg-body, --text-main, --glass-*) ahora apuntan al canon. */ [data-theme="dark"], [data-theme="lobbia"] { --bg-body: var(--background) !important; --bg-card: var(--surface1) !important; --glass-bg: var(--surface1) !important; --glass-border: var(--border) !important; --border-light: var(--border) !important; --text-main: var(--text1) !important; --text-muted: var(--text2) !important; --text-secondary: var(--text2) !important; --lobbia-primary: var(--accent) !important; --lobbia-primary-light: var(--accent-hover) !important; --topbar-bg: var(--surface1) !important; --hover-bg: var(--accent-subtle) !important; } /* ── .card-custom — light canon + dark legacy ── */ .card-custom { background: var(--surface1); border: 1px solid var(--border); border-radius: var(--radius-container); box-shadow: var(--shadow-sm); position: relative; transition: box-shadow 200ms var(--ease-spring), border-color 200ms var(--ease-spring), transform 200ms var(--ease-spring); overflow: hidden; } .card-custom:hover { box-shadow: var(--shadow-md); border-color: var(--accent); transform: translateY(-2px); } /* D.3: dark card-custom — canon warm, no legacy cyan borders */ /* NOTE: opacity/transform initial state lives in components.css (.card-custom) — not duplicated here (BUG-UI-009) */ [data-theme="dark"] .card-custom { background: var(--surface1) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; border-radius: var(--radius-container) !important; color: var(--text1); transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1), transform 0.5s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease, border-color 0.3s ease; transition-delay: var(--wow-delay, 0s); } [data-theme="dark"] .card-custom:hover { transform: translateY(-2px); box-shadow: var(--shadow-md) !important; border-color: var(--accent) !important; } /* ── Tables — light canon + dark legacy ── */ .card-header { border-bottom: 1px solid var(--border); background: transparent; color: var(--text1); } .card-custom .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-responsive::-webkit-scrollbar { height: 6px; } .table-responsive::-webkit-scrollbar-thumb { background: var(--border-visible); border-radius: 3px; } .table-hover tbody tr:hover { background-color: var(--surface2); } .table thead th, .card-custom .table thead th { position: sticky; top: 0; background: var(--surface2); z-index: 1; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text3); font-weight: 500; border-bottom: 1px solid var(--border-visible); padding: 0.65rem 0.75rem; } /* Legacy dark table styles */ [data-theme="dark"] .table { color: var(--dash-text) !important; } [data-theme="dark"] .table th, [data-theme="dark"] .table td { border-color: var(--dash-border-light) !important; } [data-theme="dark"] .card-header { border-bottom: 1px solid var(--dash-border-light) !important; background: transparent !important; color: var(--dash-text) !important; } [data-theme="dark"] .table-responsive::-webkit-scrollbar-thumb { background: rgba(100, 116, 139, 0.3) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: rgba(0, 229, 255, 0.04) !important; } [data-theme="dark"] .table thead th, [data-theme="dark"] .card-custom .table thead th, [data-theme="dark"] .card-custom thead.bg-light th, [data-theme="dark"] .card-custom thead.bg-dark th { background: rgba(255, 255, 255, 0.05) !important; color: var(--dash-text-secondary) !important; font-weight: 600; border-bottom: 2px solid rgba(255, 255, 255, 0.15) !important; } .table thead.bg-light, .card-custom thead.bg-light { background: transparent !important; --bs-table-bg: transparent !important; } [data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) { background-color: rgba(255, 255, 255, 0.015) !important; } /* ── Pagination — light canon + dark legacy ── */ .lobbia-pagination { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1.25rem; border-top: 1px solid var(--border); background: var(--surface2); border-radius: 0 0 var(--radius-container) var(--radius-container); font-size: 0.82rem; color: var(--text2); gap: 1rem; flex-wrap: wrap; } .lobbia-pg-info { display: flex; align-items: center; gap: 0.75rem; } .lobbia-pg-select { background: var(--surface1); color: var(--text1); border: 1px solid var(--border-visible); border-radius: var(--radius-control); padding: 0.25rem 0.5rem; font-size: 0.78rem; cursor: pointer; } .lobbia-pg-select:focus { outline: none; border-color: var(--accent); } .lobbia-pg-buttons { display: flex; align-items: center; gap: 0.35rem; } .lobbia-pg-btn { background: var(--surface1); color: var(--text2); border: 1px solid var(--border-visible); border-radius: var(--radius-button); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1rem; font-weight: 600; transition: all 150ms var(--ease-spring); } .lobbia-pg-btn:hover:not(:disabled) { background: var(--accent-subtle); border-color: var(--accent); color: var(--accent-hover); } .lobbia-pg-btn:disabled { opacity: 0.4; cursor: not-allowed; } .lobbia-pg-current { font-weight: 600; color: var(--text1); padding: 0 0.5rem; font-size: 0.82rem; } [data-theme="dark"] .lobbia-pagination { border-top: 1px solid var(--dash-border); background: rgba(17, 24, 39, 0.4); color: var(--dash-text-secondary); } [data-theme="dark"] .lobbia-pg-select, [data-theme="dark"] .lobbia-pg-btn { background: var(--dash-surface); color: var(--dash-text-secondary); border-color: var(--dash-border); } [data-theme="dark"] .lobbia-pg-select { color: var(--dash-text); } [data-theme="dark"] .lobbia-pg-select:focus { border-color: var(--dash-accent); } [data-theme="dark"] .lobbia-pg-btn:hover:not(:disabled) { background: var(--dash-accent-glow); border-color: var(--dash-accent); color: var(--dash-accent); } [data-theme="dark"] .lobbia-pg-current { color: var(--dash-text); } /* ========================================================================== * §7. LEGACY DARK MODE OVERRIDES (PRESERVED FROM main.css MIGRATION) * Bootstrap utility overrides for dark mode. Kept verbatim — Bootstrap is * deep infrastructure across the auth app, and changing these breaks dozens * of views simultaneously. Migration deferred to Phase D. * ========================================================================== */ [data-theme="dark"] body { background: linear-gradient(to bottom, var(--dark-body-top) 0%, var(--background-deep) 100%); background-attachment: fixed; min-height: 100vh; } [data-theme="dark"] ::placeholder { color: var(--text3) !important; opacity: 1 !important; } [data-theme="dark"] .form-text { color: var(--text2) !important; } [data-theme="dark"] .text-secondary { color: var(--text2) !important; } [data-theme="dark"] .text-muted { color: var(--text2) !important; } [data-theme="dark"] .card-custom { background: var(--surface1) !important; border-color: var(--border) !important; color: var(--text1); } [data-theme="dark"] .table { color: var(--text1) !important; border-color: var(--border) !important; } [data-theme="dark"] .table tr, [data-theme="dark"] .table td, [data-theme="dark"] .table th { background-color: transparent !important; color: inherit !important; border-color: var(--border) !important; } [data-theme="dark"] .table thead th { color: var(--text2) !important; background-color: var(--surface2) !important; } [data-theme="dark"] .table-hover tbody tr:hover { background-color: var(--surface2) !important; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: var(--surface2) !important; color: var(--text1) !important; border-color: var(--border) !important; } [data-theme="dark"] .bg-light { background-color: var(--surface2) !important; } [data-theme="dark"] .bg-white { background-color: var(--surface1) !important; } [data-theme="dark"] .list-group-item { background-color: transparent !important; color: var(--text1) !important; border-color: var(--border) !important; } [data-theme="dark"] .text-dark { color: var(--text1) !important; } [data-theme="dark"] .modal-content { background: var(--surface1) !important; color: var(--text1); border: 1px solid var(--border); } [data-theme="dark"] .alert { background: var(--surface1) !important; color: var(--text1) !important; } [data-theme="dark"] .navbar-top .bg-white, [data-theme="dark"] .navbar-top [style*="backdrop-filter"] { background: var(--surface1) !important; border-color: var(--border) !important; } [data-theme="dark"] .btn-light { background: var(--surface2) !important; color: var(--text1) !important; border-color: var(--border) !important; } [data-theme="dark"] .btn-light:hover { background: var(--surface3) !important; } [data-theme="dark"] .border { border-color: var(--border) !important; } [data-theme="dark"] .border-bottom { border-bottom-color: var(--border) !important; } [data-theme="dark"] .border-top { border-top-color: var(--border) !important; } [data-theme="dark"] .border-light { border-color: var(--border) !important; } [data-theme="dark"] .card-header { border-bottom-color: var(--border) !important; } [data-theme="dark"] .dropdown-divider { border-top-color: var(--border) !important; } [data-theme="dark"] .search-bar { border-color: var(--border) !important; background: var(--surface2) !important; } [data-theme="dark"] .search-bar .form-control, [data-theme="dark"] .search-bar .input-group-text { background: transparent !important; color: var(--text1) !important; } [data-theme="dark"] .badge.bg-opacity-25 { color: currentColor !important; } [data-theme="dark"] .badge.text-dark { color: var(--text1) !important; } [data-theme="dark"] .badge.bg-light { background-color: var(--surface2) !important; color: var(--text1) !important; border: 1px solid var(--border) !important; } [data-theme="dark"] .text-lobbia { color: var(--accent) !important; } [data-theme="dark"] .text-primary { color: var(--accent) !important; } [data-theme="dark"] .text-info { color: var(--accent) !important; } [data-theme="dark"] .text-success { color: var(--success-text) !important; } [data-theme="dark"] .text-warning { color: var(--warning-text) !important; } [data-theme="dark"] .text-danger { color: var(--error-text) !important; } /* .badge.bg-dark-subtle (grd_tareas_view:121, badge de hora) no tenía par en dark: Bootstrap no conoce nuestro [data-theme="dark"] (no usamos data-bs-theme), así que .bg-dark-subtle se quedaba con el gris CLARO por defecto de Bootstrap mientras .text-body (línea 903, abajo) resolvía a --text1 CLARO en dark → texto claro sobre fondo claro, ilegible. Bug real medido: contraste < 1.2:1. */ [data-theme="dark"] .badge.bg-dark-subtle { background-color: var(--surface3) !important; color: var(--text1) !important; } /* bg-primary/success/danger/warning/info + bg-opacity-N (cualquier N) — mismo problema que en light (ver components.css): sin esto, el 15%/25% de opacidad de Bootstrap se calcula sobre su propio color fijo (no canon), lo cual es inconsistente con el resto del bridge aunque el contraste resultante no fallara por casualidad. Fijamos el mismo par subtle/-text que usamos en light para que no dependa de la casualidad. */ [data-theme="dark"] .bg-primary[class*="bg-opacity-"] { background-color: var(--accent-subtle) !important; } [data-theme="dark"] .bg-info[class*="bg-opacity-"] { background-color: var(--accent-subtle) !important; } [data-theme="dark"] .bg-success[class*="bg-opacity-"] { background-color: var(--success-bg) !important; } [data-theme="dark"] .bg-warning[class*="bg-opacity-"] { background-color: var(--warning-bg) !important; } [data-theme="dark"] .bg-danger[class*="bg-opacity-"] { background-color: var(--error-bg) !important; } /* ========================================================================== * §8. MODULE-SPECIFIC DECORATIVE TOKENS (PR refactor/tokens-centralizados) * -------------------------------------------------------------------------- * One-off decorative colors that were literal hex/rgba inline in views and * had no exact canon match. Centralized here (instead of new colors per PR) * so a future re-theme only touches this file. The tokens IN THIS SECTION * preserve the CURRENT visual look exactly — light/dark are intentionally * identical for purely decorative accents that were never designed with * theme-switching in mind (avatar badges, call-modal navy, copilot widget). * * NOTA: no todos los literales que este PR tokenizó terminaron acá. Donde * un hex/rgba coincidía con un token canon de §1 (--success-bg, --surface1, * --error, --text2, etc.) se usó ESE en vez de crear un duplicado en §8 — * en esos casos el color SÍ puede moverse con el tema (mejora, no bug, * salvo que el fondo que lo rodea sea fijo — ver --call-btn-fg más abajo, * agregado tras encontrar justo ese caso en footer.php). * ========================================================================== */ :root { /* Avatar initials badge (adm_conserjes_view, adm_residentes_view, adm_turnos_view) */ --avatar-badge-1: #FF6B6B; --avatar-badge-2: #FF003C; /* "Corporate navy" card gradient (adm_proveedores_view, adm_ggcc_view) */ --brand-navy-1: #1e3c72; --brand-navy-2: #2a5298; /* Incoming-call modal — always-dark navy/indigo regardless of theme (footer.php, call_overlay.php, grd_citofonia_view.php) */ --call-navy-a: #1e293b; --call-navy-b: #0f172a; --call-navy-c: #1e1b4b; /* Foreground FIJO (no var(--text1-inverse)): el fondo de este modal es siempre navy oscuro sin importar el tema, así que el texto/ícono encima también tiene que ser fijo. --text1-inverse SE INVIERTE con el tema (cream en light, casi-negro en dark) y sobre un fondo que nunca cambia eso deja el ícono de mute ilegible en dark — bug real encontrado en revisión, no lo repitas en otro botón de este modal. */ --call-btn-fg: #FFFFFF; --call-btn-fg-muted: #CBD5E1; /* Mismo problema, en el fondo: --success/--error SÍ se invierten con el tema (dark: contraste ~2.74:1 con --call-btn-fg, bajo el 3:1 que pide WCAG para un ícono grande). Fijos porque la superficie que los rodea (el modal navy) también lo es. */ --call-btn-success-bg: #10B981; --call-btn-error-bg: #EF4444; --call-btn-glass-bg: rgba(255, 255, 255, 0.1); --call-overlay-glow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 80px rgba(99, 102, 241, 0.15); --ring-emerald: #34d399; --ring-emerald-bg: rgba(52, 211, 153, 0.1); --ring-indigo: #6366f1; --ring-indigo-bg: rgba(99, 102, 241, 0.1); --ring-indigo-border: rgba(99, 102, 241, 0.3); --ring-indigo-light: #A5B4FC; /* Notification icon tint (res_settings_view) */ --icon-tint-cyan-bg: rgba(6, 182, 212, 0.12); /* Timeline dot glow — legacy purple, kept verbatim (adm_bitacora_view) */ --legacy-purple-glow: rgba(108, 92, 231, 0.1); /* Marketplace tile icon (res_dashboard_view) */ --tile-marketplace: #d946ef; --tile-marketplace-bg: rgba(217, 70, 239, 0.1); /* Botón "Salir" en modo dios / logout (header.php) — tinte rose, misma familia que --aurora-rose(-light) pero como fill translúcido. */ --rose-tint-bg: rgba(244, 63, 94, 0.15); --rose-tint-border: rgba(244, 63, 94, 0.3); /* Foreground fijo para el badge de avatar/día (--avatar-badge-1/2 son intencionalmente iguales en claro/oscuro — el texto encima también tiene que serlo; NO usar --text1-inverse acá, se invierte con el tema sobre un fondo que nunca cambia). */ --avatar-badge-fg: #FFFFFF; /* .call-overlay-btn--hangup:hover darken (call_overlay.php) */ --error-hover: #A1453D; /* AI Copilot widget — distinct indigo/violet identity, own light+dark variant (layouts/components/ai_copilot_widget.php) */ --copilot-indigo: #6366f1; --copilot-indigo-light: #a5b4fc; --copilot-violet: #8b5cf6; --copilot-violet-light: #c4b5fd; --copilot-purple: #a855f7; --copilot-heading-3: #e0e7ff; --copilot-success: #4ade80; --copilot-error-light: #f87171; --copilot-bg-dark: #1a1f2e; --copilot-text-dark: #e0e0e0; --copilot-bg-light: #ffffff; --copilot-surface-light: #f3f4f6; --copilot-border-light: #e5e7eb; --copilot-border-light-2: #d1d5db; --copilot-text-light: #1f2937; --copilot-placeholder-light: #9ca3af; --copilot-indigo-a10: rgba(99, 102, 241, 0.1); --copilot-indigo-a20: rgba(99, 102, 241, 0.2); --copilot-indigo-a40: rgba(99, 102, 241, 0.4); --copilot-violet-a30: rgba(139, 92, 246, 0.3); --copilot-shadow-fab: 0 8px 32px rgba(99, 102, 241, 0.4); --copilot-shadow-fab-hover: 0 12px 40px rgba(99, 102, 241, 0.5); --copilot-panel-shadow-dark: 0 20px 60px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06); --copilot-panel-shadow-light: 0 20px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05); --copilot-focus-ring: 0 0 0 3px rgba(139, 92, 246, 0.15); /* Translucent white/black overlays reused across call modal, copilot widget, settings dividers and the guard dashboard (rgba, not hex — same "one file to re-theme" goal applied to alpha-tinted literals found alongside the hex ones in this PR). */ --overlay-white-a06: rgba(255, 255, 255, 0.06); --overlay-white-a08: rgba(255, 255, 255, 0.08); --overlay-white-a10: rgba(255, 255, 255, 0.1); --overlay-white-a20: rgba(255, 255, 255, 0.2); --overlay-white-a30: rgba(255, 255, 255, 0.3); --overlay-white-a40: rgba(255, 255, 255, 0.4); --overlay-white-a60: rgba(255, 255, 255, 0.6); --overlay-black-a03: rgba(0, 0, 0, 0.03); --overlay-black-a05: rgba(0, 0, 0, 0.05); --overlay-error-a12: rgba(239, 68, 68, 0.12); --overlay-error-a20: rgba(239, 68, 68, 0.2); --overlay-accent-a08: rgba(45, 138, 135, 0.08); --overlay-accent-a10: rgba(45, 138, 135, 0.1); --overlay-accent-a15: rgba(45, 138, 135, 0.15); --overlay-accent-a30: rgba(45, 138, 135, 0.3); --overlay-vignette: rgba(0, 0, 0, 0.5); --shadow-chat-bubble: 0 4px 15px rgba(0, 0, 0, 0.04); --shadow-godmode-banner: 0 -4px 15px rgba(0, 0, 0, 0.3); --shadow-alert-toast: 0 15px 35px rgba(0, 0, 0, 0.15); --footer-border-tint: rgba(255, 255, 255, 0.05); /* ── Barrido assets/css (PR refactor/tokens-css) ────────────────────── Literales que vivían en components/modules/utilities/layout/forms/ mobile.css. Igual que el resto de §8: preservan el look ACTUAL, mismo valor en claro y oscuro salvo que se diga lo contrario. */ /* Blanco FIJO: texto/ícono/borde sobre rellenos saturados o sobre el shell navy legacy. NO usar --surface1 ni --text1-inverse en su lugar: ambos se invierten con el tema y acá el fondo de abajo no cambia. */ --white-fixed: #FFFFFF; /* Paleta aurora FIJA. --aurora-* se apaga en dark (rgba .5/.85); estos son los valores plenos que .bg-accent-*, la paginación y el banner "mejor en escritorio" pintaban en duro en los dos temas. */ --legacy-cyan: #2BB5F4; --legacy-sky: #0EA5E9; --legacy-emerald: #10B981; --legacy-amber: #F59E0B; --legacy-rose: #F43F5E; /* Gradiente celeste del hover de .btn-lobbia y del .fab-action */ --gradient-sky-1: #1A8FC4; --gradient-sky-2: #38BDF8; /* Tercer stop del .gold-gradient (los otros dos son --dash-gold-light y --dash-gold) */ --dash-gold-dark: #A67C2E; /* Banner "mejor en escritorio" (mobile.css) — navy fijo */ --banner-navy-1: #0e2141; --banner-navy-2: #1a365d; /* Estados vívidos (Tailwind 400) de .btn-outline-* sobre el shell navy */ --status-dark-success: #4ade80; --status-dark-error: #f87171; --status-dark-warning: #fbbf24; --status-dark-info: #22d3ee; /* Texto de los .badge.bg-*-subtle sobre navy (Bootstrap *-text-emphasis de modo oscuro, copiados tal cual) */ --badge-dark-primary: #6ea8fe; --badge-dark-success: #75b798; --badge-dark-danger: #ea868f; --badge-dark-warning: #ffda6a; --badge-dark-info: #6edff6; --badge-dark-secondary: #aeb5bc; /* Grises claros del shell navy legacy (Bootstrap gray-100 / slate-100): texto de .btn-light, .badge.text-dark y de los inputs glass */ --legacy-gray-100: #f8f9fa; --input-dark-fg: #f1f5f9; /* Fondo de