/* ==========================================================================
   Sistema de Fechamento de Caixa e Vendas de Passe
   Folha de estilo unica — derivada de docs/04_WIREFRAMES.html (doc 04 §9)

   Regras:
   - Esta e a UNICA folha de estilo do sistema. Nao criar CSS por pagina.
   - Nao usar estilo inline nos templates: usar as classes daqui.
   - Nao acrescentar biblioteca de CSS (doc 01, principios 2 e 10).
   ========================================================================== */

/* --- 1. Tokens de design (doc 04 §9.1) ------------------------------------ */
:root {
  /* Superficies */
  --surface-1: #f3f4f6;   /* fundo da pagina e blocos internos */
  --surface-2: #ffffff;   /* cartoes e areas de conteudo */
  --border:    #e4e6ea;

  /* Acao */
  --fill-accent:    #2f6fed;
  --on-accent:      #ffffff;
  --fill-secondary: #c9ced7;

  /* Texto */
  --text-primary:   #1a1d21;
  --text-secondary: #5b6270;
  --text-muted:     #9099a6;

  /* Estado */
  --bg-success: #e7f6ec;  --text-success: #1e7d43;
  --bg-warning: #fcf3e3;  --text-warning: #9a6a12;
  --bg-danger:  #fdeceb;  --text-danger:  #c0392b;
  --bg-accent:  #e8f0fe;  --text-accent:  #2f6fed;

  /* Forma */
  --radius:      6px;
  --radius-card: 12px;

  /* Espacamento */
  --gap-xs: 4px;
  --gap-sm: 8px;
  --gap:    12px;
  --gap-lg: 16px;

  /* Tipografia */
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs:    13px;
  --fs-md: 14px;
  --fs-lg: 15px;
  --fs-xl: 22px;
}

/* --- 2. Base -------------------------------------------------------------- */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 20px 16px;
  background: var(--surface-1);
  color: var(--text-primary);
  font-family: var(--font);
  font-size: var(--fs-md);
  line-height: 1.4;
}

.pagina { max-width: 1100px; margin: 0 auto; }

h1, h2, h3 { margin: 0; font-weight: 500; }

a { color: var(--text-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

/* --- 3. Cartao ------------------------------------------------------------ */
.cartao {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 1rem 1.1rem;
}

.cartao-titulo {
  margin: 0 0 10px;
  font-weight: 500;
  font-size: var(--fs-md);
}

.cartao-titulo .complemento {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: 400;
}

/* --- 4. Barra superior ---------------------------------------------------- */
.barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--gap-sm);
  padding: 10px 14px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  margin-bottom: var(--gap);
}

.barra-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 500;
  font-size: var(--fs-lg);
}

.barra-contexto {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: var(--fs);
  color: var(--text-secondary);
}

/* --- 5. Grade e responsividade (doc 04 §2) -------------------------------- */
.grade { display: grid; gap: var(--gap); align-items: start; }

.grade-2       { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.grade-2-maior { grid-template-columns: minmax(0,1.15fr) minmax(0,1fr); }
.grade-2-menor { grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); }
.grade-auto    { grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); }

/* Cartões da mesma linha com altura igual — grupos de gráficos (dashboard),
   onde a diferença de conteúdo entre um cartão e outro não deve desalinhar a
   grade. .grade já é align-items:start por padrão (não esticar), correto para
   a maioria dos usos (formulários lado a lado, por exemplo); o grid já estica
   o item para a altura da célula (a do maior da linha) com stretch, sem
   precisar de flex no cartão. */
.grade-igual { align-items: stretch; }

/* Layout fluido: empilha em tela estreita, sem rolagem horizontal */
@media (max-width: 860px) {
  .grade-2, .grade-2-maior, .grade-2-menor { grid-template-columns: 1fr; }
}

.pilha { display: flex; flex-direction: column; gap: var(--gap); }

/* --- 6. Formularios ------------------------------------------------------- */
.campo { display: flex; flex-direction: column; gap: 2px; }

label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

input, select, textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs);
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--fill-accent);
  box-shadow: 0 0 0 3px var(--bg-accent);
}

input[readonly], input:disabled, select:disabled {
  background: var(--surface-1);
  color: var(--text-muted);
}

textarea { min-height: 52px; resize: vertical; }

.valor-monetario { text-align: right; font-variant-numeric: tabular-nums; }

/* --- 7. Botoes ------------------------------------------------------------ */
button, .botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-2);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs);
  cursor: pointer;
}

button:hover, .botao:hover { background: var(--surface-1); }

button:focus-visible, .botao:focus-visible {
  outline: 2px solid var(--fill-accent);
  outline-offset: 2px;
}

.botao-principal {
  background: var(--fill-accent);
  color: var(--on-accent);
  border-color: var(--fill-accent);
}
.botao-principal:hover { background: #275fd4; }

.botao-largo { width: 100%; }
.botao-pequeno { padding: 4px 12px; font-size: var(--fs-sm); }

button:disabled { opacity: .5; cursor: not-allowed; }

/* --- 8. Tabelas ----------------------------------------------------------- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs);
  table-layout: fixed;
}

thead th {
  padding: 6px 4px;
  text-align: left;
  font-weight: 400;
  color: var(--text-secondary);
}

tbody td {
  padding: 7px 4px;
  border-top: 1px solid var(--border);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

tfoot td {
  padding: 8px 4px;
  border-top: 1px solid var(--border);
  font-weight: 500;
}

.col-numero { text-align: right; font-variant-numeric: tabular-nums; }
.col-acoes  { text-align: right; color: var(--text-secondary); }

tbody tr.estornado td { color: var(--text-muted); text-decoration: line-through; }
tbody tr.destaque-suporte td { background: var(--bg-warning); }

/* --- 9. Linhas de total --------------------------------------------------- */
.linha-total {
  display: flex;
  justify-content: space-between;
  font-size: var(--fs);
}
.linha-total .rotulo { color: var(--text-secondary); }
.linha-total .valor  { font-weight: 500; font-variant-numeric: tabular-nums; }

.linha-total-final {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid var(--border);
  margin-top: 10px;
  padding-top: var(--gap-sm);
  font-size: var(--fs-md);
  font-weight: 500;
}

.lista-totais { display: flex; flex-direction: column; gap: 6px; }

/* --- 10. Selos de estado -------------------------------------------------- */
.selo {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius);
  font-size: var(--fs-sm);
  white-space: nowrap;
}

