/* ===========================================================================
   Entrada e painel dentro do site.

   Pensado para o celular primeiro: as abas ficam na base, ao alcance do
   polegar, e nada importante mora acima da metade da tela.
   =========================================================================== */

body.bt-solo--entrar,
body.bt-solo--painel{
  --navy:#0a141c;--navy2:#0f1d28;--navy3:#12202c;
  --ouro:#ba934e;--ouro2:#cfa75e;--linha:rgba(186,147,78,.22);
  --ink:#fff;--ink2:rgba(255,255,255,.66);
  margin:0;background:var(--navy);color:var(--ink);
  font-family:var(--bt-font-text,'Source Sans 3',system-ui,sans-serif);
  min-height:100dvh}
body.bt-solo--entrar *,body.bt-solo--painel *{box-sizing:border-box}

/* --------------------------------------------------------------- entrar -- */

body.bt-solo--entrar{display:flex;align-items:center;justify-content:center;padding:24px}
.bt-entrar{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px;
  padding:30px 26px;border-radius:22px;background:var(--navy2);
  border:1px solid var(--linha);box-shadow:0 26px 70px rgba(0,0,0,.5)}
.bt-entrar__marca{display:flex;justify-content:center;margin-bottom:4px}
.bt-entrar__marca img{max-height:56px;width:auto;
  filter:drop-shadow(0 0 28px rgba(186,147,78,.2))}
.bt-entrar__marca span{font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:22px;letter-spacing:.08em;text-transform:uppercase;color:var(--ouro)}
.bt-entrar h1{margin:0;font-family:var(--bt-font-display,sans-serif);font-weight:700;
  font-size:30px;letter-spacing:.03em;text-transform:uppercase;text-align:center}
.bt-entrar__ajuda{margin:0;font-size:13.5px;line-height:1.45;
  color:var(--ink2);text-align:center}
.bt-entrar__erro{margin:0;padding:11px 14px;border-radius:12px;font-size:13.5px;
  background:rgba(180,69,60,.15);border:1px solid rgba(180,69,60,.45);color:#f0b4ae}

.bt-entrar form{display:flex;flex-direction:column;gap:12px;margin-top:4px}
.bt-entrar form p{margin:0;display:flex;flex-direction:column;gap:6px}
.bt-entrar label{font-size:11.5px;letter-spacing:.16em;
  color:var(--ink2);text-transform:uppercase}
.bt-entrar input[type=text],
.bt-entrar input[type=password]{height:52px;padding:0 16px;border-radius:13px;
  background:var(--navy);border:1px solid var(--linha);color:var(--ink);
  font-family:inherit;font-size:16px}
.bt-entrar input:focus{border-color:var(--ouro);outline:none}
.bt-entrar .login-remember{flex-direction:row;align-items:center;gap:9px}
.bt-entrar .login-remember label{letter-spacing:0;text-transform:none;font-size:13.5px}
.bt-entrar input[type=submit],.bt-entrar .bt-btn{
  min-height:54px;border:0;border-radius:999px;cursor:pointer;
  background:var(--ouro);color:var(--navy);text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--bt-font-display,sans-serif);font-weight:700;font-size:19px;
  letter-spacing:.06em;text-transform:uppercase;transition:background .2s}
.bt-entrar input[type=submit]:hover,.bt-entrar .bt-btn:hover{background:var(--ouro2)}
.bt-entrar__voltar{margin-top:6px;text-align:center;font-size:13.5px;
  color:var(--ink2);text-decoration:none}
.bt-entrar__voltar:hover{color:var(--ouro)}

/* --------------------------------------------------------------- painel -- */

.bt-app{display:flex;flex-direction:column;min-height:100dvh;
  padding-top:env(safe-area-inset-top,0px)}

.bt-app__topo{order:-2;flex-shrink:0;display:flex;align-items:center;justify-content:space-between;
  gap:14px;padding:14px 18px;border-bottom:1px solid var(--linha);background:var(--navy2)}
.bt-app__quem{display:flex;align-items:center;gap:11px;min-width:0}
.bt-app__avatar{width:38px;height:38px;border-radius:999px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;background:var(--ouro);
  color:var(--navy);font-family:var(--bt-font-display,sans-serif);
  font-weight:700;font-size:15px}
