/* Springboard CRM — sistema de diseño (identidad visual: azul principal #062B5B,
   azul secundario #0A4D9A, verde Spring #2ED573, verde oscuro #00B894, tipografía
   Poppins) */

:root {
  /* Marca */
  --brand-900: #062B5B;
  --brand-800: #083A72;
  --brand-700: #0A4D9A;
  --brand-600: #1560B8;
  --brand-accent: #2ED573;
  --brand-accent-dark: #00B894;

  /* Neutros */
  --gray-50:  #F5F7FA;
  --gray-100: #F1F5F9;
  --gray-200: #E2E8F0;
  --gray-300: #CBD5E1;
  --gray-400: #94A3B8;
  --gray-500: #52606D;
  --gray-600: #475569;
  --gray-700: #334155;
  --gray-800: #1E293B;
  --gray-900: #0F172A;

  /* Semántico */
  --success: #00B894;
  --danger:  #DC2626;
  --warning: #D97706;
  --info:    #0A4D9A;

  --bg: var(--gray-50);
  --surface: #FFFFFF;
  --text: var(--gray-900);
  --muted: var(--gray-500);
  --border: var(--gray-200);

  /* Radios */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;

  /* Sombras */
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06);
  --shadow-md: 0 4px 16px rgba(15,23,42,.08);
  --shadow-lg: 0 16px 40px rgba(15,23,42,.14);

  /* Overrides de variables de Bootstrap 5.3 (cascadean a btn/badge/alert/text/bg/border-*) */
  --bs-primary: var(--brand-700);
  --bs-primary-rgb: 10, 77, 154;
  --bs-secondary: var(--gray-500);
  --bs-secondary-rgb: 82, 96, 109;
  --bs-success: var(--success);
  --bs-success-rgb: 0, 184, 148;
  --bs-danger: var(--danger);
  --bs-danger-rgb: 220, 38, 38;
  --bs-warning: var(--warning);
  --bs-warning-rgb: 217, 119, 6;
  --bs-info: var(--info);
  --bs-info-rgb: 10, 77, 154;
  --bs-light: var(--gray-50);
  --bs-dark: var(--gray-900);

  --bs-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --bs-body-color: var(--text);
  --bs-body-bg: var(--bg);
  --bs-border-color: var(--border);
  --bs-border-radius: var(--radius-sm);
  --bs-border-radius-lg: var(--radius-md);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-xl: var(--radius-lg);
  --bs-link-color: var(--brand-700);
  --bs-link-color-rgb: 10, 77, 154;
  --bs-link-hover-color: var(--brand-accent-dark);
  --bs-emphasis-color: var(--gray-900);

  /* HALLAZGO real: CoreUI 5 NO lee las variables --bs-* de arriba -- trae su propio
  juego namespaceado --cui-* (para poder convivir con Bootstrap puro en la misma
  página sin pisarse), documentado en su propia hoja de estilos. El bloque de arriba
  quedaba con cero efecto sobre cualquier componente que no tuviera además un override
  de CSS directo (ej. .btn-primary) -- badges, alerts, focus rings, checkboxes, etc.
  seguían con el índigo/gris default de CoreUI (#5856d6) pese a "estar theme-ado".
  Mismos valores que el bloque --bs-* de arriba, solo que en el namespace que CoreUI
  realmente consume. */
  --cui-primary: var(--brand-700);
  --cui-primary-rgb: 10, 77, 154;
  --cui-secondary: var(--gray-500);
  --cui-secondary-rgb: 82, 96, 109;
  --cui-success: var(--success);
  --cui-success-rgb: 0, 184, 148;
  --cui-danger: var(--danger);
  --cui-danger-rgb: 220, 38, 38;
  --cui-warning: var(--warning);
  --cui-warning-rgb: 217, 119, 6;
  --cui-info: var(--info);
  --cui-info-rgb: 10, 77, 154;
  --cui-light: var(--gray-50);
  --cui-light-rgb: 245, 247, 250;
  --cui-dark: var(--gray-900);
  --cui-body-font-family: 'Poppins', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --cui-body-color: var(--text);
  --cui-body-bg: var(--bg);
  --cui-border-color: var(--border);
  --cui-border-radius: var(--radius-sm);
  --cui-border-radius-lg: var(--radius-md);
  --cui-border-radius-sm: 6px;
  --cui-border-radius-xl: var(--radius-lg);
  --cui-link-color: var(--brand-700);
  --cui-link-color-rgb: 10, 77, 154;
  --cui-link-hover-color: var(--brand-accent-dark);
  --cui-emphasis-color: var(--gray-900);
}

