/* ============================================================
   Lefon Agenda — estilos (editorial claro, papel & tinta)
   Direção: caderno premium do corretor — fundo marfim, serifa
   com personalidade, acento vermelho-tijolo, zero brilho.
   ============================================================ */
:root{
  --bg:#F6F3EC; --surface:#FFFFFF; --card:#FFFFFF; --card-2:#FAF7F1;
  --border:#E5DFD3; --border-soft:#CFC6B4;
  --primary:#9E2B25; --primary-light:#B5443C; --primary-deep:#7C201B; --gold-hi:#B5443C;
  --teal:#3A5A8C; --success:#35714B; --danger:#B3372C; --warning:#96690F;
  --txt:#201D18; --txt-2:#5D5749; --txt-3:#7C7566;
  --gold-ink:#FFFFFF;
  --r-lg:16px; --r:14px; --r-sm:10px; --r-chip:10px; --r-pill:999px;
  --shadow:0 1px 2px rgba(32,26,18,.05), 0 10px 28px rgba(32,26,18,.05);
  --glow:0 1px 2px rgba(32,26,18,.08);
  --font:"Karla",-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Fraunces",Georgia,"Times New Roman",serif;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font); background:#5E1613; color:var(--txt);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; min-height:100vh;
  /* Vermelho profundo com o foco de luz no alto, de onde os raios saem. */
  background-image:
    radial-gradient(1400px 900px at 50% -18%, rgba(226,92,72,.95), transparent 68%),
    radial-gradient(1000px 720px at 88% 6%, rgba(178,50,42,.75), transparent 62%),
    linear-gradient(180deg, #93271F 0%, #6B1A16 46%, #431110 100%);
  background-attachment:fixed;
  background-repeat:no-repeat;
}

/* ===== Raios de luz girando atrás do conteúdo =====
   Leque cônico mascarado nas bordas para não virar um moinho: o giro é
   lento e a opacidade baixa, então lê como luz, não como enfeite. */
body::before{
  content:""; position:fixed; inset:-60%; z-index:-1; pointer-events:none;
  background:repeating-conic-gradient(from 0deg at 50% 50%,
    rgba(255,222,205,.20) 0deg 2.4deg,
    rgba(255,222,205,0) 2.4deg 11deg);
  -webkit-mask-image:radial-gradient(closest-side, rgba(0,0,0,.95), rgba(0,0,0,.35) 52%, transparent 76%);
  mask-image:radial-gradient(closest-side, rgba(0,0,0,.95), rgba(0,0,0,.35) 52%, transparent 76%);
  animation:raios 120s linear infinite;
  will-change:transform;
}
/* brilho quente no ponto de fuga dos raios */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:radial-gradient(620px 420px at 50% 2%, rgba(255,196,168,.30), transparent 70%);
}
@keyframes raios{to{transform:rotate(360deg)}}
::selection{background:rgba(158,43,37,.16)}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}
.input:focus-visible{outline:none}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--border-soft);border-radius:8px;border:2px solid var(--bg)}
::-webkit-scrollbar-thumb:hover{background:#B9AE99}
.tnum{font-variant-numeric:tabular-nums}

/* ===== Tipografia editorial — serifa com alma nos títulos ===== */
.auth-logo h1, .brand-txt h1, .hello .line, .auth-hero h2, .auth-title,
.admin-title, .kpi .val, .spot .cd, .spot .sp-cli, .sheet-h h2, .panel-h h2, .card-sm h3{
  font-family:var(--font-display); font-weight:600; letter-spacing:0;
}
.panel-h h2{font-size:19px}
.card-sm h3{font-size:15.5px}
.auth-logo h1, .brand-txt h1{font-size:21px; font-weight:600}
.hello .line{font-weight:500}
.hello .line b{font-weight:700}
.auth-hero h2{font-size:40px; font-weight:520; line-height:1.1}
.kpi .val{font-weight:600}
.spot .cd{font-weight:600}
.kpi .val .suf, .spot .cd small{color:var(--txt-2)}

/* views (SPA) */
.view{display:none}
.view.active{display:block}
.wrap{max-width:1180px; margin:0 auto; padding:22px 18px 64px}

/* ===== spinner de carregamento ===== */
.boot{position:fixed;inset:0;display:grid;place-items:center;background:#5E1613;z-index:200;transition:opacity .3s}
.boot.hide{opacity:0;pointer-events:none}
.spinner{width:40px;height:40px;border-radius:50%;border:3px solid var(--border);border-top-color:var(--primary);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ============================================================
   AUTH — login / cadastro
   ============================================================ */
.auth{min-height:100vh;display:grid;grid-template-columns:1.05fr .95fr}
.auth-brand{position:relative;overflow:hidden;padding:48px 46px;display:flex;flex-direction:column;justify-content:space-between;
  background:transparent; border-right:none}
/* o painel da marca fica sobre o vermelho: texto claro */
.auth-brand .auth-logo h1{color:#FDF6EE}
.auth-brand .auth-logo .ws{color:rgba(253,246,238,.72)}
.auth-brand .auth-logo .mark{background:#FDF6EE}
.auth-brand .auth-logo .mark svg path{stroke:var(--primary-deep)}
.auth-brand .auth-hero h2{color:#FDF6EE}
.auth-brand .auth-hero h2 .g{color:#FFC9B4}
.auth-brand .auth-hero p{color:rgba(253,246,238,.78)}
.auth-brand .auth-feat{color:rgba(253,246,238,.78)}
.auth-brand .auth-feat b{color:#FDF6EE}
.auth-brand .auth-feat .fi{background:rgba(253,246,238,.14)}
.auth-brand .auth-feat .fi svg{color:#FFC9B4}
.auth-brand .aglow{display:none}
.auth-logo{display:flex;align-items:center;gap:13px;position:relative}
.auth-logo .mark{width:50px;height:50px;border-radius:13px;background:var(--primary);
  display:grid;place-items:center}
.auth-logo .mark svg{width:28px;height:28px}
.auth-logo .mark svg path{stroke:#fff}
.auth-logo h1{margin:0}
.auth-logo .ws{font-size:12.5px;color:var(--txt-2);font-weight:700;margin-top:3px;display:flex;align-items:center;gap:6px}
.auth-hero{position:relative;max-width:460px}
.auth-hero h2{margin:0 0 16px;text-wrap:balance}
.auth-hero h2 .g{color:var(--primary);font-style:italic}
.auth-hero p{font-size:15.5px;color:var(--txt-2);line-height:1.65;margin:0}
.auth-feats{position:relative;display:flex;flex-direction:column;gap:12px}
.auth-feat{display:flex;align-items:center;gap:12px;font-size:14px;color:var(--txt-2);font-weight:500}
.auth-feat .fi{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;flex:0 0 auto;
  background:color-mix(in srgb,var(--fc,var(--primary)) 12%,transparent)}
.auth-feat .fi svg{width:16px;height:16px;color:var(--fc,var(--primary))}
.auth-feat b{color:var(--txt);font-weight:700}

.auth-panel{display:flex;align-items:center;justify-content:center;padding:40px 28px;background:transparent}
/* cartão de verdade sobre o vermelho, senão o formulário fica ilegível */
.auth-card{width:100%;max-width:380px;background:var(--bg);border:1px solid rgba(253,246,238,.2);
  border-radius:18px;padding:26px 24px;box-shadow:0 26px 60px rgba(40,8,6,.42)}
.auth-tabs{display:flex;gap:5px;padding:4px;background:var(--card-2);border:1px solid var(--border);border-radius:12px;margin-bottom:24px}
.auth-tab{flex:1;border:none;background:transparent;color:var(--txt-2);font-size:14px;font-weight:700;padding:11px;border-radius:9px;cursor:pointer;transition:.15s}
.auth-tab.active{background:var(--surface);color:var(--txt);border:1px solid var(--border);box-shadow:var(--shadow)}
.auth-title{font-size:24px;margin:0 0 4px}
.auth-sub{font-size:14px;color:var(--txt-2);margin:0 0 22px}
.auth-card .field{margin-bottom:15px}
.auth-card label{display:block;font-size:12.5px;font-weight:700;color:var(--txt-2);margin-bottom:7px;text-transform:uppercase;letter-spacing:.5px}
.pw-wrap{position:relative}
.pw-toggle{position:absolute;right:4px;top:50%;transform:translateY(-50%);border:none;background:transparent;color:var(--txt-3);cursor:pointer;padding:12px;border-radius:8px}
.pw-toggle:hover{color:var(--txt-2)}
.pw-toggle svg{width:18px;height:18px;display:block}
.auth-err{background:#FBEDEA;border:1px solid #E5B9B2;color:var(--danger);
  font-size:12.5px;font-weight:700;padding:10px 12px;border-radius:10px;margin-bottom:15px;display:none}
.auth-err.show{display:block}
.auth-ok{background:#EBF3EC;border:1px solid #BAD4C0;color:var(--success);
  font-size:12.5px;font-weight:700;padding:10px 12px;border-radius:10px;margin-bottom:15px;display:none}
.auth-ok.show{display:block}
.auth-submit{width:100%;padding:14px;border:none;border-radius:var(--r-sm);color:#fff;font-size:15px;font-weight:700;cursor:pointer;
  background:var(--primary);display:inline-flex;align-items:center;justify-content:center;gap:9px;transition:background .15s,transform .14s}
.auth-submit:hover{background:var(--primary-deep)}
.auth-submit:active{transform:scale(.98)}
.auth-submit[disabled]{opacity:.6;cursor:default}
.auth-submit svg{width:18px;height:18px}
.auth-demo{margin-top:18px;font-size:12px;color:var(--txt-3);text-align:center;line-height:1.55}
.auth-demo b{color:var(--txt-2)}

/* inputs compartilhados */
.input{width:100%;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-sm);
  color:var(--txt);font-size:14.5px;font-family:inherit;padding:12px 13px;transition:.15s;outline:none}
.input::placeholder{color:var(--txt-3)}
.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(158,43,37,.12)}

/* ============================================================
   TOPBAR
   ============================================================ */
.topbar{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap;
  padding-bottom:18px; border-bottom:1px solid var(--border)}
.brand{display:flex; align-items:center; gap:12px; min-width:0}
.logo{width:46px; height:46px; border-radius:12px; flex:0 0 auto;
  background:var(--primary); display:grid; place-items:center}
.logo svg{width:26px;height:26px}
.logo svg path{stroke:#fff}
.brand-txt{min-width:0}
.brand-txt h1{margin:0; line-height:1}
.brand-txt .ws{display:flex; align-items:center; gap:6px; margin-top:5px; font-size:12px; color:var(--txt-2); font-weight:700}
.remax-dot{width:8px;height:8px;border-radius:50%;background:linear-gradient(135deg,#DC1C2E,#003DA5)}
.spacer{flex:1 1 auto; min-width:14px}
.clock{text-align:right; line-height:1.15; padding-right:2px}
.clock .d{font-size:12px;color:var(--txt-2);font-weight:700;text-transform:capitalize}
.clock .t{font-size:20px;font-weight:700;letter-spacing:-.3px;font-family:var(--font-display)}

.iconbtn{width:44px;height:44px;border-radius:12px;border:1px solid var(--border);background:var(--surface);
  color:var(--txt-2);cursor:pointer;display:grid;place-items:center;transition:.15s;flex:0 0 auto;position:relative}
.iconbtn:hover{color:var(--txt);border-color:var(--border-soft)}
.iconbtn.on{color:var(--primary);border-color:rgba(158,43,37,.4);background:rgba(158,43,37,.06)}
.iconbtn svg{width:20px;height:20px}

.userchip{display:flex;align-items:center;gap:9px;padding:5px 6px 5px 5px;border:1px solid var(--border);
  border-radius:var(--r-pill);background:var(--surface);cursor:pointer;flex:0 0 auto;transition:.15s;text-align:left}
.userchip:hover{border-color:var(--border-soft)}
.userchip .g-av{width:33px;height:33px;border-radius:50%;display:grid;place-items:center;font-size:13px;
  font-weight:800;color:#fff;flex:0 0 auto;background:var(--primary)}
.userchip .g-txt{display:flex;flex-direction:column;line-height:1.15;padding-right:4px}
.userchip .g-name{font-size:13px;font-weight:700}
.userchip .g-role{font-size:10px;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.7px}

.btn-primary{display:inline-flex; align-items:center; gap:9px; cursor:pointer;
  padding:12px 18px; border:none; border-radius:var(--r-sm); color:#fff; font-size:14.5px; font-weight:700;
  background:var(--primary); transition:background .15s, transform .14s}
.btn-primary:hover{background:var(--primary-deep)}
.btn-primary:active{transform:scale(.97)}
.btn-primary svg{width:18px;height:18px}

/* menu do usuário */
.usermenu{position:absolute;top:60px;right:18px;z-index:30;background:var(--surface);border:1px solid var(--border);
  border-radius:14px;box-shadow:0 18px 44px rgba(32,26,18,.14);padding:7px;min-width:210px;display:none}
.usermenu.open{display:block}
.usermenu .um-head{padding:10px 11px 11px;border-bottom:1px solid var(--border);margin-bottom:6px}
.usermenu .um-name{font-size:14px;font-weight:800}
.usermenu .um-mail{font-size:11.5px;color:var(--txt-2);margin-top:2px;word-break:break-all}
.usermenu button{display:flex;align-items:center;gap:10px;width:100%;border:none;background:transparent;
  color:var(--txt);font-size:13.5px;font-weight:600;padding:10px 11px;border-radius:9px;cursor:pointer;text-align:left}
.usermenu button:hover{background:var(--card-2)}
.usermenu button svg{width:16px;height:16px;color:var(--txt-2)}
.usermenu button.danger{color:var(--danger)} .usermenu button.danger svg{color:var(--danger)}

/* ===== KPIs ===== */
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:22px}
.kpi{padding:16px 16px 15px; border-radius:var(--r); border:1px solid var(--border);
  background:var(--card); position:relative; overflow:hidden; box-shadow:var(--shadow)}
.kpi .top{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px}
.kpi .ico{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:color-mix(in srgb,var(--kc,var(--primary)) 10%,transparent)}
.kpi .ico svg{width:18px;height:18px;color:var(--kc,var(--primary))}
.kpi .pill{font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill);text-transform:uppercase;letter-spacing:.5px;
  background:color-mix(in srgb,var(--kc,var(--primary)) 9%,transparent); color:var(--kc,var(--primary))}
.kpi .val{font-size:32px;line-height:1}
.kpi .val .suf{font-size:15px;font-weight:700;margin-left:2px}
.kpi .lbl{font-size:12.5px;color:var(--txt-2);font-weight:600;margin-top:6px}

/* ===== Saudação ===== */
.hello{margin:0 2px 22px}
.hello .eb{font-size:12px;font-weight:800;color:var(--primary);letter-spacing:1.4px;text-transform:uppercase;margin-bottom:7px}
.hello .line{margin:0;font-size:26px;line-height:1.35;max-width:720px;color:var(--txt)}
.hello .line b{font-weight:700}
.hello .line .accent{color:var(--primary);font-style:italic}

/* ===== Layout principal ===== */
.grid{display:grid; grid-template-columns:1fr 340px; gap:16px; align-items:start}
.panel{background:var(--card); border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden}
.panel-h{display:flex; align-items:center; justify-content:space-between; padding:16px 18px 4px}
.panel-h h2{margin:0}
.panel-h .sub{font-size:12.5px;color:var(--txt-2);font-weight:600;margin-top:3px}

.tabs{display:inline-flex; gap:4px; padding:4px; background:var(--card-2); border:1px solid var(--border); border-radius:11px}
.tab{border:none;background:transparent;color:var(--txt-2);font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:8px;cursor:pointer;transition:.15s; white-space:nowrap}
.tab.active{background:var(--surface);color:var(--txt);box-shadow:var(--shadow);border:1px solid var(--border)}
.tab:not(.active):hover{color:var(--txt)}

.agenda{padding:8px 14px 16px}
.daygroup{margin-top:12px}
.daygroup:first-child{margin-top:6px}
.day-label{display:flex;align-items:center;gap:8px;padding:6px 4px 10px;font-size:11.5px;font-weight:800;color:var(--txt-2);text-transform:uppercase;letter-spacing:1px}
.day-label .cnt{font-size:11px;font-weight:800;color:var(--primary);background:rgba(158,43,37,.08);padding:2px 8px;border-radius:var(--r-pill)}
.day-label .line{flex:1;height:1px;background:var(--border)}

.appt{display:flex; align-items:stretch; gap:13px; padding:13px; margin-bottom:9px; border-radius:var(--r-sm); border:1px solid var(--border);
  background:var(--surface); position:relative; cursor:pointer;
  transition:transform .14s, border-color .2s, box-shadow .2s}
.appt:hover{border-color:var(--border-soft); box-shadow:var(--shadow); transform:translateY(-1px)}
.appt:active{transform:scale(.995)}
.appt.is-next{border-color:rgba(158,43,37,.45); border-left:3px solid var(--primary)}
.appt .time{flex:0 0 auto; width:62px; text-align:center; padding-top:2px; border-right:1px solid var(--border); padding-right:12px}
.appt .time .h{font-size:17px;font-weight:600;line-height:1;font-family:var(--font-display)}
.appt .time .dur{font-size:10.5px;color:var(--txt-3);font-weight:700;margin-top:4px}
.appt .body{flex:1; min-width:0}
.appt .row1{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.appt .cli{font-size:15px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.type-chip{font-size:10.5px;font-weight:800;padding:2.5px 8px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:.4px}
.type-chip svg{width:11px;height:11px}
.appt .meta{display:flex;align-items:center;gap:5px;font-size:12.5px;color:var(--txt-2);font-weight:500;min-width:0}
.appt .meta svg{width:13px;height:13px;flex:0 0 auto;color:var(--txt-3)}
.appt .meta .addr{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.appt .meta .code{color:var(--primary);font-weight:700;flex:0 0 auto}
.appt .note{display:flex;align-items:flex-start;gap:7px;margin-top:9px;font-size:12.5px;color:var(--txt-2);line-height:1.5}
.appt .note svg{width:13px;height:13px;color:var(--primary);flex:0 0 auto;margin-top:2px}
.appt .foot{display:flex;align-items:center;gap:9px;margin-top:10px}
.avatar{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:10px;font-weight:800;color:#fff;flex:0 0 auto}
.appt .corretor{font-size:12px;color:var(--txt-2);font-weight:600}
.status{margin-left:auto;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:5px;text-transform:uppercase;letter-spacing:.4px}
.status .sd{width:6px;height:6px;border-radius:50%}
.st-confirmado{background:#EBF3EC;color:var(--success)} .st-confirmado .sd{background:var(--success)}
.st-pendente{background:#F7EFDC;color:var(--warning)} .st-pendente .sd{background:var(--warning)}
.st-concluido{background:#EEEBE4;color:var(--txt-2)} .st-concluido .sd{background:var(--txt-2)}
.st-faltou{background:#FBEDEA;color:var(--danger)} .st-faltou .sd{background:var(--danger)}
.st-cancelado{background:#FBEDEA;color:var(--danger)} .st-cancelado .sd{background:var(--danger)}

.appt .menu-btn{position:absolute;top:6px;right:6px;width:38px;height:38px;border-radius:10px;border:none;background:transparent;color:var(--txt-3);cursor:pointer;display:grid;place-items:center;opacity:.55;transition:.15s}
.appt:hover .menu-btn{opacity:1}
@media (hover:none){.appt .menu-btn{opacity:1}}
.appt-share{display:flex;gap:7px;margin-top:12px;flex-wrap:wrap}
.ash{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);color:var(--txt-2);border-radius:9px;padding:6px 11px;font-size:11.5px;font-weight:700;cursor:pointer;transition:.14s}
.ash svg{width:14px;height:14px}
.ash:hover{color:var(--txt);border-color:var(--border-soft);transform:translateY(-1px)}
.ash:active{transform:scale(.95)}
.ash.wa{color:#1DA851} .ash.wa:hover{border-color:#1DA851}
.appt .menu-btn:hover{background:var(--card-2);color:var(--txt)}
.appt .menu-btn svg{width:16px;height:16px}
.cardmenu{position:absolute;top:44px;right:10px;z-index:5;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 14px 34px rgba(32,26,18,.16);padding:6px;min-width:194px;display:none}
.cm-div{height:1px;background:var(--border);margin:5px 8px}
.cardmenu.open{display:block}
.cardmenu button{display:flex;align-items:center;gap:9px;width:100%;border:none;background:transparent;color:var(--txt);font-size:13px;font-weight:600;padding:9px 10px;border-radius:8px;cursor:pointer;text-align:left}
.cardmenu button:hover{background:var(--card-2)}
.cardmenu button svg{width:15px;height:15px;color:var(--txt-2)}
.cardmenu button.danger{color:var(--danger)} .cardmenu button.danger svg{color:var(--danger)}

.empty{padding:40px 20px;text-align:center}
.empty .ei{width:56px;height:56px;border-radius:16px;margin:0 auto 14px;display:grid;place-items:center;background:rgba(158,43,37,.08)}
.empty .ei svg{width:26px;height:26px;color:var(--primary)}
.empty h3{margin:0 0 5px;font-size:15px;font-weight:700}
.empty p{margin:0 auto;font-size:13px;color:var(--txt-2);max-width:240px;line-height:1.5}

/* ===== Aside ===== */
.aside{display:flex;flex-direction:column;gap:16px}
.spot{padding:16px 16px 15px; border-radius:var(--r-lg); position:relative; overflow:hidden;
  background:var(--card); border:1px solid var(--border); border-left:4px solid var(--primary); box-shadow:var(--shadow)}
.spot .glow{display:none}
.spot .eyebrow{display:flex;align-items:center;gap:7px;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--primary)}
.spot .eyebrow .live{width:7px;height:7px;border-radius:50%;background:var(--primary);box-shadow:0 0 0 0 rgba(158,43,37,.5);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(158,43,37,.4)}70%{box-shadow:0 0 0 9px rgba(158,43,37,0)}100%{box-shadow:0 0 0 0 rgba(158,43,37,0)}}
.spot .cd{font-size:34px;margin:12px 0 2px;line-height:1}
.spot .cd small{font-size:14px;font-weight:700}
.spot .when{font-size:12.5px;color:var(--txt-2);font-weight:600;margin-bottom:14px}
.spot .sp-cli{font-size:17px;font-weight:600}
.spot .sp-line{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--txt-2);font-weight:500;margin-top:7px}
.spot .sp-line svg{width:14px;height:14px;color:var(--primary);flex:0 0 auto}
.spot .sp-actions{display:flex;gap:8px;margin-top:15px}
.spot .sp-btn{flex:1;border:1px solid var(--border);background:var(--surface);color:var(--txt);font-size:12.5px;font-weight:700;padding:10px;border-radius:10px;cursor:pointer;transition:.15s;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.spot .sp-btn svg{width:14px;height:14px}
.spot .sp-btn.go{background:var(--primary);border-color:transparent;color:#fff}
.spot .sp-btn.go:hover{background:var(--primary-deep)}
.spot .sp-btn:hover{border-color:var(--border-soft)} .spot .sp-btn:active{transform:scale(.96)}

.card-sm{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:16px}
.card-sm h3{margin:0 0 13px;display:flex;align-items:center;gap:8px}
.card-sm h3 svg{width:16px;height:16px;color:var(--primary)}

.week{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.wd{border:1px solid var(--border);border-radius:10px;padding:9px 4px 8px;text-align:center;cursor:pointer;background:var(--surface);transition:.15s;position:relative}
.wd:hover{border-color:var(--border-soft)}
.wd.today{border-color:rgba(158,43,37,.45);background:rgba(158,43,37,.05)}
.wd.sel{background:var(--primary);border-color:var(--primary)}
.wd .dow{font-size:10px;font-weight:800;color:var(--txt-2);text-transform:uppercase}
.wd.sel .dow{color:rgba(255,255,255,.8)}
.wd .dnum{font-size:15px;font-weight:700;margin-top:3px;font-family:var(--font-display)}
.wd.sel .dnum{color:#fff}
.wd .dcnt{margin-top:6px;height:16px;display:flex;align-items:center;justify-content:center}
.wd .badge{font-size:10px;font-weight:800;min-width:16px;height:16px;padding:0 4px;border-radius:var(--r-pill);background:rgba(158,43,37,.1);color:var(--primary);display:inline-flex;align-items:center;justify-content:center}
.wd.sel .badge{background:rgba(255,255,255,.28);color:#fff}
.wd .dot{width:5px;height:5px;border-radius:50%;background:var(--border-soft);display:inline-block}

.corr{display:flex;align-items:center;gap:10px;padding:9px 8px;border-radius:10px;cursor:pointer;transition:.15s}
.corr:hover{background:var(--card-2)}
.corr.active{background:rgba(158,43,37,.06);box-shadow:inset 0 0 0 1px rgba(158,43,37,.3)}
.corr .avatar{width:30px;height:30px;font-size:12px}
.corr .cn{font-size:13px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.corr .cc{font-size:11px;font-weight:800;color:var(--txt-2);background:var(--card-2);border:1px solid var(--border);padding:2px 8px;border-radius:var(--r-pill)}
.corr.active .cc{color:var(--primary);border-color:rgba(158,43,37,.3)}

.slots{display:flex;flex-wrap:wrap;gap:7px}
.slot{font-size:12.5px;font-weight:700;padding:8px 12px;border-radius:9px;cursor:pointer;background:var(--surface);border:1px solid var(--border);color:var(--txt);transition:.14s}
.slot:hover{border-color:var(--primary);color:var(--primary);transform:translateY(-1px)}
.slot:active{transform:scale(.95)}

/* ===== Slide-over ===== */
.scrim{position:fixed;inset:0;background:rgba(32,26,18,.35);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .28s;z-index:40}
.scrim.open{opacity:1;pointer-events:auto}
.sheet{position:fixed;top:0;right:0;height:100%;width:min(440px,100%);z-index:50;background:var(--bg);border-left:1px solid var(--border);box-shadow:-16px 0 48px rgba(32,26,18,.18);transform:translateX(100%);transition:transform .34s cubic-bezier(.22,1,.36,1);display:flex;flex-direction:column;overflow:hidden}
.sheet.open{transform:translateX(0)}
.sheet-h{display:flex;align-items:center;justify-content:space-between;padding:20px 20px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
.sheet-h h2{margin:0;font-size:20px}
.sheet-h p{margin:4px 0 0;font-size:12.5px;color:var(--txt-2)}
.x-btn{width:36px;height:36px;border-radius:10px;border:1px solid var(--border);background:var(--surface);color:var(--txt-2);cursor:pointer;display:grid;place-items:center}
.x-btn:hover{color:var(--txt);border-color:var(--border-soft)}
.x-btn svg{width:17px;height:17px}
.sheet-b{padding:18px 20px;overflow-y:auto;flex:1}
.field{margin-bottom:16px}
.field > label{display:block;font-size:11.5px;font-weight:800;color:var(--txt-2);margin-bottom:8px;letter-spacing:.6px;text-transform:uppercase}
.two{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segs{display:flex;flex-wrap:wrap;gap:8px}
.seg{border:1px solid var(--border);background:var(--surface);color:var(--txt-2);border-radius:9px;padding:9px 13px;font-size:12.5px;font-weight:700;cursor:pointer;transition:.14s;display:inline-flex;align-items:center;gap:6px}
.seg svg{width:14px;height:14px}
.seg:hover{border-color:var(--border-soft);color:var(--txt)}
.seg.on{border-color:transparent;color:#fff;background:var(--sc,var(--primary))}
.timegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tslot{border:1px solid var(--border);background:var(--surface);color:var(--txt);border-radius:9px;padding:10px 4px;font-size:13px;font-weight:700;cursor:pointer;text-align:center;transition:.14s}
.tslot:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}
.tslot.on{background:var(--primary);border-color:var(--primary);color:#fff}
.tslot:disabled{opacity:.35;cursor:not-allowed;text-decoration:line-through}
.sheet-f{padding:16px 20px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--border);display:flex;gap:10px;background:var(--surface)}
.btn-ghost{flex:0 0 auto;padding:13px 18px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--surface);color:var(--txt);font-size:14px;font-weight:700;cursor:pointer}
.btn-ghost:hover{border-color:var(--border-soft)}
.btn-save{flex:1;padding:13px;border-radius:var(--r-sm);border:none;color:#fff;font-size:14.5px;font-weight:700;cursor:pointer;background:var(--primary);display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:background .15s,transform .14s}
.btn-save:hover{background:var(--primary-deep)} .btn-save:active{transform:scale(.97)}
.btn-save svg{width:17px;height:17px}
.err{color:var(--danger);font-size:12px;font-weight:700;margin-top:-8px;margin-bottom:12px;display:none}
.err.show{display:block}

/* ===== Toast ===== */
.toast-wrap{position:fixed;top:20px;left:50%;transform:translateX(-50%);z-index:60;display:flex;flex-direction:column;gap:10px;align-items:center;width:calc(100% - 32px);max-width:400px}
.toast{display:flex;align-items:center;gap:12px;padding:13px 16px;border-radius:12px;width:100%;
  background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--success);
  box-shadow:0 14px 34px rgba(32,26,18,.14);
  transform:translateY(-24px);opacity:0;transition:transform .4s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.toast.show{transform:translateY(0);opacity:1}
.toast.warn{border-left-color:var(--warning)}
.toast.warn .ti{background:#F7EFDC} .toast.warn .ti svg{color:var(--warning)}
.toast .ti{width:34px;height:34px;border-radius:10px;display:grid;place-items:center;flex:0 0 auto;background:#EBF3EC}
.toast .ti svg{width:19px;height:19px;color:var(--success)}
.toast .tt{font-size:13.5px;font-weight:800}
.toast .ts{font-size:12px;color:var(--txt-2);font-weight:500;margin-top:2px}

/* ===== ADMIN ===== */
.admin-head{display:flex;align-items:center;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.back-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:var(--surface);color:var(--txt);
  font-size:13.5px;font-weight:700;padding:10px 14px;border-radius:var(--r-sm);cursor:pointer}
.back-btn:hover{border-color:var(--border-soft)}
.back-btn svg{width:16px;height:16px}
.admin-title{font-size:24px;margin:0}
.admin-title .badge-dev{font-size:10px;font-weight:800;color:var(--primary);background:rgba(158,43,37,.08);
  border:1px solid rgba(158,43,37,.25);padding:3px 9px;border-radius:var(--r-pill);vertical-align:middle;margin-left:10px;text-transform:uppercase;letter-spacing:.6px;font-family:var(--font)}
.admin-sub{font-size:13.5px;color:var(--txt-2);margin:4px 0 0}

.utable{width:100%;border-collapse:separate;border-spacing:0;background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden}
.utable thead th{font-size:11px;font-weight:800;color:var(--txt-2);text-transform:uppercase;letter-spacing:.7px;text-align:left;padding:14px 16px;background:var(--card-2);border-bottom:1px solid var(--border)}
.utable tbody td{padding:13px 16px;border-bottom:1px solid var(--border);font-size:13.5px;vertical-align:middle}
.utable tbody tr:last-child td{border-bottom:none}
.utable tbody tr:hover{background:var(--card-2)}
.u-user{display:flex;align-items:center;gap:11px}
.u-user .avatar{width:36px;height:36px;font-size:13px}
.u-user .un{font-weight:700}
.u-user .ue{font-size:11.5px;color:var(--txt-2)}
.role-badge{font-size:11px;font-weight:800;padding:4px 10px;border-radius:var(--r-pill);display:inline-block;text-transform:capitalize}
.role-admin{background:rgba(158,43,37,.08);color:var(--primary)}
.role-gestor{background:rgba(58,90,140,.1);color:var(--teal)}
.role-corretor{background:#EEEBE4;color:var(--txt-2)}
.dot-status{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:700}
.dot-status .d{width:8px;height:8px;border-radius:50%}
.dot-on .d{background:var(--success)} .dot-on{color:var(--success)}
.dot-off .d{background:var(--txt-3)} .dot-off{color:var(--txt-3)}
.u-actions{display:flex;gap:7px;justify-content:flex-end}
.u-act{border:1px solid var(--border);background:var(--surface);color:var(--txt-2);border-radius:9px;padding:7px 11px;font-size:12px;font-weight:700;cursor:pointer;transition:.14s}
.u-act:hover{color:var(--txt);border-color:var(--border-soft)}
.u-act.danger:hover{color:var(--danger);border-color:rgba(179,55,44,.4)}
.admin-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.admin-note{margin-top:16px;font-size:12.5px;color:var(--txt-2);background:var(--card);border:1px solid var(--border);border-radius:14px;padding:14px 16px;line-height:1.6;display:flex;gap:11px}
.admin-note svg{width:18px;height:18px;color:var(--primary);flex:0 0 auto;margin-top:1px}
.add-corr{background:var(--card);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:18px;margin-bottom:18px}
.add-corr h3{margin:0 0 4px;font-size:16px;font-weight:600;display:flex;align-items:center;gap:9px;font-family:var(--font-display)}
.add-corr h3 svg{width:19px;height:19px;color:var(--primary)}
.add-corr .ac-sub{margin:0 0 14px;font-size:12.5px;color:var(--txt-2);line-height:1.5}
.add-corr-row{display:grid;grid-template-columns:1.2fr 1.4fr 1fr auto;gap:10px;align-items:center}
.add-corr-row .btn-primary{white-space:nowrap;justify-content:center;padding:12px 20px}
@media (max-width:760px){ .add-corr-row{grid-template-columns:1fr} }

/* ============================================================
   TEXTO SOBRE O VERMELHO
   Fica no fim de propósito: precisa vencer as cores definidas nos
   blocos de componente acima, que assumem fundo claro.
   ============================================================ */
.brand-txt h1, .hello .line, .admin-title{color:#FDF6EE}
.brand-txt .ws, .clock .d, .admin-sub{color:rgba(253,246,238,.75)}
.clock .t{color:#FDF6EE}
.hello .eb{color:#FFD2BE}
.hello .line b{color:#FFF}
.hello .line .accent{color:#FFD2BE}
.topbar{border-bottom-color:rgba(253,246,238,.2)}
.admin-title .badge-dev{color:#FFD2BE;background:rgba(253,246,238,.14);border-color:rgba(253,246,238,.3)}
.remax-dot{box-shadow:0 0 0 2px rgba(253,246,238,.35)}
/* CTA principal invertido: creme sobre o vermelho, senão some no fundo */
#openNew{background:#FDF6EE;color:var(--primary-deep)}
#openNew:hover{background:#fff}
.back-btn{background:rgba(253,246,238,.14);border-color:rgba(253,246,238,.3);color:#FDF6EE}
.back-btn:hover{background:rgba(253,246,238,.22);border-color:rgba(253,246,238,.45)}

/* ===== animações ===== */
@keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.reveal{animation:fadeUp .5s cubic-bezier(.22,1,.36,1) both}

/* ===== responsivo ===== */
@media (max-width:980px){ .auth{grid-template-columns:1fr} .auth-brand{display:none} }
@media (max-width:900px){ .grid{grid-template-columns:1fr} .aside{order:-1} }
@media (max-width:720px){
  .utable thead{display:none}
  .utable, .utable tbody, .utable tr, .utable td{display:block;width:100%}
  .utable tr{border:1px solid var(--border);border-radius:14px;margin-bottom:10px;background:var(--card)}
  .utable tbody td{border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:12px}
  .utable td::before{content:attr(data-l);font-size:11px;font-weight:800;color:var(--txt-2);text-transform:uppercase;letter-spacing:.5px}
  .u-user{justify-content:flex-end}
  .u-actions{justify-content:flex-end}
  .admin-stats{grid-template-columns:1fr 1fr}
}
@media (max-width:640px){
  .wrap{padding:16px 13px 110px}
  .kpis{grid-template-columns:1fr 1fr;gap:10px}
  .kpi .val{font-size:27px}
  .clock{display:none}
  .brand-txt h1{font-size:17px}
  .hello .line{font-size:20px}
  .timegrid{grid-template-columns:repeat(3,1fr)}
  .panel-h{flex-wrap:wrap;gap:10px}
  .auth-panel{padding:28px 20px}
  /* CTA principal fixo na zona do polegar */
  #openNew{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom));z-index:35;
    border-radius:var(--r-pill);padding:15px 24px;font-size:15px;white-space:nowrap;
    box-shadow:0 10px 30px rgba(158,43,37,.35),0 6px 18px rgba(32,26,18,.18)}
  #openNew:active{transform:translateX(-50%) scale(.96)}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001s !important;transition-duration:.05s !important}
  /* os raios param, mas continuam visíveis */
  body::before{animation:none !important}
}