/* ============================================
   BASE.CSS — Variables, reset, layout, typography
   Dashboard Clientes — Acelera tu CRM
   ============================================ */

/* Inter self-hosteada (Pablo 2026-07-13, perf): fuente VARIABLE (un solo woff2 latin, 48KB, eje wght 100-900) →
   fuera la dependencia de Google Fonts CDN (request externo que bloqueaba el primer pintado). display:swap = sin FOIT. */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/inter-var.woff2') format('woff2');
}

/* --- CSS Variables (overridden per client via config) --- */
:root {
    /* Brand colors - defaults, overridden by client config */
    --color-primary: #146BFF;
    --color-primary-rgb: 20, 107, 255;
    --color-secondary: #8b5cf6;
    --color-accent: #FF8A00;

    /* Background layers — OPACOS (Pablo 2026-07-08): las tarjetas/sidebar TAPAN el #bg-circuit (líneas de fondo) */
    --bg-body: #0a0b0e;
    --bg-sidebar: #0e0f14;
    --bg-card: #16171d;
    --bg-card-hover: #1c1d25;
    --bg-input: #14151b;
    --bg-overlay: rgba(0, 0, 0, 0.65);

    /* Borders */
    --border-color: rgba(255, 255, 255, 0.06);
    --border-color-hover: rgba(255, 255, 255, 0.12);

    /* Text */
    --text-primary: #f1f3f5;
    --text-secondary: #8b8fa3;
    --text-muted: #555770;
    --text-inverse: #06070b;

    /* Semantic */
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.1);
    --color-danger: #ef4444;
    --color-danger-bg: rgba(239, 68, 68, 0.1);
    --color-warning: #f59e0b;
    --color-warning-bg: rgba(245, 158, 11, 0.1);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.1);

    /* Chart palette */
    --chart-1: #146BFF;
    --chart-2: #FF8A00;
    --chart-3: #10b981;
    --chart-4: #8b5cf6;
    --chart-5: #ef4444;
    --chart-6: #06b6d4;
    --chart-7: #ec4899;
    --chart-8: #84cc16;

    /* Spacing */
    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 32px;
    --space-2xl: 48px;

    /* Layout */
    --sidebar-width: 260px;
    --sidebar-collapsed: 0px;
    --top-bar-height: 64px;
    --border-radius: 12px;
    --border-radius-sm: 8px;
    --border-radius-xs: 6px;

    /* Typography */
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-xs: 0.7rem;
    --font-size-sm: 0.8rem;
    --font-size-base: 0.875rem;
    --font-size-md: 1rem;
    --font-size-lg: 1.25rem;
    --font-size-xl: 1.5rem;
    --font-size-2xl: 2rem;
    --font-size-3xl: 2.5rem;

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 400ms ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --shadow-glow: 0 0 20px rgba(var(--color-primary-rgb), 0.15);
}

/* --- Reset --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background: var(--bg-body);
    color: var(--text-primary);
    line-height: 1.5;
    overflow-x: hidden;
    min-height: 100vh;
    position: relative;
}

/* --- Circuit Lines Background (from aceleratucrm.com) --- */
.bg-circuit {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;   /* Pablo 2026-07-08: DETRÁS del contenido (antes 999 = por encima → se veía sobre las tarjetas). app-layout es z-index:1 → las tarjetas lo tapan; las líneas solo se ven en los huecos. */
    overflow: hidden;
    /* 🚀 PERF (Pablo 2026-07-13 "el fondo va un pelín gageo"): aíslo el fondo animado en SU PROPIA capa GPU.
       Así la animación de las chispas NO fuerza el repintado del CONTENIDO al hacer scroll (las dos capas se
       componen por separado en la GPU). Sin quitar el fondo. */
    will-change: transform;
    transform: translateZ(0);
    contain: layout paint style;
}

@keyframes spark-flow {
    0% { stroke-dashoffset: -100; }
    100% { stroke-dashoffset: 100; }
}

.spark-line {
    stroke: #146BFF;
    stroke-width: 1;
    opacity: 0.05;
    fill: none;
    vector-effect: non-scaling-stroke;
}

.spark-dot, .spark-trail-1, .spark-trail-2, .spark-trail-3 {
    fill: none;
    vector-effect: non-scaling-stroke;
    animation: spark-flow var(--dur) linear infinite;
    animation-delay: var(--del);
    stroke-linecap: round;
}

