* {
  box-sizing: border-box;
}

:root {
  --marrom: #3f2228;
  --marrom-claro: #63353f;
  --dourado: #ae727e;
  --dourado-claro: #d9bf87;
  --fundo: #f6f5f0;
  --branco: #ffffff;
  --borda: #e6dcdd;
  --texto: #2d2d2d;
  --texto-suave: #6f6466;
  --verde: #39785c;
  --vermelho: #b94a48;
}

html {
  font-size: 16px;
}

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

/* =========================
   CABEÇALHO
   ========================= */

header {
  background: var(--marrom);
  color: white;
  min-height: 72px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 3px 15px rgba(48, 42, 37, 0.12);
}

header strong,
header b {
  font-size: 20px;
  letter-spacing: 0.2px;
}

header a {
  color: white;
  text-decoration: none;
  font-weight: 500;
}

header a:hover {
  opacity: 0.8;
}

/* =========================
   MENU
   ========================= */

nav {
  background: var(--branco);
  min-height: 58px;
  padding: 0 5%;
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--borda);
  box-shadow: 0 2px 8px rgba(48, 42, 37, 0.04);
}

nav a {
  color: var(--marrom-claro);
  text-decoration: none;
  padding: 10px 15px;

  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  transition: 0.2s ease;
}

nav a:hover {
  color: var(--marrom);
  background: #f4ebec;
  text-decoration: none;
}

/* =========================
   CONTEÚDO
   ========================= */

.wrap {
  width: min(1200px, calc(100% - 48px));
  margin: 38px auto 60px;
}

h1 {
  margin: 0 0 8px;
  color: var(--marrom);
  font-size: 34px;
  line-height: 1.2;
  letter-spacing: -0.5px;
}

h2 {
  color: var(--marrom);
}

p {
  margin-top: 8px;
  color: var(--texto-suave);
}

/* =========================
   CABEÇALHO DAS PÁGINAS
   ========================= */

.head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 28px;
}

.head p {
  margin: 0;
  font-size: 16px;
}

/* =========================
   DASHBOARD
   ========================= */

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.card {
  position: relative;
  background: var(--branco);
  padding: 25px;
  min-height: 145px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(48, 42, 37, 0.05);
  transition: 0.2s ease;
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(48, 42, 37, 0.08);
}

.card small {
  display: block;
  color: var(--texto-suave);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card strong {
  display: block;
  margin-top: 12px;
  color: var(--marrom);
  font-size: 29px;
  line-height: 1.15;
}

/* =========================
   BOTÕES
   ========================= */

.btn,
button {
  display: inline-block;
  background: var(--marrom);
  color: white;
  border: 0;
  border-radius: 9px;
  padding: 11px 17px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: 0.2s ease;
}

.btn:hover,
button:hover {
  background: var(--marrom-claro);
  color: white;
  text-decoration: none;
  transform: translateY(-1px);
}

/* =========================
   TABELAS
   ========================= */

.table {
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 16px;
  overflow-x: auto;
  box-shadow: 0 6px 20px rgba(48, 42, 37, 0.04);
}

table {
  width: 100%;
  min-width: 700px;
  border-collapse: collapse;
}

th {
  background: #f9f4f5;
  color: var(--marrom);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

th,
td {
  padding: 14px 16px;
  border-bottom: 1px solid #ece3e5;
  text-align: left;
}

td {
  color: #4f4648;
}

tr:last-child td {
  border-bottom: 0;
}

tr:hover td {
  background: #fdfbf9;
}

/* =========================
   FORMULÁRIOS
   ========================= */

.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  background: var(--branco);
  padding: 28px;
  border: 1px solid var(--borda);
  border-radius: 18px;
  box-shadow: 0 6px 20px rgba(48, 42, 37, 0.04);
}

.form label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  color: var(--marrom);
  font-size: 14px;
  font-weight: 600;
}

.form .wide {
  grid-column: 1 / -1;
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 13px;
  border: 1px solid #daced0;
  border-radius: 9px;
  background: white;
  color: var(--texto);
  font: inherit;
  outline: none;
  transition: 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--dourado);
  box-shadow: 0 0 0 3px rgba(184, 154, 104, 0.14);
}

textarea {
  min-height: 100px;
  resize: vertical;
}

/* =========================
   LOGIN
   ========================= */

.login {
  min-height: 100vh;
  padding: 30px 20px;
  display: grid;
  place-items: center;
  background: var(--fundo);
}

.login section {
  width: min(440px, 100%);
  padding: 42px;
  background: var(--branco);
  border: 1px solid var(--borda);
  border-radius: 24px;
  box-shadow: 0 18px 50px rgba(48, 42, 37, 0.10);
}

