/* ========================================================= LUNEXUS - Componentes (Design System, Light Mode) Todos los valores de marca (color, tipografía, espaciado, radios, sombras) viven en tokens.css — este archivo solo define CÓMO se ven los componentes usando esas variables. Sidebar oscuro (--lx-bg) + resto de la interfaz 100% clara (--lx-bg-light/--lx-surface). Inspirado en Linear, Notion, Vercel, ClickUp, HubSpot: minimalismo, bordes suaves, sombras muy sutiles, el color comunica estado (familia verde + un único rojo de excepción para urgencia). Selectores de ícono usan :where(i, svg) para funcionar tanto antes como después de que Lucide reemplace por el . */ .sidebar-brand-logo { /* Corrección "Logo del sidebar más grande" (a pedido explícito del dueño del proyecto): pidió el triple (84px), pero el wordmark es ancho (~3.25:1) y a esa altura se sale del panel de 260px — acordado el doble (56px) en su lugar, que sigue cabiendo con margen dentro de .sidebar-brand. */ height: 56px; width: auto; display: block; } .lx-auth-logo { height: 34px; width: auto; display: inline-block; } /* ---------- Edición inline de texto (Clientes) ---------- Mismo mecanismo de interacción que .lx-select-inline (Proyectos), aplicado a celdas de texto: assets/js/app.js::initEdicionInlineTexto(). */ .lx-editable-cell { cursor: text; border-radius: var(--lx-radius-xs); transition: background-color var(--lx-transition-fast); } .lx-editable-cell:hover { background-color: var(--lx-hover); } .lx-editable-cell .form-control { min-height: unset; padding: 0.3rem 0.6rem; } /* ---------- Resaltado de una tarea puntual (Dashboard → "Próximas Entregas" → proyecto.php?tab=tasks&tarea=Y). Aplica tanto a la fila de la vista Lista como a la tarjeta del Kanban: ver initResaltarTarea() en assets/js/tareas.js. ---- */ .lx-tarea-resaltada { background-color: var(--lx-primary-soft) !important; box-shadow: inset 0 0 0 2px var(--lx-primary); border-radius: var(--lx-radius-sm); } .app-wrapper { display: flex; min-height: 100vh; } /* ---------- Sidebar (única superficie oscura del sistema) ---------- */ .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: var(--lx-sidebar-width); background-color: var(--lx-bg); background-image: radial-gradient(circle at 20% 0%, rgba(var(--lx-primary-rgb), 0.10), transparent 55%); color: var(--lx-text-inverse); display: flex; flex-direction: column; padding: 1.5rem 1rem; z-index: 1030; box-shadow: 6px 0 32px -18px rgba(0, 0, 0, 0.45); transition: transform var(--lx-transition); } .sidebar-brand { display: flex; align-items: center; padding: 0 0.25rem 1.5rem; border-bottom: 1px solid rgba(245, 247, 246, 0.1); margin-bottom: 1rem; } .sidebar-nav .nav-link { position: relative; display: flex; align-items: center; gap: 0.75rem; color: rgba(245, 247, 246, 0.68); padding: 0.65rem 0.75rem; border-radius: var(--lx-radius-sm); font-size: 0.9rem; font-weight: 500; margin-bottom: 0.15rem; transition: background-color var(--lx-transition-fast), color var(--lx-transition-fast), padding-left var(--lx-transition-fast); } .sidebar-nav .nav-link :where(i, svg) { width: 18px; height: 18px; flex-shrink: 0; transition: color var(--lx-transition-fast); } .sidebar-nav .nav-link:hover { background-color: rgba(245, 247, 246, 0.08); color: var(--lx-text-inverse); padding-left: 0.95rem; } .sidebar-nav .nav-link.active { background-color: var(--lx-primary-strong); color: var(--lx-text-inverse); font-weight: 600; box-shadow: 0 6px 16px -6px rgba(var(--lx-primary-rgb), 0.45); } .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(10, 15, 12, 0.5); z-index: 1020; } /* ---------- Main content ---------- */ .main-content { margin-left: var(--lx-sidebar-width); flex: 1; display: flex; flex-direction: column; min-height: 100vh; } /* ---------- Topbar / Header (claro) ---------- */ .topbar { display: flex; align-items: center; gap: 1rem; background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-bottom: 1px solid var(--lx-border); padding: 0.85rem 1.5rem; position: sticky; top: 0; z-index: 1010; } .btn-toggle-sidebar { display: none; background: none; border: none; color: var(--lx-text); padding: 0.3rem; } .btn-toggle-sidebar :where(i, svg) { width: 22px; height: 22px; } .topbar-title { font-family: var(--lx-font-heading); font-size: 1.15rem; font-weight: 600; margin: 0; white-space: nowrap; } .topbar-search { position: relative; flex: 1; max-width: 360px; } .topbar-search :where(i, svg) { position: absolute; left: 0.85rem; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--lx-text-muted); pointer-events: none; } .topbar-search .form-control { padding-left: 2.25rem; border-radius: var(--lx-radius-sm); background-color: var(--lx-bg-light); border: 1px solid var(--lx-border); color: var(--lx-text); } .topbar-actions { display: flex; align-items: center; gap: 0.75rem; margin-left: auto; } .btn-icon { position: relative; background: none; border: none; color: var(--lx-text-muted); padding: 0.45rem; border-radius: 50%; transition: background-color var(--lx-transition-fast), color var(--lx-transition-fast); } .btn-icon :where(i, svg) { width: 20px; height: 20px; display: block; } .btn-icon:hover { background-color: var(--lx-hover-strong); color: var(--lx-primary-hover); } .badge-dot { position: absolute; top: 0.4rem; right: 0.4rem; width: 8px; height: 8px; background-color: var(--lx-primary); border-radius: 50%; box-shadow: 0 0 0 2px var(--lx-surface), 0 0 8px rgba(var(--lx-primary-rgb), 0.6); } /* Alerta en pantalla de la frase motivacional del día (includes/header.php) — .alert-success ya hereda el verde de marca vía --bs-success (tokens.css), sin ningún color nuevo. Flotante y centrada arriba de todo el contenido, por encima incluso de dropdowns abiertos (z-index), para que sea imposible no verla al entrar por primera vez en el día. */ .lx-alerta-frase-dia { position: fixed; top: 1rem; left: 50%; transform: translateX(-50%); z-index: 1080; width: min(92vw, 560px); } .lx-alerta-frase-dia .alert { display: flex; align-items: center; gap: 0.6rem; } .lx-alerta-frase-dia .alert > span { flex: 1 1 auto; } .lx-alerta-frase-dia .alert :where(i, svg) { flex: 0 0 auto; width: 18px; height: 18px; } .btn-user { display: flex; align-items: center; gap: 0.5rem; background: none; border: 1px solid transparent; padding: 0.3rem 0.6rem 0.3rem 0.3rem; border-radius: var(--lx-radius-pill); transition: background-color var(--lx-transition-fast), border-color var(--lx-transition-fast); } .btn-user:hover { background-color: var(--lx-hover-strong); border-color: var(--lx-border); } .avatar { width: 32px; height: 32px; border-radius: 50%; background-color: var(--lx-primary-strong); color: var(--lx-text-inverse); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; font-family: var(--lx-font-heading); box-shadow: 0 0 0 2px var(--lx-surface), 0 0 0 3px rgba(var(--lx-primary-rgb), 0.3); } .user-name { font-size: 0.88rem; font-weight: 600; color: var(--lx-text); } /* ---------- Color de usuario (selector en Usuarios, Agenda de Trabajo del Dashboard). Excepción acotada a identificación de persona: la paleta sale de Catalogs::userColorPalette(), nunca de --lx-primary. ---------- */ .lx-swatch-picker { display: flex; flex-wrap: wrap; gap: 0.5rem; } .lx-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid transparent; padding: 0; cursor: pointer; transition: transform var(--lx-transition-fast), box-shadow var(--lx-transition-fast); } .lx-swatch:hover { transform: scale(1.12); } .lx-swatch.lx-swatch-selected { border-color: var(--lx-surface); box-shadow: 0 0 0 2px var(--lx-text); } .lx-swatch-sm { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 0.4rem; vertical-align: middle; } /* ---------- Breadcrumbs ---------- */ .lx-breadcrumb-bar { padding: 0.85rem 2rem 0; } .lx-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; font-size: 0.82rem; color: var(--lx-text-muted); } .lx-breadcrumb li { display: flex; align-items: center; gap: 0.4rem; } .lx-breadcrumb a { color: var(--lx-text-muted); text-decoration: none; transition: color var(--lx-transition-fast); } .lx-breadcrumb a:hover { color: var(--lx-primary-hover); } .lx-breadcrumb li:last-child { color: var(--lx-text); font-weight: 500; } .lx-breadcrumb .lx-breadcrumb-sep { color: var(--lx-border); display: flex; } .lx-breadcrumb .lx-breadcrumb-sep :where(i, svg) { width: 13px; height: 13px; } /* ---------- Page content ---------- */ .page-content { flex: 1; padding: 1.5rem 2rem 2rem; animation: lx-fade-in 220ms ease; } /* ---------- Footer ---------- */ .app-footer { padding: 1rem 2rem; text-align: center; color: var(--lx-text-muted); font-size: 0.85rem; border-top: 1px solid var(--lx-border); } /* ---------- Cards genéricas ---------- */ .lx-card { background-color: var(--lx-surface); border: 1px solid var(--lx-border); border-radius: var(--lx-radius); padding: 1.5rem; box-shadow: var(--lx-shadow); transition: border-color var(--lx-transition), box-shadow var(--lx-transition), transform var(--lx-transition); } .lx-card:hover { border-color: rgba(var(--lx-primary-rgb), 0.3); box-shadow: var(--lx-shadow-hover); transform: translateY(-1px); } /* ---------- Dashboard interactivo: KPIs y filas clickeables ---------- Reutiliza .lx-card tal cual (mismo look, mismo hover) envuelta en un en vez de un
— dashboard.php. */ a.lx-card-link { display: block; color: inherit; text-decoration: none; } a.lx-card-link:hover { color: inherit; } /* Igual que .lx-card-link pero sobre