/* =============================================
   app.css - Custom Styles (Extracted)
   Project: Mareas - Comando Pato Furioso
   Extracted from: mareas_santamaria.php + login.php
   =============================================
   Organization:
   - Base: Global body styles
   - Animations: Keyframes (waves, spin)
   - Waves: Shared containers + Main app variants
   - Components: Form elements (date picker), Scrollbar
   - Utilities: Border compatibility fixes
   Note: Login page wave variants (lighter opacities + fixed height container)
   are provided via minimal remaining inline <style> override in login.php
   to guarantee pixel-perfect identical visuals without altering rules.
*/

/* -------------------------------------------
   BASE
------------------------------------------- */
body {
    background-color: #030814;
    background-image: 
        radial-gradient(at 0% 0%, rgba(14, 116, 144, 0.15) 0px, transparent 50%),
        radial-gradient(at 100% 100%, rgba(3, 105, 161, 0.15) 0px, transparent 50%);
    color-scheme: dark;
}

/* -------------------------------------------
   ANIMATIONS
------------------------------------------- */
/* Animaciones de Olas CSS */
@keyframes waveMove {
    0% { transform: translateX(0) translateZ(0) scaleY(1); }
    50% { transform: translateX(-25%) translateZ(0) scaleY(0.8); }
    100% { transform: translateX(-50%) translateZ(0) scaleY(1); }
}

/* Animación para el Sol */
@keyframes spinSlow {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}
.animate-spin-slow {
    animation: spinSlow 12s linear infinite;
}

/* -------------------------------------------
   WAVES - Base Components
------------------------------------------- */
.wave-bg-container {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}

.wave-element {
    position: absolute;
    bottom: -5px;
    left: 0;
    width: 200%;
    height: 100%;
    background-repeat: repeat-x;
    transform-origin: center bottom;
}

/* Wave Variants - Main Application (mareas_santamaria.php) */
.wave-1 {
    animation: waveMove 14s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    opacity: 0.12;
}

.wave-2 {
    animation: waveMove 9s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    opacity: 0.18;
    margin-bottom: 2px;
}

.wave-3 {
    animation: waveMove 6s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite;
    opacity: 0.08;
    margin-bottom: -3px;
}

/* -------------------------------------------
   COMPONENTS - Form Elements
------------------------------------------- */
/* Estilización del input date nativo */
input[type="date"]::-webkit-calendar-picker-indicator {
    background: transparent;
    bottom: 0;
    color: transparent;
    cursor: pointer;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    width: auto;
    height: auto;
}

/* -------------------------------------------
   COMPONENTS - Scrollbar
------------------------------------------- */
/* Scrollbar personalizado */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #030814;
}
::-webkit-scrollbar-thumb {
    background: #1e293b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #334155;
}

/* -------------------------------------------
   UTILITIES - Border Compatibility
------------------------------------------- */
/* Corrección de compatibilidad para bordes oscuros en Chrome y Firefox */
.border-slate-800, .border-slate-850 {
    border-color: rgba(255, 255, 255, 0.08) !important;
}
.border-slate-900 {
    border-color: rgba(255, 255, 255, 0.04) !important;
}
.hover\:border-slate-700\/60:hover {
    border-color: rgba(255, 255, 255, 0.15) !important;
}