/* ============================================================
   AGENDA — Madame Vargas
   Mesma identidade visual do site institucional.
   ============================================================ */

:root{
  --ink:#15130f;
  --ink-2:#1c1911;
  --moss:#3c4a36;
  --moss-deep:#2a3327;
  --moss-light:#8a9a78;
  --stone:#cabf9f;
  --stone-2:#e6ddc7;
  --cream:#f5efdf;
  --charcoal:#2b2718;
  --muted-light:#6d6650;
  --gold:#c9a445;
  --gold-light:#e8cd84;
  --danger:#a15a4a;
  --danger-light:#e2a190;
  --line:rgba(43,51,39,.16);
  --radius:6px;
  --serif:"Cormorant Garamond", Georgia, serif;
  --display:"Manrope","Jost","Helvetica Neue",Arial,sans-serif;
  --sans:"Jost","Helvetica Neue",Arial,sans-serif;
}

*{box-sizing:border-box;}
body{
  margin:0;background:var(--stone-2);color:var(--charcoal);
  font-family:var(--sans);font-weight:300;line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--display);font-weight:800;letter-spacing:-.01em;margin:0;}
button{font-family:var(--sans);cursor:pointer;}
input,select{font-family:var(--sans);}

/* ---------- botão animado padrão ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  padding:11px 22px;border-radius:999px;border:1px solid var(--gold);
  font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;
  background:transparent;color:#8a6d1f;
  transition:transform .15s ease, box-shadow .15s ease, background .2s, color .2s;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px -8px rgba(43,51,39,.35);}
.btn:active{transform:translateY(0);}
.btn.solid{background:var(--gold);color:#211b09;border-color:var(--gold);}
.btn.solid:hover{background:var(--gold-light);border-color:var(--gold-light);}
.btn.ghost{border-color:var(--line);color:var(--muted-light);}
.btn.danger{border-color:var(--danger);color:var(--danger);}
.btn.danger:hover{background:var(--danger);color:#fff;}
.btn.small{padding:8px 15px;font-size:.72rem;min-height:34px;}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;}

/* ============================================================
   TELA DE LOGIN
   ============================================================ */
.login-screen{
  min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg, var(--moss), var(--moss-deep));
  padding:24px;
}
.login-card{
  background:var(--cream);border-radius:var(--radius);
  max-width:380px;width:100%;padding:44px 36px;
  animation:riseIn .4s ease;
}
@keyframes riseIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}}
.login-card .wordmark{font-family:var(--serif);font-style:italic;font-size:1.8rem;text-align:center;display:block;margin-bottom:2px;}
.login-card .sub{text-align:center;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:#8a6d1f;margin-bottom:32px;}
.login-field{display:grid;gap:6px;margin-bottom:18px;}
.login-field label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);}
.login-field input{
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);
  background:#fff;font-size:.92rem;color:var(--charcoal);
}
.login-field input:focus{outline:2px solid var(--gold);outline-offset:1px;}
.login-error{
  background:#f6e6e2;border:1px solid var(--danger-light);color:var(--danger);
  padding:10px 12px;border-radius:var(--radius);font-size:.82rem;margin-bottom:16px;display:none;
}
.login-error.show{display:block;}
.login-card .btn{width:100%;margin-top:6px;padding:13px;}

/* ============================================================
   SHELL DO APP
   ============================================================ */
.app{display:none;min-height:100vh;flex-direction:column;}
.app.show{display:flex;}

