/* LucaFlow Frontend Bridge
   Unifica clases Tailwind personalizadas con las mismas CSS vars usadas en el admin.
   Fecha: 2025-10-02
   Actualizado: 2025-01-XX - Optimización y consolidación
*/
:root {
  /* ============================================
     Variables del Bridge - Dependen de lucaflow-theme.css
     ============================================ */
  
  /* Colores principales - Referencias al tema base */
  /* Fallback incluido por si el tema no está cargado */
  /* IMPORTANTE: Definir --deep-blue primero para evitar referencia circular */
  --deep-blue: #0A1929; /* Valor base, puede ser sobrescrito por lucaflow-theme.css */
  --primary: var(--papaya, #FF8000);
  --primary-dark: var(--papaya-600, #E67300);
  --light-gray: #F2F2F2; /* Valor base */
  --accent-cyan: var(--accent-cyan, #2DE2E6);
  --accent-orange: var(--papaya, #FF8000);
  --error-red: var(--error-red, #FF3B30);
  --success-green: #00D08F; /* No definido en tema base */
  --warning-yellow: #f59e0b; /* No definido en tema base */

  /* Variables semánticas para backgrounds */
  /* Usa valores del tema cuando están disponibles */
  --bg-primary: var(--deep-blue); /* Ahora --deep-blue ya está definido */
  --bg-secondary: #102A43; /* Valor específico del bridge */
  --bg-tertiary: #1E3A52; /* Valor específico del bridge */
  
  /* Variables semánticas para texto */
  --text-primary: #FFFFFF;
  --text-secondary: #A0AEC0;
  
  /* Variables semánticas para bordes */
  --border-color: #2D3748;
  
  /* Variables para checkboxes (usando variables del tema) */
  --checkbox-size: 16px;
  --checkbox-size-sm: 14px;
  --checkbox-size-lg: 18px;
  --checkbox-border: var(--text-primary);
  --checkbox-border-hover: rgba(255, 255, 255, 0.3);
  --checkbox-bg-hover: rgba(255, 255, 255, 0.08);
  --checkbox-bg-checked: var(--primary, #FF8000); /* Fallback directo */
  --checkbox-border-checked: var(--primary, #FF8000); /* Fallback directo */
  --checkbox-checkmark-color: #FFFFFF;
  --checkbox-radius: 3px;
}

/* Modo claro (si se aplica .light en html externamente) */
html.light, :root.light {
  --bg-primary: var(--light-gray);
  --bg-secondary: #ffffff;
  --bg-tertiary: #f3f5f7;
  --text-primary: var(--deep-blue);
  --text-secondary: #4b5563;
  --border-color: #d1d5db;
}

/* Bridge de clases usadas en monthly_analysis y transactions */
/* Nota: !important necesario para sobrescribir estilos de Tailwind */
.bg-background-dark { 
  background-color: var(--bg-primary, #0A1929) !important; 
  background: var(--bg-primary, #0A1929) !important; 
}
.bg-surface-dark { background: var(--bg-secondary) !important; }
.bg-surface-elevated { background: var(--bg-tertiary) !important; }
.text-text-dark-primary { color: var(--text-primary) !important; }
.text-text-dark-secondary { color: var(--text-secondary) !important; }
.border-border-dark { border-color: var(--border-color) !important; }
.text-danger { color: var(--error-red) !important; }
.text-success { color: var(--success-green) !important; }
.col-diff-variation { background-color: color-mix(in srgb, var(--bg-secondary) 70%, #ffffff 30%); }

/* Interactive states - Evitar !important cuando sea posible */
.hover\:border-primary:hover { border-color: var(--primary); }
.hover\:text-primary:hover { color: var(--primary); }
.hover\:bg-primary\/10:hover { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* Nota: Scrollbar y .btn-primary están consolidados en lucaflow-theme.css */

/* Utilidades */
.text-accent { color: var(--accent-cyan) !important; }

/* ============================================
   Checkbox Styles - LucaFlow Custom Checkboxes
   ============================================ */
/* Sistema de checkboxes personalizado que funciona en cualquier contexto */
/* Compatible con Tailwind y usa variables CSS del tema */

/* Clase base para checkboxes personalizados */
.checkbox-lucaflow,
input[type="checkbox"].checkbox-lucaflow {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--checkbox-border);
    background-color: transparent;
    border-radius: var(--checkbox-radius);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
    display: inline-block;
    vertical-align: middle;
}

.checkbox-lucaflow:hover,
input[type="checkbox"].checkbox-lucaflow:hover {
    border-color: var(--checkbox-border-hover);
    background-color: var(--checkbox-bg-hover);
}

/* Regla explícita para checkboxes NO marcados - Asegurar que no tengan estilos de checked */
/* IMPORTANTE: Debe tener mayor especificidad que cualquier regla de Tailwind, hover, active o focus */
.checkbox-lucaflow:not(:checked),
input[type="checkbox"].checkbox-lucaflow:not(:checked),
input.checkbox-lucaflow[type="checkbox"]:not(:checked),
table .checkbox-lucaflow:not(:checked),
table input[type="checkbox"].checkbox-lucaflow:not(:checked),
tbody .checkbox-lucaflow:not(:checked),
tbody input[type="checkbox"].checkbox-lucaflow:not(:checked),
thead .checkbox-lucaflow:not(:checked),
thead input[type="checkbox"].checkbox-lucaflow:not(:checked),
.checkbox-lucaflow:not(:checked):hover,
input[type="checkbox"].checkbox-lucaflow:not(:checked):hover,
table .checkbox-lucaflow:not(:checked):hover,
table input[type="checkbox"].checkbox-lucaflow:not(:checked):hover,
tbody .checkbox-lucaflow:not(:checked):hover,
tbody input[type="checkbox"].checkbox-lucaflow:not(:checked):hover,
.checkbox-lucaflow:not(:checked):active,
input[type="checkbox"].checkbox-lucaflow:not(:checked):active,
table .checkbox-lucaflow:not(:checked):active,
table input[type="checkbox"].checkbox-lucaflow:not(:checked):active,
tbody .checkbox-lucaflow:not(:checked):active,
tbody input[type="checkbox"].checkbox-lucaflow:not(:checked):active,
.checkbox-lucaflow:not(:checked):focus,
input[type="checkbox"].checkbox-lucaflow:not(:checked):focus,
table .checkbox-lucaflow:not(:checked):focus,
table input[type="checkbox"].checkbox-lucaflow:not(:checked):focus,
tbody .checkbox-lucaflow:not(:checked):focus,
tbody input[type="checkbox"].checkbox-lucaflow:not(:checked):focus {
    background-color: transparent !important;
    background-image: none !important;
    border-color: var(--checkbox-border, rgba(255, 255, 255, 0.3)) !important;
    /* Asegurar que no haya colores residuales de Tailwind */
    color: inherit !important;
}

/* Regla con mayor especificidad para asegurar que se aplique sobre Tailwind */
/* IMPORTANTE: Esta regla debe tener mayor especificidad que las reglas de Tailwind */
.checkbox-lucaflow:checked,
input[type="checkbox"].checkbox-lucaflow:checked,
input.checkbox-lucaflow[type="checkbox"]:checked,
table .checkbox-lucaflow:checked,
table input[type="checkbox"].checkbox-lucaflow:checked,
tbody .checkbox-lucaflow:checked,
tbody input[type="checkbox"].checkbox-lucaflow:checked,
thead .checkbox-lucaflow:checked,
thead input[type="checkbox"].checkbox-lucaflow:checked {
    /* Usar background shorthand primero, luego propiedades individuales para máxima compatibilidad */
    background: var(--checkbox-bg-checked, #FF8000) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E") no-repeat center center / 12px 12px !important;
    background-color: var(--checkbox-bg-checked, #FF8000) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: 12px 12px !important;
    border-color: var(--checkbox-border-checked, #FF8000) !important;
    border-width: 2px !important;
    border-style: solid !important;
}

/* Focus ring usando box-shadow (compatible con Tailwind focus:ring) */
.checkbox-lucaflow:focus,
.checkbox-lucaflow:focus-visible,
input[type="checkbox"].checkbox-lucaflow:focus,
input[type="checkbox"].checkbox-lucaflow:focus-visible {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 128, 0, 0.5);
}

/* Tamaños variantes usando Tailwind-like approach */
.checkbox-lucaflow-sm,
input[type="checkbox"].checkbox-lucaflow-sm {
    width: var(--checkbox-size-sm);
    height: var(--checkbox-size-sm);
}

.checkbox-lucaflow-lg,
input[type="checkbox"].checkbox-lucaflow-lg {
    width: var(--checkbox-size-lg);
    height: var(--checkbox-size-lg);
}

/* Auto-aplicar estilos a checkboxes en tablas (compatibilidad hacia atrás) */
/* Nota: Esto se puede eliminar si todos los checkboxes usan la clase .checkbox-lucaflow */
table input[type="checkbox"]:not(.checkbox-lucaflow) {
    appearance: none;
    -webkit-appearance: none;
    width: var(--checkbox-size);
    height: var(--checkbox-size);
    border: 2px solid var(--checkbox-border);
    background-color: transparent;
    border-radius: var(--checkbox-radius);
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

table input[type="checkbox"]:not(.checkbox-lucaflow):hover {
    border-color: var(--checkbox-border-hover);
    background-color: var(--checkbox-bg-hover);
}

table input[type="checkbox"]:not(.checkbox-lucaflow):checked {
    background-color: var(--checkbox-bg-checked) !important;
    border-color: var(--checkbox-border-checked) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M2 6l3 3 5-5'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* Regla general para checkboxes sin clase específica (fuera de tablas) */
input[type="checkbox"]:not(.checkbox-lucaflow):checked {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 12px 12px !important;
}

/* ============================================
   Estilos Comunes del Frontend
   ============================================ */

/* Body base styles */
body {
    font-family: 'Exo 2', system-ui, sans-serif;
    min-height: 100vh;
}

/* Loading spinner animation */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, .3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

.loading-spinner-lg {
    width: 48px;
    height: 48px;
    border-width: 6px;
}

/* Custom scrollbar */
.overflow-y-auto {
    scrollbar-width: thin;
    scrollbar-color: #1E3A52 #0A1929;
}

.overflow-y-auto::-webkit-scrollbar {
    width: 6px;
}

.overflow-y-auto::-webkit-scrollbar-track {
    background: #0A1929;
}

.overflow-y-auto::-webkit-scrollbar-thumb {
    background: #1E3A52;
    border-radius: 3px;
}

.overflow-y-auto::-webkit-scrollbar-thumb:hover {
    background: #FF8000;
}

/* Tag input styling */
.tag-input {
    background: #1E3A52;
    border: 1px solid #2D3748;
    color: #FFFFFF;
}

.tag-input:focus {
    border-color: #FF8000;
    box-shadow: 0 0 0 2px rgba(255, 128, 0, 0.3);
}

.tag-input::placeholder {
    color: #A0AEC0;
}

/* Responsive: Ocultar columnas progresivamente según el ancho de pantalla */
/* Orden: Cuenta → Tags → Descripción Original → Saldo */
/* Optimizado: Consolidado en media queries más eficientes */

/* Tablet landscape y menor */
@media (max-width: 1199px) {
    .col-account {
        display: none !important;
    }
}

/* Tablet portrait y menor */
@media (max-width: 1023px) {
    .col-tags {
        display: none !important;
    }
}

/* Mobile landscape y menor */
@media (max-width: 767px) {
    .description-secondary {
        display: none !important;
    }
}

/* Mobile portrait */
@media (max-width: 639px) {
    .col-balance {
        display: none !important;
    }
}