/* ======================================================
   MarTech Portal — UI Components CSS
   ====================================================== */

/* Focus Rings — NORMALIZADO */
/* Todos los inputs y botones usan ring verde brand, sin offset */
input:focus,
textarea:focus,
select:focus,
button:not(.no-focus):focus {
  outline: none;
  box-shadow: 0 0 0 2px #31971D;
}

/* Clase utility para override */
.focus-ring {
  outline: none !important;
  box-shadow: 0 0 0 2px #31971D !important;
}

/* Form Utilities — Clases estándar */
/* Label estándar */
.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
  margin-bottom: 0.375rem; /* mb-1.5 */
}

/* Input estándar */
.input-standard {
  width: 100%;
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 150ms ease-in-out;
}
.input-standard:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 2px #31971D;
}

/* Helper text */
.form-helper-text {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.25rem;
  display: block;
}

/* Error state */
.input-error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 2px rgba(220, 38, 38, 0.1) !important;
}
.form-error-text {
  font-size: 0.75rem;
  color: #dc2626;
  margin-top: 0.25rem;
  display: block;
}

/* Wrapper para fieldsets */
.form-group {
  margin-bottom: 1.25rem;
}
.form-group:last-child {
  margin-bottom: 0;
}

/* Button System — Variantes */
/* Primary: Verde brand */
.btn-primary {
  background-color: #31971D;
  color: white;
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.btn-primary:hover:not(:disabled) {
  filter: brightness(0.9);
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary[disabled],
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Secondary: Outline gris */
.btn-secondary {
  border: 1px solid #cbd5e1;
  color: #374151;
  padding: 0.625rem 1.25rem;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  background: white;
  cursor: pointer;
  transition: all 150ms ease-in-out;
}
.btn-secondary:hover:not(:disabled) {
  background-color: #f1f5f9;
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Input Padding — Estandarizado */
/* Todos los inputs, textareas y selects usan padding uniforme: px-4 py-2.5 */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
textarea,
select {
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  border: 1px solid #cbd5e1;
  border-radius: 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  transition: all 150ms ease-in-out;
}

/* Focus state estandarizado */
input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #cbd5e1;
  box-shadow: 0 0 0 2px #31971D;
}

/* Disabled state */
input:disabled,
textarea:disabled,
select:disabled {
  background-color: #f1f5f9;
  color: #94a3b8;
  cursor: not-allowed;
}

/* Typography — Jerarquía mejorada */
/* Section titles: más grandes y prominentes */
.section-title {
  font-size: 1.05rem; /* text-xl */
  font-weight: 600; /* font-semibold */
  color: #1e293b;
  margin-bottom: 1rem;
}

/* Subsection/group titles */
.subsection-title {
  font-size: 0.875rem; /* text-sm */
  font-weight: 600;
  color: #475569;
  margin-bottom: 0.75rem;
}

/* Body text estándar */
.body-text {
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}

/* Small text para descripciones */
.text-small {
  font-size: 0.75rem;
  color: #64748b;
}

/* Radio & Checkbox — Styling mejorado */
input[type="radio"],
input[type="checkbox"] {
  width: 1rem; /* w-4 */
  height: 1rem; /* h-4 */
  border: 1px solid #cbd5e1;
  border-radius: 0.25rem;
  cursor: pointer;
  accent-color: #31971D;
  transition: all 150ms ease-in-out;
}

input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked,
input[type="checkbox"]:checked {
  background-color: #31971D;
  border-color: #31971D;
}

input[type="radio"]:focus,
input[type="checkbox"]:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(49, 151, 29, 0.1);
  border-color: #31971D;
}

input[type="radio"]:disabled,
input[type="checkbox"]:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Wrapper para radio/checkbox con label */
.radio-wrapper,
.checkbox-wrapper {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 0.5rem;
  transition: background-color 150ms ease-in-out;
}

.radio-wrapper:hover,
.checkbox-wrapper:hover {
  background-color: #f1f5f9;
}

/* Kanban Board Styles */
/* Container con scroll horizontal */
.kanban-container {
  display: flex;
  gap: 1rem;
  overflow-x: auto;
  padding-bottom: 1.5rem;
  padding-left: 0.125rem;
  padding-right: 0.125rem;
}

/* Columna Kanban */
.kanban-column {
  flex-shrink: 0;
  min-width: 20rem; /* 320px */
  background-color: #f8fafc;
  border: 1px solid #cbd5e1;
  border-radius: 0.5rem;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}

/* Header de columna */
.kanban-column-header {
  position: sticky;
  top: 0;
  background-color: #f8fafc;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #cbd5e1;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: 600;
  font-size: 0.875rem;
  color: #475569;
}

.kanban-column-header h3 {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 600;
  color: #475569;
}

/* Count badge en header */
.kanban-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  margin-left: 0.5rem;
  background-color: #cbd5e1;
  font-size: 0.75rem;
  font-weight: 500;
  color: #475569;
  border-radius: 9999px;
}

