/* ============================================================ * BeautySoft — design tokens * * Fuente única de variables CSS: paleta de marca, escalas de * superficie, tokens semánticos y aliases de Bootstrap. * * Spec: BRAND.md (sección "Color Palette" + "Sidebar" + "Dark/Light Mode"). * Reglas: CLAUDE.md §5, §6, §10, §12. * * NO añadir colores fuera de esta paleta sin aprobación. * NO usar morado/violeta como acento. NO usar #ffffff como fondo de página. * ============================================================ */ :root { /* ---------- Brand — Charcoal + Teal (BRAND.md) ---------- */ --brand-900: #2C2C2A; /* sidebar, encabezados, superficies oscuras */ --brand-800: #444441; /* hover sobre fondo oscuro, superficies oscuras secundarias */ --brand-600: #0F6E56; /* hover/pressed teal */ --brand-500: #1D9E75; /* PRIMARIO — botones, activos, links, badges */ --brand-400: #2DB88A; /* mid teal — fills de chart, highlights */ --brand-200: #9FE1CB; /* teal claro — pills, badges */ --brand-50: #E1F5EE; /* teal tenue — row highlights, tints */ --brand-bg: #F5F4F0; /* fondo de página (warm white) */ --brand-100: #D3D1C7; /* bordes, divisores en fondo claro */ /* ---------- Surface / neutral scale (warm grays) ---------- */ --surface-50: #fafaf9; --surface-100: #F5F4F0; /* mismo que --brand-bg */ --surface-200: #e4e3df; --surface-800: #444441; /* texto secundario, íconos en fondo claro */ --surface-900: #2C2C2A; /* texto principal, títulos */ --surface-950: #1a1a18; /* máximo contraste */ /* ---------- Semantic / functional ---------- */ --success-500: #10b981; /* guardar / confirmar */ --accent-500: #f59e0b; /* exportar PDF / amber highlight */ --danger-500: #ef4444; /* eliminar / cancelar / error */ --info-400: #818cf8; /* tech accent indigo (uso esporádico) */ /* ---------- Aliases para Bootstrap overrides ---------- */ --primary: var(--brand-500); --primary-hover: var(--brand-600); --primary-light: var(--brand-50); --primary-text: #ffffff; /* ---------- Sidebar ---------- */ --sidebar-bg: var(--brand-900); --sidebar-hover: var(--brand-800); --sidebar-active: var(--brand-500); --sidebar-text: #ffffff; --sidebar-text-muted: rgba(255,255,255,0.55); --sidebar-divider: rgba(255,255,255,0.08); --sidebar-width: 260px; /* ---------- Page ---------- */ --body-bg: var(--brand-bg); --body-text: var(--surface-900); /* ---------- Cards / borders ---------- */ --card-bg: #ffffff; --card-border: var(--brand-100); --card-radius: 14px; --card-shadow: 0 12px 40px -16px rgba(44,44,42,0.18); /* ---------- Typography ---------- */ --font-ui: 'Inter', system-ui, -apple-system, 'Helvetica Neue', Arial, sans-serif; --font-display: 'Source Serif 4', Georgia, 'Times New Roman', serif; /* ---------- Spacing / motion ---------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --transition-fast: 120ms ease; --transition-med: 220ms ease; /* ---------- Brand gradient (login hero, dashboard VIP hero) ---------- */ --brand-gradient: linear-gradient(135deg, #1D9E75 0%, #0F6E56 100%); } /* ============================================================ * Dark mode — content area only. * El sidebar SIEMPRE permanece charcoal (BRAND.md "Sidebar"). * Toggle: data-menu-color="dark" en (ver theme_init.php). * ============================================================ */ :root[data-menu-color="dark"] { --body-bg: #0f1a14; /* deep charcoal-green per BRAND.md */ --body-text: #e5e7e3; --card-bg: #1a2620; --card-border: #2a3a32; --surface-100: #0f1a14; --surface-200: #2a3a32; --surface-800: #d6d8d2; --surface-900: #f1f2ec; } /* ============================================================ * Reset mínimo + body texture (BRAND.md "Background Texture") * ============================================================ */ * { box-sizing: border-box; } html, body { margin: 0; padding: 0; min-height: 100%; } body { font-family: var(--font-ui); color: var(--body-text); background-color: var(--body-bg); background-image: url("data:image/svg+xml;utf8,"); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2 { font-family: var(--font-ui); /* Inter — Source Serif 4 applied explicitly via .dash-hero-content h1 etc. */ font-weight: 600; color: var(--surface-900); } h3, h4, h5, h6 { font-family: var(--font-ui); font-weight: 600; color: var(--surface-900); } a { color: var(--brand-500); text-decoration: none; } a:hover { color: var(--brand-600); text-decoration: underline; } /* ============================================================ * App layout shell * ============================================================ */ .app-wrapper { display: flex; min-height: 100vh; } .app-content { flex: 1; min-width: 0; padding: 32px; } /* ============================================================ * Sidebar component * NOTA: cuando exista app.css este bloque debe migrar allí. * Vive aquí temporalmente para que sidebar.php no se vea roto. * ============================================================ */ .app-sidebar { width: var(--sidebar-width); min-height: 100vh; background: var(--sidebar-bg); color: var(--sidebar-text); display: flex; flex-direction: column; position: sticky; top: 0; flex-shrink: 0; } .sidebar-brand { padding: 20px 16px 12px; border-bottom: 1px solid var(--sidebar-divider); display: flex; align-items: center; justify-content: center; min-height: 64px; overflow: hidden; } .sidebar-brand-link { display: block; line-height: 0; } /* SVG horizontal con padding interno → margenes negativos compensan */ .sidebar-brand-logo { height: 110px; width: auto; margin: -32px -20px; display: block; } .sidebar-nav { flex: 1; overflow-y: auto; padding: 12px 0; } .sidebar-menu { list-style: none; margin: 0; padding: 0; } .sidebar-menu-item + .sidebar-menu-item { margin-top: 2px; } .sidebar-menu-link { display: flex; align-items: center; gap: 12px; padding: 10px 18px; color: var(--sidebar-text); font-size: 0.92rem; font-weight: 500; transition: background var(--transition-fast), color var(--transition-fast); border-left: 3px solid transparent; } .sidebar-menu-link:hover { background: var(--sidebar-hover); color: var(--sidebar-text); text-decoration: none; } .sidebar-menu-link.is-active, .sidebar-menu-item.is-active > .sidebar-menu-link { background: var(--sidebar-active); border-left-color: #ffffff; color: #ffffff; } .sidebar-menu-icon { width: 18px; text-align: center; color: var(--sidebar-text-muted); } .sidebar-menu-link:hover .sidebar-menu-icon, .sidebar-menu-link.is-active .sidebar-menu-icon { color: #ffffff; } .sidebar-menu-empty { padding: 18px; color: var(--sidebar-text-muted); font-size: 0.82rem; line-height: 1.45; } /* Footer del sidebar — usuario + toggle de tema */ .sidebar-footer { border-top: 1px solid var(--sidebar-divider); padding: 14px 16px; display: flex; flex-direction: column; gap: 12px; } .sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; } .sidebar-user-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--brand-500); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.9rem; flex-shrink: 0; } .sidebar-user-meta { min-width: 0; } .sidebar-user-name { font-size: 0.88rem; font-weight: 600; color: #ffffff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sidebar-user-role { font-size: 0.75rem; color: var(--sidebar-text-muted); text-transform: capitalize; } .sidebar-theme-toggle { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px 12px; background: transparent; border: 1px solid var(--sidebar-divider); border-radius: var(--radius-sm); color: var(--sidebar-text); font-family: var(--font-ui); font-size: 0.82rem; cursor: pointer; transition: background var(--transition-fast), border-color var(--transition-fast); } .sidebar-theme-toggle:hover { background: var(--sidebar-hover); border-color: rgba(255,255,255,0.18); } .sidebar-theme-toggle .theme-icon-dark { display: none; } .sidebar-theme-toggle .theme-icon-light { display: inline-block; } :root[data-menu-color="dark"] .sidebar-theme-toggle .theme-icon-dark { display: inline-block; } :root[data-menu-color="dark"] .sidebar-theme-toggle .theme-icon-light { display: none; } /* ── Dark mode: content area ──────────────────────────────────── */ :root[data-menu-color="dark"] .app-content { background: var(--body-bg); } :root[data-menu-color="dark"] body { background-color: var(--body-bg); color: var(--body-text); } :root[data-menu-color="dark"] h1,:root[data-menu-color="dark"] h2, :root[data-menu-color="dark"] h3,:root[data-menu-color="dark"] h4, :root[data-menu-color="dark"] h5,:root[data-menu-color="dark"] h6 { color: var(--surface-900); } :root[data-menu-color="dark"] p,:root[data-menu-color="dark"] span, :root[data-menu-color="dark"] label { color: var(--body-text); } /* ── Dark mode: cards ─────────────────────────────────────────── */ :root[data-menu-color="dark"] .card,:root[data-menu-color="dark"] .card-app { background: var(--card-bg); border-color: var(--card-border); box-shadow: 0 0 0 1px rgba(159,225,203,.06); } :root[data-menu-color="dark"] .card-header, :root[data-menu-color="dark"] .card-header-gradient { border-bottom-color: var(--card-border); } /* ── Dark mode: tables ────────────────────────────────────────── */ :root[data-menu-color="dark"] .table-app thead th { background: #1e2e26; color: var(--brand-200); border-bottom: 2px solid var(--card-border); border-top: none; } :root[data-menu-color="dark"] .table-app tbody td { border-bottom-color: #1e2e26; color: var(--body-text); } :root[data-menu-color="dark"] .table-app tbody tr:hover td { background: #1e2e26; } /* ── Dark mode: DataTables chrome ─────────────────────────────── */ :root[data-menu-color="dark"] .dataTables_wrapper .dataTables_filter input, :root[data-menu-color="dark"] .dataTables_wrapper .dataTables_length select { background: var(--card-bg); border-color: var(--card-border); color: var(--body-text); } :root[data-menu-color="dark"] .dataTables_wrapper .dataTables_info { color: var(--body-text); } :root[data-menu-color="dark"] .dt-paging .page-link { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--body-text) !important; } :root[data-menu-color="dark"] .dt-paging .page-link:hover { background: #1e2e26 !important; border-color: var(--brand-200) !important; color: var(--brand-200) !important; } :root[data-menu-color="dark"] .dt-paging .page-item.active .page-link, :root[data-menu-color="dark"] .dt-paging-button.active .page-link { background: var(--brand-500) !important; border-color: var(--brand-500) !important; color: #fff !important; } /* ── Dark mode: badges ────────────────────────────────────────── */ :root[data-menu-color="dark"] .badge-activo { background: rgba(159,225,203,.18); color: var(--brand-200); } :root[data-menu-color="dark"] .badge-inactivo { background: #1e2e26; color: #9aa39d; border-color: #2a3a32; } :root[data-menu-color="dark"] .badge-amber { background: rgba(245,158,11,.16); color: #fcd34d; } :root[data-menu-color="dark"] .badge-cargo { background: rgba(29,158,117,.18); color: var(--brand-200); border-color: rgba(159,225,203,.3); } :root[data-menu-color="dark"] .badge-esp { background: rgba(129,140,248,.18); color: #a5b4fc; } /* ── Dark mode: forms / inputs ────────────────────────────────── */ :root[data-menu-color="dark"] .form-control, :root[data-menu-color="dark"] .form-select { background: var(--card-bg); border-color: var(--card-border); color: var(--body-text); } :root[data-menu-color="dark"] .form-control:focus, :root[data-menu-color="dark"] .form-select:focus { background: var(--card-bg); border-color: var(--brand-500); color: var(--body-text); box-shadow: 0 0 0 3px rgba(29,158,117,.18); } :root[data-menu-color="dark"] .form-control::placeholder { color: #6b7c72; } :root[data-menu-color="dark"] .select2-container--default .select2-selection--single, :root[data-menu-color="dark"] .select2-container--default .select2-selection--multiple { background: var(--card-bg) !important; border-color: var(--card-border) !important; color: var(--body-text) !important; } :root[data-menu-color="dark"] .select2-container--default .select2-selection__rendered { color: var(--body-text) !important; } :root[data-menu-color="dark"] .select2-dropdown { background: var(--card-bg); border-color: var(--card-border); } :root[data-menu-color="dark"] .select2-results__option { color: var(--body-text); } :root[data-menu-color="dark"] .select2-results__option--highlighted { background: var(--brand-500) !important; color: #fff !important; } /* ── Dark mode: modals ────────────────────────────────────────── */ :root[data-menu-color="dark"] .modal-content { background: var(--card-bg); color: var(--body-text); border-color: var(--card-border); } :root[data-menu-color="dark"] .modal-body { background: var(--card-bg); } :root[data-menu-color="dark"] .modal-footer { border-top-color: var(--card-border); background: var(--card-bg); } :root[data-menu-color="dark"] .modal-header { border-bottom-color: var(--card-border); } /* ── Dark mode: FullCalendar ──────────────────────────────────── */ :root[data-menu-color="dark"] .fc-theme-standard td, :root[data-menu-color="dark"] .fc-theme-standard th, :root[data-menu-color="dark"] .fc-scrollgrid { border-color: var(--card-border) !important; } :root[data-menu-color="dark"] .fc, :root[data-menu-color="dark"] .fc-col-header-cell-cushion, :root[data-menu-color="dark"] .fc-daygrid-day-number, :root[data-menu-color="dark"] .fc-timegrid-slot-label-cushion { color: var(--body-text); } :root[data-menu-color="dark"] .fc-daygrid-day.fc-day-today, :root[data-menu-color="dark"] .fc-timegrid-col.fc-day-today { background: rgba(29,158,117,.08) !important; } :root[data-menu-color="dark"] .fc-col-header { background: #1e2e26; } :root[data-menu-color="dark"] .fc-view-harness { background: var(--card-bg); } /* Responsive: colapsa sidebar a top en mobile */ @media (max-width: 900px) { .app-wrapper { flex-direction: column; } .app-sidebar { width: 100%; min-height: auto; position: relative; } .sidebar-nav { max-height: 280px; } }