/* ==========================================================================
   APP STYLES - Solid Disco ERP & Facturación Electrónica
   Paleta: Slate (Superficie) + Indigo/Brand (Acento)
   ========================================================================== */

/* Variables CSS para consistencia de tema */
:root {
    color-scheme: light;
    --color-surface-ground: #f8fafc;
    --color-surface-card: #ffffff;
    --color-surface-border: #e2e8f0;
    --color-text-main: #0f172a;
    --color-text-muted: #64748b;
    --color-brand-primary: #4f46e5;
}

html.dark,
.dark {
    color-scheme: dark;
    --color-surface-ground: #0f172a;
    --color-surface-card: #172033;
    --color-surface-border: #1e293b;
    --color-text-main: #f8fafc;
    --color-text-muted: #94a3b8;
    --color-brand-primary: #6366f1;
}

/* Scrollbars modernos y discretos */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 9999px;
}

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

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

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

/* Efectos Glassmorphism */
.glass-panel {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.dark .glass-panel {
    background: rgba(30, 41, 59, 0.75);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(51, 65, 85, 0.6);
}

.glass-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.dark .glass-card {
    background: rgba(30, 41, 59, 0.85);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(51, 65, 85, 0.7);
}

/* Micro-animaciones e interacciones */
.hover-lift {
    transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.hover-lift:hover {
    transform: translateY(-2px);
}

/* Animación shimmer para Skeletons de carga */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.dark .skeleton-shimmer {
    background: linear-gradient(90deg, #1e293b 25%, #334155 37%, #1e293b 63%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

/* Fade in suave de elementos montados */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
    animation: fadeIn 0.25s ease-out forwards;
}

/* Ajustes de foco accesibles */
.focus-ring {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

.focus-ring:focus-visible {
    outline-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* ==========================================================================
   Soporte Explícito Modo Oscuro (Tailwind CDN Fallbacks & Native Controls)
   ========================================================================== */

/* Elevación de tarjetas y modales slate-850 */
.dark .dark\:bg-slate-850 {
    background-color: #172033 !important;
}

.dark .dark\:border-slate-850 {
    border-color: #172033 !important;
}

/* Desplegables nativos en modo oscuro */
.dark select {
    background-color: #0f172a;
    color: #f8fafc;
}

.dark select option {
    background-color: #0f172a;
    color: #f8fafc;
}

/* Asegurar legibilidad en campos de texto en modo oscuro */
.dark input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="color"]),
.dark textarea {
    color: #f8fafc;
}

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

/* Etiquetas y separadores en modales oscuros */
.dark label {
    color: #94a3b8;
}

.dark table thead {
    background-color: rgba(15, 23, 42, 0.6);
}