/* ============================================================
   PROVIDENCIA FC — Custom CSS
   Styles that complement Tailwind utilities
   ============================================================ */

/* ── Mountain SVG Wave Overlay (History Section) ─────────── */
.mountain-overlay {
    background:
        linear-gradient(to top, rgba(19, 19, 19, 1) 0%, rgba(19, 19, 19, 0.4) 60%, rgba(19, 19, 19, 0) 100%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'><path fill='%231A1A1A' fill-opacity='1' d='M0,160L48,165.3C96,171,192,181,288,160C384,139,480,85,576,96C672,107,768,181,864,218.7C960,256,1056,256,1152,229.3C1248,203,1344,149,1392,122.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z'></path></svg>");
    background-size: cover;
    background-position: bottom;
}

/* ── Shield Clip-Path (La Directiva cards) ───────────────── */
.clip-shield {
    clip-path: polygon(50% 0%, 100% 10%, 100% 80%, 50% 100%, 0 80%, 0 10%);
}

/* ── Noise Texture Atmospheric Overlay ───────────────────── */
.texture-overlay {
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E");
    pointer-events: none;
}

/* ── Custom Scrollbar ────────────────────────────────────── */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #131313;
}
::-webkit-scrollbar-thumb {
    background: #800020;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #af2b3e;
}

/* ── Smooth Scroll, Page Zoom & Viewport Height Correction ─ */
html {
    scroll-behavior: smooth;
    zoom: 90%;
    min-height: calc(100vh / 0.9);
}

body {
    overflow-x: hidden;
    min-height: calc(100vh / 0.9);
}

/* Compensate Tailwind screen utilities for 90% zoom */
.h-screen {
    height: calc(100vh / 0.9) !important;
}
.min-h-screen {
    min-height: calc(100vh / 0.9) !important;
}
.max-h-screen {
    max-height: calc(100vh / 0.9) !important;
}
.w-screen {
    width: calc(100vw / 0.9) !important;
}

/* ── Portal Hover Compact Collapsible Sidebar ───────────── */
.portal-sidebar-wrapper {
    position: relative;
    width: 4rem; /* 64px collapsed width */
    height: 100%;
    flex-shrink: 0;
    z-index: 40;
}

#portal-sidebar {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100%;
    width: 4rem; /* 64px compact width */
    background-color: #1b1c1c; /* surface-container-low */
    border-right: 1px solid rgba(88, 65, 65, 0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    overflow-y: auto;
    overflow-x: hidden;
    user-select: none;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE y Edge */
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.28s ease, background-color 0.28s ease;
    box-shadow: 4px 0 15px rgba(0, 0, 0, 0.3);
}

#portal-sidebar::-webkit-scrollbar {
    display: none; /* Hide scrollbars in WebKit browsers */
    width: 0;
    height: 0;
}

#portal-sidebar:hover {
    width: 16rem; /* 256px expanded width on hover */
    box-shadow: 12px 0 35px rgba(0, 0, 0, 0.65);
    background-color: rgba(27, 28, 28, 0.98);
    backdrop-filter: blur(8px);
}

/* Sidebar Text Labels */
.sidebar-label {
    white-space: nowrap;
    transition: opacity 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

#portal-sidebar:not(:hover) .sidebar-label {
    display: none !important;
}

#portal-sidebar:hover .sidebar-label {
    display: inline-block !important;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* Sidebar Section Headers */
.sidebar-section-header {
    white-space: nowrap;
    transition: opacity 0.2s ease;
}

#portal-sidebar:not(:hover) .sidebar-section-header {
    display: none !important;
}

#portal-sidebar:hover .sidebar-section-header {
    display: block !important;
    opacity: 1;
    margin-bottom: 0.25rem;
}

/* Sidebar Badges & Non-icon Spans */
#portal-sidebar:not(:hover) .sidebar-nav-btn > span:not(.material-symbols-outlined) {
    display: none !important;
}

/* Divider lines for collapsed mode */
.sidebar-collapsed-divider {
    height: 1px;
    background-color: rgba(88, 65, 65, 0.3);
    margin: 0.2rem 0.4rem;
    transition: opacity 0.2s ease;
}

#portal-sidebar:hover .sidebar-collapsed-divider {
    display: none !important;
}

/* Submenú Gestión Web en modo colapsado (Permite ver los iconos perfectamente alineados) */
#portal-sidebar:not(:hover) #chevron-gestion-web {
    display: none !important;
}

#portal-sidebar:not(:hover) #sub-menu-gestion-web {
    padding-left: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
}