/* Cards container con scroll vertical */
.kanban-cards {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  space-y: 0.5rem;
}

/* Card individual */
.kanban-card {
  display: block;
  background-color: #ffffff;
  border-radius: 0.375rem;
  border-left: 4px solid;
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  padding: 0.75rem;
  margin-bottom: 0.5rem;
  cursor: pointer;
  transition: box-shadow 150ms ease-in-out, transform 150ms ease-in-out;
  text-decoration: none;
  color: inherit;
}

.kanban-card:hover {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  transform: translateY(-2px);
}

.kanban-card:active {
  transform: translateY(0);
}

/* Card ID y Priority */
.kanban-card-header {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}

.kanban-card-id {
  font-size: 0.75rem;
  font-weight: 600;
  color: #64748b;
}

.kanban-card-priority {
  display: inline-block;
  padding: 0.125rem 0.5rem;
  background-color: #f1f5f9;
  font-size: 0.75rem;
  font-weight: 500;
  color: #64748b;
  border-radius: 0.25rem;
  white-space: nowrap;
}

/* Card Summary */
.kanban-card-summary {
  font-size: 0.875rem;
  font-weight: 500;
  color: #1e293b;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  line-height: 1.3;
}

.kanban-card:hover .kanban-card-summary {
  color: #15803d;
}

/* Card Project */
.kanban-card-project {
  font-size: 0.75rem;
  color: #64748b;
  margin-bottom: 0.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

/* Card Reporter */
.kanban-card-reporter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  color: #64748b;
}

.kanban-card-reporter-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.25rem;
  height: 1.25rem;
  border-radius: 9999px;
  background-color: #e2e8f0;
  color: #64748b;
  font-weight: 500;
  font-size: 0.65rem;
  flex-shrink: 0;
}

/* Empty state en columna */
.kanban-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8rem;
  color: #94a3b8;
  font-size: 0.75rem;
  text-align: center;
}

/* Scrollbar styling para kanban-cards */
.kanban-cards::-webkit-scrollbar {
  width: 4px;
}

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

.kanban-cards::-webkit-scrollbar-thumb {
  background-color: #cbd5e1;
  border-radius: 2px;
}

.kanban-cards::-webkit-scrollbar-thumb:hover {
  background-color: #94a3b8;
}

/* ======================================================
   DARK MODE — SISTEMA COMPLETO
   ====================================================== */

/* Variables CSS — Light Mode (Default) */
:root {
  --color-bg-primary: #ffffff;
  --color-bg-secondary: #f8fafc;
  --color-bg-tertiary: #f1f5f9;
  --color-text-primary: #1e293b;
  --color-text-secondary: #64748b;
  --color-text-muted: #94a3b8;
  --color-border: #e2e8f0;
  --color-border-light: #cbd5e1;
  --color-accent: #31971D;
  --color-accent-dark: #2a7a17;
  --color-accent-light: #4ade80;

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);

  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Variables CSS — Dark Mode */
html.dark {
  --color-bg-primary: #0f1419;
  --color-bg-secondary: #1a1f2e;
  --color-bg-tertiary: #252d3d;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-border: #404854;
  --color-border-light: #52606b;
  --color-accent: #10b981;
  --color-accent-dark: #059669;
  --color-accent-light: #6ee7b7;

  --shadow-sm: 0 1px 2px 0 rgba(0,0,0,0.2);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.3);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
}

