:root {
  color-scheme: light dark;
  --fundo: #d7d7d7;
  --barra: #4d4d4d;
  --sobre-fundo: #ffffff;
  --sobre-fundo-2: #e3e3e3;
  --superficie: #ffffff;
  --borda: #cfcfcf;
  --texto: #212121;
  --texto-2: #595959;
  --relevo-texto: 0 1px 0 #ffffff, 0 2px 2px rgb(0 0 0 / 28%);
  --relevo:
    inset 0 1px 0 rgb(255 255 255 / 85%),
    inset 0 -2px 0 rgb(0 0 0 / 12%),
    0 2px 0 rgb(0 0 0 / 18%),
    0 6px 12px rgb(0 0 0 / 28%);
  --relevo-leve:
    inset 0 1px 0 rgb(255 255 255 / 70%),
    inset 0 -1px 0 rgb(0 0 0 / 10%),
    0 1px 2px rgb(0 0 0 / 22%);
  --marca: #0e7466;
  --marca-texto: #ffffff;
  --marca-suave: #e0f2ef;
  --bom: #17663f;
  --bom-fundo: #e2f3e8;
  --alerta: #8a5300;
  --alerta-fundo: #fbf0da;
  --critico: #a92525;
  --critico-fundo: #fbe7e5;
  --raio: 10px;
}

:root[data-tema="claro"] { color-scheme: light; }

/* Sem escolha salva, segue o sistema. Os dois blocos abaixo precisam ter os mesmos valores. */
@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) {
    --fundo: #2e2e2e;
    --barra: #1f1f1f;
    --superficie: #262626;
    --borda: #474747;
    --texto: #f1f1f1;
    --texto-2: #b0b0b0;
    --relevo-texto: 0 1px 0 rgb(0 0 0 / 70%), 0 2px 3px rgb(0 0 0 / 55%);
    --relevo:
      inset 0 1px 0 rgb(255 255 255 / 16%),
      inset 0 -2px 0 rgb(0 0 0 / 35%),
      0 2px 0 rgb(0 0 0 / 40%),
      0 6px 12px rgb(0 0 0 / 50%);
    --relevo-leve:
      inset 0 1px 0 rgb(255 255 255 / 12%),
      inset 0 -1px 0 rgb(0 0 0 / 30%),
      0 1px 2px rgb(0 0 0 / 45%);
    --marca: #62c9b4;
    --marca-texto: #0b211d;
    --marca-suave: #17352f;
    --bom: #75d49b;
    --bom-fundo: #1b3526;
    --alerta: #eebc6a;
    --alerta-fundo: #3a2c13;
    --critico: #f49a93;
    --critico-fundo: #421f1d;
  }
}

