/* =====================================================================
   Agenda Clínica — Identidade Exaire / Dr. Valne Paiva Jr.
   Paleta: Dark Teal, Ash Grey, Parchment, Soft Fawn, Graphite
   Tipografia: Sora (títulos ~ Rustica) + Mulish (texto ~ Freight Sans)
   ===================================================================== */
:root{
  --teal:#254852; --teal-700:#1c383f; --teal-300:#3a6470;
  --ash:#96B0AC; --ash-soft:#c4d3d0;
  --parchment:#F4F1EC; --parchment-2:#ece7df;
  --fawn:#CAA869; --fawn-dark:#b0904f;
  --graphite:#2B2B2B; --muted:#6c7a78;
  --ok:#2f8a5f; --warn:#c9962f; --danger:#b4453a;
  --radius:16px; --radius-sm:10px;
  --shadow:0 10px 30px rgba(37,72,82,.10);
  --shadow-sm:0 4px 14px rgba(37,72,82,.08);
  --font-title:'Sora',system-ui,sans-serif;
  --font-body:'Mulish',system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{font-family:var(--font-body); color:var(--graphite); background:var(--parchment);
  -webkit-font-smoothing:antialiased; line-height:1.55;}
h1,h2,h3,h4{font-family:var(--font-title); color:var(--teal); font-weight:600; letter-spacing:-.01em; margin:0 0 .4em}
h1{font-size:1.6rem} h2{font-size:1.25rem} h3{font-size:1.05rem}
a{color:var(--teal); text-decoration:none}
.muted{color:var(--muted)} .small{font-size:.82rem}
.hidden{display:none !important}

.brand{display:flex; align-items:center; gap:.6rem}
.brand-mark{width:34px;height:34px;flex:0 0 auto}
.brand-name{font-family:var(--font-title); font-weight:600; color:var(--teal); line-height:1.05}
.brand-name small{display:block; font-family:var(--font-body); font-weight:400; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--fawn-dark)}

