/**
 * Temas CSS para Sistema CEPAS
 * 
 * Contiene las configuraciones de temas light-theme y dark-theme
 * con variables CSS personalizadas para DaisyUI v5
 * 
 * @category   Estilos
 * @package    Cepas
 */

/* ===== TEMA CLARO (light-theme) ===== */
[data-theme="light-theme"] {
  color-scheme: light;
  
  /* Colores base */
  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(93% 0 0);
  --color-base-300: oklch(86% 0 0);
  --color-base-content: oklch(27.807% 0.029 256.847);
  
  /* Colores primarios - Verde Subway oficial */
  --color-primary: #008938;
  --color-primary-content: oklch(100% 0 0);
  
  /* Colores secundarios */
  --color-secondary: oklch(37% 0.044 257.287);
  --color-secondary-content: oklch(100% 0 0);
  
  /* Colores de acento - Amarillo Subway oficial */
  --color-accent: #F2B700;
  --color-accent-content: oklch(20% 0.05 91.936);
  
  /* Colores neutrales */
  --color-neutral: oklch(27.807% 0.029 256.847);
  --color-neutral-content: oklch(100% 0 0);
  
  /* Colores informativos */
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(0% 0 0);
  
  /* Colores de éxito */
  --color-success: oklch(72% 0.219 149.579);
  --color-success-content: oklch(0% 0 0);
  
  /* Colores de advertencia */
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(0% 0 0);
  
  /* Colores de error */
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(0% 0 0);
  
  /* Configuración de bordes y radios */
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  
  /* Configuración de tamaños */
  --size-selector: 0.28125rem;
  --size-field: 0.28125rem;
  
  /* Configuración de bordes */
  --border: 1.5px;
  
  /* Efectos */
  --depth: 1;
  --noise: 0;
}

/* ===== TEMA OSCURO (dark-theme) ===== */
[data-theme="dark-theme"] {
  color-scheme: dark;
  
  /* Colores base - Versión oscura congruente */
  --color-base-100: oklch(20.768% 0.039 265.754);
  --color-base-200: oklch(19.314% 0.037 265.754);
  --color-base-300: oklch(17.86% 0.034 265.754);
  --color-base-content: oklch(92% 0.013 255.508);
  
  /* Colores primarios - Verde Subway oficial (mismo que tema claro) */
  --color-primary: #008938;
  --color-primary-content: oklch(96% 0.01 256.847);
  
  /* Colores secundarios - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-secondary: oklch(37% 0.044 257.287);
  --color-secondary-content: oklch(96% 0.01 256.847);
  
  /* Colores de acento - Amarillo Subway oficial (mismo que tema claro) */
  --color-accent: #F2B700;
  --color-accent-content: oklch(20% 0.05 91.936);
  
  /* Colores neutrales - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-neutral: oklch(27.807% 0.029 256.847);
  --color-neutral-content: oklch(96% 0.01 256.847);
  
  /* Colores informativos - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-info: oklch(72.06% 0.191 231.6);
  --color-info-content: oklch(96% 0.01 256.847);
  
  /* Colores de éxito - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-success: oklch(72% 0.219 149.579);
  --color-success-content: oklch(96% 0.01 256.847);
  
  /* Colores de advertencia - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-warning: oklch(84.71% 0.199 83.87);
  --color-warning-content: oklch(96% 0.01 256.847);
  
  /* Colores de error - EXACTAMENTE LOS MISMOS que el tema claro */
  --color-error: oklch(71.76% 0.221 22.18);
  --color-error-content: oklch(96% 0.01 256.847);
  
  /* Configuración de bordes y radios - Mantiene la misma */
  --radius-selector: 2rem;
  --radius-field: 0.5rem;
  --radius-box: 1rem;
  
  /* Configuración de tamaños - Mantiene la misma */
  --size-selector: 0.28125rem;
  --size-field: 0.28125rem;
  
  /* Configuración de bordes - Mantiene la misma */
  --border: 1.5px;
  
  /* Efectos - Mantiene la misma */
  --depth: 1;
  --noise: 0;
}

/* ===== ESTILOS ESPECÍFICOS PARA BORDES Y ELEMENTOS ===== */

/* Forzar bordes negros permanentes para las tarjetas de estadísticas */
.card.border-2.border-base-content {
  border-color: var(--color-base-content) !important;
}

.card.border-2.border-base-content:hover {
  border-color: var(--color-base-content) !important;
}

