/* LABRE-Pay — tema claro, alto contraste, mobile-first.
   Pensado para leitura confortável por usuários de todas as idades. */

:root {
  --azul: #123a5c;
  --azul-claro: #1d5c8f;
  --verde: #0a7d33;
  --amarelo: #9a6700;
  --amarelo-fundo: #fff3cd;
  --vermelho: #b3261e;
  --vermelho-fundo: #fdecea;
  --verde-fundo: #e6f4ea;
  --fundo: #f2f4f7;
  --cartao: #ffffff;
  --texto: #1a2733;
  --texto-suave: #51606e;
  --borda: #d5dce3;
  --foco: #1d5c8f;
}

/* Temas de cores (escolhidos em Configurações → Aparência) */
body.tema-verde    { --azul: #1b4d2e; --azul-claro: #2e7d4f; --foco: #2e7d4f; }
body.tema-petroleo { --azul: #0f4c4c; --azul-claro: #1d7a74; --foco: #1d7a74; }
body.tema-vinho    { --azul: #5c1220; --azul-claro: #8f2d42; --foco: #8f2d42; }
body.tema-roxo     { --azul: #3b1d5c; --azul-claro: #6b3fa0; --foco: #6b3fa0; }
body.tema-grafite  { --azul: #263238; --azul-claro: #546e7a; --foco: #546e7a; }

* { box-sizing: border-box; }

html { font-size: 17px; }

body {
  margin: 0;
  font-family: "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--fundo);
  color: var(--texto);
  line-height: 1.55;
}

a { color: var(--azul-claro); }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--foco);
  outline-offset: 2px;
}

h1 { font-size: 1.7rem; margin: 0 0 1rem; }
h2 { font-size: 1.25rem; margin: 1.2rem 0 .6rem; }

/* ---------- faixa de ambiente de testes ---------- */
.env-banner {
  background: repeating-linear-gradient(45deg, #ffc107, #ffc107 14px, #e0a800 14px, #e0a800 28px);
  color: #201700;
  text-align: center;
  font-weight: 700;
  padding: .45rem .8rem;
}

/* ---------- layout do painel ---------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
  background: var(--azul);
  color: #fff;
  width: 250px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  padding: 1rem 0;
}

.brand { font-size: 1.35rem; font-weight: 800; padding: 0 1.2rem .9rem; letter-spacing: .5px; }
.brand span { color: #7fd1a2; }

/* ---------- logotipo personalizado ---------- */
.logo-sidebar { max-height: 56px; max-width: 190px; margin: 0 1.2rem .5rem; object-fit: contain; align-self: flex-start; }
.logo-publica { max-height: 84px; max-width: 260px; object-fit: contain; margin-bottom: .4rem; }
.rel-identidade { display: flex; align-items: center; gap: .9rem; }
.logo-relatorio { max-height: 58px; max-width: 170px; object-fit: contain; }
.cupom .c-logo { max-height: 54px; max-width: 200px; object-fit: contain; margin-bottom: .25rem; filter: grayscale(1) contrast(1.15); }

.sidebar nav { display: flex; flex-direction: column; }
.sidebar nav a {
  color: #e8eef4;
  text-decoration: none;
  padding: .8rem 1.2rem;
  font-size: 1.02rem;
  border-left: 4px solid transparent;
  min-height: 44px;
  display: flex;
  align-items: center;
}
.sidebar nav a:hover { background: rgba(255,255,255,.09); }
.sidebar nav a.ativo { background: rgba(255,255,255,.14); border-left-color: #7fd1a2; font-weight: 700; }

.sidebar-rodape {
  margin-top: auto;
  padding: 1rem 1.2rem 0;
  border-top: 1px solid rgba(255,255,255,.2);
  display: flex;
  justify-content: space-between;
  gap: .6rem;
  font-size: .95rem;
}
.sidebar-rodape a { color: #ffd7d2; }

.conteudo {
  flex: 1;
  padding: 1.6rem clamp(1rem, 3vw, 3rem);
  max-width: 1400px; /* conforto de leitura mesmo em ultrawide */
}

/* ---------- páginas públicas ---------- */
body.publica { display: flex; flex-direction: column; min-height: 100vh; }
.publica-caixa { width: 100%; max-width: 560px; margin: 0 auto; padding: 1.2rem; flex: 1; }
.publica-topo { text-align: center; margin: 1.2rem 0; }
.publica-topo .brand { color: var(--azul); font-size: 1.9rem; padding: 0; }
.publica-topo .brand span { color: var(--verde); }
.publica-topo p { color: var(--texto-suave); margin: .2rem 0 0; }
.publica-rodape { text-align: center; padding: 1.2rem 0; font-size: .92rem; }

/* ---------- cartões e formulários ---------- */
.cartao {
  background: var(--cartao);
  border: 1px solid var(--borda);
  border-radius: 10px;
  padding: 1.3rem;
  margin-bottom: 1.2rem;
  box-shadow: 0 1px 3px rgba(16, 30, 45, .06);
}

.form-grid { display: flex; flex-direction: column; gap: .9rem; }
.form-grid h2:first-child { margin-top: 0; }

label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; }
label .dica { font-weight: 400; color: var(--texto-suave); font-size: .9rem; }

input[type="text"], input[type="email"], input[type="password"], input[type="url"],
input[type="number"], input[type="date"], input[type="tel"], select, textarea {
  font: inherit;
  padding: .65rem .8rem;
  border: 1.5px solid var(--borda);
  border-radius: 8px;
  background: #fff;
  color: var(--texto);
  min-height: 44px;
  width: 100%;
}
textarea { min-height: 90px; }

.linha-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: .9rem; }

/* ---------- botões ---------- */
.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  font: inherit;
  font-weight: 700;
  padding: .65rem 1.3rem;
  border-radius: 8px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
  background: #e8edf2;
  color: var(--texto);
}
.botao:hover { filter: brightness(.96); }
.botao-primario { background: var(--azul); color: #fff; }
.botao-verde { background: var(--verde); color: #fff; }
.botao-perigo { background: #fff; color: var(--vermelho); border-color: var(--vermelho); }
.botao-mini { padding: .3rem .7rem; min-height: 36px; font-size: .92rem; }

/* ---------- mensagens ---------- */
.flash {
  padding: .9rem 1.1rem;
  border-radius: 8px;
  margin-bottom: 1rem;
  font-weight: 600;
  border: 1.5px solid;
}
.flash-ok { background: var(--verde-fundo); color: var(--verde); border-color: var(--verde); }
.flash-erro { background: var(--vermelho-fundo); color: var(--vermelho); border-color: var(--vermelho); }

/* ---------- selos de status ---------- */
.selo {
  display: inline-block;
  padding: .15rem .65rem;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  white-space: nowrap;
}
.selo-pago, .selo-adimplente, .selo-ativo { background: var(--verde-fundo); color: var(--verde); }
.selo-pendente, .selo-sem_cobranca { background: var(--amarelo-fundo); color: var(--amarelo); }
.selo-vencida, .selo-inadimplente, .selo-desligado { background: var(--vermelho-fundo); color: var(--vermelho); }
.selo-cancelada, .selo-isento { background: #e8edf2; color: var(--texto-suave); }

/* ---------- tabelas (viram cards no celular) ---------- */
.tabela-envolve { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; overflow: hidden; }
.tabela th, .tabela td { padding: .7rem .8rem; text-align: left; border-bottom: 1px solid var(--borda); vertical-align: middle; }
.tabela th { background: #eef2f6; font-size: .92rem; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-suave); }
.tabela tr:last-child td { border-bottom: none; }
.tabela .acoes { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- cards de resumo do dashboard ---------- */
.resumo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin-bottom: 1.2rem; }
.resumo-card { background: var(--cartao); border: 1px solid var(--borda); border-radius: 10px; padding: 1rem 1.2rem; }
.resumo-card .num { font-size: 2rem; font-weight: 800; display: block; }
.resumo-card .rotulo { color: var(--texto-suave); font-weight: 600; }
.resumo-card.verde .num { color: var(--verde); }
.resumo-card.vermelho .num { color: var(--vermelho); }
.resumo-card.amarelo .num { color: var(--amarelo); }

/* ---------- barra de ferramentas de listas ---------- */
.toolbar { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.toolbar form { display: flex; gap: .7rem; flex-wrap: wrap; align-items: end; }
.toolbar label { min-width: 160px; }

.texto-suave { color: var(--texto-suave); }
.vazio { text-align: center; color: var(--texto-suave); padding: 2.2rem 1rem; }
.vazio strong { display: block; font-size: 1.1rem; margin-bottom: .3rem; color: var(--texto); }

.progresso { height: 14px; background: #e8edf2; border-radius: 999px; overflow: hidden; }
.progresso > div { height: 100%; background: var(--verde); width: 0; transition: width .3s; }

/* ---------- gráficos SVG ---------- */
.grafico-caixa { overflow-x: auto; }
.grafico-caixa svg { display: block; }

/* ---------- comprovante estilo cupom fiscal ---------- */
.cupom {
  font-family: "Courier New", Courier, monospace;
  background: #fdfdfa;
  color: #1b1b1b;
  max-width: 330px;
  margin: 0 auto 1.2rem;
  padding: 1rem .9rem;
  border: 1px solid var(--borda);
  box-shadow: 0 2px 8px rgba(16, 30, 45, .12);
  font-size: .82rem;
  line-height: 1.35;
  text-transform: uppercase;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.cupom .c-centro { text-align: center; }
.cupom .c-sigla { font-size: 1.15rem; font-weight: 800; letter-spacing: .04em; }
.cupom .c-mini { font-size: .72rem; }
.cupom .c-trace { border: none; border-top: 1px dashed #555; margin: .45rem 0; }
.cupom .c-linha { display: flex; justify-content: space-between; gap: .7rem; }
.cupom .c-linha span:last-child { text-align: right; white-space: nowrap; }
.cupom .c-titulo { font-weight: 800; letter-spacing: .3em; font-size: 1rem; margin: .2rem 0; }
.cupom .c-item { margin: .15rem 0; }
.cupom .c-total { font-size: 1.25rem; font-weight: 800; align-items: baseline; }
.cupom .c-pago { font-weight: 800; letter-spacing: .35em; margin: .3rem 0; }
.cupom .c-hash { font-size: .68rem; word-break: break-all; }
.cupom .c-morse {
  margin-top: .4rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .03em;
  white-space: nowrap;
  overflow: hidden;
  text-transform: none;
}
.cupom .c-barcode {
  height: 42px;
  margin: .5rem auto .15rem;
  background: repeating-linear-gradient(90deg,
    #111 0 2px, transparent 2px 5px, #111 5px 6px, transparent 6px 10px,
    #111 10px 13px, transparent 13px 15px, #111 15px 16px, transparent 16px 21px);
}
@media print {
  @page { margin: 8mm; }
  .env-banner, .publica-rodape, .publica-topo, .nao-imprimir, .flash { display: none !important; }
  body { background: #fff; }
  .cartao { border: none; box-shadow: none; }
  .publica-caixa { max-width: none; padding: 0; }
  /* No PDF o cupom mantém o mesmo visual da tela (fundo creme, borda),
     centralizado na página; só a sombra sai, que imprime mal. */
  .cupom {
    box-shadow: none;
    max-width: 84mm;
    margin: 0 auto;
  }
}

/* ---------- seletor de tema (Configurações → Aparência) ---------- */
.temas-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }
.tema-opcao {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .6rem;
  border: 2px solid var(--borda);
  border-radius: 8px;
  padding: .6rem .8rem;
  cursor: pointer;
  font-weight: 600;
}
.tema-opcao:hover { background: #f2f6f9; }
.tema-opcao.ativo { border-color: var(--azul-claro); background: #f2f6f9; }
.tema-opcao input { width: auto; min-height: auto; }
.tema-cores { display: inline-flex; border-radius: 6px; overflow: hidden; }
.tema-cores span { width: 22px; height: 22px; display: inline-block; }

/* ---------- editor visual de templates de email ---------- */
.campo-editor { display: flex; flex-direction: column; gap: .3rem; }
.campo-rotulo { font-weight: 600; }
.rt-wrap { border: 1.5px solid var(--borda); border-radius: 8px; background: #fff; overflow: hidden; }
.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  align-items: center;
  padding: .45rem;
  background: #eef2f6;
  border-bottom: 1px solid var(--borda);
}
.rt-btn {
  min-width: 38px;
  min-height: 38px;
  padding: 0 .55rem;
  border: 1px solid var(--borda);
  background: #fff;
  border-radius: 6px;
  font: inherit;
  font-size: .95rem;
  cursor: pointer;
}
.rt-btn:hover { background: #f2f6f9; }
.rt-btn.ativo { background: var(--azul); color: #fff; border-color: var(--azul); }
.rt-btn:disabled { opacity: .45; cursor: not-allowed; }
.rt-sep { width: 1px; height: 26px; background: var(--borda); margin: 0 .25rem; }
.rt-select { min-height: 38px; width: auto; padding: 0 .5rem; border: 1px solid var(--borda); border-radius: 6px; font: inherit; font-size: .92rem; background: #fff; }
.rt-select:disabled { opacity: .45; }
.rt-area {
  min-height: 180px;
  padding: .8rem 1rem;
  outline: none;
  line-height: 1.6;
}
.rt-area:focus { box-shadow: inset 0 0 0 2px rgba(29, 92, 143, .35); }
.rt-wrap textarea.rt-html {
  border: none;
  border-radius: 0;
  min-height: 180px;
  font-family: "Courier New", monospace;
  font-size: .9rem;
}

/* ---------- relatórios imprimíveis ---------- */
body.relatorio { background: #fff; }
.rel-pagina { max-width: 1000px; margin: 0 auto; padding: 1.4rem 1.2rem; }
.rel-acoes { display: flex; gap: .6rem; }
.rel-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 1rem;
  border-bottom: 3px solid var(--azul);
  padding-bottom: .5rem;
  margin-bottom: .8rem;
}
.rel-entidade { font-size: 1.2rem; font-weight: 800; color: var(--azul); }
.rel-mini { color: var(--texto-suave); font-size: .88rem; }
body.relatorio h1 { font-size: 1.35rem; margin: .4rem 0 .2rem; }
.rel-sub { color: var(--texto-suave); margin: 0 0 1rem; }
.rel-tabela { width: 100%; border-collapse: collapse; font-size: .92rem; }
.rel-tabela th, .rel-tabela td { border: 1px solid #c9d2da; padding: .42rem .6rem; text-align: left; vertical-align: top; }
.rel-tabela th { background: var(--azul); color: #fff; font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; }
.rel-tabela tbody tr:nth-child(even) { background: #f2f6f9; }
.rel-tabela tfoot td { font-weight: 700; background: #e8edf2; }
.rel-tabela .num { text-align: right; white-space: nowrap; }
.rel-rodape { color: var(--texto-suave); font-size: .82rem; margin-top: 1rem; border-top: 1px solid var(--borda); padding-top: .5rem; }
@media print {
  .rel-pagina { max-width: none; padding: 0; }
  body.relatorio { font-size: 10.5pt; }
  .rel-tabela { font-size: 9.5pt; }
  .rel-tabela th { background: var(--azul) !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rel-tabela tbody tr:nth-child(even) { background: #f2f6f9 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .rel-tabela thead { display: table-header-group; } /* repete o cabeçalho em cada página */
  .rel-tabela tr { break-inside: avoid; }
}

/* ---------- responsivo ---------- */
@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar { width: 100%; flex-direction: column; padding: .6rem 0; }
  .sidebar nav { flex-direction: row; flex-wrap: wrap; }
  .sidebar nav a { border-left: none; border-bottom: 3px solid transparent; padding: .55rem .8rem; }
  .sidebar nav a.ativo { border-bottom-color: #7fd1a2; }
  .sidebar-rodape { border-top: none; padding-top: .4rem; }

  /* tabela vira cards empilhados */
  .tabela-cards table, .tabela-cards thead, .tabela-cards tbody, .tabela-cards tr, .tabela-cards td { display: block; }
  .tabela-cards thead { display: none; }
  .tabela-cards tr { border: 1px solid var(--borda); border-radius: 10px; margin-bottom: .8rem; background: var(--cartao); padding: .4rem 0; }
  .tabela-cards td { border: none; padding: .35rem .9rem; }
  .tabela-cards td[data-rotulo]::before {
    content: attr(data-rotulo) ": ";
    font-weight: 700;
    color: var(--texto-suave);
  }
}