/* Global light/dark tokens */
:root {
  color-scheme: light;
}

html.dark {
  color-scheme: dark;
}

body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

/* ============================================================
   COMPONENTES COMPARTIDOS (base light-mode)
   States, transitions, JS-generated HTML, Grid.js overrides
   ============================================================ */

/* ── Aside overlay ─────────────────────────────────────────── */
.aside-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 999;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.aside-overlay.active { opacity: 1; visibility: visible; }

/* ── Aside panel (slide desde derecha) ─────────────────────── */
.aside-panel {
  position: fixed; top: 0; right: 0; width: 500px; max-width: 100%;
  height: 100%; background: white; z-index: 1000;
  transform: translateX(100%); transition: transform 0.3s ease;
  box-shadow: -4px 0 20px rgba(0,0,0,0.15); display: flex; flex-direction: column;
}
.aside-panel.active { transform: translateX(0); }

/* ── Modal overlay ─────────────────────────────────────────── */
.modal {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.5); z-index: 1001;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal.active { opacity: 1; visibility: visible; }

/* ── Modal overlay alternativo (dashboard) ─────────────────── */
.modal-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.5); z-index: 1001;
  align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

/* ── Role badges (generados por Grid.js JS) ─────────────────── */
.badge { padding: 0.2rem 0.75rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.role-administrativo { background: #ffe4e6; color: #be123c; }
.role-supervisor     { background: #fef3c7; color: #b45309; }
.role-promotor       { background: #ccfbf1; color: #0f766e; }
.role-promotor-independiente { background: #e0e7ff; color: #4338ca; }

/* ── Error messages (JS generado) ──────────────────────────── */
.error-message { color: #dc3545; padding: 0.75rem 1rem; background: #f8d7da; border-radius: 8px; margin: 0; font-size: 0.875rem; }

/* ── Credentials display (JS generado) ─────────────────────── */
.credentials-display { display: grid; gap: 1.5rem; }
.credential-item { text-align: center; }
.credential-item strong { display: block; margin-bottom: 0.5rem; color: #495057; }
.credential-image img { max-width: 100%; height: auto; border: 2px solid #e9ecef; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }

/* ── Toast notifications ────────────────────────────────────── */
.toast-notification {
  position: fixed; top: 20px; right: 20px; padding: 14px 20px;
  border-radius: 10px; color: white; font-weight: 500; font-size: 14px;
  z-index: 9999; display: none; box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  animation: slideInToast 0.3s ease; max-width: 400px;
}
@keyframes slideInToast { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.toast-success { background: #28a745; }
.toast-error   { background: #dc3545; }
.toast-info    { background: #17a2b8; }

/* ── Sync progress (checador) ───────────────────────────────── */
.sync-progress {
  display: none; align-items: center; gap: 12px; padding: 16px;
  background: #e8f4fd; border-radius: 10px; border: 1px solid #bee5eb; margin: 16px 0;
}
.sync-progress.active { display: flex; }
.sync-progress .spinner {
  width: 24px; height: 24px; border: 3px solid #bee5eb; border-top: 3px solid #17a2b8;
  border-radius: 50%; animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Map toggle (registrorapido / promotores) ───────────────── */
.map-container { display: none; }
.map-container.active { display: block; }
.map-toggle-btn.active { background: #059669 !important; color: white !important; border-color: #059669 !important; }

/* ── Grid.js theme overrides ────────────────────────────────── */
/* Grid.js light mode header - aplicar solo fuera de dark mode */
body:not(.dark) .gridjs-th { background: #f8fafc !important; color: #0f172a !important; font-weight: 600 !important; padding: 1rem !important; border: none !important; }
.gridjs-td { padding: 1rem !important; border-bottom: 1px solid #e2e8f0 !important; color: #0f172a !important; }
.gridjs-tr:hover .gridjs-td { background: #f8fafc !important; }
.gridjs-wrapper { border: none !important; }
.gridjs-container,
.gridjs-table,
.gridjs-footer,
.gridjs-pagination {
  background: #ffffff !important;
  color: #0f172a !important;
}
.gridjs-footer {
  border-top: 1px solid #e2e8f0 !important;
}
.gridjs-pagination .gridjs-pages button,
.gridjs-pagination .gridjs-pages button:disabled,
.gridjs-pagination .gridjs-summary,
.gridjs-pagination .gridjs-pages {
  color: #334155 !important;
  background: transparent !important;
}
.gridjs-search input,
.gridjs-search .gridjs-input {
  background: #ffffff !important;
  color: #0f172a !important;
  border: 1px solid #cbd5e1 !important;
}

/* ── Estado badges ──────────────────────────────────────────── */
.estado-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 12px; border-radius: 20px; font-size: 0.8rem; font-weight: 600; color: white; white-space: nowrap;
}

/* ── Timeline dots (checador) ───────────────────────────────── */
.timeline-dots { display: flex; align-items: center; gap: 2px; }
.timeline-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid #dee2e6; background: white; }
.timeline-dot.reached { border-color: transparent; }
.timeline-line { width: 16px; height: 2px; background: #dee2e6; }
.timeline-line.reached { background: #28a745; }

/* ── Row highlight animation ────────────────────────────────── */
@keyframes highlightFade { 0% { background: #fff3cd; } 100% { background: transparent; } }
.row-cambio { animation: highlightFade 3s ease forwards; }

/* ── Marcadores de fila Grid.js (checador) ──────────────────── */
.gridjs-tr:has(.chk-activada) .gridjs-td {
  background-color: rgba(40, 167, 69, 0.08) !important;
}
.gridjs-tr:has(.chk-activada) .gridjs-td:first-child {
  border-left: 3px solid #28a745;
}
.gridjs-tr:has(.chk-cambio) .gridjs-td {
  animation: highlightFade 3s ease forwards;
}

/* ── Botón re-sincronizar ───────────────────────────────────── */
.btn-resync {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px; border: 1px solid #dee2e6;
  background: #f8f9fa; color: #495057; font-size: 0.75rem; font-weight: 600;
  cursor: pointer; transition: background 0.15s, border-color 0.15s;
}
.btn-resync:hover { background: #e9ecef; border-color: #ced4da; }
.btn-resync.syncing { opacity: 0.7; cursor: not-allowed; }

/* Floating theme toggle */
.theme-toggle-fab {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9999;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #0f172a;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.2);
}

.theme-toggle-fab:hover {
  background: #f8fafc;
}

.theme-toggle-fab i {
  width: 16px;
  height: 16px;
}

html.dark .theme-toggle-fab {
  border-color: #334155;
  background: #0f172a;
  color: #e2e8f0;
  box-shadow: 0 8px 24px rgba(2, 6, 23, 0.55);
}

html.dark .theme-toggle-fab:hover {
  background: #1e293b;
}

/* Common containers used in dashboards */
html.dark .table-container,
html.dark .content-section,
html.dark .form-card,
html.dark .filters-panel,
html.dark .filter-card,
html.dark .stat-card,
html.dark .sync-progress,
html.dark .users-stats,
html.dark .users-content,
html.dark .gridjs-container,
html.dark .gridjs-wrapper,
html.dark .selection-container {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .summary-card,
html.dark .table-scroll-wrapper,
html.dark .checador-filters,
html.dark .map-container,
html.dark .map-controls,
html.dark .map-search-container,
html.dark .coordinates-display,
html.dark .users-table,
html.dark .gridjs-table {
  background-color: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #374151 !important;
}

html.dark .table-title,
html.dark .page-title,
html.dark .selection-title,
html.dark h1,
html.dark h2,
html.dark h3,
html.dark label,
html.dark th,
html.dark td,
html.dark .card-number {
  color: #e2e8f0 !important;
}

html.dark .page-subtitle,
html.dark .selection-subtitle,
html.dark .filter-hint,
html.dark .card-label,
html.dark .search-hint,
html.dark .users-count,
html.dark .env-url,
html.dark p,
html.dark small {
  color: #94a3b8 !important;
}

html.dark input,
html.dark select,
html.dark textarea,
html.dark .filter-input,
html.dark .map-search-input {
  background-color: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html.dark input::placeholder,
html.dark textarea::placeholder {
  color: #94a3b8 !important;
}

html.dark .btn-outline,
html.dark .btn-resync,
html.dark .map-btn {
  background-color: #1f2937 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

html.dark .btn-outline:hover,
html.dark .btn-resync:hover,
html.dark .map-btn:hover {
  background-color: #334155 !important;
}

html.dark .gridjs-th,
html.dark .gridjs-head,
html.dark .gridjs-thead,
html.dark .gridjs-thead tr,
html.dark .gridjs-thead th,
html.dark tr.gridjs-tr:first-child .gridjs-th,
html.dark .gridjs-th,
html.dark thead,
html.dark thead tr,
html.dark thead th {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .gridjs-container .gridjs-table .gridjs-thead .gridjs-tr .gridjs-th {
  background: #1e293b !important;
  color: #e2e8f0 !important;
}

html.dark .gridjs-td {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .gridjs-wrapper .gridjs-thead {
  background: #1e293b !important;
}

html.dark .gridjs-container,
html.dark .gridjs-wrapper,
html.dark .gridjs-table,
html.dark .gridjs-footer,
html.dark .gridjs-pagination,
html.dark .gridjs-tbody {
  background: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .gridjs-footer,
html.dark .gridjs-pagination {
  border-top-color: #334155 !important;
}

html.dark .gridjs-pagination .gridjs-pages button,
html.dark .gridjs-pagination .gridjs-pages button:disabled,
html.dark .gridjs-pagination .gridjs-summary,
html.dark .gridjs-pagination .gridjs-pages {
  color: #cbd5e1 !important;
  background: transparent !important;
}

html.dark .gridjs-search input,
html.dark .gridjs-search .gridjs-input {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border: 1px solid #475569 !important;
}

html.dark .gridjs-tr:hover .gridjs-td,
html.dark .seguimiento-table tbody tr:hover {
  background: #1e293b !important;
}

html.dark .navigation {
  background-color: #0f172a !important;
}

html.dark .supervisor-selection {
  background: linear-gradient(135deg, #0f172a 0%, #312e81 100%) !important;
}

html.dark .toast-warning {
  color: #fef3c7 !important;
  background: #92400e !important;
}

/* ============================================================
   DARK MODE – PULIDO FINO GLOBAL
   ============================================================ */

/* ── Body gradient ─────────────────────────────────────────── */
html.dark body {
  background: #0b1120 !important;
  color: #e2e8f0 !important;
}

/* ── Tailwind utility class overrides (hardcoded sin dark: prefix) ── */
html.dark .bg-white,
html.dark [class*="bg-white\/"] {
  background-color: #0f172a !important;
}

html.dark .bg-slate-50,
html.dark .from-slate-100,
html.dark .via-white,
html.dark .to-teal-50 {
  --tw-gradient-stops: #0b1120, #0f172a, #0d1a2e;
}

html.dark .bg-slate-100 {
  background-color: #111827 !important;
}

html.dark .bg-slate-200 {
  background-color: #1e293b !important;
}

html.dark .text-slate-900 { color: #e2e8f0 !important; }
html.dark .text-slate-800 { color: #cbd5e1 !important; }
html.dark .text-slate-700 { color: #94a3b8 !important; }
html.dark .text-slate-600 { color: #7b92aa !important; }
html.dark .text-slate-500 { color: #64748b !important; }
html.dark .text-teal-700  { color: #5eead4 !important; }

/* ── Border colors ─────────────────────────────────────────── */
html.dark .border-slate-200,
html.dark .border-slate-300 {
  border-color: #334155 !important;
}

/* ── Header / Navbar ───────────────────────────────────────── */
html.dark header.rounded-2xl,
html.dark header.header,
html.dark .header {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* ── Main page wrappers ────────────────────────────────────── */
html.dark .main-content,
html.dark main {
  background-color: transparent !important;
}

/* ── Rounded white cards (Tailwind) ───────────────────────── */
html.dark .rounded-2xl, 
html.dark .rounded-xl,
html.dark .rounded-lg {
  --card-surface: #0f172a;
}

html.dark .rounded-2xl.border,
html.dark .rounded-xl.border,
html.dark .rounded-lg.border {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

/* ── Inline badge slot (estado_instalacion) ────────────────── */
html.dark .estado-badge {
  filter: brightness(0.85) saturate(0.9) !important;
  outline: 1px solid rgba(255,255,255,0.08) !important;
}

/* ── Summary / stat cards ──────────────────────────────────── */
html.dark .summary-card {
  background: #0f172a !important;
  border-color: #334155 !important;
}

html.dark .summary-card:hover {
  background: #1e293b !important;
  transform: translateY(-2px);
}

html.dark .card-icon {
  background: #1e293b !important;
}

/* ── Filters / search bars ─────────────────────────────────── */
html.dark .estado-summary {
  background: #1e293b !important;
  border-color: #334155 !important;
}

html.dark .filter-grid,
html.dark .filter-row {
  background: #111827 !important;
}

/* ── Table rows ────────────────────────────────────────────── */
html.dark table tbody tr {
  background-color: #0f172a !important;
}

html.dark table tbody tr:nth-child(even) {
  background-color: #111827 !important;
}

html.dark table tbody tr:hover {
  background-color: #1e293b !important;
}

html.dark thead th {
  background-color: #1e293b !important;
  border-bottom-color: #334155 !important;
}

/* ── CSS custom property overrides (gestionUsuarios, etc.) ─── */
html.dark {
  --surface-primary:    #0f172a;
  --surface-secondary:  #111827;
  --border-color:       #334155;
  --text-primary:       #e2e8f0;
  --text-secondary:     #94a3b8;
  --shadow-sm:          0 2px 8px rgba(0,0,0,0.4);
}

/* ── Aside panel (gestionUsuarios) ─────────────────────────── */
html.dark .aside-panel,
html.dark #userAside,
html.dark .aside-header {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}

html.dark .aside-header,
html.dark .aside-header h3 {
  color: #e2e8f0 !important;
  border-bottom-color: #334155 !important;
}

html.dark .aside-content,
html.dark .aside-field label,
html.dark .aside-field span,
html.dark .form-group label,
html.dark .form-group .form-label {
  color: #cbd5e1 !important;
}

html.dark .aside-overlay.active {
  background: rgba(0,0,0,0.6) !important;
}

/* ── Modal (gestionUsuarios) ────────────────────────────────── */
html.dark .modal-content {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.dark .modal-header {
  background-color: #111827 !important;
  border-bottom-color: #334155 !important;
}

html.dark .modal-header h3,
html.dark .modal-body * {
  color: #e2e8f0 !important;
}

/* ── Credential display (gestionUsuarios) ───────────────────── */
html.dark .credential-box,
html.dark .credential-item,
html.dark .credential-value {
  background: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

/* ── Selects / options ──────────────────────────────────────── */
html.dark select option {
  background-color: #1e293b;
  color: #e2e8f0;
}

html.dark select:focus,
html.dark input:focus,
html.dark textarea:focus {
  border-color: #5eead4 !important;
  box-shadow: 0 0 0 3px rgba(94,234,212,0.15) !important;
  outline: none !important;
}

/* ── Button variants ────────────────────────────────────────── */
html.dark .btn-primary,
html.dark .btn.btn-primary {
  background: #0f766e !important;
  border-color: #0f766e !important;
  color: #fff !important;
}

html.dark .btn-primary:hover,
html.dark .btn.btn-primary:hover {
  background: #0d9488 !important;
}

html.dark .btn-info,
html.dark .btn.btn-info {
  background: #0369a1 !important;
  border-color: #0369a1 !important;
  color: #fff !important;
}

html.dark .btn-secondary,
html.dark .btn.btn-secondary {
  background: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

html.dark .btn-secondary:hover,
html.dark .btn.btn-secondary:hover {
  background: #334155 !important;
}

html.dark .btn-danger,
html.dark .btn.btn-danger {
  background: #9f1239 !important;
  border-color: #9f1239 !important;
  color: #fff !important;
}

/* ── Tailwind inline button bg classes ─────────────────────── */
html.dark .bg-rose-50 { background-color: #3b0a1a !important; }
html.dark .text-rose-700 { color: #fca5a5 !important; }
html.dark .border-rose-200 { border-color: #7f1d1d !important; }
html.dark .bg-rose-50:hover { background-color: #4c0f22 !important; }

html.dark .bg-cyan-50 { background-color: #0c1a27 !important; }
html.dark .text-cyan-700 { color: #67e8f9 !important; }
html.dark .border-cyan-200 { border-color: #164e63 !important; }

html.dark .bg-slate-50 { background-color: #1e293b !important; }
html.dark .text-slate-700[class*="border-slate"] { color: #cbd5e1 !important; }
html.dark .border-slate-200 { border-color: #334155 !important; }

/* ── User role badge ────────────────────────────────────────── */
html.dark .inline-flex.gap-2.rounded-full.border-slate-200 {
  background-color: #1e293b !important;
  color: #cbd5e1 !important;
  border-color: #475569 !important;
}

/* ── Role color tags ────────────────────────────────────────── */
html.dark .badge-rol,
html.dark .role-badge,
html.dark [class*="role-"] {
  filter: brightness(0.75) saturate(0.85) !important;
  outline: 1px solid rgba(255,255,255,0.1) !important;
}

/* ── Alert / notice boxes ───────────────────────────────────── */
html.dark .alert,
html.dark .alert-info,
html.dark .alert-warning {
  background-color: #1e293b !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}

/* ── Log / debug panel ──────────────────────────────────────── */
html.dark #logSection,
html.dark #logContent,
html.dark pre,
html.dark code {
  background-color: #111827 !important;
  color: #a5f3fc !important;
  border-color: #334155 !important;
}

/* ── Scrollbars ─────────────────────────────────────────────── */
html.dark *::-webkit-scrollbar {
  width: 7px;
  height: 7px;
}

html.dark *::-webkit-scrollbar-track {
  background: #0f172a;
}

html.dark *::-webkit-scrollbar-thumb {
  background: #334155;
  border-radius: 4px;
}

html.dark *::-webkit-scrollbar-thumb:hover {
  background: #475569;
}

/* ── Grid.js cells (extra coverage) ────────────────────────── */
html.dark .gridjs-tr td.gridjs-td {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}

html.dark .gridjs-pagination {
  background-color: #0f172a !important;
  border-top-color: #334155 !important;
  color: #94a3b8 !important;
}

html.dark .gridjs-pagination .gridjs-pages button {
  background-color: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

html.dark .gridjs-pagination .gridjs-pages button.gridjs-currentPage {
  background-color: #0f766e !important;
  color: #fff !important;
}

html.dark .gridjs-search-input {
  background-color: #111827 !important;
  color: #e2e8f0 !important;
  border-color: #475569 !important;
}

/* ── Lucide icon color normalization ────────────────────────── */
html.dark i[data-lucide].text-slate-500 {
  color: #64748b !important;
}

html.dark .h-4.w-4 {
  color: inherit;
}