.bt-app__nome{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bt-app__sair{flex-shrink:0;font-size:13.5px;color:var(--ink2);text-decoration:none;
  padding:9px 14px;border-radius:999px;border:1px solid var(--linha)}
.bt-app__sair:hover{color:var(--ouro);border-color:var(--ouro)}

#bt-root{flex:1;padding:18px;min-height:0;
  padding-bottom:calc(18px + env(safe-area-inset-bottom,0px))}

/* Abas na base: é onde o polegar chega sem trocar a mão de posição. */
.bt-app__abas{position:sticky;bottom:0;z-index:5;flex-shrink:0;
  display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;
  padding:8px 10px calc(10px + env(safe-area-inset-bottom,0px));
  background:var(--navy2);border-top:1px solid var(--linha)}
.bt-app__abas::-webkit-scrollbar{display:none}
.bt-app__abas a{flex:0 0 auto;min-height:44px;padding:0 16px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;
  font-size:14px;color:var(--ink2);text-decoration:none;white-space:nowrap;
  transition:background .2s,color .2s}
.bt-app__abas a:hover{color:var(--ouro)}
.bt-app__abas a.is-on{background:rgba(186,147,78,.16);color:var(--ouro);font-weight:600}

/* Em tela grande as abas sobem para o topo e viram menu horizontal. */
@media (min-width:900px){
  .bt-app{max-width:1100px;margin:0 auto}
  .bt-app__abas{position:static;order:-1;border-top:0;border-radius:0;
    border-bottom:1px solid var(--linha);justify-content:center;padding:10px}
  #bt-root{padding:26px 24px}
}
@media (prefers-reduced-motion:reduce){
  body.bt-solo--painel *{transition-duration:.01ms!important;animation-duration:.01ms!important}
}

.bt-app__alerta{margin:16px 18px 0;padding:13px 16px;border-radius:13px;
  background:rgba(180,69,60,.14);border:1px solid rgba(180,69,60,.45);
  color:#f0b4ae;font-size:13.5px;line-height:1.45}

/* Marca da barbearia no topo do painel. */
.bt-app__marca{display:flex;align-items:center;flex-shrink:0;margin-right:4px;opacity:.9}
.bt-app__marca img{height:30px;width:auto}
.bt-app__marca:hover{opacity:1}
.bt-app__topo{gap:12px}
.bt-app__quem{flex:1}
.bt-app__nome{display:flex;flex-direction:column;line-height:1.2}
.bt-app__nome small{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--ouro)}

/* ===========================================================================
   Painel com menu lateral (computador) e barra de ícones (celular).
   Substitui o arranjo de abas no topo.
   =========================================================================== */

.bt-app{display:grid;grid-template-columns:252px minmax(0,1fr);min-height:100dvh;
  max-width:none!important;margin:0!important;padding-top:0}
.bt-app__abas{display:none!important}