/* Base */
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-feature-settings: 'cv02','cv03','cv04','cv11';
  -webkit-font-smoothing: antialiased;
}
::selection { background: rgba(46,213,115,.25); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; letter-spacing: -.01em; color: var(--gray-900); }

a { text-decoration: none; }

.text-muted { color: var(--muted) !important; }

/* Scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 999px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); }

/* Cards */
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}
.card-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  font-weight: 600;
}
.card h5, .card h4 { font-weight: 600; }

/* Botones */
.btn {
  font-weight: 600;
  border-radius: var(--radius-sm);
  transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, border-color .12s ease;
}
.btn:active { transform: translateY(1px); }
/* Color sólido, no degradado -- la guía de marca usa colores planos (azul secundario
para acciones interactivas), sin gradientes en los botones. */
.btn-primary {
  background: var(--brand-700);
  border: none;
  color: #fff;
  box-shadow: 0 6px 18px rgba(6,43,91,.18);
}
.btn-primary:hover, .btn-primary:focus {
  background: var(--brand-900);
  color: #fff;
  box-shadow: 0 8px 22px rgba(6,43,91,.24);
}
/* outline-secondary es el botón "de apoyo" más usado de toda la app (Exportar,
Importar, Ver, toggles del header...) -- antes tenía borde/texto gris genérico, sin
nada de marca. Ahora usa el azul principal (el más oscuro de los dos azules de la
guía) para que se note Springboard incluso en las acciones no-primarias; outline-
primary usa el azul secundario (más claro) para diferenciarse de éste sin dejar de
ser parte de la misma familia. */
.btn-outline-primary { color: var(--brand-700); border-color: var(--brand-700); }
.btn-outline-primary:hover { background: var(--brand-700); border-color: var(--brand-700); color: #fff; }
.btn-outline-secondary { color: var(--brand-900); border-color: var(--brand-900); }
.btn-outline-secondary:hover { background: var(--brand-900); border-color: var(--brand-900); color: #fff; }
.btn-secondary { background: var(--surface); border: 1px solid var(--border); color: var(--gray-600); }
.btn-secondary:hover { background: var(--gray-100); color: var(--gray-800); }
.btn-sm { border-radius: 7px; }
.btn-link { font-weight: 500; }

/* Badges */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: 999px; padding: .38em .7em; }

/* Alerts */
.alert { border: 1px solid transparent; border-left-width: 4px; border-radius: var(--radius-sm); }
.alert-success { background: #F0FDF4; border-left-color: var(--success); color: #14532D; }
.alert-danger  { background: #FEF2F2; border-left-color: var(--danger);  color: #7F1D1D; }
.alert-warning { background: #FFFBEB; border-left-color: var(--warning); color: #78350F; }
.alert-info    { background: #EFF6FF; border-left-color: var(--info);    color: #1E3A8A; }
.alert-light   { background: var(--gray-50); border: 1px solid var(--border); }

/* Formularios */
.form-label { font-weight: 600; font-size: .875rem; color: var(--gray-700); }
.form-control, .form-select {
  border-color: var(--border);
  border-radius: var(--radius-sm);
}
.form-control:focus, .form-select:focus {
  border-color: var(--brand-accent);
  box-shadow: 0 0 0 .2rem rgba(46,213,115,.15);
}
.form-text { color: var(--muted); }

/* Tablas */
.table { color: var(--text); }
.table thead th {
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--muted);
  font-weight: 700;
  border-bottom-width: 1px;
  background: var(--gray-50);
}
.table > :not(caption) > * > * { padding: .85rem .9rem; }
.table-hover > tbody > tr:hover > * { background-color: var(--gray-50); }

/* Nav tabs */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs .nav-link {
  border: none;
  color: var(--muted);
  font-weight: 600;
  padding: .65rem 1rem;
  border-bottom: 2px solid transparent;
}
.nav-tabs .nav-link:hover { color: var(--brand-700); border-color: var(--gray-300); }
.nav-tabs .nav-link.active {
  color: var(--brand-700);
  background: transparent;
  border-bottom: 2px solid var(--brand-accent);
}

/* Dropdown / modal polish */
.dropdown-menu { border: 1px solid var(--border); box-shadow: var(--shadow-md); border-radius: var(--radius-md); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--gray-50); }
.modal-content { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-lg); }
.modal-header { border-bottom: 1px solid var(--border); }
.modal-footer { border-top: 1px solid var(--border); }

/* List groups */
.list-group-item { border-color: var(--border); }

/* Utilidad */
.hover-lift { transition: transform .2s ease, box-shadow .2s ease; }
.hover-lift:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--brand-accent); }

