/**
 * ADMIN DESIGN TOKENS - Super Cartola Manager
 * ============================================
 * Arquivo central de variáveis CSS para o Painel Administrativo (Desktop)
 *
 * USO: Importe este arquivo ANTES de qualquer outro CSS admin
 *      <link rel="stylesheet" href="/css/_admin-tokens.css">
 *
 * REGRA: Nunca use cores hardcoded. Use sempre var(--nome-da-variavel)
 */

:root {
    /* ========================================
       1. CORES PRIMÁRIAS (Brand)
       ======================================== */
    --color-primary: #FF5500;           /* Laranja principal - PADRAO OFICIAL */
    --color-primary-dark: #e8472b;      /* Hover/Active states */
    --color-primary-light: #ff6b35;     /* Destaques suaves */
    --color-primary-muted: rgba(255, 85, 0, 0.1);  /* Backgrounds sutis */
    --color-primary-hover-bg: rgba(255, 85, 0, 0.03); /* Hover sutil em linhas */
    --color-primary-border: rgba(255, 85, 0, 0.3); /* Bordas com transparência */

    /* Gradientes primários */
    --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--color-primary-dark) 0%, #d63920 100%);

    /* ========================================
       2. CORES DE SUPERFÍCIE (Dark Theme)
       ======================================== */
    --surface-bg: #121212;              /* Background principal da página */
    --surface-card: #1a1a1a;            /* Cards e containers */
    --surface-card-elevated: #2a2a2a;   /* Cards com elevação */
    --surface-card-hover: #333333;      /* Hover em cards */
    --surface-overlay: rgba(0, 0, 0, 0.5); /* Overlays de modais */

    /* Overlays com granularidade */
    --surface-overlay-subtle: rgba(0, 0, 0, 0.2);
    --surface-overlay-light: rgba(0, 0, 0, 0.3);
    --surface-overlay-medium: rgba(0, 0, 0, 0.6);

    /* White overlays (para uso sobre backgrounds escuros) */
    --surface-white-10: rgba(255, 255, 255, 0.1);
    --surface-white-20: rgba(255, 255, 255, 0.2);
    --surface-white-80: rgba(255, 255, 255, 0.8);

    /* Gradientes de superfície */
    --gradient-card: linear-gradient(135deg, #2a2a2a 0%, #1e1e1e 100%);
    --gradient-dark: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);

    /* ========================================
       3. CORES DE STATUS
       ======================================== */
    /* Sucesso (Verde) */
    --color-success: #10b981;
    --color-success-light: #22c55e;
    --color-success-muted: rgba(16, 185, 129, 0.15);
    --color-success-text: #86efac;

    /* Erro/Perigo (Vermelho) */
    --color-danger: #ef4444;
    --color-danger-dark: #dc2626;
    --color-danger-muted: rgba(239, 68, 68, 0.15);
    --color-danger-hover-bg: rgba(239, 68, 68, 0.03);
    --color-danger-hover-bg-strong: rgba(239, 68, 68, 0.07);
    --color-danger-text: #fca5a5;

    /* Alerta (Amarelo) */
    --color-warning: #eab308;
    --color-warning-dark: #ca8a04;
    --color-warning-muted: rgba(234, 179, 8, 0.15);

    /* Info (Azul) */
    --color-info: #3b82f6;
    --color-info-dark: #1e3a8a;
    --color-info-muted: rgba(59, 130, 246, 0.15);
    --color-info-border: rgba(59, 130, 246, 0.3);

    /* ========================================
       4. CORES DE RANKING (Posições)
       ======================================== */
    --color-gold: #ffd700;
    --color-gold-muted: rgba(255, 215, 0, 0.15);

    --color-silver: #c0c0c0;
    --color-silver-muted: rgba(192, 192, 192, 0.15);

    --color-bronze: #cd7f32;
    --color-bronze-muted: rgba(205, 127, 50, 0.15);

    /* Neutro/Gray (para badges, quitados, estados neutros) */
    --color-neutral-bg: rgba(107, 114, 128, 0.15);
    --color-neutral-bg-strong: rgba(107, 114, 128, 0.2);

    /* Mitos e Micos */
    --color-mito: var(--color-gold);
    --color-mico: var(--color-danger);

    /* ========================================
       5. CORES DE TEXTO
       ======================================== */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;
    --text-muted: #a0a0a0;
    --text-disabled: #666666;
    --text-inverse: #000000;

    /* ========================================
       6. TIPOGRAFIA
       ======================================== */
    /* Famílias */
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-family-brand: 'Russo One', sans-serif;  /* Títulos, stats, CTAs */
    --font-family-mono: 'JetBrains Mono', 'Fira Code', monospace;

    /* Tamanhos */
    --font-size-xs: 10px;
    --font-size-sm: 12px;
    --font-size-base: 13px;
    --font-size-md: 14px;
    --font-size-lg: 16px;
    --font-size-xl: 20px;
    --font-size-2xl: 24px;
    --font-size-3xl: 28px;
    --font-size-hero: 32px;

    /* Pesos */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line Heights */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.75;

    /* Letter Spacing */
    --letter-spacing-tight: -0.5px;
    --letter-spacing-normal: 0;
    --letter-spacing-wide: 0.5px;
    --letter-spacing-wider: 1px;

    /* ========================================
       7. ESPAÇAMENTO
       ======================================== */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;

    /* ========================================
       8. BORDER RADIUS
       ======================================== */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 9999px;

    /* ========================================
       9. SOMBRAS
       ======================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.5);

    /* Sombras com cor primária (glow) */
    --shadow-primary: 0 4px 15px rgba(255, 85, 0, 0.4);
    --shadow-primary-lg: 0 8px 25px rgba(255, 85, 0, 0.5);
    --shadow-primary-glow: 0 0 15px rgba(255, 85, 0, 0.6);

    /* Sombras suaves multi-layer (Smooth Shadow) */
    /* Profundidade mais natural que single-layer. Dark mode calibrado. */
    --shadow-smooth-sm:
        0 0.5px 1px rgba(0, 0, 0, 0.12),
        0 1px 2px rgba(0, 0, 0, 0.12),
        0 2px 4px rgba(0, 0, 0, 0.1),
        0 4px 8px rgba(0, 0, 0, 0.08);
    --shadow-smooth-md:
        0 0.5px 1px rgba(0, 0, 0, 0.1),
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 3px 6px rgba(0, 0, 0, 0.1),
        0 8px 14px rgba(0, 0, 0, 0.08),
        0 16px 28px rgba(0, 0, 0, 0.06);
    --shadow-smooth-lg:
        0 0.5px 1px rgba(0, 0, 0, 0.08),
        0 2px 3px rgba(0, 0, 0, 0.08),
        0 4px 8px rgba(0, 0, 0, 0.08),
        0 12px 18px rgba(0, 0, 0, 0.06),
        0 24px 36px rgba(0, 0, 0, 0.06),
        0 48px 64px rgba(0, 0, 0, 0.04);
    --shadow-smooth-xl:
        0 1px 1px rgba(0, 0, 0, 0.06),
        0 2px 3px rgba(0, 0, 0, 0.06),
        0 6px 8px rgba(0, 0, 0, 0.06),
        0 12px 16px rgba(0, 0, 0, 0.06),
        0 24px 32px rgba(0, 0, 0, 0.05),
        0 48px 48px rgba(0, 0, 0, 0.04),
        0 64px 80px rgba(0, 0, 0, 0.03);

    /* Smooth glow laranja (multi-layer) */
    --shadow-smooth-primary:
        0 0.5px 2px rgba(255, 85, 0, 0.1),
        0 2px 4px rgba(255, 85, 0, 0.08),
        0 4px 8px rgba(255, 85, 0, 0.06),
        0 8px 16px rgba(255, 85, 0, 0.06),
        0 16px 32px rgba(255, 85, 0, 0.04);

    /* ========================================
       10. BORDAS
       ======================================== */
    --border-subtle: 1px solid rgba(255, 85, 0, 0.1);
    --border-default: 1px solid rgba(255, 85, 0, 0.2);
    --border-strong: 1px solid rgba(255, 85, 0, 0.3);
    --border-accent: 2px solid var(--color-primary);

    /* ========================================
       11. TRANSIÇÕES & ANIMAÇÕES
       ======================================== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* Duração de animações */
    --animation-duration-fast: 0.2s;
    --animation-duration-normal: 0.4s;
    --animation-duration-slow: 0.8s;

    /* ========================================
       12. Z-INDEX (Camadas)
       ======================================== */
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-modal-backdrop: 500;
    --z-modal: 600;
    --z-toast: 700;
    --z-tooltip: 800;

    /* ========================================
       13. ALIASES DE COMPATIBILIDADE
       ======================================== */
    /* Aliases para manter consistência com design system do app participante */
    --laranja: var(--color-primary);
    --laranja-hover: var(--color-primary-light);
    --laranja-dark: var(--color-primary-dark);
    --verde: var(--color-success);
    --vermelho: var(--color-danger);
    --azul: var(--color-info);
    --bg-base: var(--surface-bg);
    --bg-card: var(--surface-card);
    --bg-secondary: var(--surface-card-elevated);
    --bg-darker: #0d0d0d;
    --bg-elevated: #151515;
    --border-color: #2d2d2d;
    --border-subtle: #333333;
    --text-white: var(--text-primary);
    --text-muted: #9ca3af;
    --text-dim: #6b7280;
    --radius-md: 10px;

    /* Aliases --app-* para admin pages (admin-resta-um.css, admin-tiro-certo.css) */
    /* CRÍTICO: sem esses aliases os tokens ficam undefined e o CSS falha silenciosamente */
    --app-primary: var(--color-primary);
    --app-bg: var(--surface-bg);
    --app-surface: var(--surface-card);
    --app-border: #333333;
    --app-success: var(--color-success);
    --app-danger: var(--color-danger);
    --app-warning: var(--color-warning);
    --app-text-primary: var(--text-primary);
    --app-text-muted: #9ca3af;
    --app-font-brand: var(--font-family-brand);
    --app-font-mono: var(--font-family-mono);
    --app-font-sm: var(--font-size-sm);
    --app-font-xs: var(--font-size-xs);
    --app-space-1: var(--space-1);
    --app-space-2: var(--space-2);
    --app-space-3: var(--space-3);
    --app-space-4: var(--space-4);
    --app-space-5: var(--space-5);
    --app-space-6: var(--space-6);
    --app-radius-sm: var(--radius-sm);
    --app-radius-md: var(--radius-md);
    --app-radius-lg: var(--radius-lg);
    --app-radius-xl: var(--radius-xl);

    /* ========================================
       14. COMPONENTES ESPECÍFICOS
       ======================================== */
    /* Sidebar Admin */
    --sidebar-width: 280px;
    --sidebar-bg: var(--surface-card);

    /* Tabelas */
    --table-header-bg: var(--gradient-primary);
    --table-row-hover: rgba(255, 85, 0, 0.08);
    --table-row-stripe: rgba(255, 255, 255, 0.02);

    /* Botões */
    --btn-padding-sm: 8px 16px;
    --btn-padding-md: 12px 20px;
    --btn-padding-lg: 16px 24px;

    /* Inputs */
    --input-bg: var(--surface-card);
    --input-border: var(--border-default);
    --input-focus-border: var(--color-primary);

    /* Spinners */
    --spinner-size-sm: 24px;
    --spinner-size-md: 40px;
    --spinner-size-lg: 56px;

    /* ========================================
       15. CORES DOS MÓDULOS (Identidade Visual)
       ======================================== */

    /* Artilheiro Campeão - Verde (representa gols/vitória) */
    --module-artilheiro-primary: #22c55e;
    --module-artilheiro-dark: #16a34a;
    --module-artilheiro-light: #4ade80;
    --module-artilheiro-muted: rgba(34, 197, 94, 0.1);
    --module-artilheiro-border: rgba(34, 197, 94, 0.3);
    --gradient-artilheiro: linear-gradient(135deg, var(--module-artilheiro-primary) 0%, var(--module-artilheiro-dark) 100%);

    /* Capitão de Luxo - Roxo (representa capitania/liderança) */
    --module-capitao-primary: #8b5cf6;
    --module-capitao-dark: #7c3aed;
    --module-capitao-light: #a78bfa;
    --module-capitao-muted: rgba(139, 92, 246, 0.1);
    --module-capitao-border: rgba(139, 92, 246, 0.3);
    --gradient-capitao: linear-gradient(135deg, var(--module-capitao-primary) 0%, var(--module-capitao-dark) 100%);

    /* Luva de Ouro - Dourado (representa a luva de ouro/goleiros) */
    --module-luva-primary: #ffd700;
    --module-luva-dark: #f0c000;
    --module-luva-light: #ffe44d;
    --module-luva-muted: rgba(255, 215, 0, 0.1);
    --module-luva-border: rgba(255, 215, 0, 0.3);
    --gradient-luva: linear-gradient(135deg, var(--module-luva-primary) 0%, var(--module-luva-dark) 100%);

    /* Resta Um - Rose (representa eliminação/perigo) */
    --module-restaum-primary: #f43f5e;
    --module-restaum-dark: #e11d48;
    --module-restaum-light: #fb7185;
    --module-restaum-muted: rgba(244, 63, 94, 0.1);
    --module-restaum-border: rgba(244, 63, 94, 0.3);
    --gradient-restaum: linear-gradient(135deg, var(--module-restaum-primary) 0%, var(--module-restaum-dark) 100%);

    /* Tiro Certo - Laranja (representa mira/precisão) */
    --module-tirocerto-primary: #f97316;
    --module-tirocerto-dark: #ea580c;
    --module-tirocerto-light: #fb923c;
    --module-tirocerto-muted: rgba(249, 115, 22, 0.1);
    --module-tirocerto-border: rgba(249, 115, 22, 0.3);
    --gradient-tirocerto: linear-gradient(135deg, var(--module-tirocerto-primary) 0%, var(--module-tirocerto-dark) 100%);

    /* Dashboard de Saúde - Verde (representa saúde/monitoramento) */
    --module-saude-primary: #10b981;
    --module-saude-dark: #059669;
    --module-saude-light: #34d399;
    --module-saude-muted: rgba(16, 185, 129, 0.1);
    --module-saude-border: rgba(16, 185, 129, 0.3);
    --gradient-saude: linear-gradient(135deg, var(--module-saude-primary) 0%, var(--module-saude-dark) 100%);
}