.topbar{
  background:var(--moss-deep);color:var(--cream);
  padding:14px 24px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.topbar .wordmark{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:var(--gold-light);}
.topbar .who{display:flex;align-items:center;gap:14px;font-size:.82rem;}
.topbar .who strong{color:var(--gold-light);}
.topbar .btn.ghost{border-color:rgba(244,239,228,.3);color:var(--cream);}

.toolbar{
  background:var(--cream);border-bottom:1px solid var(--line);
  padding:16px 24px;display:flex;align-items:center;justify-content:space-between;
  gap:16px;flex-wrap:wrap;
}
.week-nav{display:flex;align-items:center;gap:10px;}
.week-nav button{
  width:34px;height:34px;border-radius:50%;border:1px solid var(--line);
  background:#fff;color:var(--charcoal);font-size:1rem;display:flex;align-items:center;justify-content:center;
  transition:background .15s, transform .15s;
}
.week-nav button:hover{background:var(--stone-2);transform:scale(1.06);}
.week-nav .label{font-family:var(--display);font-weight:700;font-size:.95rem;min-width:170px;text-align:center;}

.day-tabs{display:flex;gap:6px;flex-wrap:wrap;}
.day-tab{
  padding:8px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;font-size:.76rem;color:var(--muted-light);
  transition:background .15s, color .15s, border-color .15s;
}
.day-tab.active{background:var(--gold);border-color:var(--gold);color:#211b09;font-weight:600;}
.day-tab:hover:not(.active){border-color:var(--gold);color:#8a6d1f;}

.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
.filters select{
  padding:9px 12px;border-radius:var(--radius);border:1px solid var(--line);
  background:#fff;font-size:.8rem;color:var(--charcoal);
}

.actions-row{display:flex;gap:10px;flex-wrap:wrap;}

/* ============================================================
   MATRIZ DA AGENDA
   ============================================================ */
.matrix-wrap{flex:1;overflow:auto;padding:20px 24px 60px;}
.matrix{border-collapse:separate;border-spacing:0;width:100%;min-width:640px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 1px 0 var(--line);}
.matrix thead th{
  background:var(--moss);color:var(--cream);font-family:var(--display);font-weight:700;
  font-size:.78rem;padding:12px 10px;text-align:left;position:sticky;top:0;z-index:2;
}
.matrix thead th:first-child{width:70px;background:var(--moss-deep);}
.matrix thead th .func-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:6px;}
.matrix td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:top;height:34px;}
.matrix td.time-col{
  background:var(--stone-2);color:var(--muted-light);font-size:.72rem;text-align:right;padding:6px 10px;
  position:sticky;left:0;white-space:nowrap;
}
.slot-empty{
  width:100%;height:100%;min-height:34px;background:transparent;border:0;cursor:pointer;
  transition:background .15s;
}
.slot-empty:hover{background:rgba(201,164,69,.14);}
.appt-card{
  width:100%;height:100%;border:none;border-radius:4px;margin:1px;padding:6px 8px;
  text-align:left;color:#fff;font-size:.72rem;line-height:1.3;cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
  display:flex;flex-direction:column;gap:1px;overflow:hidden;
}
.appt-card:hover{transform:scale(1.015);box-shadow:0 6px 14px -6px rgba(0,0,0,.35);z-index:3;position:relative;}
.appt-card strong{font-family:var(--display);font-weight:700;font-size:.76rem;}
.appt-card.blocked{background:repeating-linear-gradient(135deg, rgba(0,0,0,.25) 0 6px, rgba(0,0,0,.1) 6px 12px);color:#fff;}

/* ============================================================
   MODAIS
   ============================================================ */
.modal-overlay{
  position:fixed;inset:0;background:rgba(21,19,15,.72);
  display:none;align-items:center;justify-content:center;z-index:1000;padding:20px;
}
.modal-overlay.open{display:flex;}
.modal{
  background:#fff;border-radius:var(--radius);max-width:460px;width:100%;
  max-height:90vh;overflow-y:auto;overflow-x:hidden;padding:30px 28px;position:relative;
  animation:riseIn .25s ease;
}
.modal.wide{max-width:760px;}
.modal.extra-wide{max-width:920px;}
.modal-close{
  position:absolute;top:14px;right:14px;background:none;border:0;
  color:var(--muted-light);font-size:1.3rem;cursor:pointer;padding:6px;line-height:1;
}
.modal h3{font-size:1.3rem;margin-bottom:4px;}
.modal .modal-sub{font-size:.8rem;color:var(--muted-light);margin-bottom:22px;}
.modal .field{display:grid;gap:6px;margin-bottom:16px;min-width:0;position:relative;}
.modal .field label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);}
.modal .field input, .modal .field select, .modal .field textarea{
  width:100%;padding:11px 13px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.88rem;color:var(--charcoal);background:#fdfcf8;
}
.modal .field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;min-width:0;}
.modal .field-row .field{min-width:0;}
.modal .modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:22px;flex-wrap:wrap;}

