/* ==========================================================================
   IACR 360 - CONFIGURACIÓN CENTRAL DE TEMAS (LIGHT & DARK MODE)
   ==========================================================================
   Edita este archivo para modificar fácilmente la paleta de colores global 
   del aplicativo en Modo Claro y Modo Oscuro.
   ========================================================================== */

:root {
  /* ---------------- MODO CLARO (LIGHT MODE) ---------------- */
  --color-background: #F8F9FA;         /* Fondo principal */
  --color-sidebar: linear-gradient(180deg, #222222 0%, #1e1e1e 100%); /* Sidebar: Gradient #222222 to #1e1e1e */
  --color-surface: #FFFFFF;            /* Tarjetas (Cards) */
  --color-card-hover: #F9FAFB;         /* Cards hover */
  --color-border: #E5E7EB;             /* Bordes */
  --color-divider: #E5E7EB;            /* Divisores */
  --color-header: #FFFFFF;             /* Barra superior */

  --color-text-main: #1F2937;          /* Texto principal */
  --color-text-muted: #6B7280;         /* Texto secundario */
  --color-text-disabled: #9CA3AF;      /* Texto deshabilitado */

  --color-primary: #f66112;            /* Primario (Naranja #f66112) */
  --color-primary-hover: #ff7529;      /* Hover botones */
  --color-secondary-btn: #FFF2EB;      /* Botón secundario */

  --color-icon-active: #f66112;        /* Íconos activos */
  --color-icon-inactive: #6B7280;      /* Íconos inactivos */
  --color-progress: #f66112;           /* Indicador de progreso */
}

/* ---------------- MODO OSCURO (DARK MODE) ---------------- */
html.dark {
  --color-background: #272121;         /* Fondo principal: Gris muy oscuro */
  --color-sidebar: linear-gradient(180deg, #222222 0%, #1e1e1e 100%); /* Sidebar: Gradient #222222 to #1e1e1e */
  --color-surface: #2F2C2C;            /* Tarjetas (Cards): Gris ligeramente más claro */
  --color-card-hover: #363333;         /* Cards hover: Gris medio */
  --color-border: #3A3737;             /* Bordes: Gris suave */
  --color-divider: #3A3737;            /* Divisores: Gris */
  --color-header: #272121;             /* Barra superior: Igual al fondo principal */

  --color-text-main: #F5F2F1;          /* Texto principal: Blanco cálido */
  --color-text-muted: #C8C3C2;         /* Texto secundario: Gris claro */
  --color-text-disabled: #8F8887;      /* Texto deshabilitado: Gris */

  --color-primary: #f66112;            /* Color primario: Naranja #f66112 */
  --color-primary-hover: #ff7529;      /* Hover botones */
  --color-secondary-btn: #363333;      /* Botón secundario: Fondo #363333 */

  --color-icon-active: #f66112;        /* Íconos activos: #f66112 */
  --color-icon-inactive: #B8B2B1;      /* Íconos inactivos: #B8B2B1 */
  --color-progress: #f66112;           /* Indicador de progreso: #f66112 */
}

/* ---------------- APLICACIÓN GLOBAL EN BODY Y HTML ---------------- */
html, body {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

html.dark, html.dark body {
  background-color: var(--color-background);
  color: var(--color-text-main);
}

/* ---------------- OVERRIDES DE FORMULARIOS Y TARJETAS PARA MODO OSCURO ---------------- */

/* 1. Mapeo universal de Tarjetas, Paneles, Modales y Contenedores (#2F2C2C) */
html.dark body .dark\:bg-\[\#1a1c22\],
html.dark body .dark\:bg-\[\#1e1f2e\],
html.dark body .dark\:bg-\[\#2d2e40\],
html.dark body .dark\:bg-\[\#15161d\],
html.dark body .dark\:bg-\[\#181920\],
html.dark body .dark\:bg-\[\#1c0f08\],
html.dark body .dark\:bg-\[\#281308\],
html.dark body .dark\:bg-\[\#1f202b\],
html.dark body .dark\:bg-slate-800,
html.dark body .dark\:bg-slate-900,
html.dark body .dark\:bg-slate-950,
html.dark body .dark\:bg-gray-800,
html.dark body .dark\:bg-gray-900,
html.dark body [class*="dark:bg-[#1"],
html.dark body [class*="dark:bg-[#2d"],
html.dark body [class*="dark:bg-[#2e"],
html.dark body [class*="dark:bg-[#1f"],
html.dark body [class*="dark:bg-gray-700"],
html.dark body [class*="dark:bg-gray-800"],
html.dark body [class*="dark:bg-gray-900"],
html.dark body [class*="dark:bg-slate-800"],
html.dark body [class*="dark:bg-slate-900"],
html.dark body [class*="dark:bg-slate-950"] {
  background-color: var(--color-surface) !important;  /* #2F2C2C */
  border-color: var(--color-border) !important;       /* #3A3737 */
  color: var(--color-text-main) !important;           /* #F5F2F1 */
}

/* 2. MÁXIMA PRIORIDAD: Entradas de Formulario (Selects, Inputs, Textareas) (#212020) */
html.dark body select,
html.dark body select option,
html.dark body input,
html.dark body textarea,
html.dark body select[class*="dark:bg-"],
html.dark body input[class*="dark:bg-"],
html.dark body textarea[class*="dark:bg-"],
html.dark body select[class*="bg-"],
html.dark body input[class*="bg-"],
html.dark body textarea[class*="bg-"] {
  background-color: #212020 !important;
  color: var(--color-text-main) !important;           /* #F5F2F1 */
  border-color: var(--color-border) !important;       /* #3A3737 */
}

html.dark body select option {
  background-color: #212020 !important;
  color: var(--color-text-main) !important;
}

/* Placeholders */
html.dark body input::placeholder,
html.dark body textarea::placeholder {
  color: var(--color-text-disabled) !important;      /* #8F8887 */
}

/* Fondo de íconos laterales dentro de inputs */
html.dark body div[class*="bg-gray-50"][class*="dark:bg-gray-800"],
html.dark body div[class*="bg-gray-50"][class*="dark:bg-[#1a1c22]"],
html.dark body div[class*="bg-gray-50"][class*="dark:bg-[#212020]"] {
  background-color: #262424 !important;
  border-color: var(--color-border) !important;
}

/* Envoltorios de inputs semi-transparentes */
html.dark body [class*="dark:bg-[#1a1c22]/50"],
html.dark body [class*="dark:bg-[#1a1c22]/40"],
html.dark body [class*="dark:bg-[#1a1c22]/30"] {
  background-color: #212020 !important;
  border-color: var(--color-border) !important;
}

/* Bordes e hilos divisores globales */
html.dark body [class*="border-gray-100"],
html.dark body [class*="border-gray-200"],
html.dark body [class*="border-gray-300"],
html.dark body [class*="border-gray-600"],
html.dark body [class*="border-gray-700"],
html.dark body [class*="border-gray-800"],
html.dark body [class*="border-slate-700"],
html.dark body [class*="border-slate-800"] {
  border-color: var(--color-border) !important;       /* #3A3737 */
}

/* Omitir fondo e importantes para campos transparentes */
html.dark body input.bg-transparent-important,
html.dark body textarea.bg-transparent-important {
  background-color: transparent !important;
  border-color: transparent !important;
}

/* Fix native date/time control text and popups in dark mode */
html.dark input[type="date"],
html.dark input[type="datetime-local"],
html.dark input[type="time"] {
  color-scheme: dark;
}