/*
  Basalto AI — Tema visual compartilhado (Sprint 3 — UX/UI e Responsividade).

  Fundação de design usada por todas as telas (login, Kanban, OS). Define
  tokens (cores, tipografia, espaçamento, raio, sombra) e primitivas de
  componente (botão, card, campo de formulário, badge) para acabar com a
  fragmentação de estilo entre <style> embutido por template.

  Breakpoints padronizados do sistema (usar estes valores em qualquer
  media query nova, para telas continuarem consistentes entre si):
    - até 480px   → celular
    - 481–768px   → celular grande / tablet retrato
    - 769–1024px  → tablet paisagem / notebook pequeno
    - acima de 1024px → notebook / desktop
*/

:root{
    /* Cores de marca / ação — significado consistente em todo o sistema */
    --cor-primaria:#0d6efd;       /* ação neutra/informativa (ex.: abrir mapa, salvar) */
    --cor-primaria-escura:#0b5ed7;
    --cor-sucesso:#198754;         /* ação positiva/conclusão (ex.: concluir, ligar) */
    --cor-sucesso-escura:#15803d;
    --cor-atencao:#fd7e14;           /* ação que precisa de atenção (ex.: pendência, saída) */
    --cor-atencao-escura:#dc6803;
    --cor-neutra:#6c757d;              /* ação secundária/utilitária (ex.: baixar, reprocessar) */
    --cor-neutra-escura:#565e64;
    --cor-perigo:#dc3545;                 /* alerta/erro/retrabalho */

    /* Pares fundo/texto/borda para estados de sucesso e erro — únicas
       definições destas cores; qualquer alerta/badge/mensagem de
       sucesso ou erro deve referenciar estes tokens, nunca repetir os
       valores hexadecimais. */
    --cor-sucesso-fundo:#d1e7dd;
    --cor-sucesso-texto:#0f5132;
    --cor-sucesso-borda:#badbcc;
    --cor-perigo-fundo:#f8d7da;
    --cor-perigo-texto:#842029;
    --cor-perigo-borda:#f1aeb5;
    --cor-atencao-fundo:#ffe5cc;
    --cor-atencao-texto:#8a4a0d;
    --cor-atencao-borda:#f0c090;

    /* Texto e fundo */
    --cor-texto:#212529;
    --cor-texto-suave:#5f6a72;
    --cor-fundo:#f2f4f7;
    --cor-fundo-elevado:#ffffff;
    --cor-borda:#d7dce1;

    /* Tipografia */
    --fonte-base:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --texto-sm:13px;
    --texto-md:15px;
    --texto-lg:18px;
    --texto-xl:24px;

    /* Espaçamento (escala 4px) */
    --espaco-1:4px;
    --espaco-2:8px;
    --espaco-3:12px;
    --espaco-4:16px;
    --espaco-5:20px;
    --espaco-6:24px;
    --espaco-8:32px;

    /* Raio e sombra */
    --raio-sm:6px;
    --raio-md:10px;
    --raio-lg:14px;
    --sombra-sm:0 1px 4px rgba(0,0,0,.12);
    --sombra-md:0 2px 8px rgba(0,0,0,.12);

    /* Alvo de toque mínimo recomendado (Apple HIG / Material) — usado nos
       botões da tela do Técnico, pensada para uso em campo com uma mão */
    --alvo-toque-min:44px;
}

*{
    box-sizing:border-box;
}

body{
    margin:0;
    font-family:var(--fonte-base);
    color:var(--cor-texto);
    background:var(--cor-fundo);
}

/* Card genérico — mesmo visual em qualquer tela */
.card{
    background:var(--cor-fundo-elevado);
    border-radius:var(--raio-md);
    box-shadow:var(--sombra-sm);
}

/* Campos de formulário — mesmo visual em qualquer tela */
.input,
input[type="text"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select{
    width:100%;
    padding:var(--espaco-3);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-sm);
    font-size:var(--texto-md);
    font-family:var(--fonte-base);
    background:var(--cor-fundo-elevado);
    color:var(--cor-texto);
}

textarea{
    resize:vertical;
}

label{
    display:block;
    margin-bottom:var(--espaco-1);
    font-size:var(--texto-sm);
    font-weight:600;
    color:var(--cor-texto-suave);
}