.selo-aberto     { background: var(--bg-success); color: var(--text-success); }
.selo-fechado    { background: var(--bg-warning); color: var(--text-warning); }
.selo-conferido  { background: var(--bg-success); color: var(--text-success); }
.selo-cancelado  { background: var(--surface-1);  color: var(--text-muted); }
.selo-neutro     { background: var(--surface-1);  color: var(--text-secondary); }
.selo-destaque   { background: var(--bg-accent);  color: var(--text-accent); }

.selo-ao-vivo::before {
  content: "";
  display: inline-block;
  width: 7px; height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* --- 11. Faixas de resultado (acerto, filipeta, divergencia) -------------- */
.faixa {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--gap-sm);
  padding: 7px 10px;
  border-radius: var(--radius);
  font-size: var(--fs);
}
.faixa .valor { font-weight: 500; font-variant-numeric: tabular-nums; }

.faixa-ok        { background: var(--bg-success); color: var(--text-success); }
.faixa-alerta    { background: var(--bg-warning); color: var(--text-warning); }
.faixa-divergente{ background: var(--bg-danger);  color: var(--text-danger); }

/* --- 12. Indicadores (dashboard e resumos) -------------------------------- */
.indicador {
  background: var(--surface-1);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.indicador .rotulo { margin: 0; font-size: var(--fs); color: var(--text-secondary); }
.indicador .numero { margin: 2px 0 0; font-size: var(--fs-xl); font-weight: 500;
                     font-variant-numeric: tabular-nums; }
.indicador .numero.negativo { color: var(--text-danger); }
.indicador .numero.positivo { color: var(--text-success); }

/* --- 13. Mensagens -------------------------------------------------------- */
.aviso {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin: var(--gap-sm) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.mensagem {
  padding: 10px 14px;
  border-radius: var(--radius);
  font-size: var(--fs);
  margin-bottom: var(--gap);
}
.mensagem-erro    { background: var(--bg-danger);  color: var(--text-danger); }
.mensagem-sucesso { background: var(--bg-success); color: var(--text-success); }
.mensagem-info    { background: var(--surface-1);  color: var(--text-secondary); }

.erro-campo { font-size: var(--fs-sm); color: var(--text-danger); }
input.invalido, select.invalido, textarea.invalido { border-color: var(--text-danger); }

/* --- 14. Autenticacao ----------------------------------------------------- */
.tela-acesso {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caixa-acesso {
  width: 320px;
  max-width: 100%;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: 24px;
}

.marca { text-align: center; margin-bottom: 22px; }
.marca .nome    { margin: 8px 0 0; font-weight: 500; font-size: var(--fs-lg); }
.marca .sistema { margin: 2px 0 0; font-size: var(--fs-sm); color: var(--text-muted); }

/* --- 15. Navegacao lateral (administracao) -------------------------------- */
.menu { background: var(--surface-2); border: 1px solid var(--border);
        border-radius: var(--radius-card); padding: var(--gap-sm); }
.menu a {
  display: block;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: var(--fs);
  color: var(--text-secondary);
  margin-bottom: 2px;
}
.menu a:hover { background: var(--surface-1); text-decoration: none; }
.menu a.ativo { background: var(--fill-accent); color: var(--on-accent); font-weight: 500; }

/* --- 15.1 Navegacao principal (persistente, todas as telas) --------------- */
.menu-principal { display: flex; flex-wrap: wrap; gap: 2px; margin-bottom: var(--gap); }
.menu-principal a { margin-bottom: 0; }

/* --- 16. Graficos simples (dashboard) ------------------------------------- */
.barra-progresso { background: var(--surface-1); border-radius: 3px; height: 8px; }
.barra-progresso > div { background: var(--fill-accent); height: 8px; border-radius: 3px; }

.colunas { display: flex; align-items: flex-end; gap: 5px; height: 120px; }
.colunas > div { flex: 1; background: var(--fill-secondary); border-radius: 3px 3px 0 0; }
.colunas > div.destaque { background: var(--fill-accent); }

.eixo { display: flex; justify-content: space-between; margin-top: 6px;
        font-size: 10px; color: var(--text-muted); }

/* --- 17. Utilitarios ------------------------------------------------------ */
.texto-secundario { color: var(--text-secondary); }
.texto-discreto   { color: var(--text-muted); }
.texto-pequeno    { font-size: var(--fs-sm); }
.direita          { text-align: right; }
.entre            { display: flex; justify-content: space-between;
                    align-items: center; flex-wrap: wrap; gap: var(--gap-sm); }
.mt  { margin-top: var(--gap); }
.mb  { margin-bottom: var(--gap); }

/* Acessibilidade: texto so para leitor de tela */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}

/* --- 18. Impressao -------------------------------------------------------- */
@media print {
  body { background: #fff; padding: 0; }
  .barra, .menu, button, .botao { display: none; }
  .cartao { border: none; padding: 0; }
}