.appt-detail-box{
  background:var(--stone-2);border-radius:var(--radius);padding:16px 18px;margin-bottom:20px;
}
.appt-detail-box .row{display:flex;justify-content:space-between;font-size:.85rem;padding:5px 0;}
.appt-detail-box .row .k{color:var(--muted-light);}
.appt-detail-box .row .v{color:var(--charcoal);font-weight:500;}

.slot-suggestions{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:8px;}
.slot-suggestion{
  display:flex;justify-content:space-between;align-items:center;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--radius);
  font-size:.82rem;transition:border-color .15s,background .15s;
}
.slot-suggestion:hover{border-color:var(--gold);background:#fdf8ec;}
.slot-suggestion button{padding:6px 14px;}

.checklist{display:flex;flex-direction:column;gap:8px;max-height:220px;overflow-y:auto;margin-bottom:8px;}
.checklist label{display:flex;gap:10px;align-items:center;font-size:.85rem;padding:8px 10px;border:1px solid var(--line);border-radius:var(--radius);}

/* ============================================================
   TOASTS
   ============================================================ */
.toast-stack{position:fixed;top:20px;right:20px;z-index:2000;display:flex;flex-direction:column;gap:10px;}
.toast{
  background:var(--moss-deep);color:var(--cream);padding:14px 18px;border-radius:var(--radius);
  font-size:.85rem;min-width:240px;max-width:320px;box-shadow:0 12px 30px -10px rgba(0,0,0,.4);
  display:flex;align-items:center;gap:10px;
  animation:toastIn .25s ease;
  border-left:3px solid var(--gold);
}
.toast.error{border-left-color:var(--danger);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:translateX(0);}}
.toast.leaving{animation:toastOut .2s ease forwards;}
@keyframes toastOut{to{opacity:0;transform:translateX(20px);}}

/* ---------- loading ---------- */
.loading-bar{height:2px;background:var(--gold);width:0;transition:width .3s ease;}
.spinner-inline{
  width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;
  border-radius:50%;animation:spin .6s linear infinite;display:inline-block;
}
@keyframes spin{to{transform:rotate(360deg);}}

/* ============================================================
   AUTOCOMPLETE (cliente e e-mail)
   ============================================================ */
.autocomplete-list{
  position:absolute;top:100%;left:0;right:0;z-index:20;
  background:#fff;border:1px solid var(--line);border-top:none;
  border-radius:0 0 var(--radius) var(--radius);
  max-height:200px;overflow-y:auto;
  box-shadow:0 12px 24px -12px rgba(0,0,0,.25);
  display:none;
}
.autocomplete-list.show{display:block;}
.autocomplete-item{
  padding:10px 13px;cursor:pointer;font-size:.85rem;color:var(--charcoal);
  display:flex;flex-direction:column;gap:1px;
  border-bottom:1px solid var(--stone-2);
}
.autocomplete-item:last-child{border-bottom:none;}
.autocomplete-item:hover, .autocomplete-item.active{background:var(--stone-2);}
.autocomplete-item small{color:var(--muted-light);font-size:.72rem;}

/* ============================================================
   BARRA DE HORÁRIOS DISPONÍVEIS
   ============================================================ */
