/* 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;
  transition: margin-left .2s ease;
}
.app-main .app-main-inner { padding: 1.75rem; max-width: 1500px; }

/* Sidebar colapsable (desktop) -- HALLAZGO real 2026-09-15, usuario: "El menu
   del sidebar debe ser colapsable". El drawer off-canvas de <991.98px (ver
   media query de abajo) ya existía para móvil -- esto es un modo aparte,
   a icono-solo, para pantallas grandes; se activa agregando .sidebar-collapsed
   a <body> (ver script al final de este archivo) y persiste en localStorage. */
.app-sidebar { transition: width .2s ease; }
.app-sidebar .sidebar-collapse-toggle {
  border: 0; background: transparent; color: var(--gray-400);
  width: 26px; height: 26px; border-radius: var(--radius-sm);
  align-items: center; justify-content: center; margin-left: auto; flex-shrink: 0;
}
.app-sidebar .sidebar-collapse-toggle:hover { background: var(--gray-100); color: var(--brand-800); }

body.sidebar-collapsed .app-sidebar { width: 68px; }
body.sidebar-collapsed .app-sidebar .sidebar-brand { padding: 1.1rem .7rem; justify-content: center; }
body.sidebar-collapsed .app-sidebar .sidebar-brand span,
body.sidebar-collapsed .app-sidebar .sidebar-collapse-toggle,
body.sidebar-collapsed .app-sidebar-nav .nav-section-title,
body.sidebar-collapsed .app-sidebar-nav .nav-link .nav-label { display: none; }
body.sidebar-collapsed .app-sidebar-nav { padding: .9rem .5rem; }
body.sidebar-collapsed .app-sidebar-nav .nav-link { justify-content: center; padding: .65rem; }
body.sidebar-collapsed .app-header { left: 68px; }
body.sidebar-collapsed .app-main { margin-left: 68px; }
/* HALLAZGO real 2026-09-15, usuario: "Cuando se colapsa el sidebar menu la
   grilla no ocupa toda la pantalla" -- el tope de 1500px de acá arriba
   (pensado para no estirar demasiado un form angosto en monitores grandes)
   dejaba un hueco vacío a la derecha en vez de aprovechar el espacio que el
   usuario acaba de liberar a propósito colapsando el menú. */
body.sidebar-collapsed .app-main .app-main-inner { max-width: none; }
/* Mostrar el nombre de cada sección/link al pasar el mouse, ya que el texto
   queda oculto -- mismo criterio que cualquier ícono-solo (title nativo del
   navegador vía el atributo title, seteado por el script). */

@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; }
  /* El colapso a icono-solo es un modo de escritorio -- si la clase quedó
     puesta en <body> desde una sesión de escritorio y la ventana se achica
     (o se abre en el celular), el drawer móvil vuelve a mostrarse completo. */
  body.sidebar-collapsed .app-sidebar { width: 264px; }
  body.sidebar-collapsed .app-sidebar .sidebar-brand { padding: 1.1rem 1.25rem; justify-content: flex-start; }
  body.sidebar-collapsed .app-sidebar .sidebar-brand span,
  body.sidebar-collapsed .app-sidebar .sidebar-collapse-toggle,
  body.sidebar-collapsed .app-sidebar-nav .nav-section-title,
  body.sidebar-collapsed .app-sidebar-nav .nav-link .nav-label { display: revert; }
  body.sidebar-collapsed .app-sidebar-nav { padding: .9rem .75rem; }
  body.sidebar-collapsed .app-sidebar-nav .nav-link { justify-content: flex-start; padding: .55rem .65rem; }
  body.sidebar-collapsed .app-header { left: 0; }
  body.sidebar-collapsed .app-main { margin-left: 0; }
}

/* 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; }

/* ============ Grilla de leads: columnas arrastrables ============ */
/* HALLAZGO real 2026-09-15, usuario: "la grilla ... no permite ordenar
   columnas con drag a drop, no tiene para agregar otros campos en la
   grilla ... El diseño no es resposive" -- ver el script al final de
   leads/list.html para la lógica de reordenar/mostrar-ocultar columnas. */
.grid-col-draggable { cursor: grab; user-select: none; }
.grid-col-draggable:active { cursor: grabbing; }
.grid-col-draggable .col-drag-handle { cursor: grab; margin-right: .25rem; }
.grid-col-draggable.dragging-col { opacity: .4; background: var(--gray-100); }
.grid-col-draggable:hover { background: var(--gray-100); }
.bulk-reassign-select { width: auto; }

@media (max-width: 767.98px) {
  /* La barra de filtros/reasignar de la grilla de leads (y cualquier otra
     que reuse este patrón) se arma con varias columnas de ancho fijo --
     en mobile tienen que apilarse con aire, no comprimirse. */
  #leadQuickFilterForm .col-md-3,
  #leadQuickFilterForm .col-12 { margin-bottom: .25rem; }
  #bulkReassignForm { flex-direction: column; align-items: stretch !important; }
  #bulkReassignForm select,
  #bulkReassignForm button { width: 100%; }
}