/* Contabilidad VV - Estilos personalizados */
:root {
    --color-primary: #152A3A;
    --color-primary-dark: #101E2B;
    --color-primary-light: #314965;
    --color-secondary: #FFFFFF;
    --color-accent-gold: #B49657;
    --color-accent-gold-dark: #8E763F;
    --color-accent-gold-light: #DFCA95;
    --color-dark: #1B2127;
    --color-light: #F8F8F8;
    --color-gray: #6c757d;
    --color-danger: #dc2626;
}

/* Clases de fondo */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-primary-dark { background-color: var(--color-primary-dark) !important; }
.bg-primary-light { background-color: var(--color-primary-light) !important; }
.bg-accent-gold { background-color: var(--color-accent-gold) !important; }
.bg-accent-gold-dark { background-color: var(--color-accent-gold-dark) !important; }
.bg-accent-gold-light { background-color: var(--color-accent-gold-light) !important; }
.bg-dark { background-color: var(--color-dark) !important; }
.bg-light { background-color: var(--color-light) !important; }

/* Clases de texto */
.text-primary { color: var(--color-primary) !important; }
.text-primary-dark { color: var(--color-primary-dark) !important; }
.text-primary-light { color: var(--color-primary-light) !important; }
.text-accent-gold { color: var(--color-accent-gold) !important; }
.text-accent-gold-dark { color: var(--color-accent-gold-dark) !important; }
.text-accent-gold-light { color: var(--color-accent-gold-light) !important; }
.text-dark { color: var(--color-dark) !important; }
.text-light { color: var(--color-light) !important; }

/* Clases de borde */
.border-primary { border-color: var(--color-primary) !important; }
.border-accent-gold { border-color: var(--color-accent-gold) !important; }

/* Clases hover */
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:bg-primary-dark:hover { background-color: var(--color-primary-dark) !important; }
.hover\:bg-accent-gold:hover { background-color: var(--color-accent-gold) !important; }
.hover\:bg-accent-gold-dark:hover { background-color: var(--color-accent-gold-dark) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:text-accent-gold:hover { color: var(--color-accent-gold) !important; }
.hover\:text-accent-gold-light:hover { color: var(--color-accent-gold-light) !important; }

/* Transparencias */
.bg-primary\/10 { background-color: rgba(21, 42, 58, 0.1) !important; }
.bg-primary\/20 { background-color: rgba(21, 42, 58, 0.2) !important; }
.bg-accent-gold\/10 { background-color: rgba(180, 150, 87, 0.1) !important; }
.bg-accent-gold\/20 { background-color: rgba(180, 150, 87, 0.2) !important; }
.bg-accent-gold\/30 { background-color: rgba(180, 150, 87, 0.3) !important; }

/* Gradientes personalizados */
.bg-gradient-to-br.from-primary.to-primary-dark {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.bg-gradient-to-r.from-primary.to-primary-dark {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

.bg-gradient-to-r.from-primary.to-accent-gold {
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-gold) 100%) !important;
}

.bg-gradient-to-r.from-accent-gold.to-primary {
    background: linear-gradient(90deg, var(--color-accent-gold) 0%, var(--color-primary) 100%) !important;
}

/* Estilos específicos del header */
#main-app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 40;
    backdrop-filter: blur(0.75rem);
    -webkit-backdrop-filter: blur(0.75rem);
}

/* Scrollbar personalizado */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f1f1; }
::-webkit-scrollbar-thumb { background: var(--color-accent-gold); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--color-accent-gold-dark); }

/* Utilidades adicionales */
.backdrop-blur-sm { backdrop-filter: blur(4px); }
.backdrop-blur-md { backdrop-filter: blur(12px); }

/* Fix para clases de opacidad con barra */
.bg-white\/95 { background-color: rgba(255, 255, 255, 0.95) !important; }
.bg-white\/10 { background-color: rgba(255, 255, 255, 0.1) !important; }
.bg-white\/20 { background-color: rgba(255, 255, 255, 0.2) !important; }
.text-white\/90 { color: rgba(255, 255, 255, 0.9) !important; }
.text-white\/70 { color: rgba(255, 255, 255, 0.7) !important; }
.text-white\/60 { color: rgba(255, 255, 255, 0.6) !important; }
.border-white\/20 { border-color: rgba(255, 255, 255, 0.2) !important; }
.border-white\/30 { border-color: rgba(255, 255, 255, 0.3) !important; }
.border-white\/40 { border-color: rgba(255, 255, 255, 0.4) !important; }
.border-accent-gold\/30 { border-color: rgba(180, 150, 87, 0.3) !important; }

/* Animaciones */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8, 0, 1, 1); }
    50% { transform: translateY(0); animation-timing-function: cubic-bezier(0, 0, 0.2, 1); }
}

.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }
.animate-bounce { animation: bounce 1s infinite; }

.force-white-logo {
  filter: brightness(0) saturate(100%) invert(1);
}