:root {
  --branco: #ffffff;
  --creme: #faeadb;
  --creme-claro: #fdf6ef;
  --castanho: #9b6244;
  --castanho-escuro: #7f4f36;
  --rosa: #b08878;
  --texto: #2c1a0e;
  --texto-2: #8b7355;
  --linha: #eedccb;
  --verde: #5f7d5a;
  --vermelho: #a4483a;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(44, 26, 14, 0.04), 0 4px 16px rgba(44, 26, 14, 0.05);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--creme-claro);
  color: var(--texto);
  font: 15px/1.5 "DM Sans", system-ui, sans-serif;
}

h1, h2, h3 {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 600;
  color: var(--rosa);
  margin: 0 0 6px;
  line-height: 1.15;
}
h1 { font-size: 34px; }
h2 { font-size: 26px; }
h3 { font-size: 20px; }

.muted { color: var(--texto-2); }
[hidden] { display: none !important; }

/* ---------- Botões e campos ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 500 15px "DM Sans", sans-serif;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.btn:disabled { opacity: 0.55; cursor: default; }
.btn-primario { background: var(--castanho); color: #fff; }
.btn-primario:hover:not(:disabled) { background: var(--castanho-escuro); }
.btn-secundario { background: var(--branco); color: var(--castanho); border-color: var(--castanho); }
.btn-fantasma { background: transparent; color: var(--castanho); border-color: var(--linha); }
.btn-fantasma:hover { background: var(--creme); }
.btn-perigo { background: transparent; color: var(--vermelho); border-color: #e6c4bd; }
.btn-pequeno { min-height: 34px; padding: 0 12px; font-size: 14px; }

label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--texto-2); font-weight: 500; }

input, select, textarea {
  font: 15px "DM Sans", sans-serif;
  color: var(--texto);
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 9px 12px;
  min-height: 42px;
  width: 100%;
}
input:focus, select:focus, textarea:focus, .btn:focus-visible {
  outline: 2px solid var(--rosa);
  outline-offset: 1px;
}

.erro { color: var(--vermelho); font-size: 14px; min-height: 1em; margin: 6px 0 0; }

.cartao {
  background: var(--branco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 20px;
}

/* ---------- Login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 16px; background: var(--creme); }
.login-card {
  width: 100%;
  max-width: 360px;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  text-align: center;
}
.login-card h1 { margin: 0; }
.login-card p { margin: 0; }
.login-card label { text-align: left; }
.login-card .lembrar { flex-direction: row; align-items: center; gap: 8px; font-size: 14px; color: var(--texto); cursor: pointer; }
.login-card .lembrar input { width: 18px; height: 18px; min-height: 0; accent-color: var(--castanho); }
.login-logo { width: 64px; height: 64px; object-fit: contain; margin: 0 auto; }

/* ---------- Topo ---------- */

.topo {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  padding-top: max(10px, env(safe-area-inset-top));
  background: rgba(253, 246, 239, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--linha);
}
.marca { display: flex; align-items: center; gap: 10px; }
.marca img { width: 34px; height: 34px; object-fit: contain; }
.marca span { font: 600 24px "Cormorant Garamond", serif; color: var(--rosa); }
.topo-acoes { display: flex; gap: 8px; }
.topo-acoes .btn { min-height: 36px; padding: 0 12px; font-size: 14px; }

.conteudo { max-width: 1040px; margin: 0 auto; padding: 20px 16px 80px; display: flex; flex-direction: column; gap: 18px; }

/* ---------- Aviso Drive ---------- */

.aviso-drive {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: #fbeae7;
  border: 1px solid #e6c4bd;
  border-left: 4px solid var(--vermelho);
  border-radius: 12px;
  padding: 14px 18px;
}
.aviso-drive strong { color: var(--vermelho); }
.aviso-drive p { margin: 2px 0 0; font-size: 14px; }
.aviso-drive.aviso-leve { background: var(--creme); border-color: var(--linha); border-left-color: var(--rosa); }
.aviso-drive.aviso-leve strong { color: var(--castanho); }

/* ---------- Adicionar ---------- */

