/* ==========================================================================
   FAAD & UADI Contabilidade — Identidade visual
   Tokens e componentes compartilhados entre o site e o portal do cliente.
   ========================================================================== */

:root {
  /* Verde institucional extraído da marca */
  --verde-950: #06211B;
  --verde-900: #0A2E26;
  --verde-800: #113F34;
  --verde-700: #195B4D;   /* cor principal do logo */
  --verde-600: #1F6E5C;
  --verde-500: #268A73;
  --verde-400: #2FA98D;
  --verde-300: #62C9B0;
  --verde-200: #A8E4D4;
  --verde-100: #DDF2EB;
  --verde-50:  #F1F9F6;

  /* Cinzas da marca */
  --cinza-marca: #A8A8AA;
  --grafite: #14201E;
  --texto: #23312F;
  --texto-suave: #5F706D;
  --texto-fraco: #8C9A97;
  --linha: #E2EAE8;
  --linha-forte: #CBD8D5;
  --fundo: #F5F8F7;
  --fundo-alt: #EDF3F1;
  --branco: #FFFFFF;

  /* Apoio */
  --dourado: #C29B4A;
  --dourado-claro: #F2E7CE;
  --sucesso: #16794F;
  --sucesso-bg: #E4F5EC;
  --alerta: #A9760C;
  --alerta-bg: #FBF0DA;
  --erro: #B3261E;
  --erro-bg: #FBE9E7;
  --info: #1F6E5C;
  --info-bg: #E2F2EF;

  /* Tipografia */
  --serif: Georgia, 'Times New Roman', 'Liberation Serif', serif;
  --sans: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Formas */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-full: 999px;

  --sombra-xs: 0 1px 2px rgba(6, 33, 27, .06);
  --sombra-sm: 0 2px 8px rgba(6, 33, 27, .07);
  --sombra-md: 0 10px 30px rgba(6, 33, 27, .10);
  --sombra-lg: 0 24px 60px rgba(6, 33, 27, .16);

  --container: 1180px;
  --transicao: 180ms cubic-bezier(.4, 0, .2, 1);
}

* { box-sizing: border-box; }

/* o atributo hidden precisa vencer qualquer display definido depois */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 96px; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}

/* Nenhuma palavra pode estourar a caixa — vale para tela estreita e para quem
   usa fonte ampliada no Android, onde "Contabilidade" sozinha passava da tela. */
h1, h2, h3, h4, p, li, td, th, dd, dt, label, .btn, .selo, .chip {
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--verde-900);
  line-height: 1.18;
  margin: 0 0 .5em;
  font-weight: 700;
  letter-spacing: -.01em;
}

p { margin: 0 0 1em; }
a { color: var(--verde-600); text-decoration: none; transition: color var(--transicao); }
a:hover { color: var(--verde-400); }
img, svg { max-width: 100%; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------- Botões -- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: var(--r-full);
  border: 1.5px solid transparent;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transicao);
}
.btn:focus-visible { outline: 3px solid var(--verde-300); outline-offset: 2px; }

.btn-primario {
  background: var(--verde-700);
  color: #fff;
  box-shadow: 0 6px 18px rgba(25, 91, 77, .25);
}
.btn-primario:hover { background: var(--verde-600); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(25, 91, 77, .3); }

.btn-secundario { background: var(--branco); color: var(--verde-700); border-color: var(--linha-forte); }
.btn-secundario:hover { border-color: var(--verde-400); color: var(--verde-600); background: var(--verde-50); }

