/* Repasses 360 — leiaute da aplicação (mobile-first, 390 px). O visual do
   extrato em si vive em acuris.css (portado do fonte.html); aqui ficam
   cabeçalho, cartões, formulários, tabelas de conferência e impressão. */

:root {
  --ac-marinho: #162a4e;
  --ac-azul: #0152cb;
  --ac-ambar: #ffb600;
  --ac-sobre-ambar: #3d2a00;
  --ac-fundo: #edf0f9;
  --ac-superficie: #f6f8fe;
  --ac-branco: #ffffff;
  --ac-papel: #e2e7f2;
  --ac-borda: #d4dbe6;
  --ac-claro: #c3d0ea;
  --ac-nevoa: #9db3e0;
  --ac-tinta: #111826;
  --ac-texto: #4a5468;
  --ac-rotulo: #6c727e;
  --ac-ok: #1b7f4b;
  --ac-ok-fundo: #e3f4ea;
  --ac-alerta: #b3261e;
  --ac-alerta-fundo: #fbe7e5;
  --ac-atencao-fundo: #fff4d6;
  --fonte: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --raio: 12px;
  --toque: 44px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 16px;
  line-height: 1.45;
  color: var(--ac-tinta);
  background: var(--ac-fundo);
}
a { color: var(--ac-azul); }
h1, h2, h3 { margin: 0 0 .4rem; line-height: 1.2; color: var(--ac-marinho); font-weight: 600; }
h1 { font-size: 1.6rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
p { margin: 0 0 .5rem; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.num:not(.folha *) { text-align: right; white-space: nowrap; }
.pequeno { font-size: .85rem; }
.rotulo:not(.folha *) { font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ac-rotulo); margin-bottom: .25rem; }
.texto-suave { color: var(--ac-texto); }
.destaque { color: var(--ac-alerta); }
.selecionavel { user-select: all; }

/* Cabeçalho do site */
.topo {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .75rem 1rem; background: var(--ac-marinho); color: var(--ac-branco);
}
.marca { color: inherit; text-decoration: none; display: flex; flex-direction: column; line-height: 1.1; }
.marca-nome { font-weight: 700; font-size: 1.05rem; }
.marca-clinica { font-size: .75rem; opacity: .75; letter-spacing: .04em; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem; align-items: center; }
.menu a, .menu .link {
  color: var(--ac-branco); text-decoration: none; font: inherit; font-size: .9rem;
  background: transparent; border: 0; padding: .6rem .7rem; min-height: var(--toque); border-radius: 8px; cursor: pointer;
}
.menu a:hover, .menu .link:hover { background: rgba(255,255,255,.12); }
.menu-sair { margin: 0; }

.conteudo { max-width: 1040px; margin: 0 auto; padding: 1rem; }
.rodape-site { display: flex; justify-content: space-between; padding: 1rem; color: var(--ac-rotulo); font-size: .8rem; }

/* Cartões */
.cartao {
  display: block; background: var(--ac-branco); border: 1px solid var(--ac-borda); border-radius: var(--raio);
  padding: 1rem; margin-bottom: 1rem;
}
.cartao-login { max-width: 420px; margin: 2rem auto; }
.cabecalho-pagina { margin-bottom: 1rem; }
.lista-cartoes { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; }
.cartao-repasse { text-decoration: none; color: inherit; transition: border-color .15s; }
.cartao-repasse:hover { border-color: var(--ac-azul); }
.cartao-repasse-topo { display: flex; justify-content: space-between; align-items: flex-start; gap: .75rem; flex-wrap: wrap; }
.valor-grande { font-size: 1.7rem; font-weight: 500; color: var(--ac-marinho); margin: .25rem 0; }
.vazio { text-align: center; color: var(--ac-texto); }
.voltar { margin-bottom: .75rem; }
.voltar a { text-decoration: none; }
.titulo-secao { margin: 1.5rem 0 .75rem; }

/* Selos de status (fora do extrato: dentro de .folha vale o acuris.css) */
.selo:not(.folha *) {
  display: inline-block; padding: .15rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 600;
  letter-spacing: .03em; background: var(--ac-papel); color: var(--ac-marinho); white-space: nowrap;
}
.selo-liberado { background: #dbe7fb; color: var(--ac-azul); }
.selo-aceito, .selo-conf-confirmado, .selo-critica-respondida { background: var(--ac-ok-fundo); color: var(--ac-ok); }
.selo-contestado, .selo-conf-divergente, .selo-critica-aberta { background: var(--ac-alerta-fundo); color: var(--ac-alerta); }
.selo-rascunho, .selo-critica-fechada { background: var(--ac-papel); color: var(--ac-rotulo); }
.selo-retido, .selo-conf-sem_papel { background: var(--ac-atencao-fundo); color: var(--ac-sobre-ambar); }
.contagem { display: flex; gap: .35rem; flex-wrap: wrap; }

/* Avisos (flash) */
.avisos { margin-bottom: 1rem; }
.aviso-flash { padding: .7rem .9rem; border-radius: 8px; border: 1px solid var(--ac-borda); background: var(--ac-superficie); margin-bottom: .5rem; }
.aviso-sucesso { background: var(--ac-ok-fundo); border-color: #b9e0c8; color: var(--ac-ok); }
.aviso-erro { background: var(--ac-alerta-fundo); border-color: #f0b9b5; color: var(--ac-alerta); }
.aviso-aviso { background: var(--ac-atencao-fundo); border-color: #f2d68a; color: var(--ac-sobre-ambar); }
.aviso:not(.folha *), .aviso-inline { color: var(--ac-sobre-ambar); background: var(--ac-atencao-fundo); border-radius: 6px; padding: .2rem .5rem; display: inline-block; font-size: .85rem; }
.lista-avisos { padding-left: 0; list-style: none; display: grid; gap: .35rem; }

/* Formulários */
.formulario { display: grid; gap: .35rem; }
.formulario label { font-size: .85rem; color: var(--ac-texto); margin-top: .5rem; }
.formulario input, .formulario textarea, .formulario select {
  font: inherit; width: 100%; min-height: var(--toque); padding: .6rem .75rem;
  border: 1px solid var(--ac-claro); border-radius: 8px; background: var(--ac-branco); color: var(--ac-tinta);
}
.formulario textarea { min-height: 96px; resize: vertical; }
.formulario input:focus, .formulario textarea:focus, .formulario select:focus { outline: 2px solid var(--ac-azul); outline-offset: 1px; }
.formulario button { margin-top: .75rem; }
fieldset { border: 1px solid var(--ac-borda); border-radius: 8px; padding: .75rem; margin: 0 0 .75rem; }
legend { font-weight: 600; color: var(--ac-marinho); padding: 0 .3rem; }

.botao:not(.folha *) {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  min-height: var(--toque); padding: .6rem 1.1rem; border-radius: 10px; border: 1px solid var(--ac-marinho);
  font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; background: var(--ac-branco); color: var(--ac-marinho);
}
.botao-primario { background: var(--ac-azul); border-color: var(--ac-azul); color: var(--ac-branco); }
.botao-primario:hover { background: #0141a3; }
.botao-secundario { background: var(--ac-superficie); }
.botao-mini { min-height: 36px; padding: .3rem .7rem; font-size: .85rem; border-color: var(--ac-claro); }
.botao:not(.folha *):disabled { opacity: .5; cursor: default; }
.acoes-linha, .acoes-finais { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: .75rem; }
.acoes-linha form, .acoes-finais form { margin: 0; }
form.inline { display: inline; }
.acoes-celula { white-space: nowrap; }
.acoes-celula form { display: inline-block; margin-right: .25rem; }

/* Crítica: <details> funciona sem JS */
details.critica-form { margin-top: .5rem; }
details.critica-form summary { list-style: none; width: 100%; }
details.critica-form summary::-webkit-details-marker { display: none; }
details.critica-form[open] summary { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
details.critica-form form { border: 1px solid var(--ac-borda); border-top: 0; border-radius: 0 0 10px 10px; padding: .75rem; background: var(--ac-superficie); }
.lista-criticas { list-style: none; padding: 0; margin: 0 0 .75rem; display: grid; gap: .75rem; }
.critica:not(.folha *) { border-left: 4px solid var(--ac-claro); padding: .25rem .75rem; }
.critica-aberta { border-color: var(--ac-alerta); }
.critica-respondida { border-color: var(--ac-ok); }
.critica-meta { font-size: .8rem; color: var(--ac-rotulo); }
.critica-texto { white-space: pre-wrap; }
.critica-resposta { background: var(--ac-superficie); border-radius: 8px; padding: .6rem .75rem; margin-top: .4rem; }
.critica-inline { font-size: .85rem; padding: .3rem .5rem; border-radius: 6px; background: var(--ac-superficie); }

/* Tabelas */
.rolagem { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tabela th, .tabela td { padding: .5rem .6rem; border-bottom: 1px solid var(--ac-borda); text-align: left; vertical-align: top; }
.tabela th { font-size: .75rem; letter-spacing: .06em; text-transform: uppercase; color: var(--ac-rotulo); }
.tabela tr.inativo td { color: var(--ac-rotulo); }
.tabela-conferencia tr.conf-divergente td { background: #fff7f6; }
.tabela-conferencia tr.conf-sem_papel td { background: #fffbf0; }
.rod-total td { font-weight: 700; }
.lista-eventos { list-style: none; padding: 0; margin: 0; font-size: .85rem; display: grid; gap: .25rem; }

/* Importação e usuários */
.log { font-family: var(--mono); font-size: .8rem; background: var(--ac-tinta); color: #e6ebf5; padding: .75rem; border-radius: 8px; overflow-x: auto; white-space: pre-wrap; }
.resultado-ok { border-color: #b9e0c8; }
.resultado-erro { border-color: #f0b9b5; }
.senha-gerada { border-color: var(--ac-ambar); background: var(--ac-atencao-fundo); } /* único uso do âmbar na tela */
.erro-pagina { text-align: center; padding: 2rem 1rem; }


/* Telas maiores */
@media (min-width: 720px) {
  h1 { font-size: 2rem; }
  .conteudo { padding: 1.5rem; }
  .lista-cartoes { grid-template-columns: repeat(2, 1fr); }
  .cartao { padding: 1.25rem; }
}

/* Impressão A4: só o extrato */
@media print {
  /* A regra @page vive so em acuris.css (size:A4; margin:0): a .folha do extrato
     ja tem a propria margem interna. Duas @page conflitantes estouravam a folha. */
  body { background: #fff; font-size: 11pt; }
  .topo, .rodape-site, .avisos, .so-tela, details.critica-form, .acoes-finais, .voltar, script { display: none !important; }
  .conteudo { max-width: none; padding: 0; }
  a { color: inherit; text-decoration: none; }
}