/* ===================================================
   AUTOMATIZA360 CRM - SISTEMA DE DISEÑO MODERNO
   Paleta: Grises y Azules - Profesional y limpio
   Versión 3.0 - Diseño único y profesional
   =================================================== */

/* ===================================================
   1. VARIABLES CSS - PALETA PRO (GRISES/AZULES)
   =================================================== */
:root {
  /* ===================================================
     PALETA PRO: Grises + Azules (moderna y sobria)
     =================================================== */

  /* Primario (Azules) */
  --primary-50:  #eff6ff;
  --primary-100: #dbeafe;
  --primary-200: #bfdbfe;
  --primary-300: #93c5fd;
  --primary-400: #60a5fa;
  --primary-500: #2563eb;  /* Azul principal */
  --primary-600: #1d4ed8;
  --primary-700: #1e40af;
  --primary-800: #1e3a8a;
  --primary-900: #172554;

  /* Secundario (Slate / Grises) */
  --secondary-50:  #f8fafc;
  --secondary-100: #f1f5f9;
  --secondary-200: #e2e8f0;
  --secondary-300: #cbd5e1;
  --secondary-400: #94a3b8;
  --secondary-500: #64748b;
  --secondary-600: #475569;
  --secondary-700: #334155;
  --secondary-800: #1f2937;
  --secondary-900: #0f172a;

  /* Base */
  --bg-body: #f5f7fb;
  --bg-card: #ffffff;
  --bg-section: #f8fafc;
  --bg-hover: #eff6ff;
  --border-color: #e5e7eb;
  --border-hover: #bfdbfe;

  /* Textos */
  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;
  --text-light: #94a3b8;

  /* Navbar */
  --nav-bg: linear-gradient(135deg, #0b1220 0%, #111827 100%);
  --nav-bg-hover: #1f2937;
  --nav-border: var(--primary-500);

  /* Estados */
  --color-success: #16a34a;
  --color-success-light: #dcfce7;
  --color-success-bg: rgba(22, 163, 74, 0.12);

  --color-warning: #f59e0b;
  --color-warning-light: #fef3c7;
  --color-warning-bg: rgba(245, 158, 11, 0.12);

  --color-danger: #dc2626;
  --color-danger-light: #fee2e2;
  --color-danger-bg: rgba(220, 38, 38, 0.12);

  --color-info: #0284c7;
  --color-info-light: #e0f2fe;
  --color-info-bg: rgba(2, 132, 199, 0.12);

  /* Sombras */
  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 4px 10px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 10px 22px rgba(15, 23, 42, 0.10);
  --shadow-lg: 0 18px 45px rgba(15, 23, 42, 0.12);
  --shadow-xl: 0 28px 80px rgba(15, 23, 42, 0.16);

  /* Gradientes */
  --gradient-warm: linear-gradient(135deg, var(--primary-600) 0%, #0ea5e9 100%);
  --gradient-subtle: linear-gradient(180deg, #ffffff 0%, var(--bg-body) 100%);
  --gradient-primary: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 55%, #0ea5e9 100%);
  --gradient-secondary: linear-gradient(135deg, var(--secondary-100) 0%, var(--secondary-200) 100%);

  /* Bootstrap tokens (para evitar el azul default/consistencia) */
  --bs-primary: var(--primary-500);
  --bs-primary-rgb: 37, 99, 235;

  --bs-success: var(--color-success);
  --bs-success-rgb: 22, 163, 74;

  --bs-warning: var(--color-warning);
  --bs-warning-rgb: 245, 158, 11;

  --bs-danger: var(--color-danger);
  --bs-danger-rgb: 220, 38, 38;

  --bs-info: var(--color-info);
  --bs-info-rgb: 2, 132, 199;

  --bs-link-color: var(--primary-600);
  --bs-link-hover-color: var(--primary-700);
  --bs-focus-ring-color: rgba(37, 99, 235, 0.25);
  /* ===================================================
     RADIOS / SOMBRAS / TRANSICIONES (faltaban en v5)
     =================================================== */
  --radius-sm: 10px;
  --radius-md: 14px;
  --radius-lg: 18px;
  --radius-xl: 22px;
  --radius-full: 999px;
  --radius: var(--radius-md);

  --transition-fast: 120ms ease;
  --transition-base: 180ms ease;

  --shadow: 0 10px 25px rgba(15, 23, 42, 0.10);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,.7);


}

/* ===================================================
   2. RESET Y ESTILOS BASE
   =================================================== */
* {
  box-sizing: border-box;
}

body {
  background: var(--bg-body);
  color: var(--text-primary);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.6;
  margin: 0;
  padding: 0;
}

/* ===================================================
   3. NAVBAR MODERNA CON ACENTO NARANJA
   =================================================== */
.navbar {
  background: var(--nav-bg) !important;
  border-bottom: 3px solid var(--nav-border);
  box-shadow: var(--shadow-md);
  padding: 0.25rem 0;
}

/* Navbar: evitar que el padding global de container-fluid la agrande */
.navbar .container-fluid{
  padding: 0.15rem 1rem !important;
}


.navbar-brand {
  font-weight: 800;
  font-size: 1.5rem;
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.02em;
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-lg);
  transition: all var(--transition-base);
}

.navbar-brand:hover {
  transform: scale(1.05);
  filter: brightness(1.2);
}

.nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-weight: 600;
  padding: 0.35rem 0.75rem !important;
  border-radius: var(--radius);
  transition: all var(--transition-base);
  position: relative;
}

.nav-link:hover {
  color: #ffffff !important;
  background: var(--nav-bg-hover);
  transform: translateY(-1px);
}

.nav-link.active {
  color: #ffffff !important;
  background: var(--gradient-primary);
}

.dropdown-menu {
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.5rem;
  margin-top: 0.5rem;
  animation: dropdownFadeIn 0.2s ease-out;
}

@keyframes dropdownFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  border-radius: var(--radius);
  padding: 0.625rem 1rem;
  transition: all var(--transition-fast);
  font-weight: 500;
  color: var(--text-primary);
}

.dropdown-item:hover {
  background: var(--primary-100);
  color: var(--primary-700);
  transform: translateX(4px);
}

.dropdown-item:active {
  background: var(--primary-200);
  color: var(--primary-800);
}

/* Badge en navbar */
.nav-link .badge {
  position: absolute;
  top: 0.25rem;
  right: 0.25rem;
  padding: 0.25rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: var(--radius-full);
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

/* ===================================================
   4. CONTAINERS Y LAYOUT
   =================================================== */
.container-fluid {
  padding: 1.5rem 1.25rem;
}

@media (min-width: 768px) {
  .container-fluid {
    padding: 2rem 1.5rem;
  }
}

/* ===================================================
   5. CARDS PROFESIONALES
   =================================================== */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  overflow: hidden;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--border-hover);
}

.card-header {
  background: linear-gradient(135deg, var(--bg-section) 0%, var(--primary-50) 100%);
  border-bottom: 2px solid var(--primary-200);
  padding: 1.25rem 1.5rem;
  position: relative;
}

.card-header::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-primary);
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6 {
  margin: 0;
  font-weight: 800;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.card-body {
  padding: 1.5rem;
}

.card-footer {
  background: var(--bg-section);
  border-top: 1px solid var(--border-color);
  padding: 1rem 1.5rem;
}

/* Cards con gradientes */
.card-gradient {
  background: var(--gradient-warm);
  color: white;
  border: none;
  box-shadow: var(--shadow-lg);
}

.card-gradient .card-header {
  background: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.25);
  backdrop-filter: blur(10px);
}

.card-gradient .card-header::before {
  background: rgba(255, 255, 255, 0.5);
}

.card-gradient h1,
.card-gradient h2,
.card-gradient h3,
.card-gradient h4,
.card-gradient h5,
.card-gradient h6 {
  color: white;
}

/* ===================================================
   6. TABLAS MODERNAS
   =================================================== */
.table-wrapper {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}

.table {
  margin-bottom: 0;
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}

.table thead {
  background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%);
  position: sticky;
  top: 0;
  z-index: 10;
}

.table thead th {
  border-bottom: 2px solid var(--primary-300);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--primary-800);
  font-weight: 800;
  padding: 1rem 0.75rem;
  white-space: nowrap;
  vertical-align: middle;
  position: relative;
}

.table thead th::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.table thead th:hover::after {
  opacity: 1;
}

.table tbody tr {
  transition: all var(--transition-fast);
  border-bottom: 1px solid var(--border-color);
}

.table-hover tbody tr:hover {
  background: var(--primary-50);
  transform: none !important;
  box-shadow: var(--shadow-xs);
}

.table tbody tr:last-child {
  border-bottom: none;
}

.table td {
  padding: 1rem 0.75rem;
  vertical-align: middle;
  color: var(--text-primary);
}

.table td:first-child {
  font-weight: 600;
}

/* Tabla striped con naranja */
.table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(37, 99, 235, 0.02);
}

/* ===================================================
   7. BOTONES MODERNOS CON GRADIENTES
   =================================================== */
.btn {
  border-radius: var(--radius);
  font-weight: 700;
  transition: all var(--transition-base);
  border: none;
  padding: 0.625rem 1.25rem;
  font-size: 0.9rem;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  text-transform: none;
  letter-spacing: 0.02em;
  position: relative;
  overflow: hidden;
}

.btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.btn:hover::before {
  left: 100%;
}

.btn-primary {
  background-color: var(--primary-600) !important;
  background-image: var(--gradient-primary) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: 0 4px 14px 0 rgba(37, 99, 235, 0.28);
}

.btn-primary:hover {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 60%, #0ea5e9 100%);
  box-shadow: 0 6px 20px 0 rgba(37, 99, 235, 0.35);
  transform: translateY(-2px);
  color: white;
}

.btn-primary:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px 0 rgba(37, 99, 235, 0.28);
}

.btn-secondary {
  background: var(--gradient-secondary);
  color: var(--text-primary);
  box-shadow: 0 4px 14px 0 rgba(15, 23, 42, 0.08);
}

.btn-secondary:hover {
  background: linear-gradient(135deg, var(--secondary-200) 0%, var(--secondary-300) 100%);
  box-shadow: 0 6px 20px 0 rgba(15, 23, 42, 0.10);
  transform: translateY(-2px);
  color: var(--text-primary);
}

.btn-success {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(21, 128, 61, 0.35);
}

