:root {
    /* --- Paleta de Cores Moderna (2025) --- */
    --primary-color: #2C3E50;       /* Azul Petróleo Profundo */
    --primary-light: #34495e;
    --accent-color: #3498DB;        /* Azul Vibrante (Ações) */
    --bg-body: #f4f6f9;             /* Fundo Cinza Gelo (Mais agradável que branco) */
    --bg-card: #ffffff;
    
    /* Status (Tons mais sofisticados) */
    --success-color: #10b981;       /* Verde Esmeralda */
    --danger-color: #ef4444;        /* Vermelho Vivo */
    --warning-color: #f59e0b;       /* Laranja Âmbar */
    --info-color: #3b82f6;          /* Azul Royal */

    /* Sombras (Elevation) */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    
    /* Arredondamento */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Dark Mode Base */
    --dark-bg: #0f2027;
    --card-dark-bg: #1e293b;
    --border-dark-color: rgba(255, 255, 255, 0.1);
    --text-light-color: #e2e8f0;
}

/* css/base.css */

body {
    font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    background-color: var(--bg-body);
    color: #334155;
    padding-top: 20px; 
    padding-left: 260px; 
    
    /* MUDANÇA AQUI: Aumentar fonte base e altura da linha */
    font-size: 0.95rem; /* Era padrão (0.875rem ou 14px), agora é um pouco maior */
    line-height: 1.6;   /* Melhor leitura */
    
    -webkit-font-smoothing: antialiased;
    transition: padding-left 0.3s ease;
}

/* Wrapper para o conteúdo principal */
.main-content-wrapper {
    width: 100%;
    padding: 20px;
    max-width: 1600px; /* Limite para telas ultra-wide */
    margin: 0 auto;
}

/* Responsividade Mobile */
@media (max-width: 991.98px) {
    body { padding-left: 0; padding-top: 60px; } /* Remove margem no mobile */
    .main-content-wrapper { padding: 10px; }
}

/* Se for técnico, remove a margem lateral (pois ele não vê a sidebar do admin) */
body.role-tecnico {
    padding-left: 0 !important;
}

/* Utilitários Globais */
.hidden-on-load { display: none !important; }
.serial-copied { background-color: #d4edda !important; color: #155724 !important; font-style: italic; }
.content-section { display: none; max-width: 1400px; margin: 0 auto; padding: 15px; }
.content-section.active { display: block; }

/* Spinner Global */
.spinner-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(248, 249, 250, 0.8);
    display: flex; justify-content: center; align-items: center; z-index: 2000;
    transition: opacity 0.3s ease;
}
.card-spinner-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(255, 255, 255, 0.7);
    display: flex; justify-content: center; align-items: center; z-index: 10;
    border-radius: var(--radius-md);
}

/* TRUQUE MÁGICO PARA NOMES */

/* Força MAIÚSCULO em locais chave onde aparecem nomes de usuário */
.feed-title,             /* Títulos do Feed */
.req-user,               /* Nome nas requisições */
.podium-name,            /* Nome no Ranking */
.fw-bold.text-dark,      /* Maioria dos nomes em tabelas */
td a.fw-bold,            /* Links de nomes em tabelas */
.sidebar-section-label + .alert strong, /* Nomes na Sidebar nova */
h4 span,                 /* Nome no "Olá, Fulano" */
option                   /* Nomes dentro de Selects */
{
    text-transform: uppercase !important;
}

/* Opcional: Se quiser aplicar em TUDO que parece um nome de usuário, 
   crie uma classe .user-name e use nos seus HTMLs novos */
.user-name {
    text-transform: uppercase !important;
}

/*==================================================================*/