/* === Variables de color para modo claro y oscuro === */
:root {
  --color-bg: #f4f6fb;
  --color-bg-card: #fff;
  --color-primary: #007bff;
  --color-primary-dark: #0056b3;
  --color-secondary: #764ba2;
  --color-accent: #667eea;
  --color-text: #222;
  --color-text-light: #fff;
  --color-border: #e0e6ed;
  --color-success: #28a745;
  --color-danger: #dc3545;
  --color-warning: #ffc107;
  --shadow: 0 8px 32px rgba(44, 62, 80, 0.18);
}
[data-theme="dark"] {
  --color-bg: #181c24;
  --color-bg-card: #23283a;
  --color-primary: #4f8cff;
  --color-primary-dark: #2a4d8f;
  --color-secondary: #a084e8;
  --color-accent: #667eea;
  --color-text: #f4f6fb;
  --color-text-light: #fff;
  --color-border: #2c3140;
  --color-success: #4fd18b;
  --color-danger: #ff6b6b;
  --color-warning: #ffd166;
  --shadow: 0 8px 32px rgba(0,0,0,0.25);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
  min-height: 100vh;
  margin: 0;
  transition: background 0.3s, color 0.3s;
}

.header, .main-header {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%);
  color: var(--color-text-light);
  text-align: center;
  padding: 2rem 1rem 2rem 1rem;
}
.header img, .main-header img {
  height: 60px;
  margin-bottom: 12px;
}

.card, .main-card, .welcome-container {
  background: var(--color-bg-card);
  border-radius: 18px;
  box-shadow: var(--shadow);
  margin: auto;
  transition: box-shadow 0.2s, background 0.3s;
}

.card, .main-card {
  height: auto;
  max-width: 100%;
  padding: 2rem 2rem;
}

.welcome-container {
  max-width: 500px;
  text-align: center;
  padding: 2.5rem 2rem;
}

.btn, .btn-primary, .btn-success, .btn-danger, .btn-warning, .btn-secondary, .btn-outline-secondary {
  
    border-radius: 8px;
  font-weight: 600;
  font-size: 1.1rem;
  padding: 0.85rem 1.5rem;
  margin-bottom: 0.5rem;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  color: var(--color-text-light);
  border: none;
}
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 100%);
  transform: translateY(-2px) scale(1.01);
}
.btn-success {
  background: var(--color-success);
  color: var(--color-text-light);
  border: none;
}
.btn-danger {
  background: var(--color-danger);
  color: var(--color-text-light);
  border: none;
}
.btn-warning {
  background: var(--color-warning);
  color: #222;
  border: none;
}
.btn-secondary, .btn-outline-secondary {
  background: var(--color-secondary);
  color: var(--color-text-light);
  border: none;
}
.btn-outline-secondary {
  background: transparent;
  color: var(--color-secondary);
  border: 2px solid var(--color-secondary);
}
.btn-outline-secondary:hover {
  background: var(--color-secondary);
  color: var(--color-text-light);
}

.table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 2rem;
}
.table th, .table td {
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  text-align: left;
}
.table th {
  background: var(--color-bg);
  color: var(--color-primary-dark);
}

.form-control, .form-select {
  border-radius: 8px;
  border: 1px solid var(--color-border);
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  margin-bottom: 1rem;
  background: var(--color-bg-card);
  color: var(--color-text);
  transition: border 0.2s, background 0.3s, color 0.3s;
}
.form-control:focus, .form-select:focus {
  border-color: var(--color-primary);
  outline: none;
}

