/* ACM Sistema — layout: sidebar, topo, conteúdo, login */

/* ---------------------------------------------------------------
   Sidebar — branca, tema claro. Item ativo por cor de marca.
   --------------------------------------------------------------- */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar);
    display: flex;
    flex-direction: column;
    background: var(--superficie);
    border-right: 1px solid var(--cinza);
    z-index: 20;
    transition: width .15s ease, transform .15s ease;
}

.sidebar__marca {
    height: var(--topo);
    display: flex;
    align-items: center;
    padding: 0 var(--espaco);
    border-bottom: 1px solid var(--cinza);
    flex-shrink: 0;
}

.sidebar__lista {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
}

.sidebar__item a,
.sidebar__botao {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: 0;
    border-left: 3px solid transparent;
    background: none;
    color: var(--texto);
    text-align: left;
    cursor: pointer;
}

.sidebar__item a:hover,
.sidebar__botao:hover {
    background: var(--cinza-claro);
    text-decoration: none;
}

.sidebar__icone { color: var(--texto-suave); flex-shrink: 0; }

.sidebar__item--ativo > a {
    background: var(--azul-suave);
    border-left-color: var(--azul);
    color: var(--azul);
    font-weight: 600;
}
.sidebar__item--ativo .sidebar__icone { color: var(--azul); }

.sidebar__seta {
    margin-left: auto;
    color: var(--texto-suave);
    transition: transform .15s ease;
}
.sidebar__grupo--aberto .sidebar__seta { transform: rotate(90deg); }

.sidebar__filhos { display: none; padding-bottom: 4px; }
.sidebar__grupo--aberto .sidebar__filhos { display: block; }

.sidebar__filhos a {
    display: block;
    padding: 8px 16px 8px 49px;
    color: var(--texto-suave);
    font-size: .92rem;
}
.sidebar__filhos a:hover { background: var(--cinza-claro); color: var(--texto); text-decoration: none; }
.sidebar__filhos a[aria-current="page"] { color: var(--azul); font-weight: 600; }

.sidebar__rodape {
    padding: 12px 16px;
    border-top: 1px solid var(--cinza);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}
.sidebar__usuario { font-weight: 600; font-size: .9rem; }
.sidebar__perfil { color: var(--texto-suave); font-size: .8rem; }

/* Colapsada: só ícones */
body.menu-fechado .sidebar { width: var(--sidebar-fechada); }
body.menu-fechado .sidebar span,
body.menu-fechado .sidebar__seta,
body.menu-fechado .sidebar__rodape,
body.menu-fechado .sidebar__filhos { display: none; }
body.menu-fechado .sidebar__marca img { width: 32px; object-fit: cover; object-position: left; }
body.menu-fechado .area { margin-left: var(--sidebar-fechada); }

/* ---------------------------------------------------------------
   Área principal
   --------------------------------------------------------------- */
.area {
    margin-left: var(--sidebar);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    transition: margin-left .15s ease;
}

.topo {
    position: sticky;
    top: 0;
    height: var(--topo);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 var(--espaco);
    background: var(--superficie);
    border-bottom: 1px solid var(--cinza);
    z-index: 10;
}

.topo__menu {
    display: grid;
    place-items: center;
    width: 34px; height: 34px;
    border: 1px solid var(--cinza);
    border-radius: var(--raio);
    background: var(--superficie);
    color: var(--texto-suave);
    cursor: pointer;
}
.topo__menu:hover { background: var(--cinza-claro); }

.topo__titulo { font-size: 1.05rem; }

.topo__usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}
.topo__nome { color: var(--texto-suave); font-size: .9rem; }

/* Sol/lua: mostra o ícone do tema para o qual o clique LEVA — lua no claro,
   sol no escuro. Um botão só; `aria-pressed` diz se o escuro está ligado. */
.topo__tema,
.topo__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid transparent;
    border-radius: var(--raio);
    background: none;
    color: var(--texto-suave);
    cursor: pointer;
}
.topo__tema:hover,
.topo__icone:hover { background: var(--cinza-claro); color: var(--texto); }
.topo__tema-sol { display: none; }
:root[data-tema="escuro"] .topo__tema-sol { display: block; }
:root[data-tema="escuro"] .topo__tema-lua { display: none; }

.conteudo { flex: 1; padding: var(--espaco); }

/* Respiro entre os blocos da página — cartões, caixas e tabelas.
   Sem isso um bloco encosta no outro: o reset zera a margem de tudo, e nenhum
   deles trazia margem própria. O gap resolve num lugar só, e some sozinho
   quando o bloco não é renderizado (item flex ausente não gera espaço). */
.pagina {
    display: flex;
    flex-direction: column;
    gap: var(--espaco);
}

.pagina__cabecalho {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    /* O gap de .pagina já afasta o cabeçalho do que vem abaixo. */
}
.pagina__titulo { flex: 1; }
.pagina__acoes { display: flex; gap: 8px; }

/* ---------------------------------------------------------------
   Cartões do painel
   --------------------------------------------------------------- */
/* Gap maior que o resto da página: cada cartão tem borda e sombra próprias, e
   com 16px eles se leem como um bloco só em vez de quatro números separados. */
.cartoes {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
}

