/*
 * ApexSeven — Theme Bridge CSS
 * =====================================================================
 * Este archivo conecta las variables del tema activo (KineticSeven usa
 * --k-primary, --k-surface-0, --k-font-display, etc.) con el sistema
 * de variables del plugin ApexSeven (--as-*).
 *
 * Estrategia: Dentro de cada componente .apexseven-portal se redefinen
 * las variables --as-* usando var(--k-*, fallback). Esto significa:
 *
 *  - Si KineticSeven está activo → los colores del Customizer del tema
 *    se propagan automáticamente a todos los shortcodes y portales.
 *  - Si cualquier otro tema está activo → los fallbacks hardcodeados
 *    de ApexSeven se usan sin cambios.
 *
 * NO modifica nada del panel admin de WP ni del tema.
 * Se encola DESPUÉS de apexseven.css para sobreescribir correctamente.
 * =====================================================================
 */

/* ── 1. FUENTES APEXSEVEN (auto-load si el tema no las carga) ───────── */
/*
 * KineticSeven ya encola Inter y permite elegir Lexend vía Customizer.
 * Este @import actúa como fallback para cuando el tema activo no las carga.
 * El navegador no descargará dos veces la misma fuente si ya está en caché.
 */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;700;800;900&family=Inter:wght@400;500;600;700&display=swap');

/* ── 2. BRIDGE DE VARIABLES DENTRO DEL CONTENEDOR APEXSEVEN ─────────── */
/*
 * Usamos el selector del contenedor raíz de todos los shortcodes y portales.
 * NO tocamos :root para no contaminar el CSS global del tema.
 *
 * KineticSeven genera en wp_head:
 *   :root {
 *     --k-primary: #e62117;         (desde Customizer)
 *     --k-surface-0: #0a0a0a;       (fondo base absoluto)
 *     --k-surface-1: #131313;       (fondo principal)
 *     --k-font-display: 'Epilogue', sans-serif;
 *     --k-font-body: 'Inter', sans-serif;
 *   }
 *
 * Estas variables son heredadas por cualquier descendiente, por lo que
 * .apexseven-portal puede leerlas con var(--k-primary).
 */