/* ========== NAVBAR (Dark Mode) ========== */
html.dark header {
  background-color: #1a1f2e !important;
  border-bottom-color: #404854 !important;
}

html.dark header button,
html.dark header a {
  color: #cbd5e1 !important;
}

html.dark header button:hover,
html.dark header a:hover {
  background-color: rgba(255,255,255,0.07) !important;
  color: #f1f5f9 !important;
}

html.dark .breadcrumbs {
  color: #cbd5e1 !important;
}

html.dark .breadcrumbs a {
  color: #cbd5e1 !important;
}

html.dark .breadcrumbs a:hover {
  color: #f1f5f9 !important;
}

html.dark .breadcrumb-separator {
  color: #404854 !important;
}

/* Theme toggle button */
html.dark .theme-toggle {
  background-color: transparent !important;
  color: #cbd5e1 !important;
}

html.dark .theme-toggle:hover {
  background-color: #252d3d !important;
}

/* ========== SIDEBAR (Dark Mode) ========== */
html.dark aside,
html.dark [role="navigation"] {
  background-color: #0f1419 !important;
}

html.dark .sidebar-logo {
  border-bottom-color: #404854 !important;
}

html.dark .nav-link,
html.dark [class*="nav-"] {
  color: #cbd5e1 !important;
}

html.dark .nav-link:hover {
  background-color: #252d3d !important;
  color: #f1f5f9 !important;
}

html.dark .nav-link.active,
html.dark [class*="nav-"].active {
  background-color: #164e63 !important;
  color: #10b981 !important;
  font-weight: 600 !important;
}

html.dark .sidebar-section {
  color: #64748b !important;
}

/* ========== PANELS / CARDS (Dark Mode) ========== */
html.dark .bg-white,
html.dark [class*="panel"],
html.dark [class*="card"],
html.dark [class*="box"] {
  background-color: #1a1f2e !important;
}

html.dark [class*="rounded"] {
  --tw-border-opacity: 1;
  border-color: rgba(64, 72, 84, var(--tw-border-opacity)) !important;
}

html.dark .border,
html.dark [class*="border"] {
  border-color: #404854 !important;
}

html.dark .border-slate-200,
html.dark .border-slate-100,
html.dark .border-gray-200 {
  border-color: #404854 !important;
}

/* ========== TABLA (Dark Mode) ========== */
html.dark table {
  background-color: #1a1f2e !important;
}

html.dark thead {
  background-color: #252d3d !important;
  border-bottom-color: #404854 !important;
}

html.dark thead th {
  color: #f1f5f9 !important;
  border-color: #404854 !important;
}

html.dark tbody {
  border-bottom-color: #404854 !important;
}

html.dark tbody tr {
  border-color: #252d3d !important;
}

html.dark tbody tr:nth-child(even) {
  background-color: rgba(37, 45, 61, 0.5) !important;
}

html.dark tbody tr:hover {
  background-color: #252d3d !important;
}

html.dark tbody td {
  color: #f1f5f9 !important;
  border-color: #252d3d !important;
}

html.dark tbody td a {
  color: #cbd5e1 !important;
}

html.dark tbody td a:hover {
  color: #f1f5f9 !important;
  text-decoration: underline !important;
}

/* Ticket ID y metadata */
html.dark [class*="font-mono"] {
  color: #94a3b8 !important;
}

/* Closed tickets (status 90) */
html.dark tr.bg-gray-100 {
  background-color: #323d52 !important;
}

html.dark tr.bg-gray-100 td {
  color: #64748b !important;
}

/* ========== STATUS BADGES (Dark Mode) ========== */
/* Status 10 - Nuevo (Blue) */
html.dark .badge-status-10,
html.dark [data-status="10"] .badge {
  background-color: #1e3a8a !important;
  color: #93c5fd !important;
  border-color: #3b82f6 !important;
}

/* Status 20 - Pendiente (Amber) */
html.dark .badge-status-20,
html.dark [data-status="20"] .badge {
  background-color: #7c2d12 !important;
  color: #fed7aa !important;
  border-color: #f59e0b !important;
}