/* Agrupa label + campo com espaçamento consistente entre campos de um
   formulário. Uso: <div class="campo"><label>…</label><input …></div> */
.campo{
    margin-bottom:var(--espaco-4);
}

.campo:last-child{
    margin-bottom:0;
}

/* Alerta — aviso de página (ex.: erro de login), distinto do badge
   (selo inline pequeno). Uso: <div class="alerta alerta-perigo">…</div> */
.alerta{
    padding:var(--espaco-3) var(--espaco-4);
    border-radius:var(--raio-sm);
    font-size:var(--texto-sm);
    text-align:center;
    margin-bottom:var(--espaco-4);
}

.alerta-perigo{
    background:var(--cor-perigo-fundo);
    color:var(--cor-perigo-texto);
    border:1px solid var(--cor-perigo-borda);
}

.alerta-sucesso{
    background:var(--cor-sucesso-fundo);
    color:var(--cor-sucesso-texto);
    border:1px solid var(--cor-sucesso-borda);
}

/* Botão — uma única primitiva com modificadores de cor semântica.
   Uso: <button class="btn btn-sucesso">…</button> */
.btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:var(--espaco-2);
    min-height:var(--alvo-toque-min);
    padding:var(--espaco-3) var(--espaco-5);
    border:none;
    border-radius:var(--raio-sm);
    font-size:var(--texto-md);
    font-family:var(--fonte-base);
    font-weight:600;
    color:#fff;
    text-decoration:none;
    cursor:pointer;
    transition:background-color .15s, transform .1s;
}

.btn:active{
    transform:scale(.97);
}

.btn:disabled{
    opacity:.55;
    cursor:not-allowed;
}

.btn-primario{background:var(--cor-primaria);}
.btn-primario:hover{background:var(--cor-primaria-escura);}

.btn-sucesso{background:var(--cor-sucesso);}
.btn-sucesso:hover{background:var(--cor-sucesso-escura);}

.btn-atencao{background:var(--cor-atencao);}
.btn-atencao:hover{background:var(--cor-atencao-escura);}

.btn-neutro{background:var(--cor-neutra);}
.btn-neutro:hover{background:var(--cor-neutra-escura);}

.btn-perigo{background:var(--cor-perigo);}

/* Botão de destaque — para a ação principal de uma tela (ex.: Concluir
   Atendimento). Maior e com mais peso visual que os demais. */
.btn-destaque{
    min-height:52px;
    padding:var(--espaco-4) var(--espaco-6);
    font-size:var(--texto-lg);
}

/* Botão secundário compacto — ação densa dentro de uma linha de lista/card
   (ex.: Editar/Senha/Ativar/Inativar por usuário, Baixar/Marcar validado por
   backup), onde um .btn sólido lado a lado ficaria pesado demais. */
.admin-btn-acao{
    flex:1 1 auto;
    min-height:var(--alvo-toque-min);
    padding:var(--espaco-2) var(--espaco-3);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-sm);
    background:var(--cor-fundo-elevado);
    color:var(--cor-texto);
    font-family:var(--fonte-base);
    font-size:var(--texto-sm);
    font-weight:600;
    cursor:pointer;
    transition:background-color .15s, transform .1s;
    white-space:nowrap;
}

.admin-btn-acao:hover{
    background:var(--cor-fundo);
}

.admin-btn-acao:active{
    transform:scale(.97);
}

.admin-btn-acao-perigo{
    border-color:var(--cor-perigo-borda);
    color:var(--cor-perigo-texto);
}

.admin-btn-acao-perigo:hover{
    background:var(--cor-perigo-fundo);
}

.admin-btn-acao-sucesso{
    border-color:var(--cor-sucesso-borda);
    color:var(--cor-sucesso-texto);
}

.admin-btn-acao-sucesso:hover{
    background:var(--cor-sucesso-fundo);
}

/* Badge — selo pequeno (ex.: perfil do usuário, retrabalho) */
.badge{
    display:inline-block;
    padding:2px var(--espaco-2);
    border-radius:999px;
    font-size:var(--texto-sm);
    font-weight:600;
}