.btn-success:hover {
  background: linear-gradient(135deg, #166534 0%, #15803d 100%);
  box-shadow: 0 6px 20px 0 rgba(21, 128, 61, 0.45);
  transform: translateY(-2px);
  color: white;
}

.btn-danger {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(220, 38, 38, 0.35);
}

.btn-danger:hover {
  background: linear-gradient(135deg, #b91c1c 0%, #dc2626 100%);
  box-shadow: 0 6px 20px 0 rgba(220, 38, 38, 0.45);
  transform: translateY(-2px);
  color: white;
}

.btn-warning {
  background: var(--gradient-primary);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(245, 158, 11, 0.30);
}

.btn-warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
  box-shadow: 0 6px 20px 0 rgba(245, 158, 11, 0.35);
  transform: translateY(-2px);
  color: white;
}

.btn-info {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  color: white;
  box-shadow: 0 4px 14px 0 rgba(8, 145, 178, 0.35);
}

.btn-info:hover {
  background: linear-gradient(135deg, #0e7490 0%, #0891b2 100%);
  box-shadow: 0 6px 20px 0 rgba(8, 145, 178, 0.45);
  transform: translateY(-2px);
  color: white;
}

/* Botones outline */
.btn-outline-primary {
  background: transparent;
  border: 2px solid var(--primary-500);
  color: var(--primary-700);
}

.btn-outline-primary:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.btn-outline-secondary {
  background: transparent;
  border: 2px solid var(--border-color);
  color: var(--text-secondary);
}

.btn-outline-secondary:hover {
  background: var(--bg-section);
  border-color: var(--text-secondary);
  color: var(--text-primary);
  transform: translateY(-2px);
}

/* Botones pequeños */
.btn-sm {
  padding: 0.4rem 0.875rem;
  font-size: 0.8rem;
  border-radius: var(--radius-sm);
}

/* Botones grandes */
.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1rem;
  border-radius: var(--radius-lg);
}

/* ===================================================
   8. BADGES MODERNOS
   =================================================== */
.badge {
  padding: 0.4rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  box-shadow: var(--shadow-xs);
  transition: all var(--transition-base);
}

.badge:hover {
  transform: scale(1.05);
}

.badge.bg-primary {
  background: var(--gradient-primary) !important;
  color: white;
}

.badge.bg-secondary {
  background: var(--gradient-secondary) !important;
  color: var(--text-primary);
}

.badge.bg-success {
  background: var(--color-success) !important;
  color: white;
}

.badge.bg-danger {
  background: var(--color-danger) !important;
  color: white;
}

.badge.bg-warning {
  background: var(--color-warning) !important;
  color: white;
}

.badge.bg-info {
  background: var(--color-info) !important;
  color: white;
}

/* Badges outline */
.badge-outline-primary {
  background: transparent;
  border: 2px solid var(--primary-500);
  color: var(--primary-700);
}

.badge-outline-success {
  background: transparent;
  border: 2px solid var(--color-success);
  color: var(--color-success);
}

.badge-outline-danger {
  background: transparent;
  border: 2px solid var(--color-danger);
  color: var(--color-danger);
}

/* ===================================================
   9. FORMULARIOS PROFESIONALES
   =================================================== */
.form-label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.form-label.required::after {
  content: '*';
  color: var(--color-danger);
  margin-left: 0.25rem;
}

.form-control,
.form-select {
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
  padding: 0.625rem 0.875rem;
  transition: all var(--transition-base);
  font-size: 0.95rem;
  background: var(--bg-card);
  color: var(--text-primary);
}

.form-control:focus,
.form-select:focus {
  border-color: var(--primary-500);
  box-shadow: 0 0 0 4px var(--primary-100);
  outline: none;
  background: white;
}

.form-control::placeholder {
  color: var(--text-muted);
  font-style: italic;
}

.form-control:disabled,
.form-select:disabled {
  background: var(--bg-section);
  color: var(--text-muted);
  cursor: not-allowed;
  opacity: 0.6;
}

/* Form floating labels */
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label {
  color: var(--primary-700);
  transform: scale(0.85) translateY(-0.5rem) translateX(0.15rem);
}

/* Input groups */
.input-group-text {
  background: var(--primary-100);
  border: 2px solid var(--border-color);
  border-right: none;
  color: var(--primary-700);
  font-weight: 600;
}

.input-group > .form-control {
  border-left: none;
}

.input-group > .form-control:focus {
  border-left: 2px solid var(--primary-500);
}

/* ===================================================
   10. ALERTS MODERNOS
   =================================================== */
.alert {
  border-radius: var(--radius-lg);
  padding: 1rem 1.25rem;
  border: 2px solid;
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  animation: slideInRight 0.3s ease-out;
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.alert-success {
  background: var(--color-success-light);
  border-color: var(--color-success);
  color: var(--color-success);
}

.alert-danger {
  background: var(--color-danger-light);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.alert-warning {
  background: var(--color-warning-light);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

.alert-info {
  background: var(--color-info-light);
  border-color: var(--color-info);
  color: var(--color-info);
}

.alert-dismissible .btn-close {
  padding: 0.75rem;
}

/* ===================================================
   11. KANBAN BOARD - DISEÑO PROFESIONAL
   =================================================== */
.kanban-board {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  padding: 1rem 0 2rem 0;
  min-height: 600px;
  scroll-behavior: smooth;
}

.kanban-board::-webkit-scrollbar {
  height: 10px;
}

.kanban-board::-webkit-scrollbar-track {
  background: var(--bg-section);
  border-radius: var(--radius-full);
}

.kanban-board::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.kanban-col {
  flex: 0 0 360px;
  background: var(--bg-section);
  border-radius: var(--radius-xl);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 250px);
  transition: all var(--transition-base);
  border: 2px solid var(--border-color);
  box-shadow: var(--shadow);
}

.kanban-col.drop-hover {
  border-color: var(--primary-500);
  background: var(--primary-50);
  box-shadow: var(--shadow-xl);
  transform: scale(1.02);
}

.kanban-col-header {
  padding: 1.5rem 1.5rem 1.25rem 1.5rem;
  border-bottom: 2px solid var(--border-color);
  background: var(--bg-card);
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.kanban-col-header .fw-semibold {
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.kanban-col-count {
  font-size: 0.75rem;
  font-weight: 800;
  padding: 0.375rem 0.75rem;
  border-radius: var(--radius-full);
  background: var(--gradient-primary);
  color: white;
  box-shadow: var(--shadow-sm);
}

.kanban-col-sum {
  color: var(--primary-700);
  font-weight: 800;
  font-size: 1.1rem;
}

.kanban-col-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.kanban-col-body::-webkit-scrollbar {
  width: 6px;
}

.kanban-col-body::-webkit-scrollbar-track {
  background: transparent;
}

.kanban-col-body::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
}

.kanban-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
  cursor: grab;
  transition: all var(--transition-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}

.kanban-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.kanban-card:hover::before {
  opacity: 1;
}

.kanban-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px) rotate(1deg);
  border-color: var(--primary-400);
}

.kanban-card.dragging {
  opacity: 0.6;
  cursor: grabbing;
  transform: rotate(3deg) scale(0.95);
}

.kanban-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
  line-height: 1.4;
  display: flex;
  align-items: start;
  gap: 0.5rem;
}

.kanban-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 2px solid var(--border-color);
}

/* Colores por etapa del Kanban */
.stage-identificacion .kanban-col-header {
  background: linear-gradient(135deg, #f5f5f4 0%, #e7e5e4 100%);
  border-left: 5px solid #78716c;
}

.stage-calificacion .kanban-col-header {
  background: linear-gradient(135deg, #cffafe 0%, #a5f3fc 100%);
  border-left: 5px solid #0891b2;
}

.stage-propuesta .kanban-col-header {
  background: linear-gradient(135deg, var(--secondary-100) 0%, var(--secondary-200) 100%);
  border-left: 5px solid var(--secondary-600);
}

.stage-negociacion .kanban-col-header {
  background: linear-gradient(135deg, var(--primary-100) 0%, var(--primary-200) 100%);
  border-left: 5px solid var(--primary-600);
}

.stage-cierre_ganado .kanban-col-header {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
  border-left: 5px solid #15803d;
}

.stage-cierre_perdido .kanban-col-header {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
  border-left: 5px solid #dc2626;
}

/* ===================================================
   12. STATS CARDS (DASHBOARD)
   =================================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
  margin-bottom: 2.5rem;
}

.stat-card {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-xl);
  padding: 1.75rem;
  box-shadow: var(--shadow);
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--gradient-primary);
}

.stat-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-400);
}

.stat-card .stat-icon {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow);
}

.stat-card.stat-primary .stat-icon {
  background: var(--gradient-primary);
  color: white;
}

.stat-card.stat-secondary .stat-icon {
  background: var(--gradient-secondary);
  color: var(--text-primary);
}

.stat-card.stat-success .stat-icon {
  background: linear-gradient(135deg, #15803d 0%, #16a34a 100%);
  color: white;
}

.stat-card.stat-warning .stat-icon {
  background: var(--gradient-primary);
  color: white;
}

.stat-card.stat-danger .stat-icon {
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  color: white;
}

.stat-card.stat-info .stat-icon {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 100%);
  color: white;
}

.stat-card .stat-label {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 0.625rem;
}

.stat-card .stat-value {
  font-size: 2.25rem;
  font-weight: 900;
  color: var(--text-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}

.stat-card .stat-change {
  margin-top: 0.75rem;
  font-size: 0.85rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.stat-card .stat-change.positive {
  color: var(--color-success);
}

.stat-card .stat-change.negative {
  color: var(--color-danger);
}

/* ===================================================
   13. HEADER DE PÁGINA
   =================================================== */
.page-header {
  background: var(--gradient-warm);
  color: white;
  padding: 2.5rem 2rem;
  border-radius: var(--radius-xl);
  margin-bottom: 2rem;
  box-shadow: var(--shadow-xl);
  position: relative;
  overflow: hidden;
}

.page-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -10%;
  width: 400px;
  height: 400px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  filter: blur(60px);
}

.page-header h1,
.page-header h2,
.page-header h3 {
  font-size: 2rem;
  font-weight: 900;
  margin: 0 0 0.75rem 0;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  position: relative;
  z-index: 1;
}

.page-header .subtitle {
  font-size: 1.1rem;
  opacity: 0.95;
  margin: 0;
  font-weight: 500;
  position: relative;
  z-index: 1;
}

.page-header .header-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}

/* ===================================================
   14. LISTAS MODERNAS
   =================================================== */
.modern-list {
  display: grid;
  gap: 1.25rem;
}

.modern-list-item {
  background: var(--bg-card);
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-base);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.5rem;
  position: relative;
  overflow: hidden;
}

.modern-list-item::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--gradient-primary);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.modern-list-item:hover::before {
  opacity: 1;
}