/* ========================================
   ANIMAÇÕES GLOBAIS (Definir apenas 1x)
   ======================================== */

/* Spinner - ÚNICA DEFINIÇÃO */
@keyframes admin-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* Fade In */
@keyframes admin-fade-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Fade In Up */
@keyframes admin-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pulse */
@keyframes admin-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ========================================
   KEYFRAMES GENÉRICOS (aliases não-prefixados)
   Usados por módulos que referenciam nomes genéricos.
   Definidos aqui para evitar duplicação entre arquivos.
   ======================================== */

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

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

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

/* ========================================
   CLASSES UTILITÁRIAS
   ======================================== */

/* Spinner padronizado */
.admin-spinner {
    width: var(--spinner-size-md);
    height: var(--spinner-size-md);
    border: 4px solid var(--color-primary-muted);
    border-top-color: var(--color-primary);
    border-radius: var(--radius-full);
    animation: admin-spin 1s linear infinite;
}

.admin-spinner--sm {
    width: var(--spinner-size-sm);
    height: var(--spinner-size-sm);
    border-width: 3px;
}

.admin-spinner--lg {
    width: var(--spinner-size-lg);
    height: var(--spinner-size-lg);
    border-width: 5px;
}

/* Animações utilitárias */
.admin-animate-fade-in {
    animation: admin-fade-in var(--animation-duration-normal) ease-out;
}

