:root{
  --wine:#6D28D9; --wine-d:#4C1D95; --rose:#EDE9FB; --rose2:#F6F4FD;
  --amber:#FFF2CC; --green:#1f7a3a; --red:#c0392b; --ink:#2b2b2b; --muted:#917f84;
  --line:#E7E3F0; --bg:#F7F6FC; --card:#ffffff; --blue:#2d6cdf;
  --shadow:0 2px 10px rgba(80,40,150,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{font-family:Arial,Helvetica,sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.4}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,select,textarea{font-family:inherit;font-size:16px}
.hidden{display:none!important}

/* ---------- LOGIN ---------- */
#login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;background:linear-gradient(160deg,var(--wine),var(--wine-d))}
#login .box{background:#fff;border-radius:18px;padding:28px 22px;width:100%;max-width:360px;box-shadow:0 10px 40px rgba(0,0,0,.25)}
#login h1{margin:0 0 4px;color:var(--wine);font-size:22px;text-align:center}
#login p{margin:0 0 20px;color:var(--muted);text-align:center;font-size:13px}
#login input{width:100%;padding:13px 14px;border:1px solid var(--line);border-radius:12px;margin-bottom:12px}
#login button{width:100%;padding:14px;background:var(--wine);color:#fff;border-radius:12px;font-weight:bold;font-size:16px}
#login .err{color:var(--red);font-size:13px;text-align:center;min-height:18px;margin-top:6px}

/* ---------- SHELL ---------- */
#app{max-width:520px;margin:0 auto;min-height:100vh;background:var(--bg);display:flex;flex-direction:column;position:relative}
#topbar{position:sticky;top:0;z-index:30;background:var(--bg);color:var(--ink);padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
#topbar .ttl{font-size:18px;font-weight:bold}
#topbar .sub{font-size:12px;color:var(--muted);font-weight:normal}

#main{flex:1;padding:14px 14px 90px}

/* ---------- BOTTOM NAV ---------- */
#nav{position:fixed;bottom:0;left:0;right:0;z-index:30;background:#fff;border-top:1px solid var(--line);display:flex;max-width:520px;margin:0 auto}
#nav button{flex:1;padding:8px 2px 10px;display:flex;flex-direction:column;align-items:center;gap:3px;color:var(--muted);font-size:11px}
#nav button.on{color:var(--wine)}
#nav svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#nav button.on svg{fill:var(--rose)}

/* ---------- GENERIC ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;box-shadow:var(--shadow);margin-bottom:12px}
.row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.muted{color:var(--muted)}
.small{font-size:12px}
.big{font-size:26px;font-weight:bold}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;background:var(--wine);color:#fff;padding:12px 16px;border-radius:12px;font-weight:bold;font-size:15px}
.btn.ghost{background:#fff;color:var(--wine);border:1px solid var(--wine)}
.btn.sm{padding:8px 12px;font-size:13px;border-radius:10px}
.btn.block{width:100%}
.btn.green{background:var(--green)}
.btn.red{background:var(--red)}
.btn.gray{background:#ECE9F3;color:var(--ink)}
.fab{position:fixed;right:calc(50% - 250px);bottom:78px;z-index:25;width:56px;height:56px;border-radius:50%;background:var(--wine);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(80,40,150,.4)}
@media(max-width:520px){.fab{right:18px}}
.chip{display:inline-block;padding:3px 9px;border-radius:20px;font-size:12px;background:var(--rose);color:var(--wine);font-weight:bold}
.tag{font-size:11px;padding:2px 7px;border-radius:6px;font-weight:bold}
.tag.ok{background:#e3f4e8;color:var(--green)}
.tag.no{background:#fdeaea;color:var(--red)}
.tag.wait{background:var(--amber);color:#8a6d00}
.divider{height:1px;background:var(--line);margin:10px 0}
.sectitle{font-size:13px;font-weight:bold;color:var(--muted);text-transform:uppercase;letter-spacing:.4px;margin:4px 2px 8px}
.empty{text-align:center;color:var(--muted);padding:30px 10px;font-size:14px}
.line-item{display:flex;align-items:center;justify-content:space-between;padding:11px 2px;border-bottom:1px solid var(--line)}
.line-item:last-child{border-bottom:none}

/* ---------- SEGMENTED ---------- */
.seg{display:flex;background:#ECE8F5;border-radius:11px;padding:3px;margin-bottom:12px}
.seg button{flex:1;padding:9px;border-radius:9px;font-size:13px;font-weight:bold;color:var(--muted)}
.seg button.on{background:#fff;color:var(--wine);box-shadow:0 1px 4px rgba(0,0,0,.08)}

/* ---------- AGENDA NAV ---------- */
.agnav{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.agnav .lbl{font-weight:bold;font-size:15px;text-transform:capitalize}
.agnav button{width:34px;height:34px;border-radius:9px;background:#fff;border:1px solid var(--line);color:var(--wine);font-size:18px;display:flex;align-items:center;justify-content:center}
.agnav .today{width:auto;padding:0 12px;font-size:13px;font-weight:bold}

/* ---------- DAY GRID ---------- */
.daygrid{position:relative;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}
.daygrid .slot{position:absolute;left:46px;right:0;border-top:1px solid #f1eaec}
.daygrid .hr{position:absolute;left:0;width:42px;text-align:right;font-size:10px;color:var(--muted);transform:translateY(-6px)}
.daygrid .tapper{position:absolute;left:46px;right:0;top:0;bottom:0}
.ev{position:absolute;left:48px;right:6px;border-radius:8px;padding:4px 7px;color:#fff;overflow:hidden;font-size:12px;box-shadow:0 1px 4px rgba(0,0,0,.15);z-index:2}
.ev .t{font-weight:bold}
.ev.done{opacity:.65}
.ev.cancel{opacity:.4;text-decoration:line-through}

/* ---------- WEEK ---------- */
.week{display:flex;gap:5px;overflow-x:auto;padding-bottom:4px}
.week .col{flex:1;min-width:90px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px;min-height:120px}
.week .col h4{margin:0 0 6px;font-size:11px;text-align:center;color:var(--muted);text-transform:uppercase}
.week .col h4 b{display:block;font-size:16px;color:var(--ink)}
.week .col.todaycol{border-color:var(--wine);background:var(--rose2)}
.wchip{background:var(--rose);color:var(--wine);border-radius:7px;padding:4px 6px;margin-bottom:5px;font-size:11px;line-height:1.25;border-left:3px solid var(--wine)}
.wchip b{display:block}

/* ---------- MONTH ---------- */
.month{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.month .wd{text-align:center;font-size:10px;color:var(--muted);font-weight:bold;padding:2px 0}
.month .day{background:#fff;border:1px solid var(--line);border-radius:9px;min-height:54px;padding:4px;position:relative;text-align:left}
.month .day.out{background:#f6f1f3;color:#cbbcc1}
.month .day.today{border-color:var(--wine);border-width:2px}
.month .day .n{font-size:12px;font-weight:bold}
.month .day .dots{display:flex;gap:2px;flex-wrap:wrap;margin-top:3px}
.month .day .dot{width:5px;height:5px;border-radius:50%;background:var(--wine)}
.month .day .cnt{position:absolute;bottom:3px;right:5px;font-size:10px;color:var(--wine);font-weight:bold}

/* ---------- MODAL ---------- */
#modalRoot{position:fixed;inset:0;z-index:50;display:none}
#modalRoot.show{display:block}
#modalRoot .ovl{position:absolute;inset:0;background:rgba(40,15,22,.45)}
#modalRoot .sheet{position:absolute;left:0;right:0;bottom:0;max-width:520px;margin:0 auto;background:#fff;border-radius:18px 18px 0 0;max-height:92vh;overflow:auto;padding:18px 16px calc(18px + env(safe-area-inset-bottom));animation:up .22s ease}
@keyframes up{from{transform:translateY(40px);opacity:.6}to{transform:translateY(0);opacity:1}}
#modalRoot h3{margin:2px 0 16px;font-size:18px;color:var(--wine)}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:bold;color:var(--muted);margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;padding:12px;border:1px solid var(--line);border-radius:11px;background:#fff}
.field .with-add{display:flex;gap:8px}
.field .with-add input{flex:1}
.addbtn{width:48px;border:1px solid var(--wine);color:var(--wine);border-radius:11px;font-size:24px;background:#fff;flex:none}
.two{display:flex;gap:10px}
.two>*{flex:1}
.ac{position:relative}
.ac .list{position:absolute;left:0;right:0;top:100%;background:#fff;border:1px solid var(--line);border-radius:11px;margin-top:4px;max-height:190px;overflow:auto;z-index:5;box-shadow:var(--shadow)}
.ac .list div{padding:11px 12px;border-bottom:1px solid var(--line)}
.ac .list div:last-child{border-bottom:none}
.ac .list div b{color:var(--wine)}
.inline-new{background:var(--rose2);border:1px dashed var(--wine);border-radius:11px;padding:11px;margin-top:8px}
.calcbox{background:var(--rose2);border-radius:11px;padding:11px 12px;font-size:13px;margin-bottom:13px}
.calcbox .r{display:flex;justify-content:space-between;margin:3px 0}
.calcbox .hl{font-weight:bold;color:var(--wine)}
.modal-actions{display:flex;gap:9px;margin-top:8px;flex-wrap:wrap}
.modal-actions .btn{flex:1;min-width:120px}
.pillset{display:flex;gap:8px;flex-wrap:wrap}
.pillset button{flex:1;min-width:70px;padding:11px;border:1px solid var(--line);border-radius:11px;font-weight:bold;color:var(--ink);background:#fff}
.pillset button.on{border-color:var(--wine);background:var(--wine);color:#fff}

/* metric cards */
.mcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:6px}
.mcard{background:#fff;border:1px solid var(--line);border-radius:13px;padding:13px;box-shadow:var(--shadow)}
.mcard .k{font-size:11px;color:var(--muted);font-weight:bold;text-transform:uppercase}
.mcard .v{font-size:20px;font-weight:bold;margin-top:3px}
.mcard.full{grid-column:1/3}
.mcard.profit{background:var(--wine);border-color:var(--wine)}
.mcard.profit .k,.mcard.profit .v{color:#fff}
.bar{height:9px;background:#ECE8F5;border-radius:5px;overflow:hidden;margin-top:5px}
.bar i{display:block;height:100%;background:var(--wine);border-radius:5px}
.rankrow{padding:10px 2px;border-bottom:1px solid var(--line)}
.rankrow:last-child{border-bottom:none}
.rankrow .top{display:flex;justify-content:space-between;font-size:14px}
.rankrow .top b{color:var(--wine)}
.toast{position:fixed;bottom:96px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:11px 18px;border-radius:30px;font-size:13px;z-index:60;box-shadow:0 4px 16px rgba(0,0,0,.3);animation:up .2s}
.spin{display:inline-block;width:20px;height:20px;border:3px solid var(--rose);border-top-color:var(--wine);border-radius:50%;animation:rot .8s linear infinite;vertical-align:middle}
@keyframes rot{to{transform:rotate(360deg)}}
.loadwrap{text-align:center;padding:40px;color:var(--muted)}

/* ---------- Myga: auth / trial / salão ---------- */
.authtoggle{margin-top:15px;text-align:center;font-size:13px;color:var(--muted)}
.authtoggle b{color:var(--wine);cursor:pointer}
.salaonome{font-size:12px;color:var(--muted);font-weight:600;line-height:1.1;margin-bottom:1px;letter-spacing:.01em}
#trialBar{background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 14px;font-size:13px;font-weight:bold}
#trialBar button{background:#fff;color:var(--wine-d);border-radius:8px;padding:6px 12px;font-size:12px;font-weight:800}

/* =================================================================
   MENU LATERAL (gaveta)
   ================================================================= */
#topbar{display:flex;align-items:center;gap:12px}
#menuBtn{background:var(--rose);border:0;border-radius:11px;padding:9px;flex:none;cursor:pointer;line-height:0}
#menuBtn:active{background:var(--line)}
#menuBtn svg{width:22px;height:22px;fill:none;stroke:var(--wine);stroke-width:2.1;stroke-linecap:round}
.tbtxt{min-width:0;flex:1}

#drawerOvl{position:fixed;inset:0;background:rgba(20,10,35,.45);opacity:0;pointer-events:none;transition:opacity .22s ease;z-index:60}
#drawerOvl.show{opacity:1;pointer-events:auto}
#drawer{
  position:fixed;top:0;left:0;bottom:0;width:80%;max-width:300px;background:#fff;z-index:61;
  transform:translateX(-102%);transition:transform .24s cubic-bezier(.3,.8,.3,1);
  display:flex;flex-direction:column;box-shadow:6px 0 28px rgba(20,10,35,.18);
  padding-bottom:env(safe-area-inset-bottom);
}
#drawer.show{transform:none}
.dr-topo{background:var(--rose2);color:var(--ink);border-bottom:1px solid var(--line);padding:26px 18px 18px;display:flex;align-items:center;gap:12px;
  padding-top:calc(26px + env(safe-area-inset-top))}
.dr-avatar{width:46px;height:46px;border-radius:50%;background:var(--wine);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:17px;
  background-size:cover;background-position:center}
.dr-quem{min-width:0}
.dr-quem b{display:block;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dr-quem span{font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.dr-itens{padding:10px 0;overflow-y:auto;flex:1}
.dr-itens button{
  width:100%;display:flex;align-items:center;gap:13px;background:none;border:0;cursor:pointer;
  padding:14px 18px;font-size:15.5px;color:var(--ink);text-align:left;font-family:inherit;
}
.dr-itens button svg{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.dr-itens button:active{background:var(--bg)}
.dr-itens button.on{color:var(--wine);font-weight:800;background:var(--rose)}
.dr-sep{height:1px;background:var(--line);margin:9px 18px}
#drSuporte{color:#128C4B}
#logoutBtn{color:#B23A3A}

/* =================================================================
   TELA INÍCIO
   ================================================================= */
.ola{margin:2px 2px 14px}
.ola .oi{font-size:13.5px;color:var(--muted)}
.ola .nome{font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.15;margin-top:1px}
.hcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}
.hcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 14px}
.hcard .k{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.hcard .v{font-size:20px;font-weight:800;margin-top:3px;letter-spacing:-.02em}
.hcard.full{grid-column:1/-1}
.hcard .v.verde{color:var(--green)}
.hcard .v.amarelo{color:#8a6d00}
.prox{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid var(--bg)}
.prox:last-child{border-bottom:0}
.prox .qd{background:var(--rose);color:var(--wine-d);border-radius:10px;padding:6px 8px;text-align:center;flex:none;min-width:54px}
.prox .qd b{display:block;font-size:14px;line-height:1.1}
.prox .qd span{font-size:10.5px;text-transform:uppercase;letter-spacing:.04em}
.prox .info{min-width:0;flex:1}
.prox .info b{display:block;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prox .info span{font-size:12.5px;color:var(--muted)}
.rank{display:flex;align-items:center;gap:11px;padding:9px 2px}
.rank .pos{width:22px;height:22px;border-radius:50%;background:var(--rose);color:var(--wine-d);
  font-size:12px;font-weight:800;display:flex;align-items:center;justify-content:center;flex:none}
.rank .nm{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14.5px}
.grafico{width:100%;height:auto;display:block;margin-top:6px}
.leg{display:flex;gap:16px;margin-top:8px;font-size:12.5px;color:var(--muted)}
.leg i{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:5px}

/* =================================================================
   TELA PERFIL
   ================================================================= */
.pfoto{display:flex;flex-direction:column;align-items:center;gap:10px;padding:6px 0 4px}
.pfoto .av{width:96px;height:96px;border-radius:50%;background:var(--rose);color:var(--wine);
  display:flex;align-items:center;justify-content:center;font-size:34px;font-weight:800;
  background-size:cover;background-position:center;border:3px solid #fff;box-shadow:0 4px 16px rgba(80,40,150,.18)}
.pfoto .troca{font-size:13.5px;color:var(--wine);font-weight:700;cursor:pointer;background:none;border:0;font-family:inherit}
.perigo{border-color:#f0c9c9;background:#fffafa}
.perigo .sectitle{color:#B23A3A}
.btn.danger{background:#B23A3A}
.motivos{display:grid;gap:8px;margin:4px 0 12px}
.motivos label{display:flex;align-items:center;gap:10px;border:1px solid var(--line);border-radius:11px;
  padding:11px 13px;font-size:14.5px;cursor:pointer;background:#fff}
.motivos label.sel{border-color:var(--wine);background:var(--rose)}
.motivos input{accent-color:var(--wine);width:17px;height:17px}

/* =================================================================
   DESKTOP — o app deixa de ser uma coluna de 520px no meio da tela
   ================================================================= */
@media (min-width:1024px){
  body{background:var(--bg)}

  /* menu fixo, sempre visível: no desktop sobra espaço, não faz sentido esconder */
  #app{max-width:none;padding-left:264px}
  #drawer{transform:none;width:264px;max-width:264px;box-shadow:1px 0 0 var(--line);border-right:1px solid var(--line)}
  #drawerOvl{display:none !important}
  #menuBtn{display:none}
  .dr-topo{padding-top:22px}
  .dr-itens button{padding:12px 18px;font-size:15px}
  .dr-itens button:hover{background:var(--bg)}

  /* conteúdo centralizado e com largura de leitura */
  #topbar{padding:16px 30px}
  #topbar .tbtxt{max-width:1120px;margin:0 auto;width:100%}
  #topbar .ttl{font-size:20px}
  #trialBar{padding:11px 30px;justify-content:center;gap:18px}
  #main{max-width:1120px;margin:0 auto;padding:24px 30px 80px;width:100%}
  .card{margin-bottom:0;padding:18px}
  .fab{right:44px;bottom:44px;width:60px;height:60px;font-size:32px}
  .seg{max-width:420px}

  /* telas com muitos blocos passam a usar duas colunas */
  #main.v-inicio, #main.v-financeiro, #main.v-relatorios, #main.v-vendas, #main.v-cadastros, #main.v-perfil{
    display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;
  }
  /* filtros, títulos e seletores continuam ocupando a linha inteira */
  #main.v-inicio > :not(.card),
  #main.v-financeiro > :not(.card),
  #main.v-relatorios > :not(.card),
  #main.v-vendas > :not(.card),
  #main.v-cadastros > :not(.card),
  #main.v-perfil > :not(.card){grid-column:1/-1}

  /* Início: indicadores em linha e gráfico ocupando a largura toda */
  .hcards{grid-template-columns:repeat(4,1fr);gap:14px}
  .hcard{padding:16px 17px}
  .hcard .v{font-size:23px}
  .ola .nome{font-size:30px}
  #main.v-inicio .card:nth-of-type(2){grid-column:1/-1}

  /* Agenda: dia mais estreito para não virar faixa vazia; semana usa tudo */
  #main.v-agenda{max-width:1120px}
  .daygrid{max-width:760px}

  /* Perfil: coluna única centralizada lê melhor que dois blocos soltos */
  #main.v-perfil{grid-template-columns:1fr;max-width:640px}

  /* modal deixa de ser gaveta de baixo e vira caixa centrada */
  #modalRoot .sheet{
    left:50%;top:50%;bottom:auto;transform:translate(-50%,-50%);
    width:min(560px,92vw);border-radius:18px;max-height:86vh;padding:22px 22px;animation:none;
  }

  /* formulários não precisam ocupar a largura inteira do card */
  .field input, .field select, .field textarea{max-width:none}
  .btn.block{max-width:340px}
  .motivos label:hover{border-color:var(--wine)}
}

@media (min-width:1500px){
  #main{max-width:1280px}
  #main.v-agenda{max-width:1280px}
}