.modern-list-item:hover {
  box-shadow: var(--shadow-lg);
  transform: translateX(8px);
  border-color: var(--primary-400);
}

.modern-list-item .item-info {
  flex: 1;
}

.modern-list-item .item-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 0.375rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.modern-list-item .item-description {
  font-size: 0.95rem;
  color: var(--text-secondary);
  margin-bottom: 0.625rem;
}

.modern-list-item .item-meta {
  display: flex;
  gap: 1.25rem;
  flex-wrap: wrap;
  font-size: 0.85rem;
  color: var(--text-muted);
}

.modern-list-item .item-meta span {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.modern-list-item .item-actions {
  display: flex;
  gap: 0.625rem;
  flex-shrink: 0;
  flex-wrap: wrap;
}

/* ===================================================
   15. MODAL MEJORADO
   =================================================== */
.modal-content {
  border-radius: var(--radius-xl);
  border: none;
  box-shadow: var(--shadow-xl);
}

.modal-header {
  background: var(--gradient-warm);
  color: white;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  padding: 1.5rem 2rem;
  border-bottom: none;
}

.modal-header .modal-title {
  font-weight: 800;
  font-size: 1.5rem;
}

.modal-header .btn-close {
  filter: brightness(0) invert(1);
  opacity: 0.8;
}

.modal-header .btn-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 2rem;
}

.modal-footer {
  background: var(--bg-section);
  border-top: 2px solid var(--border-color);
  padding: 1.25rem 2rem;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

/* ===================================================
   16. PAGINATION
   =================================================== */
.pagination {
  gap: 0.5rem;
}

.page-link {
  border-radius: var(--radius);
  border: 2px solid var(--border-color);
  color: var(--text-primary);
  font-weight: 600;
  padding: 0.5rem 0.875rem;
  transition: all var(--transition-base);
}

.page-link:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: translateY(-2px);
}

.page-item.active .page-link {
  background: var(--gradient-primary);
  border-color: transparent;
  color: white;
  box-shadow: var(--shadow);
}

.page-item.disabled .page-link {
  background: var(--bg-section);
  border-color: var(--border-color);
  color: var(--text-muted);
  cursor: not-allowed;
}

/* ===================================================
   17. TOOLTIPS Y POPOVERS
   =================================================== */
.tooltip-inner {
  background: var(--text-primary);
  border-radius: var(--radius);
  padding: 0.625rem 0.875rem;
  font-weight: 600;
  box-shadow: var(--shadow-lg);
}

.tooltip.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--text-primary);
}

.tooltip.bs-tooltip-bottom .tooltip-arrow::before {
  border-bottom-color: var(--text-primary);
}

.tooltip.bs-tooltip-start .tooltip-arrow::before {
  border-left-color: var(--text-primary);
}

.tooltip.bs-tooltip-end .tooltip-arrow::before {
  border-right-color: var(--text-primary);
}

/* ===================================================
   18. BREADCRUMB
   =================================================== */
.breadcrumb {
  background: transparent;
  padding: 1rem 0;
  margin-bottom: 1.5rem;
}

.breadcrumb-item {
  font-weight: 600;
  color: var(--text-secondary);
}

.breadcrumb-item.active {
  color: var(--primary-700);
}

.breadcrumb-item + .breadcrumb-item::before {
  content: '›';
  color: var(--text-muted);
  font-size: 1.25rem;
}

