/* ===================================================================== Estetica Weelko para logistics_hub (proyecto.md 15). Paleta rosa #ff92a5, sidebar oscuro #2b2b2b->#1a1a1a, modo dark por usuario. ===================================================================== */ :root { --color-primary: #ff92a5; --color-primary-hover: #ff7a96; --color-bg: #f5f5f5; --color-surface: #ffffff; --color-text: #2b2b2b; --color-text-muted: #6b6b6b; --color-border: #e2e2e2; --sidebar-from: #2b2b2b; --sidebar-to: #1a1a1a; --sidebar-text: #f5f5f5; --sidebar-text-muted: #b8b8b8; } /* Modo oscuro por usuario (clase 'dark' en ). */ body.dark { --color-bg: #1a1a1a; --color-surface: #242424; --color-text: #f0f0f0; --color-text-muted: #a8a8a8; --color-border: #3a3a3a; --sidebar-from: #242424; --sidebar-to: #121212; } /* --------------------------------------------------------------------- Puente con las variables nativas de Bootstrap 5.3. Los componentes de Bootstrap (tablas, text-muted, dropdowns, badges, modales, etc.) usan variables --bs-*; las sincronizamos con la paleta Weelko para que el modo oscuro se vea correcto en todos los casos. --------------------------------------------------------------------- */ :root { --bs-primary: var(--color-primary); --bs-primary-rgb: 255, 146, 165; --bs-link-color: var(--color-primary); --bs-link-color-rgb: 255, 146, 165; --bs-link-hover-color: var(--color-primary-hover); --bs-link-hover-color-rgb: 255, 122, 150; } body.dark { --bs-body-bg: var(--color-bg); --bs-body-bg-rgb: 26, 26, 26; --bs-body-color: var(--color-text); --bs-body-color-rgb: 240, 240, 240; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: var(--color-text-muted); --bs-secondary-bg: #2f2f2f; --bs-tertiary-color: rgba(240, 240, 240, 0.5); --bs-tertiary-bg: #1f1f1f; --bs-border-color: var(--color-border); --bs-border-color-translucent: rgba(255, 255, 255, 0.12); --bs-heading-color: var(--color-text); --bs-card-bg: var(--color-surface); --bs-card-color: var(--color-text); --bs-card-border-color: var(--color-border); --bs-card-cap-bg: #2c2c2c; --bs-table-bg: transparent; --bs-table-color: var(--color-text); --bs-table-border-color: var(--color-border); --bs-table-striped-bg: rgba(255, 255, 255, 0.04); --bs-table-striped-color: var(--color-text); --bs-table-hover-bg: rgba(255, 255, 255, 0.07); --bs-table-hover-color: var(--color-text); --bs-dropdown-bg: var(--color-surface); --bs-dropdown-color: var(--color-text); --bs-dropdown-border-color: var(--color-border); --bs-dropdown-link-color: var(--color-text); --bs-dropdown-link-hover-color: var(--color-text); --bs-dropdown-link-hover-bg: rgba(255, 255, 255, 0.08); --bs-dropdown-divider-bg: var(--color-border); --bs-modal-bg: var(--color-surface); --bs-modal-color: var(--color-text); --bs-modal-border-color: var(--color-border); --bs-modal-header-border-color: var(--color-border); --bs-modal-footer-border-color: var(--color-border); --bs-list-group-bg: var(--color-surface); --bs-list-group-color: var(--color-text); --bs-list-group-border-color: var(--color-border); --bs-list-group-action-hover-bg: rgba(255, 255, 255, 0.06); --bs-form-control-bg: var(--color-surface); --bs-form-control-color: var(--color-text); --bs-form-control-disabled-bg: #2a2a2a; --bs-form-select-bg: var(--color-surface); --bs-nav-tabs-link-active-bg: var(--color-surface); --bs-nav-tabs-link-active-color: var(--color-text); --bs-nav-tabs-link-active-border-color: var(--color-border); --bs-pagination-bg: var(--color-surface); --bs-pagination-color: var(--color-primary); --bs-pagination-border-color: var(--color-border); --bs-pagination-hover-bg: rgba(255, 255, 255, 0.06); --bs-pagination-hover-color: var(--color-primary-hover); --bs-pagination-disabled-bg: #2a2a2a; --bs-pagination-disabled-color: var(--color-text-muted); } body { font-family: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif; background-color: var(--color-bg); color: var(--color-text); } a { color: var(--color-primary); } a:hover { color: var(--color-primary-hover); } /* ---------------------- Layout con sidebar ------------------------- */ .lh-layout { display: flex; min-height: 100vh; } .lh-sidebar { width: 250px; background: linear-gradient(180deg, var(--sidebar-from), var(--sidebar-to)); color: var(--sidebar-text); padding: 1.5rem 1rem; flex-shrink: 0; } .lh-sidebar .lh-brand { font-weight: 700; font-size: 1.25rem; color: var(--color-primary); margin-bottom: 1.5rem; display: block; text-decoration: none; } .lh-sidebar .nav-link { color: var(--sidebar-text-muted); border-radius: 8px; padding: 0.6rem 0.9rem; margin-bottom: 0.25rem; font-weight: 500; } .lh-sidebar .nav-link:hover, .lh-sidebar .nav-link.active { background: var(--color-primary); color: #2b2b2b; } .lh-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .lh-topbar { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0.75rem 1.25rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.75rem; } .lh-content { padding: 1.5rem; flex: 1; } /* ---------------------- Componentes -------------------------------- */ .btn-primary { background-color: var(--color-primary); border-color: var(--color-primary); color: #2b2b2b; font-weight: 600; } .btn-primary:hover, .btn-primary:focus { background-color: var(--color-primary-hover); border-color: var(--color-primary-hover); color: #2b2b2b; } .btn-outline-primary { border-color: var(--color-primary); color: var(--color-primary); } .btn-outline-primary:hover { background-color: var(--color-primary); border-color: var(--color-primary); color: #2b2b2b; } .card { background-color: var(--color-surface); border: 1px solid var(--color-border); border-radius: 12px; } .form-control, .form-select { background-color: var(--color-surface); border: 1px solid var(--color-border); color: var(--color-text); } .form-control:focus, .form-select:focus { border-color: var(--color-primary); box-shadow: 0 0 0 0.2rem rgba(255, 146, 165, 0.25); background-color: var(--color-surface); color: var(--color-text); } /* ---------------------- Login -------------------------------------- */ .lh-login-wrapper { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--sidebar-from), var(--sidebar-to)); padding: 1rem; z-index: 1; } .lh-login-card { width: 100%; max-width: 400px; background: var(--color-surface); border-radius: 16px; padding: 2.5rem 2rem; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35); } .lh-login-card .lh-brand { color: var(--color-primary); font-weight: 700; font-size: 1.6rem; text-align: center; display: block; margin-bottom: 0.25rem; } /* ---------------------- Variante mobile-first (almacenes) ---------- */ .lh-movil .lh-content { padding: 1rem; } .lh-movil .btn-grande { display: block; width: 100%; padding: 1.25rem; font-size: 1.2rem; font-weight: 700; border-radius: 14px; margin-bottom: 1rem; } @media (max-width: 768px) { .lh-layout { flex-direction: column; } .lh-sidebar { width: 100%; } } /* ---------------------- Estados (centrado) ------------------------- */ .lh-estado-centro { max-width: 520px; margin: 3rem auto; text-align: center; } .lh-estado-centro .display-1 { color: var(--color-primary); font-weight: 700; }