/* ---- lateral --------------------------------------------------------- */
.bt-app__lado{position:sticky;top:0;height:100dvh;display:flex;flex-direction:column;gap:22px;
  padding:26px 16px 18px;background:#08121a;border-right:1px solid var(--linha);overflow-y:auto}
body.admin-bar .bt-app__lado{top:var(--wp-admin--admin-bar--height,32px);
  height:calc(100dvh - var(--wp-admin--admin-bar--height,32px))}

.bt-app__lado .bt-app__marca{display:flex;align-items:center;gap:12px;padding:0 10px 6px;
  text-decoration:none;color:var(--ink);margin:0}
.bt-app__lado .bt-app__marca img{height:34px;width:auto}
.bt-app__marca-nome{display:flex;flex-direction:column;line-height:1}
.bt-app__marca-nome strong{font-family:var(--bt-font-display,sans-serif);font-weight:800;
  font-size:20px;letter-spacing:.06em;text-transform:uppercase}
.bt-app__marca-nome small{margin-top:4px;font-size:10.5px;letter-spacing:.32em;
  text-transform:uppercase;color:var(--ouro)}

.bt-app__menu{display:flex;flex-direction:column;gap:3px;flex:1}
.bt-app__menu a{display:flex;align-items:center;gap:13px;min-height:44px;padding:0 13px;
  border-radius:12px;color:rgba(255,255,255,.7);text-decoration:none;font-size:14.5px;
  transition:background .2s,color .2s}
.bt-app__menu a svg{flex-shrink:0;opacity:.75}
.bt-app__menu a:hover{background:rgba(255,255,255,.04);color:#fff}
.bt-app__menu a.is-on{background:rgba(186,147,78,.14);color:var(--ouro);font-weight:600}
.bt-app__menu a.is-on svg{opacity:1}

.bt-app__eu{display:flex;align-items:center;gap:11px;padding:12px;border-radius:14px;
  background:rgba(255,255,255,.035);border:1px solid rgba(186,147,78,.14)}
.bt-app__eu .bt-app__nome{flex:1;min-width:0;font-size:14px;overflow:hidden}
.bt-app__eu .bt-app__sair{padding:7px 11px;font-size:12.5px}

/* ---- corpo ----------------------------------------------------------- */
.bt-app__corpo{min-width:0;display:flex;flex-direction:column}
.bt-app__corpo #bt-root{padding:32px clamp(20px,3vw,40px) 48px;max-width:1200px;width:100%}
.bt-app__topo{display:none}

/* ---- barra de base e folha "Mais" (só no celular) --------------------- */
.bt-app__base{display:none}
.bt-app__folha[hidden]{display:none}

@media (max-width:899px){
  .bt-app{display:block}
  .bt-app__lado{display:none}

  .bt-app__topo{display:flex;position:sticky;top:0;z-index:20;align-items:center;gap:12px;
    padding:12px 16px;background:rgba(8,18,26,.92);-webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);border-bottom:1px solid var(--linha)}
  body.admin-bar .bt-app__topo{top:var(--wp-admin--admin-bar--height,46px)}
  .bt-app__topo .bt-app__marca img{height:28px}
  .bt-app__topo .bt-app__quem{flex:1}

  .bt-app__corpo #bt-root{padding:18px 14px calc(96px + env(safe-area-inset-bottom,0px))}

  .bt-app__base{position:fixed;left:0;right:0;bottom:0;z-index:30;display:grid;
    padding:8px 8px calc(8px + env(safe-area-inset-bottom,0px));gap:4px;
    background:rgba(8,18,26,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-top:1px solid var(--linha)}
  .bt-app__base--3{grid-template-columns:repeat(3,1fr)}
  .bt-app__base--4{grid-template-columns:repeat(4,1fr)}
  .bt-app__base--5{grid-template-columns:repeat(5,1fr)}
  .bt-app__base a,.bt-app__mais-btn{display:flex;flex-direction:column;align-items:center;
    justify-content:center;gap:4px;min-height:54px;border-radius:13px;border:0;background:none;
    color:rgba(255,255,255,.62);text-decoration:none;font-family:inherit;font-size:11px;cursor:pointer}
  .bt-app__base a.is-on,.bt-app__mais-btn.is-on,.bt-app__mais-btn[aria-expanded=true]{
    background:rgba(186,147,78,.16);color:var(--ouro)}

  .bt-app__folha{position:fixed;inset:0;z-index:40}
  .bt-app__folha-fundo{position:absolute;inset:0;background:rgba(4,9,13,.6)}
  .bt-app__folha-caixa{position:absolute;left:10px;right:10px;
    bottom:calc(80px + env(safe-area-inset-bottom,0px));padding:10px;border-radius:18px;
    background:#0f1d28;border:1px solid rgba(186,147,78,.3);box-shadow:0 -10px 40px rgba(0,0,0,.5);
    display:flex;flex-direction:column;gap:2px;animation:btFolha .22s ease-out}
  @keyframes btFolha{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .bt-app__folha-caixa a{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 14px;
    border-radius:12px;color:#fff;text-decoration:none;font-size:15px}
  .bt-app__folha-caixa a.is-on{background:rgba(186,147,78,.14);color:var(--ouro)}
  .bt-app__folha-caixa .bt-app__folha-sair{margin-top:6px;border-top:1px solid var(--linha);
    border-radius:0 0 12px 12px;color:rgba(255,255,255,.6);font-size:14px}
}
@media (prefers-reduced-motion:reduce){.bt-app__folha-caixa{animation:none}}