.admin-animate-fade-in-up {
    animation: admin-fade-in-up var(--animation-duration-normal) ease-out;
}

/* ========================================
   SMOOTH SHADOW UTILITIES
   Classes utilitárias para sombras multi-layer.
   Uso: class="shadow-smooth-md" em qualquer card/container.
   ======================================== */

.shadow-smooth-sm { box-shadow: var(--shadow-smooth-sm); }
.shadow-smooth-md { box-shadow: var(--shadow-smooth-md); }
.shadow-smooth-lg { box-shadow: var(--shadow-smooth-lg); }
.shadow-smooth-xl { box-shadow: var(--shadow-smooth-xl); }
.shadow-smooth-primary { box-shadow: var(--shadow-smooth-primary); }

/* Hover: eleva para próximo nível */
.shadow-smooth-hover {
    transition: box-shadow var(--transition-normal);
}
.shadow-smooth-hover:hover {
    box-shadow: var(--shadow-smooth-lg);
}

/* ========================================
   WAVE DIVIDERS (SVG inline via data URI)
   Separadores ondulados entre seções.
   Uso: <div class="wave-divider wave-divider--dark"></div>
   ======================================== */

.wave-divider {
    width: 100%;
    height: 60px;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-position: center;
    line-height: 0;
    overflow: hidden;
    flex-shrink: 0;
}