.shadow-soft { box-shadow: var(--shadow-md) !important; }

.fade-in { animation: fadeIn .5s ease-in-out; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ============ App shell (autenticado) ============ */

.app-sidebar {
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  width: 264px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 1030;
  display: flex;
  flex-direction: column;
}
.app-sidebar .sidebar-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: 1.1rem 1.25rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.app-sidebar .sidebar-brand img { height: 32px; width: auto; }
.app-sidebar .sidebar-brand span { font-weight: 700; color: var(--brand-900); font-size: .92rem; line-height: 1.15; }

.app-sidebar-nav { flex: 1; overflow-y: auto; padding: .9rem .75rem; }
.app-sidebar-nav .nav-section-title {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--gray-400);
  font-weight: 700;
  padding: 1rem .6rem .35rem;
}
.app-sidebar-nav .nav-section-title:first-child { padding-top: .35rem; }
.app-sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .55rem .65rem;
  border-radius: var(--radius-sm);
  color: var(--gray-600);
  font-weight: 500;
  font-size: .92rem;
  margin-bottom: .1rem;
}
.app-sidebar-nav .nav-link i { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.app-sidebar-nav .nav-link:hover { background: var(--gray-100); color: var(--brand-800); }
.app-sidebar-nav .nav-link.active {
  background: var(--brand-700);
  color: #fff;
  box-shadow: 0 4px 14px rgba(6,43,91,.22);
}

.app-header {
  position: fixed;
  top: 0; right: 0; left: 264px;
  height: 64px;
  background: rgba(255,255,255,.9);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  z-index: 999;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1.25rem;
}
.app-main {
  margin-left: 264px;
  padding-top: 64px;
  min-height: 100vh;
}
.app-main .app-main-inner { padding: 1.75rem; max-width: 1500px; }

@media (max-width: 991.98px) {
  .app-sidebar { transform: translateX(-100%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .app-sidebar.show { transform: translateX(0); }
  .app-header { left: 0; }
  .app-main { margin-left: 0; }
  .sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 1020; }
  .sidebar-backdrop.show { display: block; }
}

/* Toasts */
.tc-toast-container {
  position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1100;
  display: flex; flex-direction: column; gap: .6rem;
}
.tc-toast {
  min-width: 260px; max-width: 340px;
  padding: .8rem 1.1rem;
  border-radius: var(--radius-sm);
  color: #fff;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .2s ease, transform .2s ease;
  font-weight: 500;
  font-size: .9rem;
}
.tc-toast.show { opacity: 1; transform: translateY(0); }
.tc-toast-success { background: var(--success); }
.tc-toast-danger  { background: var(--danger); }
.tc-toast-info    { background: var(--brand-700); }

/* ============ Página pública (login, etc.) ============ */

.public-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
}
.public-navbar {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: relative;
  z-index: 3;
}
.public-navbar .navbar-brand { font-weight: 700; color: var(--brand-900); }
.public-navbar .brand-logo { height: 34px; width: auto; margin-right: 10px; }
.public-nav-links { gap: 2rem; }
.public-nav-links a { color: var(--gray-700); font-weight: 600; font-size: .95rem; }
.public-nav-links a:hover { color: var(--brand-700); }
.public-nav-signin { align-items: center; color: var(--gray-700); font-weight: 600; font-size: .95rem; padding: .5rem .25rem; }
.public-nav-signin:hover { color: var(--brand-700); }

.page-bg-anim { position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .3; overflow: hidden; }
.page-bg-anim svg { width: 120%; height: 120%; transform: translate(-10%, -10%); display: block; }
.page-bg-anim .node { transform-origin: center; animation: pulseGlow 4s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(46,213,115,.5)); }
.page-bg-anim .link { stroke-dasharray: 300; stroke-dashoffset: 300; animation: dashFlow 5s linear infinite; filter: drop-shadow(0 0 2px rgba(46,213,115,.3)); }
@keyframes pulseGlow {
  0% { transform: translateY(0) scale(1); opacity: .8; }
  50% { transform: translateY(-8px) scale(1.2); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: .8; }
}
@keyframes dashFlow {
  0% { stroke-dashoffset: 300; stroke-opacity: .4; }
  50% { stroke-dashoffset: 150; stroke-opacity: .8; }
  100% { stroke-dashoffset: 0; stroke-opacity: .4; }
}
@media (max-width: 768px) {
  .page-bg-anim { opacity: .45; }
  .page-bg-anim svg { width: 150%; height: 150%; transform: translate(-25%, -25%); }
}