/* Status 30 - En espera (Cyan) */
html.dark .badge-status-30,
html.dark [data-status="30"] .badge {
  background-color: #164e63 !important;
  color: #67e8f9 !important;
  border-color: #06b6d4 !important;
}

/* Status 40 - Desarrollo (Purple) */
html.dark .badge-status-40,
html.dark [data-status="40"] .badge {
  background-color: #312e81 !important;
  color: #d8b4fe !important;
  border-color: #a78bfa !important;
}

/* Status 50 - Testing (Green) */
html.dark .badge-status-50,
html.dark [data-status="50"] .badge {
  background-color: #065f46 !important;
  color: #86efac !important;
  border-color: #10b981 !important;
}

/* Status 80 - Resuelto (Cyan) */
html.dark .badge-status-80,
html.dark [data-status="80"] .badge {
  background-color: #164e63 !important;
  color: #67e8f9 !important;
  border-color: #06b6d4 !important;
}

/* Status 90 - Cerrado (Gray) */
html.dark .badge-status-90,
html.dark [data-status="90"] .badge {
  background-color: #374151 !important;
  color: #d1d5db !important;
  border-color: #9ca3af !important;
}

/* ========== PRIORITY COLORS (Dark Mode) ========== */
html.dark .priority-60,
html.dark [data-priority="60"] {
  color: #fca5a5 !important;
}

html.dark .priority-50,
html.dark [data-priority="50"] {
  color: #fdba74 !important;
}

html.dark .priority-40,
html.dark [data-priority="40"] {
  color: #fbbf24 !important;
}

html.dark .priority-30,
html.dark [data-priority="30"] {
  color: #93c5fd !important;
}

html.dark .priority-20,
html.dark [data-priority="20"] {
  color: #60a5fa !important;
}

html.dark .priority-10,
html.dark [data-priority="10"] {
  color: #64748b !important;
}