.slot-bar-wrap{margin:-4px 0 16px;}
.slot-bar-label{font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);margin-bottom:8px;}
.slot-bar{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;}
.slot-pill{
  flex:none;padding:9px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fdfcf8;font-size:.8rem;color:var(--charcoal);white-space:nowrap;
  transition:background .15s, border-color .15s, color .15s;
}
.slot-pill:hover{border-color:var(--gold);color:#8a6d1f;}
.slot-pill.selected{background:var(--gold);border-color:var(--gold);color:#211b09;font-weight:600;}
.slot-bar-empty{font-size:.8rem;color:var(--muted-light);padding:6px 0;}
.slot-bar-loading{font-size:.8rem;color:var(--muted-light);padding:6px 0;display:flex;align-items:center;gap:8px;}

/* ============================================================
   LOADING — pincel de esmalte passando na unha
   (usado durante ações que gravam algo: agendar, remarcar, bloquear...)
   ============================================================ */
.brush-loading-overlay{
  position:fixed;inset:0;background:rgba(21,19,15,.55);
  display:none;align-items:center;justify-content:center;z-index:3000;
}
.brush-loading-overlay.show{display:flex;}
.brush-loading-card{
  background:var(--cream);border-radius:var(--radius);
  padding:32px 40px;display:flex;flex-direction:column;align-items:center;gap:14px;
  animation:riseIn .2s ease;min-width:220px;
}
.brush-loading-card .msg{font-size:.85rem;color:var(--muted-light);letter-spacing:.02em;}

.progresso-bar-track{
  width:180px;height:6px;border-radius:999px;background:var(--stone-2);overflow:hidden;
}
.progresso-bar-fill{
  height:100%;width:0%;border-radius:999px;
  background:linear-gradient(90deg, var(--gold), var(--gold-light));
  transition:width .25s ease;
}
.progresso-percentual{font-family:var(--display);font-weight:800;color:var(--gold);font-size:1.1rem;}

/* ============================================================
   GESTÃO — abas e calendário de liberação de agenda
   ============================================================ */
.gestao-tabs{display:flex;gap:6px;padding:16px 24px 0;background:var(--cream);border-bottom:1px solid var(--line);}
.gestao-tab{
  padding:12px 20px;border-radius:8px 8px 0 0;border:1px solid var(--line);border-bottom:none;
  background:var(--stone-2);font-size:.82rem;color:var(--muted-light);margin-bottom:-1px;
}
.gestao-tab.active{background:#fff;color:var(--charcoal);font-weight:600;border-bottom:1px solid #fff;}
.gestao-panel{display:none;padding:28px 24px 60px;max-width:640px;margin:0 auto;}
.gestao-panel.active{display:block;}
.gestao-panel-empty{
  padding:60px 24px;text-align:center;color:var(--muted-light);font-size:.9rem;
}

.liberar-controls{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;margin-bottom:20px;}
.liberar-controls .field{flex:1;min-width:160px;}
.liberar-controls select, .liberar-controls input{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);font-size:.85rem;
}

.mes-nav{display:flex;align-items:center;justify-content:center;gap:14px;margin:22px 0 14px;}
.mes-nav button{
  width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:#fff;
  display:flex;align-items:center;justify-content:center;
}
.mes-nav .label{font-family:var(--display);font-weight:800;font-size:1.05rem;min-width:150px;text-align:center;}

.calendario{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;}
.calendario .dow{text-align:center;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);padding-bottom:4px;}
.calendario .dia{
  aspect-ratio:1/1;border-radius:8px;border:1px solid var(--line);background:#fff;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:.85rem;color:var(--charcoal);
  cursor:pointer;transition:background .15s, border-color .15s, color .15s;padding:2px;
}
.calendario .dia:hover{border-color:var(--gold);}
.calendario .dia.ativo{background:var(--gold);border-color:var(--gold);color:#211b09;font-weight:700;}
.calendario .dia.vazio{visibility:hidden;cursor:default;}
.calendario .dia.passado{opacity:.35;cursor:not-allowed;}
.calendario .dia-num{line-height:1;}
.calendario .dia-horario-custom{
  font-size:.52rem;font-weight:400;letter-spacing:.02em;text-decoration:underline;
  text-decoration-style:dotted;opacity:.75;line-height:1.1;text-align:center;
}
.calendario .dia-horario-custom.tem-excecao{opacity:1;text-decoration-style:solid;}

.liberar-legenda{display:flex;gap:18px;margin-top:16px;font-size:.76rem;color:var(--muted-light);}
.liberar-legenda span{display:inline-flex;align-items:center;gap:6px;}
.liberar-legenda i{width:12px;height:12px;border-radius:4px;display:inline-block;border:1px solid var(--line);}
.liberar-legenda i.ativo{background:var(--gold);border-color:var(--gold);}

.quick-select-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-bottom:16px;}

/* ---------- abas dentro de modal (ex: detalhe do cliente) ---------- */
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--line);}
.tab-btn{
  padding:9px 16px;border:none;background:none;font-size:.78rem;color:var(--muted-light);
  border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;
}
.tab-btn.active{color:#8a6d1f;border-color:var(--gold);font-weight:600;}
.tab-panel{display:none;}
.tab-panel.active{display:block;}

.kpi-row-mini{display:flex;gap:12px;}
.kpi-mini{flex:1;background:var(--stone-2);border-radius:var(--radius);padding:14px 16px;}
.kpi-mini .lbl{display:block;font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);margin-bottom:4px;}
.kpi-mini .val{font-family:var(--display);font-weight:800;font-size:1.15rem;color:var(--charcoal);}

