/* ============================================================
   estilo.css - O VISUAL DA APLICAÇÃO
   O CSS controla cores, tamanhos e posições. Ele não tem
   "lógica": só descreve como cada elemento deve aparecer.
   ============================================================ */

/* Variáveis de cor: definimos uma vez e reutilizamos com var().
   Para mudar o tema do sistema inteiro, basta mexer aqui. */
:root {
    --cor-principal: #5b3a8e;      /* roxo dos botões e do topo */
    --cor-principal-escura: #472c70;
    --cor-fundo: #f4f2f8;          /* fundo cinza-lilás claro */
    --cor-texto: #2b2b2b;
    --cor-erro: #c0392b;           /* vermelho das mensagens de erro */
    --cor-sucesso: #1e7e34;        /* verde das mensagens de sucesso */
}

/* O seletor * atinge TODOS os elementos.
   box-sizing: border-box faz o padding não "estourar" a largura. */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: "Segoe UI", Arial, sans-serif; /* fonte do sistema */
    background-color: var(--cor-fundo);
    color: var(--cor-texto);
}

/* ---------------- TELA DE LOGIN ---------------- */

/* A caixa branca centralizada do login */
.caixa-login {
    max-width: 380px;          /* largura máxima da caixa */
    margin: 10vh auto;         /* 10% da tela acima + centralizada */
    background: white;
    padding: 32px;
    border-radius: 12px;       /* cantos arredondados */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12); /* sombra suave */
    text-align: center;
}

.subtitulo {
    color: #777;
    margin: 8px 0 24px;
}

/* ---------------- TOPO (index.html) ---------------- */

.topo {
    background: var(--cor-principal);
    color: white;
    padding: 14px 24px;
    display: flex;                   /* coloca os itens lado a lado */
    justify-content: space-between;  /* título à esquerda, botões à direita */
    align-items: center;
    flex-wrap: wrap;
}

.topo h1 {
    font-size: 1.3rem;
}

.topo-direita {
    display: flex;
    align-items: center;
    gap: 12px;   /* espacinho entre o nome e o botão Sair */
}

/* ---------------- ÁREA DE CONTEÚDO ---------------- */

.conteudo {
    max-width: 1000px;
    margin: 24px auto;   /* centraliza na tela */
    padding: 0 16px;
}

/* "Cartão" branco que envolve o formulário e a lista */
.cartao {
    background: white;
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cartao h2 {
    margin-bottom: 16px;
    color: var(--cor-principal);
}

/* ---------------- FORMULÁRIO ---------------- */

/* Cada .linha é uma fileira de campos lado a lado.
   flex-wrap: wrap deixa os campos "quebrarem" para a linha de
   baixo quando a tela é pequena (celular). */
.linha {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.campo {
    flex: 1;              /* cada campo divide o espaço igualmente */
    min-width: 140px;     /* mas nunca fica menor que isso */
    display: flex;
    flex-direction: column;  /* etiqueta em cima, campo embaixo */
}

.campo-grande  { flex: 2; }        /* ocupa o dobro do espaço */
.campo-pequeno { flex: 0.5; min-width: 80px; }

label {
    font-size: 0.85rem;
    font-weight: 600;
    margin-bottom: 4px;
    text-align: left;
}

input, select {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1rem;
    width: 100%;
}

/* :focus = quando o campo está selecionado (cursor dentro dele) */
input:focus, select:focus {
    outline: 2px solid var(--cor-principal);
    border-color: var(--cor-principal);
}

/* No login, dá um respiro entre os campos empilhados */
.caixa-login input {
    margin-bottom: 16px;
}

/* ---------------- BOTÕES ---------------- */

button {
    background: var(--cor-principal);
    color: white;
    border: none;
    padding: 10px 24px;
    border-radius: 8px;
    font-size: 1rem;
    cursor: pointer;   /* mãozinha ao passar o mouse */
}

/* :hover = quando o mouse está em cima */
button:hover {
    background: var(--cor-principal-escura);
}

.botao-secundario {
    background: #888;
}
.botao-secundario:hover {
    background: #666;
}

.botoes-formulario {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

/* Botões pequenos de Editar/Excluir dentro da tabela */
.botao-mini {
    padding: 6px 10px;
    font-size: 0.85rem;
    margin-right: 6px;
}
.botao-perigo {
    background: var(--cor-erro);
}
.botao-perigo:hover {
    background: #96281b;
}

/* ---------------- BUSCA E TABELA ---------------- */

.campo-busca {
    margin-bottom: 16px;
}

/* Permite rolar a tabela para o lado em telas estreitas */
.tabela-rolagem {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;  /* junta as bordas das células */
}

th, td {
    text-align: left;
    padding: 10px 8px;
    border-bottom: 1px solid #eee;
}

th {
    color: var(--cor-principal);
    font-size: 0.85rem;
    text-transform: uppercase;  /* deixa o cabeçalho em MAIÚSCULAS */
}

/* Listra as linhas: pares com fundo levemente cinza */
tbody tr:nth-child(even) {
    background: #fafafa;
}

/* ---------------- MENSAGENS E UTILITÁRIOS ---------------- */

.mensagem {
    margin-top: 12px;
    font-weight: 600;
    min-height: 1.2em;  /* reserva o espaço para a página não "pular" */
}
.mensagem.erro    { color: var(--cor-erro); }
.mensagem.sucesso { color: var(--cor-sucesso); }

/* Classe utilitária: qualquer elemento com ela some da tela.
   O JavaScript adiciona/remove esta classe quando precisa. */
.escondido {
    display: none;
}