.public-content { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; }

.login-card { max-width: 420px; width: 100%; margin: auto; }
.login-card.signup-card { max-width: 480px; }
.login-card .card { padding: 2rem 1.75rem; box-shadow: var(--shadow-lg); }
.login-brand { display: flex; flex-direction: column; align-items: center; gap: .5rem; margin-bottom: 1.5rem; text-align: center; }
.login-brand img { width: 220px; height: auto; }
.login-brand strong { font-size: 1.15rem; color: var(--brand-900); }

.public-footer { position: relative; z-index: 2; padding: 2rem 0 1.5rem; border-top: 1px solid var(--border); margin-top: 2rem; }
.public-footer-links { display: flex; justify-content: center; gap: 1.75rem; flex-wrap: wrap; margin-bottom: .75rem; }
.public-footer-links a { color: var(--gray-600); font-size: .9rem; font-weight: 500; }
.public-footer-links a:hover { color: var(--brand-700); }
.public-footer-copy { text-align: center; color: var(--muted); font-size: .85rem; }

/* La nav pública queda sticky -- sin esto los anchors #features/#planes
scrollean tapados detrás de la barra. */
#features, #planes { scroll-margin-top: 88px; }

/* Hero de la landing -- panel con degradé suave (no plano) que reemplaza el
antiguo header-card + la ilustración node-graph heredada de la marca vieja. */
.hero-band {
  position: relative;
  background: linear-gradient(135deg, #EAF1FB 0%, #F5F7FA 60%);
  border-radius: var(--radius-lg);
  padding: 3rem 2.5rem;
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-band::before {
  content: '';
  position: absolute; top: -60px; right: -60px; width: 260px; height: 260px;
  background: radial-gradient(circle, rgba(46,213,115,.16), transparent 70%);
  border-radius: 50%; pointer-events: none;
}
.hero-eyebrow {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(46,213,115,.14); color: var(--brand-accent-dark);
  font-weight: 700; font-size: .78rem; letter-spacing: .02em;
  padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1rem;
}
.hero-title { color: var(--brand-900); font-weight: 800; font-size: clamp(2.1rem, 4vw, 3rem); line-height: 1.1; }
.hero-lead { color: var(--gray-600); font-size: 1.08rem; max-width: 540px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid rgba(6,43,91,.08); }
.hero-trust span { display: inline-flex; align-items: center; gap: .4rem; color: var(--gray-500); font-size: .82rem; font-weight: 600; }
.hero-trust i { color: var(--brand-accent-dark); }

/* Mockup del producto en CSS puro -- reemplaza nexo-anim.svg (ilustración de
la marca vieja, un grafo de nodos que no tenía nada que ver con Springboard). */
.hero-mockup { position: relative; z-index: 1; background: var(--surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.25rem; max-width: 380px; margin: 0 auto; }
.hero-mockup-bar { display: flex; gap: 6px; margin-bottom: 1rem; }
.hero-mockup-bar span { width: 10px; height: 10px; border-radius: 50%; background: var(--gray-200); }
.hero-mockup-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.hero-mockup-col h6 { font-size: .65rem; text-transform: uppercase; letter-spacing: .04em; color: var(--gray-400); font-weight: 700; margin-bottom: .5rem; }
.hero-mockup-chip { background: var(--gray-50); border: 1px solid var(--border); border-left: 3px solid var(--gray-300); border-radius: var(--radius-sm); padding: .5rem .55rem; font-size: .72rem; font-weight: 600; color: var(--gray-700); margin-bottom: .5rem; }
.hero-mockup-chip.is-accent { border-left-color: var(--brand-accent); }
.hero-mockup-chip.is-primary { border-left-color: var(--brand-700); }
.hero-float-tag {
  position: absolute; left: 50%; bottom: -16px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: .4rem; white-space: nowrap;
  background: var(--brand-900); color: #fff; border-radius: 999px;
  padding: .5rem 1rem; box-shadow: var(--shadow-lg); font-size: .78rem; font-weight: 600;
}
.hero-float-tag i { color: var(--brand-accent); }

.feature-icon {
  width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10,77,154,.1); color: var(--brand-700);
  font-size: 1.15rem; margin-bottom: 1rem;
}

.value-list { list-style: none; padding-left: 0; }
.value-list li { display: flex; gap: .65rem; margin-bottom: .9rem; }
.value-list li i { color: var(--brand-accent-dark); margin-top: .2rem; flex-shrink: 0; }

.plan-list { list-style: none; padding-left: 0; }
.plan-list li { display: flex; align-items: flex-start; gap: .55rem; margin-bottom: .65rem; color: var(--gray-600); font-size: .92rem; }
.plan-list li i { color: var(--brand-accent-dark); margin-top: .15rem; flex-shrink: 0; }

.public-footer { color: var(--muted); padding: 1.5rem 0; position: relative; z-index: 2; text-align: center; font-size: .85rem; }

/* Stat cards (dashboard) */
.stat-card { border: 1px solid var(--border); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); overflow: hidden; }
.stat-card .stat-icon {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem; color: #fff;
}
.stat-card .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--gray-900); line-height: 1; }
.stat-card .stat-label { color: var(--muted); font-size: .85rem; font-weight: 600; }

