/* =========================================================
   Letícia Anoni — Agenda, serviços e relatórios
   Complementa o style.css (mesma paleta e mesmos tokens)
   ========================================================= */

/* ---------- Cards de números ---------- */
.cards-row.cards-3{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.cards-row.cards-4{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
a.stat-card{display:block;transition:.25s ease}
a.stat-card:hover{transform:translateY(-3px);border-color:var(--gold-soft);box-shadow:var(--shadow)}

/* ---------- Tabelas ---------- */
.table-wrap{width:100%;overflow-x:auto}
.table-wrap table.data{min-width:560px}
table.data.compacta th,table.data.compacta td{padding:9px 10px}
table.clicavel tbody tr{cursor:pointer}
table.clicavel tbody tr:hover td{background:var(--gold-glow)}
.dica{color:var(--muted);font-size:.85rem;margin:0 0 14px}
.hint-inline{font-size:.78rem;color:var(--muted);font-weight:400;margin-left:6px}
.link-danger{background:none;border:0;padding:0;margin-left:12px;cursor:pointer;
  color:#a53030;font-family:var(--sans);font-weight:600;font-size:.85rem}
.link-danger:hover{text-decoration:underline}

/* ---------- Situação do agendamento ---------- */
.badge.st-agendado{background:var(--gold-glow);color:var(--gold-deep)}
.badge.st-finalizado{background:#eef7ee;color:#2f6b34}
.badge.st-cancelado{background:#fbeeee;color:#a53030}

/* ---------- Filtros ---------- */
.filtro-chips{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
.chip{padding:8px 18px;border-radius:999px;border:1px solid var(--line);font-size:.85rem;
  color:var(--ink-soft);background:var(--ivory);transition:.22s ease}
.chip:hover{border-color:var(--gold-soft);color:var(--gold-deep)}
.chip.on{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#fff;border-color:transparent}
.filtro-form{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;
  border-top:1px dashed var(--line);padding-top:18px}
.filtro-form .field{margin-bottom:0;display:flex;flex-direction:column}

/* ---------- Paginação ---------- */
.paginacao{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;align-items:center;margin-top:24px}
.paginacao a,.paginacao span{padding:7px 14px;border-radius:999px;font-size:.85rem;border:1px solid var(--line);color:var(--ink-soft)}
.paginacao a:hover{border-color:var(--gold);color:var(--gold-deep)}
.paginacao .atual{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#fff;border-color:transparent;font-weight:600}
.paginacao .off{opacity:.4;border-color:transparent}

/* ---------- Barra dos relatórios ---------- */
.barra{height:8px;border-radius:999px;background:var(--cream-2);overflow:hidden;min-width:120px}
.barra span{display:block;height:100%;background:linear-gradient(90deg,var(--gold-soft),var(--gold-deep))}

/* ---------- Modal ---------- */
.modal-back{position:fixed;inset:0;z-index:200;background:rgba(44,40,35,.55);
  backdrop-filter:blur(3px);display:flex;align-items:flex-start;justify-content:center;
  padding:34px 18px;overflow-y:auto}
.modal-back[hidden]{display:none}
.modal{position:relative;width:min(680px,100%);background:var(--ivory);border-radius:var(--radius);
  box-shadow:0 30px 70px -28px rgba(44,40,35,.6);overflow:hidden}
.modal-x{position:absolute;top:12px;right:14px;width:36px;height:36px;border-radius:50%;
  border:1px solid var(--line);background:var(--ivory);color:var(--ink-soft);
  font-size:1.4rem;line-height:1;cursor:pointer;transition:.2s ease}
.modal-x:hover{border-color:var(--gold);color:var(--gold-deep)}
.modal-head{padding:22px 26px;border-bottom:1px solid var(--line);padding-right:64px}
.modal-head h2{margin:0 0 6px;font-size:1.35rem}
.modal-body{padding:22px 26px;max-height:62vh;overflow-y:auto}
.modal-foot{padding:18px 26px;border-top:1px solid var(--line);background:var(--cream);
  display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-end}
.modal-foot form{margin:0}
.modal-foot form[hidden]{display:none}
.bloco-editar{margin-top:22px;border-top:1px dashed var(--line);padding-top:18px}
.bloco-editar[hidden],.bloco-observacoes[hidden]{display:none}
.bloco-editar h3,.bloco-observacoes h3{font-size:1rem;margin:0 0 14px;color:var(--ink-soft);
  letter-spacing:.06em;text-transform:uppercase;font-family:var(--sans);font-weight:600}
.bloco-observacoes{margin-top:22px;border-top:1px dashed var(--line);padding-top:18px}
.bloco-observacoes p{margin:0;white-space:pre-line;color:var(--ink-soft)}

/* ---------- Cadastro de agendamento ---------- */
.opcoes-inline{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.lista-clientes{height:auto;padding:6px!important}
.lista-clientes option{padding:9px 12px;border-radius:8px;font-size:.92rem}
.lista-clientes option:checked{background:var(--gold-glow);color:var(--gold-deep)}

.calendario{margin-top:20px;border:1px solid var(--line);border-radius:var(--radius);
  padding:16px;background:var(--cream);max-width:400px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.cal-head strong{font-family:var(--display);font-size:1.05rem;color:var(--ink)}
.cal-nav{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:var(--ivory);
  cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink-soft)}
.cal-nav:hover{border-color:var(--gold);color:var(--gold-deep)}
.cal-semana,.cal-dias{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-semana span{text-align:center;font-size:.7rem;letter-spacing:.08em;color:var(--muted);
  text-transform:uppercase;font-weight:600;padding-bottom:6px}
.cal-dia{aspect-ratio:1;border:1px solid transparent;border-radius:10px;background:var(--ivory);
  cursor:pointer;font-family:var(--sans);font-size:.88rem;color:var(--ink);transition:.18s ease}
.cal-dia:hover{border-color:var(--gold-soft)}
.cal-dia.hoje{border-color:var(--gold-soft);font-weight:600}
.cal-dia.sel{background:linear-gradient(135deg,var(--gold) 0%,var(--gold-deep) 100%);color:#fff;border-color:transparent;font-weight:600}

.horario-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:start}
.ocupados{border:1px solid var(--line);border-radius:var(--radius);background:var(--cream);padding:18px 20px}
.ocupados h3{font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
  font-family:var(--sans);font-weight:600;margin:0 0 14px}
.ocupados h3 span{display:block;color:var(--gold-deep);font-size:.95rem;letter-spacing:.02em;
  text-transform:none;margin-top:4px;font-family:var(--display)}
.ocupado-item{display:flex;justify-content:space-between;gap:12px;padding:10px 12px;background:var(--ivory);
  border:1px solid var(--line);border-radius:10px;margin-bottom:8px;font-size:.88rem}
.ocupado-item .hora{font-weight:600;color:var(--ink)}
.ocupado-item .quem{color:var(--muted)}
.ocupados .livre{margin:0;color:var(--muted);font-size:.88rem}

/* ---------- Área da cliente ---------- */
.proximo-card{background:linear-gradient(135deg,#2C2823 0%,#443c31 100%);color:#fff;
  border-radius:var(--radius);padding:28px 30px;margin-bottom:26px;box-shadow:var(--shadow)}
.proximo-card .eyebrow{color:var(--gold-soft)}
.proximo-card h2{color:#fff;margin:8px 0 4px;font-size:1.6rem}
.proximo-card p{color:#c9bfae;margin:0 0 16px}
.proximo-card .btn-outline{border-color:var(--gold-soft);color:var(--gold-soft)}
.proximo-card .btn-outline:hover{background:var(--gold-soft);color:var(--ink)}

@media(max-width:900px){
  .horario-grid{grid-template-columns:1fr}
  .modal-body{max-height:none}
}