/*
 * Giorgina Tabs – Estilos Frontend
 * Adapta Bootstrap 5 nav-tabs a la identidad visual del site:
 *   Primario : #CE1417 (rojo)
 *   Acento   : #C6B048 (dorado)
 *   Texto    : #3D3D3D
 *   Fuente   : "Kumbh Sans"
 *
 * @package Giorgina
 */

/* ── Variables ─────────────────────────────────────────────────── */
.giorgina-tabs-wrapper {
    --g-primary    : #CE1417;
    --g-accent     : #C6B048;
    --g-text       : #3D3D3D;
    --g-text-muted : #7A7A7A;
    --g-bg-light   : #FBFAF9;
    --g-border     : #e0dcd8;
    --g-font       : "Kumbh Sans", sans-serif;
    --g-radius     : 4px;
    --g-transition : 0.25s ease;

    font-family  : var(--g-font);
    color        : var(--g-text);
    margin       : 1.5rem 0;
    position     : relative;
}

/* ── Nav tabs ──────────────────────────────────────────────────── */
.giorgina-tabs-wrapper .giorgina-nav-tabs {
    border-bottom : 2px solid var(--g-primary);
    gap           : 4px;
    flex-wrap     : wrap;
}

/* Ocultar tabs y contenido hasta que el preloader desaparezca */
.giorgina-tabs-wrapper:not(.tabs-loaded) .giorgina-nav-tabs,
.giorgina-tabs-wrapper:not(.tabs-loaded) .giorgina-tab-content {
    display : none;
}

.giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link {
    color           : var(--g-text);
    background      : transparent;
    border          : 1px solid transparent;
    border-radius   : var(--g-radius) var(--g-radius) 0 0;
    font-family     : var(--g-font);
    font-size       : 0.925rem;
    font-weight     : 500;
    padding         : 0.55rem 1.1rem;
    transition      : color var(--g-transition), background var(--g-transition), border-color var(--g-transition);
    letter-spacing  : 0.01em;
    position        : relative;
}

.giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link:hover {
    color           : var(--g-primary);
    background      : rgba(206, 20, 23, 0.05);
    border-color    : var(--g-border) var(--g-border) transparent;
}

.giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link.active {
    color           : #fff;
    background      : var(--g-primary);
    border-color    : var(--g-primary) var(--g-primary) var(--g-primary);
    font-weight     : 600;
}

/* Línea de acento dorada bajo la pestaña activa */
.giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link.active::after {
    content    : '';
    display    : block;
    position   : absolute;
    bottom     : -2px;
    left       : 0;
    right      : 0;
    height     : 2px;
    background : var(--g-accent);
}

/* ── Tab content ───────────────────────────────────────────────── */
.giorgina-tabs-wrapper .giorgina-tab-content {
    border        : 1px solid var(--g-border);
    border-top    : none;
    border-radius : 0 0 var(--g-radius) var(--g-radius);
    background    : #fff;
}

.giorgina-tabs-wrapper .tab-pane {
    display : none;
}

.giorgina-tabs-wrapper .tab-pane.show.active {
    display : block;
}

/* Ocultar paneles hasta que el preloader desaparezca */
.giorgina-tabs-wrapper:not(.tabs-loaded) .tab-pane {
    visibility : hidden;
}

.giorgina-tabs-wrapper .giorgina-tab-inner {
    padding : 1.5rem 1.75rem;
}

/* ── Empty state ───────────────────────────────────────────────── */
.giorgina-tabs-empty {
    color       : var(--g-text-muted);
    font-style  : italic;
    padding     : 1rem 0;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 575.98px) {
    .giorgina-tabs-wrapper .giorgina-nav-tabs {
        flex-direction : column;
        border-bottom  : none;
        border-left    : 2px solid var(--g-primary);
        gap            : 2px;
    }

    .giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link {
        border-radius : 0 var(--g-radius) var(--g-radius) 0;
        border        : none;
        border-left   : 3px solid transparent;
    }

    .giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link:hover {
        border-left-color : var(--g-primary);
    }

    .giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link.active {
        border-left-color : var(--g-accent);
    }

    .giorgina-tabs-wrapper .giorgina-nav-tabs .nav-link.active::after {
        display : none;
    }

    .giorgina-tabs-wrapper .giorgina-tab-content {
        border        : 1px solid var(--g-border);
        border-radius : var(--g-radius);
    }

    .giorgina-tabs-wrapper .giorgina-tab-inner {
        padding : 1rem;
    }
}

/* ── Preloader ─────────────────────────────────────────────────── */
.giorgina-tabs-preloader {
    position        : fixed;
    top             : 0;
    left            : 0;
    right           : 0;
    bottom          : 0;
    background      : linear-gradient(135deg, #ffffff 0%, #fafafa 100%);
    z-index         : 50;
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    transition      : opacity 0.5s ease, visibility 0.5s ease;
}

.giorgina-tabs-wrapper.tabs-loaded .giorgina-tabs-preloader {
    opacity         : 0;
    visibility      : hidden;
    pointer-events  : none;
}

.giorgina-tabs-spinner {
    width            : 64px;
    height           : 64px;
    border           : 5px solid rgba(206, 20, 23, 0.1);
    border-top-color : var(--g-primary);
    border-right-color: var(--g-accent);
    border-radius    : 50%;
    animation        : giorgina-spin 1s linear infinite;
    box-shadow       : 0 4px 12px rgba(206, 20, 23, 0.15);
}

.giorgina-tabs-loading-text {
    margin-top       : 24px;
    padding          : 12px 24px;
    font-family      : var(--g-font);
    font-size        : 1rem;
    color            : var(--g-text);
    font-weight      : 600;
    letter-spacing   : 0.5px;
    animation        : giorgina-pulse 1.5s ease-in-out infinite;
}

.giorgina-tabs-loading-text::after {
    content          : '';
    display          : inline-block;
    width            : 3px;
    height           : 3px;
    margin-left      : 8px;
    background       : var(--g-primary);
    border-radius    : 50%;
    animation        : giorgina-dot 1.4s ease-in-out infinite both;
}

@keyframes giorgina-spin {
    to { transform: rotate(360deg); }
}

@keyframes giorgina-pulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

@keyframes giorgina-dot {
    0%, 80%, 100% { transform: scale(0); }
    40% { transform: scale(1); }
}