.adicionar {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 16px 24px;
  align-items: center;
  background: var(--creme);
  border: 2px dashed transparent;
  transition: border-color 0.15s, background 0.15s;
}
.adicionar p { margin: 0; }
.adicionar.arrastar { border-color: var(--castanho); background: #f6dfca; }
.adicionar-botoes { display: flex; gap: 10px; flex-wrap: wrap; }
.drop-dica { grid-column: 1 / -1; font-size: 13px; }
.banner-email {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  background: var(--branco);
  border: 1px solid var(--linha);
  border-left: 4px solid var(--castanho);
  border-radius: 12px;
  padding: 14px 18px;
  box-shadow: var(--sombra);
}
.banner-email strong { color: var(--castanho); font-size: 15px; }
.banner-email p { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.banner-email.com-erro { background: #fbeae7; border-left-color: var(--vermelho); }
.banner-email.com-erro strong { color: var(--vermelho); }
.erro-inline { color: var(--vermelho); }
.origem-email { margin: -4px 0 10px; font-size: 13px; color: var(--texto-2); }
.item-fila.ignorada { border-left-color: var(--linha); opacity: 0.85; }
.item-fila.ignorada .duplicado-texto strong { color: var(--texto-2); }

/* ---------- Fila de faturas por guardar ---------- */

.fila { display: flex; flex-direction: column; gap: 12px; }
.fila:empty { display: none; }

.item-fila {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  background: var(--branco);
  border-radius: 16px;
  box-shadow: var(--sombra);
  padding: 16px;
  border-left: 4px solid var(--linha);
}
.item-fila.ok { border-left-color: var(--verde); }
.item-fila.manual { border-left-color: var(--rosa); }
.item-fila.erro-item { border-left-color: var(--vermelho); }

.miniatura {
  width: 96px;
  height: 128px;
  border-radius: 8px;
  background: var(--creme) center / cover no-repeat;
  border: 1px solid var(--linha);
  display: grid;
  place-items: center;
  font-size: 12px;
  color: var(--texto-2);
}

.item-cabecalho { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.item-nome { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.estado { font-size: 13px; font-weight: 500; white-space: nowrap; }
.estado.ok { color: var(--verde); }
.estado.manual { color: var(--castanho); }
.estado.erro-item { color: var(--vermelho); }

.campos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.campos .largo { grid-column: span 2; }
.campos .inteiro { grid-column: 1 / -1; }

.item-acoes { display: flex; gap: 8px; justify-content: flex-end; margin-top: 12px; flex-wrap: wrap; align-items: center; }
.item-acoes .erro { margin: 0 auto 0 0; }

.fila-acoes { display: flex; justify-content: flex-end; }

.duvidas {
  background: var(--creme-claro);
  border: 1px solid var(--linha);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  font-size: 14px;
}
.duvidas-titulo { color: var(--castanho); }
.duvidas ul { margin: 6px 0 0; padding-left: 18px; display: flex; flex-direction: column; gap: 4px; }
.duvidas a { color: var(--castanho); }
.duvidas-dica { margin: 8px 0 0; font-size: 13px; color: var(--texto-2); }

.item-fila.duplicado {
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--creme-claro);
  box-shadow: none;
  border: 1px solid var(--linha);
  border-left: 4px solid var(--rosa);
  padding: 12px 16px;
}
.duplicado-texto { font-size: 14px; }
.duplicado-texto p { margin: 2px 0 0; color: var(--texto-2); }
.item-fila.duplicado .item-acoes { margin-top: 0; }

.duplicados { border-left: 4px solid var(--rosa); }
.duplicados-topo { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.duplicados-topo p { margin: 0; font-size: 14px; }
.grupo-dup { border-top: 1px solid var(--linha); margin-top: 14px; padding-top: 12px; font-size: 14px; }
.grupo-motivo { margin: 0 0 4px; }
.grupo-dup ul { margin: 0; padding-left: 18px; color: var(--texto-2); }
.grupo-dup a { color: var(--castanho); }

/* ---------- Filtros e resumo ---------- */

.barra-filtros { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin-top: 8px; }
.barra-filtros label { width: auto; }
.barra-filtros select { min-width: 120px; }
.barra-filtros .pesquisa { flex: 1; min-width: 180px; }

.resumo { display: grid; grid-template-columns: 260px 1fr; gap: 18px; }
.kpi { display: flex; flex-direction: column; justify-content: center; gap: 4px; }
.kpi-rotulo { font-size: 13px; color: var(--texto-2); font-weight: 500; }
.kpi-valor { font: 600 40px "Cormorant Garamond", serif; color: var(--texto); line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi-sub { font-size: 13px; }

.barras { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.barras li {
  display: grid;
  grid-template-columns: minmax(120px, 200px) 1fr auto;
  gap: 12px;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
  border-radius: 6px;
}
.barras li:hover .barra-nome { color: var(--castanho); }
.barras li.ativa .barra-nome { color: var(--castanho); font-weight: 600; }
.barra-pista { display: block; height: 10px; background: var(--creme); border-radius: 5px; overflow: hidden; }
.barra-cheia { display: block; height: 100%; background: var(--castanho); border-radius: 5px; }
.barra-valor { font-variant-numeric: tabular-nums; color: var(--texto); }

/* ---------- Lista por mês ---------- */

.lista-meses { display: flex; flex-direction: column; gap: 14px; }
.mes { background: var(--branco); border-radius: 16px; box-shadow: var(--sombra); overflow: hidden; }
.mes-cabecalho {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 14px 20px;
  background: var(--creme);
}
.mes-cabecalho h3 { margin: 0; }
.mes-total { font-weight: 600; font-variant-numeric: tabular-nums; }
.mes-total small { font-weight: 400; color: var(--texto-2); margin-left: 6px; }

.fatura {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 20px;
  border-top: 1px solid var(--linha);
}
.fatura:first-of-type { border-top: 0; }
.fatura-data { color: var(--texto-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.fatura-info { min-width: 0; }
.fatura-fornecedor { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fatura-meta { font-size: 13px; color: var(--texto-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip { display: inline-block; padding: 1px 8px; border-radius: 999px; background: var(--creme); color: var(--castanho); font-size: 12px; font-weight: 500; margin-right: 6px; }
.fatura-total { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fatura-total.negativo { color: var(--verde); }
.fatura-acoes { display: flex; gap: 6px; }

.vazio { text-align: center; padding: 40px 0; }

details.mes > summary { list-style: none; cursor: pointer; }
details.mes > summary::-webkit-details-marker { display: none; }
details.mes > summary h3::before {
  content: "›";
  display: inline-block;
  width: 18px;
  color: var(--castanho);
  transition: transform 0.15s;
}
details.mes[open] > summary h3::before { transform: rotate(90deg); }
details.mes:not([open]) > summary { background: var(--branco); }
.fatura[data-abrir] { cursor: pointer; }
.fatura[data-abrir]:hover { background: var(--creme-claro); }
.dica-lista { margin: -6px 0 0; font-size: 13px; }

.link { background: none; border: 0; padding: 0; font: inherit; color: var(--castanho); text-decoration: underline; cursor: pointer; }
.item-fila.duplicado { border-left-color: var(--vermelho); }
.item-fila.duplicado .duplicado-texto strong { color: var(--vermelho); }

/* ---------- Ver fatura ---------- */

.dialogo.dialogo-ver { width: min(1100px, calc(100vw - 32px)); padding: 0; overflow: hidden; }
.ver-grelha { display: grid; grid-template-columns: minmax(0, 1fr) 300px; height: min(85vh, 900px); }
.ver-ficheiro {
  background: #ece3da;
  overflow: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.ver-ficheiro canvas, .ver-ficheiro img { width: 100%; max-width: 900px; height: auto; background: #fff; box-shadow: var(--sombra); border-radius: 4px; }
.ver-aviso { color: var(--texto-2); margin: auto; text-align: center; padding: 20px; }
.ver-lado { padding: 20px; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.ver-topo { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.ver-topo h2 { margin: 0; word-break: break-word; }
.ver-detalhes { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 14px; }
.ver-detalhes dt { color: var(--texto-2); }
.ver-detalhes dd { margin: 0; }
.ver-total { font-weight: 600; font-size: 18px; }
.ver-acoes, .ver-nav { display: flex; gap: 8px; flex-wrap: wrap; }
.ver-nav { margin-top: auto; justify-content: space-between; }

/* ---------- Diálogo ---------- */

.dialogo {
  border: 0;
  border-radius: 16px;
  padding: 24px;
  width: min(640px, calc(100vw - 32px));
  box-shadow: 0 20px 60px rgba(44, 26, 14, 0.25);
  color: var(--texto);
}
.dialogo::backdrop { background: rgba(44, 26, 14, 0.35); }
.dialogo-acoes { display: flex; gap: 8px; margin-top: 16px; }
.espaco { flex: 1; }

.toast {
  position: fixed;
  left: 50%;
  bottom: max(20px, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--texto);
  color: #fff;
  padding: 10px 18px;
  border-radius: 10px;
  font-size: 14px;
  box-shadow: var(--sombra);
  z-index: 50;
  max-width: calc(100vw - 32px);
}

/* ---------- Telemóvel ---------- */

@media (max-width: 720px) {
  .adicionar { grid-template-columns: 1fr; }
  .adicionar-botoes .btn { flex: 1; }
  .drop-dica { display: none; }
  .resumo { grid-template-columns: 1fr; }
  .campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .item-fila, .item-fila.duplicado { grid-template-columns: 1fr; }
  .miniatura { width: 100%; height: 120px; background-size: contain; }
  .barras li { grid-template-columns: minmax(0, 1fr) 80px auto; }
  .fatura { grid-template-columns: 1fr auto; gap: 2px 12px; padding: 12px 16px; }
  .fatura-data { grid-column: 1; grid-row: 1; font-size: 12px; }
  .fatura-info { grid-column: 1; grid-row: 2; }
  .fatura-total { grid-column: 2; grid-row: 1 / span 2; }
  .fatura-acoes { grid-column: 1 / -1; grid-row: 3; margin-top: 6px; }
  .mes-cabecalho { padding: 12px 16px; }
  .topo-acoes #link-drive { display: none; }
  .kpi-valor { font-size: 34px; }
  .dialogo.dialogo-ver { width: 100vw; max-width: 100vw; height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .ver-grelha { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; height: 100dvh; }
  .ver-ficheiro { padding: 8px; }
  .ver-lado { max-height: 45dvh; border-top: 1px solid var(--linha); padding: 14px 16px; gap: 12px; }
  .ver-topo { order: -1; }
}