.apexseven-portal {

    /* ── COLOR PRIMARIO ── */
    /* Si el tema define --k-primary (KineticSeven), úsalo.
       Si no, usa el rojo ApexSeven por defecto. */
    --as-primary-container:         var(--k-primary,       #d2122e);

    /* La versión "tonal" del primario (más claro, para badges y acentos) */
    --as-primary:                   color-mix(
                                        in srgb,
                                        var(--k-primary, #d2122e) 55%,
                                        white
                                    );

    /* ── FONDOS Y SUPERFICIES ── */
    --as-background:                var(--k-surface-0,     #0a0a0a);
    --as-surface:                   var(--k-surface-1,     #131313);

    /* Capas de superficie (más claras que el fondo, usadas en cards) */
    --as-surface-container-lowest:  color-mix(in srgb, var(--k-surface-1, #131313)  85%, black);
    --as-surface-container-low:     color-mix(in srgb, var(--k-surface-1, #131313)  90%, white);
    --as-surface-container:         color-mix(in srgb, var(--k-surface-1, #131313)  80%, white);
    --as-surface-container-high:    color-mix(in srgb, var(--k-surface-1, #131313)  72%, white);
    --as-surface-container-highest: color-mix(in srgb, var(--k-surface-1, #131313)  65%, white);
    --as-surface-bright:            color-mix(in srgb, var(--k-surface-1, #131313)  55%, white);
    --as-surface-variant:           color-mix(in srgb, var(--k-surface-1, #131313)  68%, white);

    /* ── TIPOGRAFÍAS ── */
    /* Si el tema define las suyas (KineticSeven Customizer), se usan.
       Si no, ApexSeven usa Lexend + Inter cargados por el @import de arriba. */
    --font-headline:                var(--k-font-display,  'Lexend',   sans-serif);
    --font-label:                   var(--k-font-display,  'Lexend',   sans-serif);
    --font-body:                    var(--k-font-body,     'Inter',    sans-serif);

    /* ── TEXTOS SOBRE SUPERFICIES ── */
    --as-on-surface:                #e5e2e1;
    --as-on-primary:                #fff;
    --as-on-primary-container:      #ffe5e3;

    /* ── BORDES Y CONTORNOS ── */
    --as-outline:                   color-mix(in srgb, var(--k-primary, #d2122e) 30%, #888);
    --as-outline-variant:           color-mix(in srgb, var(--k-primary, #d2122e) 18%, #444);
}

/* ── 3. COMPATIBILIDAD RESPONSIVE CON EL TEMA ───────────────────────── */
/*
 * KineticSeven tiene un sidebar fijo a la izquierda (k-sidebar) en desktop
 * y un topbar (k-topbar). Los shortcodes se renderizan dentro del área
 * de contenido principal (.k-page-content). Aseguramos que no haya
 * min-height: 100vh en shortcodes embebidos (solo en portales completos).
 */

/* El portal completo (delegado, admin) sí ocupa pantalla completa */
.apexseven-portal.is-fullscreen-portal {
    min-height: 100vh;
}

/* Los shortcodes embebidos en páginas del tema NO deben tomar 100vh */
.k-page-content .apexseven-portal,
.entry-content .apexseven-portal,
.page-content .apexseven-portal,
[class*="elementor"] .apexseven-portal {
    min-height: unset;
    /* Resetear el fondo también: el shortcode hereda el fondo de la página */
    background-color: transparent;
}

/* Cards dentro de contenido embebido sí mantienen su propio fondo */
.k-page-content .apexseven-portal .as-card,
.entry-content .apexseven-portal .as-card,
.page-content .apexseven-portal .as-card {
    background-color: var(--as-surface-container-low);
}

/* ── 4. TABLAS RESPONSIVAS (fix crítico para todas las tablas AS) ────── */
/*
 * Las tablas de posiciones, fixtures y stats deben ser horizontalmente
 * scrolleables en móvil, sin romper el layout de la página.
 */
.apexseven-portal .as-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: 100%;
    /* Borde redondeado que no corta el overflow */
    border-radius: 0.75rem;
}

.apexseven-portal .as-table {
    min-width: 480px; /* Ancho mínimo antes de activar el scroll horizontal */
}

/* ── 5. BOTONES — USAR COLOR PRIMARIO DEL TEMA ──────────────────────── */
.apexseven-portal .as-btn-primary {
    background-color: var(--as-primary-container);
    color: var(--as-on-primary-container);
}

.apexseven-portal .as-btn-primary:hover {
    /* Aclarar levemente el color primario en hover */
    background-color: color-mix(in srgb, var(--as-primary-container) 85%, white);
    color: var(--as-on-primary-container);
    text-decoration: none;
}

/* ── 6. SCROLLBAR CUSTOM CON COLOR DEL TEMA ─────────────────────────── */
.apexseven-portal ::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.apexseven-portal ::-webkit-scrollbar-track {
    background: var(--as-background);
}
.apexseven-portal ::-webkit-scrollbar-thumb {
    background: var(--as-primary-container);
    border-radius: 10px;
    opacity: 0.6;
}

/* ── 7. ANIMACIONES MICRO — TRANSICIONES SUAVES ─────────────────────── */
.apexseven-portal .as-card {
    transition: background-color 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.apexseven-portal .as-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.apexseven-portal .as-btn {
    transition: background-color 0.2s ease, filter 0.2s ease, transform 0.15s ease;
}
.apexseven-portal .as-btn:active {
    transform: scale(0.97);
}

/* ── 8. ESTADO DE CARGA (spinner utility) ───────────────────────────── */
@keyframes as-spin {
    to { transform: rotate(360deg); }
}
.as-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-top-color: var(--as-primary-container);
    border-radius: 50%;
    animation: as-spin 0.7s linear infinite;
}

/* ── 9. TOAST / NOTIFICACIONES ──────────────────────────────────────── */
.as-toast {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 99999;
    background: var(--as-surface-container-high);
    color: var(--as-on-surface);
    padding: 0.75rem 1.25rem;
    border-radius: 0.5rem;
    border-left: 4px solid var(--as-primary-container);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    font-family: var(--font-body);
    font-size: 0.875rem;
    min-width: 280px;
    max-width: 420px;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}
.as-toast.as-toast-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.as-toast.as-toast-success {
    border-left-color: #22c55e;
}
.as-toast.as-toast-error {
    border-left-color: #ef4444;
}
.as-toast.as-toast-warning {
    border-left-color: #f59e0b;
}

/* ── 10. MODAL OVERLAY ──────────────────────────────────────────────── */
.as-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    align-items: center;
    justify-content: center;
}
.as-modal-overlay.as-modal-open {
    display: flex;
}
.as-modal-box {
    background: var(--as-surface-container-low);
    border-radius: 1rem;
    padding: 2rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    border: 1px solid var(--as-outline-variant);
    animation: as-modal-in 0.25s ease;
}
@keyframes as-modal-in {
    from { opacity: 0; transform: scale(0.95) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0); }
}

/* ── 11. GENERADOR DE SHORTCODE (copy box) ──────────────────────────── */
.as-shortcode-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--as-surface-container-lowest);
    border: 1px dashed var(--as-outline-variant);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
}
.as-shortcode-box code {
    flex: 1;
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.85rem;
    color: var(--as-primary);
    word-break: break-all;
    background: none;
    border: none;
    padding: 0;
}
.as-shortcode-copy-btn {
    flex-shrink: 0;
    background: var(--as-surface-container-high);
    border: none;
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    cursor: pointer;
    color: var(--as-on-surface);
    font-size: 0.8rem;
    font-family: var(--font-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.as-shortcode-copy-btn:hover {
    background: var(--as-primary-container);
    color: var(--as-on-primary-container);
}
.as-shortcode-copy-btn.copied {
    background: #22c55e;
    color: #fff;
}

/* ── 12. FIXTURE CARDS (preview en el admin y en el shortcode público) ─ */
.as-fixture-round {
    margin-bottom: 1.5rem;
}
.as-fixture-round-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}
.as-fixture-round-label {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--as-primary-container);
    padding: 0.2rem 0.65rem;
    border: 1px solid var(--as-primary-container);
    border-radius: 9999px;
}
.as-fixture-round-date {
    font-size: 0.8rem;
    color: var(--as-on-surface);
    opacity: 0.5;
}

.as-match-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 0.75rem;
}

.as-match-card {
    background: var(--as-surface-container);
    border-radius: 0.625rem;
    padding: 0.875rem 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    border: 1px solid transparent;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}
.as-match-card:hover {
    border-color: var(--as-outline-variant);
    background: var(--as-surface-container-high);
}
.as-match-card.is-placeholder {
    opacity: 0.55;
    border-style: dashed;
    border-color: var(--as-outline-variant);
}

.as-match-teams {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}
.as-match-team-name {
    font-family: var(--font-headline);
    font-weight: 700;
    font-size: 0.9rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.as-match-team-name.home { text-align: left; }
.as-match-team-name.away { text-align: right; }

.as-match-score {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    min-width: 60px;
    justify-content: center;
}
.as-match-score-num {
    font-family: var(--font-headline);
    font-weight: 900;
    font-size: 1.2rem;
    line-height: 1;
}
.as-match-vs {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    opacity: 0.4;
    letter-spacing: 0.05em;
}

.as-match-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.75rem;
    opacity: 0.6;
}
.as-match-meta-item {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

/* ── 13. PRINT STYLES ───────────────────────────────────────────────── */
@media print {
    .apexseven-portal {
        background: #fff !important;
        color: #000 !important;
    }
    .apexseven-portal .as-card,
    .apexseven-portal .as-match-card {
        background: #fff !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        box-shadow: none !important;
    }
    .apexseven-portal .as-btn,
    .apexseven-portal .print-hidden {
        display: none !important;
    }
    .apexseven-portal .as-fixture-round-label {
        border-color: #000 !important;
        color: #000 !important;
    }
}

/* ── 14. ACCESIBILIDAD ──────────────────────────────────────────────── */
.apexseven-portal :focus-visible {
    outline: 2px solid var(--as-primary-container);
    outline-offset: 2px;
    border-radius: 4px;
}

/* Skip links internos al portal */
.as-skip-link {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--as-primary-container);
    color: var(--as-on-primary-container);
    padding: 0.5rem 1rem;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 4px 0;
    transition: top 0.2s;
}
.as-skip-link:focus {
    top: 0;
}