.spark-dot {
    stroke: #146BFF;
    stroke-width: 3;
    stroke-dasharray: 0.1 200;
    opacity: 0.6;
    /* 🚀 PERF: quitado filter: url(#spark-glow) — un filtro SVG de brillo re-renderizado en CADA frame de la
       animación = carísimo. El punto azul ya se ve (opacity .6 + stroke 3); el glow apenas aportaba. */
}

.spark-trail-1 {
    stroke: #146BFF;
    stroke-width: 1.5;
    stroke-dasharray: 1 200;
    opacity: 0.4;
}

.spark-trail-2 {
    stroke: #146BFF;
    stroke-width: 1;
    stroke-dasharray: 2.5 200;
    opacity: 0.2;
}

.spark-trail-3 {
    stroke: #146BFF;
    stroke-width: 1;
    stroke-dasharray: 5 200;
    opacity: 0.1;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; height: auto; }

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    color: inherit;
}

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-color-hover); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* --- Loading Overlay --- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-body);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    transition: opacity var(--transition-slow);
}

.loading-overlay .loading-spinner {
    z-index: 1;
}

.loading-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--border-color);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.loading-text {
    margin-top: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- App Layout --- */
.app-layout {
    display: flex;
    min-height: 100vh;
    position: relative;
    z-index: 1;
}

/* --- Sidebar --- */
.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--sidebar-width);
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: transform var(--transition-base);
    overflow-y: auto;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sidebar-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    min-height: 72px;
}

.client-logo {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-xs);
    object-fit: contain;
}

.client-logo-fallback {
    width: 36px;
    height: 36px;
    border-radius: var(--border-radius-xs);
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
}

.client-name {
    font-size: var(--font-size-base);
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Sidebar Brand (Acelera tu CRM) --- */
.sidebar-brand {
    padding: 0 var(--space-lg) var(--space-md);
    border-bottom: 1px solid var(--border-color);
}

.brand-logo {
    width: 130px;
    height: 20px;
    opacity: 0.7;
    transition: opacity var(--transition-fast);
}

.brand-logo:hover {
    opacity: 1;
}

/* --- Sidebar Navigation --- */
.sidebar-nav {
    flex: 1;
    padding: var(--space-md) 0;
}

.nav-group {
    margin-bottom: var(--space-sm);
}

.nav-group-label {
    padding: var(--space-sm) var(--space-lg);
    font-size: var(--font-size-xs);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* Grupo plegable (Meta / Google / Orgánico): la etiqueta es un botón con chevron */
.nav-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
}
.nav-group-toggle:hover { color: var(--text-primary); }
.nav-group-chev { flex: none; opacity: 0.7; transition: transform 0.15s ease; }
.nav-group.col { margin-bottom: 2px; }

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    margin: 1px var(--space-sm);
    border-radius: var(--border-radius-sm);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
    user-select: none;
}

.nav-item:hover {
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
}

.nav-item.active {
    background: rgba(var(--color-primary-rgb), 0.1);
    color: var(--color-primary);
}

.nav-item .nav-icon {
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--text-secondary);
}

.nav-item.active .nav-icon {
    color: var(--color-primary);
}

.nav-item .nav-icon svg {
    width: 18px;
    height: 18px;
}

.nav-item.sub-item {
    padding-left: calc(var(--space-lg) + 28px);
    font-size: var(--font-size-xs);
}

/* --- Sidebar Footer --- */
.sidebar-footer {
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--border-color);
}

.powered-by {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    text-align: center;
    padding: var(--space-md) 0;
}

