/* =====================================================================
   BOT AGÊNCIA — base
   O sistema visual do produto. Claro sem ser branco de escritório,
   hierarquia por peso e espaço em vez de cor, e nada de cinza chapado.
   ===================================================================== */

:root {
  --papel:    #F4F2EF;
  --carta:    #FFFFFF;
  --carta-2:  #FAF9F7;
  --tinta:    #14171A;
  --tinta-2:  #575E66;
  --tinta-3:  #8B9299;
  --linha:    #E5E1DB;
  --linha-2:  #EFECE7;

  /* A marca do Bot Agência é #E08968 — terracota. Ela não passa em
     contraste com texto branco (2,6:1), então não pode ser a cor de
     botão. A cor de ação é a mesma matiz escurecida até 6,2:1; a
     terracota original fica como acento, que é onde ela brilha. */
  --marca:    #A14421;
  --marca-2:  #B44E26;
  --marca-luz:#FAEBE6;
  --acento:   #E08968;
  --acento-2: #C96A45;

  --ok:       #1B7A52;
  --ok-luz:   #E9F3EE;
  --atencao:  #8F6413;
  --atencao-luz:#FBF3E4;
  --erro:     #96123A;
  --erro-luz: #FBE9EE;

  --r-p: 9px;
  --r-m: 14px;
  --r-g: 20px;

  --s-1: 0 1px 2px rgba(20,23,26,.05);
  --s-2: 0 2px 10px rgba(20,23,26,.07);
  --s-3: 0 12px 34px rgba(20,23,26,.13);

  --barra: 248px;
  --topo: 62px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { height: 100%; }

body {
  background: var(--papel);
  color: var(--tinta);
  font: 15px/1.55 "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "kern" 1, "liga" 1, "cv11" 1;
  overflow: hidden;
}

::selection { background: var(--marca-luz); }

/* --------------------------------------------------------------- ícones
   :where() zera a especificidade de propósito: este é o piso, e qualquer
   regra abaixo (.menu a svg, button svg, .vazio svg) continua mandando
   sem precisar de !important. */
:where(.ic) { width: 17px; height: 17px; flex: 0 0 auto; stroke-width: 1.7; }

/* ---------------------------------------------------------------- tipo */
h1 { font-size: 21px; font-weight: 640; letter-spacing: -.021em; }
h2 { font-size: 16px; font-weight: 620; letter-spacing: -.013em; }
h3 { font-size: 13.5px; font-weight: 620; letter-spacing: -.005em; }

.rotulo {
  font-size: 10.5px; font-weight: 680; letter-spacing: .1em;
  text-transform: uppercase; color: var(--tinta-3);
}
.fraco { color: var(--tinta-2); }
.tenue { color: var(--tinta-3); }
.num { font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- casca */
.casca { display: grid; grid-template-columns: var(--barra) 1fr; height: 100vh; }

.barra {
  background: var(--carta);
  border-right: 1px solid var(--linha);
  display: flex; flex-direction: column;
  padding: 16px 12px;
  overflow-y: auto;
}

/* A assinatura inteira, centrada, como a marca de um produto e não como
   um ícone de aplicativo. O nome da agência saiu daqui: ele identifica
   quem está logado, não o produto, e mora no Perfil. */
.marca {
  display: flex; justify-content: center;
  padding: 14px 10px 26px;
  color: var(--acento);
}

.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a {
  display: flex; align-items: center; gap: 11px;
  padding: 9px 11px; border-radius: var(--r-p);
  color: var(--tinta-2); text-decoration: none;
  font-size: 14.5px; font-weight: 520;
  transition: background .12s, color .12s;
}
.menu a:hover { background: var(--carta-2); color: var(--tinta); }
.menu a.ativo { background: var(--marca-luz); color: var(--marca); font-weight: 600; }
.menu a svg { width: 17px; height: 17px; flex: 0 0 17px; stroke-width: 1.7; }
.menu a .conta {
  margin-left: auto; font-size: 11px; font-weight: 650;
  background: var(--papel); color: var(--tinta-2);
  border-radius: 20px; padding: 1px 7px; font-variant-numeric: tabular-nums;
}
.menu a.ativo .conta { background: #fff; color: var(--marca); }

.divisa { height: 1px; background: var(--linha-2); margin: 14px 6px; }

.rodape-barra { margin-top: auto; padding: 10px; }
.saldo {
  background: var(--carta-2); border: 1px solid var(--linha-2);
  border-radius: var(--r-m); padding: 11px 12px;
}
.saldo .n { font-size: 19px; font-weight: 660; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums; }

/* -------------------------------------------------------------- área */
.area { display: flex; flex-direction: column; min-width: 0; height: 100vh; }

.cabeca {
  height: var(--topo); flex: 0 0 var(--topo);
  border-bottom: 1px solid var(--linha);
  background: rgba(244,242,239,.82);
  backdrop-filter: saturate(180%) blur(14px);
  display: flex; align-items: center; gap: 12px;
  padding: 0 22px; position: relative; z-index: 5;
}
.cabeca .cresce { flex: 1; min-width: 0; }
.palco { flex: 1; overflow: auto; padding: 20px 22px 26px; }

/* --------------------------------------------------------- controles */
button, .botao {
  border: 0; border-radius: var(--r-p);
  padding: 8px 15px; font: inherit; font-size: 13.5px; font-weight: 580;
  background: var(--marca); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; gap: 7px;
  transition: background .12s, opacity .12s, transform .06s;
  white-space: nowrap;
}
button:hover { background: var(--marca-2); }
button:active { transform: translateY(.5px); }
button:disabled { opacity: .42; cursor: default; transform: none; }
button.leve { background: var(--carta); color: var(--tinta); border: 1px solid var(--linha); }
button.leve:hover { background: var(--carta-2); }
button.fantasma { background: transparent; color: var(--tinta-2); }
button.fantasma:hover { background: var(--carta-2); color: var(--tinta); }
button.risco { background: var(--carta); color: var(--erro); border: 1px solid #EFCCD7; }
button svg { width: 15px; height: 15px; stroke-width: 1.9; }
button.so-icone { padding: 7px; }

input, select, textarea {
  border: 1px solid var(--linha); border-radius: var(--r-p);
  padding: 8px 11px; font: inherit; font-size: 13.5px;
  background: var(--carta); color: inherit; width: 100%;
  transition: border-color .12s, box-shadow .12s;
}
input:focus, select:focus, textarea:focus {
  outline: 0; border-color: var(--marca);
  box-shadow: 0 0 0 3px var(--marca-luz);
}
textarea { resize: vertical; min-height: 76px; line-height: 1.5; }
label.campo { display: block; }
label.campo > span { display: block; margin-bottom: 5px; }

.busca { position: relative; max-width: 330px; }
.busca svg { position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 15px; height: 15px; stroke: var(--tinta-3); stroke-width: 1.9; }
.busca input { padding-left: 32px; }

/* ------------------------------------------------------------ pastilhas */
.pastilha {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 11px; font-weight: 640; letter-spacing: .01em;
  padding: 2px 8px; border-radius: 20px;
  background: var(--papel); color: var(--tinta-2);
  border: 1px solid var(--linha-2);
}
.pastilha.ok { background: var(--ok-luz); color: var(--ok); border-color: #CFE5DB; }
.pastilha.atencao { background: var(--atencao-luz); color: var(--atencao); border-color: #EBDCBC; }
.pastilha.erro { background: var(--erro-luz); color: var(--erro); border-color: #EFCCD7; }
.pastilha.marca { background: var(--marca-luz); color: var(--marca); border-color: #F0D6CB; }

/* -------------------------------------------------------------- cartão */
.cartao {
  background: var(--carta); border: 1px solid var(--linha);
  border-radius: var(--r-m); box-shadow: var(--s-1);
}
.cartao.g { border-radius: var(--r-g); }

/* --------------------------------------------------------------- vazio */
.vazio {
  text-align: center; padding: 56px 20px; color: var(--tinta-2);
}
.vazio svg { width: 30px; height: 30px; stroke: var(--tinta-3); stroke-width: 1.4;
  margin-bottom: 12px; }
.vazio h2 { margin-bottom: 5px; }
.vazio p { font-size: 13.5px; max-width: 46ch; margin: 0 auto; color: var(--tinta-3); }

/* --------------------------------------------------------------- aviso */
.faixa-aviso {
  border-radius: var(--r-m); padding: 12px 14px; font-size: 13.5px;
  line-height: 1.5; margin-bottom: 16px;
}
.faixa-aviso.erro { background: var(--erro-luz); border: 1px solid #EFCCD7; color: #7A0E2E; }
.faixa-aviso.atencao { background: var(--atencao-luz); border: 1px solid #EBDCBC; color: #6E4D0E; }

/* ------------------------------------------------------------ carregando */
.tira { height: 2px; background: transparent; overflow: hidden;
  position: absolute; left: 0; right: 0; bottom: -1px; }
.tira.on::after {
  content: ""; display: block; height: 100%; width: 34%;
  background: var(--marca); animation: correr 1.05s ease-in-out infinite;
}
@keyframes correr { 0% { margin-left: -34%; } 100% { margin-left: 100%; } }

.esqueleto {
  background: linear-gradient(90deg, var(--linha-2) 25%, #F6F4F1 37%, var(--linha-2) 63%);
  background-size: 400% 100%; animation: brilho 1.3s ease infinite;
  border-radius: var(--r-p);
}
@keyframes brilho { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* -------------------------------------------------------------- gaveta */
.fundo-gaveta {
  position: fixed; inset: 0; background: rgba(20,23,26,.24);
  backdrop-filter: blur(2px); z-index: 40; opacity: 0;
  animation: surgir .16s ease forwards;
}
@keyframes surgir { to { opacity: 1; } }
.gaveta {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(780px, 94vw);
  background: var(--papel); z-index: 41; box-shadow: var(--s-3);
  display: flex; flex-direction: column;
  transform: translateX(14px); opacity: 0;
  animation: entrar .2s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes entrar { to { transform: none; opacity: 1; } }
.gaveta > header {
  height: var(--topo); flex: 0 0 var(--topo); padding: 0 18px;
  border-bottom: 1px solid var(--linha); background: var(--carta);
  display: flex; align-items: center; gap: 12px;
}
.gaveta > .corpo { flex: 1; overflow: auto; padding: 18px; }

/* --------------------------------------------------------------- modal
   Para escolher uma coisa e sair. Fica por cima da gaveta (z-index 42
   contra 41), porque o caminho real é: gaveta da peça → editor →
   escolher foto. Sem isso o modal nasceria atrás de quem o abriu. */
.fundo-modal {
  position: fixed; inset: 0; background: rgba(20,23,26,.34);
  backdrop-filter: blur(3px); z-index: 42; opacity: 0;
  animation: surgir .16s ease forwards;
}
.modal {
  position: fixed; top: 50%; left: 50%; z-index: 43;
  transform: translate(-50%, calc(-50% + 8px)); opacity: 0;
  max-height: min(86vh, 860px);
  background: var(--papel); border-radius: var(--r-g); box-shadow: var(--s-3);
  display: flex; flex-direction: column; overflow: hidden;
  animation: pousar .2s cubic-bezier(.22,.7,.3,1) forwards;
}
@keyframes pousar { to { transform: translate(-50%, -50%); opacity: 1; } }
.modal > header {
  flex: 0 0 auto; padding: 14px 16px; background: var(--carta);
  border-bottom: 1px solid var(--linha);
  display: flex; align-items: center; gap: 12px;
}
.modal > .corpo { flex: 1; overflow: auto; padding: 16px; }
.modal > .rodape {
  flex: 0 0 auto; padding: 10px 16px; background: var(--carta);
  border-top: 1px solid var(--linha);
  display: flex; align-items: center; gap: 10px;
  font-size: 12px; color: var(--tinta-3);
}
.modal > .rodape a { color: var(--tinta-2); }

/* ----------------------------------------------------------- utilidades */
.linha { display: flex; align-items: center; gap: 10px; }
.entre { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cresce { flex: 1; min-width: 0; }
.corta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pilha { display: flex; flex-direction: column; gap: 12px; }
.grade { display: grid; gap: 14px; }
.oculto { display: none !important; }

@media (max-width: 900px) {
  .casca { grid-template-columns: 1fr; }
  .barra { display: none; }
}