:root[data-tema="escuro"] {
  color-scheme: dark;
    --fundo: #2e2e2e;
    --barra: #1f1f1f;
    --superficie: #262626;
    --borda: #474747;
    --texto: #f1f1f1;
    --texto-2: #b0b0b0;
    --relevo-texto: 0 1px 0 rgb(0 0 0 / 70%), 0 2px 3px rgb(0 0 0 / 55%);
    --relevo:
      inset 0 1px 0 rgb(255 255 255 / 16%),
      inset 0 -2px 0 rgb(0 0 0 / 35%),
      0 2px 0 rgb(0 0 0 / 40%),
      0 6px 12px rgb(0 0 0 / 50%);
    --relevo-leve:
      inset 0 1px 0 rgb(255 255 255 / 12%),
      inset 0 -1px 0 rgb(0 0 0 / 30%),
      0 1px 2px rgb(0 0 0 / 45%);
    --marca: #62c9b4;
    --marca-texto: #0b211d;
    --marca-suave: #17352f;
    --bom: #75d49b;
    --bom-fundo: #1b3526;
    --alerta: #eebc6a;
    --alerta-fundo: #3a2c13;
    --critico: #f49a93;
    --critico-fundo: #421f1d;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fundo);
  color: var(--texto);
  font: 15px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p { margin: 0; }

[hidden] { display: none !important; }

/* Login */
.tela-login {
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 16px;
}

.login-cartao {
  display: grid;
  gap: 14px;
  width: min(420px, 100%);
  padding: 24px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: 12px;
}

.logo-login { display: block; width: 280px; max-width: 100%; height: auto; margin: 0 auto; border-radius: 12px; }
.login-cartao h1 { margin-top: 6px; font-size: 20px; font-weight: 600; }

/* Log de auditoria */
.filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 280px)); gap: 12px; margin-bottom: 16px; }
.log { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.log-selecao { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
.log-selecao label { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.log-selecao label input { width: 18px; min-height: 18px; height: 18px; flex: none; padding: 0; box-shadow: none; }
.botao:disabled { cursor: not-allowed; opacity: 0.55; }
.log-marcar { width: 18px; height: 18px; margin: 2px 0 0; cursor: pointer; }
.log-conteudo { min-width: 0; }
.log-item { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 12px; padding: 12px 16px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); overflow-wrap: anywhere; }
.log-cabecalho { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 12px; }
.log-cabecalho time, .log-autor { color: var(--texto-2); font-size: 13px; }
.log-mais { display: block; margin: 16px auto 0; }
.so-admin { display: block; color: var(--texto-2); font-size: 13px; }

/* Usuário logado */
.usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; font-size: 13px; color: var(--sobre-fundo-2); }
.usuario .link-acao { margin-left: 10px; color: var(--sobre-fundo); }

/* Clientes */
.busca { display: block; width: 100%; margin-bottom: 12px; }
.cliente-dados { display: flex; flex-wrap: wrap; gap: 2px 16px; margin-top: 6px; color: var(--texto-2); font-size: 13px; overflow-wrap: anywhere; }
.cliente-obs { margin-top: 6px; color: var(--texto-2); font-size: 13px; white-space: pre-line; overflow-wrap: anywhere; }
.acoes-linha { flex: none; }
.acoes-linha .link-acao:first-child { margin-left: 0; }

button, input { font: inherit; color: inherit; }

/* O anel duplo fica visível tanto sobre a barra quanto sobre os cartões. */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; box-shadow: 0 0 0 2px #ffffff; }

/* Topo */
.topo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px max(16px, calc((100vw - 1120px) / 2));
  background: var(--barra);
}

.marca { display: flex; align-items: center; gap: 12px; color: var(--sobre-fundo); }
.marca strong { display: block; font-size: 28px; font-weight: 700; line-height: 1.15; }
.marca small { color: var(--sobre-fundo-2); font-size: 16px; }
.logo-topo { display: block; width: auto; height: 88px; border-radius: 10px; }

.mes { display: flex; align-items: center; gap: 4px; }

.mes input, label input {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
}

.botao-icone {
  width: 38px;
  height: 38px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}

/* Abas */
.abas {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 0 max(16px, calc((100vw - 1120px) / 2));
  background: var(--barra);
}

.abas a {
  flex: none;
  padding: 10px 12px;
  border-bottom: 2px solid transparent;
  color: var(--sobre-fundo-2);
  text-decoration: none;
  font-weight: 500;
}

.abas a[aria-current="page"] { border-color: var(--sobre-fundo); color: var(--sobre-fundo); }

main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 56px; outline: none; }

/* Indicadores da empresa */
.indicadores {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
  margin-bottom: 28px;
}

.indicador, .socio, .lancamento, .socio-form, .vazio {
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
}

.indicador { padding: 14px 16px; }
.indicador span { display: block; color: var(--texto-2); font-size: 13px; }
.indicador strong { display: block; margin-top: 2px; font-size: 24px; font-weight: 600; line-height: 1.25; }
.indicador small { color: var(--texto-2); }

.titulo-secao { margin-bottom: 12px; color: var(--texto); font-size: 16px; font-weight: 600; }

/* Cartões dos sócios */
.socios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 12px;
}

