/* =====================================================================
   BASE.CSS — reset, variáveis, acessibilidade e componentes compartilhados
   Tudo em rem: o controle de fonte (3 A's) muda o font-size do <html>,
   e como todo o resto está em rem, a interface inteira escala junto.
   ===================================================================== */

:root {
    /* Cores padrão (sobrescritas dinamicamente por tenant via <style> inline) */
    --cor-primaria: #2563EB;
    --cor-secundaria: #1E40AF;
    --cor-fundo: #FFFFFF;
    --cor-texto: #1F2937;

    --cor-fundo-card: #FFFFFF;
    --cor-borda: #E5E7EB;
    --cor-erro: #DC2626;
    --cor-erro-fundo: #FEF2F2;
    --cor-sucesso: #059669;
    --cor-info-fundo: #EFF6FF;
    --cor-alerta-fundo: #FFFBEB;
    --cor-alerta-borda: #FDE68A;
    --cor-alerta-texto: #78350F;

    --raio-borda: 0.5rem;
    --sombra: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --fonte-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

    /* Nível de fonte controlado pelo JS (3 A's). 16px = padrão (A) */
    font-size: 16px;
}

/* Modo escuro: aplicado via atributo no <html>, setado pelo tema.js/acessibilidade.js */
:root[data-modo="escuro"] {
    --cor-fundo: #111827;
    --cor-texto: #F3F4F6;
    --cor-fundo-card: #1F2937;
    --cor-borda: #374151;
    --cor-erro-fundo: #451A1A;
    --cor-info-fundo: #1E3A5F;
    --cor-alerta-fundo: #3F2D0B;
    --cor-alerta-borda: #92702C;
    --cor-alerta-texto: #FDE68A;
}

/* Detecta preferência do sistema quando o tenant não define modo fixo
   (o JS só aplica esse fallback se não houver escolha salva em localStorage) */
@media (prefers-color-scheme: dark) {
    :root[data-modo="auto"] {
        --cor-fundo: #111827;
        --cor-texto: #F3F4F6;
        --cor-fundo-card: #1F2937;
        --cor-borda: #374151;
        --cor-erro-fundo: #451A1A;
        --cor-info-fundo: #1E3A5F;
        --cor-alerta-fundo: #3F2D0B;
        --cor-alerta-borda: #92702C;
        --cor-alerta-texto: #FDE68A;
    }
}

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

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--fonte-base);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    transition: background-color 0.2s ease, color 0.2s ease;
}

img { max-width: 100%; display: block; }

a { color: var(--cor-primaria); }

button {
    font-family: inherit;
    cursor: pointer;
}

/* ---------------------------------------------------------------------
   Área de toque mínima (WCAG / requisito do projeto: 44x44px)
   Aplicar em TODO botão e link clicável da interface.
   --------------------------------------------------------------------- */
.touch-target {
    min-height: 2.75rem;   /* 44px em 16px base */
    min-width: 2.75rem;
    padding: 0.5rem 0.75rem;
}

/* ---------------------------------------------------------------------
   Componentes básicos reutilizados em catálogo e admin
   --------------------------------------------------------------------- */
.botao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--raio-borda);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.botao--primario {
    background-color: var(--cor-primaria);
    color: #FFFFFF;
}

.botao--primario:hover { background-color: var(--cor-secundaria); }

.botao--secundario {
    background-color: transparent;
    color: var(--cor-primaria);
    border: 1px solid var(--cor-primaria);
}

.botao--perigo {
    background-color: var(--cor-erro);
    color: #FFFFFF;
}

.botao--perigo:hover { opacity: 0.9; }

.botao--perigo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.botao--bloco { width: 100%; }

.campo {
    margin-bottom: 1rem;
    text-align: left;
}

.campo label {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
}

.campo__input {
    width: 100%;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
    font-size: 1rem;
}

.campo__input:focus {
    outline: 2px solid var(--cor-primaria);
    outline-offset: 1px;
}

.campo--checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.campo-senha {
    position: relative;
    display: flex;
    align-items: center;
}

.campo-senha .campo__input { padding-right: 3rem; }

.campo-senha__olhinho {
    position: absolute;
    right: 0.25rem;
    background: none;
    border: none;
    color: var(--cor-texto);
    display: flex;
    align-items: center;
    justify-content: center;
}

.alerta {
    padding: 0.75rem 1rem;
    border-radius: var(--raio-borda);
    margin-bottom: 1rem;
    font-size: 0.9rem;
}

.alerta--erro {
    background-color: var(--cor-erro-fundo);
    color: var(--cor-erro);
}

.alerta--info {
    background-color: var(--cor-info-fundo);
    color: var(--cor-primaria);
}

.pagina-erro {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    text-align: center;
    padding: 2rem;
}

/* ---------------------------------------------------------------------
   Barra de acessibilidade (3 A's + toggle dark/light)
   Presente em todas as páginas (catálogo e admin)
   --------------------------------------------------------------------- */
.barra-acessibilidade {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background-color: var(--cor-fundo-card);
    border-bottom: 1px solid var(--cor-borda);
}

.barra-acessibilidade__grupo-fonte {
    display: flex;
    gap: 0.25rem;
    border: 1px solid var(--cor-borda);
    border-radius: var(--raio-borda);
    padding: 0.125rem;
}

.barra-acessibilidade button {
    background: transparent;
    border: none;
    border-radius: calc(var(--raio-borda) - 0.125rem);
    color: var(--cor-texto);
    font-weight: 600;
}

.barra-acessibilidade button[aria-pressed="true"],
.barra-acessibilidade button.ativo {
    background-color: var(--cor-primaria);
    color: #FFFFFF;
}

@media (max-width: 480px) {
    .barra-acessibilidade { flex-wrap: wrap; justify-content: center; }
}