/* Sidebar Nav Buttons en modo colapsado */
#portal-sidebar:not(:hover) .sidebar-nav-btn {
    justify-content: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

#portal-sidebar:not(:hover) .sidebar-nav-btn .material-symbols-outlined {
    margin: 0 auto !important;
}

/* Sidebar Footer (Compact vs Expanded) */
.sidebar-footer-expanded {
    transition: opacity 0.2s ease;
}

#portal-sidebar:not(:hover) .sidebar-footer-expanded {
    display: none !important;
}

#portal-sidebar:hover .sidebar-footer-expanded {
    display: block !important;
    opacity: 1;
}

.sidebar-footer-compact {
    opacity: 1;
    transition: opacity 0.2s ease;
}

#portal-sidebar:not(:hover) .sidebar-footer-compact {
    display: block !important;
}

#portal-sidebar:hover .sidebar-footer-compact {
    display: none !important;
}

/* ── Portal Background Pattern ───────────────────────────── */
.bg-portal-pattern {
    background:
        linear-gradient(to bottom, rgba(14, 14, 14, 0.86), rgba(19, 19, 19, 0.93)),
        url('../images/patronfondo.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-repeat: repeat;
}

/* ── Countdown / Match timer digits ─────────────────────── */
.countdown-digit {
    font-family: 'Anybody', sans-serif;
    font-weight: 900;
    font-size: 2.5rem;
    line-height: 1;
    color: #ffb3b5;
    min-width: 2.5rem;
    text-align: center;
}

/* ── Grayscale to color transition ──────────────────────── */
.grayscale-to-color {
    filter: grayscale(100%);
    opacity: 0.8;
    transition: filter 0.5s ease, opacity 0.5s ease;
}
.grayscale-to-color:hover {
    filter: grayscale(0%);
    opacity: 1;
}

/* ── Nav active underline pulse ─────────────────────────── */
@keyframes borderPulse {
    0%, 100% { border-color: #ffb3b5; }
    50%       { border-color: #800020; }
}
.nav-active {
    color: #ffb3b5;
    border-bottom: 2px solid #ffb3b5;
    padding-bottom: 2px;
    animation: borderPulse 2.5s ease-in-out infinite;
}

/* ── Hero text reveal animation ─────────────────────────── */
@keyframes fadeUp {
    from { opacity: 0; transform: translateY(32px); }
    to   { opacity: 1; transform: translateY(0);    }
}
.hero-animate {
    animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-animate-delay {
    opacity: 0;
    animation: fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s forwards;
}

/* ── Card hover lift ─────────────────────────────────────── */
.card-lift {
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
.card-lift:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(128, 0, 32, 0.25);
}

/* ── Directiva card scale origin ────────────────────────── */
.directiva-card {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    transform-origin: bottom center;
}
.directiva-card:hover {
    transform: translateY(-10px) scale(1.02);
    z-index: 30;
}
.directiva-presidente {
    transform: scale(1.03);
    transform-origin: bottom center;
    z-index: 20;
}
.directiva-presidente:hover {
    transform: scale(1.05) translateY(-8px);
}

/* ── Page Loader & Transitions (Cinematic Design) ───────── */
#page-loader {
    background: radial-gradient(circle at center, rgba(35, 10, 18, 0.99) 0%, rgba(13, 13, 13, 1) 80%);
    z-index: 99999;
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* Central Escudo Breathing */
.animate-breathe {
    animation: breathe 3s ease-in-out infinite;
}

/* Progress Sweep Line */
.animate-progress-sweep {
    animation: progressSweep 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

@keyframes progressSweep {
    0% {
        left: -40%;
        width: 30%;
    }
    50% {
        width: 50%;
    }
    100% {
        left: 110%;
        width: 30%;
    }
}

@keyframes breathe {
    0%, 100% {
        transform: scale(0.95);
        filter: drop-shadow(0 0 12px rgba(128, 0, 32, 0.4)) drop-shadow(0 0 3px rgba(128, 0, 32, 0.2));
        opacity: 0.85;
    }
    50% {
        transform: scale(1.05);
        filter: drop-shadow(0 0 25px rgba(255, 179, 181, 0.75)) drop-shadow(0 0 8px rgba(255, 179, 181, 0.4));
        opacity: 1;
    }
}

/* ── Nav Dropdown Animation ──────────────────────────────── */
.group:hover .group-hover\:flex {
    animation: dropdownFadeIn 0.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes dropdownFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}