/* ============================================================
   CRM Easy Smile — painel
   Tokens e componentes do Design System Easy Smile.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&display=swap');

@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/WorkSans-Variable.woff2') format('woff2');
}

:root {
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Work Sans', system-ui, sans-serif;

  --espresso: #17110B;
  --charcoal: #141418;
  --charcoal-2: #1C1C22;
  --charcoal-3: #26262E;

  --a: #C9A24B;          /* ouro — acento protagonista */
  --aw: #E8CE8E;         /* ouro claro */
  --fg1: #F4F0E7;        /* marfim */
  --fg2: #9C978D;        /* névoa */

  --border: rgba(201, 162, 75, 0.28);
  --border-soft: rgba(201, 162, 75, 0.14);

  --gradient-gold: linear-gradient(176deg, #F6E7B6 2%, #E8CE8E 24%, #C9A24B 52%, #9A7733 74%, #E6C97F 100%);
  --gradient-espresso: radial-gradient(120% 90% at 30% 0%, #221708, transparent 60%), var(--espresso);

  --lead: #9C978D;
  --quente: #E0913D;
  --aluno: #2FB574;
  --aluno-soft: #7FE0AE;
  --reembolsado: #C86B6B;
}

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

html { -webkit-font-smoothing: antialiased; }

body {
  min-height: 100vh;
  background: radial-gradient(130% 90% at 78% -10%, rgba(201, 162, 75, 0.10), transparent 55%), var(--gradient-espresso);
  color: var(--fg1);
  font-family: var(--font-sans);
  line-height: 1.6;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgba(201, 162, 75, 0.22); border-radius: 100px; }
::-webkit-scrollbar-track { background: transparent; }

@keyframes esFade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes esSlide { from { transform: translateX(24px); } to { transform: none; } }

.es-view { animation: esFade .35s ease; }

/* ---------- Tipografia ---------- */

.eyebrow {
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--fg2);
}

h1.titulo {
  font-family: var(--font-display);
  font-size: 29px;
  font-weight: 600;
  letter-spacing: .005em;
  margin-top: 2px;
  line-height: 1.2;
}

.numero { font-family: var(--font-display); font-weight: 600; line-height: 1; }

/* ---------- Formulários ---------- */

input, textarea, select, button { font-family: inherit; font-size: 13.5px; color: var(--fg1); }

input, textarea, select {
  width: 100%;
  padding: 11px 14px;
  border-radius: 11px;
  border: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.25);
  transition: border-color .15s;
}
textarea { line-height: 1.6; resize: vertical; }
select { cursor: pointer; }
input[type=date] { color-scheme: dark; }
input::placeholder, textarea::placeholder { color: #6f6a61; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--a); }
input[readonly] { color: var(--aw); font-family: ui-monospace, monospace; font-size: 13px; }

label.campo {
  display: block;
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg2);
  margin-bottom: 8px;
}

/* ---------- Botões ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 18px;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  font-weight: 600;
  letter-spacing: .02em;
  transition: filter .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
.btn.ouro { background: var(--gradient-gold); color: #1A140A; }
.btn.ouro:hover { filter: brightness(1.06); }
.btn.fantasma { background: transparent; border: 1px solid var(--border); color: var(--fg1); font-weight: 400; }
.btn.fantasma:hover { border-color: var(--a); }
.btn.verde { background: rgba(47,181,116,.15); color: var(--aluno-soft); border: 1px solid rgba(47,181,116,.4); }
.btn.vermelho { background: rgba(200,107,107,.15); color: #E39B9B; border: 1px solid rgba(200,107,107,.45); }
.btn:disabled { opacity: .5; cursor: default; filter: none; }

/* ---------- Abas ---------- */

.abas {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid var(--border-soft);
  width: fit-content;
}
.abas button {
  padding: 8px 15px;
  border-radius: 9px;
  border: none;
  background: transparent;
  color: var(--fg2);
  cursor: pointer;
  font-size: 13px;
}
.abas button.on { background: rgba(201, 162, 75, 0.15); color: var(--fg1); font-weight: 600; }
.abas button .n { opacity: .6; margin-left: 6px; }

/* ---------- Cartões ---------- */

.cartao {
  padding: 22px;
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  background: rgba(255, 255, 255, 0.02);
}
.cartao.brilho { background: linear-gradient(160deg, rgba(255,255,255,.035), rgba(255,255,255,.008)); }
.cartao.ouro { background: linear-gradient(160deg, rgba(201,162,75,.08), rgba(201,162,75,.02)); }
.cartao .rotulo { font-size: 12px; color: var(--fg2); letter-spacing: .04em; }
.cartao h2 { font-weight: 600; font-size: 15px; }