.logo {
  width: 64px;
  height: 64px;
  margin-bottom: 22px;
  display: grid;
  place-items: center;
  background: var(--marrom);
  color: var(--dourado-claro);
  border-radius: 16px;
  font-size: 24px;
  font-weight: 800;
}

.login form {
  display: grid;
  gap: 15px;
}

.login label {
  display: grid;
  gap: 6px;
  color: var(--marrom);
  font-weight: 600;
}

/* =========================
   MENSAGEM DE ERRO
   ========================= */

.err {
  margin: 15px 0;
  padding: 12px 14px;
  background: #fff1f1;
  color: var(--vermelho);
  border: 1px solid #f1cccc;
  border-radius: 9px;
}

/* =========================
   LINKS
   ========================= */

a {
  color: #8a4b59;
}

a:hover {
  text-decoration: underline;
}

/* =========================
   RESPONSIVIDADE
   ========================= */

@media (max-width: 950px) {
  .grid {
    grid-template-columns: 1fr 1fr;
  }

  .wrap {
    width: min(100% - 36px, 1200px);
    margin-top: 28px;
  }
}

@media (max-width: 700px) {
  header {
    min-height: 64px;
    padding: 0 18px;
  }

  nav {
    padding: 7px 12px;
  }

  nav a {
    padding: 9px 10px;
    font-size: 13px;
  }

  .wrap {
    width: calc(100% - 30px);
    margin: 24px auto 45px;
  }

  h1 {
    font-size: 28px;
  }

  .head {
    align-items: flex-start;
    flex-direction: column;
  }

  .form {
    grid-template-columns: 1fr;
    padding: 20px;
  }

  .form .wide {
    grid-column: auto;
  }

  .login section {
    padding: 30px 24px;
  }
}

@media (max-width: 500px) {
  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    min-height: 125px;
    padding: 21px;
  }

  .card strong {
    font-size: 26px;
  }


  table {
    min-width: 620px;
  }
}