.badge-perigo{background:var(--cor-perigo-fundo);color:var(--cor-perigo-texto);}
.badge-neutro{background:#e9ecef;color:var(--cor-texto-suave);}
.badge-sucesso{background:var(--cor-sucesso-fundo);color:var(--cor-sucesso-texto);}
.badge-atencao{background:var(--cor-atencao-fundo);color:var(--cor-atencao-texto);}

/* Cabeçalho compartilhado (usuário logado + logout) — usado a partir da
   Etapa 3 pelas telas autenticadas (Kanban e OS). */
.topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:var(--espaco-3);
    padding:var(--espaco-3) var(--espaco-5);
    background:var(--cor-fundo-elevado);
    border-bottom:1px solid var(--cor-borda);
    margin-bottom:var(--espaco-5);
    flex-wrap:wrap;
}

.topbar .marca{
    font-weight:800;
    font-size:1.6rem;
    letter-spacing:-.02em;
    color:var(--cor-texto);
    text-decoration:none;
    display:flex;
    align-items:center;
}

.marca-logo{
    display:block;
    height:36px;
    max-width:160px;
    width:auto;
    object-fit:contain;
}

/* Ações do cabeçalho (Homologação Operacional): importar + menu de
   Administração, entre a marca e o bloco de usuário/logout. Nenhuma das
   duas compete visualmente com a marca nem com o Kanban — ícones
   "fantasma" (sem fundo/borda em repouso), só ganham contorno no hover. */
.topbar-acoes{
    display:flex;
    align-items:center;
    gap:var(--espaco-1);
    margin-left:auto;
}

.topbar-icone{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:var(--alvo-toque-min,44px);
    min-height:var(--alvo-toque-min,44px);
    border:1px solid transparent;
    border-radius:var(--raio-sm);
    background:none;
    color:var(--cor-texto-suave);
    font-size:var(--texto-md);
    text-decoration:none;
    cursor:pointer;
    font-family:var(--fonte-base);
    transition:background-color .15s, border-color .15s;
}

.topbar-icone:hover{
    background:var(--cor-fundo);
    border-color:var(--cor-borda);
}

.topbar-admin{
    position:relative;
}

/* display:block fixo (não display:none/block) para a transição de
   opacidade/deslocamento funcionar — position:absolute já garante que
   isto nunca ocupa espaço no fluxo do cabeçalho, fechado ou aberto. */
.topbar-admin-menu{
    display:block;
    position:absolute;
    right:0;
    top:calc(100% + 6px);
    min-width:210px;
    background:var(--cor-fundo-elevado);
    border:1px solid var(--cor-borda);
    border-radius:var(--raio-md);
    box-shadow:var(--sombra-md);
    padding:var(--espaco-2);
    z-index:20;
    opacity:0;
    transform:translateY(-6px);
    pointer-events:none;
    transition:opacity .12s ease, transform .12s ease;
}

.topbar-admin-menu.aberto{
    opacity:1;
    transform:translateY(0);
    pointer-events:auto;
}

.topbar-admin-titulo{
    margin:0 0 var(--espaco-2);
    padding:0 var(--espaco-2);
    font-size:var(--texto-sm);
    font-weight:700;
    color:var(--cor-texto-suave);
}

/* Itens do menu — links reais desde o Módulo de Administração (antes
   eram <button disabled>, "Em breve"); mesmo visual para os já
   implementados e para os que abrem a tela "Em desenvolvimento". */
.topbar-admin-menu a{
    display:block;
    width:100%;
    text-align:left;
    padding:var(--espaco-2);
    border:none;
    background:none;
    font-family:var(--fonte-base);
    font-size:var(--texto-sm);
    color:var(--cor-texto);
    text-decoration:none;
    border-radius:var(--raio-sm);
    transition:background-color .15s;
}

.topbar-admin-menu a:hover{
    background:var(--cor-fundo);
}

.topbar .usuario{
    display:flex;
    align-items:center;
    gap:var(--espaco-3);
    font-size:var(--texto-sm);
    color:var(--cor-texto-suave);
}

.topbar .usuario a{
    color:var(--cor-neutra-escura);
    text-decoration:none;
    font-weight:600;
}

.topbar .usuario a:hover{
    text-decoration:underline;
}

/* Foco visível para navegação por teclado — acessibilidade mínima */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
    outline:2px solid var(--cor-primaria);
    outline-offset:2px;
}