/* Wave cor do background base (#121212) */
.wave-divider--dark {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C320,80 640,0 960,40 C1120,60 1280,20 1440,40 L1440,80 L0,80 Z' fill='%23121212'/%3E%3C/svg%3E");
}

/* Wave cor do card (#1a1a1a) */
.wave-divider--card {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C320,80 640,0 960,40 C1120,60 1280,20 1440,40 L1440,80 L0,80 Z' fill='%231a1a1a'/%3E%3C/svg%3E");
}

/* Wave cor primária (laranja sutil) */
.wave-divider--primary {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C320,80 640,0 960,40 C1120,60 1280,20 1440,40 L1440,80 L0,80 Z' fill='%23FF5500' opacity='0.08'/%3E%3C/svg%3E");
}

/* Invertido (flip vertical) */
.wave-divider--inverted {
    transform: scaleY(-1);
}

/* Menor (para espaços compactos) */
.wave-divider--sm {
    height: 36px;
}

/* Maior (para hero sections) */
.wave-divider--lg {
    height: 80px;
}

/* ========================================
   BLOB GLOW (Decorações gradientes CSS-only)
   Glows decorativos com radial-gradient + blur.
   Uso: class="blob-glow blob-glow--primary" no container pai.
   Conteúdo filho deve ter position:relative + z-index:1.
   ======================================== */

