/* ===================================================================== TaxiWeb Admin ยท Hoja de estilos principal Basado en variables CSS + soporte nativo de tema claro/oscuro de Bootstrap 5.3 (atributo data-bs-theme en ). ===================================================================== */ :root { --tw-sidebar-width: 264px; --tw-sidebar-collapsed-width: 76px; --tw-radius: 0.75rem; --tw-transition: all .2s ease-in-out; --tw-brand: #f5a623; /* Amarillo taxi */ --tw-brand-dark: #d68c0f; --tw-brand-contrast: #1a1a1a; } /* ---------- Tema claro (predeterminado) ---------- */ [data-bs-theme="light"] { --tw-bg-app: #f4f6f9; --tw-bg-surface: #ffffff; --tw-bg-sidebar: #ffffff; --tw-text-muted: #6c757d; --tw-border: #e7eaf0; --tw-shadow: 0 0.25rem 1rem rgba(20, 25, 40, .06); } /* ---------- Tema oscuro ---------- */ [data-bs-theme="dark"] { --tw-bg-app: #11151c; --tw-bg-surface: #1b212c; --tw-bg-sidebar: #161b24; --tw-text-muted: #9aa4b2; --tw-border: #2a3140; --tw-shadow: 0 0.25rem 1rem rgba(0, 0, 0, .35); } html, body { height: 100%; } body { background-color: var(--tw-bg-app); transition: var(--tw-transition); } a { text-decoration: none; } /* --------------------------------------------------------------- Layout general: sidebar fija + contenido --------------------------------------------------------------- */ .tw-app { display: flex; min-height: 100vh; } .tw-sidebar { width: var(--tw-sidebar-width); flex-shrink: 0; background-color: var(--tw-bg-sidebar); border-right: 1px solid var(--tw-border); transition: var(--tw-transition); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .tw-sidebar.collapsed { width: var(--tw-sidebar-collapsed-width); } .tw-sidebar.collapsed .tw-sidebar-label, .tw-sidebar.collapsed .tw-brand-text { display: none; } .tw-brand { display: flex; align-items: center; gap: .65rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--tw-border); font-weight: 700; font-size: 1.1rem; } .tw-brand-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--tw-radius); background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-dark)); color: var(--tw-brand-contrast); font-size: 1.25rem; } .tw-nav { padding: .75rem; } .tw-nav-section { text-transform: uppercase; font-size: .7rem; letter-spacing: .08em; color: var(--tw-text-muted); padding: .9rem .75rem .35rem; } .tw-nav-link { display: flex; align-items: center; gap: .85rem; padding: .6rem .85rem; border-radius: var(--tw-radius); color: var(--bs-body-color); font-weight: 500; margin-bottom: .15rem; transition: var(--tw-transition); } .tw-nav-link i { font-size: 1.15rem; width: 1.4rem; text-align: center; color: var(--tw-text-muted); } .tw-nav-link:hover { background-color: rgba(245, 166, 35, .12); color: var(--tw-brand-dark); } .tw-nav-link:hover i { color: var(--tw-brand-dark); } .tw-nav-link.active { background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-dark)); color: var(--tw-brand-contrast); } .tw-nav-link.active i { color: var(--tw-brand-contrast); } /* --------------------------------------------------------------- Contenido principal --------------------------------------------------------------- */ .tw-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; } .tw-topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1.5rem; background-color: var(--tw-bg-surface); border-bottom: 1px solid var(--tw-border); } .tw-content { padding: 1.5rem; flex-grow: 1; } /* --------------------------------------------------------------- Tarjetas y componentes --------------------------------------------------------------- */ .tw-card { background-color: var(--tw-bg-surface); border: 1px solid var(--tw-border); border-radius: var(--tw-radius); box-shadow: var(--tw-shadow); } .tw-stat-card { display: flex; align-items: center; gap: 1rem; padding: 1.25rem; } .tw-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: var(--tw-radius); font-size: 1.4rem; flex-shrink: 0; } .tw-stat-value { font-size: 1.6rem; font-weight: 700; line-height: 1.1; } .tw-stat-label { color: var(--tw-text-muted); font-size: .85rem; } .tw-theme-toggle { border: 1px solid var(--tw-border); background-color: var(--tw-bg-surface); border-radius: 999px; width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center; transition: var(--tw-transition); } .tw-theme-toggle:hover { border-color: var(--tw-brand); color: var(--tw-brand-dark); } .tw-table thead th { color: var(--tw-text-muted); font-size: .78rem; text-transform: uppercase; letter-spacing: .05em; border-bottom-width: 1px; font-weight: 600; } .tw-avatar { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--tw-brand), var(--tw-brand-dark)); color: var(--tw-brand-contrast); font-weight: 700; font-size: .9rem; } .tw-badge-soft { border-radius: 999px; padding: .3rem .65rem; font-size: .76rem; font-weight: 600; display: inline-flex; align-items: center; gap: .35rem; } .tw-badge-soft.success { background-color: rgba(40, 167, 69, .15); color: #2fb350; } .tw-badge-soft.warning { background-color: rgba(245, 166, 35, .18); color: #d68c0f; } .tw-badge-soft.danger { background-color: rgba(220, 53, 69, .15); color: #e35d6a; } .tw-badge-soft.neutral { background-color: rgba(108, 117, 125, .15); color: var(--tw-text-muted); } .tw-empty-state { text-align: center; padding: 3rem 1rem; color: var(--tw-text-muted); } .tw-auth-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(circle at top left, rgba(245, 166, 35, .18), transparent 45%), var(--tw-bg-app); padding: 1.5rem; } .tw-auth-card { width: 100%; max-width: 420px; } @media (max-width: 991.98px) { .tw-sidebar { position: fixed; left: -100%; z-index: 1040; box-shadow: var(--tw-shadow); } .tw-sidebar.show { left: 0; } }