.socio { padding: 16px; }
.socio-cabecalho { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.socio-cabecalho h3 { font-size: 16px; overflow-wrap: anywhere; }
.socio-cabecalho span { color: var(--texto-2); font-size: 13px; flex: none; }

.socio dl { margin: 0; }
.socio dl div { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.socio dt { color: var(--texto-2); }
.socio dd { margin: 0; text-align: right; font-weight: 500; }
.socio .separa { border-top: 1px solid var(--borda); margin-top: 6px; padding-top: 10px; }
.socio .total dt { color: var(--texto); font-weight: 600; }
.socio .total dd { font-size: 18px; font-weight: 600; }
.negativo { color: var(--critico); }

/* Status: sempre com texto, nunca só cor */
.alerta-atraso {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--critico-fundo);
  color: var(--critico);
  font-size: 13px;
  font-weight: 500;
}

/* Listas */
.cabecalho-lista {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.cabecalho-lista h1 { color: var(--texto); font-size: 20px; font-weight: 600; }
.cabecalho-lista p { color: var(--texto-2); }

.botao {
  min-height: 38px;
  padding: 7px 14px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  font-weight: 500;
  cursor: pointer;
}

.botao-primario { background: var(--marca); border-color: var(--marca); color: var(--marca-texto); }

.lista { display: grid; gap: 10px; }

.lancamento { padding: 14px 16px; }

.lancamento-topo { display: flex; justify-content: space-between; gap: 16px; }
.lancamento-topo h3 { font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.lancamento-topo p { color: var(--texto-2); font-size: 13px; }
.lancamento-valor { text-align: right; flex: none; }
.lancamento-valor strong { display: block; font-size: 17px; font-weight: 600; }

.link-acao {
  padding: 2px 0;
  margin-left: 10px;
  border: 0;
  background: none;
  color: var(--texto-2);
  font-size: 13px;
  text-decoration: underline;
  cursor: pointer;
}

.cotas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.cota {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: none;
  text-align: left;
  cursor: pointer;
}

.cota:hover { border-color: var(--texto-2); }
.cota-nome { color: var(--texto-2); font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cota-valor { font-weight: 600; }
.cota-status { font-size: 13px; font-weight: 500; }

.cota.quitada { background: var(--bom-fundo); border-color: transparent; }
.cota.quitada .cota-status { color: var(--bom); }
.cota.pendente .cota-status { color: var(--alerta); }
.cota.atrasada { background: var(--critico-fundo); border-color: transparent; }
.cota.atrasada .cota-status { color: var(--critico); }

.vazio { padding: 40px 16px; text-align: center; color: var(--texto-2); }

/* Metas */
.meta-barra {
  height: 8px;
  margin-top: 12px;
  border-radius: 4px;
  background: var(--borda);
  overflow: hidden;
}

.meta-barra-fill { height: 100%; background: var(--marca); }
.meta-concluida .meta-barra-fill { background: var(--bom); }
.meta-numeros { display: block; color: var(--texto-2); font-size: 13px; }
.meta-concluida .lancamento-valor strong { color: var(--bom); }
.meta-acoes { margin-top: 8px; }
.meta-acoes .link-acao:first-child { margin-left: 0; }

/* Status dos sócios */
.lista-status { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.status-socio {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--superficie);
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  box-shadow: var(--relevo);
}
.status-dados { min-width: 0; }
.status-dados p { color: var(--texto-2); font-size: 13px; }
.led {
  flex: none;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--critico);
  box-shadow: 0 0 0 2px var(--superficie), 0 0 6px rgb(0 0 0 / 25%);
}
.led.online {
  background: var(--bom);
  box-shadow: 0 0 0 2px var(--superficie), 0 0 8px var(--bom);
}

/* Integração API */
.integracao-api { margin-bottom: 28px; }
.integracao-api .cabecalho-lista { margin-bottom: 12px; }
.integracao-api .cabecalho-lista p { flex: 1; min-width: 240px; margin: 0; }
.chave-prefixo { margin-top: 4px; color: var(--texto-2); font-size: 13px; }
.chave-prefixo code, .acertos-nota code, .formulario-dialogo code {
  font-family: Consolas, "Courier New", monospace;
  font-size: 13px;
}
.chave-estado { flex: none; font-size: 13px; font-weight: 600; color: var(--alerta); }
.chave-estado.ativa { color: var(--bom); }

/* Sócios */
.socio-form { display: grid; gap: 12px; max-width: 520px; padding: 16px; }
.socio-linha { display: flex; gap: 8px; align-items: flex-end; }
.socio-linha label { flex: 1; min-width: 0; }
.socios-cadastro { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.socios-cadastro .socio-form { max-width: none; align-content: start; }
.login-rodape { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; color: var(--texto-2); font-size: 13px; }
.login-rodape .link-acao:first-child { margin-left: 0; }
.aviso-senha { padding: 8px 10px; border-radius: 8px; background: var(--alerta-fundo); color: var(--alerta); font-size: 13px; font-weight: 500; }
.senha-provisoria { padding: 10px 12px; border: 1px solid var(--borda); border-radius: 8px; font: 600 16px/1.3 Consolas, "Courier New", monospace; overflow-wrap: anywhere; user-select: all; }
.cota:disabled { cursor: default; }
.cota:disabled:hover { border-color: var(--borda); }
.cota.quitada:disabled:hover, .cota.atrasada:disabled:hover { border-color: transparent; }

/* Formulário */
dialog {
  width: min(480px, calc(100vw - 32px));
  padding: 20px;
  border: 1px solid var(--borda);
  border-radius: 12px;
  background: var(--superficie);
  color: var(--texto);
}

dialog::backdrop { background: rgb(0 0 0 / 45%); }

.formulario-dialogo { display: grid; gap: 12px; }
.formulario-dialogo h2 { font-size: 18px; font-weight: 600; }

label { display: grid; gap: 4px; font-size: 13px; font-weight: 500; color: var(--texto-2); }
label input, label select, label textarea {
  width: 100%;
  font-size: 15px;
  font-weight: 400;
  color: var(--texto);
}

label select, label textarea, .busca {
  min-height: 38px;
  padding: 6px 10px;
  border: 1px solid var(--borda);
  border-radius: 8px;
  background: var(--superficie);
  font: inherit;
  color: var(--texto);
}

label textarea { resize: vertical; }
.opcional { font-weight: 400; }

.campos-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.previa {
  min-height: 36px;
  padding: 8px 10px;
  border-radius: 8px;
  background: var(--marca-suave);
  font-size: 13px;
}

.erro-form { color: var(--critico); font-size: 13px; font-weight: 500; }
.acoes { display: flex; justify-content: flex-end; gap: 8px; }

/* Aviso */
.aviso {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  max-width: calc(100vw - 32px);
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--texto);
  color: var(--superficie);
  font-weight: 500;
}

.aviso.erro { background: var(--critico); color: var(--superficie); }

@media (max-width: 640px) {
  .cotas { grid-template-columns: 1fr; }
  .cota { grid-template-columns: 1fr auto; column-gap: 12px; align-items: center; }
  .cota-nome { grid-column: 1; }
  .cota-valor { grid-column: 2; grid-row: 1; text-align: right; }
  .cota-status { grid-column: 1 / -1; }
  .campos-lado { grid-template-columns: 1fr; }
  .mes input { flex: 1; min-width: 0; }
  .mes { width: 100%; }
  .abas { gap: 0; flex-wrap: wrap; }
  .abas a { padding: 8px 7px; font-size: 14px; }
  .usuario { width: 100%; }
  .usuario .link-acao:first-of-type { margin-left: auto; }
}

/* Acertos entre sócios */
.titulo-acertos { margin: 28px 0 2px; }
.acertos-nota { margin-bottom: 12px; color: var(--texto-2); font-size: 13px; }
.acertos { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.acerto {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  border: 1px solid var(--borda);
  border-radius: var(--raio);
  background-color: var(--superficie);
  overflow-wrap: anywhere;
}
.acerto-valor { font-size: 17px; text-shadow: var(--relevo-texto); }

/* Confirmações pendentes */
.titulo-pendencias { margin-bottom: 2px; }
.pendencias { margin-bottom: 28px; }
.pendencia p { color: var(--texto-2); font-size: 13px; }
.acoes-resposta { display: flex; flex: none; flex-wrap: wrap; align-items: center; gap: 8px; }
.lancamento-pendente {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px 16px;
  margin-top: 12px;
  padding: 8px 10px;
  border-radius: 8px;
  background-color: var(--alerta-fundo);
  color: var(--alerta);
  font-size: 13px;
  font-weight: 500;
}
.lancamento-pendente .botao { font-size: 14px; }
.lancamento-pendente .botao:not(.botao-primario) { color: var(--texto); }

/* Alto relevo: aplicado por último para valer sobre as regras acima. */
.acerto, .indicador, .socio, .lancamento, .socio-form, .vazio, .log-item, .login-cartao,
.botao, .botao-icone, .cota, .previa, .aviso, .aviso-senha, .alerta-atraso,
.mes input, label input, label select, label textarea, .busca, dialog {
  /* A camada translúcida funciona sobre qualquer cor de fundo, inclusive as de status. */
  background-image: linear-gradient(rgb(255 255 255 / 8%), rgb(0 0 0 / 4%));
  box-shadow: var(--relevo);
}

.mes input, label input, label select, label textarea, .busca,
.previa, .aviso-senha, .alerta-atraso { box-shadow: var(--relevo-leve); }

.cota:disabled { box-shadow: var(--relevo-leve); }

.botao:active, .botao-icone:active, .cota:active:not(:disabled), .abas a:active {
  transform: translateY(2px);
  box-shadow: var(--relevo-leve);
}

/* Barra superior */
.topo, .abas { position: relative; background-image: linear-gradient(rgb(255 255 255 / 10%), rgb(0 0 0 / 12%)); }
.topo { box-shadow: inset 0 1px 0 rgb(255 255 255 / 25%); }
.abas {
  flex-wrap: wrap;
  gap: 6px;
  overflow: visible;
  padding-top: 6px;
  padding-bottom: 10px;
  box-shadow: 0 2px 0 rgb(0 0 0 / 30%), 0 8px 16px rgb(0 0 0 / 40%);
}

.abas a {
  border: 0;
  border-radius: 8px;
  background: rgb(255 255 255 / 9%);
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 30%),
    inset 0 -2px 0 rgb(0 0 0 / 28%),
    0 2px 3px rgb(0 0 0 / 45%);
}

.abas a[aria-current="page"] {
  background: rgb(255 255 255 / 26%);
  font-weight: 700;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 55%),
    inset 0 -2px 0 rgb(0 0 0 / 30%),
    0 3px 5px rgb(0 0 0 / 55%);
}

/* Logo e nome */
.logo-topo, .logo-login {
  border: 2px solid rgb(255 255 255 / 28%);
  box-shadow: 0 3px 0 rgb(0 0 0 / 45%), 0 8px 16px rgb(0 0 0 / 50%);
}

.marca strong {
  text-shadow:
    0 1px 0 #ffffff,
    0 2px 0 #d9d9d9,
    0 3px 0 #b3b3b3,
    0 4px 0 #8c8c8c,
    0 6px 8px rgb(0 0 0 / 60%);
}

.marca small, .abas a, .usuario {
  text-shadow: 0 1px 0 rgb(0 0 0 / 45%), 0 2px 3px rgb(0 0 0 / 35%);
}

/* Títulos e valores nos cartões: relevo discreto para os números continuarem nítidos. */
.indicador strong, .socio-cabecalho h3, .socio .total dd, .socio .total dt, .lancamento-topo h3,
.lancamento-valor strong, .login-cartao h1, .formulario-dialogo h2, .log-cabecalho strong, .cota-valor {
  text-shadow: var(--relevo-texto);
}

.botao-primario { text-shadow: 0 1px 1px rgb(0 0 0 / 35%); }

/* Mantido por último para o foco continuar visível sobre o roxo e sobre os cartões. */
:focus-visible { box-shadow: 0 0 0 2px #ffffff, var(--relevo-leve); }

@media (prefers-color-scheme: dark) {
  :root:not([data-tema="claro"]) .botao-primario { text-shadow: 0 1px 0 rgb(255 255 255 / 35%); }
}

:root[data-tema="escuro"] .botao-primario { text-shadow: 0 1px 0 rgb(255 255 255 / 35%); }

.login-tema { justify-self: center; margin-left: 0; }

@media (max-width: 640px) {
  .logo-topo { height: 72px; }
  .marca strong { font-size: 24px; }
  .marca small { font-size: 15px; }
}