.clicavel { cursor: pointer; transition: transform .18s, border-color .18s; }
.clicavel:hover { transform: translateY(-2px); border-color: rgba(201, 162, 75, 0.5); }

/* ---------- Pílulas e etiquetas ---------- */

.pill {
  display: inline-flex;
  align-items: center;
  padding: 4px 11px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 500;
  white-space: nowrap;
}
.avatar {
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-weight: 600;
  flex-shrink: 0;
}

/* ---------- Layout ---------- */

.app { display: flex; min-height: 100vh; }

aside.lateral {
  width: 256px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding: 26px 18px;
  border-right: 1px solid var(--border-soft);
  background: rgba(10, 8, 5, 0.5);
  backdrop-filter: blur(8px);
}
.marca { display: flex; align-items: center; gap: 12px; padding: 4px 8px 26px; }
.marca .logo {
  width: 38px; height: 38px; border-radius: 11px;
  display: grid; place-items: center;
  background: var(--gradient-gold); color: #1A140A;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1;
}
.marca .nome { font-family: var(--font-display); font-size: 19px; font-weight: 600; line-height: 1.15; }

nav { display: flex; flex-direction: column; gap: 4px; }
nav button {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 11px 13px; border-radius: 11px; border: none;
  background: transparent; color: var(--fg2);
  cursor: pointer; transition: background .15s, color .15s;
}
nav button:hover { background: rgba(255, 255, 255, 0.04); color: var(--fg1); }
nav button.on {
  background: linear-gradient(100deg, rgba(201,162,75,.15), rgba(201,162,75,.05));
  color: var(--fg1); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--a);
}
nav button .icone { width: 20px; display: inline-flex; justify-content: center; font-size: 15px; opacity: .9; }
nav button .badge {
  margin-left: auto; font-size: 11px; font-weight: 600;
  padding: 1px 8px; border-radius: 100px;
  background: rgba(201, 162, 75, 0.16); color: var(--aw);
}

.status-webhook {
  margin-top: auto; padding: 16px; border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: linear-gradient(160deg, rgba(201,162,75,.09), rgba(201,162,75,.02));
}
.ponto { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.ponto.verde { background: var(--aluno); box-shadow: 0 0 8px var(--aluno); }
.ponto.cinza { background: var(--fg2); }

.usuario {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 8px 2px; margin-top: 14px;
  border-top: 1px solid var(--border-soft);
}

main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

header.topo {
  display: flex; align-items: center; gap: 20px;
  padding: 22px 34px;
  border-bottom: 1px solid var(--border-soft);
  position: sticky; top: 0; z-index: 20;
  background: rgba(23, 17, 11, 0.72);
  backdrop-filter: blur(12px);
}
.busca { position: relative; display: flex; align-items: center; }
.busca span { position: absolute; left: 14px; color: var(--fg2); font-size: 14px; }
.busca input { width: 230px; padding-left: 36px; }

.conteudo { flex: 1; overflow-y: auto; padding: 30px 34px 60px; }

.grade-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grade-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.linha { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ---------- Tabela ---------- */

.tabela {
  border-radius: 16px;
  border: 1px solid var(--border-soft);
  overflow: hidden;
  background: rgba(255, 255, 255, 0.015);
}
.tabela .cabecalho, .tabela .item {
  display: grid;
  grid-template-columns: 2.2fr 1.3fr 1.3fr 1fr .8fr;
  gap: 16px;
  align-items: center;
  border-bottom: 1px solid var(--border-soft);
}
.tabela .cabecalho {
  padding: 14px 22px;
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg2);
}
.tabela .item { padding: 15px 22px; cursor: pointer; transition: background .15s; }
.tabela .item:hover { background: rgba(255, 255, 255, 0.028); }
.tabela .item:last-child { border-bottom: none; }
.vazio { padding: 48px; text-align: center; color: var(--fg2); font-size: 14px; }

.corta { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Kanban ---------- */

.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 8px; }
.coluna { flex: 1; min-width: 280px; display: flex; flex-direction: column; gap: 12px; }
.coluna .titulo-col { display: flex; align-items: center; gap: 8px; padding: 0 4px; font-size: 13px; font-weight: 600; }
.coluna .cartoes {
  display: flex; flex-direction: column; gap: 10px;
  min-height: 60px; padding: 10px; border-radius: 14px;
  background: rgba(0, 0, 0, 0.22); border: 1px solid var(--border-soft);
}
.kcard {
  padding: 14px; border-radius: 12px;
  background: var(--charcoal); border: 1px solid var(--border-soft);
  cursor: pointer; transition: transform .18s, border-color .18s;
}
.kcard:hover { transform: translateY(-2px); border-color: rgba(201, 162, 75, 0.5); }

/* ---------- Gráfico ---------- */

.barras { display: flex; align-items: flex-end; gap: 12px; height: 150px; }
.barras .col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; height: 100%; justify-content: flex-end; }
.barras .barra { width: 100%; border-radius: 7px 7px 3px 3px; background: linear-gradient(180deg, var(--aw), var(--a)); min-height: 6px; }
.barras .dia { font-size: 10.5px; color: var(--fg2); }