.blob-glow {
    position: relative;
    overflow: hidden;
}

.blob-glow::before {
    content: '';
    position: absolute;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    filter: blur(60px);
    opacity: 0.12;
    pointer-events: none;
    z-index: 0;
    will-change: transform;
}

/* Laranja (top-right) */
.blob-glow--primary::before {
    background: var(--color-primary);
    top: -80px;
    right: -80px;
}

/* Laranja (bottom-left) */
.blob-glow--primary-bl::before {
    background: var(--color-primary);
    bottom: -80px;
    left: -80px;
}

/* Verde sucesso (top-right) */
.blob-glow--success::before {
    background: var(--color-success);
    top: -80px;
    right: -80px;
}

/* Azul info (top-right) */
.blob-glow--info::before {
    background: var(--color-info);
    top: -80px;
    right: -80px;
}

/* Dourado (centered-top) */
.blob-glow--gold::before {
    background: var(--color-gold);
    top: -120px;
    left: 50%;
    transform: translateX(-50%);
}

/* Módulos específicos */
.blob-glow--artilheiro::before {
    background: var(--module-artilheiro-primary);
    top: -80px;
    right: -80px;
}

.blob-glow--capitao::before {
    background: var(--module-capitao-primary);
    top: -80px;
    right: -80px;
}