.powered-by strong {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Content Footer Branding --- */
.content-footer-brand {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-xl) 0 var(--space-md);
    margin-top: var(--space-xl);
    border-top: 1px solid var(--border-color);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.content-footer-brand strong {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: var(--font-size-base);
}

/* --- Top Bar Branding --- */
.top-bar-brand {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

.top-bar-brand strong {
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* --- Mobile Menu Toggle --- */
.menu-toggle {
    display: none;
    position: fixed;
    top: var(--space-md);
    left: var(--space-md);
    z-index: 200;
    width: 40px;
    height: 40px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

.menu-toggle span {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--text-secondary);
    border-radius: 1px;
    transition: all var(--transition-fast);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: var(--bg-overlay);
    z-index: 90;
}

/* --- Main Content --- */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left var(--transition-base);
}

/* --- Sidebar plegable (Pablo 2026-07-08, tipo Triple Whale) --- */
.sidebar { transition: width var(--transition-base), transform var(--transition-base); }
.sidebar-collapse-btn {
    margin-left: auto; flex-shrink: 0; width: 28px; height: 28px;
    background: transparent; border: 1px solid var(--border-color); color: var(--text-secondary);
    border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center;
    transition: all var(--transition-fast);
}
.sidebar-collapse-btn:hover { color: var(--text-primary); border-color: var(--border-color-hover); background: rgba(255,255,255,.04); }
.sidebar-subtitle { font-size: var(--font-size-xs); color: var(--text-muted); font-weight: 500; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-headwrap { display: flex; flex-direction: column; min-width: 0; }

/* estado COLAPSADO: solo iconos (66px). --sidebar-width cambia → sidebar + main-content se ajustan juntos */
.app-layout.collapsed { --sidebar-width: 66px; }
.app-layout.collapsed .nav-label,
.app-layout.collapsed .nav-group-label,
.app-layout.collapsed .sidebar-subtitle,
.app-layout.collapsed .client-name,
.app-layout.collapsed .powered-by,
.app-layout.collapsed .sidebar-user,
.app-layout.collapsed .nav-alert-badge,
.app-layout.collapsed .dash-picker,
.app-layout.collapsed .nav-item > svg { display: none; }
.app-layout.collapsed .nav-item { justify-content: center; padding-left: 6px; padding-right: 6px; margin: 2px 8px; }
.app-layout.collapsed .sidebar-header { justify-content: center; padding-left: var(--space-sm); padding-right: var(--space-sm); }
.app-layout.collapsed .sidebar-nav { padding-top: var(--space-sm); }
.app-layout.collapsed .nav-group { margin-top: var(--space-sm); }

/* --- Top Bar --- */
.top-bar {
    position: sticky;
    top: 0;
    z-index: 50;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    row-gap: 10px;
    padding: var(--space-md) var(--space-xl);
    min-height: var(--top-bar-height);
    background: rgba(10, 11, 14, 0.75);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--border-color);
}

.top-bar-left {
    display: flex;
    align-items: baseline;
    gap: var(--space-md);
    flex-shrink: 0;
}

/* Botones de acción (tema/PDF/salir): siempre juntos, no envuelven por dentro */
.top-bar-actions {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-shrink: 0;
}

/* Filtros en la cabecera: crecen y se alinean a la derecha (junto a las acciones) cuando
   todo cabe en UNA línea. Cuando no cabe (≤1450px), la media query de abajo los baja a su
   propia fila a lo ancho → 2 filas limpias (título+acciones arriba, filtros abajo). */
.top-bar > .filters-bar {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: flex-end;
}

@media (max-width: 1600px) {
    .top-bar-left { order: 1; flex: 1 1 auto; }
    .top-bar-actions { order: 2; margin-left: auto; }
    .top-bar > .filters-bar { order: 3; flex-basis: 100%; justify-content: flex-start; }
}

.section-title {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--text-primary);
}

.date-range-label {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
}

.top-bar-right {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.filters-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
}

/* --- Content Area --- */
.content {
    flex: 1;
    padding: var(--space-xl);
    transition: opacity 150ms ease, transform 150ms ease;
}

/* --- Section Transitions --- */
.content.section-exit {
    opacity: 0;
    transform: translateY(6px);
}

.content.section-enter {
    opacity: 0;
    transform: translateY(-6px);
    animation: section-fade-in 200ms ease forwards;
}

@keyframes section-fade-in {
    to { opacity: 1; transform: translateY(0); }
}

/* --- Skeleton Loading --- */
@keyframes shimmer {
    0% { background-position: -400px 0; }
    100% { background-position: 400px 0; }
}

.skeleton-card {
    pointer-events: none;
}

.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skeleton-line.skeleton-sm { width: 60%; margin-bottom: var(--space-sm); }
.skeleton-line.skeleton-lg { width: 40%; height: 28px; }

.skeleton-block {
    height: 200px;
    border-radius: var(--border-radius-sm);
    background: linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

/* --- Data Freshness --- */
.data-freshness {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    white-space: nowrap;
}

/* --- Count-up Animation --- */
@keyframes count-pop {
    0% { transform: scale(0.8); opacity: 0; }
    60% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.scorecard-value.count-up {
    animation: count-pop 400ms ease-out forwards;
}