.breadcrumb-item a {
  color: var(--text-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

.breadcrumb-item a:hover {
  color: var(--primary-600);
}

/* ===================================================
   19. PROGRESS BARS
   =================================================== */
.progress {
  height: 12px;
  border-radius: var(--radius-full);
  background: var(--bg-section);
  box-shadow: var(--shadow-inner);
  overflow: hidden;
}

.progress-bar {
  background: var(--gradient-primary);
  transition: width 0.6s ease;
  box-shadow: var(--shadow-sm);
}

.progress-bar-striped {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

.progress-bar-animated {
  animation: progress-bar-stripes 1s linear infinite;
}

/* ===================================================
   20. ACCORDION
   =================================================== */
.accordion-item {
  border: 2px solid var(--border-color);
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}

.accordion-button {
  background: var(--bg-card);
  color: var(--text-primary);
  font-weight: 700;
  padding: 1.25rem 1.5rem;
  border: none;
  transition: all var(--transition-base);
}

.accordion-button:not(.collapsed) {
  background: var(--gradient-warm);
  color: white;
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: 0 0 0 4px var(--primary-100);
  border-color: var(--primary-500);
}

.accordion-button::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2364748b'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
  transition: transform var(--transition-base);
}

.accordion-button:not(.collapsed)::after {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e");
}

.accordion-body {
  padding: 1.5rem;
  background: var(--bg-card);
}

/* ===================================================
   21. SPINNER / LOADING
   =================================================== */
.spinner-border-orange { /* kept for backward compatibility */
  border-color: var(--primary-200);
  border-right-color: var(--primary-600);
}

.loading-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(28, 25, 23, 0.7);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

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

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

/* ===================================================
   22. TAGS / CHIPS
   =================================================== */
.tag,
.chip {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.875rem;
  border-radius: var(--radius-full);
  font-size: 0.8rem;
  font-weight: 700;
  background: var(--primary-100);
  color: var(--primary-800);
  border: 2px solid var(--primary-300);
  transition: all var(--transition-base);
}

.tag:hover,
.chip:hover {
  background: var(--gradient-primary);
  color: white;
  border-color: transparent;
  transform: scale(1.05);
  box-shadow: var(--shadow);
}

.tag-removable {
  cursor: pointer;
}

.tag-remove-btn {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  transition: transform var(--transition-fast);
}

.tag-remove-btn:hover {
  transform: scale(1.2);
}

/* ===================================================
   23. EMPTY STATES
   =================================================== */
.empty-state {
  text-align: center;
  padding: 4rem 2rem;
  background: var(--bg-section);
  border-radius: var(--radius-xl);
  border: 2px dashed var(--border-color);
}

.empty-state-icon {
  font-size: 4rem;
  margin-bottom: 1.5rem;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 0.75rem;
}

.empty-state-description {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 1.5rem;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================================
   24. RESPONSIVE DESIGN
   =================================================== */
@media (max-width: 1200px) {
  .kanban-col {
    flex: 0 0 320px;
  }
}

@media (max-width: 992px) {
  .kanban-col {
    flex: 0 0 300px;
  }
  
  .page-header h1,
  .page-header h2,
  .page-header h3 {
    font-size: 1.75rem;
  }
}

@media (max-width: 768px) {
  .container-fluid {
    padding: 1.5rem 1rem;
  }
  
  .kanban-board {
    flex-direction: column;
  }
  
  .kanban-col {
    flex: 1 1 auto;
    max-height: none;
    min-height: 400px;
  }
  
  .page-header {
    padding: 1.5rem 1.25rem;
  }
  
  .page-header h1,
  .page-header h2,
  .page-header h3 {
    font-size: 1.5rem;
  }
  
  .stats-grid {
    grid-template-columns: 1fr;
  }
  
  .modern-list-item {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .modern-list-item .item-actions {
    width: 100%;
    justify-content: flex-end;
  }
  
  .table-wrapper {
    overflow-x: auto;
  }
}

@media (max-width: 576px) {
  .btn {
    width: 100%;
    justify-content: center;
  }
  
  .btn-group {
    flex-direction: column;
  }
  
  .btn-group .btn {
    border-radius: var(--radius) !important;
    margin-bottom: 0.5rem;
  }
}

/* ===================================================
   25. UTILIDADES PERSONALIZADAS
   =================================================== */
.text-gradient-warm {
  background: var(--gradient-warm);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.bg-gradient-warm {
  background: var(--gradient-warm);
  color: white;
}

.bg-gradient-primary {
  background: var(--gradient-primary);
  color: white;
}

.bg-gradient-secondary {
  background: var(--gradient-secondary);
  color: var(--text-primary);
}

.border-gradient {
  border: 2px solid transparent;
  background-image: linear-gradient(white, white), var(--gradient-warm);
  background-origin: border-box;
  background-clip: padding-box, border-box;
}

.shadow-warm {
  box-shadow: 0 10px 25px -5px rgba(37, 99, 235, 0.3), 0 8px 10px -6px rgba(37, 99, 235, 0.2);
}

.hover-lift {
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.glass-effect {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(37, 99, 235, 0.2);
}

.animate-fade-in {
  animation: fadeIn 0.5s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===================================================
   26. SCROLLBAR PERSONALIZADO
   =================================================== */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--bg-section);
  border-radius: var(--radius-full);
}

::-webkit-scrollbar-thumb {
  background: var(--gradient-primary);
  border-radius: var(--radius-full);
  border: 2px solid var(--bg-section);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, var(--primary-700) 0%, var(--primary-500) 60%, #0ea5e9 100%);
}

/* ===================================================
   27. PRINT STYLES
   =================================================== */
@media print {
  .navbar,
  .btn,
  .page-header,
  .no-print {
    display: none !important;
  }
  
  .card {
    box-shadow: none;
    border: 1px solid #000;
  }
  
  body {
    background: white;
  }
}

/* ===================================================
   FIN DEL SISTEMA DE DISEÑO
   =================================================== */


/* ===================================================
   12. KPI CARDS (Dashboard)
   =================================================== */
.kpi-card{
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  position: relative;
}
.kpi-card::before{
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:4px;
  background: var(--gradient-warm);
}
.kpi-card .card-body{
  padding: 1rem 0.9rem;
}
.kpi-icon{
  width: 42px;
  height: 42px;
  border-radius: 14px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin: 0 auto .35rem auto;
  background: rgba(37, 99, 235, 0.10);
  color: var(--primary-700);
}
.kpi-icon i{ font-size: 1.25rem; }

.kpi-card a{
  text-decoration: none;
  color: var(--primary-700);
  font-weight: 700;
}
.kpi-card a:hover{ color: var(--primary-600); }

.kpi-blue{ background: linear-gradient(180deg, #ffffff 0%, rgba(37, 99, 235, 0.05) 100%); }
.kpi-green{ background: linear-gradient(180deg, #ffffff 0%, rgba(34,197,94,0.06) 100%); }
.kpi-red{ background: linear-gradient(180deg, #ffffff 0%, rgba(220,38,38,0.06) 100%); }
.kpi-orange{ background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,0.08) 100%); }

.kpi-green .kpi-icon{ background: rgba(34,197,94,0.12); color:#166534; }
.kpi-red .kpi-icon{ background: rgba(220,38,38,0.12); color:#991b1b; }
.kpi-orange .kpi-icon{ background: rgba(37,99,235,0.14); color: var(--primary-700); }


/* ===================================================
   Helpers: acciones en tablas (iconos alineados)
   =================================================== */
.table-actions{
  display:inline-flex;
  align-items:center;
  justify-content:flex-end;
  gap: 0.35rem;
  flex-wrap:nowrap;
}
.table-actions .btn{
  width: 38px;
  height: 38px;
  padding: 0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  border: 0;
  border-radius: 12px;
  background: var(--secondary-100);
  color: var(--secondary-700);
  box-shadow: var(--shadow-xs);
}
.table-actions .btn:hover{
  background: var(--secondary-200);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.table-actions .btn:active{
  transform: translateY(0);
}
.table-actions .btn svg,
.table-actions .btn i{
  font-size: 1.05rem;
}
.table-actions .btn.btn-outline-primary{
  background: rgba(var(--bs-primary-rgb), .12);
  color: var(--primary-700);
}
.table-actions .btn.btn-outline-secondary{
  background: rgba(100,116,139,.14);
  color: var(--secondary-700);
}
.table-actions .btn.btn-outline-danger{
  background: rgba(var(--bs-danger-rgb), .12);
  color: var(--color-danger);
}
.table-actions .btn.btn-outline-success{
  background: rgba(var(--bs-success-rgb), .12);
  color: var(--color-success);
}



/* Botones de acción (icon-only) reutilizables */
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height: 1;
  gap: .4rem;
  border-radius: 12px;
}
.btn-icon.icon-only{
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-xs);
}
.btn-icon svg,
.btn-icon i{
  font-size: 1.05rem;
}
.btn-icon.btn-outline-primary:not(.btn-icon-primary){
  background: rgba(var(--bs-primary-rgb), .12) !important;
  color: var(--primary-700) !important;
}
.btn-icon.btn-outline-secondary:not(.btn-icon-secondary){
  background: rgba(100,116,139,.14) !important;
  color: var(--secondary-700) !important;
}
.btn-icon.btn-outline-danger:not(.btn-icon-danger){
  background: rgba(var(--bs-danger-rgb), .12) !important;
  color: var(--color-danger) !important;
}
.btn-icon.btn-outline-success:not(.btn-icon-success){
  background: rgba(var(--bs-success-rgb), .12) !important;
  color: var(--color-success) !important;
}
.btn-icon:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.btn-icon:active{
  transform: translateY(0);
}


/* ===================================================
   13. Formularios (estilo unificado)
   =================================================== */
.form-header{
  background: var(--gradient-warm);
  color: #fff;
  padding: 1.75rem;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  margin: -1rem -1rem 0 -1rem;
}
.form-header h3{
  font-size: 1.6rem;
  font-weight: 900;
  margin: 0 0 0.35rem 0;
  display:flex;
  align-items:center;
  gap: 0.75rem;
}
.form-header .subtitle{
  font-size: 0.95rem;
  opacity: .92;
  margin: 0;
}
.form-section{
  background: var(--bg-section);
  padding: 1.25rem;
  border-radius: var(--radius-lg);
  margin-bottom: 1rem;
  border: 1px solid rgba(15, 23, 42, 0.06);
}
.form-section-title{
  font-weight: 900;
  margin-bottom: 1rem;
  display:flex;
  align-items:center;
  gap:.6rem;
}
.form-section-title i{
  width: 34px;
  height: 34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(37, 99, 235, 0.12);
  color: var(--primary-700);
}


/* ===================================================
   ACCIONES (iconos) - consistencia
   =================================================== */
.btn-icon, .table-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
}

.table-actions {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  flex-wrap: nowrap;
}

.table-actions .btn {
  padding: .42rem .55rem;
  border-radius: 10px;
  line-height: 1;
}

.table-actions .btn i { font-size: 1.05rem; }

/* ===================================================
   TABLAS: nítidas, sin "vibrar" y responsivas
   =================================================== */
.table td, .table th { vertical-align: middle; }
.table-hover tbody tr:hover {
  background: var(--bg-hover);
  box-shadow: var(--shadow-xs);
  transform: none !important;
}

/* Si alguna vista no envolvió con .table-responsive, forzamos scroll en mobile */
@media (max-width: 768px) {
  .table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ===================================================
   BOTONES WhatsApp / Mail (local icons)
   =================================================== */
.btn-wa{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%);
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(34,197,94,.25);
}
.btn-wa:hover{ filter: brightness(1.05); color:#fff !important; }

.btn-mail{
  background: linear-gradient(135deg, var(--primary-600) 0%, #0ea5e9 100%);
  color: #fff !important;
  border: 0;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.btn-mail:hover{ filter: brightness(1.05); color:#fff !important; }

/* ===================================================
   QUICKBAR (barra izquierda) - accesos rápidos
   =================================================== */
.app-shell { display:flex; min-height: calc(100vh - 54px); }
.quickbar{
  width: 64px;
  background: #0b1220;
  border-right: 1px solid rgba(148,163,184,.15);
  padding: .65rem .35rem;
  display:flex;
  flex-direction: column;
  gap: .35rem;
  position: sticky;
  top: 54px;
  height: calc(100vh - 54px);
}
.qb-link{
  width: 100%;
  height: 44px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(226,232,240,.85);
  text-decoration:none;
}
.qb-link:hover{
  background: rgba(37,99,235,.18);
  color: #fff;
}
.qb-link.active{
  background: rgba(37,99,235,.28);
  color:#fff;
  box-shadow: 0 10px 22px rgba(2,132,199,.20);
}
.app-main{ flex:1; padding-left: 0; }
@media (max-width: 991.98px){
  .quickbar{ display:none !important; }
  .app-shell{ display:block; }
}

/* ===================================================
   DASHBOARD: Drag & Drop (sin libs)
   =================================================== */
.dash-toolbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:.5rem;
}
[data-dash-root].drag-mode [data-dash-item]{ cursor: grab; }
[data-dash-item].is-draggable{ user-select: none; }
[data-dash-item].dragging{ opacity: .6; }

/* KPI Cards (pro) */
.kpi-card{
  border-radius: 14px;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-xs);
}
.kpi-card .kpi-icon{
  width: 38px;
  height: 38px;
  border-radius: 12px;
  margin: 0 auto .35rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background: rgba(37,99,235,.10);
  color: var(--primary-600);
  font-size: 1.15rem;
}

/* KPI accents (como tu foto) */
.kpi-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:4px;
  border-radius: 14px 0 0 14px;
  background: var(--primary-500);
}
.kpi-card{ position: relative; overflow:hidden; }
.kpi-blue::before{ background: #2563eb; }
.kpi-green::before{ background: #16a34a; }
.kpi-red::before{ background: #dc2626; }
.kpi-orange::before{ background: var(--primary-500); }
.kpi-gray::before{ background: #64748b; }


/* Títulos */
.page-title{ font-size: 1.22rem; font-weight: 800; color: var(--text-primary); letter-spacing: -0.02em; }
.page-title{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .55rem;
}
.page-title::after{
  content: "";
  display: inline-block;
  height: 3px;
  width: 40px;
  border-radius: 99px;
  margin-left: .35rem;
  background: linear-gradient(90deg, var(--primary-500), rgba(37,99,235,0));
}
.page-subtitle{ color: var(--text-muted); margin-top: .15rem; font-size: .92rem; }

.sf-subtitle{ color: var(--text-muted); font-size: .95rem; }


/* Iconos SVG (reemplazo de Bootstrap Icons por sprite local) */
svg.bi-svg{display:inline-block;vertical-align:-.125em;fill:currentColor;}
svg.bi-svg{width:1em;height:1em;}
i.bi, span.bi{font-style:normal;}


/* === KPI COLOR BOOST (más color, estilo foto) === */
.kpi-card{ position:relative; overflow:hidden; }
.kpi-card::before{
  content:"";
  position:absolute;
  left:0; top:0; bottom:0;
  width:6px;
  border-radius: 14px 0 0 14px;
  background: var(--primary-500);
}
.kpi-card .card-body{ padding: 1rem .85rem; }
.kpi-card .h5{ font-weight: 900; letter-spacing:.01em; }

.kpi-icon{
  width: 42px; height: 42px;
  border-radius: 14px;
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto .35rem;
  box-shadow: 0 6px 16px rgba(15,23,42,.10);
}

.kpi-blue{ background: linear-gradient(180deg,#ffffff 0%, rgba(37,99,235,.12) 100%); }
.kpi-blue::before{ background:#2563eb; }
.kpi-blue .kpi-icon{ background: rgba(37,99,235,.18); color:#1e40af; }

.kpi-green{ background: linear-gradient(180deg,#ffffff 0%, rgba(22,163,74,.14) 100%); }
.kpi-green::before{ background:#16a34a; }
.kpi-green .kpi-icon{ background: rgba(22,163,74,.18); color:#166534; }

.kpi-red{ background: linear-gradient(180deg,#ffffff 0%, rgba(220,38,38,.14) 100%); }
.kpi-red::before{ background:#dc2626; }
.kpi-red .kpi-icon{ background: rgba(220,38,38,.18); color:#991b1b; }

/* kpi-orange => ámbar */
.kpi-orange, .kpi-amber{ background: linear-gradient(180deg,#ffffff 0%, rgba(245,158,11,.16) 100%); }
.kpi-orange::before, .kpi-amber::before{ background:#f59e0b; }
.kpi-orange .kpi-icon, .kpi-amber .kpi-icon{ background: rgba(245,158,11,.20); color:#92400e; }



/* === TABLAS: compactas, sin scroll horizontal innecesario === */
.table-compact th, .table-compact td{ padding: .45rem .5rem; }
.table-compact th{ font-size: .74rem; letter-spacing:.08em; text-transform: uppercase; }
.table-compact td{ font-size: .86rem; }

.table-fit{ table-layout: fixed; width:100%; }
.table-fit th, .table-fit td{ overflow:hidden; text-overflow: ellipsis; }
.table-fit td{ white-space: normal; }
.table-fit td.num, .table-fit td.date, .table-fit td.nowrap{ white-space: nowrap; }

.table-opps th:nth-child(1), .table-opps td:nth-child(1){ width: 34px; }
.table-opps th:last-child, .table-opps td:last-child{ width: 92px; }
.table-opps th:nth-child(2), .table-opps td:nth-child(2){ width: 160px; }  /* Empresa */
.table-opps th:nth-child(3), .table-opps td:nth-child(3){ width: 120px; }  /* Título */
.table-opps th:nth-child(4), .table-opps td:nth-child(4){ width: 110px; }  /* Etapa */
.table-opps th:nth-child(5), .table-opps td:nth-child(5), .table-opps th:nth-child(6), .table-opps td:nth-child(6){ width: 92px; } /* Monto/Prob */
.table-opps th:nth-child(7), .table-opps td:nth-child(7){ width: 90px; }  /* Estado */
.table-opps th:nth-child(8), .table-opps td:nth-child(8), .table-opps th:nth-child(9), .table-opps td:nth-child(9){ width: 110px; } /* Últ/Próx */
.table-opps th:nth-child(10), .table-opps td:nth-child(10), .table-opps th:nth-child(11), .table-opps td:nth-child(11){ width: 95px; } /* Cierre/Creada */
.table-opps th:nth-child(12), .table-opps td:nth-child(12){ width: 130px; } /* Vendedor */


/* ---------- SIDEBAR: icon-only (ALL sizes) ----------
   Requisito: barra lateral fija con íconos sin texto (desktop + mobile), sin redundancia.
--------------------------------------------------- */
.a360-sidebar{ width:72px; flex:0 0 72px; }
.a360-sidebar__brand{ justify-content:center; }
.a360-sidebar__logo{ justify-content:center; }
.a360-brand-text{ display:none; }
.a360-sidebar__nav{ padding:10px 8px; }
.a360-sideitem{ justify-content:center; gap:0; }
.a360-sideitem .a360-label{ display:none; }
.a360-sidegroup{ display:none; }
.a360-sidebar__footer .a360-label{ display:none; }
.a360-sidebar__close{ display:none; }

.a360-brand-initials{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .4px;
  font-size: .78rem;
}

/* En tablet/telefono ocultamos columnas menos críticas para evitar scroll */
@media (max-width: 992px){
  .table-opps th:nth-child(6), .table-opps td:nth-child(6), /* Prob */
  .table-opps th:nth-child(11), .table-opps td:nth-child(11), /* Creada */
  .table-opps th:nth-child(12), .table-opps td:nth-child(12)  /* Vendedor */
  { display:none; }
  .table-opps th:last-child, .table-opps td:last-child{ width: 84px; }
}

/* ===================================================
   ACTION ICON BUTTONS (ver/editar/borrar/etc.)
   - Hace que los iconos tengan “fondo” tipo WhatsApp/Mail
   =================================================== */
.table-actions .btn,
.icon-actions .btn{
  border-radius: 12px;
  padding: .42rem .55rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 1px solid rgba(148,163,184,.35);
  background: rgba(241,245,249,.92);
  color: #0f172a;
  box-shadow: none;
}

.table-actions .btn:hover,
.icon-actions .btn:hover{
  background: rgba(226,232,240,.95);
}

.table-actions .btn.btn-outline-primary,
.icon-actions .btn.btn-outline-primary{
  background: rgba(37,99,235,.14);
  border-color: rgba(37,99,235,.26);
  color: #1d4ed8;
}

.table-actions .btn.btn-outline-secondary,
.icon-actions .btn.btn-outline-secondary{
  background: rgba(100,116,139,.14);
  border-color: rgba(100,116,139,.26);
  color: #334155;
}

.table-actions .btn.btn-outline-danger,
.icon-actions .btn.btn-outline-danger{
  background: rgba(220,38,38,.14);
  border-color: rgba(220,38,38,.28);
  color: #b91c1c;
}

.table-actions .btn.btn-outline-success,
.icon-actions .btn.btn-outline-success,
.table-actions .btn.btn-light,
.icon-actions .btn.btn-light{
  background: rgba(34,197,94,.14);
  border-color: rgba(34,197,94,.28);
  color: #15803d;
}

.table-actions .btn:focus,
.icon-actions .btn:focus{
  box-shadow: 0 0 0 .25rem rgba(59,130,246,.18) !important;
}



/* ===================================================
   PATCH V5 - Color en títulos + tablas redondeadas + acciones icon-only (Dashboard)
   =================================================== */

/* Títulos con acento (más color sin perder pro) */
.page-title{
  color: var(--primary-800);
  position: relative;
  display: inline-block;
  padding-left: .65rem;
}
.page-title::before{
  content:"";
  position:absolute;
  left:0; top:.28em;
  width: 6px;
  height: 1.1em;
  border-radius: 999px;
  background: var(--gradient-primary);
  opacity: .95;
}
.card-header{
  background: linear-gradient(180deg, rgba(37,99,235,.06) 0%, rgba(37,99,235,0) 85%);
}

/* KPIs: más color (tinte sutil) */
.kpi-card{
  background: linear-gradient(180deg, var(--kpi-bg, rgba(37,99,235,.06)) 0%, #ffffff 58%);
}
.kpi-blue{ --kpi-bg: rgba(37,99,235,.10); }
.kpi-green{ --kpi-bg: rgba(22,163,74,.10); }
.kpi-red{ --kpi-bg: rgba(220,38,38,.10); }
.kpi-orange{ --kpi-bg: rgba(245,158,11,.10); }
.kpi-gray{ --kpi-bg: rgba(100,116,139,.10); }

.kpi-blue .kpi-icon{ background: rgba(37,99,235,.18); color:#1d4ed8; }
.kpi-green .kpi-icon{ background: rgba(22,163,74,.18); color:#15803d; }
.kpi-red .kpi-icon{ background: rgba(220,38,38,.16); color:#b91c1c; }
.kpi-orange .kpi-icon{ background: rgba(245,158,11,.18); color:#b45309; }
.kpi-gray .kpi-icon{ background: rgba(100,116,139,.16); color:#334155; }

/* Tablas: redondeadas por defecto (aunque no usen .table-wrapper) */
.table-responsive{
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  box-shadow: var(--shadow-xs);
  background: var(--bg-card);
  border: 1px solid var(--border-color);
}
.table-responsive .table{ margin-bottom:0; }
.table-responsive .table thead th{ background: linear-gradient(135deg, var(--primary-50) 0%, var(--secondary-50) 100%); }
.table-responsive .table tbody tr:hover{ background: rgba(37,99,235,.04); }

/* Botones de acciones (icon-only) */
.btn-icon{
  background: rgba(15,23,42,.06);
  color: var(--text-primary);
}
.btn-icon:hover{
  background: rgba(37,99,235,.12);
  color: var(--primary-700);
}
.btn-icon-muted{
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.55) !important;
}

/* WhatsApp / Mail como icono (dashboard y listados) */
.btn-wa.btn-icon{
  background: rgba(34,197,94,.18);
  color: #0f5132 !important;
}
.btn-wa.btn-icon:hover{
  background: rgba(34,197,94,.28);
  color: #0b3d24 !important;
}
.btn-mail.btn-icon{
  background: rgba(37,99,235,.18);
  color: #0b3b99 !important;
}
.btn-mail.btn-icon:hover{
  background: rgba(37,99,235,.28);
  color: #082f8a !important;
}
.btn-wa.btn-icon svg.bi-svg, .btn-mail.btn-icon svg.bi-svg{ width:1.05em; height:1.05em; }

/* ===================================================
   Cards más "vivas" (acento sutil)
   =================================================== */
.card{
  border-radius: var(--radius-lg);
  background-image: linear-gradient(180deg, rgba(37,99,235,.045), rgba(255,255,255,0) 55%);
}
.card::before{
  content:"";
  position:absolute;
  left:0; top:0;
  height:4px; width:100%;
  background: linear-gradient(90deg, rgba(37,99,235,.55), rgba(14,165,233,.25), rgba(99,102,241,.15));
  opacity:.35;
}
.card{ position: relative; }

.card-header{
  background: rgba(37,99,235,.045);
  border-bottom: 1px solid var(--border-color);
}
.card-header .card-title{
  margin:0;
  font-weight: 800;
  font-size: 1.02rem;
  color: var(--primary-800);
}

/* ===================================================
   Tables - redondeadas y prolijas
   =================================================== */
.table-responsive{
  border-radius: var(--radius-lg);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  background: #fff;
  box-shadow: var(--shadow-sm);
}
.table{
  margin-bottom:0;
}
.table thead th{
  background: rgba(37,99,235,.06);
  color: var(--primary-900);
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  font-size: .72rem;
}
.table tbody td{
  vertical-align: middle;
}


.btn-icon-secondary{
  background: linear-gradient(135deg, #334155 0%, #0f172a 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(15,23,42,.18);
}
.btn-icon-amber{
  background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(245,158,11,.18);
}
.btn-icon-disabled{
  opacity: .45;
  filter: grayscale(1);
  pointer-events: none;
}

.btn-icon-primary{
  background: linear-gradient(135deg, var(--primary-600) 0%, #0ea5e9 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.btn-icon-danger{
  background: linear-gradient(135deg, #dc2626 0%, #fb7185 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(220,38,38,.18);
}
.btn-icon-success{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(34,197,94,.20);
}
.btn-icon-muted{
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.55) !important;
}

/* WhatsApp / Mail icon buttons */
.btn-wa, .btn-mail{
  width: 34px;
  height: 34px;
  padding: 0 !important;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
}
.btn-mail{
  background: linear-gradient(135deg, var(--primary-600) 0%, var(--primary-500) 100%);
  color:#fff !important;
  border:0;
  box-shadow: 0 10px 22px rgba(37,99,235,.18);
}



/* =========================
   ACTION BUTTONS - Unified
   ========================= */
.table-actions .btn,
.icon-actions .btn{
  width: 38px;
  height: 38px;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px !important;
  line-height: 1;
}
.table-actions .btn svg,
.icon-actions .btn svg,
.table-actions .btn i,
.icon-actions .btn i{
  font-size: 1.05rem;
}

.table-actions .btn-outline-primary,
.icon-actions .btn-outline-primary{
  background: rgba(var(--bs-primary-rgb), .12) !important;
  border-color: rgba(var(--bs-primary-rgb), .22) !important;
  color: var(--primary-700) !important;
}
.table-actions .btn-outline-secondary,
.icon-actions .btn-outline-secondary{
  background: rgba(100,116,139,.12) !important;
  border-color: rgba(100,116,139,.22) !important;
  color: rgb(51,65,85) !important;
}
.table-actions .btn-outline-danger,
.icon-actions .btn-outline-danger{
  background: rgba(var(--bs-danger-rgb), .12) !important;
  border-color: rgba(var(--bs-danger-rgb), .22) !important;
  color: var(--color-danger) !important;
}
.table-actions .btn-outline-success,
.icon-actions .btn-outline-success{
  background: rgba(var(--bs-success-rgb), .12) !important;
  border-color: rgba(var(--bs-success-rgb), .22) !important;
  color: var(--color-success) !important;
}

/* WhatsApp/Mail as icon buttons */
.btn-wa{
  background: rgba(34,197,94,.18) !important;
  border: 1px solid rgba(34,197,94,.25) !important;
  color: #0f5132 !important;
}
.btn-mail{
  background: rgba(37,99,235,.16) !important;
  border: 1px solid rgba(37,99,235,.22) !important;
  color: var(--primary-800) !important;
}

.btn-icon-muted{
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.55) !important;
}

.table-actions .btn:hover,
.icon-actions .btn:hover{
  filter: brightness(0.98);
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
.table-actions .btn:active,
.icon-actions .btn:active{
  transform: translateY(0);
}

/* =========================
   TABLES - Rounded everywhere
   ========================= */
.table-responsive{
  border-radius: var(--radius-xl) !important;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-color);
  background: #fff;
}
.table{
  margin-bottom: 0;
}
.table thead th{
  background: rgba(37,99,235,.06);
  color: var(--primary-900);
  font-weight: 800;
  letter-spacing: .02em;
}
.table-hover tbody tr:hover{
  background: rgba(15,23,42,.03);
}

/* =========================
   DASHBOARD - Card header color boost
   ========================= */
.dashboard-page .card-header.dash-header{
  background: linear-gradient(90deg, rgba(37,99,235,.10), rgba(99,102,241,.08)) !important;
  border-bottom: 1px solid rgba(37,99,235,.14) !important;
}
.dashboard-page .card-header.dash-header strong{
  color: var(--primary-900);
}
.dashboard-page .card-header.dash-header i,
.dashboard-page .card-header.dash-header svg{
  color: var(--primary-700);
}




/* ===================================================
   V8 POLISH: Estilo unificado (redondeos + acciones + dashboard)
   =================================================== */

/* ---------- TABLAS: redondeadas incluso sin wrapper ---------- */
.table{
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: var(--radius-xl);
  background: #fff;
}
.table thead th{
  background: rgba(37,99,235,.06);
  border-bottom: 1px solid rgba(37,99,235,.16);
  color: var(--primary-800);
  font-weight: 900;
  letter-spacing: .02em;
}
.table thead th:first-child{ border-top-left-radius: var(--radius-xl); }
.table thead th:last-child{ border-top-right-radius: var(--radius-xl); }
.table tbody tr:last-child td:first-child{ border-bottom-left-radius: var(--radius-xl); }
.table tbody tr:last-child td:last-child{ border-bottom-right-radius: var(--radius-xl); }

.table-responsive{
  border-radius: var(--radius-xl);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(15,23,42,.10);
  background: #fff;
}
.table-responsive .table{ border:0; border-radius:0; }

/* ---------- ACCIONES: botones con fondo uniforme ---------- */
.btn-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  border-radius: 12px;
  padding: .45rem .6rem;
  line-height: 1;
  border: 1px solid rgba(148,163,184,.26);
  background: rgba(148,163,184,.14);
  color: var(--text-900);
}
.btn-icon:hover{ background: rgba(148,163,184,.20); }
.btn-icon.icon-only{ width:38px; height:38px; padding:0; }

.btn-icon svg{ width:18px; height:18px; }
.btn-icon.icon-only svg{ width:18px; height:18px; }

/* Variantes por acción (las asigna bi-svg.js automáticamente) */
.btn-icon-primary{
  background: linear-gradient(135deg, var(--primary-600) 0%, #0ea5e9 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(37,99,235,.22);
}
.btn-icon-muted{
  background: rgba(15,23,42,.06) !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  color: rgba(15,23,42,.55) !important;
}
.btn-icon-danger{
  background: linear-gradient(135deg, #dc2626 0%, #fb7185 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(220,38,38,.18);
}
.btn-icon-success{
  background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%) !important;
  border: 0 !important;
  color: #fff !important;
  box-shadow: 0 10px 22px rgba(34,197,94,.20);
}
.btn-icon-wa{
  background: rgba(34,197,94,.16) !important;
  border-color: rgba(34,197,94,.28) !important;
  color: #15803d !important;
}
.btn-icon-mail{
  background: rgba(59,130,246,.14) !important;
  border-color: rgba(59,130,246,.26) !important;
  color: #1d4ed8 !important;
}

/* Estados deshabilitados (para dashboard cuando no hay dato) */
.btn-icon.disabled, .btn-icon:disabled{
  opacity: .42;
  pointer-events: none;
  filter: grayscale(.15);
}

/* ---------- Dashboard: headers con color para identificar ---------- */
.dash-header{
  background: linear-gradient(135deg, rgba(37,99,235,.16) 0%, rgba(37,99,235,.06) 100%);
  border-bottom: 1px solid rgba(37,99,235,.18);
}
.dash-header strong{ font-weight: 900; }
.dash-header.dash-tone-danger{
  background: linear-gradient(135deg, rgba(239,68,68,.16) 0%, rgba(239,68,68,.06) 100%);
  border-bottom-color: rgba(239,68,68,.18);
}
.dash-header.dash-tone-success{
  background: linear-gradient(135deg, rgba(34,197,94,.18) 0%, rgba(34,197,94,.06) 100%);
  border-bottom-color: rgba(34,197,94,.18);
}
.dash-header.dash-tone-amber{
  background: linear-gradient(135deg, rgba(245,158,11,.18) 0%, rgba(245,158,11,.06) 100%);
  border-bottom-color: rgba(245,158,11,.18);
}
.dash-header.dash-tone-slate{
  background: linear-gradient(135deg, rgba(100,116,139,.18) 0%, rgba(100,116,139,.06) 100%);
  border-bottom-color: rgba(100,116,139,.18);
}

/* ---------- Tarjetas más redondeadas, más "pro" ---------- */
.card, .card.shadow-sm, .card.shadow{
  border-radius: var(--radius-xl);
}
.card-header{
  border-top-left-radius: var(--radius-xl);
  border-top-right-radius: var(--radius-xl);
}
.card-footer{
  border-bottom-left-radius: var(--radius-xl);
  border-bottom-right-radius: var(--radius-xl);
}



/* ===================================================
   V10 OVERRIDES: Más color + cards consistentes
   =================================================== */

/* Cards: más redondeadas + un toque más vivo */
.card{
  border-radius: var(--radius-xl) !important;
  background: linear-gradient(180deg, #ffffff 0%, rgba(37,99,235,.018) 100%) !important;
}
.card::before{
  height: 5px !important;
  opacity: .55 !important;
}

/* Headers: más color pero pro */
.card-header{
  background: linear-gradient(135deg, rgba(37,99,235,.10) 0%, rgba(14,165,233,.06) 55%, rgba(99,102,241,.06) 100%) !important;
  border-bottom: 1px solid rgba(37,99,235,.18) !important;
}

/* Dashboard: tonos distintos por módulo */
.dashboard-page .card-header.dash-header{
  background: linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.08)) !important;
  border-bottom: 1px solid rgba(37,99,235,.18) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-danger{
  background: linear-gradient(135deg, rgba(239,68,68,.16), rgba(37,99,235,.06)) !important;
  border-bottom-color: rgba(239,68,68,.22) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-success{
  background: linear-gradient(135deg, rgba(34,197,94,.16), rgba(37,99,235,.06)) !important;
  border-bottom-color: rgba(34,197,94,.22) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-amber{
  background: linear-gradient(135deg, rgba(245,158,11,.18), rgba(37,99,235,.06)) !important;
  border-bottom-color: rgba(245,158,11,.24) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-slate{
  background: linear-gradient(135deg, rgba(100,116,139,.16), rgba(37,99,235,.05)) !important;
  border-bottom-color: rgba(100,116,139,.22) !important;
}

/* KPI cards: más color en borde */
.kpi-card{
  border-radius: var(--radius-xl) !important;
}
.kpi-card::before{
  opacity: .75 !important;
}

/* Tablas: redondeo más marcado y “pro” */
.table{
  border-radius: var(--radius-xl) !important;
}
.table thead th{
  background: linear-gradient(180deg, rgba(37,99,235,.08), rgba(37,99,235,.03)) !important;
}

/* Pequeño realce de secciones (cards de filtros, etc.) */
.section-card, .filter-card{
  border-radius: var(--radius-xl) !important;
}



/* ===================================================
   V11 - SOLID COLOR UI (PRO, NO PASTEL)
   Objetivo: replicar estilo "crear empresa" en todo el sitio,
   con headers sólidos, cards redondeadas, títulos con acento.
   =================================================== */

/* Cards: más redondeadas y con borde fino consistente */
.card{
  border-radius: 22px !important;
  border: 1px solid var(--border) !important;
  overflow: hidden;
}

/* Header de card: sólido + texto blanco (estilo pro) */
.card > .card-header{
  background: var(--primary-700) !important;
  color: #fff !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
  padding: 1rem 1.25rem !important;
}
.card > .card-header::before{
  /* barra de acento más clara para que no se vea infantil */
  background: rgba(255,255,255,.28) !important;
}

/* Links y botones dentro de headers */
.card > .card-header a,
.card > .card-header .btn,
.card > .card-header .badge{
  color: #fff !important;
}
.card > .card-header .btn{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.25) !important;
}
.card > .card-header .btn:hover{
  background: rgba(255,255,255,.20) !important;
}

/* Form header (crear/editar empresa) - sólido */
.form-header{
  background: var(--primary-700) !important;
  color:#fff !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.form-header .text-muted{
  color: rgba(255,255,255,.85) !important;
}

/* Dashboard: headers sólidos por tono (diferenciados) */
.card-header.dash-header{
  color:#fff !important;
  border-bottom: 1px solid rgba(255,255,255,.14) !important;
}
.card-header.dash-header.dash-tone-danger{ background:#dc2626 !important; }
.card-header.dash-header.dash-tone-success{ background:#16a34a !important; }
.card-header.dash-header.dash-tone-amber{ background:#f59e0b !important; }
.card-header.dash-header.dash-tone-slate{ background:#1e293b !important; }
.card-header.dash-header.dash-tone-info{ background:#0ea5e9 !important; }
.card-header.dash-header svg,
.card-header.dash-header .icon{
  fill:#fff !important;
  color:#fff !important;
}

/* Ensure the title text inside dashboard headers stays white even if some pages add
   Bootstrap text utility classes (e.g. text-primary) */
.card-header.dash-header h1,
.card-header.dash-header h2,
.card-header.dash-header h3,
.card-header.dash-header h4,
.card-header.dash-header h5,
.card-header.dash-header h6,
.card-header.dash-header .card-title{
  color:#fff !important;
}

/* Title bar en páginas de índice: convierte el header en "card" compacto */
.container > .d-flex.justify-content-between.align-items-center.mb-3{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 22px;
  padding: .75rem 1rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h1,
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h2,
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h3{
  color: var(--primary-800);
  font-weight: 800;
  letter-spacing: .2px;
}
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h1::after,
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h2::after,
.container > .d-flex.justify-content-between.align-items-center.mb-3 > h3::after{
  content:'';
  display:block;
  height:4px;
  width:64px;
  border-radius:999px;
  margin-top:.35rem;
  background: var(--primary-500);
  opacity:.9;
}

/* Filtros (GET forms) como panel */
form.row.g-2.mb-3[method="GET"],
form.row.g-3.mb-3[method="GET"],
form.row.g-2.mb-4[method="GET"]{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 22px;
  padding: .75rem;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}

/* Tablas: redondeadas siempre, sin depender de wrappers */
table.table{
  background:#fff;
  border:1px solid var(--border);
  border-radius: 22px;
  overflow:hidden;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
table.table thead th{
  background: var(--primary-100) !important;
  color: var(--primary-900) !important;
  border-bottom: 2px solid var(--primary-200) !important;
}
table.table tbody tr:hover{
  background: rgba(37,99,235,.06) !important;
}

/* Esquinas redondeadas reales para tabla */
table.table thead tr:first-child th:first-child{ border-top-left-radius: 22px; }
table.table thead tr:first-child th:last-child{ border-top-right-radius: 22px; }
table.table tbody tr:last-child td:first-child{ border-bottom-left-radius: 22px; }
table.table tbody tr:last-child td:last-child{ border-bottom-right-radius: 22px; }

/* Buttons: primary más sólido (sin pasteles) */
.btn-primary{
  background: var(--primary-600) !important;
  border-color: var(--primary-700) !important;
}
.btn-primary:hover{
  background: var(--primary-700) !important;
  border-color: var(--primary-800) !important;
}

/* KPI cards: un poquito más "vivas" */
.kpi-card{
  border-radius: 22px !important;
}
.kpi-card::before{ opacity: 1 !important; }

/* Mobile: title bar en stack */
@media (max-width: 576px){
  .container > .d-flex.justify-content-between.align-items-center.mb-3{
    flex-direction: column;
    align-items: flex-start !important;
    gap: .5rem;
  }
}


/* ===================================================
   V12 - SOLID ONLY (Dashboard + Formularios)
   - No solidificar headers de cards generales.
   - Mantener sólidos en .form-header y dashboard (dash-header).
   =================================================== */

/* Cards generales: header neutro (no sólido) */
.card > .card-header{
  background: var(--surface-2) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border) !important;
}
.card > .card-header a,
.card > .card-header .badge,
.card > .card-header .text-muted{
  color: var(--text) !important;
}
.card > .card-header .btn{
  background: transparent !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}

/* Formularios: header sólido (estilo "Nueva Empresa") */
.form-header{
  background: var(--primary-700) !important;
  color:#fff !important;
}
.form-header .subtitle,
.form-header .text-muted{
  color: rgba(255,255,255,.88) !important;
}

/* Dashboard: headers SÓLIDOS por tono (override de reglas con mayor especificidad) */
.dashboard-page .card-header.dash-header{
  color:#fff !important;
  border-bottom: 1px solid rgba(255,255,255,.18) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-danger{ background:#dc2626 !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.dashboard-page .card-header.dash-header.dash-tone-success{ background:#16a34a !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.dashboard-page .card-header.dash-header.dash-tone-amber{ background:#f59e0b !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.dashboard-page .card-header.dash-header.dash-tone-slate{ background:#0f172a !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.dashboard-page .card-header.dash-header.dash-tone-info{ background:#0ea5e9 !important; border-bottom-color: rgba(255,255,255,.18) !important; }
.dashboard-page .card-header.dash-header.dash-tone-indigo{ background:#3730a3 !important; border-bottom-color: rgba(255,255,255,.18) !important; }

.dashboard-page .card-header.dash-header svg,
.dashboard-page .card-header.dash-header .icon{
  fill:#fff !important;
  color:#fff !important;
}
.dashboard-page .card-header.dash-header .btn,
.dashboard-page .card-header.dash-header a.btn{
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.22) !important;
  color:#fff !important;
}
.dashboard-page .card-header.dash-header .btn:hover,
.dashboard-page .card-header.dash-header a.btn:hover{
  background: rgba(255,255,255,.18) !important;
}



/* A360 SIDEBAR */
.a360-shell{display:flex;min-height:100vh;background:var(--a360-bg, #f5f7fb);}
.a360-sidebar{
  width:260px;flex:0 0 260px;background:#0b1220;color:#e5e7eb;
  position:sticky;top:0;height:100vh;overflow:auto;
  border-right:1px solid rgba(255,255,255,.08);
}
.a360-sidebar__brand{
  display:flex;align-items:center;justify-content:space-between;
  padding:14px 14px;border-bottom:1px solid rgba(255,255,255,.08);
}
.a360-sidebar__logo{display:flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-weight:700}
.a360-dot{width:10px;height:10px;border-radius:999px;background:#2563eb;box-shadow:0 0 0 4px rgba(37,99,235,.25)}
.a360-sidebar__close{display:none;background:transparent;border:0;color:#fff}
.a360-sidebar__nav{padding:10px}
.a360-sidegroup{margin:14px 10px 6px;color:rgba(229,231,235,.6);font-size:.75rem;text-transform:uppercase;letter-spacing:.08em}
.a360-sideitem{
  display:flex;align-items:center;gap:10px;
  padding:10px 10px;border-radius:12px;color:rgba(229,231,235,.9);text-decoration:none;
}
.a360-sideitem:hover{background:rgba(255,255,255,.08);color:#fff}
.a360-sideitem.is-active{background:rgba(37,99,235,.20);color:#fff;border:1px solid rgba(37,99,235,.35)}
.a360-ico{width:18px;height:18px;fill:currentColor;opacity:.95}
.a360-sidebar__footer{padding:10px;border-top:1px solid rgba(255,255,255,.08)}
.a360-main{flex:1;min-width:0}
.a360-sidebtn{border-radius:12px}
.a360-backdrop{display:none}
@media (max-width: 992px){
  .a360-sidebar{
    position:fixed;left:0;top:0;z-index:1040;
    transform:translateX(-105%);transition:transform .18s ease;
  }
  .a360-sidebar.is-open{transform:translateX(0)}
  .a360-sidebar__close{display:inline-flex}
  .a360-backdrop{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1039}
  .a360-backdrop.is-open{display:block}
  .a360-shell{display:block}
}


/* ---------- FIX: evitar links azules en títulos ---------- */
.card h1 a, .card h2 a, .card h3 a, .card h4 a, .card h5 a, .card h6 a,
.card-title a,
.marketing-header h1 a, .marketing-header h2 a, .marketing-header h3 a, .marketing-header h4 a {
  color: inherit !important;
  text-decoration: none;
}
.card h1 a:hover, .card h2 a:hover, .card h3 a:hover, .card h4 a:hover, .card h5 a:hover, .card h6 a:hover,
.card-title a:hover,
.marketing-header h1 a:hover, .marketing-header h2 a:hover, .marketing-header h3 a:hover, .marketing-header h4 a:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}




/* ==========================================================
   FIX MOBILE TABLE SCROLL (force horizontal scroll on phones)
   ========================================================== */
@media (max-width: 992px){
  .table-responsive{
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    max-width: 100%;
    touch-action: pan-x pan-y;
  }
  /* Force table wider than viewport so horizontal scroll is available */
  .table-responsive > table{
    min-width: 760px;
  }
  .table-responsive > table th,
  .table-responsive > table td{
    white-space: nowrap;
  }
}

/* Prevent blue link titles inside cards/headers */
.card a, .page-header a, .card-title a, h1 a, h2 a, h3 a, h4 a, h5 a, h6 a{
  color: inherit !important;
  text-decoration: none;
}
.card a:hover, .page-header a:hover, .card-title a:hover, h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover{
  text-decoration: underline;
  text-underline-offset: 3px;
}


/* ========= A360 OVERRIDE: SIDEBAR SOLO ÍCONOS ========= */
.a360-sidebar{width:72px !important;flex:0 0 72px !important;}
.a360-sidebar__brand{justify-content:center !important;}
.a360-sidebar__logo span:last-child{display:none !important;}
.a360-sidebar__nav{padding:10px 8px !important;}
.a360-sideitem{justify-content:center !important;gap:0 !important;}
.a360-sideitem > span:last-child{display:none !important;}
.a360-sidegroup{display:none !important;}
.a360-sidebar__footer .a360-sideitem > span:last-child{display:none !important;}
.a360-sidebar__close{display:none !important;}
@media (max-width: 992px){
  .a360-sidebar{width:260px !important;flex:0 0 260px !important;}
  .a360-sidebar__brand{justify-content:space-between !important;}
  .a360-sidebar__close{display:inline-flex !important;}
  .a360-sideitem{justify-content:flex-start !important;gap:10px !important;}
  .a360-sideitem > span:last-child{display:none !important;}
}



/* ===================================================
   A360 - Sidebar solo íconos en PC + Auth sin navegación
   =================================================== */
@media (min-width: 992px){
  .a360-sidebar{
    width: 76px !important;
    flex: 0 0 76px !important;
  }
  .a360-sidebar__brand{
    justify-content: center;
    padding: 14px 10px;
  }
  .a360-sidebar__logo{
    justify-content: center;
    gap: 0;
  }
  .a360-brand-text{ display:none !important; }
  .a360-sidegroup{ display:none !important; }

  .a360-sidebar__nav{ padding: 10px 6px; }
  .a360-sideitem{
    justify-content: center;
    gap: 0;
    padding: 12px 10px;
  }
  .a360-sideitem .a360-label{ display:none !important; }
  .a360-sidebar__close{ display:none !important; }

  .a360-brand-img{ height: 30px; width: auto; display:block; }
}

@media (max-width: 991.98px){
  .a360-brand-img{ height: 30px; width: auto; display:block; }
}

/* Login/Auth: sin barras de navegación */
body.auth-page .a360-shell{ display:block; background:transparent; }
body.auth-page .a360-main{ width:100%; }
body.auth-page .a360-sidebar,
body.auth-page .a360-backdrop{ display:none !important; }

/* Usuario en navbar: pill visible */
.navbar .a360-userpill{
  display:flex;
  align-items:center;
  gap: .5rem;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 999px;
  padding: .35rem .65rem !important;
}
.navbar .a360-userpill .a360-user-name{
  color: rgba(255,255,255,.95) !important;
  font-weight: 800;
}
.a360-logo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 6px 10px;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
}

.a360-logo-badge--side{
  padding: 6px;
  border-radius: 12px;
}

.a360-nav-logo{
  height: 28px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.a360-brand-img{
  height: 28px;
  width:auto;
  display:block;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.55)) drop-shadow(0 0 10px rgba(255,255,255,.12));
}

.a360-brand-initials{
  display:inline-flex;
  width: 36px;
  height: 36px;
  align-items:center;
  justify-content:center;
  border-radius: 12px;
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.14);
  color: rgba(255,255,255,.95);
  font-weight: 900;
  letter-spacing: .5px;
}



/* ===================================================
   V9 POLISH: Dashboard tonos con texto blanco
   =================================================== */
.dashboard-page .card-header.dash-header.dash-tone-danger strong,
.dashboard-page .card-header.dash-header.dash-tone-success strong,
.dashboard-page .card-header.dash-header.dash-tone-amber strong,
.dashboard-page .card-header.dash-header.dash-tone-info strong{
  color: #fff !important;
}
.dashboard-page .card-header.dash-header.dash-tone-danger i,
.dashboard-page .card-header.dash-header.dash-tone-success i,
.dashboard-page .card-header.dash-header.dash-tone-amber i,
.dashboard-page .card-header.dash-header.dash-tone-info i{
  color: #fff !important;
  opacity: .95;
}
/* Botón en header (ver) */
.dashboard-page .card-header.dash-header.dash-tone-danger .btn,
.dashboard-page .card-header.dash-header.dash-tone-success .btn,
.dashboard-page .card-header.dash-header.dash-tone-amber .btn,
.dashboard-page .card-header.dash-header.dash-tone-info .btn{
  border-color: rgba(255,255,255,.35) !important;
  color: #fff !important;
  background: rgba(255,255,255,.14) !important;
}
.dashboard-page .card-header.dash-header.dash-tone-danger .btn:hover,
.dashboard-page .card-header.dash-header.dash-tone-success .btn:hover,
.dashboard-page .card-header.dash-header.dash-tone-amber .btn:hover,
.dashboard-page .card-header.dash-header.dash-tone-info .btn:hover{
  background: rgba(255,255,255,.22) !important;
}



/* ===================================================
   A360 MOBILE NAV + SAFE AREA + TABLE SCROLL (v9)
   - En móvil: sin barra lateral (evita doble navegación)
   - Corrige "barra" superior en iOS usando safe-area
   - Tablas: scroll horizontal consistente
   =================================================== */

@supports (padding-top: env(safe-area-inset-top)) {
  .navbar { padding-top: calc(env(safe-area-inset-top) + .25rem) !important; }
}

@media (max-width: 992px){
  .a360-sidebar{ display:none !important; }
  .a360-sidebtn{ display:none !important; } /* botón menú lateral */
  .a360-shell{ display:block !important; }
  .a360-main{ width:100% !important; }
}

@media (max-width: 768px){
  .table-responsive{ overflow-x:auto !important; -webkit-overflow-scrolling:touch; }
  .table-responsive > table{ min-width: 720px; }
  /* Si alguna tabla no tiene wrapper */
  table.table, .table{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
  }
  table.table th, table.table td, .table th, .table td{ white-space:nowrap; }
}


/* Alerts: filtros con texto (evitar recorte por .table-actions .btn { width:38px }) */
.table-actions.table-actions-text .btn{
  width: auto;
  height: auto;
  padding: .45rem .75rem;
  border-radius: 999px;
  line-height: 1.1;
  white-space: nowrap;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .35rem;
  border: 2px solid transparent;
  background: transparent;
}
.table-actions.table-actions-text .btn.btn-outline-primary{
  border-color: var(--primary-500);
  color: var(--primary-700);
  background: transparent;
}


/* Dashboard: botón de editar sobre encabezados coloridos */
.dashboard .btn.btn-outline-light.btn-icon,
.dashboard .btn.btn-outline-light{
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: rgba(255,255,255,.08) !important;
}
.dashboard .btn.btn-outline-light:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.75) !important;
}


/* Botón soft (acciones rápidas en listas/cards) */
.btn-soft{
  background: var(--secondary-100);
  color: var(--secondary-700);
  border: 0;
  box-shadow: var(--shadow-xs);
}
.btn-soft:hover{
  background: var(--secondary-200);
  color: var(--secondary-800);
  transform: translateY(-1px);
}

/* Alertas: filtros legibles (no usar .table-actions para evitar width fijo) */
.alert-filter .btn{
  width:auto;
  padding: .45rem .85rem;
  border-width: 2px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.35rem;
  white-space: nowrap;
}

/* Contact Picker: botón visible sobre encabezado */
#btnPickContact.btn-outline-light{
  border-color: rgba(255,255,255,.55) !important;
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}
#btnPickContact.btn-outline-light:hover{
  background: rgba(255,255,255,.18) !important;
  border-color: rgba(255,255,255,.75) !important;
}

/* ===================================================
   Fix final Hostinger / branding / contraste edición
   =================================================== */
.a360-logo-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:14px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
}
.a360-logo-badge--light,
.a360-logo-badge--erp{
  background:#ffffff;
  border:1px solid rgba(15,23,42,.10);
  box-shadow:0 4px 14px rgba(0,0,0,.08);
}
.a360-logo-badge--side{
  padding:6px;
  border-radius:12px;
}
.a360-nav-logo,
.a360-brand-img{
  height:26px;
  width:auto;
  display:block;
  image-rendering: -webkit-optimize-contrast;
}

.navbar-brand{
  -webkit-text-fill-color: initial;
  color:#fff;
  background:none;
}
.navbar-brand:hover{
  color:#fff;
  filter:none;
  transform:none;
}
.navbar-brand .a360-nav-logo{ height:22px; }

.a360-sidebar__logo .a360-brand-img{
  height:38px;
  width:38px;
  display:block;
}
.a360-sidebar__logo .a360-brand-text{
  color:#fff;
}

.btn-icon-edit{
  background:linear-gradient(135deg, #f59e0b 0%, #f97316 100%) !important;
  border:0 !important;
  color:#fff !important;
  box-shadow:0 10px 22px rgba(249,115,22,.24);
}
.btn-icon-edit:hover{
  filter:brightness(1.05);
}


/* ===================================================
   Navbar unificada estilo landing - branding CRM
   =================================================== */
.navbar{
  background:
    radial-gradient(circle at 14% 18%, rgba(249,115,22,.15) 0%, rgba(249,115,22,0) 32%),
    linear-gradient(90deg, #090d17 0%, #0b1020 38%, #111a31 100%) !important;
  border-bottom: 1px solid rgba(59,130,246,.35);
  box-shadow: 0 18px 50px rgba(2,6,23,.28);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.navbar .container-fluid{
  min-height: 74px;
  padding: .55rem 1.15rem !important;
}
.a360-navbar-brand{
  display:inline-flex;
  align-items:center;
  gap:.85rem;
  color:#fff !important;
  text-decoration:none;
  padding:0 !important;
}
.a360-navbar-brand:hover{
  color:#fff !important;
  text-decoration:none;
}
.a360-logo-badge--nav,
.a360-logo-badge--erp{
  min-width: 0;
  min-height: 0;
  padding: 0;
  border-radius: 0;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.a360-logo-badge--light{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.a360-navbar-brand .a360-nav-logo{
  height: 56px !important;
  width: auto;
}
.a360-brand-lockup{
  display:inline-flex;
  align-items:baseline;
  gap:.4rem;
  flex-wrap:wrap;
  line-height:1;
}
.a360-brand-word{
  color:#ffffff;
  font-weight: 800;
  letter-spacing:-.03em;
}
.a360-brand-360{
  color:#fb923c;
  font-weight: 900;
  letter-spacing:-.03em;
}
.a360-brand-suffix{
  color:rgba(255,255,255,.82);
  font-weight:800;
  letter-spacing:.06em;
  font-size:.72em;
  text-transform:uppercase;
  padding:.28rem .5rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.08);
}
.a360-navbar-brand .a360-brand-word,
.a360-navbar-brand .a360-brand-360{
  font-size: 1.05rem;
}
.navbar-toggler,
.a360-sidebtn{
  width:56px;
  height:56px;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.12) !important;
  background:rgba(255,255,255,.06) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.navbar-toggler:hover,
.navbar-toggler:focus,
.a360-sidebtn:hover,
.a360-sidebtn:focus{
  background:rgba(255,255,255,.10) !important;
  border-color:rgba(255,255,255,.18) !important;
  box-shadow:none !important;
}
.navbar-toggler-icon{
  filter: brightness(1.2);
}
.navbar .nav-link{
  border-radius: 999px;
  padding: .55rem .9rem !important;
}
.navbar .nav-link:hover{
  background: rgba(255,255,255,.08);
}
.navbar .dropdown-menu{
  border:1px solid rgba(15,23,42,.08);
  box-shadow:0 24px 60px rgba(15,23,42,.18);
}
.a360-sidebar{
  background:
    radial-gradient(circle at 20% 12%, rgba(249,115,22,.10) 0%, rgba(249,115,22,0) 34%),
    linear-gradient(180deg, #0a0f1b 0%, #0d1528 100%);
}
.a360-sidebar__brand{
  border-bottom:1px solid rgba(255,255,255,.06);
}
.a360-sidebar__logo{gap:.75rem;}
.a360-sidebar__logo .a360-brand-text{
  color:#fff;
  font-size:1rem;
}
.a360-sidebar__logo .a360-brand-suffix{
  font-size:.62rem;
  padding:.2rem .42rem;
}
@media (max-width: 991.98px){
  .navbar .container-fluid{
    min-height: 78px;
    padding: .7rem .9rem !important;
  }
  .a360-navbar-brand{
    gap:.7rem;
    min-width:0;
  }
  .a360-logo-badge--nav{
    min-width:0;
    min-height:0;
    padding:0;
    border-radius:0;
  }
  .a360-navbar-brand .a360-nav-logo{
    height: 48px !important;
  }
  .a360-navbar-brand .a360-brand-word,
  .a360-navbar-brand .a360-brand-360{
    font-size: .98rem;
  }
  .a360-navbar-brand .a360-brand-suffix{
    font-size:.62rem;
    padding:.22rem .42rem;
  }
  .navbar-collapse{
    margin-top:.75rem;
    padding:.8rem;
    border-radius:20px;
    background:rgba(7,10,18,.88);
    border:1px solid rgba(255,255,255,.08);
    box-shadow:0 24px 50px rgba(2,6,23,.28);
  }
}


/* Fix logo transparente navbar/login */
.login-topbar .a360-logo-badge,
.navbar .a360-logo-badge{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}