.cartao {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: var(--espaco);
    background: var(--superficie);
    border: 1px solid var(--cinza);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    color: var(--texto);
}
.cartao:hover { border-color: var(--azul); text-decoration: none; }
.cartao__rotulo { color: var(--texto-suave); font-size: .85rem; }
.cartao__valor { color: var(--marinho); font-size: 1.6rem; }
.cartao__nota { color: var(--texto-suave); font-size: .8rem; }

/* Cartão que mostra número, e não link: não reage ao passar o mouse, porque
   não há para onde ir. */
.cartao--dado:hover { border-color: var(--cinza); }

/* Seletor de dia do painel */
.painel-data {
    display: flex;
    align-items: center;
    gap: 8px;
}
.painel-data .campo__entrada { width: auto; min-width: 150px; }

/* ---------------------------------------------------------------
   Mini-série do painel

   Barras em CSS puro: um gráfico de verdade traria uma biblioteca inteira
   para mostrar catorze números.
   --------------------------------------------------------------- */
.serie {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 160px;
    margin-top: 12px;
    padding-bottom: 22px;   /* espaço do rótulo, que fica fora da barra */
    position: relative;
}

.serie__coluna {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    height: 100%;
    position: relative;
}

.serie__barra {
    width: 100%;
    max-width: 42px;
    background: var(--azul-suave);
    border: 1px solid var(--azul);
    border-radius: var(--raio) var(--raio) 0 0;
    min-height: 3px;
}

/* O dia escolhido no seletor fica cheio, para achar de relance. */
.serie__barra--hoje { background: var(--azul); }

.serie__rotulo {
    position: absolute;
    bottom: -20px;
    font-size: .72rem;
    color: var(--texto-suave);
    white-space: nowrap;
}

.texto-erro { color: var(--erro); }

/* Sobra e falta são notícias diferentes, e a cor diz qual é antes de a
   pessoa ler o número — a diferença do caixa é o caso que criou isto. */
.texto-sucesso { color: var(--sucesso); }

/* ---------------------------------------------------------------
   Login
   --------------------------------------------------------------- */
.tela-limpa { display: grid; place-items: center; min-height: 100vh; }

.login {
    width: 100%;
    max-width: 380px;
    padding: var(--espaco);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.login__caixa {
    background: var(--superficie);
    border: 1px solid var(--cinza);
    border-radius: var(--raio);
    box-shadow: var(--sombra-alta);
    padding: 28px 24px;
}

.login__logo { margin: 0 auto 20px; }
.login__titulo { font-size: 1.1rem; text-align: center; margin-bottom: 20px; }
.login__form { display: flex; flex-direction: column; gap: 14px; }
.login__rodape { text-align: center; color: var(--texto-suave); font-size: .8rem; }

/* ---------------------------------------------------------------
   Erro
   --------------------------------------------------------------- */
.erro { max-width: 640px; margin: 48px auto; text-align: center; padding: var(--espaco); }
.erro__codigo { font-size: 3.5rem; font-weight: 700; color: var(--cinza); line-height: 1; }
.erro__titulo { margin: 8px 0 20px; }
.erro__detalhe {
    text-align: left;
    background: var(--superficie);
    border: 1px solid var(--cinza);
    border-radius: var(--raio);
    padding: 12px;
    overflow-x: auto;
    font-size: .8rem;
    white-space: pre-wrap;
    word-break: break-word;
}

/* ---------------------------------------------------------------
   Responsivo — abaixo de 900px a sidebar vira off-canvas
   --------------------------------------------------------------- */
@media (max-width: 900px) {
    .sidebar { transform: translateX(-100%); box-shadow: var(--sombra-alta); }
    body.menu-aberto .sidebar { transform: translateX(0); }
    .area, body.menu-fechado .area { margin-left: 0; }

    body.menu-aberto::after {
        content: "";
        position: fixed;
        inset: 0;
        background: var(--veu);
        z-index: 15;
    }
}

/* ------------------------------------------------------------------
   Relatórios (docs/18-relatorios.md)
   ------------------------------------------------------------------ */

/* Ficha do papel: existe só na impressão. Na tela o título e o seletor já
   dizem tudo, mas a folha impressa precisa carregar sozinha de que empresa,
   de que período e de que momento ela é. */
.relatorio__ficha { display: none; }

.relatorio__contexto {
    margin: 0;
    padding: 10px 16px 14px;
    font-size: .87rem;
}

/* Série longa: com mais de vinte colunas os rótulos se encavalam e viram
   borrão. Esconder um sim, um não mantém a régua legível sem tirar a barra. */
.serie--densa .serie__coluna:nth-child(even) .serie__rotulo { display: none; }
.serie--densa { gap: 2px; }
.serie--densa .serie__barra { max-width: none; }

/* ---------------------------------------------------------------
   Faixa do "entrar como" (docs/10-acessos.md)

   Fixa no RODAPÉ, e não no topo: o topo já é sticky e as duas barras
   brigariam pela mesma linha. Daqui a saída acompanha a rolagem — o
   botão de voltar está a um clique em qualquer tela, e a cor de alerta
   impede o engano de operar achando que é a própria conta.
   --------------------------------------------------------------- */
.personificacao {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 10px var(--espaco);
    background: var(--alerta-fundo);
    border-top: 3px solid var(--alerta);
    color: var(--alerta-texto);
    font-size: .9rem;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, .1);
}

.personificacao form { margin: 0; }

/* O rodapé fixo não pode cobrir o fim da página: é exatamente ali que mora o
   botão de salvar de um formulário longo. */
.personificando .conteudo { padding-bottom: 88px; }