/* Dashboard: grid arrastrable/redimensionable (GridStack) */
.grid-stack-item-content {
  display: flex;
  flex-direction: column;
  inset: 0;
  overflow: hidden;
}
.grid-stack-item-content > .card { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.grid-stack-item-content .card-body { flex: 1; min-height: 0; overflow: auto; }
/* El canvas de Chart.js necesita un padre con posición/alto reales para que
maintainAspectRatio:false (ver dashboard.html) no lo deje crecer sin límite -- acá
el alto real ya lo da la celda del grid (gs-h), no el contenido. */
.chart-card .card-body { position: relative; }
.chart-card .card-body canvas { max-height: 100%; }

/* El dashboard arranca en modo lectura (GridStack staticGrid, ver dashboard.html)
-- la agarradera de mover queda oculta hasta activar "Editar diseño"
(.dashboard-editing se agrega/saca del contenedor ahí). Las agarraderas de resize
de GridStack ya se ocultan solas en modo estático -- no hace falta CSS aparte para
esas, alwaysShowResizeHandle solo importa una vez que el modo edición las habilita. */
.widget-drag-handle {
  cursor: grab;
  color: var(--muted);
  padding: .15rem .3rem;
  border-radius: 6px;
  visibility: hidden;
}
.dashboard-editing .widget-drag-handle { visibility: visible; }
.widget-drag-handle:hover { background: var(--gray-100); color: var(--gray-700); }
.widget-drag-handle:active { cursor: grabbing; }

/* Señal visual clara de que el dashboard está en modo edición. */
.grid-stack.dashboard-editing { outline: 2px dashed var(--brand-accent); outline-offset: 6px; border-radius: var(--radius-md); }

/* Empty states */
.empty-state { text-align: center; padding: 3rem 1rem; color: var(--muted); }
.empty-state i { font-size: 2.5rem; opacity: .4; margin-bottom: .75rem; display: block; }