/* ==========================================================================
   Lista de Variáveis CSS e Classes Correspondentes
   ========================================================================== */

/* --primary-color:
   Usado em:
   - .top-bar
   - .sidebar-header
   - .sidebar-links li a:hover
   - .sidebar-overlay
   - .btn-wap
*/

/* --text-color:
   Usado em:
   - body
*/

/* --link-color:
   Usado em:
   - a
*/

/* --primary-text-color */

/* --card-bg:
   Usado em:
   - .card-section
*/

/* --conversation-item-bg:
   Usado em:
   - .inbox-conversation-item
*/

/* --conversation-item-even-bg:
   Usado em:
   - .inbox-conversation-item.even-row
*/

/* --message-sent-bg:
   Usado em:
   - .my-group .message-bubble
*/

/* --message-received-bg:
   Usado em:
   - .other-group .message-bubble
*/

/* --mural-item-bg:
   Usado em:
   - .mural-item
   - .materia-item
   - .search-result-item
   - .pending-item
*/

/* ========================================= */
/* 0. Tokens globais (estáticos)             */
/* ========================================= */
:root {
    /* Semânticos — valores canônicos decididos em 2026-07-17 */
    --danger:  #dc3545;
    --success: #2e7d32;
    --warning: #f5b301;
    /* Status de presença */
    --online:  #27ae60;
    --offline: #7f8c8d;
    /* Linhas/bordas (dependem de --text-color, resolvido em render-time) */
    --line-1: color-mix(in srgb, var(--text-color) 40%, transparent);
    --line-2: color-mix(in srgb, var(--text-color) 22%, transparent);
    --line:   color-mix(in srgb, var(--text-color) 12%, transparent);
    /* Moeda (Pontos) — um único dourado para saldo, preço e toast */
    --coin: #d4a017;
    /* Casas da Roleta — fixas nos dois temas: pano de mesa é pano de mesa, e o
       preto não pode virar branco no tema escuro como o --text-color viraria.
       --roleta-texto existe pelo mesmo motivo: o texto sobre as casas fica
       branco nos dois temas, e um `#fff` solto em jogos.css (que hoje não tem
       nenhum hex) furaria o checklist do design-system. */
    --roleta-vermelho: #b3202e;
    --roleta-preto:    #1c1c1c;
    /* O dourado do jackpot é o mesmo dos Pontos — apontar pro token em vez de
       repetir o hex evita a divergência que já aconteceu com --coin. */
    --roleta-dourado: var(--coin);
    --roleta-texto:    #fff;
    /* Ícones de login social — cor de identidade do provedor, fixa nos dois
       temas pelo mesmo motivo da Roleta acima: é a marca do Google/TikTok/X,
       não uma cor do tema do site. Google usa o "G" oficial de 4 cores
       (SVG), por isso não tem token de cor única aqui. */
    --social-tiktok:   #000000;
    --social-x:        #000000;
    /* Botão de play do [youtube] do BBCode: vermelho da marca, mesmo motivo. */
    --social-youtube:       #ff0000;
    --social-youtube-texto: #ffffff;
}

/* ========================================= */
/* 1. Estilos Globais e Reset Básico         */
/* ========================================= */

/* A página nunca deve ganhar rolagem horizontal — qualquer elemento vazando
   largura criava uma scrollbar overlay "fantasma" no rodapé durante a rolagem.
   `clip` e não `hidden`: hidden criaria um scroll container e quebraria os
   position: sticky (ex.: barra de envio das PMs). */
html, body { overflow-x: clip; }

body {
   font-family: 'Inter', sans-serif;
   font-size: 1em;
   color: var(--text-color);
   margin: 0;
   padding: 0;
   line-height: 1.6;
   text-align: center;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
}

a {
   color: var(--link-color);
   text-decoration: none;
   transition: color 0.3s ease-in-out;
}

a:hover {
   color: var(--link-color);
   filter: brightness(85%);
}

/* Container principal da página (visual de "corpo do site") */
.container {
   width: 100%;
   max-width: 100%;
   padding-left: 0;
   padding-right: 0;
   margin-left: 0;
   margin-right: 0;
}

p {
   margin-bottom: 1em;
}

/* --- Estilo de Divisor de Seção (HR) --- */
hr {
   border: none;
   border-top: 2px solid #eeeeee; /* Linha mais grossa e sutil para separação */
   margin: 20px 0; /* Espaço para respirar */
}

/* ========================================= */
/* 3. Seções de Conteúdo (Gerais)            */
/* ========================================= */
.content-area {
   padding: 5px;
}

.content-area a {
   text-decoration: none;
}

.hidden {
   display: none !important;
}

.text-danger {
   color: var(--danger);
}

.permission-denied {
   text-align: center;
   padding: 20px;
}

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

.field-input-wrapper {
   position: relative;
   display: flex;
   align-items: center;
   gap: 8px; /* espaço entre o campo e o ícone */
}

.field-input-wrapper input[type="date"] {
   width: 100%;
   flex: 1; /* ocupa todo o espaço disponível no wrapper */
}

.field-has-error input,
.field-has-error select,
.field-has-error textarea {
   border-color: var(--danger);
}