.progresso { height: 7px; border-radius: 100px; background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.progresso > div { height: 100%; border-radius: 100px; }

/* ---------- Gaveta de detalhe ---------- */

.sombra {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(5, 3, 1, 0.55);
  backdrop-filter: blur(2px);
}
.gaveta {
  position: fixed; top: 0; right: 0; height: 100vh; width: 400px; max-width: 100vw;
  z-index: 50; overflow-y: auto; padding: 28px;
  background: var(--charcoal);
  border-left: 1px solid var(--border);
  animation: esSlide .3s ease both;
  box-shadow: -30px 0 60px rgba(0, 0, 0, 0.4);
}
.dados {
  display: flex; flex-direction: column; gap: 2px;
  border-radius: 13px; border: 1px solid var(--border-soft); overflow: hidden;
}
.dados > div {
  display: flex; gap: 12px; padding: 13px 16px;
  background: rgba(255, 255, 255, 0.02); font-size: 13.5px;
}
.dados .k { width: 84px; flex-shrink: 0; color: var(--fg2); font-size: 12px; }
.secao { margin-top: 24px; }
.secao > .rotulo {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg2); margin-bottom: 12px;
}
.caixa-acao {
  margin-top: 22px; padding: 18px; border-radius: 13px;
  border: 1px dashed var(--border); background: rgba(47, 181, 116, 0.05);
}
.caixa-acao.perigo { border-color: rgba(200, 107, 107, 0.4); background: rgba(200, 107, 107, 0.06); }
.caixa-acao h3 { font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.caixa-acao p { font-size: 12px; color: var(--fg2); line-height: 1.5; margin-bottom: 14px; }

.fechar { background: transparent; border: none; color: var(--fg2); font-size: 22px; cursor: pointer; line-height: 1; padding: 2px 6px; }

/* ---------- Modal ---------- */

.modal {
  position: fixed; inset: 0; z-index: 55;
  background: rgba(5, 3, 1, 0.62); backdrop-filter: blur(3px);
  display: flex; align-items: center; justify-content: center; padding: 24px;
}
.modal .caixa {
  width: 100%; max-width: 600px; max-height: 88vh; overflow-y: auto;
  border-radius: 18px; border: 1px solid var(--border);
  background: var(--charcoal); padding: 28px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5);
}
.modal h2 { font-family: var(--font-display); font-size: 22px; font-weight: 600; }

/* ---------- Aviso flutuante ---------- */

#aviso {
  position: fixed; bottom: 28px; left: 50%; transform: translateX(-50%);
  z-index: 60; padding: 14px 24px; border-radius: 100px;
  background: var(--charcoal-3); border: 1px solid var(--border);
  font-size: 13.5px; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  animation: esFade .25s ease both; max-width: 90vw; text-align: center;
}
#aviso.erro { border-color: rgba(200, 107, 107, .6); color: #E39B9B; }

/* ---------- Tela de login ---------- */

.login { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login form {
  width: 100%; max-width: 380px;
  background: var(--charcoal); border: 1px solid var(--border);
  border-radius: 18px; padding: 32px;
}
.login .marca { justify-content: center; padding-bottom: 20px; }

/* ---------- Telas menores ---------- */

@media (max-width: 900px) {
  .app { flex-direction: column; }
  aside.lateral { width: 100%; height: auto; position: static; border-right: none; border-bottom: 1px solid var(--border-soft); }
  nav { flex-direction: row; flex-wrap: wrap; }
  nav button { width: auto; }
  .status-webhook, .usuario { display: none; }
  header.topo, .conteudo { padding-left: 18px; padding-right: 18px; }
  .grade-4, .grade-2 { grid-template-columns: 1fr; }
  .tabela .cabecalho { display: none; }
  .tabela .item { grid-template-columns: 1fr; gap: 8px; }
  .gaveta { width: 100%; }
  .busca input { width: 100%; }
}