/* ===== Tela de login GF Manager ===== */
body.tela-login{
  margin:0;
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px 20px;
  background:#d6bbc0;
  font-family:'Jost',ui-sans-serif,system-ui,-apple-system,sans-serif;
  color:#3f2228;
  -webkit-font-smoothing:antialiased;
}
.login-gf{width:100%;max-width:400px}
.login-gf *{box-sizing:border-box}
.login-gf .cartao{
  background:#fcf9f9;
  border:1px solid #e3d3d6;
  border-radius:14px;
  padding:34px 30px 28px;
  box-shadow:0 12px 32px rgba(78,47,32,.10),0 2px 6px rgba(78,47,32,.06);
}
.login-gf .marca{text-align:center}
.login-gf .marca img{width:100%;max-width:236px;height:auto;display:inline-block}
.login-gf .filete{width:44px;height:1px;background:#e3d3d6;margin:20px auto 12px}
.login-gf .sub{
  text-align:center;font-size:13.5px;color:#7a5a60;
  margin:0 0 26px;letter-spacing:.2px;
}
.login-gf .campo{margin-bottom:16px}
.login-gf label{
  display:block;font-size:13px;font-weight:500;
  margin-bottom:7px;color:#3f2228;
}
.login-gf input{
  width:100%;height:46px;padding:0 14px;
  font-family:inherit;font-size:15px;color:#3f2228;
  background:#fff;border:1px solid #e3d3d6;border-radius:9px;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.login-gf input::placeholder{color:#af9a9e}
.login-gf input:hover{border-color:#c9b3b7}
.login-gf input:focus{
  outline:none;border-color:#4b272d;
  box-shadow:0 0 0 3px rgba(78,47,32,.12);
}
.login-gf .senha{position:relative}
.login-gf .senha input{padding-right:46px}
.login-gf .olho{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;border:0;background:none;cursor:pointer;
  color:#7a5a60;display:flex;align-items:center;justify-content:center;
  border-radius:8px;padding:0;
}
.login-gf .olho:hover{color:#4b272d;background:#f1e6e8}
.login-gf .olho:focus-visible{outline:2px solid #4b272d;outline-offset:1px}
.login-gf .aviso{
  display:flex;align-items:center;gap:9px;
  background:#F6E4E0;color:#9B3B2E;
  font-size:13px;border-radius:9px;
  padding:11px 12px;margin-bottom:18px;
}
.login-gf .entrar{
  width:100%;height:48px;border:0;border-radius:9px;
  background:#4b272d;color:#f6eef0;
  font-family:inherit;font-size:15.5px;font-weight:500;letter-spacing:.3px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s ease,transform .08s ease;
}
.login-gf .entrar:hover{background:#361b21}
.login-gf .entrar:active{transform:scale(.99)}
.login-gf .entrar:focus-visible{outline:2px solid #4b272d;outline-offset:3px}
.login-gf .entrar[disabled]{cursor:default;opacity:.72}
.login-gf .giro{
  width:16px;height:16px;border:2px solid rgba(247,239,233,.35);
  border-top-color:#f6eef0;border-radius:50%;
  animation:gf-girar .7s linear infinite;
}
@keyframes gf-girar{to{transform:rotate(360deg)}}
.login-gf .rodape{
  text-align:center;font-size:12px;color:#866c71;
  margin:18px 0 0;letter-spacing:.2px;
}
@media (prefers-reduced-motion:reduce){
  .login-gf *,body.tela-login *{animation:none!important;transition:none!important}
}
@media (max-width:420px){
  .login-gf .cartao{padding:28px 22px 24px}
}

/* ===== Identidade GF no sistema ===== */
:root{
  --fundo: #f0e6e8;
  --borda: #e1cfd3;
}

header .brand img{
  height: 34px;
  width: auto;
  display: block;
}

nav{
  gap: 2px;
  padding: 6px 5%;
}

nav a{
  padding: 10px 12px;
  font-size: 13.5px;
}

@media (max-width: 900px){
  nav a{padding: 9px 9px; font-size: 13px}
}

/* ===== Cores oficiais da marca ===== */
:root{
  --marrom: #4b272d;
  --marrom-claro: #63353f;
  --texto: #3f2228;
  --texto-suave: #7a5a60;
  --dourado: #4b272d;
  --dourado-claro: #dfc6cb;
}

a{
  color: #63353f;
}

input:focus,
select:focus,
textarea:focus{
  box-shadow: 0 0 0 3px rgba(78, 47, 32, 0.12);
}

th{
  background: #f5ecee;
}

nav a:hover{
  background: #f3e9eb;
}
/* =========================================================
   v7 - LEITURA E TABELAS NO CELULAR
   Colar no FIM do styles.css, sem apagar nada acima.
   ========================================================= */

/* Fonte da marca em todo o sistema, com traço mais firme. */
body {
  font-family: 'Jost', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-weight: 600;
}

nav a {
  font-weight: 600;
}

td {
  color: #473438;
  font-weight: 500;
}

th {
  font-weight: 600;
}

/* O mesmo botão, com os dois nomes de classe. */
.botao {
  display: inline-block;
  background: var(--marrom);
  color: white;
  border: 0;
  border-radius: 9px;
  padding: 11px 17px;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}

.botao:hover {
  background: var(--marrom-claro);
  color: white;
  text-decoration: none;
}

/* Alinha o conteúdo no topo da célula, não no meio do vão. */
.table th,
.table td {
  vertical-align: top;
}

/* Observações deixam de esticar a linha. */
td.obs {
  max-width: 230px;
}

td.obs span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--texto-suave);
  font-size: 13.5px;
}

td.nome {
  min-width: 170px;
}

/* =========================================================
   NO CELULAR, A TABELA VIRA CARTÕES
   Vale para qualquer <div class="table cartoes">
   ========================================================= */

@media (max-width: 760px) {

  .table.cartoes {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  .table.cartoes table,
  .table.cartoes tbody,
  .table.cartoes tr,
  .table.cartoes td {
    display: block;
    width: auto;
    min-width: 0;
  }

  .table.cartoes thead {
    display: none;
  }

  .table.cartoes tr {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: 14px;
    margin-bottom: 12px;
    padding: 4px 0;
    box-shadow: 0 4px 14px rgba(48, 42, 37, 0.05);
  }

  .table.cartoes td {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 9px 15px;
    border-bottom: 1px solid #f1e8ea;
    text-align: right;
  }

  .table.cartoes tr td:last-child {
    border-bottom: 0;
  }

  .table.cartoes td::before {
    content: attr(data-rotulo);
    flex: 0 0 auto;
    color: var(--texto-suave);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: left;
    text-transform: uppercase;
  }

  .table.cartoes td.obs {
    max-width: none;
  }

  .table.cartoes td.obs span {
    -webkit-line-clamp: 3;
    text-align: right;
  }

  .table.cartoes tr:hover td {
    background: transparent;
  }

  /* Primeira linha do cartão em destaque. */
  .table.cartoes td:first-child {
    background: #f9f3f4;
    border-radius: 12px 12px 0 0;
  }
}


/* --------------------------------------------------------
   Tabela dentro de cartao

   A regra .card strong existe para o numero grande dos
   cartoes de indicador. Quando a tabela fica dentro de um
   cartao (Repasses, Despesas Fixas), o nome do cliente e os
   valores herdavam esse tamanho. Aqui eles voltam a ser
   texto de tabela.
   -------------------------------------------------------- */

.card table strong,
.card table b {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
  font-weight: 600;
}

.card table small {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  color: var(--texto-suave);
}