/* Forzar borde inferior negro para el botón CEPAS */
.bg-transparent.border-b-2.border-base-content {
  border-bottom-color: var(--color-base-content) !important;
}

.bg-transparent.border-b-2.border-base-content:hover {
  border-bottom-color: var(--color-base-content) !important;
}

/* Forzar borde negro para el selector de temas */
.btn.border-2.border-base-content {
  border-color: var(--color-base-content) !important;
}

.btn.border-2.border-base-content:hover {
  border-color: var(--color-base-content) !important;
}

/* Forzar bordes negros para los divisores */
.divider.border-base-content {
  border-color: var(--color-base-content) !important;
}

.divider.border-base-content:hover {
  border-color: var(--color-base-content) !important;
}

/* Forzar bordes negros para las cards del modal de comparativa */
.stats.border-2.border-base-content {
  border-color: var(--color-base-content) !important;
}

.stats.border-2.border-base-content:hover {
  border-color: var(--color-base-content) !important;
}

/* Forzar bordes inferiores negros para los botones del modal de comparativa */
.btn.border-b-2.border-base-content {
  border-bottom-color: var(--color-base-content) !important;
}

.btn.border-b-2.border-base-content:hover {
  border-bottom-color: var(--color-base-content) !important;
}

/* Forzar borde inferior negro para el botón "Crear Nueva Cepa" */
#openCustomFilterModal.border-b-2.border-base-content {
  border-bottom-color: var(--color-base-content) !important;
}

#openCustomFilterModal.border-b-2.border-base-content:hover {
  border-bottom-color: var(--color-base-content) !important;
}

/* Forzar borde inferior negro para botones de Snapshot y Comparar */
.btn-create-snapshot.border-b-2.border-base-content,
.btn-compare.border-b-2.border-base-content {
  border-bottom-color: var(--color-base-content) !important;
}

.btn-create-snapshot.border-b-2.border-base-content:hover,
.btn-compare.border-b-2.border-base-content:hover {
  border-bottom-color: var(--color-base-content) !important;
}

/* Forzar borde inferior negro para botones de Exportar Datos */
#exportSnapshotBtn.border-b-2.border-base-content,
#exportPendingBtn.border-b-2.border-base-content,
#exportPurchasedBtn.border-b-2.border-base-content {
  border-bottom-color: var(--color-base-content) !important;
}

#exportSnapshotBtn.border-b-2.border-base-content:hover,
#exportPendingBtn.border-b-2.border-base-content:hover,
#exportPurchasedBtn.border-b-2.border-base-content:hover {
  border-bottom-color: var(--color-base-content) !important;
}

/* Forzar borde negro para botones de cerrar modal */
.btn-modal-close.border-2.border-base-content {
  border-color: var(--color-base-content) !important;
}

.btn-modal-close.border-2.border-base-content:hover {
  border-color: var(--color-base-content) !important;
}

/* Agrandar botones de cerrar modal */
.btn-modal-close.btn-sm {
  @apply btn-md;
}

/* ===== ELIMINACIÓN DE TRANSICIONES PARA CAMBIO DE TEMA ===== */

/**
 * Deshabilita todas las transiciones durante el cambio de tema
 * para evitar el efecto de "trabado" al cambiar entre temas claro y oscuro
 * 
 * Esta regla se aplica a todos los elementos cuando se detecta un cambio de tema
 * y elimina cualquier transición que pueda causar retrasos visuales
 */
[data-theme="light-theme"] *,
[data-theme="dark-theme"] * {
  transition: none !important;
  transition-delay: 0s !important;
  transition-duration: 0s !important;
  transition-property: none !important;
  transition-timing-function: none !important;
}

/**
 * Restaura transiciones solo para elementos específicos que las necesitan
 * después de que el cambio de tema se haya completado
 */
[data-theme="light-theme"] .btn:hover,
[data-theme="dark-theme"] .btn:hover,
[data-theme="light-theme"] .btn:focus,
[data-theme="dark-theme"] .btn:focus,
[data-theme="light-theme"] .btn:active,
[data-theme="dark-theme"] .btn:active {
  transition: all 0.2s ease-in-out !important;
}

[data-theme="light-theme"] .card:hover,
[data-theme="dark-theme"] .card:hover {
  transition: all 0.2s ease-in-out !important;
}

[data-theme="light-theme"] .modal:hover,
[data-theme="dark-theme"] .modal:hover {
  transition: all 0.2s ease-in-out !important;
}