.visita-card{border:1px solid var(--line);border-radius:var(--radius);padding:12px 14px;margin-bottom:8px;}
.visita-card .topo{display:flex;justify-content:space-between;margin-bottom:6px;}
.visita-card .itens-tags{display:flex;flex-wrap:wrap;gap:6px;}

.secao-acordeao{
  border:1px solid var(--line);border-radius:10px;margin:16px 0;overflow:hidden;background:#fff;
}
.secao-acordeao summary{
  cursor:pointer;padding:14px 18px;background:var(--stone-2);list-style:none;
  font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--charcoal);font-weight:500;
  display:flex;align-items:center;justify-content:space-between;user-select:none;
}
.secao-acordeao summary::-webkit-details-marker{display:none;}
.secao-acordeao summary::after{content:"+";font-size:1.3rem;color:var(--gold);font-style:normal;font-weight:700;}
.secao-acordeao[open] summary::after{content:"−";}
.secao-acordeao summary:hover{background:#e6ddc7;}
.secao-acordeao .secao-conteudo{padding:20px 18px 6px;}
.secao-acordeao .field-row:last-child, .secao-acordeao .field:last-child{margin-bottom:0;}

.bloco-pf-pj{
  background:var(--stone-2);border-radius:var(--radius);padding:22px 24px;margin:20px 0;
  border-left:3px solid var(--gold);
}
.bloco-titulo{
  font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--charcoal);
  margin:0 0 16px;padding-bottom:10px;border-bottom:1px solid rgba(43,51,39,.1);
}
.secao-form{margin:24px 0 8px;}
.secao-form .field-label-solo{
  font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);
  font-weight:700;margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);
}