.alert {
  border-radius: 12px;
  font-size: 1rem;
  padding: 1rem 1.5rem;
  margin-bottom: 1.5rem;
}
.alert-success { background: #e6f9ed; color: var(--color-success); }
.alert-danger { background: #fbeaea; color: var(--color-danger); }
.alert-warning { background: #fffbe6; color: var(--color-warning); }

.footer {
  width: 100vw;
  background: transparent;
  color: #b0c4e7;
  text-align: center;
  font-size: 1rem;
  margin-top: auto;
  padding: 18px 0 10px 0;
  border: none;
  position: relative;
  left: 0;
  bottom: 0;
}

/* Kanban moderno */
.kanban-row {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
}
.kanban-col {
  min-width: 270px;
  max-width: 320px;
  background: var(--color-bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 1.5rem 1rem;
  margin-bottom: 2rem;
  transition: box-shadow 0.2s;
}
.kanban-col h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
}
.lead {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(44, 62, 80, 0.08);
  margin-bottom: 1rem;
  padding: 1rem;
  border: 1px solid var(--color-border);
  transition: box-shadow 0.2s, background 0.3s;
  cursor: grab;
}
.lead:active {
  background: #f0f0f0;
  box-shadow: 0 4px 16px rgba(44, 62, 80, 0.15);
}

/* Switch modo claro/oscuro */
.theme-switch {
  position: fixed;
  top: 1.5rem;
  right: 2rem;
  z-index: 1000;
}
.theme-switch input[type="checkbox"] {
  display: none;
}
.theme-switch label {
  cursor: pointer;
  background: var(--color-bg-card);
  border-radius: 20px;
  padding: 0.5rem 1.2rem;
  box-shadow: var(--shadow);
  color: var(--color-text);
  font-weight: 600;
  transition: background 0.3s, color 0.3s;
}
.theme-switch label:hover {
  background: var(--color-primary);
  color: var(--color-text-light);
}

@media (max-width: 700px) {
  .kanban-row {
    flex-direction: column;
    gap: 1rem;
  }
  .kanban-col {
    min-width: 90vw;
    max-width: 98vw;
    padding: 1rem 0.5rem;
  }
  .card, .main-card, .welcome-container {
    max-width: 98vw;
    padding: 1.2rem 0.5rem;
  }
}

/* === Círculo de avatar de usuario === */
.avatar-circle {
  background-color: rgba(59, 130, 246, 0.1) !important;
  color: var(--color-primary) !important;
}

/* ==========================================
   SISTEMA DE ALTO CONTRASTE PARA MODO OSCURO
   ========================================== */
[data-theme="dark"] {
  --bs-body-color: #cbd5e1;
  --bs-body-bg: #0f172a;
  --bs-tertiary-bg: #1e293b;
}

[data-theme="dark"] body {
  background-color: #0f172a !important;
  color: #f8fafc !important;
}

/* Encabezados y Texto */
[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4,
[data-theme="dark"] h5,
[data-theme="dark"] h6,
[data-theme="dark"] .h1,
[data-theme="dark"] .h2,
[data-theme="dark"] .h3,
[data-theme="dark"] .h4,
[data-theme="dark"] .h5,
[data-theme="dark"] .h6 {
  color: #ffffff !important;
}

[data-theme="dark"] p,
[data-theme="dark"] span,
[data-theme="dark"] small,
[data-theme="dark"] label,
[data-theme="dark"] li,
[data-theme="dark"] ul,
[data-theme="dark"] ol {
  color: #cbd5e1 !important;
}

[data-theme="dark"] strong,
[data-theme="dark"] b {
  color: #ffffff !important;
}

[data-theme="dark"] a {
  color: #60a5fa !important;
  text-decoration: none !important;
}

[data-theme="dark"] a:hover {
  color: #93c5fd !important;
  text-decoration: underline !important;
}

[data-theme="dark"] .alert-link {
  color: #ffffff !important;
  text-decoration: underline !important;
}

[data-theme="dark"] .text-dark {
  color: #f8fafc !important;
}

[data-theme="dark"] .text-muted {
  color: #94a3b8 !important;
}

[data-theme="dark"] .text-secondary {
  color: #cbd5e1 !important;
}

/* Forzar neutralización de utilidades Bootstrap claras en modo oscuro */
[data-theme="dark"] .bg-white {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}

[data-theme="dark"] .bg-light {
  background-color: #0f172a !important;
  color: #cbd5e1 !important;
}

[data-theme="dark"] .avatar-circle {
  background-color: rgba(96, 165, 250, 0.15) !important;
  color: #60a5fa !important;
}

/* Tarjetas y Contenedores */
[data-theme="dark"] .card,
[data-theme="dark"] .main-card,
[data-theme="dark"] .welcome-container {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .card-header,
[data-theme="dark"] .card-footer {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* Modales */
[data-theme="dark"] .modal-content {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border: 1px solid #334155 !important;
}

[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer {
  border-color: #334155 !important;
}

/* Tablas bootstrap */
[data-theme="dark"] .table {
  color: #cbd5e1 !important;
  --bs-table-color: #cbd5e1 !important;
  --bs-table-bg: transparent !important;
  --bs-table-border-color: #334155 !important;
}

[data-theme="dark"] .table th {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .table td {
  background-color: transparent !important;
  color: #cbd5e1 !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .table-report-wrapper {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .table-hover tbody tr:hover {
  background-color: #334155 !important;
  --bs-table-hover-bg: #334155 !important;
  color: #ffffff !important;
}

/* Controles de Formulario */
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

[data-theme="dark"] .form-control:focus,
[data-theme="dark"] .form-select:focus {
  background-color: #1e293b !important;
  color: #ffffff !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 0.25rem rgba(59, 130, 246, 0.25) !important;
}

/* Listas y Menús Desplegables */
[data-theme="dark"] .dropdown-menu {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3) !important;
}

[data-theme="dark"] .dropdown-item {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .dropdown-item:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

[data-theme="dark"] .dropdown-header {
  color: #94a3b8 !important;
}

[data-theme="dark"] .list-group-item {
  background-color: #1e293b !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
}

/* Tablero Kanban y Leads */
[data-theme="dark"] .kanban-col {
  background-color: #1e293b !important;
  border: 1px solid #334155 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important;
}

[data-theme="dark"] .kanban-col h4 {
  color: #60a5fa !important;
}

[data-theme="dark"] .lead {
  background-color: #0f172a !important;
  color: #f8fafc !important;
  border-color: #334155 !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important;
}

[data-theme="dark"] .lead h5,
[data-theme="dark"] .lead p,
[data-theme="dark"] .lead small {
  color: #cbd5e1 !important;
}

[data-theme="dark"] .lead:hover {
  border-color: #60a5fa !important;
  background-color: #1e293b !important;
}

[data-theme="dark"] .lead-badge {
  background-color: #334155 !important;
  color: #cbd5e1 !important;
}

/* Botones especiales */
[data-theme="dark"] .btn-light {
  background-color: #334155 !important;
  color: #ffffff !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .btn-light:hover {
  background-color: #475569 !important;
}

[data-theme="dark"] .btn-outline-secondary {
  color: #94a3b8 !important;
  border-color: #475569 !important;
}

[data-theme="dark"] .btn-outline-secondary:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}

/* Alertas */
[data-theme="dark"] .alert-warning {
  background-color: #3e2e0b !important;
  color: #f59e0b !important;
  border-color: #78350f !important;
}

[data-theme="dark"] .alert-success {
  background-color: #064e3b !important;
  color: #10b981 !important;
  border-color: #065f46 !important;
}

[data-theme="dark"] .alert-danger {
  background-color: #7f1d1d !important;
  color: #ef4444 !important;
  border-color: #991b1b !important;
}