/* arena/arena_styles.css */

:root { 
    --primary: #22c55e; 
    --bg: #040405; 
    --card: #0d0d11; 
    --border: #1f1f29; 
}

body { 
    background-color: var(--bg); 
    color: #f4f4f5; 
    font-family: 'Plus Jakarta Sans', sans-serif; 
    -webkit-font-smoothing: antialiased; 
}

.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}

.glass-nav { 
    background: rgba(4, 4, 5, 0.75); 
    backdrop-filter: blur(20px); 
    border-bottom: 1px solid var(--border); 
}

.card-premium { 
    background: linear-gradient(145deg, #0d0d11 0%, #121217 100%); 
    border: 1px solid var(--border); 
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); 
}

.card-premium:hover { 
    border-color: rgba(34, 197, 94, 0.3); 
    transform: translateY(-2px); 
}

.text-neon { 
    color: var(--primary); 
    text-shadow: 0 0 15px rgba(34, 197, 94, 0.3); 
}

.recorrencia-active { 
    border-color: var(--primary) !important; 
    background: rgba(34, 197, 94, 0.08) !important; 
    color: white !important; 
}

.progress-occupancy { 
    height: 6px; 
    border-radius: 4px; 
    background: #1f1f29; 
    overflow: hidden; 
    position: relative; 
}

.progress-bar-inner { 
    height: 100%; 
    border-radius: 4px; 
    transition: width 0.5s ease-in-out; 
}

.active-court {
    background: #22c55e !important;
    border-color: #22c55e !important;
    box-shadow: 0 10px 30px -5px rgba(34, 197, 94, 0.35) !important;
    transform: scale(1.02) !important;
}

.active-court span,
.active-court p,
.active-court div {
    color: #040405 !important;
}

.active-court .icon-indicator {
    background: rgba(4, 4, 5, 0.1) !important;
    border-color: rgba(4, 4, 5, 0.2) !important;
}

.active-court .icon-indicator i {
    color: #040405 !important;
}

.active-court button {
    background: rgba(4, 4, 5, 0.1) !important;
    border-color: rgba(4, 4, 5, 0.2) !important;
    color: #040405 !important;
}

.active-court button i {
    color: #040405 !important;
}

.active-court .w-full.h-10 {
    background: rgba(4, 4, 5, 0.1) !important;
    border-color: rgba(4, 4, 5, 0.2) !important;
}

.active-court .w-full.h-10 span {
    color: rgba(4, 4, 5, 0.6) !important;
}

#img-zoom-display {
    cursor: grab;
    user-select: none;
    -webkit-user-drag: none;
}

input[type="date"], input[type="number"], select {
    color-scheme: dark;
    background-color: #09090b;
    border-color: #27272a;
    color: #f4f4f5;
}