.btn-contorno { background: transparent; color: var(--verde-700); border-color: var(--verde-700); }
.btn-contorno:hover { background: var(--verde-700); color: #fff; }

.btn-claro { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(6px); }
.btn-claro:hover { background: #fff; color: var(--verde-800); }

.btn-dourado { background: var(--dourado); color: #2A2007; }
.btn-dourado:hover { background: #D7AF5D; color: #2A2007; }

.btn-perigo { background: var(--erro-bg); color: var(--erro); border-color: #F0CFCB; }
.btn-perigo:hover { background: var(--erro); color: #fff; }

.btn-sm { padding: 8px 14px; font-size: 13.5px; }
.btn-xs { padding: 6px 11px; font-size: 12.5px; gap: 5px; }
.btn-lg { padding: 15px 30px; font-size: 16.5px; }
.btn-bloco { width: 100%; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }

/* --------------------------------------------------------------- Selos --- */
.selo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  border-radius: var(--r-full);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--verde-100);
  color: var(--verde-700);
  white-space: nowrap;
}
.selo-sucesso { background: var(--sucesso-bg); color: var(--sucesso); }
.selo-alerta  { background: var(--alerta-bg); color: var(--alerta); }
.selo-erro    { background: var(--erro-bg); color: var(--erro); }
.selo-neutro  { background: var(--fundo-alt); color: var(--texto-suave); }
.selo-dourado { background: var(--dourado-claro); color: #7A5B12; }

/* ------------------------------------------------------------- Mensagens - */
.alerta {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px 18px;
  border-radius: var(--r-md);
  border: 1px solid transparent;
  margin-bottom: 14px;
  font-size: 14.5px;
  animation: surgir .3s ease both;
}
.alerta strong { font-weight: 700; }
.alerta-sucesso { background: var(--sucesso-bg); border-color: #BEE3D1; color: #0C5236; }
.alerta-erro    { background: var(--erro-bg); border-color: #F1CCC8; color: #8A1C16; }
.alerta-aviso   { background: var(--alerta-bg); border-color: #EBD6A6; color: #7A560A; }
.alerta-info    { background: var(--info-bg); border-color: #BFDDD8; color: var(--verde-800); }

@keyframes surgir { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* --------------------------------------------------------------- Cards --- */
.cartao {
  background: var(--branco);
  border: 1px solid var(--linha);
  border-radius: var(--r-lg);
  box-shadow: var(--sombra-xs);
}
.cartao-corpo { padding: 24px; }

/* ------------------------------------------------------------ Formulários- */
.campo { margin-bottom: 16px; }
.campo label,
.rotulo {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--texto-suave);
  margin-bottom: 6px;
}
.campo .dica { font-size: 12.5px; color: var(--texto-fraco); margin-top: 5px; text-transform: none; letter-spacing: 0; font-weight: 400; }

input[type=text], input[type=email], input[type=password], input[type=number],
input[type=date], input[type=month], input[type=tel], input[type=search],
input[type=url], select, textarea {
  width: 100%;
  padding: 11px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--branco);
  border: 1.5px solid var(--linha-forte);
  border-radius: var(--r-sm);
  transition: border-color var(--transicao), box-shadow var(--transicao);
}
textarea { min-height: 110px; resize: vertical; line-height: 1.6; }
select { appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235F706D' d='M1 1.5 6 6.5l5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px; }
select[multiple] { background-image: none; padding-right: 14px; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--verde-400);
  box-shadow: 0 0 0 3px rgba(26, 163, 148, .16);
}
input::placeholder, textarea::placeholder { color: #A8B5B2; }

input[type=file] {
  width: 100%;
  padding: 10px;
  border: 1.5px dashed var(--linha-forte);
  border-radius: var(--r-sm);
  background: var(--verde-50);
  font-size: 14px;
}

.linha-campos { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.linha-campos.duas { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

.check {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  color: var(--texto);
  cursor: pointer;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 500;
}
.check input { width: 18px; height: 18px; accent-color: var(--verde-600); margin: 0; }

/* -------------------------------------------------------------- Tabelas -- */
.tabela-wrap { overflow-x: auto; border-radius: var(--r-md); border: 1px solid var(--linha); background: var(--branco); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14.5px; }
table.tabela th {
  text-align: left;
  padding: 13px 16px;
  background: var(--fundo-alt);
  color: var(--verde-800);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
  border-bottom: 1px solid var(--linha);
}
table.tabela td { padding: 13px 16px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tabela tbody tr:last-child td { border-bottom: none; }
table.tabela tbody tr { transition: background var(--transicao); }
table.tabela tbody tr:hover { background: var(--verde-50); }
.tabela .acoes { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }

.vazio {
  text-align: center;
  padding: 54px 24px;
  color: var(--texto-suave);
}
.vazio .icone { font-size: 40px; margin-bottom: 10px; opacity: .5; }
.vazio h3 { color: var(--verde-800); margin-bottom: 6px; }

/* ------------------------------------------------------- Utilitários ----- */
.flex { display: flex; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.centro { display: flex; align-items: center; gap: 10px; }
.grid { display: grid; gap: 20px; }
.mt-0 { margin-top: 0; } .mb-0 { margin-bottom: 0; }
.mt-1 { margin-top: 8px; }  .mb-1 { margin-bottom: 8px; }
.mt-2 { margin-top: 16px; } .mb-2 { margin-bottom: 16px; }
.mt-3 { margin-top: 26px; } .mb-3 { margin-bottom: 26px; }
.mt-4 { margin-top: 40px; }
.texto-suave { color: var(--texto-suave); }
.texto-fraco { color: var(--texto-fraco); font-size: 13px; }
.pequeno { font-size: 13px; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.mono { font-family: 'Consolas', 'SF Mono', Menlo, monospace; font-size: 13.5px; }

.sobrelinha {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--verde-500);
  margin-bottom: 12px;
  display: block;
}

/* ícone de tipo de arquivo */
.tipo-arq {
  width: 40px; height: 40px; flex: 0 0 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  background: var(--fundo-alt); color: var(--texto-suave);
  text-transform: uppercase;
}
.tipo-pdf { background: #FDEAE8; color: #B3261E; }
.tipo-img { background: #EAF2FD; color: #1B5FAE; }
.tipo-doc { background: #E8EFFB; color: #2B4C9B; }
.tipo-xls { background: #E4F5EC; color: #16794F; }
.tipo-ppt { background: #FDEEE2; color: #B45309; }
.tipo-zip { background: #F1EDFB; color: #5B3FA8; }
.tipo-txt { background: #EDF3F1; color: #45605B; }