/* =============================================================================
   TIKISTATS CLIENTS - BASE CSS
   Variables globales, reset, tipografía, estilos base
   Tikistats Dark System — deep forest surfaces, emerald primary, hot accents
   ============================================================================= */

/* Google Fonts Import */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@600;700;800&family=Mulish:wght@400;500;600;700&family=Chivo+Mono:wght@400;500;600;700&display=swap');

/* =============================================================================
   CSS CUSTOM PROPERTIES (Variables)
   ============================================================================= */

:root {
    /* === Paleta Principal TikiStats (Dark System) === */
    --color-dark: #04130E;        /* Fondo de lienzo, texto sobre botones/acentos emerald */
    --color-green: #1CC294;       /* Emerald — acento dominante: botones primarios, links, estados activos */
    --color-light-green: #A5E6C6; /* Mint — texto de acento claro (wordmark del sidebar) */
    --color-teal: #003B2C;        /* Forest — banda del header del sidebar */
    --color-light: #F1F8F5;       /* Ink-1 — texto principal sobre fondos oscuros */
    --color-accent: #7FD944;      /* Lime — acento secundario/pareado: deltas positivos, equipo propio */

    /* === Colores Funcionales (derivados/complementarios) === */
    --color-dark-bg: #0A1F17;     /* Inset — inputs, dropdowns, fondo de KPI tiles */
    --color-card-bg: #0C2119;     /* Surface-1 — fondo de tarjetas */
    --color-success: #6EE7B7;     /* Texto/borde positivo (win-fg) */
    --color-warning: #F59E0B;     /* Amber — alertas, empates */
    --color-danger: #FF6B5B;      /* Coral — errores, derrotas */
    --color-border: rgba(255, 255, 255, 0.1); /* Borde neutro */
    --color-muted: #7E9993;       /* Ink-3 — texto secundario, labels */
    --color-card-hover: #122C22;  /* Surface-2 — hover de cards, fondo de botón secundario */

    /* === Superficies adicionales === */
    --color-sidebar-bg: #030F0B;
    --color-main-bg: #05170F;
    --color-surface-2: #122C22;
    --color-pill-inset: #1A3A30;
    --color-nav-active-bg: #0F2A23;  /* Fondo de item de nav activo */
    --color-mint-field-bg: #DDF3E8;
    --color-mint-field-text: #0B1F1A;
    --color-mint-field-icon: #3D6152;
    --border-subtle: rgba(255, 255, 255, 0.07);
    --skeleton-shimmer-start: rgba(255, 255, 255, 0.03);  /* Overlay neutro del gradiente de skeleton loaders (components.css) */
    --skeleton-shimmer-end: rgba(255, 255, 255, 0.08);

    /* === Escala de tinta (ink) === */
    --color-ink-2: #B6CDC6;
    --color-ink-4: #5C716B;

    /* === Verdes de marca / acentos === */
    --color-forest: #003B2C;
    --color-deep: #004C3B;
    --color-eyebrow: #34D3A6;     /* Teal — labels/eyebrows de sección */
    --color-sky: #38BDF8;
    --color-violet: #A78BFA;
    --color-amber: #F59E0B;  /* Amber accent (K1 section-accent system: scope/limitation notes).
                                Same hex as --color-warning on purpose: distinct semantic role
                                (informational, not severity). Do not alias/collapse the two. */

    /* === Data-viz (serie de 8 colores) === */
    --dataviz-1: #1CC294;
    --dataviz-2: #F59E0B;
    --dataviz-3: #7FD944;
    --dataviz-4: #FF6B5B;
    --dataviz-5: #38BDF8;
    --dataviz-6: #A78BFA;
    --dataviz-7: #D6B87A;
    --dataviz-8: #7E9993;

    /* === Acentos de sección (K1) — relleno/borde derivados, ratio 15%/30% ===
       Mismo ratio que ya usaban .position-badge/.badge-user-group (components.css)
       y --result-win-bg/--result-info-bg como literales. dashboard.css referencia
       SOLO estas variables — cero rgba()/hex literal fuera de este bloque. */
    --color-green-fill:    rgba(28, 194, 148, 0.15);   /* == --color-green   #1CC294 */
    --color-green-border:  rgba(28, 194, 148, 0.30);
    --color-teal-fill:     rgba(52, 211, 166, 0.15);   /* == --color-eyebrow #34D3A6 */
    --color-teal-border:   rgba(52, 211, 166, 0.30);
    --color-sky-fill:      rgba(56, 189, 248, 0.15);   /* == --color-sky     #38BDF8 */
    --color-sky-border:    rgba(56, 189, 248, 0.30);
    --color-violet-fill:   rgba(167, 139, 250, 0.15);  /* == --color-violet  #A78BFA */
    --color-violet-border: rgba(167, 139, 250, 0.30);
    --color-amber-fill:    rgba(245, 158, 11, 0.15);
    --color-amber-border:  rgba(245, 158, 11, 0.30);

    /* === Pares de estado semántico (bg + fg) === */
    --result-win-bg: rgba(28, 194, 148, 0.15);
    --result-win-fg: #6EE7B7;
    --result-draw-bg: rgba(245, 158, 11, 0.15);
    --result-draw-fg: #FCD34D;
    --result-loss-bg: rgba(255, 107, 91, 0.14);
    --result-loss-fg: #FCA5A5;
    --result-info-bg: rgba(56, 189, 248, 0.15);
    --result-info-fg: #7DD3FC;

    /* === Match Detail — Grab neutral charcoal and fresh green ===
       These tokens are intentionally scoped by `.match-detail-page #main-content`
       in matches.css. They do not alter the sidebar or other product views. */
    --match-detail-bg: #0B110E;
    --match-detail-surface: #17201B;

    --match-detail-surface-elevated: #232925;
    --match-detail-surface-hover: #2D3530;
    --match-detail-surface-subtle: rgba(167, 139, 250, 0.045);
    --match-detail-surface-strong: rgba(167, 139, 250, 0.085);

    --match-detail-inset: rgba(8, 14, 11, 0.84);
    --match-detail-overlay: rgba(0, 0, 0, 0.84);

    --match-detail-border: rgba(226, 222, 235, 0.14);
    --match-detail-border-soft: rgba(226, 222, 235, 0.09);

    --match-detail-text: #F5F5F4;
    --match-detail-text-secondary: #B4B2B8;
    --match-detail-text-muted: #8D8C91;

    --match-detail-primary: #10B981;
    --match-detail-primary-hover: #34D399;
    --match-detail-primary-fill: rgba(16, 185, 129, 0.16);
    --match-detail-primary-fill-strong: rgba(16, 185, 129, 0.26);
    --match-detail-primary-border: rgba(16, 185, 129, 0.58);

    --match-detail-secondary: #A78BFA;
    --match-detail-secondary-hover: #C4B5FD;
    --match-detail-secondary-fill: rgba(167, 139, 250, 0.14);
    --match-detail-secondary-border: rgba(167, 139, 250, 0.40);

    --match-detail-focus: #10B981;
    --match-detail-focus-ring: rgba(16, 185, 129, 0.30);

    --match-detail-success: #4ADE80;
    --match-detail-success-fill: rgba(74, 222, 128, 0.16);

    --match-detail-warning: #FBBF24;
    --match-detail-danger: #FB7185;
    --match-detail-danger-fill: rgba(251, 113, 133, 0.18);

    --match-detail-shadow: rgba(0, 0, 0, 0.45);
    --match-detail-gridline: rgba(245, 245, 244, 0.10);

    --match-detail-pitch-bg: #111713;
    --match-detail-pitch-line: rgba(245, 245, 244, 0.24);

    --match-detail-shot-fill: rgba(16, 185, 129, 0.40);
    --match-detail-goal-fill: rgba(251, 113, 133, 0.74);

    --match-detail-link: var(--match-detail-secondary);
    --match-detail-header-accent: #EFEAFD;

    --match-detail-tab-active: var(--match-detail-primary);
    --match-detail-badge-active: var(--match-detail-primary);
    --match-detail-timeline-active: var(--match-detail-primary);
    --match-detail-plot-selector-bg: var(--match-detail-surface-elevated);
    --match-detail-plot-selector-text: var(--match-detail-text);
    --match-detail-plot-selector-border: var(--match-detail-border);
    --match-detail-plot-selector-hover: var(--match-detail-surface-hover);
    --match-detail-plot-selector-option-bg: var(--match-detail-surface-elevated);
    --match-detail-plot-selector-option-text: var(--match-detail-text);
    /* === Plotly bridge tokens ===
       JS reads these instead of owning a second browser-side palette. */
    --plot-gridline: rgba(255, 255, 255, 0.08);
    --plot-team-home: var(--color-accent);
    --plot-team-away: var(--color-green);
    --plot-bg-solid: var(--color-card-bg);
    --plot-pitch-bg: var(--color-dark-bg);
    --plot-pitch-line: rgba(255, 255, 255, 0.20);
    --plot-pitch-stripe: rgba(255, 255, 255, 0.025);
    --plot-shot-fill: rgba(28, 194, 148, 0.40);
    --plot-goal-fill: rgba(255, 107, 91, 0.74);

    /* === Escala de radios === */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-pill: 999px;

    /* === Sombra (solo modales/paneles a pantalla completa) === */
    --shadow-panel: 0 24px 60px rgba(0, 0, 0, 0.5);

    /* === Gradientes de marca — marcas/avatares, nunca botones === */
    --gradient-brand: linear-gradient(135deg, var(--color-green) 0%, var(--color-accent) 100%);
    --gradient-team-avatar: linear-gradient(135deg, #1CC294 0%, #3CBE86 100%); /* Avatar del equipo cliente — variante con distinto stop final */

    /* === Tipografía === */
    --font-family: 'Mulish', -apple-system, BlinkMacSystemFont, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-family-display: 'Plus Jakarta Sans', var(--font-family);
    --font-family-mono: 'Chivo Mono', 'SFMono-Regular', Consolas, monospace;
    --font-size-eyebrow: 0.6875rem; /* 11px */
    --font-size-xs: 0.75rem;      /* 12px - Labels de tabla, badges, metadata */
    --font-size-sm: 0.875rem;     /* 14px - Texto secundario, subtítulos de tarjetas */
    --font-size-base: 1rem;       /* 16px - Texto general, párrafos */
    --font-size-md: 1.125rem;     /* 18px - Subtítulos de sección */
    --font-size-lg: 1.25rem;      /* 20px - Títulos de tarjetas, headers de sección */
    --font-size-xl: 1.5rem;       /* 24px - Títulos principales de página */
    --font-size-2xl: 2rem;        /* 32px - Números destacados, stat-numbers */
    --font-size-3xl: 2.5rem;      /* 40px - Números hero, KPIs principales */
}

/* =============================================================================
   RESET Y ESTILOS BASE
   ============================================================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--color-dark);
    color: var(--color-light);
    min-height: 100vh;
    line-height: 1.6;
}

/* =============================================================================
   UTILIDADES DE TEXTO
   ============================================================================= */

.text-muted {
    color: var(--color-muted) !important;
}

.text-green {
    color: var(--color-green) !important;
}

.text-light-green {
    color: var(--color-light-green) !important;
}

.text-light {
    color: var(--color-light) !important;
}

.text-white {
    color: #ffffff !important;
}

.text-sm {
    font-size: var(--font-size-sm);
}

.text-xs {
    font-size: var(--font-size-xs);
}

.text-lg {
    font-size: var(--font-size-lg);
}

.text-xl {
    font-size: var(--font-size-xl);
}

.text-2xl {
    font-size: var(--font-size-2xl);
}

.text-3xl {
    font-size: var(--font-size-3xl);
}

/* Colores específicos con tamaños */
.text-2xl-green {
    font-size: var(--font-size-2xl);
    color: var(--color-green) !important;
}

.text-2xl-danger {
    font-size: var(--font-size-2xl);
    color: var(--color-danger) !important;
}

/* =============================================================================
   UTILIDADES DE DIMENSIONES
   ============================================================================= */

.logo-sm {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.logo-md {
    width: 80px;
    height: 80px;
    object-fit: contain;
    margin-right: 20px;
}

.icon-profile {
    width: 30px;
    height: 30px;
    object-fit: cover;
}

.img-fit-contain {
    object-fit: contain;
}

.img-fit-cover {
    object-fit: cover;
}

/* Dimensiones específicas */
.w-40px { width: 40px; }
.w-50px { width: 50px; }
.w-100px { width: 100px; }
.w-150px { width: 150px; }
.w-215px { width: 215px; }
.w-250px { width: 250px; }

.min-w-250 { min-width: 250px; }

/* Clases de color adicionales */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-3xl.text-success {
    font-size: var(--font-size-3xl);
    color: var(--color-success);
}
.text-3xl.text-warning {
    font-size: var(--font-size-3xl);
    color: var(--color-warning);
}

/* =============================================================================
   UTILIDADES DE TRANSICIONES
   ============================================================================= */

.transition-transform {
    transition: transform 0.3s ease;
}

.transition-all {
    transition: all 0.3s ease;
}

/* =============================================================================
   UTILIDADES DE BORDES
   ============================================================================= */

.border-danger-muted {
    border-color: var(--color-danger) !important;
    opacity: 0.6;
}

.border-success-muted {
    border-color: var(--color-success) !important;
    opacity: 0.6;
}

/* =============================================================================
   FORMULARIOS - ESTILOS BASE
   ============================================================================= */

select {
    color: var(--color-mint-field-text) !important;
    background-color: var(--color-mint-field-bg) !important;
}

input::placeholder,
textarea::placeholder {
    color: var(--color-muted) !important;
    opacity: 0.7 !important;
}

.form-text {
    color: var(--color-ink-2) !important;
}

.form-control,
.form-select {
    background: var(--color-dark-bg);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--color-light);
    border-radius: var(--radius-sm);
    padding: 10px 15px;
}

.form-control:focus,
.form-select:focus {
    background: var(--color-dark-bg);
    border-color: var(--color-green);
    box-shadow: 0 0 0 3px rgba(28, 194, 148, 0.18);
    color: var(--color-light);
}

/* =============================================================================
   ANIMACIONES GLOBALES
   ============================================================================= */

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

@keyframes pulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }
    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

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

/* =============================================================================
   UTILIDADES DE VISUALIZACIÓN
   ============================================================================= */

.loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid rgba(28, 194, 148, 0.2);
    border-top-color: var(--color-green);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}