.btn{font-family:var(--font-body); font-weight:600; font-size:.92rem; border:0; cursor:pointer;
  padding:.7rem 1.15rem; border-radius:var(--radius-sm); display:inline-flex; align-items:center; gap:.5rem;
  transition:.18s; background:var(--teal); color:#fff}
.btn:hover{background:var(--teal-700)}
.btn:active{transform:translateY(1px)}
.btn-fawn{background:var(--fawn); color:#33270d} .btn-fawn:hover{background:var(--fawn-dark); color:#fff}
.btn-ghost{background:transparent; color:var(--teal); border:1.5px solid var(--ash)}
.btn-ghost:hover{background:#fff; border-color:var(--teal)}
.btn-danger{background:transparent;color:var(--danger);border:1.5px solid #e3b8b3}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:.42rem .7rem; font-size:.8rem}
.btn-block{width:100%; justify-content:center}
.btn:disabled{opacity:.55; cursor:not-allowed}

label{display:block; font-size:.8rem; font-weight:600; color:var(--teal); margin:.55rem 0 .25rem}
input,select,textarea{width:100%; font-family:var(--font-body); font-size:.95rem; color:var(--graphite);
  background:#fff; border:1.5px solid #dfd9cf; border-radius:var(--radius-sm); padding:.62rem .7rem; transition:.15s}
input:focus,select:focus,textarea:focus{outline:0; border-color:var(--teal); box-shadow:0 0 0 3px rgba(37,72,82,.12)}
textarea{min-height:74px; resize:vertical}
.row{display:grid; gap:.6rem}
.row.c2{grid-template-columns:1fr 1fr} .row.c3{grid-template-columns:1fr 1fr 1fr}
@media(max-width:560px){.row.c2,.row.c3{grid-template-columns:1fr}}

.card{background:#fff; border:1px solid var(--parchment-2); border-radius:var(--radius); box-shadow:var(--shadow-sm); padding:1.1rem 1.2rem}
.card+.card{margin-top:1rem}

.badge{display:inline-flex; align-items:center; gap:.3rem; font-size:.72rem; font-weight:700; padding:.18rem .55rem; border-radius:999px; text-transform:uppercase; letter-spacing:.03em}
.b-pendente{background:#fbf1da;color:#8a6a1f} .b-confirmado{background:#dceee4;color:#226647}
.b-cancelado{background:#f3dddb;color:#9a3a31} .b-realizado{background:#e3e9ea;color:#37565e}
.b-pago{background:#dceee4;color:#226647}

.auth-wrap{min-height:100dvh; display:grid; place-items:center; padding:1.2rem;
  background:linear-gradient(135deg,var(--teal) 0%, var(--teal-700) 60%, #16292e 100%); position:relative; overflow:hidden}
.auth-wrap::before{content:""; position:absolute; inset:0;
  background:radial-gradient(900px 500px at 80% -10%, rgba(202,168,105,.18), transparent 60%); pointer-events:none}
.auth-card{width:100%; max-width:410px; background:var(--parchment); border-radius:22px; box-shadow:0 24px 60px rgba(0,0,0,.35); padding:2rem 1.7rem; position:relative; z-index:1}
.auth-card .brand{justify-content:center; margin-bottom:1.1rem}
.auth-tabs{display:flex; gap:.4rem; background:var(--parchment-2); padding:.3rem; border-radius:12px; margin-bottom:1.1rem}
.auth-tabs button{flex:1; border:0; background:transparent; padding:.55rem; border-radius:9px; font-weight:700; color:var(--muted); cursor:pointer; font-family:var(--font-body)}
.auth-tabs button.active{background:#fff; color:var(--teal); box-shadow:var(--shadow-sm)}

.app{display:none; min-height:100dvh}
.app.show{display:block}
.topbar{position:sticky; top:0; z-index:40; background:rgba(244,241,236,.92); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--parchment-2); display:flex; align-items:center; justify-content:space-between; padding:.6rem 1rem}
.shell{display:flex; max-width:1180px; margin:0 auto}
.side{width:230px; flex:0 0 auto; padding:1rem .7rem; position:sticky; top:56px; height:calc(100dvh - 56px); overflow:auto}
.side nav{display:flex; flex-direction:column; gap:.2rem}
.side nav a{display:flex; align-items:center; gap:.6rem; padding:.62rem .75rem; border-radius:10px; color:var(--graphite); font-weight:600; font-size:.92rem; cursor:pointer}
.side nav a:hover{background:#fff}
.side nav a.active{background:var(--teal); color:#fff}
.main{flex:1; padding:1.2rem 1.2rem 6rem; min-width:0}
.page-head{display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; flex-wrap:wrap}

.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem}
@media(max-width:820px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:#fff; border:1px solid var(--parchment-2); border-radius:var(--radius); padding:.9rem 1rem; box-shadow:var(--shadow-sm)}
.stat .v{font-family:var(--font-title); font-size:1.5rem; font-weight:700; color:var(--teal); line-height:1.1}
.stat .l{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.04em; margin-top:.2rem}
.stat.fawn{background:linear-gradient(135deg,#fff,#fbf4e6); border-color:#eadbbd}

.tbl{width:100%; border-collapse:collapse; font-size:.9rem}
.tbl th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); padding:.5rem .6rem; border-bottom:2px solid var(--parchment-2)}
.tbl td{padding:.6rem; border-bottom:1px solid var(--parchment-2); vertical-align:middle}
.tbl tr:hover td{background:#fbfaf7}
.list-empty{text-align:center; color:var(--muted); padding:2rem 1rem}

.modal-bg{position:fixed; inset:0; background:rgba(27,56,63,.55); display:none; place-items:center; z-index:80; padding:1rem}
.modal-bg.show{display:grid}
.modal{background:var(--parchment); border-radius:18px; width:100%; max-width:600px; max-height:90dvh; overflow:auto; box-shadow:0 30px 70px rgba(0,0,0,.4)}
.modal-head{display:flex; align-items:center; justify-content:space-between; padding:1rem 1.2rem; border-bottom:1px solid var(--parchment-2); position:sticky; top:0; background:var(--parchment); z-index:2}
.modal-body{padding:1.1rem 1.2rem}
.modal-foot{padding:1rem 1.2rem; display:flex; gap:.6rem; justify-content:flex-end; border-top:1px solid var(--parchment-2)}
.x{border:0;background:transparent;font-size:1.4rem;cursor:pointer;color:var(--muted);line-height:1}

#toasts{position:fixed; right:1rem; bottom:1rem; z-index:120; display:flex; flex-direction:column; gap:.5rem}
.toast{background:var(--teal); color:#fff; padding:.7rem 1rem; border-radius:10px; box-shadow:var(--shadow); font-size:.88rem; max-width:320px; animation:tin .25s}
.toast.err{background:var(--danger)} .toast.ok{background:var(--ok)}
@keyframes tin{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

.tabbar{position:fixed; bottom:0; left:0; right:0; z-index:50; display:none; background:rgba(244,241,236,.96); backdrop-filter:blur(10px); border-top:1px solid var(--parchment-2)}
.tabbar a{flex:1; text-align:center; padding:.5rem 0 .55rem; color:var(--muted); font-size:.66rem; font-weight:700; display:flex; flex-direction:column; align-items:center; gap:.15rem; cursor:pointer}
.tabbar a.active{color:var(--teal)}
@media(max-width:820px){ .side{display:none} .tabbar{display:flex} .main{padding-bottom:5rem} }

.cal{display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem}
.cal .dow{font-size:.7rem; text-align:center; color:var(--muted); font-weight:700; padding:.2rem 0}
.cal button{aspect-ratio:1; border:1px solid var(--parchment-2); background:#fff; border-radius:10px; cursor:pointer; font-family:var(--font-body); font-weight:600; color:var(--graphite)}
.cal button:hover:not(:disabled){border-color:var(--fawn)}
.cal button:disabled{opacity:.32; cursor:not-allowed}
.cal button.sel{background:var(--teal); color:#fff; border-color:var(--teal)}
.slots{display:grid; grid-template-columns:repeat(auto-fill,minmax(80px,1fr)); gap:.5rem}
.slots button{padding:.55rem; border:1.5px solid var(--ash); background:#fff; border-radius:10px; cursor:pointer; font-weight:700; color:var(--teal)}
.slots button:hover{background:var(--teal); color:#fff}
.slots button.sel{background:var(--fawn); color:#33270d; border-color:var(--fawn)}

.steps{display:flex; align-items:center; gap:.4rem; margin-bottom:1.2rem; justify-content:center}
.steps .dot{width:30px;height:30px;border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:.85rem; background:var(--parchment-2); color:var(--muted)}
.steps .dot.on{background:var(--teal); color:#fff}
.steps .ln{width:34px; height:2px; background:var(--parchment-2)}
.steps .ln.on{background:var(--teal)}