.blob-glow--luva::before {
    background: var(--module-luva-primary);
    top: -80px;
    right: -80px;
}

/* Intensidade aumentada (para hero sections) */
.blob-glow--intense::before {
    opacity: 0.2;
    width: 400px;
    height: 400px;
    filter: blur(80px);
}

/* ========================================
   TIPOGRAFIA BRAND (Russo One)
   ======================================== */

/* Classe base da marca */
.font-brand {
    font-family: var(--font-family-brand);
}

/* Títulos com fonte brand */
.brand-title {
    font-family: var(--font-family-brand);
    letter-spacing: 0.5px;
    line-height: var(--line-height-tight);
}

.brand-title--hero {
    font-size: var(--font-size-hero);
}

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

.brand-title--lg {
    font-size: var(--font-size-xl);
}

.brand-title--md {
    font-size: var(--font-size-lg);
}

/* Stats/números com fonte brand */
.brand-stat {
    font-family: var(--font-family-brand);
    letter-spacing: -0.5px;
    line-height: 1;
}

.brand-stat--hero {
    font-size: var(--font-size-hero);
}

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

.brand-stat--lg {
    font-size: var(--font-size-xl);
}

/* Botões/CTAs com fonte brand */
.brand-btn {
    font-family: var(--font-family-brand);
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* Labels/badges brand */
.brand-label {
    font-family: var(--font-family-brand);
    font-size: var(--font-size-sm);
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Uso recomendado:
   - Headers de módulos: background: var(--gradient-[modulo]);
   - Borders: border: 1px solid var(--module-[modulo]-border);
   - Backgrounds sutis: background: var(--module-[modulo]-muted);
   - Textos/ícones: color: var(--module-[modulo]-primary);
*/

/* ========================================
   16. BREAKPOINTS RESPONSIVOS (Mobile-First)
   ======================================== */
:root {
    /* Breakpoints canônicos */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-desktop-large: 1400px;
    --breakpoint-ultrawide: 1600px;

    /* Container max-widths */
    --container-max-width: 1600px;
    --container-padding-mobile: var(--space-4);
    --container-padding-tablet: var(--space-5);
    --container-padding-desktop: var(--space-6);
}

/* ========================================
   CLASSES UTILITÁRIAS RESPONSIVAS
   ======================================== */

/* Container centralizado com max-width */
.container-centered {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--container-padding-mobile);
}

@media (min-width: 481px) {
    .container-centered {
        padding: var(--container-padding-tablet);
    }
}

@media (min-width: 769px) {
    .container-centered {
        padding: var(--container-padding-desktop);
    }
}

/* Grid responsivo automático */
.grid-responsive {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-4);
}

@media (min-width: 481px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
        gap: var(--space-5);
    }
}

@media (min-width: 769px) {
    .grid-responsive {
        gap: var(--space-6);
    }
}

@media (min-width: 1025px) {
    .grid-responsive {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
}

/* Esconder em mobile */
.hide-mobile {
    display: none;
}

@media (min-width: 769px) {
    .hide-mobile {
        display: block;
    }
}

/* Mostrar apenas em mobile */
.show-mobile {
    display: block;
}

@media (min-width: 769px) {
    .show-mobile {
        display: none;
    }
}