/* ---------- wizard de passos (ex: cadastro de funcionário) ---------- */
.wizard-indicador{display:flex;gap:4px;flex-wrap:wrap;margin:18px 0 22px;}
.wizard-ponto{
  display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:999px;
  background:var(--stone-2);color:var(--muted-light);font-size:.72rem;white-space:nowrap;
}
.wizard-ponto em{
  font-style:normal;width:18px;height:18px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:700;
}
.wizard-ponto.ativo{background:var(--gold);color:#211b09;font-weight:700;}
.wizard-ponto.ativo em{background:#211b09;color:var(--gold);}
.wizard-ponto.feito{color:#2b6b2e;}
.wizard-ponto.feito em{background:#2b6b2e;color:#fff;}

.wizard-passo{display:none;animation:riseIn .2s ease;}
.wizard-passo.ativo{display:block;}
.wizard-passo > .field-label-solo{
  font-family:var(--serif);font-style:italic;font-weight:500;text-transform:none;
  letter-spacing:0;font-size:1.15rem;color:var(--charcoal);border-bottom:1px solid var(--line);
  padding-bottom:10px;margin:0 0 18px;
}

/* ---------- listas de cadastro (funcionários/serviços/pagamento) ---------- */
.list-rows{display:flex;flex-direction:column;gap:8px;}

/* ---------- pacotes: layout de duas colunas ---------- */
.pacotes-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start;}
@media (max-width:820px){.pacotes-grid{grid-template-columns:1fr;}}
.painel-card{background:#fff;border-radius:18px;padding:26px 24px;box-shadow:0 4px 20px -12px rgba(43,51,39,.25);}
.painel-card h4{font-family:var(--serif);font-style:italic;font-size:1.1rem;margin-bottom:18px;color:var(--charcoal);font-weight:500;}
.field-label-solo{display:block;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-light);margin:14px 0 8px;}
.chips-row{display:flex;flex-wrap:wrap;gap:8px;min-height:24px;margin-bottom:6px;}
.chip{
  display:inline-flex;align-items:center;gap:8px;
  background:var(--stone-2);border-radius:999px;padding:6px 8px 6px 14px;
  font-size:.8rem;color:var(--charcoal);
}
.chip button{
  width:18px;height:18px;border-radius:50%;border:none;background:rgba(43,51,39,.12);
  color:var(--charcoal);font-size:.75rem;line-height:1;cursor:pointer;flex:none;
}
.chip button:hover{background:var(--danger);color:#fff;}
.pacote-catalogo-card{
  border:none;border-radius:16px;padding:18px 20px;margin-bottom:14px;
  background:#fff;box-shadow:0 2px 10px -6px rgba(43,51,39,.2);
  transition:transform .15s ease, box-shadow .15s ease;
}
.pacote-catalogo-card:hover{transform:translateY(-2px);box-shadow:0 14px 28px -14px rgba(43,51,39,.35);}
.pacote-catalogo-card.inativo{opacity:.5;box-shadow:none;}
.pacote-catalogo-card .topo{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px;gap:12px;}
.pacote-catalogo-card .topo strong{font-family:var(--serif);font-style:italic;font-size:1.1rem;color:var(--charcoal);font-weight:500;}
.pacote-catalogo-card .itens-tags{display:flex;flex-wrap:wrap;gap:7px;}
.tag-servico{background:var(--stone-2);border-radius:999px;padding:4px 12px;font-size:.72rem;color:#8a6d1f;}
.preco-destaque{
  font-size:.95rem;font-weight:700;padding:6px 14px;border-radius:999px;
  background:var(--gold);color:#fff;white-space:nowrap;flex:none;
}

/* ---------- clientes ---------- */
.clientes-toolbar{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;}
.clientes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;}

/* ---------- cupons ---------- */
.cupons-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;}
.cupom-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px 20px;box-shadow:0 1px 0 var(--line);}
.cupom-card.inativo{opacity:.55;}
.cupom-card .cupom-codigo{font-family:var(--serif);font-style:italic;font-size:1.3rem;color:#8a6d1f;letter-spacing:.05em;}
.cupom-card .cupom-nome{font-size:.9rem;color:var(--charcoal);font-weight:600;margin:2px 0 8px;}
.cupom-card .cupom-benef{font-size:.82rem;color:var(--muted-light);margin-bottom:10px;}
.cupom-card .cupom-linha{display:flex;justify-content:space-between;font-size:.78rem;color:var(--muted-light);padding:3px 0;}
.cupom-card .cupom-linha strong{color:var(--charcoal);}
.cupom-estado{display:inline-block;font-size:.66rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;padding:3px 10px;border-radius:999px;margin-bottom:10px;}
.cupom-estado.em-vigor{background:#e6f5e4;color:#2b6b2e;}
.cupom-estado.agendado{background:#fdf1d6;color:#8a6d1f;}
.cupom-estado.esgotado,.cupom-estado.expirado,.cupom-estado.inativo{background:var(--stone-2);color:var(--muted-light);}
.cupom-card .cupom-acoes{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap;}
.cupom-card .cupom-acoes .btn{flex:1;min-width:64px;}

/* blocos que aparecem/somem conforme o tipo de benefício escolhido */
.cupom-bloco{display:none;}
.cupom-bloco.mostrar{display:block;}
.cupom-bloco.mostrar.field-row-wrap{display:grid;}

/* detalhe/histórico do cupom */
.cupom-ativacao-row{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:.82rem;}
.cupom-ativacao-row:last-child{border-bottom:0;}

.cliente-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 18px;
  cursor:pointer;transition:border-color .15s,transform .15s;
}
.cliente-card:hover{border-color:var(--gold);transform:translateY(-2px);}
.cliente-card strong{display:block;font-size:.92rem;color:var(--charcoal);margin-bottom:4px;}
.cliente-card small{display:block;font-size:.76rem;color:var(--muted-light);}
.cliente-card .pacote-flag{
  display:inline-block;margin-top:8px;font-size:.66rem;letter-spacing:.04em;text-transform:uppercase;
  color:#8a6d1f;background:var(--stone-2);padding:3px 9px;border-radius:999px;
}

.filtros-clientes{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:16px 0 18px;padding:12px 14px;background:var(--stone-2);border-radius:var(--radius);
}
.filtros-clientes input[type="text"]{
  flex:1;min-width:180px;padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:.85rem;background:#fff;
}
.filtros-clientes select{
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--radius);
  font-family:var(--sans);font-size:.85rem;background:#fff;color:var(--charcoal);
}
.filtros-clientes-contador{font-size:.78rem;color:var(--muted-light);white-space:nowrap;margin-left:auto;}
.list-row{
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:14px 16px;border:1px solid var(--line);border-radius:var(--radius);background:#fff;
}
.list-row .info{display:flex;align-items:center;gap:12px;min-width:0;}
.list-row .dot{width:10px;height:10px;border-radius:50%;flex:none;}
.list-row .texts{min-width:0;}
.list-row .texts strong{display:block;font-size:.9rem;color:var(--charcoal);}
.list-row .texts small{display:block;font-size:.76rem;color:var(--muted-light);}
.list-row .row-actions{display:flex;gap:8px;flex:none;}
.list-row.inativo{opacity:.5;}
.badge-tipo{
  font-size:.66rem;padding:3px 8px;border-radius:999px;background:var(--stone-2);color:#8a6d1f;
  text-transform:uppercase;letter-spacing:.04em;flex:none;
}

.foto-upload-row{display:flex;align-items:center;gap:14px;}
.foto-preview{
  width:64px;height:64px;border-radius:50%;object-fit:cover;
  border:2px solid var(--gold);flex:none;
}
.foto-preview-vazia{
  display:flex;align-items:center;justify-content:center;
  background:var(--stone-2);color:var(--muted-light);font-size:.7rem;letter-spacing:.04em;text-transform:uppercase;text-align:center;padding:4px;
  border-style:dashed;border-color:var(--line);
}
.foto-preview-sm{width:42px;height:42px;}

/* ---------- responsivo ---------- */
@media (max-width:720px){
  .toolbar{flex-direction:column;align-items:stretch;}
  .modal .field-row{grid-template-columns:1fr;}
  .matrix{min-width:520px;}
  .topbar{padding:12px 16px;}
  .topbar .who{gap:8px;flex-wrap:wrap;}
  .modal{padding:24px 18px;}
  /* grids com largura de coluna definida via style="" inline (não pega a
     media query da classe normal, porque inline sempre tem prioridade) */
  .field-row[style*="grid-template-columns"],
  .add-item-row[style*="grid-template-columns"]{
    grid-template-columns:1fr !important;
  }
  /* abas da gestão: rolam na horizontal em vez de quebrar/transbordar */
  .gestao-tabs{
    flex-wrap:nowrap;overflow-x:auto;padding:12px 16px 0;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .gestao-tabs::-webkit-scrollbar{display:none;}
  .gestao-tab{white-space:nowrap;flex:0 0 auto;padding:10px 16px;}
}

/* ---------- celular: modal quase full-width, abas de cliente roláveis ---------- */
@media (max-width:480px){
  .modal, .modal.wide, .modal.extra-wide{
    max-width:100%;width:100%;max-height:92vh;padding:22px 16px;border-radius:12px 12px 0 0;
  }
  .modal-overlay{align-items:flex-end;} /* modal sobe de baixo, estilo bottom-sheet */
  .modal-actions{flex-direction:column-reverse;}
  .modal-actions .btn{width:100%;}
  .cliente-tabs{
    flex-wrap:nowrap;overflow-x:auto;border-radius:0;max-width:none;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .cliente-tabs::-webkit-scrollbar{display:none;}
  .cliente-tab{white-space:nowrap;flex:0 0 auto;}
  .dash{padding:20px 16px 48px;}
  .dash-kpis{grid-template-columns:1fr 1fr;}
  .acoes-rapidas{grid-template-columns:1fr;}
}

/* nome em "letra de mão" — mesma fonte do site */
.wordmark{font-family:"Allura","Great Vibes",cursive!important;font-style:normal!important;font-weight:400!important;color:var(--gold-light);letter-spacing:.01em;}
.topbar .wordmark{font-size:1.9rem!important;line-height:1;}
.login-card .wordmark{font-size:2.8rem!important;line-height:1.05;color:#8a6d1f;}
/* letra de mão mais discreta */
.topbar .wordmark{font-size:1.5rem!important;color:#dcc58a;}
.login-card .wordmark{font-size:2.2rem!important;}

/* marca do sistema — minimalista: nome em letra de mão pequeno + nome da tela em caixa-alta discreta */
.marca-sistema{display:inline-flex;align-items:center;gap:12px;min-width:0;}
.topbar .marca-sistema .wordmark{font-size:1.3rem!important;color:#dcc58a;line-height:1;white-space:nowrap;}
.marca-sistema .pagina-nome{font-family:var(--sans);font-size:.66rem;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,239,228,.7);padding-left:12px;border-left:1px solid rgba(232,205,132,.35);white-space:nowrap;}
.login-card .wordmark{font-size:2rem!important;}
@media (max-width:720px){
  .topbar .marca-sistema .wordmark{font-size:1.15rem!important;}
  .marca-sistema .pagina-nome{font-size:.6rem;letter-spacing:.18em;padding-left:10px;}
}

/* cliente escolhida no autocompletar: dados editáveis atualizam o cadastro */
.cliente-sel{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:.74rem;letter-spacing:.04em;color:var(--moss);}
.cliente-sel[hidden]{display:none;}
.cliente-sel span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--moss-light);margin-right:7px;vertical-align:1px;}
.cliente-sel button{background:none;border:0;padding:0;font:inherit;color:var(--muted-light);text-decoration:underline;text-underline-offset:3px;cursor:pointer;}
.cliente-sel button:hover{color:var(--charcoal);}
input[readonly].cpf-travado{background:rgba(43,51,39,.04);color:var(--muted-light);}