/* Priority dots */
html.dark .priority-dot-60 { background-color: #ef4444 !important; }
html.dark .priority-dot-50 { background-color: #f97316 !important; }
html.dark .priority-dot-40 { background-color: #f59e0b !important; }
html.dark .priority-dot-30 { background-color: #3b82f6 !important; }
html.dark .priority-dot-20 { background-color: #06b6d4 !important; }
html.dark .priority-dot-10 { background-color: #64748b !important; }

/* ========== KANBAN BOARD (Dark Mode) ========== */
html.dark .kanban-column {
  background-color: #0f1419 !important;
  border-color: #404854 !important;
}

html.dark .kanban-column-header {
  background-color: #1a1f2e !important;
  border-bottom-color: #404854 !important;
  color: #f1f5f9 !important;
}

html.dark .kanban-column-header h3 {
  color: #f1f5f9 !important;
}

html.dark .kanban-count-badge {
  background-color: #252d3d !important;
  color: #cbd5e1 !important;
}

html.dark .kanban-card {
  background-color: #1a1f2e !important;
  color: #f1f5f9 !important;
  box-shadow: 0 4px 6px -1px rgba(0,0,0,0.3) !important;
}

html.dark .kanban-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0,0,0,0.4) !important;
}

html.dark .kanban-card-id,
html.dark .kanban-card-priority,
html.dark .kanban-card-project,
html.dark .kanban-card-reporter {
  color: #94a3b8 !important;
}

html.dark .kanban-card-summary {
  color: #f1f5f9 !important;
}

html.dark .kanban-card-summary:hover {
  color: #10b981 !important;
}

html.dark .kanban-card-reporter-avatar {
  background-color: #252d3d !important;
  color: #cbd5e1 !important;
}

html.dark .kanban-empty {
  color: #64748b !important;
}

/* ========== FORMULARIOS (Dark Mode) ========== */
html.dark .form-label {
  color: #cbd5e1 !important;
}

html.dark .input-standard {
  background-color: #252d3d !important;
  border-color: #404854 !important;
  color: #f1f5f9 !important;
}

html.dark .input-standard:focus {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
  outline: none !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
  border-color: #10b981 !important;
}

html.dark .form-helper-text {
  color: #94a3b8 !important;
}

html.dark .form-error-text {
  color: #ef4444 !important;
}

html.dark .input-error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}

html.dark textarea,
html.dark select,
html.dark input[type="text"],
html.dark input[type="email"],
html.dark input[type="password"],
html.dark input[type="number"],
html.dark input[type="date"],
html.dark input[type="time"] {
  background-color: #252d3d !important;
  border-color: #404854 !important;
  color: #f1f5f9 !important;
}

html.dark textarea::placeholder,
html.dark input::placeholder {
  color: #64748b !important;
}

/* Quill Editor Dark Mode */
html.dark .ql-container {
  background-color: #252d3d !important;
  border-color: #404854 !important;
  color: #f1f5f9 !important;
}

html.dark .ql-editor {
  background-color: #252d3d !important;
  color: #f1f5f9 !important;
}

html.dark .ql-toolbar {
  background-color: #1a1f2e !important;
  border-color: #404854 !important;
}

html.dark .ql-toolbar button,
html.dark .ql-toolbar button:hover {
  color: #cbd5e1 !important;
}

html.dark .ql-toolbar button.ql-active {
  color: #10b981 !important;
}

html.dark .ql-editor a {
  color: #60a5fa !important;
}

html.dark .ql-editor.ql-blank::before {
  color: #64748b !important;
}

/* Checkboxes y Radios */
html.dark input[type="checkbox"],
html.dark input[type="radio"] {
  border-color: #404854 !important;
  background-color: #252d3d !important;
  accent-color: #10b981 !important;
}

html.dark input[type="checkbox"]:checked,
html.dark input[type="radio"]:checked {
  background-color: #10b981 !important;
  border-color: #10b981 !important;
}

/* ========== BOTONES (Dark Mode) ========== */
html.dark .btn-primary {
  background-color: #10b981 !important;
  color: #ffffff !important;
}

html.dark .btn-primary:hover:not(:disabled) {
  background-color: #059669 !important;
}

html.dark .btn-primary:disabled,
html.dark .btn-primary[disabled] {
  background-color: #064e3b !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

html.dark button,
html.dark [role="button"] {
  color: #f1f5f9 !important;
}

html.dark button:hover,
html.dark [role="button"]:hover {
  background-color: rgba(255,255,255,0.07) !important;
}

html.dark button:disabled,
html.dark [role="button"]:disabled {
  color: #64748b !important;
  opacity: 0.5 !important;
}

html.dark button[style*="background:#fff"],
html.dark button[style*="background: white"],
html.dark a[style*="background:#fff"],
html.dark a[style*="background: white"] {
  background-color: #252d3d !important;
  color: #f1f5f9 !important;
  border-color: #404854 !important;
}

/* ========== FLASH MESSAGES (Dark Mode) ========== */
html.dark .alert-success,
html.dark .flash-success {
  background-color: #064e3b !important;
  border-color: #10b981 !important;
  color: #86efac !important;
}

html.dark .alert-error,
html.dark .flash-error {
  background-color: #7f1d1d !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
}

html.dark .alert-warning,
html.dark .flash-warning {
  background-color: #78350f !important;
  border-color: #f59e0b !important;
  color: #fbbf24 !important;
}

html.dark .alert-info,
html.dark .flash-info {
  background-color: #1e3a8a !important;
  border-color: #3b82f6 !important;
  color: #93c5fd !important;
}

html.dark .bg-green-50 { background-color: #064e3b !important; }
html.dark .bg-red-50 { background-color: #7f1d1d !important; }
html.dark .bg-amber-50 { background-color: #78350f !important; }
html.dark .bg-blue-50 { background-color: #1e3a8a !important; }

html.dark .border-green-200 { border-color: #10b981 !important; }
html.dark .border-red-200 { border-color: #ef4444 !important; }
html.dark .border-amber-200 { border-color: #f59e0b !important; }
html.dark .border-blue-200 { border-color: #3b82f6 !important; }

html.dark .text-green-800 { color: #dcfce7 !important; }
html.dark .text-green-600 { color: #86efac !important; }
html.dark .text-red-800 { color: #fecaca !important; }
html.dark .text-red-600 { color: #fca5a5 !important; }
html.dark .text-amber-800 { color: #fef3c7 !important; }
html.dark .text-amber-600 { color: #fcd34d !important; }
html.dark .text-blue-800 { color: #dbeafe !important; }
html.dark .text-blue-600 { color: #93c5fd !important; }

/* ========== MODALES (Dark Mode) ========== */
html.dark [role="dialog"],
html.dark .modal {
  background-color: #1a1f2e !important;
  border-color: #404854 !important;
}

html.dark .modal-header {
  border-bottom-color: #404854 !important;
  color: #f1f5f9 !important;
}

html.dark .modal-body {
  color: #cbd5e1 !important;
}

html.dark .modal-footer {
  background-color: #252d3d !important;
  border-top-color: #404854 !important;
}

/* ========== GRÁFICOS / CHARTS (Dark Mode) ========== */
html.dark [class*="chart"],
html.dark svg[class*="chart"] {
  background-color: transparent !important;
}

html.dark canvas {
  background-color: #252d3d !important;
}

/* ========== TEXTO GENERAL (Dark Mode) ========== */
html.dark body {
  background-color: #0f1419 !important;
  color: #f1f5f9 !important;
}

html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
  color: #f1f5f9 !important;
}

html.dark p {
  color: #cbd5e1 !important;
}

html.dark a {
  color: #60a5fa !important;
}

html.dark a:hover {
  color: #93c5fd !important;
}

html.dark small,
html.dark [class*="text-xs"],
html.dark [class*="text-sm"] {
  color: #d0d5db !important;
}

html.dark .text-muted,
html.dark [class*="muted"] {
  color: #64748b !important;
}

/* ========== HOVER & FOCUS STATES (Dark Mode) ========== */
html.dark .hover\:bg-slate-50:hover,
html.dark .hover\:bg-gray-50:hover {
  background-color: #252d3d !important;
}

html.dark .hover\:bg-slate-100:hover,
html.dark .hover\:bg-gray-100:hover {
  background-color: #323d52 !important;
}

html.dark .hover\:text-green-700:hover,
html.dark .group:hover .group-hover\:text-green-700 {
  color: #10b981 !important;
}

/* Focus ring dark mode */
html.dark input:focus,
html.dark button:focus,
html.dark select:focus,
html.dark textarea:focus {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

html.dark .focus-ring {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.3) !important;
}

/* ========== SCROLLBARS (Dark Mode) ========== */
html.dark ::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

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

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

html.dark ::-webkit-scrollbar-thumb:hover {
  background: #52606b;
}

/* ========== ANIMACIONES (Dark Mode) ========== */
html.dark * {
  transition-property: all;
  transition-duration: var(--transition-fast);
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

html.dark button,
html.dark a,
html.dark input,
html.dark select,
html.dark textarea {
  transition-property: background-color, border-color, box-shadow, color;
  transition-duration: var(--transition-normal);
}

/* ========== IMPROVED DISABLED STATES (Dark Mode) ========== */
html.dark input:disabled,
html.dark textarea:disabled,
html.dark select:disabled {
  background-color: #252d3d !important;
  color: #64748b !important;
  border-color: #404854 !important;
  cursor: not-allowed !important;
  opacity: 0.7 !important;
}

html.dark .btn-secondary:disabled,
html.dark .btn-secondary[disabled] {
  background-color: #252d3d !important;
  border-color: #404854 !important;
  color: #64748b !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
}

/* ========== IMPROVED FOCUS STATES (Dark Mode) ========== */
html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #31971D !important;
  box-shadow: 0 0 0 3px rgba(49, 151, 29, 0.2) !important;
  outline: none !important;
}

/* ========== SMOOTH TRANSITIONS ========== */
input,
textarea,
select,
button,
[role="button"],
a {
  transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ========== IMPROVED HOVER STATES ========== */
html.dark .btn-secondary:hover:not(:disabled) {
  background-color: #252d3d !important;
  border-color: #31971D !important;
}

html.dark input:hover:not(:disabled),
html.dark textarea:hover:not(:disabled),
html.dark select:hover:not(:disabled) {
  border-color: #31971D !important;
}