/* ====== Variáveis ====== */
:root{
  --bg:#0b0b0b;
  --panel:#1e1e1e;
  --card:#232323;
  --muted:#9b9b9b;
  --accent1:#ff7a00;
  --accent2:#f15a00;
  --border:rgba(255,255,255,0.06);
  --radius:18px;
  --glass:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  --text-primary:#fff;
  --text-secondary:#9b9b9b;
  --body-bg:#050505;
  --body-color:#fff;
  /* Gradiente Kronis (lavanda → laranja → ciano) igual à landing */
  --gradient-kronis: linear-gradient(198.36deg, rgb(157, 232, 238) 25.046%, rgb(250, 124, 11) 51.705%, rgb(159, 140, 237) 79.447%);
}

/* ====== Reset ====== */
*{
  box-sizing:border-box;
  margin:0;
  padding:0;
  font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

html{ overflow-x:hidden; }
body{
  min-height:100vh;
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--body-bg);
  color:var(--body-color);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  padding:0;
  margin:0;
  overflow-x:hidden;
  transition:background 0.3s ease, color 0.3s ease;
  zoom:0.9; /* layout fixo equivalente a 80% de zoom do navegador */
}
#app{ flex:1; min-height:0; display:flex; flex-direction:column; }

/* ====== Layout helpers ====== */
.wrap{
  width:100%;
  max-width:100%;
  margin:0 auto;
  background:var(--panel);
  border-radius:0;
  padding:clamp(16px,4vw,32px);
  border:none;
  box-shadow:none;
  min-height:100vh;
  flex:1;
  display:flex;
  flex-direction:column;
  transition:background 0.3s ease;
}

.page-dashboard .wrap{
  padding:0;
  margin:0;
  min-height:100vh;
  min-height:100dvh; /* mobile: evita faixa preta abaixo do rodapé */
  flex:1;
}

/* Mesma cor do painel no body: se sobrar 1px (zoom/viewport), não aparece preto */
body.page-dashboard{
  background:var(--panel);
}

.page-dashboard #mainView{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

.page-dashboard #page-dashboard{
  flex:1;
  min-height:0;
  display:flex;
  flex-direction:column;
}

header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.page-dashboard header{
  margin-left:260px;
}

.page-dashboard #mainView{
  margin-left:260px;
}

.page-dashboard.sidebar-collapsed header{
  margin-left:80px;
}

.page-dashboard.sidebar-collapsed #mainView{
  margin-left:80px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.logo{
  width:46px;
  height:46px;
  border-radius:10px;
  background:linear-gradient(180deg,var(--accent1),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 12px rgba(241,90,0,0.12);
}

.logo svg{width:22px;height:22px;fill:#0b0b0b}
.title{font-weight:700;color:var(--accent1);font-size:20px}
.subtitle{color:var(--muted);font-size:13px}

.user-info{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.btn-logout{
  background:transparent;
  border:1px solid rgba(255,255,255,0.06);
  padding:8px 12px;
  border-radius:8px;
  color:var(--accent1);
  cursor:pointer;
  text-decoration:none;
  transition:opacity .2s ease;
}

.btn-logout:hover{opacity:.8}

.hero{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius:16px;
  padding:28px;
  text-align:center;
  border:1px solid rgba(255,255,255,0.03);
  margin:14px 0;
}

.hero .icon{
  width:64px;
  height:64px;
  border-radius:50%;
  background:rgba(241,90,0,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 10px;
}

.hero h1{font-size:22px;margin-bottom:8px}
.hero p{color:var(--muted);margin-bottom:14px}

.btn{
  display:inline-flex;
  justify-content:center;
  width:100%;
  padding:12px 20px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:#0b0b0b;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}

.btn:hover{transform:translateY(-1px);opacity:.95}
.btn:disabled{opacity:.5;cursor:not-allowed}

.btn-small{
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  padding:6px 10px;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  font-size:12px;
}

form{margin-top:10px}
label{
  display:block;
  color:var(--muted);
  font-weight:600;
  margin:12px 0 6px;
  font-size:14px;
}

.input{
  width:100%;
  padding:14px;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  color:#ddd;
  display:flex;
  gap:10px;
  align-items:center;
}

.input input,
.input select,
.input textarea{
  background:transparent;
  border:none;
  color:var(--text-primary);
  outline:none;
  width:100%;
  font-size:14px;
  padding:6px 0;
  resize:vertical;
  font-family:inherit;
}

.input select{
  background:var(--card);
  cursor:pointer;
  padding:8px 10px;
  border-radius:6px;
  appearance:auto;
}
.input select option{
  background:var(--panel);
  color:var(--text-primary);
}

.input textarea{
  min-height:60px;
  padding:8px 0;
}

.input-with-btn input{
  flex:1;
  min-width:0;
}

.input--password input{
  flex:1;
  min-width:0;
  width:auto;
}

.btn-toggle-password{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  margin:-6px -6px -6px 0;
  padding:0;
  border:none;
  border-radius:8px;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  transition:color .15s, background .15s;
}

.btn-toggle-password:hover{
  color:var(--accent1);
  background:rgba(255,255,255,0.06);
}

.btn-toggle-password:focus-visible{
  outline:2px solid var(--accent1);
  outline-offset:2px;
}

body.page-auth.theme-light .btn-toggle-password:hover{
  background:rgba(0,0,0,0.05);
}

.btn-cep-lupa{
  flex-shrink:0;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  padding:0;
  border:none;
  border-radius:8px;
  background:rgba(241,90,0,0.2);
  color:rgba(241,90,0,0.95);
  cursor:pointer;
  transition:background .15s, opacity .15s;
}
.btn-cep-lupa:hover:not(:disabled){
  background:rgba(241,90,0,0.35);
}
.btn-cep-lupa:disabled{
  opacity:.6;
  cursor:not-allowed;
}

label[style*="cursor:pointer"]:hover{
  background:rgba(255,255,255,0.04) !important;
}

input[type="checkbox"]{
  flex-shrink:0;
}

.muted{
  color:var(--text-secondary);
  font-size:14px;
  margin-top:10px;
  text-align:center;
}

.link{
  color:var(--accent1);
  font-weight:700;
  cursor:pointer;
  text-decoration:none;
}

.grid{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:14px;
}

.stat{
  background:var(--card);
  padding:16px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.02);
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.stat .left{font-size:13px;color:var(--muted)}
.stat .num{font-size:26px;font-weight:700;margin-top:6px}

/* Stats Grid para Dashboard */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(100px,1fr));
  gap:12px;
  margin-bottom:16px;
}

.stat-card{
  background:linear-gradient(135deg,var(--card),rgba(255,122,0,0.05));
  padding:12px 16px;
  border-radius:12px;
  border:1px solid var(--border);
  text-align:center;
  transition:transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
}

.stat-card:hover{
  transform:translateY(-2px);
  border-color:var(--accent1);
  box-shadow:0 4px 12px rgba(0,0,0,0.1);
}

/* Inputs de data no dashboard */
#page-dashboard input[type="date"] {
  color: var(--text-primary) !important;
}
#page-dashboard label[for="filter-history-date"],
#page-dashboard label[for="report-date-input"],
#page-dashboard label[for="barber-earnings-date-input"] {
  color: var(--text-secondary) !important;
}

.stat-value{
  font-size:24px;
  font-weight:700;
  color:var(--accent1);
  margin-bottom:4px;
}

.stat-label{
  font-size:11px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Tab buttons */
.tab-btn{
  background:transparent;
  border:none;
  color:var(--muted);
  padding:12px 0px;
  cursor:pointer;
  border-bottom:3px solid transparent;
  transition:all 0.2s ease;
  font-size:14px;
  font-weight:600;
}

.tab-btn:hover{
  color:var(--text-primary);
  background:rgba(255,255,255,0.02);
}

.tab-btn.active{
  color:var(--accent1);
  border-bottom-color:var(--accent1);
}
.tab-count{
  display:inline-block;
  min-width:20px;
  padding:2px 6px;
  margin-left:4px;
  font-size:11px;
  font-weight:600;
  border-radius:10px;
  background:rgba(255,255,255,0.1);
  color:var(--muted);
}
.tab-btn.active .tab-count{
  background:rgba(255,255,255,0.15);
  color:var(--accent1);
}

/* Tab content */
.tab-content{
  display:none;
  padding:24px 0;
}

.tab-content.active{
  display:block;
}

/* Trial expirado: apenas aba Planos visível */
.dashboard-layout.trial-expired .dashboard-main .tab-content:not(#tab-planos){
  display:none !important;
}
.dashboard-layout.trial-expired .dashboard-main #tab-planos{
  display:block !important;
}

/* Barbeiro: painel bloqueado até barbearia pagar o plano */
.dashboard-layout.barber-plan-blocked .dashboard-main .stats-grid,
.dashboard-layout.barber-plan-blocked .dashboard-main .tabs-agenda,
.dashboard-layout.barber-plan-blocked .dashboard-main .tab-content{
  display:none !important;
}
.barber-plan-blocked-panel{
  display:none;
  padding:48px 24px;
  text-align:center;
  max-width:420px;
  margin:0 auto;
}
.dashboard-layout.barber-plan-blocked .barber-plan-blocked-panel{
  display:block;
}
.barber-plan-blocked-panel .barber-plan-blocked-icon{
  font-size:48px;
  color:var(--muted);
  margin-bottom:16px;
}
.barber-plan-blocked-panel h2{
  font-size:20px;
  margin-bottom:12px;
  color:var(--text-primary);
}
.barber-plan-blocked-panel p{
  font-size:15px;
  line-height:1.5;
}

.tab-content h2{
  font-size:20px;
  margin-bottom:20px;
  color:var(--text-primary);
}

/* Form styles */
.tab-content form label{
  display:block;
  margin-top:14px;
  margin-bottom:6px;
  color:var(--muted);
  font-size:14px;
  font-weight:600;
}

.tab-content form select,
.tab-content form input[type="date"],
.tab-content form input[type="time"],
.tab-content form input[type="text"],
.tab-content form input[type="number"],
.tab-content form textarea{
  width:100%;
  padding:12px;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  color:var(--text-primary);
  font-size:14px;
  font-family:inherit;
}
.tab-content form select{
  background:var(--card);
  cursor:pointer;
}
.tab-content form select option{
  background:var(--panel);
  color:var(--text-primary);
}

.tab-content form textarea{
  min-height:80px;
  resize:vertical;
}

.tab-content form button[type="submit"]{
  margin-top:20px;
}

/* Suporte - filtro de tickets */
.support-ticket-filter-select{
  padding:6px 10px;
  font-size:0.875rem;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--panel);
  color:var(--text-primary);
  cursor:pointer;
  min-width:140px;
}
.support-ticket-filter-select:focus{
  outline:none;
  border-color:var(--accent1);
}

/* Suporte - campo de resposta nos tickets (estilo WhatsApp) */
.support-ticket-reply-form{
  display:flex;
  gap:10px;
  align-items:flex-end;
}
.support-ticket-reply-form textarea{
  flex:1;
  min-width:0;
  min-height:90px !important;
  max-height:140px;
  padding:14px 16px;
  font-size:0.95rem;
  margin-top:0 !important;
  background:var(--panel) !important;
  border:1px solid var(--border);
  border-radius:12px;
  color:var(--text-primary);
}
.support-ticket-reply-form textarea:focus{
  outline:none;
  border-color:var(--accent1);
}
.support-ticket-reply-form button[type="submit"],
.support-ticket-send-btn{
  flex-shrink:0;
  padding:10px 14px !important;
  margin-top:0 !important;
  min-width:auto;
  width:auto;
}

/* ====== Agenda do dia ====== */
.agenda-day-wrap{
  padding:0;
}
.agenda-day-header{
  margin-bottom:16px;
}
.agenda-day-title-row{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:12px;
}
.agenda-day-label{
  font-size:20px;
  font-weight:700;
  color:var(--text-primary);
}
.agenda-day-hours{
  font-size:14px;
  color:var(--muted);
}
.agenda-expand-btn{
  margin-left:auto;
  width:36px;
  height:36px;
  border:none;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
  flex-shrink:0;
}
.agenda-expand-btn:hover{
  background:rgba(255,255,255,0.1);
  color:var(--text-primary);
}
.agenda-expand-btn i{
  font-size:16px;
}
.agenda-date-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}
.agenda-date-row-right{
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
}
.agenda-day-barbershop-logo{
  display:none;
  height:2rem;
  width:2rem;
  object-fit:cover;
  border-radius:8px;
  flex-shrink:0;
}
.agenda-day-barbershop-name{
  display:none;
  font-size:1.75rem;
  font-weight:700;
  color:var(--text-secondary);
}
.agenda-date-strip{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.agenda-date-btn{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-width:44px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-secondary);
  font-size:12px;
  cursor:pointer;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
}
.agenda-date-btn:hover{
  background:rgba(255,255,255,0.04);
  color:var(--text-primary);
}
.agenda-date-btn.active{
  background:var(--accent1);
  border-color:var(--accent1);
  color:#fff;
}
.agenda-date-dow{
  font-weight:600;
  margin-bottom:4px;
}
.agenda-date-num{
  font-size:16px;
  font-weight:700;
}
.agenda-grid-wrap{
  position:relative;
  overflow:auto;
  overflow-x:auto;
  max-height:80vh;
  border:1px solid var(--border);
  border-radius:16px;
  background:var(--card);
  transition:max-height 0.3s ease, border-radius 0.3s ease;
  padding-right:6px;
}
.agenda-grid-wrap::-webkit-scrollbar{ width:8px; height:8px; }
.agenda-grid-wrap::-webkit-scrollbar-track{ background:var(--bg); border-radius:4px; }
.agenda-grid-wrap::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.agenda-grid-wrap::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }

/* Hora atual (visível só em fullscreen) */
.agenda-day-current-time {
  display: none;
}

/* Logo, nome da barbearia e hora à direita quando expandido, alinhados à faixa de datas */
#tab-agenda-dia.agenda-fullscreen .agenda-day-barbershop-logo {
  display: block;
}
#tab-agenda-dia.agenda-fullscreen .agenda-day-barbershop-name {
  display: inline;
}
#tab-agenda-dia.agenda-fullscreen .agenda-day-current-time {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* Modo fullscreen */
#tab-agenda-dia:fullscreen,
#tab-agenda-dia:-webkit-full-screen,
#tab-agenda-dia:-moz-full-screen,
#tab-agenda-dia:-ms-fullscreen{
  position:fixed;
  top:0;
  left:0;
  right:0;
  bottom:0;
  z-index:9999;
  background:var(--bg);
  padding:20px;
  overflow:auto;
  width:100vw;
  height:100vh;
}

#tab-agenda-dia:fullscreen .agenda-day-barbershop-logo,
#tab-agenda-dia:-webkit-full-screen .agenda-day-barbershop-logo,
#tab-agenda-dia:-moz-full-screen .agenda-day-barbershop-logo,
#tab-agenda-dia:-ms-fullscreen .agenda-day-barbershop-logo {
  display: block;
}
#tab-agenda-dia:fullscreen .agenda-day-barbershop-name,
#tab-agenda-dia:-webkit-full-screen .agenda-day-barbershop-name,
#tab-agenda-dia:-moz-full-screen .agenda-day-barbershop-name,
#tab-agenda-dia:-ms-fullscreen .agenda-day-barbershop-name {
  display: inline;
}
#tab-agenda-dia:fullscreen .agenda-day-current-time,
#tab-agenda-dia:-webkit-full-screen .agenda-day-current-time,
#tab-agenda-dia:-moz-full-screen .agenda-day-current-time,
#tab-agenda-dia:-ms-fullscreen .agenda-day-current-time {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

#tab-agenda-dia:fullscreen .agenda-day-wrap,
#tab-agenda-dia:-webkit-full-screen .agenda-day-wrap,
#tab-agenda-dia:-moz-full-screen .agenda-day-wrap,
#tab-agenda-dia:-ms-fullscreen .agenda-day-wrap{
  height:100%;
  display:flex;
  flex-direction:column;
}

#tab-agenda-dia:fullscreen .agenda-grid-wrap,
#tab-agenda-dia:-webkit-full-screen .agenda-grid-wrap,
#tab-agenda-dia:-moz-full-screen .agenda-grid-wrap,
#tab-agenda-dia:-ms-fullscreen .agenda-grid-wrap{
  max-height:calc(100vh - 120px);
  flex:1;
  border-radius:16px;
}
.agenda-grid{
  display:grid;
  grid-template-columns:56px 1fr;
  min-width:min-content;
}
.agenda-time-col{
  position:sticky;
  left:0;
  z-index:2;
  background:var(--card);
  border-right:1px solid var(--border);
  padding-top:64px;
  --agenda-slots:40;
}
.agenda-time-slot{
  height:var(--agenda-slot-height, 40px);
  min-height:var(--agenda-slot-height, 40px);
  display:flex;
  align-items:center;
  font-size:11px;
  color:var(--muted);
  padding-left:4px;
}
.agenda-columns{
  display:flex;
  min-width:0;
}
.agenda-prof-column{
  flex:1;
  min-width:160px;
  max-width:240px;
  border-right:1px solid var(--border);
  position:relative;
  display:flex;
  flex-direction:column;
}
/* Quando há apenas uma coluna (funcionário sozinho), aumentar o tamanho */
.agenda-columns.single-column .agenda-prof-column{
  max-width:600px;
  min-width:400px;
}
.agenda-prof-column:last-child{
  border-right:none;
}
.agenda-prof-header{
  position:sticky;
  top:0;
  z-index:3;
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px;
  background:var(--card);
  border-bottom:1px solid var(--border);
}
.agenda-prof-avatar{
  width:40px;
  height:40px;
  border-radius:50%;
  background:var(--panel);
  background-size:cover;
  background-position:center;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:700;
  color:var(--accent1);
  overflow:hidden;
  flex-shrink:0;
}

.agenda-prof-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.agenda-prof-info{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.agenda-prof-name{
  font-weight:600;
  font-size:14px;
  color:var(--text-primary);
}
.agenda-prof-hours{
  font-size:12px;
  color:var(--muted);
}
.agenda-prof-slots{
  --agenda-slots:40;
  --agenda-slot-height:40px;
  height:calc(var(--agenda-slots) * var(--agenda-slot-height, 40px));
  min-height:200px;
}
.agenda-slot{
  height:var(--agenda-slot-height, 40px);
  min-height:var(--agenda-slot-height, 40px);
  border-bottom:1px solid var(--border);
}
.agenda-prof-blocks{
  position:absolute;
  left:0;
  right:0;
  top:64px;
  bottom:0;
  pointer-events:none;
}
.agenda-prof-blocks > *{
  pointer-events:auto;
}
.agenda-appointment-block{
  position:absolute;
  left:6px;
  right:6px;
  margin-top:2px;
  border-radius:10px;
  padding:8px;
  font-size:12px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(124,58,237,0.25), rgba(139,92,246,0.2));
  border:1px solid rgba(139,92,246,0.3);
  color:var(--text-primary);
  display:flex;
  flex-direction:column;
  gap:2px;
  transition:transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
/* Card 15 min: tudo em uma linha (ex: Luiz · Corte social) */
.agenda-appointment-block.agenda-block-compact{
  flex-direction:row;
  align-items:center;
  padding:6px 8px;
  gap:0;
}
.agenda-appointment-block.agenda-block-compact .agenda-block-line{
  display:flex;
  align-items:center;
  flex-wrap:nowrap;
  gap:4px;
  min-width:0;
  flex:1;
  font-size:11px;
}
.agenda-appointment-block.agenda-block-compact .agenda-block-time{
  flex-shrink:0;
  font-size:10px;
  font-weight:600;
  color:var(--muted);
}
.agenda-appointment-block.agenda-block-compact .agenda-block-sep{
  flex-shrink:0;
  font-size:10px;
  color:var(--muted);
  opacity:0.8;
}
.agenda-appointment-block.agenda-block-compact .agenda-block-client{
  font-weight:600;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agenda-appointment-block.agenda-block-compact .agenda-block-service{
  color:var(--muted);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.agenda-appointment-block.agenda-block-compact .agenda-block-payment{
  flex-shrink:0;
  position:static;
  margin-left:4px;
  font-size:9px;
}
/* Card 30/45 min: informações empilhadas (uma abaixo da outra) */
.agenda-appointment-block.agenda-block-stacked{
  flex-direction:column;
}
.agenda-appointment-block:hover{
  transform:translateY(-2px);
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  border-color:rgba(139,92,246,0.5);
  background:linear-gradient(135deg, rgba(124,58,237,0.35), rgba(139,92,246,0.3));
}
.agenda-appointment-block.apt-checkedin{
  background:linear-gradient(135deg, rgba(33,150,243,0.3), rgba(33,150,243,0.2));
  border-color:rgba(33,150,243,0.5);
}
.agenda-appointment-block.apt-checkedin:hover{
  background:linear-gradient(135deg, rgba(33,150,243,0.4), rgba(33,150,243,0.3));
  border-color:rgba(33,150,243,0.6);
}
.agenda-appointment-block.apt-done{
  background:linear-gradient(135deg, rgba(34,197,94,0.2), rgba(22,163,74,0.15));
  border-color:rgba(34,197,94,0.35);
  opacity:0.9;
}
.agenda-appointment-block.apt-done:hover{
  background:linear-gradient(135deg, rgba(34,197,94,0.3), rgba(22,163,74,0.25));
  border-color:rgba(34,197,94,0.5);
  opacity:1;
}
.agenda-appointment-block.apt-cancelled{
  background:rgba(107,114,128,0.2);
  border-color:var(--border);
  text-decoration:line-through;
  opacity:0.7;
}
.agenda-appointment-block.apt-cancelled:hover{
  background:rgba(107,114,128,0.3);
  opacity:0.85;
}
.agenda-block-time{
  font-weight:600;
  font-size:11px;
  color:var(--muted);
}
.agenda-block-client{
  font-weight:600;
}
.agenda-block-service{
  font-size:11px;
  color:var(--muted);
}
.agenda-block-payment{
  position:absolute;
  top:6px;
  right:6px;
  font-size:10px;
  color:#22c55e;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.5px;
  z-index:1;
}
.agenda-block-hint{
  font-size:11px;
  color:rgba(255,255,255,0.9);
  display:flex;
  align-items:center;
  gap:4px;
  margin-top:4px;
  font-weight:500;
}
.agenda-block-hint .bi{
  font-size:13px;
  flex-shrink:0;
}
.agenda-block-icon{
  position:absolute;
  top:6px;
  right:6px;
  font-size:14px;
  color:var(--muted);
}
.agenda-block-icon-payment{
  color:#22c55e;
}
.agenda-appointment-block-clickable{
  cursor:pointer;
}
.agenda-block-actions{
  margin-top:4px;
  flex-shrink:0;
}
.agenda-block-btn-action{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 8px;
  font-size:11px;
  border-radius:6px;
  border:none;
  cursor:pointer;
  background:var(--accent1);
  color:#fff;
  font-weight:600;
}
.agenda-block-btn-action:hover{
  filter:brightness(1.1);
}
.agenda-block-btn-action.btn-checkout-small{
  background:#22c55e;
}
.agenda-apt-modal-body{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:16px;
}
.agenda-apt-modal-row{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.agenda-apt-modal-label{
  font-size:12px;
  color:var(--muted);
  font-weight:500;
}
.agenda-apt-modal-row span:last-child{
  font-size:14px;
  color:var(--text-primary);
}
#agenda-apt-value-wrap, #checkout-modal-value-wrap{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.agenda-apt-free-cut-msg, .checkout-modal-free-cut-msg{
  font-size:0.75rem;
  color:var(--muted);
  font-weight:500;
}

/* Modal Detalhes do Agendamento - layout horizontal em desktop */
@media (min-width: 768px) {
  #modal-agenda-apt .modal-card {
    max-width: 680px;
    padding: 28px;
  }
  #modal-agenda-apt .agenda-apt-modal-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 28px;
    margin-bottom: 16px;
  }
  #modal-agenda-apt .agenda-apt-modal-row {
    min-width: 0;
  }
  #modal-agenda-apt #agenda-apt-checkout-edit > div {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px 20px;
  }
}
#modal-agenda-apt #agenda-apt-checkout-edit select {
  color: #fff;
}
#modal-agenda-apt #agenda-apt-checkout-edit select option {
  background: var(--panel);
  color: #fff;
}
.agenda-now-line{
  position:absolute;
  left:0;
  right:0;
  height:2px;
  background:var(--accent1);
  z-index:4;
  pointer-events:none;
  display:none;
}
.agenda-now-line::before{
  content:'';
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:8px;
  height:8px;
  border-radius:50%;
  background:var(--accent1);
}
.agenda-day-empty{
  padding:24px;
  text-align:center;
  color:var(--muted);
}

/* Carrossel agenda do dia (mobile) */
.agenda-carousel-nav{
  display:none;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:16px;
  margin-top:12px;
}
.agenda-carousel-btn{
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s, border-color 0.2s, color 0.2s;
  flex-shrink:0;
}
.agenda-carousel-btn:hover{
  background:rgba(255,255,255,0.06);
  border-color:var(--accent1);
  color:var(--accent1);
}
.agenda-carousel-btn:disabled{
  opacity:0.4;
  cursor:not-allowed;
}
.agenda-carousel-dots{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  flex-wrap:wrap;
}
.agenda-carousel-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:none;
  padding:0;
  background:var(--border);
  cursor:pointer;
  transition:background 0.2s, transform 0.2s;
}
.agenda-carousel-dot:hover{
  background:var(--text-secondary);
}
.agenda-carousel-dot.active{
  background:var(--accent1);
  transform:scale(1.25);
}

@media(max-width:767px){
  /* Faixa de datas em 7 colunas no mobile */
  #tab-agenda-dia .agenda-date-strip{
    display:grid;
    grid-template-columns:repeat(7, 1fr);
    gap:16px;
  }
  #tab-agenda-dia .agenda-date-btn{
    min-width:0;
    padding:8px 8px;
  }
  #tab-agenda-dia .agenda-date-dow{
    font-size:10px;
  }
  #tab-agenda-dia .agenda-date-num{
    font-size:14px;
  }
  #tab-agenda-dia .agenda-columns{
    overflow-x:auto;
    overflow-y:hidden;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  #tab-agenda-dia .agenda-columns::-webkit-scrollbar{
    display:none;
  }
  #tab-agenda-dia .agenda-columns .agenda-prof-column{
    flex:0 0 100%;
    min-width:100%;
    max-width:100%;
    scroll-snap-align:start;
  }
  /* Cabeçalho do barbeiro fixo ao rolar */
  #tab-agenda-dia .agenda-prof-header{
    position:sticky;
    top:0;
    z-index:6;
    background:var(--card);
    box-shadow:0 2px 8px rgba(0,0,0,0.15);
  }
  #tab-agenda-dia .agenda-carousel-nav.multi-barber{
    display:flex;
  }
  /* Linha da hora atual visível no carrossel mobile */
  #tab-agenda-dia .agenda-now-line{
    z-index:5;
    left:0;
    right:0;
  }
}

/* Card sections */
.card-section{
  background:var(--card);
  border-radius:16px;
  padding:20px;
  border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,0.05);
  transition:box-shadow 0.2s ease, border-color 0.2s;
}
.card-section:hover{
  border-color:rgba(255,122,0,0.2);
  box-shadow:0 4px 16px rgba(0,0,0,0.1);
}
.card-section h3{
  font-size:16px;
  margin-bottom:16px;
  color:var(--accent1);
  display:flex;
  align-items:center;
  gap:0.5rem;
}

/* ====== Dashboard Tab Hero (genérico) ====== */
.dash-hero{
  text-align:center;
  padding:2rem 1.5rem;
  margin-bottom:2rem;
  border-radius:var(--radius);
  position:relative;
  overflow:hidden;
}
.dash-hero-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:52px;
  height:52px;
  margin-bottom:1rem;
  border-radius:14px;
  color:#fff;
  font-size:1.4rem;
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
}
.dash-hero h2{
  font-size:1.45rem;
  font-weight:700;
  margin-bottom:0.5rem;
  color:var(--text-primary);
}
.dash-hero p{
  color:var(--text-secondary);
  font-size:0.95rem;
  max-width:520px;
  margin:0 auto;
  line-height:1.5;
}
.dash-hero--relatorio{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.045) 0%, transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent1) 16%, transparent), color-mix(in srgb, var(--accent1) 5%, transparent));
  border:1px solid color-mix(in srgb, var(--accent1) 28%, transparent);
  box-shadow:0 20px 40px -24px color-mix(in srgb, var(--accent1) 45%, transparent);
}
.dash-hero--relatorio .dash-hero-icon{background:linear-gradient(135deg,var(--accent1),color-mix(in srgb, var(--accent1) 70%, #fff));}
.dash-hero--clientes{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(59,130,246,0.14), rgba(96,165,250,0.06));
  border:1px solid color-mix(in srgb, #3b82f6 32%, transparent);
  box-shadow:0 20px 44px -26px rgba(59,130,246,0.45);
}
.dash-hero--clientes .dash-hero-icon{background:linear-gradient(135deg,#2563eb,#60a5fa);}
.dash-hero--funcionarios{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(20,184,166,0.16), rgba(45,212,191,0.07));
  border:1px solid color-mix(in srgb, #14b8a6 32%, transparent);
  box-shadow:0 20px 44px -26px color-mix(in srgb, #14b8a6 42%, transparent);
}
.dash-hero--funcionarios .dash-hero-icon{background:linear-gradient(135deg,#0d9488,#2dd4bf);}
.dash-hero--verificar{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(99,102,241,0.16), rgba(129,140,248,0.07));
  border:1px solid color-mix(in srgb, #6366f1 32%, transparent);
  box-shadow:0 20px 44px -26px color-mix(in srgb, #6366f1 42%, transparent);
}
.dash-hero--verificar .dash-hero-icon{background:linear-gradient(135deg,#4f46e5,#818cf8);}
.dash-hero--localizacao{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(239,68,68,0.12), rgba(248,113,113,0.06));
  border:1px solid color-mix(in srgb, #ef4444 30%, transparent);
  box-shadow:0 20px 44px -26px color-mix(in srgb, #ef4444 38%, transparent);
}
.dash-hero--localizacao .dash-hero-icon{background:linear-gradient(135deg,#dc2626,#f87171);}
.dash-hero--servicos{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.045) 0%, transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent1) 16%, transparent), color-mix(in srgb, var(--accent1) 5%, transparent));
  border:1px solid color-mix(in srgb, var(--accent1) 28%, transparent);
  box-shadow:0 20px 40px -24px color-mix(in srgb, var(--accent1) 45%, transparent);
}
.dash-hero--servicos .dash-hero-icon{background:linear-gradient(135deg,var(--accent1),color-mix(in srgb, var(--accent1) 72%, #fb923c));}
.dash-hero--estoque{
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(34,197,94,0.15), rgba(74,222,128,0.07));
  border:1px solid color-mix(in srgb, #22c55e 32%, transparent);
  box-shadow:0 20px 44px -26px color-mix(in srgb, #22c55e 38%, transparent);
}
.dash-hero--estoque .dash-hero-icon{background:linear-gradient(135deg,#16a34a,#4ade80);}

/* ====== Aba Perfil (estabelecimento e funcionário) ====== */
#tab-perfil,
#tab-perfil-barber {
  padding-bottom: 2rem;
}

.perfil-tab-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.perfil-hero {
  text-align: center;
  padding: 2.1rem 1.6rem 1.85rem;
  margin-bottom: 1.35rem;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 40%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent1) 14%, transparent) 0%, color-mix(in srgb, var(--accent2, var(--accent1)) 9%, transparent) 50%, transparent 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 24px 48px -28px color-mix(in srgb, var(--accent1) 50%, transparent);
}

.perfil-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 75% 55% at 50% -25%, color-mix(in srgb, var(--accent1) 20%, transparent), transparent 72%);
  pointer-events: none;
}

.perfil-hero-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.32rem 0.8rem;
  margin-bottom: 0.85rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.perfil-hero-badge i {
  font-size: 0.82rem;
  color: var(--accent1);
}

.perfil-hero .dash-hero-icon {
  position: relative;
  z-index: 1;
  width: 60px;
  height: 60px;
  margin-bottom: 0.85rem;
  border-radius: 18px;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 82%, #222));
  box-shadow:
    0 4px 22px color-mix(in srgb, var(--accent1) 42%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.22) inset;
}

.perfil-hero h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.32rem, 2.4vw, 1.62rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.45rem 0;
  color: var(--text-primary);
}

.perfil-hero p {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 0.94rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.55;
}

#tab-perfil .perfil-section-card,
#tab-perfil-barber .perfil-section-card {
  border-radius: 18px;
  padding: 1.45rem 1.55rem;
  margin-top: 0;
  margin-bottom: 1.15rem;
  border: 1px solid var(--border);
  background: var(--card);
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#tab-perfil .perfil-section-card:hover,
#tab-perfil-barber .perfil-section-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 22%, var(--border));
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.14);
}

#tab-perfil .perfil-section-card > h3,
#tab-perfil-barber .perfil-section-card > h3 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0 0 0.35rem 0;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

#tab-perfil .perfil-section-card > h3 i,
#tab-perfil-barber .perfil-section-card > h3 i {
  color: var(--accent1);
  margin-right: 0.35rem;
}

.perfil-section-lead {
  margin: 0 0 1.1rem 0 !important;
  font-size: 0.9rem !important;
  line-height: 1.5;
  max-width: 720px;
}

.btn-perfil-primary {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.72rem 1.35rem;
  border-radius: 12px;
  font-weight: 600;
  font-size: 0.92rem;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 85%, #000));
  border: none;
  color: #fff !important;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--accent1) 35%, transparent);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

.btn-perfil-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 10px 26px color-mix(in srgb, var(--accent1) 42%, transparent);
  color: #fff !important;
}

#tab-perfil .theme-color-section.perfil-section-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent1) 6%, var(--card)), var(--card));
}

#tab-perfil .theme-color-section .theme-color-preview {
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 2px solid rgba(255, 255, 255, 0.1);
}

#tab-perfil .theme-segment-card {
  border-radius: 14px;
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

#tab-perfil .theme-segment-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 40%, transparent);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#tab-perfil .dashboard-reviews-section.perfil-section-card .dashboard-reviews-summary {
  padding: 14px 16px;
  margin-bottom: 16px;
  background: var(--panel);
  border-radius: 14px;
  border: 1px solid var(--border);
}

#tab-perfil .dashboard-review-card {
  border-radius: 14px;
  padding: 1rem 1.15rem;
  transition: border-color 0.2s ease;
}

#tab-perfil .dashboard-review-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 18%, var(--border));
}

#tab-perfil .perfil-hours-card .hours-by-day-header {
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent1) 8%, var(--panel));
  border-color: color-mix(in srgb, var(--accent1) 15%, var(--border));
}

#tab-perfil .perfil-hours-card .hours-by-day-row {
  padding: 10px 4px;
}

#tab-perfil .perfil-hours-card .hours-period-inputs,
#tab-perfil .perfil-hours-card .hours-col-period {
  border-radius: 12px;
}

#tab-perfil .profile-info-section.perfil-section-card .profile-info-display-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

#tab-perfil .profile-info-section.perfil-section-card .profile-info-email-display {
  margin-bottom: 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s ease;
}

#tab-perfil .profile-info-section.perfil-section-card .profile-info-email-display:hover {
  border-color: color-mix(in srgb, var(--accent1) 22%, var(--border));
}

#tab-perfil .profile-info-section.perfil-section-card .profile-info-email-display label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

#tab-perfil .profile-info-section.perfil-section-card .profile-info-email-value {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--text-primary);
  word-break: break-word;
}

.perfil-info-actions-row {
  margin-top: 1.1rem !important;
  padding-top: 1.1rem !important;
  border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.perfil-owner-services-block {
  margin-top: 1.35rem !important;
  padding-top: 1.25rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.1);
}

.perfil-subsection-title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 8px 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: var(--text-primary);
}

.perfil-subsection-title i {
  color: var(--accent1);
}

.perfil-subsection-desc {
  font-size: 0.86rem !important;
  margin-bottom: 14px !important;
  line-height: 1.45;
}

#tab-perfil .profile-upload-images-section.perfil-section-card .profile-upload-image-field {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent1) 12%, var(--border));
  background: linear-gradient(165deg, color-mix(in srgb, var(--accent1) 5%, transparent), var(--panel));
  border-radius: 16px;
  padding: 16px;
}

#tab-perfil .profile-upload-preview {
  border-radius: 14px;
  min-height: 120px;
}

.perfil-danger-zone {
  background: linear-gradient(145deg, rgba(239, 68, 68, 0.08), rgba(239, 68, 68, 0.02)) !important;
  border-color: rgba(239, 68, 68, 0.28) !important;
}

.perfil-danger-zone:hover {
  border-color: rgba(239, 68, 68, 0.4) !important;
}

.perfil-danger-zone-header {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.1rem;
}

.perfil-danger-zone-header > i {
  font-size: 1.65rem;
  color: #f87171;
  flex-shrink: 0;
  margin-top: 2px;
}

.perfil-danger-zone-header h3 {
  margin: 0 0 0.35rem 0 !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
  font-size: 1.02rem !important;
  color: var(--text-primary) !important;
  display: block !important;
}

.perfil-danger-zone-header p {
  margin: 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

/* Perfil funcionário */
#tab-perfil-barber .profile-info-display-list--barber {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

#tab-perfil-barber .profile-info-display-list--barber .profile-info-email-display {
  margin-bottom: 0;
  padding: 14px 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 14px;
}

#tab-perfil-barber .profile-info-display-list--barber label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.perfil-barber-hint {
  margin-top: 1rem !important;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--accent1) 8%, transparent);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent1) 18%, transparent);
  font-size: 0.86rem !important;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.perfil-barber-hint i {
  color: var(--accent1);
  margin-top: 2px;
  flex-shrink: 0;
}

.perfil-barber-photo-preview {
  margin-top: 16px;
  display: flex;
  justify-content: flex-start;
}

.perfil-barber-photo-img {
  max-width: 200px;
  max-height: 200px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--border);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25), 0 0 0 1px color-mix(in srgb, var(--accent1) 25%, transparent);
}

.perfil-barber-photo-placeholder {
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 80%, #333));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  border: 4px solid var(--border);
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent1) 35%, transparent);
  text-align: center;
  padding: 12px;
  line-height: 1.1;
  word-break: break-word;
}

@media (max-width: 600px) {
  .perfil-hero {
    padding: 1.65rem 1.2rem;
    border-radius: 16px;
  }
  #tab-perfil .profile-info-section.perfil-section-card .profile-info-display-list {
    grid-template-columns: 1fr;
  }
  .perfil-danger-zone-header {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* Plan upgrade blocked - estilizado */
.plan-upgrade-blocked-msg{
  border-radius:18px;
  padding:2.75rem 2rem;
  text-align:center;
  background:
    linear-gradient(165deg, rgba(255,255,255,0.04) 0%, transparent 50%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent1) 12%, transparent), color-mix(in srgb, var(--accent1) 4%, transparent));
  border:1px solid color-mix(in srgb, var(--accent1) 30%, transparent);
  box-shadow:0 16px 40px -24px color-mix(in srgb, var(--accent1) 40%, transparent);
}
.plan-upgrade-blocked-msg__icon{
  font-size:2.85rem;
  margin-bottom:1rem;
  color:var(--accent1);
  line-height:1;
}
.plan-upgrade-blocked-msg__title{
  font-size:1.15rem;
  font-weight:700;
  color:var(--text-primary);
  margin:0 0 0.5rem;
}
.plan-upgrade-blocked-msg__lead{
  max-width:420px;
  margin:0 auto 1.25rem;
  line-height:1.5;
  font-size:0.95rem;
}
.plan-upgrade-blocked-msg__cta{
  margin-top:0.25rem;
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-weight:600;
}
.plan-upgrade-blocked-msg h3{font-size:1.1rem;color:var(--text-primary);margin-bottom:0.5rem;}

/* Abas dashboard: layout em coluna só quando ativas (evita conflito com .tab-content{display:none}) */
.tab-content.localizacao-tab.active,
.tab-content.servicos-tab.active,
.tab-content.estoque-tab.active,
.tab-content.fidelidade-tab.active,
.tab-content.indicacao-tab.active,
.tab-content.robo-tab.active,
.tab-content.verificar-ponto-tab.active{
  display:flex;
  flex-direction:column;
  gap:1.25rem;
}
.localizacao-tab,.servicos-tab,.estoque-tab,.fidelidade-tab,.indicacao-tab,.robo-tab,.verificar-ponto-tab{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
  padding-bottom:0.5rem;
}

/* Cabeçalho de seção (cards das abas) */
.dash-section-head{
  margin-bottom:1rem;
  padding-bottom:0.85rem;
  border-bottom:1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.dash-section-head h3{
  margin:0 0 0.35rem;
  font-size:1.05rem;
  display:flex;
  align-items:center;
  gap:0.5rem;
  color:var(--accent1);
}
.dash-section-desc{
  margin:0;
  font-size:0.8125rem;
  line-height:1.45;
  max-width:40rem;
  color:var(--text-secondary);
}

/* Localização */
.localizacao-panels{
  display:grid;
  grid-template-columns:1fr;
  gap:1.25rem;
}
@media (min-width:900px){
  .localizacao-panels{
    grid-template-columns:1fr 1fr;
    align-items:start;
  }
}
.localizacao-panel{
  padding:1.35rem 1.5rem;
}
.localizacao-address-form{
  max-width:none;
  margin-bottom:0;
}
.localizacao-status-line,.localizacao-gps-status{
  margin-top:0.75rem;
  margin-bottom:0.25rem;
  font-size:0.875rem;
}
.localizacao-btn-primary,.localizacao-btn-gps{
  margin-top:0.75rem;
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
}
.localizacao-success-banner{
  display:none;
  align-items:center;
  gap:0.65rem;
  padding:0.9rem 1.1rem;
  border-radius:12px;
  border:1px solid color-mix(in srgb, #22c55e 35%, var(--border));
  background:color-mix(in srgb, #22c55e 10%, var(--card));
  color:var(--text-primary);
  font-size:0.9rem;
}
.localizacao-success-banner i{
  color:#4ade80;
  font-size:1.15rem;
  flex-shrink:0;
}

/* Verificar ponto */
.verificar-ponto-toolbar{
  padding:1.35rem 1.5rem;
}
.verificar-ponto-head{
  margin-bottom:1rem;
}
.verificar-ponto-filters{
  display:flex;
  flex-wrap:wrap;
  gap:1rem 1.25rem;
  align-items:flex-end;
}
.verificar-ponto-field label{
  display:block;
  margin-bottom:6px;
  font-size:0.68rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.07em;
  color:var(--text-secondary);
}
.verificar-ponto-field input,
.verificar-ponto-field select{
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:12px;
  background:color-mix(in srgb, var(--card) 92%, transparent);
  color:var(--text-primary);
  font-size:0.9rem;
  min-width:180px;
}
.verificar-ponto-buscar-btn{
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
  font-weight:600;
  padding:10px 18px;
  border-radius:12px;
}
.verificar-ponto-results-card{
  padding:0;
  overflow:hidden;
}
.verificar-ponto-list-inner{
  padding:1rem 1.25rem 1.25rem;
  overflow-x:auto;
  min-height:100px;
}
.verificar-ponto-placeholder{
  text-align:center;
  padding:2rem 1rem;
  margin:0;
  line-height:1.5;
}
.verificar-ponto-table-wrap-inner{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}
.verificar-ponto-data-table{
  margin:0;
  min-width:560px;
}
.verificar-ponto-tipo-badge{
  display:inline-flex;
  align-items:center;
  padding:0.25rem 0.6rem;
  border-radius:999px;
  font-size:0.7rem;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
}
.verificar-ponto-tipo-badge--in{
  background:color-mix(in srgb, #22c55e 16%, transparent);
  border:1px solid color-mix(in srgb, #22c55e 35%, transparent);
  color:#86efac;
}
.verificar-ponto-tipo-badge--out{
  background:color-mix(in srgb, #94a3b8 14%, transparent);
  border:1px solid color-mix(in srgb, #94a3b8 30%, transparent);
  color:#cbd5e1;
}

/* Serviços (aba) */
.servicos-section-card{
  padding:1.35rem 1.5rem;
}
.servicos-category-form{
  margin-bottom:0;
}
.servicos-category-form-row{
  display:flex;
  flex-wrap:wrap;
  align-items:flex-end;
  gap:0.75rem 1rem;
}
.servicos-category-field{
  flex:1;
  min-width:200px;
}
.servicos-category-field label{
  display:block;
  margin-bottom:6px;
  font-size:0.75rem;
  font-weight:600;
  color:var(--muted);
}
.servicos-btn-add-cat{
  display:inline-flex;
  align-items:center;
  gap:0.35rem;
}
.servicos-categories-list{
  margin-top:1rem;
}
.servicos-estoque-panel{
  margin-top:1.25rem;
  padding:1rem 1.15rem;
  border-radius:14px;
  border:1px solid var(--border);
  background:color-mix(in srgb, var(--panel) 88%, transparent);
}
.servicos-estoque-toggle{
  display:flex;
  align-items:center;
  gap:0.65rem;
  cursor:pointer;
  font-size:0.9rem;
  font-weight:500;
  color:var(--text-primary);
}
.servicos-estoque-fields{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  gap:0.75rem;
}
.servicos-estoque-field label{
  display:block;
  margin-bottom:6px;
  font-size:0.75rem;
  font-weight:600;
  color:var(--muted);
}
.servicos-estoque-select{
  width:100%;
  max-width:320px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
}
.servicos-qty-input{
  width:120px;
  padding:10px 12px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
}
.servicos-submit-service{
  margin-top:1.25rem;
  display:inline-flex;
  align-items:center;
  gap:0.45rem;
}

.fidelidade-tab .fidelidade-hero{
  margin-bottom:1.25rem;
}
.fidelidade-tab .fidelidade-card:last-child{
  margin-bottom:0;
}
.indicacao-tab .indicacao-hero,
.robo-tab .robo-hero{
  margin-bottom:1.25rem;
}
.indicacao-tab .indicacao-card:last-child,
.robo-tab .robo-card:last-child{
  margin-bottom:0;
}
.estoque-tab .report-table-wrap.estoque-table-wrap{
  border-radius:14px;
  overflow:hidden;
  border:1px solid var(--border);
}
.barber-limit-info{
  padding:1rem 1.25rem;
  border-radius:12px;
  background:rgba(20,184,166,0.08);
  border:1px solid rgba(20,184,166,0.25);
  font-size:0.9rem;
}
.barber-limit-info i{color:#14b8a6;margin-right:0.5rem;}

/* ====== Aba Clientes ====== */
/* display:flex só quando ativa: senão empata com .tab-content{display:none} e a aba fica sempre visível */
.tab-content.clientes-tab.active {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.clientes-tab {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0.5rem;
}
.clientes-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.clientes-list-heading {
  margin-bottom: 0.85rem;
}
.clientes-card-heading h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent1);
}
.clientes-card-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 36rem;
}
.clientes-form-card {
  padding: 1.35rem 1.5rem;
}
.clientes-form-card.profile-info-section h3 {
  margin-bottom: 0.35rem;
  padding-bottom: 0;
  border-bottom: none;
}
.clientes-create-form .clientes-form-fields-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-bottom: 0.25rem;
}
@media (min-width: 768px) {
  .clientes-create-form .clientes-form-fields-row {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem 1.1rem;
  }
}
.clientes-form-actions {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.clientes-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
}
.clientes-list-card {
  padding: 1.35rem 1.5rem;
}
.clientes-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.clientes-search-wrap:focus-within {
  border-color: color-mix(in srgb, #3b82f6 40%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, #3b82f6 18%, transparent);
}
.clientes-search-wrap i {
  color: var(--muted);
  font-size: 1rem;
  flex-shrink: 0;
}
.clientes-search-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}
.clientes-search-wrap input::placeholder {
  color: var(--muted);
}

.clients-table-section .clients-table-wrapper {
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 97%, transparent);
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
}
.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8125rem;
}
.clients-table thead tr {
  background: color-mix(in srgb, #3b82f6 12%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
.clients-table th {
  padding: 0.85rem 1rem;
  text-align: left;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-primary);
  white-space: nowrap;
}
.clients-th-num { text-align: center; }
.clients-table th.clients-table-actions {
  text-align: right;
}
.clients-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 72%, transparent);
  vertical-align: middle;
}
.clients-table tbody tr {
  transition: background 0.15s ease;
}
.clients-table tbody tr:hover {
  background: color-mix(in srgb, #3b82f6 7%, transparent);
}
.clients-table-row.clients-row-hidden {
  display: none !important;
}
.clients-name-cell {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}
.clients-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: #fff;
  background: linear-gradient(145deg, #3b82f6, #60a5fa);
  box-shadow: 0 3px 10px rgba(37, 99, 235, 0.35);
}
.clients-name-text {
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clients-table-name { min-width: 140px; }
.clients-table-email,
.clients-table-phone {
  color: var(--text-secondary);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.clients-table-agendas {
  text-align: center;
}
.clients-visit-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-size: 0.75rem;
  background: color-mix(in srgb, var(--accent1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent1) 28%, transparent);
  color: var(--accent1);
}
.clients-table-last {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.clients-table-actions {
  width: 108px;
  text-align: right;
}
.clients-actions-btns {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  align-items: center;
}
.btn-client-action {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: #60a5fa;
  border-radius: 10px;
  cursor: pointer;
  transition: color 0.18s, background 0.18s, border-color 0.18s, transform 0.12s ease;
}
.btn-client-action:hover {
  color: #93c5fd;
  background: color-mix(in srgb, #3b82f6 14%, var(--card));
  border-color: color-mix(in srgb, #3b82f6 35%, var(--border));
}
.btn-client-action:active { transform: scale(0.96); }
.btn-client-action i { font-size: 1rem; pointer-events: none; }
.btn-client-delete--danger {
  color: #f87171;
  border-color: color-mix(in srgb, #ef4444 22%, var(--border));
}
.btn-client-delete--danger:hover {
  color: #fca5a5;
  background: color-mix(in srgb, #ef4444 12%, var(--card));
  border-color: color-mix(in srgb, #ef4444 35%, var(--border));
}
.clients-table-empty {
  text-align: center;
  color: var(--muted);
  padding: 2.75rem 1.25rem !important;
  font-size: 0.9rem;
  line-height: 1.5;
}

.clientes-edit-modal {
  border-radius: 18px;
  border: 1px solid color-mix(in srgb, var(--border) 90%, #3b82f6);
  box-shadow:
    0 24px 48px rgba(0, 0, 0, 0.35),
    0 0 0 1px rgba(255, 255, 255, 0.04) inset;
}
.clientes-modal-header {
  align-items: flex-start;
  margin-bottom: 1rem;
}
.clientes-modal-header > div:first-child {
  flex: 1;
  min-width: 0;
}
.clientes-modal-header h3 {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.15rem;
  color: var(--text-primary);
}
.modal-card.clientes-edit-modal .clientes-modal-header h3 {
  margin: 0;
}
.clientes-modal-lead {
  margin: 0.4rem 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  line-height: 1.4;
}
.clientes-edit-form .profile-info-field:last-of-type {
  margin-bottom: 0;
}
.clientes-modal-actions {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem;
  justify-content: flex-end;
}

@media (max-width: 900px) {
  .clientes-list-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .clientes-search-wrap {
    max-width: none;
  }
}
@media (max-width: 640px) {
  .clients-table th,
  .clients-table td {
    padding: 0.65rem 0.75rem;
    font-size: 0.78rem;
  }
  .clients-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.65rem;
  }
  .clients-actions-btns { gap: 4px; }
  .btn-client-action {
    width: 34px;
    height: 34px;
  }
  .clients-table-email,
  .clients-table-phone {
    max-width: 120px;
  }
}

/* ====== Aba Funcionários (#tab-barbeiros) ====== */
.tab-content.funcionarios-tab.active {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.funcionarios-tab {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-bottom: 0.5rem;
}
.funcionarios-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 85%, transparent);
}
.funcionarios-list-heading {
  margin-bottom: 0.85rem;
}
.funcionarios-card-heading h3 {
  margin: 0 0 0.35rem;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--accent1);
}
.funcionarios-card-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 36rem;
}
.funcionarios-form-card.profile-info-section h3 {
  margin-bottom: 0.35rem;
  padding-bottom: 0;
  border-bottom: none;
}
.funcionarios-form-card {
  padding: 1.35rem 1.5rem;
}
#tab-barbeiros .funcionarios-form-card.profile-info-section {
  padding: 1.35rem 1.5rem;
}
.funcionarios-limit-banner {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.1rem;
  padding: 0.85rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, #14b8a6 8%, var(--card));
  font-size: 0.875rem;
  color: var(--text-primary);
  line-height: 1.45;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.funcionarios-limit-banner #barber-limit-text {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}
.funcionarios-limit-banner #barber-limit-text > i {
  flex-shrink: 0;
  margin-top: 0.12rem;
  color: #14b8a6;
}
.funcionarios-limit-banner--at-limit {
  background: color-mix(in srgb, var(--accent1) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent1) 38%, var(--border));
}
.funcionarios-limit-banner--at-limit #barber-limit-text > i {
  color: var(--accent1);
}
.funcionarios-form-row--triple {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 900px) {
  .funcionarios-form-row--triple {
    grid-template-columns: repeat(3, 1fr);
  }
}
.funcionarios-form-row--double {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}
@media (min-width: 640px) {
  .funcionarios-form-row--double {
    grid-template-columns: repeat(2, 1fr);
  }
}
.funcionarios-form-actions {
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.funcionarios-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  padding: 0.65rem 1.25rem;
  border-radius: 12px;
}
.funcionarios-list-card {
  padding: 1.35rem 1.5rem;
}
#tab-barbeiros .funcionarios-list-card.employees-list-section {
  padding: 1.35rem 1.5rem;
}
#tab-barbeiros .funcionarios-list-card.employees-list-section > .funcionarios-card-heading h3 {
  margin-bottom: 0.35rem;
  padding-bottom: 0;
  border-bottom: none;
}
.funcionarios-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex: 1;
  min-width: 220px;
  max-width: 320px;
  padding: 0.55rem 0.85rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 92%, transparent);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.funcionarios-search-wrap:focus-within {
  border-color: color-mix(in srgb, #14b8a6 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, #14b8a6 16%, transparent);
}
.funcionarios-search-wrap i {
  color: var(--muted);
  font-size: 1rem;
  flex-shrink: 0;
}
.funcionarios-search-wrap input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}
.funcionarios-search-wrap input::placeholder {
  color: var(--muted);
}

#tab-barbeiros .funcionarios-employee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: 1rem;
  margin-top: 0.25rem;
}
#tab-barbeiros .funcionarios-employee-card {
  flex-direction: column;
  align-items: stretch;
  padding: 1.15rem 1.2rem;
  background: color-mix(in srgb, var(--card) 96%, transparent);
  border-radius: 16px;
  border: 1px solid var(--border);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
#tab-barbeiros .funcionarios-employee-card:hover {
  border-color: color-mix(in srgb, #14b8a6 28%, var(--border));
  box-shadow: 0 12px 28px -20px color-mix(in srgb, #14b8a6 35%, transparent);
}
#tab-barbeiros .employee-item--paused {
  opacity: 0.92;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--border) 90%, #64748b);
}
.funcionarios-employee-header {
  align-items: flex-start;
  gap: 0.85rem;
}
#tab-barbeiros .funcionarios-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  box-shadow: 0 4px 14px rgba(20, 184, 166, 0.25);
}
#tab-barbeiros .employee-photo {
  border-radius: 14px;
}
#tab-barbeiros .employee-avatar-placeholder {
  border-radius: 14px;
  font-size: 1rem;
  background: linear-gradient(145deg, #0d9488, #5eead4);
}
.funcionarios-employee-title {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0;
}
#tab-barbeiros .employee-name {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.employee-status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  width: fit-content;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.employee-status i {
  font-size: 0.75rem;
}
.employee-status--active {
  background: color-mix(in srgb, #22c55e 16%, transparent);
  border: 1px solid color-mix(in srgb, #22c55e 35%, transparent);
  color: #86efac;
}
.employee-status--paused {
  background: color-mix(in srgb, #94a3b8 14%, transparent);
  border: 1px solid color-mix(in srgb, #94a3b8 30%, transparent);
  color: #cbd5e1;
}
.funcionarios-employee-meta {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.75rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 75%, transparent);
}
#tab-barbeiros .employee-detail {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.5rem;
  font-size: 0.8125rem;
}
#tab-barbeiros .employee-detail-label {
  min-width: 4.5rem;
  margin-right: 0;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}
.employee-detail-value {
  color: var(--text-primary);
  word-break: break-word;
}
.funcionarios-commission-pill {
  display: inline-flex;
  padding: 0.15rem 0.55rem;
  border-radius: 8px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-size: 0.8125rem;
  background: color-mix(in srgb, var(--accent1) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent1) 28%, transparent);
  color: var(--accent1);
}
#tab-barbeiros .funcionarios-employee-actions {
  margin-top: 1rem;
  padding-top: 0.85rem;
  border-top: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: flex-start;
}
#tab-barbeiros .btn-func {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.45rem 0.75rem;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 88%, transparent);
  color: var(--text-primary);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
#tab-barbeiros .btn-func i {
  font-size: 0.85rem;
  pointer-events: none;
}
#tab-barbeiros .btn-func--edit {
  border-color: color-mix(in srgb, #14b8a6 32%, var(--border));
  color: #5eead4;
  background: color-mix(in srgb, #14b8a6 10%, var(--card));
}
#tab-barbeiros .btn-func--edit:hover {
  background: color-mix(in srgb, #14b8a6 18%, var(--card));
  border-color: color-mix(in srgb, #14b8a6 45%, var(--border));
}
#tab-barbeiros .btn-func--ghost {
  background: transparent;
  color: var(--text-secondary);
}
#tab-barbeiros .btn-func--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
}
#tab-barbeiros .btn-func--toggle {
  color: #fcd34d;
  border-color: color-mix(in srgb, #eab308 28%, var(--border));
  background: color-mix(in srgb, #eab308 8%, transparent);
}
#tab-barbeiros .btn-func--toggle:hover {
  background: color-mix(in srgb, #eab308 14%, transparent);
}
#tab-barbeiros .btn-func--danger {
  color: #f87171;
  border-color: color-mix(in srgb, #ef4444 25%, var(--border));
  background: color-mix(in srgb, #ef4444 8%, transparent);
  margin-left: auto;
}
#tab-barbeiros .btn-func--danger:hover {
  background: color-mix(in srgb, #ef4444 14%, transparent);
}
.funcionarios-empty-state,
.funcionarios-no-match {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2.5rem 1.25rem;
  border-radius: 14px;
  border: 1px dashed color-mix(in srgb, var(--border) 85%, transparent);
  background: rgba(255, 255, 255, 0.02);
}
.funcionarios-card-hidden {
  display: none !important;
}
@media (max-width: 900px) {
  .funcionarios-list-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .funcionarios-search-wrap {
    max-width: none;
  }
  #tab-barbeiros .btn-func--danger {
    margin-left: 0;
  }
}
@media (max-width: 640px) {
  #tab-barbeiros .funcionarios-employee-actions {
    flex-direction: column;
    align-items: stretch;
  }
  #tab-barbeiros .btn-func--danger {
    margin-left: 0;
  }
}

.employee-item,.client-item-with-stats{
  padding:1rem 1.25rem;
  border-radius:12px;
  border:1px solid var(--border);
  transition:border-color 0.2s;
}
.employee-item:hover,.client-item-with-stats:hover{border-color:rgba(255,122,0,0.25);}
.report-filter-section{padding:1.25rem 1.5rem;border-radius:var(--radius);}
.estoque-actions{padding:1rem 0;margin-bottom:1rem;}
.estoque-actions .btn-primary{background:linear-gradient(135deg,var(--accent1),var(--accent2));border:none;box-shadow:0 4px 12px rgba(255,122,0,0.25);}
.estoque-actions .btn-primary:hover{box-shadow:0 6px 16px rgba(255,122,0,0.35);}

/* ====== Plano Fidelidade ====== */
.fidelidade-hero {
  text-align: center;
  padding: 2.1rem 1.6rem;
  margin-bottom: 2rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    linear-gradient(135deg, color-mix(in srgb, var(--accent1) 14%, transparent), color-mix(in srgb, #9f8ced 10%, transparent));
  border: 1px solid color-mix(in srgb, var(--accent1) 28%, transparent);
  border-radius: 18px;
  box-shadow: 0 20px 44px -28px color-mix(in srgb, var(--accent1) 45%, transparent);
  position: relative;
  overflow: hidden;
}
.fidelidade-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.fidelidade-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border-radius: 16px;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(255, 122, 0, 0.35);
}
.fidelidade-hero h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.fidelidade-hero p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

.fidelidade-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.fidelidade-card:hover {
  border-color: rgba(255, 122, 0, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.fidelidade-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.fidelidade-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(255, 122, 0, 0.15);
  border-radius: 12px;
  color: var(--accent1);
  font-size: 1.25rem;
}
.fidelidade-card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}
.fidelidade-card-header p {
  font-size: 0.875rem;
  margin: 0;
}

.fidelidade-config-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
@media (max-width: 700px) {
  .fidelidade-config-grid {
    grid-template-columns: 1fr;
  }
}
.fidelidade-config-item {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.fidelidade-toggle-wrap {
  gap: 0.75rem;
}
.fidelidade-toggle-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.fidelidade-toggle-row .fidelidade-hint {
  flex: 1;
  min-width: 180px;
}
.fidelidade-label {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text-primary);
}
.fidelidade-hint {
  font-size: 0.8rem;
  color: var(--muted);
}

/* Toggle switch */
.fidelidade-switch {
  position: relative;
  display: inline-block;
  width: 52px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
}
.fidelidade-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.fidelidade-switch-slider {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid var(--border);
  border-radius: 28px;
  transition: 0.3s;
}
.fidelidade-switch-slider::before {
  content: '';
  position: absolute;
  height: 22px;
  width: 22px;
  left: 2px;
  bottom: 2px;
  background: var(--muted);
  border-radius: 50%;
  transition: 0.3s;
}
.fidelidade-switch input:checked + .fidelidade-switch-slider {
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border-color: var(--accent1);
  box-shadow: 0 0 12px rgba(255, 122, 0, 0.4);
}
.fidelidade-switch input:checked + .fidelidade-switch-slider::before {
  transform: translateX(24px);
  background: #fff;
}
.fidelidade-switch input:disabled + .fidelidade-switch-slider {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Threshold input */
.fidelidade-threshold-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 180px;
}
.fidelidade-threshold-input {
  width: 80px;
  padding: 0.65rem 0.9rem;
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-primary);
  transition: border-color 0.2s;
}
.fidelidade-threshold-input:focus {
  outline: none;
  border-color: var(--accent1);
  box-shadow: 0 0 0 3px rgba(255, 122, 0, 0.15);
}
.fidelidade-threshold-input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.fidelidade-threshold-suffix {
  font-size: 0.9rem;
  color: var(--muted);
  font-weight: 500;
}

/* Services grid */
.loyalty-barbers-wrap {
  padding: 1rem 1.25rem;
}
.loyalty-barbers-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.loyalty-barbers-chips .loyalty-barber-chip {
  margin: 0;
}

.loyalty-services-grid {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.loyalty-services-category {
  padding: 1.25rem;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--border);
  border-radius: 14px;
  transition: border-color 0.2s;
}
.loyalty-services-category:hover {
  border-color: rgba(255, 122, 0, 0.2);
}
.loyalty-category-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 1rem 0;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.loyalty-services-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.loyalty-service-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}
.loyalty-service-chip:hover {
  background: rgba(255, 255, 255, 0.07);
  border-color: rgba(255, 122, 0, 0.3);
}
.loyalty-service-chip input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.loyalty-chip-text {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.loyalty-chip-check {
  font-size: 1rem;
  color: var(--accent1);
  opacity: 0;
  transition: opacity 0.2s;
}
.loyalty-service-chip input:checked ~ .loyalty-chip-check {
  opacity: 1;
}
.loyalty-service-chip input:checked ~ .loyalty-chip-text {
  color: var(--accent1);
  font-weight: 600;
}
.loyalty-service-chip:has(input:checked) {
  background: rgba(255, 122, 0, 0.12);
  border-color: rgba(255, 122, 0, 0.4);
}
.loyalty-service-chip:has(input:disabled) {
  opacity: 0.5;
  cursor: not-allowed;
}

.fidelidade-actions {
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.btn-fidelidade-save {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.3);
}
.btn-fidelidade-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
}
.btn-fidelidade-save:active {
  transform: translateY(0);
}
.btn-fidelidade-save:disabled {
  opacity: 0.7;
  cursor: not-allowed;
  transform: none;
}

/* Informações do estabelecimento - formulário organizado */
.profile-info-section{
  padding:24px;
}
.profile-info-display-list .profile-info-email-display{
  margin-bottom:20px;
}
.profile-info-display-list .profile-info-email-display:last-of-type{
  margin-bottom:0;
}
.profile-info-email-display label{
  display:block;
  margin:0 0 6px 0;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:500;
}
.profile-info-email-value{
  margin:0;
  color:var(--text);
  font-size:14px;
}
.profile-info-section h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.profile-info-form{
  display:flex;
  flex-direction:column;
  gap:20px;
}
.profile-info-row{
  display:flex;
  flex-wrap:wrap;
  gap:20px;
}
.profile-info-row--double{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width: 600px){
  .profile-info-row--double{
    grid-template-columns:1fr;
  }
}

/* Dashboard Perfil: Avaliações */
.dashboard-reviews-section h3{ display:flex; align-items:center; gap:8px; }
.dashboard-reviews-summary{
  display:flex; align-items:center; gap:10px; margin-bottom:20px; padding:12px 0;
  border-bottom:1px solid var(--border);
}
.dashboard-reviews-summary .dashboard-reviews-stars{ font-size:1.25rem; }
.dashboard-reviews-summary .dashboard-reviews-stars .bi-star-fill,
.dashboard-reviews-summary .dashboard-reviews-stars .bi-star-half{ color:var(--accent1); }
.dashboard-reviews-summary .dashboard-reviews-stars .bi-star{ color:var(--muted); }
.dashboard-reviews-summary .dashboard-reviews-avg{ font-size:1rem; font-weight:600; color:var(--text-primary); }
.dashboard-reviews-summary .dashboard-reviews-avg small{ font-weight:400; font-size:0.875rem; color:var(--muted); }
.dashboard-reviews-list{ display:flex; flex-direction:column; gap:12px; }
.dashboard-review-card{
  background:var(--panel); border:1px solid var(--border); border-radius:12px;
  padding:16px 20px;
}
.dashboard-review-header{
  display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:6px;
}
.dashboard-review-client{ font-weight:600; color:var(--text-primary); font-size:0.9375rem; }
.dashboard-review-stars{ font-size:0.875rem; }
.dashboard-review-stars .bi-star-fill{ color:var(--accent1); }
.dashboard-review-stars .bi-star{ color:var(--muted); }
.dashboard-review-barber{ font-size:0.8125rem; color:var(--muted); margin-bottom:4px; }
.dashboard-review-comment{ font-size:0.9375rem; color:var(--text-secondary); line-height:1.4; margin:0 0 8px; }
.dashboard-review-date{ font-size:0.75rem; color:var(--muted); }

/* Perfil do barbeiro no mobile: Informações do Perfil empilhadas (um abaixo do outro) */
@media(max-width:767px){
  #tab-perfil-barber .profile-info-row{
    flex-direction:column;
  }
  #tab-perfil-barber .profile-info-row .profile-info-field{
    flex:1 1 100%;
    width:100%;
  }
}
.profile-info-field{
  flex:1;
  min-width:0;
}
.profile-info-field label{
  display:block;
  margin:0 0 8px 0;
  color:var(--text-secondary);
  font-size:13px;
  font-weight:500;
}
.profile-info-field input,
.profile-info-field select,
.profile-info-field textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  background:var(--card);
  border:1px solid var(--border);
  color:var(--text-primary);
  font-size:14px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.profile-info-field select{
  cursor:pointer;
}
.profile-info-field select option{
  background:var(--panel);
  color:var(--text-primary);
}
.profile-info-field input:focus,
.profile-info-field select:focus,
.profile-info-field textarea:focus{
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,255,255,0.06);
}
.profile-checkbox-label{ display:flex; align-items:center; gap:10px; cursor:pointer; font-weight:500; }
.profile-checkbox-label input[type="checkbox"]{ width:auto; }
.profile-info-field input.readonly-input{
  opacity:0.85;
  cursor:not-allowed;
}
.profile-info-field textarea{
  min-height:80px;
  resize:vertical;
}
.profile-info-actions{
  margin-top:8px;
  padding-top:20px;
  border-top:1px solid var(--border);
}

.profile-upload-images-section .profile-upload-images-subtitle{
  margin-bottom:18px;
}
.profile-upload-images-grid{
  gap:16px;
}
.profile-upload-image-field{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border:1px dashed rgba(255,255,255,0.14);
  border-radius:14px;
  padding:14px;
}
.profile-upload-image-field input[type="file"]{
  background:var(--panel);
}
.profile-upload-hint{
  display:block;
  margin-top:6px;
  color:var(--text-secondary);
  font-size:12px;
}
.profile-upload-preview{
  margin-top:10px;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--border);
  border-radius:12px;
  background:rgba(255,255,255,0.02);
  padding:10px;
}
.profile-upload-preview img{
  display:block;
  max-width:100%;
}
.profile-upload-preview--logo{
  min-height:170px;
}
.profile-upload-empty{
  color:var(--text-secondary);
  font-size:13px;
  display:flex;
  align-items:center;
  gap:8px;
}

/* Funcionários cadastrados - lista organizada */
.employees-list-section{
  padding:24px;
}
.employees-list-section h3{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:20px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}
.employees-list{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.employee-item{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  padding:16px 18px;
  background:rgba(255,255,255,0.03);
  border-radius:12px;
  border:1px solid var(--border);
  flex-wrap:wrap;
  gap:16px;
  transition:background .2s ease, border-color .2s ease;
}
.employee-item:hover{
  background:rgba(255,255,255,0.05);
  border-color:rgba(255,255,255,0.08);
}
.employee-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
  flex:1;
}
.employee-header{
  display:flex;
  align-items:center;
  gap:12px;
}
.employee-avatar{
  width:48px;
  height:48px;
  border-radius:50%;
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
}
.employee-photo{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}
.employee-avatar-placeholder{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  color:#fff;
  font-size:18px;
  font-weight:700;
  border-radius:50%;
}
.employee-name{
  color:var(--text-primary);
  font-size:15px;
  font-weight:600;
}
.employee-detail{
  font-size:14px;
  color:var(--text-secondary);
}
.employee-detail-label{
  color:var(--muted);
  font-size:13px;
  margin-right:6px;
}
.employee-actions{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Barber items (fallback / compat) */
.barber-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px;
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,0.04);
  flex-wrap:wrap;
  gap:12px;
}

.barber-item:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(241,90,0,0.2);
}

.barber-info{
  display:flex;
  flex-direction:column;
  gap:4px;
}

.barber-info strong{
  color:var(--text-primary);
  font-size:15px;
}

.barber-info .muted{
  font-size:13px;
  margin:0;
  text-align:left;
}

.barber-actions{
  display:flex;
  gap:8px;
}

.btn-small{
  background:transparent;
  border:1px solid rgba(255,255,255,0.12);
  padding:8px 14px;
  border-radius:8px;
  color:var(--muted);
  cursor:pointer;
  font-size:13px;
  transition:all 0.2s ease;
}

.btn-small:hover{
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
}

.btn-small.btn-danger,
.btn-delete-barber{
  border-color:rgba(255,107,107,0.3);
  color:#ff6b6b;
}

.btn-small.btn-danger:hover,
.btn-delete-barber:hover,
.btn-delete-service:hover{
  background:rgba(255,107,107,0.15);
  border-color:#ff6b6b;
}

/* Services by category */
.services-by-category {
  margin-bottom: 20px;
}
.services-category-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Service items */
.service-item{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:16px;
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  margin-bottom:10px;
  border:1px solid rgba(255,255,255,0.04);
  flex-wrap:wrap;
  gap:12px;
}

.service-item:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(241,90,0,0.2);
}

.service-info{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
}

.service-header{
  display:flex;
  align-items:flex-start;
  gap:12px;
}

.service-image{
  width:80px;
  height:80px;
  border-radius:10px;
  overflow:hidden;
  flex-shrink:0;
  background:var(--panel);
  display:flex;
  align-items:center;
  justify-content:center;
  border:2px solid var(--border);
  box-shadow:0 2px 8px rgba(0,0,0,0.1);
}

.service-logo{
  width:100%;
  height:100%;
  object-fit:cover;
}

.service-text{
  display:flex;
  flex-direction:column;
  gap:6px;
  flex:1;
  min-width:0;
}

.service-info strong{
  color:var(--text-primary);
  font-size:16px;
}

.service-info .muted{
  font-size:13px;
  margin:0;
  text-align:left;
}

.service-details{
  display:flex;
  gap:16px;
  margin-top:4px;
}

.service-price{
  color:#6ad68a;
  font-weight:700;
  font-size:15px;
}

.service-duration{
  color:var(--muted);
  font-size:13px;
  display:flex;
  align-items:center;
}

.service-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.btn-edit-service{
  border-color:rgba(255,122,0,0.4);
  color:var(--accent1,#ff7a00);
}
.btn-edit-service:hover{
  background:rgba(255,122,0,0.12);
  border-color:var(--accent1,#ff7a00);
}

.btn-toggle-barber-status-list{
  border-color:rgba(255,122,0,0.4);
  color:var(--accent1,#ff7a00);
}
.btn-toggle-barber-status-list:hover{
  background:rgba(255,122,0,0.12);
  border-color:var(--accent1,#ff7a00);
}

.btn-delete-service{
  border-color:rgba(255,107,107,0.3);
  color:#ff6b6b;
}

/* Row layout for form */
.row{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
}

.row .small{
  flex:1;
  min-width:120px;
}

/* Days grid for profile */
.days-grid{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:12px;
}

.day-checkbox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
}

.day-checkbox input[type="checkbox"]{
  display:none;
}

.day-checkbox span{
  display:flex;
  align-items:center;
  justify-content:center;
  width:50px;
  height:50px;
  border-radius:12px;
  background:rgba(255,255,255,0.04);
  border:2px solid rgba(255,255,255,0.1);
  color:var(--muted);
  font-size:13px;
  font-weight:600;
  transition:all 0.2s ease;
}

.day-checkbox input[type="checkbox"]:checked + span{
  background:rgba(241,90,0,0.2);
  border-color:var(--accent1);
  color:#fff;
}

.day-checkbox:hover span{
  border-color:rgba(241,90,0,0.5);
}

/* Horário por dia */
.hours-by-day{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.hours-by-day-header{
  display:grid;
  grid-template-columns:70px 1fr 1fr;
  gap:16px;
  padding:12px 16px;
  font-size:13px;
  font-weight:600;
  color:var(--muted);
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  border-radius:12px;
  align-items:center;
}
.hours-col-day{ color:var(--text-primary); }
.hours-col-period{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px 12px;
  padding:8px 12px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:10px;
}
.hours-period-title{
  grid-column:1 / -1;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.03em;
  color:var(--accent1);
}
.hours-period-sublabel{
  font-size:11px;
  font-weight:500;
  color:var(--muted);
}
.hours-by-day-row{
  display:grid;
  grid-template-columns:70px 1fr 1fr;
  gap:16px;
  align-items:center;
  padding:8px 0;
  border-bottom:1px solid var(--border);
}
.hours-by-day-row:last-child{ border-bottom:none; }
.hours-day-label{
  margin:0;
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
}
.hours-period-inputs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:6px 10px;
  background:rgba(255,255,255,0.02);
  border:1px solid var(--border);
  border-radius:10px;
}
.hours-by-day-row input[type="time"]{
  padding:8px 10px;
  border-radius:8px;
  background:rgba(255,255,255,0.04);
  border:1px solid var(--border);
  color:var(--text-primary);
  font-size:14px;
}
.hours-by-day-row input[type="time"]:focus{
  outline:none;
  border-color:var(--accent1);
}

@media (max-width:600px){
  .hours-by-day-header{
    display:none;
  }
  .hours-by-day-row{
    grid-template-columns:1fr;
    gap:12px;
    padding:14px 12px;
    margin-bottom:8px;
    background:rgba(255,255,255,0.02);
    border:1px solid var(--border);
    border-radius:12px;
    border-bottom:1px solid var(--border);
  }
  .hours-by-day-row:last-child{ margin-bottom:0; }
  .hours-day-label{
    padding-bottom:10px;
    border-bottom:1px solid var(--border);
    margin-bottom:4px;
  }
  .hours-period-inputs{
    padding:10px 12px;
  }
  .hours-period-inputs.hours-period-1::before{
    content:"1º período";
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--accent1);
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin-bottom:8px;
  }
  .hours-period-inputs.hours-period-2::before{
    content:"2º período";
    display:block;
    font-size:11px;
    font-weight:600;
    color:var(--accent1);
    text-transform:uppercase;
    letter-spacing:0.03em;
    margin-bottom:8px;
  }
  .hours-by-day-row input[type="time"]{
    padding:10px 12px;
  }
}

/* Barber services grid (Meus Serviços) */
.barber-services-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
  margin-top:8px;
}

.barber-service-card{
  display:block;
  cursor:pointer;
  border-radius:14px;
  overflow:hidden;
  border:2px solid rgba(255,255,255,0.08);
  background:rgba(255,255,255,0.02);
  transition:all 0.2s ease;
}

.barber-service-card:hover{
  background:rgba(255,255,255,0.04);
  border-color:rgba(241,90,0,0.35);
}

.barber-service-card.selected{
  background:rgba(241,90,0,0.12);
  border-color:var(--accent1);
  box-shadow:0 0 0 1px var(--accent1);
}

.barber-service-card input[type="checkbox"]{
  display:none;
}

.barber-service-card-inner{
  padding:0;
  display:flex;
  flex-direction:column;
  position:relative;
}

.barber-service-image{
  width:100%;
  height:120px;
  overflow:hidden;
  background:rgba(255,255,255,0.03);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.barber-service-logo{
  width:100%;
  height:100%;
  object-fit:cover;
}

.barber-service-content{
  padding:18px 16px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.barber-service-check{
  position:absolute;
  top:14px;
  right:14px;
  width:26px;
  height:26px;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  border:2px solid rgba(255,255,255,0.1);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:14px;
  color:transparent;
  transition:all 0.2s ease;
  z-index:2;
}

.barber-service-card.selected .barber-service-check{
  background:var(--accent1);
  border-color:var(--accent1);
  color:#0b0b0b;
}

.barber-service-name{
  font-weight:700;
  font-size:15px;
  color:var(--text-primary);
  line-height:1.3;
  padding-right:32px;
}

.barber-service-meta{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.barber-service-price{
  color:#6ad68a;
  font-weight:700;
  font-size:15px;
}

.barber-service-duration{
  color:var(--muted);
  font-size:13px;
}

.barber-service-desc{
  font-size:12px;
  color:var(--muted);
  line-height:1.4;
  margin-top:2px;
}

.barber-service-card{
  animation:barber-card-fade 0.4s ease backwards;
}

@keyframes barber-card-fade{
  from{ opacity:0; transform:translateY(8px); }
  to{ opacity:1; transform:translateY(0); }
}

.barber-services-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:12px;
  margin-bottom:4px;
}

.barber-services-counter{
  font-size:13px;
  color:var(--muted);
}

.barber-services-actions{
  margin-top:24px;
}

.barber-services-toast{
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%) translateY(80px);
  padding:14px 24px;
  border-radius:12px;
  font-size:14px;
  font-weight:500;
  opacity:0;
  visibility:hidden;
  transition:all 0.3s ease;
  z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,0.4);
}

.barber-services-toast.show{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(0);
}

.barber-services-toast.success{
  background:linear-gradient(135deg,#2a9d8f,#238276);
  color:#fff;
}

.barber-services-toast.error{
  background:linear-gradient(135deg,#e63946,#c1121f);
  color:#fff;
}

.barber-services-skeleton{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px, 1fr));
  gap:14px;
}

.skeleton-card{
  height:120px;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(255,255,255,0.04) 25%, rgba(255,255,255,0.08) 50%, rgba(255,255,255,0.04) 75%);
  background-size:200% 100%;
  animation:skeleton-shimmer 1.5s ease-in-out infinite;
}

@keyframes skeleton-shimmer{
  0%{ background-position:200% 0; }
  100%{ background-position:-200% 0; }
}

.btn-spinner{
  display:inline-block;
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top-color:#fff;
  border-radius:50%;
  animation:spin 0.8s linear infinite;
  vertical-align:middle;
  margin-right:8px;
}

@keyframes spin{
  to{ transform:rotate(360deg); }
}

/* Readonly input */
.readonly-input{
  background:rgba(255,255,255,0.02) !important;
  color:var(--muted) !important;
  cursor:not-allowed;
}

/* Appointments list */
.appointments-list,
#pending-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:16px;
}

#history-list{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:14px;
  margin-top:16px;
}
@media (max-width:768px){
  #history-list{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:480px){
  #history-list{ grid-template-columns:1fr; }
}

/* Card de agendamento – estética alinhada ao sistema */
.appointment-card{
  background:linear-gradient(135deg,var(--card),rgba(241,90,0,0.04));
  border:1px solid rgba(255,255,255,0.06);
  border-radius:16px;
  padding:18px;
  transition:transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

.appointment-card:hover{
  border-color:rgba(241,90,0,0.25);
  box-shadow:0 4px 16px rgba(0,0,0,0.2);
}

.appointment-card.apt-done{
  opacity:0.92;
  border-color:rgba(33,150,243,0.2);
}

.appointment-card.apt-checkedin{
  background:linear-gradient(135deg,var(--card),rgba(33,150,243,0.08));
  border-color:rgba(33,150,243,0.35);
  box-shadow:0 2px 12px rgba(33,150,243,0.1);
}

.appointment-card.apt-checkedin:hover{
  border-color:rgba(33,150,243,0.5);
  box-shadow:0 4px 16px rgba(33,150,243,0.15);
}

.appointment-card.apt-cancelled{
  opacity:0.8;
  border-color:rgba(244,67,54,0.2);
}

.appointment-card .apt-card-top{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  margin-bottom:14px;
  padding-bottom:12px;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

.appointment-card .apt-status{
  display:inline-block;
  padding:4px 10px;
  border-radius:8px;
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.03em;
  width:fit-content;
}

.appointment-card .apt-status-confirmed{
  background:rgba(76,175,80,0.18);
  color:#81c784;
  border:1px solid rgba(76,175,80,0.35);
}

.appointment-card .apt-status-done{
  background:rgba(33,150,243,0.18);
  color:#64b5f6;
  border:1px solid rgba(33,150,243,0.35);
}

.appointment-card .apt-status-cancelled{
  background:rgba(244,67,54,0.18);
  color:#e57373;
  border:1px solid rgba(244,67,54,0.35);
}

.appointment-card .apt-status-pending{
  background:rgba(255,193,7,0.18);
  color:#ffd54f;
  border:1px solid rgba(255,193,7,0.35);
}

/* Grid: NOME | DATA | FUNCIONÁRIO | TIPO | VALOR */
.appointment-card .apt-card-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  gap:12px 16px;
  padding:14px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
}

@media (max-width:520px){
  .appointment-card .apt-card-grid{
    grid-template-columns:1fr 1fr;
  }
}

.appointment-card .apt-grid-col{
  display:flex;
  flex-direction:column;
  gap:6px;
  min-width:0;
}

.appointment-card .apt-label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.04em;
  color:var(--accent1);
}

.appointment-card .apt-value{
  font-size:14px;
  color:var(--text-primary);
  font-weight:500;
  line-height:1.35;
}

.appointment-card .apt-card-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
  padding-top:12px;
}

.appointment-card .btn-apt{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:13px;
  padding:8px 14px;
  border-radius:10px;
  transition:all 0.2s ease;
}

.appointment-card .btn-apt i{
  font-size:14px;
}

.appointment-card .btn-checkin{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:#0b0b0b;
  font-weight:600;
}

.appointment-card .btn-checkin:hover{
  opacity:0.95;
  transform:translateY(-1px);
}

.appointment-card .btn-checkout{
  background:rgba(33,150,243,0.2);
  border:1px solid rgba(33,150,243,0.4);
  color:#64b5f6;
}

.appointment-card .btn-checkout:hover{
  background:rgba(33,150,243,0.3);
  color:#90caf9;
}

.appointment-card .btn-cancel{
  border:1px solid rgba(244,67,54,0.4);
  color:#e57373;
}

.appointment-card .btn-cancel:hover{
  background:rgba(244,67,54,0.15);
  border-color:#e57373;
}

/* Legado – compatibilidade com painel público e outros usos */
.info-row{ display:flex; align-items:center; gap:8px; font-size:14px; margin-bottom:8px; }
.info-label{ color:var(--muted); min-width:100px; }
.info-value{ color:var(--text-primary); font-weight:500; }
.status-pending{ background:rgba(255,193,7,0.15); color:#ffc107; border:1px solid rgba(255,193,7,0.3); }
.status-confirmed{ background:rgba(76,175,80,0.15); color:#4caf50; border:1px solid rgba(76,175,80,0.3); }
.status-done{ background:rgba(33,150,243,0.15); color:#2196f3; border:1px solid rgba(33,150,243,0.3); }
.status-cancelled{ background:rgba(244,67,54,0.15); color:#f44336; border:1px solid rgba(244,67,54,0.3); }

.loading{
  text-align:center;
  padding:40px;
  color:var(--muted);
  font-size:16px;
}

.empty{
  text-align:center;
  padding:40px 20px;
  color:var(--muted);
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.05);
}

.empty i{
  display:block;
  font-size:32px;
  margin-bottom:12px;
  opacity:0.6;
}

/* Socket.IO Notifications */
.socket-notification{
  position:fixed;
  top:20px;
  right:20px;
  background:linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  border:2px solid var(--accent1);
  border-radius:16px;
  padding:16px 20px;
  min-width:300px;
  max-width:400px;
  z-index:9999;
  box-shadow:0 10px 40px rgba(241,90,0,0.3);
  animation:slideIn 0.3s ease-out;
  display:flex;
  align-items:flex-start;
  gap:12px;
}

@keyframes slideIn{
  from{
    transform:translateX(100%);
    opacity:0;
  }
  to{
    transform:translateX(0);
    opacity:1;
  }
}

.socket-notification.fade-out{
  animation:slideOut 0.3s ease-in forwards;
}

@keyframes slideOut{
  from{
    transform:translateX(0);
    opacity:1;
  }
  to{
    transform:translateX(100%);
    opacity:0;
  }
}

.notification-content{
  flex:1;
}

.notification-content strong{
  display:block;
  color:var(--accent1);
  font-size:16px;
  margin-bottom:4px;
}

.notification-content p{
  color:var(--text-primary);
  font-size:14px;
  margin:0;
  line-height:1.4;
}

.notification-close{
  background:none;
  border:none;
  color:var(--muted);
  font-size:24px;
  cursor:pointer;
  padding:0;
  line-height:1;
  transition:color 0.2s;
}

.notification-close:hover{
  color:var(--text-primary);
}

/* Share section */
.share-link-container{
  display:flex;
  gap:12px;
  margin-bottom:20px;
  flex-wrap:wrap;
}

.link-input{
  flex:1;
  min-width:250px;
  padding:14px;
  border-radius:10px;
  background:rgba(255,255,255,0.02);
  border:1px solid rgba(255,255,255,0.08);
  color:#6b7280;
  font-size:14px;
  font-family:monospace;
}

.btn-copy{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px;
  border-radius:10px;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:#0b0b0b;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
  white-space:nowrap;
}

.btn-copy:hover{
  transform:translateY(-1px);
  opacity:.95;
}

.btn-copy svg{
  flex-shrink:0;
}

.share-buttons{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.btn-share{
  display:flex;
  align-items:center;
  gap:8px;
  padding:12px 20px;
  border-radius:10px;
  border:none;
  font-weight:600;
  cursor:pointer;
  transition:all .2s ease;
}

.btn-whatsapp{
  background:#25D366;
  color:#fff;
}

.btn-whatsapp:hover{
  background:#128C7E;
  transform:translateY(-2px);
}

.btn-email{
  background:#EA4335;
  color:#fff;
}

.btn-email:hover{
  background:#C5221F;
  transform:translateY(-2px);
}

.qrcode-container{
  display:flex;
  justify-content:center;
  align-items:center;
  padding:20px;
  background:rgba(255,255,255,0.02);
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.04);
}

#qrcode-mount,
#qrcode-mount canvas,
#qrcode-mount img{
  max-width:100%;
  height:auto;
  border-radius:8px;
  background:#fff;
  display:block;
}
#qrcode-mount table{
  border-radius:8px;
  overflow:hidden;
}

/* ====== Aba Compartilhar — vitrine (layout diferente) ====== */
#tab-compartilhar {
  padding-bottom: 2.5rem;
  position: relative;
}

#tab-compartilhar::before {
  content: '';
  position: absolute;
  inset: 0;
  max-height: 320px;
  background:
    radial-gradient(ellipse 80% 70% at 15% 0%, color-mix(in srgb, var(--accent1) 12%, transparent), transparent 55%),
    radial-gradient(ellipse 60% 50% at 85% 20%, color-mix(in srgb, var(--accent2, var(--accent1)) 10%, transparent), transparent 50%);
  pointer-events: none;
  z-index: 0;
}

#tab-compartilhar .share-vitrine {
  position: relative;
  z-index: 1;
  max-width: 1040px;
  margin: 0 auto;
}

#tab-compartilhar .share-vitrine-intro {
  padding: 0.25rem 0 1.75rem 1.15rem;
  margin-bottom: 0.5rem;
  border-left: 4px solid var(--accent1);
}

#tab-compartilhar .share-vitrine-kicker {
  margin: 0 0 0.35rem 0;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent1);
}

#tab-compartilhar .share-vitrine-title {
  margin: 0 0 0.4rem 0;
  font-size: clamp(1.6rem, 3.5vw, 2.05rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
}

#tab-compartilhar .share-vitrine-lead {
  margin: 0;
  max-width: 34rem;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

#tab-compartilhar .share-vitrine-bento {
  display: grid;
  gap: 1.35rem;
  grid-template-columns: 1fr;
}

@media (min-width: 960px) {
  #tab-compartilhar .share-vitrine-bento {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: stretch;
  }
}

#tab-compartilhar .share-bento {
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.045), rgba(0, 0, 0, 0.18));
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 28px;
  padding: 1.65rem 1.5rem 1.75rem;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 20px 50px rgba(0, 0, 0, 0.22);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

#tab-compartilhar .share-bento:hover {
  border-color: color-mix(in srgb, var(--accent1) 22%, rgba(255, 255, 255, 0.09));
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.07) inset,
    0 24px 56px rgba(0, 0, 0, 0.28);
}

#tab-compartilhar .share-bento-head {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin-bottom: 1.35rem;
}

#tab-compartilhar .share-bento-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.45rem;
  color: #fff;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 75%, #222));
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent1) 38%, transparent);
  flex-shrink: 0;
}

#tab-compartilhar .share-bento-icon-wrap--qr {
  background: linear-gradient(145deg, #0f172a, #334155);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.45);
}

#tab-compartilhar .share-bento-head-text h3 {
  margin: 0 0 0.3rem 0;
  font-size: 1.12rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

#tab-compartilhar .share-bento-head-text p {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.45;
  color: var(--text-secondary);
}

#tab-compartilhar .share-url-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.45rem;
}

#tab-compartilhar .share-link-container--vitrine {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0;
}

@media (min-width: 640px) {
  #tab-compartilhar .share-link-container--vitrine {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: stretch;
  }
  #tab-compartilhar .share-link-input-vitrine {
    flex: 1;
    min-width: 200px;
  }
}

#tab-compartilhar .share-link-input-vitrine.link-input {
  color: var(--text-primary);
  font-size: 0.875rem;
  padding: 1rem 1.1rem;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.25);
}

#tab-compartilhar .share-link-toolbar {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}

#tab-compartilhar .share-toolbar-btn.btn-copy {
  padding: 0.85rem 1.15rem;
  border-radius: 14px;
  font-weight: 700;
  font-size: 0.875rem;
}

#tab-compartilhar .share-toolbar-btn--primary.btn-copy {
  background: linear-gradient(135deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 82%, #1a1a1a));
  color: #fff;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent1) 35%, transparent);
}

#tab-compartilhar .share-toolbar-btn--primary.btn-copy:hover {
  transform: translateY(-2px);
  opacity: 1;
}

#tab-compartilhar .share-toolbar-btn--ghost.btn-copy {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: var(--text-primary);
}

#tab-compartilhar .share-toolbar-btn--ghost.btn-copy:hover {
  border-color: color-mix(in srgb, var(--accent1) 45%, transparent);
  color: var(--accent1);
  transform: translateY(-1px);
  opacity: 1;
}

#tab-compartilhar .share-channels-label {
  margin: 1.5rem 0 0.65rem 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

#tab-compartilhar .share-buttons--vitrine {
  flex-direction: column;
  gap: 0.65rem;
}

#tab-compartilhar .share-channel-card.btn-share {
  width: 100%;
  justify-content: flex-start;
  text-align: left;
  padding: 1rem 1.1rem;
  border-radius: 16px;
  gap: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}

#tab-compartilhar .share-channel-card.btn-whatsapp {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.18), rgba(18, 140, 126, 0.12));
  border-color: rgba(37, 211, 102, 0.35);
  color: #fff;
}

#tab-compartilhar .share-channel-card.btn-whatsapp:hover {
  background: linear-gradient(135deg, rgba(37, 211, 102, 0.28), rgba(18, 140, 126, 0.2));
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.2);
}

#tab-compartilhar .share-channel-card.btn-email {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.16), rgba(197, 34, 31, 0.1));
  border-color: rgba(234, 67, 53, 0.35);
  color: #fff;
}

#tab-compartilhar .share-channel-card.btn-email:hover {
  background: linear-gradient(135deg, rgba(234, 67, 53, 0.26), rgba(197, 34, 31, 0.16));
  transform: translateX(4px);
  box-shadow: 0 8px 24px rgba(234, 67, 53, 0.18);
}

#tab-compartilhar .share-channel-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  flex-shrink: 0;
}

#tab-compartilhar .share-channel-icon--mail {
  background: rgba(0, 0, 0, 0.25);
}

#tab-compartilhar .share-channel-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

#tab-compartilhar .share-channel-title {
  font-size: 1rem;
  font-weight: 700;
}

#tab-compartilhar .share-channel-hint {
  font-size: 0.78rem;
  opacity: 0.88;
  line-height: 1.35;
}

#tab-compartilhar .share-channel-chevron {
  font-size: 1.1rem;
  opacity: 0.55;
  flex-shrink: 0;
}

#tab-compartilhar .share-bento--qr {
  display: flex;
  flex-direction: column;
}

#tab-compartilhar .share-qr-stage {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
}

#tab-compartilhar .share-qr-frame {
  padding: 1.25rem;
  border-radius: 24px;
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
}

#tab-compartilhar .share-qrcode-box.qrcode-container {
  padding: 1.1rem;
  border-radius: 18px;
  background: #fff;
  border: none;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

#tab-compartilhar .share-qr-download-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.35rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
  border: 1px solid color-mix(in srgb, var(--accent1) 40%, var(--border));
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-primary);
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

#tab-compartilhar .share-qr-download-btn:hover {
  background: color-mix(in srgb, var(--accent1) 14%, transparent);
  border-color: var(--accent1);
  transform: translateY(-2px);
}

/* ====== Página pública – usa o mesmo tema do perfil (claro ou escuro) ====== */
/* Tela inteira, sem margens laterais pretas */
.page-public .wrap{
  width:100%;
  max-width:100%;
  margin:0;
  padding:0 clamp(16px,4vw,24px);
  background:var(--panel);
  box-sizing:border-box;
  overflow-x:hidden;
}

/* Header */
.trinks-header{
  border-bottom:1px solid var(--border);
  padding:14px 0;
}
.trinks-header-inner{
  max-width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.trinks-logo{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-weight:700;
  font-size:1.125rem;
}
.trinks-logo:hover{ opacity:0.9; }
.page-public .trinks-logo{ cursor:default; }
.trinks-logo-link{ display:inline-flex; align-items:center; text-decoration:none; }
.trinks-hotbar-logo{ display:block; max-height:26px; width:auto; object-fit:contain; }
.trinks-hotbar-logo:hover{ opacity:0.9; }

/* Main – herda a largura do .wrap (já limitada a 1100px) */
.trinks-main{ width:100%; max-width:100%; margin:0; padding:0; box-sizing:border-box; }

/* Banner (só título e subtítulo; sem bola no meio) */
.trinks-banner{
  border-radius:0 0 20px 20px;
  padding:40px 24px 32px;
  margin:0 0 0;
  text-align:center;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.trinks-banner-content{ position:relative; z-index:1; }
.trinks-banner-title{
  color:#fff;
  font-size:1.75rem;
  font-weight:700;
  margin:0 0 4px;
  text-shadow:0 1px 2px rgba(0,0,0,0.2);
}
.trinks-banner-subtitle{ color:rgba(255,255,255,0.95); font-size:0.9375rem; margin:0; }

/* Logo abaixo do banner (bola com foto ou iniciais) */
.trinks-logo-block{ text-align:center; margin-top:-28px; margin-bottom:8px; position:relative; z-index:2; }
.trinks-logo-circle{
  width:72px;
  height:72px;
  border-radius:50%;
  margin:0 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  border:3px solid var(--panel);
  box-shadow:0 2px 12px rgba(0,0,0,0.2);
}
.trinks-logo-img{ width:100%; height:100%; object-fit:cover; }
.trinks-logo-initials{ color:#fff; font-size:1.5rem; font-weight:800; }

/* Info bar */
.trinks-info-bar{ margin-bottom:24px; }
.trinks-name-block{ text-align:center; }
.trinks-shop-name{ font-size:1.5rem; font-weight:700; color:var(--text-primary); margin:0 0 6px; }
.trinks-shop-rating{ display:flex; align-items:center; justify-content:center; gap:8px; margin-bottom:8px; }
.trinks-shop-rating-clickable{ cursor:pointer; transition:opacity 0.2s; }
.trinks-shop-rating-clickable:hover{ opacity:0.85; }
.trinks-shop-stars{ font-size:1rem; }
.trinks-shop-stars .bi-star-fill,
.trinks-shop-stars .bi-star-half{ color:var(--accent1); }
.trinks-shop-stars .bi-star{ color:var(--muted); }
.trinks-shop-rating-value{ font-size:0.875rem; color:var(--text-secondary); }
.trinks-shop-rating-value small{ font-size:0.8125rem; color:var(--muted); }

/* Painel público: nome do barbeiro/barbearia fixo no mobile */
@media(max-width:767px){
  .page-public .trinks-info-bar{
    position:sticky;
    top:0;
    z-index:10;
    background:var(--panel);
    padding:12px 0;
    margin-bottom:16px;
    box-shadow:0 2px 8px rgba(0,0,0,0.08);
  }
}
.trinks-link-more{ color:var(--accent1); font-weight:600; font-size:0.9375rem; text-decoration:none; }
.trinks-link-more:hover{ text-decoration:underline; }

/* Section title */
.trinks-section-title{ font-size:1.125rem; font-weight:700; color:var(--text-primary); margin:0 0 16px; }

/* Pesquisa de serviços */
.trinks-services-search-wrap{
  margin-bottom:16px;
  max-width:360px;
}
.trinks-services-search-label{
  display:block;
  font-size:0.8125rem;
  font-weight:500;
  color:var(--text-secondary);
  margin-bottom:6px;
}
.trinks-services-search-input{
  width:100%;
  padding:10px 14px 10px 46px;
  border:1px solid var(--border);
  border-radius:10px;
  background:var(--card);
  color:var(--text-primary);
  font-size:0.9375rem;
  font-family:inherit;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.trinks-services-search-input::placeholder{
  color:var(--muted);
}
.trinks-services-search-input:focus{
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,122,0,0.15);
}
.trinks-services-search-wrap{
  position:relative;
}
.trinks-services-search-wrap::before{
  content:'';
  position:absolute;
  left:12px;
  top:50%;
  transform:translateY(-50%);
  width:24px;
  height:24px;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%239b9b9b'%3E%3Cpath d='M15.5 14h-.79l-.28-.27A6.471 6.471 0 0016 9.5 6.5 6.5 0 109.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z'/%3E%3C/svg%3E") no-repeat center;
  background-size:contain;
  pointer-events:none;
}
@media(max-width:767px){
  .trinks-services-search-wrap{ max-width:none; margin-bottom:12px; }
  .trinks-services-search-input{ padding:10px 12px 10px 44px; font-size:0.9rem; }
  .trinks-services-search-wrap::before{ left:10px; width:22px; height:22px; }
}

/* Services by category (public panel) */
/* Área de serviços em largura quase total da tela (reduz “vão” lateral do .wrap) */
.page-public .trinks-section--services{
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding-left:max(8px, env(safe-area-inset-left, 0px));
  padding-right:max(8px, env(safe-area-inset-right, 0px));
  box-sizing:border-box;
}
.page-public .trinks-section--services .trinks-section-title,
.page-public .trinks-section--services .trinks-services-search-wrap{
  padding-left:max(4px, calc(env(safe-area-inset-left, 0px)));
  padding-right:max(4px, calc(env(safe-area-inset-right, 0px)));
}

.trinks-services-category-block{ margin-bottom:28px; }
.trinks-services-category-block:last-of-type{ margin-bottom:0; }
.trinks-services-category-title{
  font-size:0.875rem;
  font-weight:600;
  color:var(--muted);
  margin:0 0 10px;
  padding-bottom:6px;
  border-bottom:1px solid var(--border);
  text-transform:uppercase;
  letter-spacing:0.5px;
}

/* Services strip */
.trinks-services-scroll-wrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:24px;
}
.trinks-services-strip{
  display:flex;
  gap:16px;
  overflow-x:auto;
  scroll-behavior:smooth;
  padding:8px 0 16px;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.trinks-services-strip::-webkit-scrollbar{ display:none; }
.trinks-service-card{
  flex:0 0 200px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  box-shadow:0 1px 3px rgba(0,0,0,0.06);
  transition:box-shadow 0.2s, border-color 0.2s;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
}
.trinks-service-card:hover{ border-color:var(--accent1); box-shadow:0 4px 12px rgba(255,122,0,0.2); }

.trinks-service-image-placeholder{
  background:rgba(255,255,255,0.06);
  border:1px dashed var(--border);
  color:var(--muted);
}
.trinks-service-image-placeholder i{ font-size:1.35rem; opacity:0.7; }

@media(max-width:767px){
  /* Mais agendados: um card legível por vez, snap no scroll, setas menores */
  .page-public .trinks-services-category-block{ margin-bottom:20px; }
  .page-public .trinks-services-category-title{
    margin-bottom:8px;
    padding-bottom:4px;
    font-size:0.8125rem;
  }
  .page-public .trinks-services-scroll-wrap{
    gap:4px;
    margin-bottom:16px;
    align-items:stretch;
  }
  .page-public .trinks-scroll-btn{
    width:32px;
    height:32px;
    min-width:32px;
    align-self:center;
    font-size:0.95rem;
  }
  .page-public .trinks-services-strip{
    gap:10px;
    padding:4px 2px 12px;
    scroll-snap-type:x proximity;
    scroll-padding-inline:4px;
  }
  /* Dois cards visíveis: faixa usa quase 100vw (seção full-bleed + setas mais estreitas) */
  .page-public .trinks-service-card{
    flex:0 0 calc((100vw - 88px - 10px) / 2);
    max-width:calc((100vw - 88px - 10px) / 2);
    min-width:0;
    min-height:0;
    padding:14px 10px;
    border-radius:12px;
    scroll-snap-align:start;
    justify-content:flex-start;
  }
  .page-public .trinks-service-image,
  .page-public .trinks-service-image-placeholder{
    width:72px;
    height:72px;
    min-height:72px;
    margin-bottom:10px;
    border-radius:10px;
    flex-shrink:0;
  }
  .page-public .trinks-service-image-placeholder i{ font-size:1.15rem; }
  .page-public .trinks-service-name{
    font-size:0.9375rem;
    margin-bottom:6px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .page-public .trinks-service-meta{
    font-size:0.8125rem;
    margin-bottom:2px;
  }
  .page-public .trinks-service-price{
    font-size:1rem;
    margin-bottom:10px;
  }
  .page-public .trinks-service-btn-agendar{
    padding:10px 12px;
    font-size:0.875rem;
    border-radius:8px;
    margin-top:auto;
  }
}

.trinks-service-image{
  width:80px;
  height:80px;
  border-radius:12px;
  overflow:hidden;
  margin-bottom:12px;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
}
.trinks-service-logo{
  width:100%;
  height:100%;
  object-fit:cover;
}
.trinks-service-name{ font-size:1rem; font-weight:600; color:var(--text-primary); margin:0 0 8px; line-height:1.3; }
.trinks-service-meta{ font-size:0.8125rem; color:var(--muted); margin:0 0 4px; }
.trinks-service-price{ font-size:1.125rem; font-weight:700; color:var(--text-primary); margin:0 0 14px; }
.trinks-service-btn-agendar{
  width:100%;
  margin-top:auto;
  padding:12px 16px;
  border:none;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  font-size:0.9375rem;
  cursor:pointer;
  transition:opacity 0.2s;
}
.trinks-service-btn-agendar:hover{ opacity:0.9; }
.trinks-scroll-btn{
  flex-shrink:0;
  width:40px;
  height:40px;
  border-radius:50%;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:background 0.2s, color 0.2s;
}
.trinks-scroll-btn:hover{ background:var(--accent1); color:#fff; border-color:var(--accent1); }
.trinks-dots{ display:none; }

/* Two cols: map + hours */
.trinks-two-cols{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:32px;
}
.trinks-info-left{
  display:flex;
  flex-direction:column;
  gap:24px;
}
.trinks-history-inline{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
}
@media (max-width:700px){ .trinks-two-cols{ grid-template-columns:1fr; } }
.trinks-map-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:0;
  overflow:hidden;
  min-height:220px;
  display:flex;
  flex-direction:column;
}
.trinks-map-title{
  margin:0;
  padding:16px 20px 12px;
  font-size:1rem;
  font-weight:600;
  color:var(--text-primary);
  display:flex;
  align-items:center;
  gap:8px;
}
.trinks-map-iframe{
  flex:1;
  width:100%;
  min-height:200px;
  height:240px;
  border:0;
  display:block;
}
.trinks-map-no-address{
  flex:1;
  min-height:180px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:24px;
  text-align:center;
}
.trinks-map-no-address .bi-geo-alt{ font-size:2rem; color:var(--muted); }
.trinks-map-no-address p{ margin:0; color:var(--muted); font-size:0.9375rem; }
.trinks-hours-section{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:10px;
}
.trinks-hours-title{ font-size:1rem; font-weight:600; color:var(--text-primary); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.trinks-hours-list{ list-style:none; margin:0; padding:0; }
.trinks-hours-list li{ font-size:0.9375rem; color:var(--text-secondary); padding:6px 0; display:flex; justify-content:space-between; gap:12px; }
.trinks-hour-day{ font-weight:500; color:var(--text-primary); }
.trinks-hour-time{ color:var(--muted); }

/* Booking form */
.trinks-booking-section{ margin-top:32px; padding-top:24px; border-top:1px solid var(--border); min-width:0; }
.trinks-form label{ display:block; margin-top:14px; margin-bottom:6px; font-weight:600; font-size:0.9375rem; color:var(--text-secondary); }
.trinks-form input,
.trinks-form select{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--card);
  color:var(--text-primary);
  font-size:0.9375rem;
}
.trinks-form input::placeholder,
.trinks-form select option{ color:var(--muted); }
.trinks-form input:focus,
.trinks-form select:focus{
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,122,0,0.2);
}
.trinks-service-info{ margin-top:10px; padding:12px; background:rgba(255,122,0,0.1); border-radius:10px; font-size:0.9375rem; color:var(--text-secondary); }
.trinks-btn-submit{
  width:100%;
  margin-top:24px;
  padding:14px 20px;
  border:none;
  border-radius:10px;
  color:#fff;
  font-weight:600;
  font-size:1rem;
  cursor:pointer;
  transition:opacity 0.2s;
}
.trinks-btn-submit:hover{ opacity:0.95; }
.trinks-alert{ padding:14px 18px; border-radius:10px; margin-bottom:16px; font-size:0.9375rem; }
.trinks-booking-success-wrap{ text-align:center; padding:40px 20px; }
.trinks-booking-success-inner{ max-width:360px; margin:0 auto; }
.trinks-booking-success-icon{ font-size:60px; margin-bottom:20px; }
.trinks-booking-success-title{ color:#6ad68a; font-size:1.5rem; margin:0 0 16px; }
.trinks-booking-success-text{ color:var(--muted); margin-bottom:24px; line-height:1.5; }
.trinks-btn-success-link{ display:inline-block; margin-bottom:12px; padding:12px 24px; border-radius:8px; background:var(--accent1); color:#fff; text-decoration:none; font-weight:600; }
.trinks-btn-success-link:hover{ opacity:0.95; color:#fff; }
.trinks-booking-success-inner .trinks-btn-ghost{ display:block; width:100%; margin-top:8px; padding:12px; border:1px solid var(--border); border-radius:8px; background:transparent; cursor:pointer; font-size:1rem; }
.trinks-booking-success-inner .trinks-btn-ghost:hover{ background:var(--bg); }
.trinks-alert-success{ background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.trinks-alert-error{ background:#fee2e2; color:#991b1b; border:1px solid #fecaca; }
.trinks-footer{ text-align:center; padding:24px 0; font-size:0.875rem; color:var(--muted); margin-top:24px; border-top:1px solid var(--border); }

/* Histórico de agendamentos */
.trinks-links-wrap{ display:flex; gap:16px; flex-wrap:wrap; margin-top:4px; }
.trinks-links-wrap .trinks-link-more{ font-size:0.9rem; }
.trinks-history-filters{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px 14px;
  margin-bottom:16px;
}
.trinks-history-filter-label{ font-size:0.9rem; color:var(--text-secondary); margin-right:4px; }
.trinks-history-filter-btn{
  padding:8px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  background:var(--card);
  font-size:0.9rem;
  font-weight:500;
  color:var(--text-secondary);
  cursor:pointer;
  transition:background .2s, border-color .2s, color .2s;
}
.trinks-history-filter-btn:hover{ background:var(--bg); border-color:var(--accent1); color:var(--accent1); }
.trinks-history-filter-btn[aria-pressed="true"]{ background:var(--accent1); border-color:var(--accent1); color:#fff; }
.trinks-history-filter-all[aria-pressed="true"]{ background:var(--text-secondary); border-color:var(--text-secondary); }
.trinks-history-date-wrap{ display:flex; align-items:center; gap:8px; }
.trinks-history-date-label{ font-size:0.875rem; color:var(--text-secondary); }
.trinks-history-date-input{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:0.9rem;
  background:var(--card);
  color:var(--text-primary);
}
.trinks-history-form .trinks-history-filters{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:12px 16px;
  align-items:end;
}
.trinks-history-form .trinks-field-btn .trinks-btn-submit{ width:auto; margin-top:0; padding:12px 20px; }
.trinks-history-results{
  margin-top:20px;
  max-height:360px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
}
.trinks-history-results::-webkit-scrollbar{ width:8px; }
.trinks-history-results::-webkit-scrollbar-track{ background:var(--bg); border-radius:4px; }
.trinks-history-results::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.trinks-history-results::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }
.trinks-history-list{ display:flex; flex-direction:column; gap:12px; }
.trinks-history-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px;
  font-size:0.9375rem;
  color:var(--text-primary);
}
.trinks-history-card.past{ opacity:0.85; }
.trinks-history-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:12px;
  padding-bottom:10px;
  border-bottom:1px solid var(--border);
  color:var(--text-primary);
}
.trinks-history-header strong{ color:var(--text-primary); }
.trinks-history-status{ font-size:0.8rem; padding:4px 10px; border-radius:8px; font-weight:600; color:var(--text-primary); }
.trinks-history-body .trinks-history-row{ margin:4px 0; color:var(--text-primary); }
.trinks-history-label{ color:var(--muted); margin-right:8px; font-size:0.875rem; }
.trinks-history-actions{ margin-top:12px; padding-top:10px; border-top:1px solid var(--border); }
.trinks-history-cancel-btn{
  padding:8px 16px;
  font-size:0.875rem;
  border:1px solid #c82333;
  border-radius:8px;
  background:#dc3545;
  color:#fff;
  cursor:pointer;
}
.trinks-history-cancel-btn:hover:not(:disabled){ background:#c82333; border-color:#bd2130; color:#fff; }
.trinks-history-cancel-btn:disabled{ opacity:0.7; cursor:not-allowed; }
.trinks-history-review-btn{
  display:inline-flex; align-items:center; gap:6px;
  padding:8px 14px; font-size:0.875rem; font-weight:600;
  border-radius:8px; border:1px solid var(--accent1);
  background:rgba(255,122,0,0.15); color:var(--accent1);
  cursor:pointer; transition:background 0.2s, color 0.2s;
}
.trinks-history-review-btn:hover:not(:disabled){ background:var(--accent1); color:#fff; }
.trinks-history-review-btn:disabled,
.trinks-history-review-btn.reviewed{ opacity:0.7; cursor:default; }
.trinks-history-actions{ display:flex; flex-wrap:wrap; gap:8px; }

/* Modal cancelar agendamento */
.cancel-reason-options{ margin:12px 0 20px; display:flex; flex-direction:column; gap:10px; }
.cancel-reason-option{
  display:flex; align-items:center; gap:10px; padding:12px 14px;
  background:var(--panel); border:1px solid var(--border); border-radius:10px;
  cursor:pointer; transition:border-color 0.2s, background 0.2s;
}
.cancel-reason-option:hover{ border-color:var(--accent1); }
.cancel-reason-option input{ accent-color:var(--accent1); }
.cancel-reason-option span{ font-size:0.9375rem; color:var(--text-primary); }
.trinks-muted{ color:var(--muted); font-size:0.9rem; margin:0; }

/* Fluxo em etapas: serviço escolhido + cards de barbeiros */
.trinks-booking-service-label{
  font-size:1rem;
  font-weight:600;
  color:var(--accent1);
  margin:0 0 20px;
  padding:12px 16px;
  background:rgba(255,122,0,0.08);
  border-radius:10px;
  border:1px solid rgba(255,122,0,0.2);
}
.trinks-booking-free-cut-label{
  display:block;
  font-size:0.8em;
  font-weight:500;
  color:var(--muted);
  margin-top:2px;
}
.trinks-barber-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:16px;
  margin-top:16px;
}
.trinks-barber-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px 16px;
  text-align:center;
  cursor:pointer;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.trinks-barber-card:hover{
  border-color:var(--accent1);
  box-shadow:0 4px 12px rgba(255,122,0,0.15);
}
.trinks-barber-card.selected{
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,122,0,0.3);
}
.trinks-barber-avatar{
  width:64px;
  height:64px;
  border-radius:50%;
  background:var(--accent1);
  color:#fff;
  font-size:1.25rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 12px;
  overflow:hidden;
}
.trinks-barber-photo{ width:100%; height:100%; object-fit:cover; }
.trinks-barber-initials{ display:block; }
.trinks-barber-name{
  font-size:0.9375rem;
  font-weight:600;
  color:var(--text-primary);
  margin:0;
}
.trinks-barber-card-disabled{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}
.trinks-barber-card-disabled:hover{
  border-color:var(--border);
  box-shadow:none;
}
.trinks-barber-disabled-hint{
  display:block;
  font-size:0.75rem;
  color:var(--muted);
  margin-top:6px;
}

/* Modal de agendamento por etapas */
.trinks-booking-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.6);
  z-index:9999;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:16px;
  overflow-y:auto;
  overflow-x:hidden;
}
.trinks-booking-modal{
  background:var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  max-width:480px;
  width:100%;
  min-width:0;
  max-height:90vh;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
  box-shadow:0 20px 60px rgba(0,0,0,0.4);
}
.trinks-booking-modal::-webkit-scrollbar{ width:8px; }
.trinks-booking-modal::-webkit-scrollbar-track{ background:var(--bg); border-radius:4px; }
.trinks-booking-modal::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.trinks-booking-modal::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }
.trinks-booking-modal-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:16px 20px;
  border-bottom:1px solid var(--border);
}
.trinks-booking-modal-title{
  font-size:1.25rem;
  font-weight:700;
  margin:0;
  color:var(--text-primary);
}
.trinks-booking-modal-close{
  width:36px;
  height:36px;
  border:none;
  background:transparent;
  color:var(--muted);
  font-size:28px;
  line-height:1;
  cursor:pointer;
  border-radius:8px;
  padding:0;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:color 0.2s, background 0.2s;
}
.trinks-booking-modal-close:hover{
  color:var(--text-primary);
  background:var(--card);
}
.trinks-booking-modal .trinks-form{
  padding:20px;
}
.trinks-booking-step-indicator{
  font-size:0.875rem;
  color:var(--muted);
  margin:0 0 16px;
}
.booking-step-panel{
  min-height:0;
}
.booking-datetime-in-step1{
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.trinks-booking-modal-footer{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.trinks-btn-ghost{
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:0.9375rem;
}
.trinks-btn-ghost:hover{
  background:var(--card);
  color:var(--text-primary);
}
.trinks-btn-prev-step{
  padding:10px 18px;
  border:1px solid var(--border);
  border-radius:10px;
  background:transparent;
  color:var(--text-secondary);
  cursor:pointer;
  font-size:0.9375rem;
}
.trinks-btn-prev-step:hover{
  background:var(--card);
  color:var(--text-primary);
}
.trinks-btn-next-step{
  padding:10px 18px;
  border:none;
  border-radius:10px;
  background:var(--accent1);
  color:#fff;
  cursor:pointer;
  font-size:0.9375rem;
  font-weight:600;
}
.trinks-btn-next-step:hover:not(:disabled){
  opacity:0.95;
}
.trinks-btn-next-step:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.trinks-booking-confirm-btn{
  margin-top:0;
}
.trinks-booking-confirm-btn.is-loading,
.trinks-booking-confirm-btn:disabled{
  cursor:not-allowed;
  opacity:0.8;
  pointer-events:none;
}
.btn-loading-ball{
  display:inline-block;
  width:8px;
  height:8px;
  margin-right:6px;
  border:2px solid currentColor;
  border-top-color:transparent;
  border-radius:50%;
  animation:btn-loading-spin 0.6s linear infinite;
  vertical-align:middle;
}
@keyframes btn-loading-spin{
  to{ transform:rotate(360deg); }
}

/* Nossa equipe (abaixo do horário) */
.trinks-team-section{ margin-top:32px; }
.trinks-team-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(140px, 1fr));
  gap:20px;
  margin-top:16px;
}
.trinks-team-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 16px;
  text-align:center;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.trinks-team-card:hover{
  border-color:var(--accent1);
  box-shadow:0 4px 12px rgba(255,122,0,0.12);
}
.trinks-team-avatar{
  width:80px;
  height:80px;
  border-radius:50%;
  margin:0 auto 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}
.trinks-team-initials{
  color:#fff;
  font-size:1.5rem;
  font-weight:700;
}
.trinks-team-photo{ width:100%; height:100%; object-fit:cover; }
.trinks-team-name{ font-size:0.9375rem; font-weight:600; color:var(--text-primary); margin:0; }

/* Avaliações */
.trinks-reviews-section{ margin-top:32px; padding-top:24px; border-top:1px solid var(--border); }
.trinks-reviews-list{ margin-bottom:24px; }
.trinks-reviews-empty{ color:var(--muted); font-size:0.9375rem; margin:0; }
.trinks-review-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:12px;
  padding:16px 20px;
  margin-bottom:12px;
}
.trinks-review-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  margin-bottom:8px;
}
.trinks-review-author{ font-weight:600; color:var(--text-primary); font-size:0.9375rem; }
.trinks-review-stars{ font-size:0.875rem; }
.trinks-review-stars .bi-star-fill{ color:var(--accent1); }
.trinks-review-stars .bi-star{ color:var(--muted); }
.trinks-review-barber{ font-size:0.8125rem; color:var(--muted); margin-bottom:6px; }
.trinks-review-comment{ font-size:0.9375rem; color:var(--text-secondary); line-height:1.4; margin:0; }
.trinks-review-date{ font-size:0.75rem; color:var(--muted); margin-top:8px; }
.trinks-reviews-list-modal .trinks-reviews-list-content{
  max-height:60vh; overflow-y:auto; padding-right:4px;
}
.trinks-reviews-form-wrap{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px;
  margin-top:16px;
}
.trinks-reviews-form-title{ font-size:1rem; font-weight:600; color:var(--text-primary); margin:0 0 16px; }
.trinks-review-form textarea{
  width:100%;
  padding:12px 14px;
  border-radius:10px;
  border:1px solid var(--border);
  background:var(--panel);
  color:var(--text-primary);
  font-size:0.9375rem;
  font-family:inherit;
  resize:vertical;
  min-height:80px;
}
.trinks-review-form textarea:focus{
  outline:none;
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,122,0,0.2);
}
.trinks-rating-stars{
  display:flex;
  gap:8px;
  margin:8px 0 16px;
}
.trinks-star{
  background:none;
  border:none;
  padding:0;
  cursor:pointer;
  color:var(--border);
  font-size:1.75rem;
  transition:color 0.2s, transform 0.15s;
}
.trinks-star:hover{ color:var(--accent1); transform:scale(1.1); }
.trinks-star.filled{ color:var(--accent1); }
.trinks-rating-stars .trinks-star .bi-star-fill{ display:none; }
.trinks-rating-stars .trinks-star .bi-star{ display:inline; }
.trinks-rating-stars .trinks-star.filled .bi-star-fill{ display:inline; }
.trinks-rating-stars .trinks-star.filled .bi-star{ display:none; }
.trinks-review-submit{ margin-top:16px; }

/* Form: date/time blocks */
.page-public .booking-datetime-title,
.page-public .booking-time-group-title{ color:var(--text-primary); }
.page-public .booking-nav-btn{ color:var(--accent1); }
.page-public .booking-date-strip-wrap{ border-bottom-color:var(--border); min-width:0; }
.page-public .booking-date-item{ background:var(--card); border-color:var(--border); color:var(--text-secondary); }
.page-public .booking-date-item.selected{ background:rgba(255,122,0,0.15); border-color:var(--accent1); color:var(--accent1); }
.page-public .booking-date-item .day-abbr{ color:var(--muted); }
.page-public .booking-date-item.selected .day-abbr{ color:var(--accent1); }
.page-public .booking-date-item .day-num{ color:var(--text-primary); }
.page-public .booking-date-item.selected .day-num{ color:var(--accent1); }
.page-public .booking-time-btn{ background:var(--card); border:1px solid var(--border); color:var(--text-primary); }
.page-public .booking-time-btn:hover{ border-color:var(--accent1); background:rgba(255,122,0,0.08); }
.page-public .booking-time-btn.selected{ background:var(--accent1); color:#fff; border-color:var(--accent1); }
.page-public .booking-time-placeholder{ color:var(--muted); }

/* ====== Escolha o seu horário (link público) ====== */
.booking-datetime-block{
  margin-top:24px;
  margin-bottom:20px;
}

.booking-datetime-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:16px;
  gap:12px;
}

.booking-datetime-title{
  font-size:18px;
  font-weight:600;
  color:var(--text-primary);
  margin:0;
  flex:1;
  text-align:center;
}

.booking-nav-btn{
  background:transparent;
  border:none;
  color:var(--accent1);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:8px 0;
  transition:opacity 0.2s ease;
}

.booking-nav-btn:hover{
  opacity:0.9;
}

.booking-nav-btn i{
  font-size:16px;
}

.booking-date-strip-wrap{
  overflow-x:auto;
  overflow-y:hidden;
  padding-bottom:8px;
  margin-bottom:20px;
  border-bottom:1px solid var(--border);
  -webkit-overflow-scrolling:touch;
}
.booking-date-strip-wrap::-webkit-scrollbar{ height:8px; }
.booking-date-strip-wrap::-webkit-scrollbar-track{ background:var(--bg); border-radius:4px; }
.booking-date-strip-wrap::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.booking-date-strip-wrap::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }
/* Esconde barra horizontal na aba Agendar */
#tab-agendar .booking-date-strip-wrap{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#tab-agendar .booking-date-strip-wrap::-webkit-scrollbar{ display:none; }

.booking-date-strip{
  display:flex;
  gap:10px;
  min-width:min-content;
  padding:4px 0;
}

.booking-date-item{
  flex-shrink:0;
  width:64px;
  padding:12px 8px;
  text-align:center;
  background:var(--card);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:12px;
  cursor:pointer;
  transition:all 0.2s ease;
}

.booking-date-item:hover{
  border-color:rgba(241,90,0,0.3);
  background:rgba(241,90,0,0.06);
}

.booking-date-item.selected{
  background:rgba(241,90,0,0.15);
  border-color:var(--accent1);
  color:var(--accent1);
  box-shadow:0 0 0 1px var(--accent1);
}

.booking-date-item .day-abbr{
  display:block;
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.02em;
  color:var(--muted);
  margin-bottom:4px;
}

.booking-date-item.selected .day-abbr{
  color:var(--accent1);
}

.booking-date-item .day-num{
  display:block;
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
}

.booking-date-item.selected .day-num{
  color:var(--accent1);
}

.booking-date-item.selected::after{
  content:'';
  display:block;
  height:3px;
  background:var(--accent1);
  border-radius:2px;
  margin-top:8px;
  width:80%;
  margin-left:auto;
  margin-right:auto;
}

.booking-time-section{
  margin-top:20px;
  max-height:280px;
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:6px;
}
.booking-time-section::-webkit-scrollbar{ width:8px; }
.booking-time-section::-webkit-scrollbar-track{ background:var(--bg); border-radius:4px; }
.booking-time-section::-webkit-scrollbar-thumb{ background:var(--border); border-radius:4px; }
.booking-time-section::-webkit-scrollbar-thumb:hover{ background:var(--text-secondary); }

.booking-time-placeholder{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  padding:16px;
}

.booking-time-groups{
  display:flex;
  flex-direction:column;
  gap:20px;
}

.booking-time-group-title{
  font-size:14px;
  font-weight:600;
  color:var(--text-primary);
  margin-bottom:12px;
}

.booking-time-btns{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

.booking-time-btn{
  padding:12px 18px;
  border-radius:10px;
  border:1px solid var(--accent1);
  background:var(--card);
  color:var(--accent1);
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.2s ease;
  min-width:72px;
}

.booking-time-btn:hover{
  background:rgba(241,90,0,0.12);
  border-color:var(--accent1);
}

.booking-time-btn.selected{
  background:rgba(241,90,0,0.2);
  border-color:var(--accent1);
  color:var(--accent1);
  box-shadow:0 0 0 2px rgba(241,90,0,0.3);
}

.booking-time-btn:disabled,
.booking-time-btn.occupied{
  opacity:0.5;
  cursor:not-allowed;
  border-color:rgba(255,255,255,0.1);
  color:var(--muted);
}

.booking-time-btn.occupied{
  text-decoration:line-through;
}

/* Forma de pagamento – 4 caixas (público) */
.payment-method-boxes{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
  margin-bottom:20px;
}
.payment-method-box{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:14px 16px;
  border-radius:12px;
  border:2px solid var(--border);
  background:var(--card);
  cursor:pointer;
  transition:border-color .2s, box-shadow .2s, background .2s;
}
.payment-method-box:hover{
  border-color:var(--accent1);
  background:rgba(255,122,0,0.06);
}
.payment-method-box input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.payment-method-box:has(input:checked){
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(255,122,0,0.35);
  background:rgba(255,122,0,0.12);
}
.payment-method-box:has(input:checked) .payment-method-label{
  color:var(--accent1);
  font-weight:700;
}
.payment-method-label{
  font-size:0.9375rem;
  font-weight:600;
  color:var(--text-primary);
}

/* ====== Aba Agendar — console de recepção (visual distinto) ====== */
#tab-agendar {
  overflow-x: hidden;
  padding-bottom: 2rem;
}

#tab-agendar .agendar-console {
  max-width: 1180px;
  margin: 0 auto;
}

#tab-agendar .agendar-console-top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  padding: 1.35rem 0 1.5rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#tab-agendar .agendar-console-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent1);
  margin-bottom: 0.45rem;
}

#tab-agendar .agendar-console-title {
  margin: 0 0 0.35rem 0;
  font-size: clamp(1.45rem, 3vw, 1.85rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  line-height: 1.15;
}

#tab-agendar .agendar-console-sub {
  margin: 0;
  max-width: 36rem;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

#tab-agendar .agendar-console-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.65rem;
}

#tab-agendar .agendar-console-steps li {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.65rem 0.35rem 0.4rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 6px;
}

#tab-agendar .agendar-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  font-size: 0.65rem;
  font-weight: 800;
  border-radius: 4px;
  background: color-mix(in srgb, var(--accent1) 22%, transparent);
  color: var(--accent1);
}

.agendar-trinks-wrap {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

#tab-agendar .agendar-workbench {
  position: relative;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 4px 12px 12px 12px;
  padding: 0;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.04),
    0 12px 40px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}

#tab-agendar .agendar-workbench::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(180deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 70%, #000));
  border-radius: 4px 0 0 4px;
  pointer-events: none;
}

#tab-agendar .agendar-workbench-head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  flex-wrap: wrap;
  padding: 1.35rem 1.5rem 0 1.65rem;
}

#tab-agendar .agendar-workbench-tag {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

#tab-agendar .agendar-workbench-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

#tab-agendar .agendar-workbench-lead {
  margin: 0.35rem 1.5rem 1.1rem 1.65rem !important;
  padding-bottom: 1rem;
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
  font-size: 0.875rem !important;
}

#tab-agendar .trinks-agendar-form {
  padding: 0 1.5rem 1.5rem 1.65rem;
}

#tab-agendar .agendar-pane {
  padding: 1rem 1.1rem 1.2rem;
  background: rgba(0, 0, 0, 0.22);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: 10px;
}

#tab-agendar .agendar-pane--right {
  background: rgba(0, 0, 0, 0.28);
}

#tab-agendar .agendar-pane-head {
  margin: 0 0 0.85rem 0;
  padding-bottom: 0.65rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

#tab-agendar .agendar-pane-head--pay {
  margin-top: 1.35rem;
}

#tab-agendar .agendar-pane-tag {
  display: block;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent1);
  margin-bottom: 0.2rem;
}

#tab-agendar .agendar-pane-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
}

#tab-agendar .agendar-datetime-block {
  margin-top: 0;
}

#tab-agendar .agendar-loyalty-banner {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--accent1) 28%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--accent1) 10%, var(--card));
  font-size: 0.9rem;
  line-height: 1.45;
}

#tab-agendar .trinks-form label {
  margin-top: 1rem;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: var(--muted);
}

#tab-agendar .trinks-form label:first-of-type {
  margin-top: 0;
}

#tab-agendar .trinks-form input,
#tab-agendar .trinks-form select {
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  padding: 12px 14px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#tab-agendar .trinks-form input:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent1) 55%, var(--border));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent1) 15%, transparent);
}

#tab-agendar .booking-datetime-nav {
  padding: 6px 0;
  margin-bottom: 12px;
}

#tab-agendar .booking-datetime-title {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  font-weight: 700;
}

#tab-agendar .booking-nav-btn {
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary);
  font-size: 0.8rem;
}

#tab-agendar .booking-nav-btn:hover {
  border-color: color-mix(in srgb, var(--accent1) 40%, transparent);
  color: var(--accent1);
  opacity: 1;
}

#tab-agendar .booking-date-item {
  border-radius: 8px;
  width: 58px;
  padding: 10px 6px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
}

#tab-agendar .booking-date-item.selected {
  background: color-mix(in srgb, var(--accent1) 18%, transparent);
  box-shadow: none;
}

#tab-agendar .booking-date-item.selected::after {
  border-radius: 1px;
  height: 2px;
}

#tab-agendar .booking-time-group-title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 10px;
}

#tab-agendar .booking-time-btn {
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 0.8125rem;
  min-width: 0;
}

#tab-agendar .booking-time-btn.selected {
  background: var(--accent1);
  color: #fff !important;
  border-color: var(--accent1);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent1) 45%, transparent);
}

#tab-agendar .agendar-payment-grid.payment-method-boxes {
  gap: 10px;
}

#tab-agendar .agendar-payment-grid .payment-method-box {
  border-radius: 8px;
  border-width: 1px;
  padding: 12px 10px;
}

#tab-agendar .agendar-payment-grid .payment-method-label {
  font-size: 0.8125rem;
}

#tab-agendar .agendar-submit-pill.trinks-btn-submit {
  width: 100%;
  margin-top: 1.25rem;
  padding: 1rem 1.5rem;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
  background: linear-gradient(135deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 82%, #1a1a1a)) !important;
  border: none;
  box-shadow: 0 8px 28px color-mix(in srgb, var(--accent1) 42%, transparent);
  transition: transform 0.2s ease, filter 0.2s ease, box-shadow 0.2s ease;
}

#tab-agendar .agendar-submit-pill.trinks-btn-submit:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
  opacity: 1;
}

#tab-agendar .trinks-barber-cards {
  gap: 12px;
}

#tab-agendar .trinks-team-card {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#tab-agendar .trinks-team-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--accent1) 45%, transparent);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

#tab-agendar .trinks-team-card.agendar-select-card.selected {
  border-color: var(--accent1);
  background: color-mix(in srgb, var(--accent1) 14%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent1) 35%, transparent);
}

#tab-agendar .agendar-category-title {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom: 8px;
}

#tab-agendar .trinks-service-cards-grid {
  gap: 12px;
}

#tab-agendar .trinks-service-card.agendar-select-card {
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.03);
  transition: border-color 0.2s ease, transform 0.2s ease;
}

#tab-agendar .trinks-service-card.agendar-select-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
}

#tab-agendar .trinks-service-card.agendar-select-card.selected {
  border-color: var(--accent1);
  background: color-mix(in srgb, var(--accent1) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent1) 35%, transparent);
}

/* Desktop: duas colunas */
@media (min-width: 900px) {
  #tab-agendar .trinks-agendar-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
  }
  #tab-agendar .agendar-form-col {
    min-width: 0;
  }
  #tab-agendar .agendar-form-col-right {
    position: sticky;
    top: 20px;
  }
  #tab-agendar .booking-time-section {
    max-height: 340px;
  }
  #tab-agendar .booking-time-groups {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  #tab-agendar .agendar-payment-grid.payment-method-boxes {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 640px) {
  #tab-agendar .agendar-console-top {
    flex-direction: column;
    align-items: flex-start;
  }
  #tab-agendar .agendar-console-steps {
    width: 100%;
  }
  #tab-agendar .agendar-payment-grid.payment-method-boxes {
    grid-template-columns: repeat(2, 1fr);
  }
  #tab-agendar .booking-time-groups {
    grid-template-columns: 1fr;
  }
}

.trinks-agendar-section .agendar-desc {
  margin-bottom: 24px;
}

.trinks-agendar-section .trinks-muted {
  font-size: 0.9375rem;
  color: var(--muted);
}
.trinks-agendar-datetime-row{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  margin-bottom:0;
}
.trinks-agendar-field{
  margin-top:14px;
}
.trinks-agendar-field label{
  margin-top:0;
}
.trinks-agendar-cards{
  margin-top:12px;
  margin-bottom:20px;
}
.agendar-category-block{
  margin-bottom:20px;
}
.agendar-category-block:last-child{
  margin-bottom:0;
}
.agendar-category-title{
  font-size:0.95rem;
  font-weight:600;
  color:var(--text);
  margin:0 0 10px 0;
  padding-bottom:4px;
}
.trinks-barber-cards{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(120px, 1fr));
  gap:16px;
}
.trinks-service-cards-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
  gap:16px;
}
.trinks-agendar-cards .agendar-select-card{
  cursor:pointer;
  border:2px solid var(--border);
  font:inherit;
  text-align:center;
}
.trinks-agendar-cards .agendar-select-card:hover{
  border-color:var(--accent1);
  box-shadow:0 4px 12px rgba(255,122,0,0.15);
}
.trinks-agendar-cards .agendar-select-card.selected{
  border-color:var(--accent1);
  box-shadow:0 0 0 2px var(--accent1);
  background:rgba(255,122,0,0.1);
}
.trinks-service-placeholder{
  font-size:2rem;
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.tabs{
  display:flex;
  gap:12px;
  margin-top:20px;
  align-items:center;
  border-bottom:1px solid rgba(255,255,255,0.05);
  padding-bottom:8px;
  flex-wrap:wrap;
}

/* Agenda do dia / Pendentes / Histórico — ocupam toda a largura da área */
.tabs.tabs-agenda{
  gap:0;
  flex-wrap:nowrap;
}
.tabs.tabs-agenda .tab-btn{
  flex:1;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  padding:12px 8px;
  text-align:center;
}
.tabs.tabs-agenda .tab-btn i{
  flex-shrink:0;
}

.tab{
  flex:1;
  min-width:110px;
  padding:8px 6px;
  color:var(--muted);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
}

.tab.active{
  color:var(--accent1);
  border-bottom:3px solid var(--accent1);
  padding-bottom:6px;
}

.list-card{
  background:var(--card);
  border-radius:14px;
  padding:18px;
  margin-top:12px;
  border:1px solid rgba(255,255,255,0.02);
  color:var(--muted);
}

.empty{padding:28px;font-size:16px;text-align:center}

.dashboard-grid{
  display:flex;
  flex-direction:column;
  gap:18px;
}

.pending-columns-wrap{
  width:100%;
  overflow-x:auto;
}
.pending-columns{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
  gap:20px;
  align-items:start;
}
/* Quando há apenas uma coluna de pendentes, aumentar o tamanho */
.pending-columns.single-column{
  grid-template-columns:1fr;
  max-width:800px;
}
.pending-columns.single-column .pending-col{
  min-width:600px;
  max-width:800px;
}
.pending-col{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  overflow:hidden;
  min-width:320px;
  box-shadow:0 2px 16px rgba(0,0,0,0.18);
  display:flex;
  flex-direction:column;
}
.pending-col-header{
  padding:18px 20px;
  font-weight:700;
  font-size:16px;
  color:var(--text-primary);
  background:rgba(255,255,255,0.06);
  border-bottom:1px solid var(--border);
  text-align:center;
  letter-spacing:0.03em;
  text-transform:uppercase;
  font-size:15px;
}
.pending-col-list{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:16px;
  min-height:60px;
}
.pending-col-list .appointment-card{
  margin:0;
  width:100%;
}

/* Card compacto na aba Pendentes (uma linha por info) */
.appointment-card--compact{
  padding:16px 18px;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.appointment-card--compact .apt-card-top{
  margin-bottom:0;
  padding-bottom:0;
  border-bottom:none;
  display:flex;
  justify-content:flex-start;
  align-items:center;
}
.appointment-card--compact .apt-card-rows{
  display:flex;
  flex-direction:column;
  gap:10px;
  flex:1;
}
.appointment-card--compact .apt-row{
  display:grid;
  grid-template-columns:80px 1fr;
  gap:12px;
  align-items:center;
  font-size:13px;
  line-height:1.5;
  padding:2px 0;
}
.appointment-card--compact .apt-row-label{
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--muted);
  flex-shrink:0;
  text-align:left;
}
.appointment-card--compact .apt-row-value{
  color:var(--text-primary);
  font-weight:500;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  min-width:0;
  text-align:left;
}
.appointment-card--compact .apt-card-actions{
  margin-top:4px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,0.08);
  gap:10px;
  display:flex;
  flex-wrap:wrap;
  justify-content:flex-start;
}
.appointment-card--compact .btn-apt{
  font-size:12px;
  padding:7px 14px;
  flex:0 0 auto;
}

/* Pendentes no mobile: coluna do barbeiro não forçar 600px + cards mais compactos */
@media (max-width:767px){
  .pending-columns{
    grid-template-columns:1fr;
    gap:12px;
  }
  .pending-columns.single-column{
    max-width:none;
  }
  .pending-columns.single-column .pending-col{
    min-width:0;
    max-width:100%;
    width:100%;
  }
  .pending-col{
    min-width:0;
    width:100%;
    border-radius:12px;
  }
  .pending-col-header{
    padding:10px 12px;
    font-size:12px;
    text-align:left;
    white-space:normal;
    word-break:break-word;
    line-height:1.3;
    letter-spacing:0.02em;
  }
  .pending-col-list{
    padding:10px;
    gap:10px;
  }
  #tab-pendentes .appointment-card--compact{
    padding:10px 12px;
    gap:8px;
  }
  #tab-pendentes .appointment-card--compact .apt-card-rows{
    gap:5px;
  }
  #tab-pendentes .appointment-card--compact .apt-row{
    grid-template-columns:minmax(64px,72px) 1fr;
    gap:8px;
    font-size:12px;
    line-height:1.3;
    padding:0;
  }
  #tab-pendentes .appointment-card--compact .apt-row-label{
    font-size:10px;
  }
  #tab-pendentes .appointment-card--compact .apt-card-actions{
    margin-top:2px;
    padding-top:8px;
    gap:8px;
  }
  #tab-pendentes .appointment-card--compact .btn-apt{
    font-size:11px;
    padding:6px 10px;
  }
}

.panel-side{
  background:var(--card);
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.04);
  padding:20px;
}

.panel-main{
  background:var(--panel);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.04);
  padding:20px;
}

.support-card{
  margin-top:16px;
  padding:16px;
  border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  border:1px dashed rgba(255,255,255,0.08);
  color:var(--muted);
  font-size:13px;
}

.support-card strong{color:var(--text-primary);display:block;margin-bottom:6px}

.tag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,0.05);
  font-size:12px;
  color:var(--accent1);
  margin-top:10px;
}

.modal{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  z-index:80;
}

.modal .box{
  width:92%;
  max-width:420px;
  background:var(--panel);
  padding:20px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.03);
}

/* Modal overlay (dashboard) */
.modal-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.6);
  z-index:80;
  padding:20px;
}
.modal-overlay.is-open{
  display:flex;
}
.modal-edit-client-card .profile-info-field{
  margin-bottom:1rem;
}
.modal-edit-client-card .profile-info-field:last-of-type{
  margin-bottom:0;
}
.modal-card{
  width:100%;
  max-width:420px;
  background:var(--card);
  padding:24px;
  border-radius:14px;
  border:1px solid var(--border);
  box-shadow:0 4px 20px rgba(0,0,0,0.3);
}
.modal-card h3{
  margin:0 0 16px 0;
  font-size:18px;
  color:var(--text-primary);
}

.modal-card-header--with-close {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:4px;
}
.modal-card-header--with-close h3 { margin:0; flex:1; }
.modal-close-btn {
  flex-shrink:0;
  width:36px;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:none;
  background:transparent;
  color:var(--muted);
  cursor:pointer;
  border-radius:8px;
  font-size:20px;
  line-height:1;
  transition:color 0.15s, background 0.15s;
}
.modal-close-btn:hover {
  color:var(--text-primary);
  background:rgba(255,255,255,0.06);
}
.modal-close-btn i { pointer-events:none; }

/* ====== TanaAlert - Toast (alerta) embaixo no centro / Modal (confirm) ====== */
/* Toast: aparece embaixo no meio e some sozinho */
.tana-alert-toast{
  position:fixed;
  left:50%;
  bottom:32px;
  transform:translateX(-50%) translateY(24px);
  max-width:min(420px, calc(100vw - 32px));
  padding:14px 20px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--card);
  box-shadow:0 8px 24px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  gap:12px;
  z-index:10000;
  opacity:0;
  visibility:hidden;
  transition:transform 0.25s ease, opacity 0.25s ease, visibility 0.25s ease;
  pointer-events:none;
}
.tana-alert-toast--show{
  transform:translateX(-50%) translateY(0);
  opacity:1;
  visibility:visible;
}
.tana-alert-toast-icon{
  flex-shrink:0;
  font-size:22px;
  color:var(--accent1);
}
.tana-alert-toast--success .tana-alert-toast-icon{ color:#22c55e; }
.tana-alert-toast--error .tana-alert-toast-icon{ color:#f03e3e; }
.tana-alert-toast-text{
  font-size:14px;
  line-height:1.4;
  color:var(--text-primary);
}
.tana-alert-toast-text strong{ font-weight:700; margin-right:4px; }

.tana-alert-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.65);
  z-index:9999;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.tana-alert-overlay.tana-alert-overlay--open{
  opacity:1;
  visibility:visible;
}
.tana-alert-box{
  width:100%;
  max-width:380px;
  background:var(--card);
  padding:24px;
  border-radius:var(--radius, 18px);
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
  text-align:center;
  transform:scale(0.95);
  transition:transform 0.2s ease;
}
.tana-alert-overlay--open .tana-alert-box{
  transform:scale(1);
}
.tana-alert-icon{
  width:52px;
  height:52px;
  margin:0 auto 16px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:26px;
  color:var(--accent1);
  background:rgba(255,122,0,0.12);
}
.tana-alert-icon--error{
  color:#f03e3e;
  background:rgba(240,62,62,0.12);
}
.tana-alert-icon--error i{ color:#f03e3e; }
.tana-alert-icon--success{
  color:#22c55e;
  background:rgba(34,197,94,0.12);
}
.tana-alert-icon--success i{ color:#22c55e; }
.tana-alert-icon--confirm{
  color:var(--accent1);
  background:rgba(255,122,0,0.12);
}
.tana-alert-title{
  margin:0 0 10px 0;
  font-size:18px;
  font-weight:700;
  color:var(--text-primary);
}
.tana-alert-message{
  margin:0 0 20px 0;
  font-size:15px;
  line-height:1.5;
  color:var(--text-secondary);
}
.tana-alert-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}
.tana-alert-btn{
  min-width:100px;
}
.tana-alert-btn--primary{
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  border:none;
  color:#0b0b0b;
  font-weight:700;
  padding:10px 20px;
  border-radius:10px;
  cursor:pointer;
  transition:transform .2s ease, opacity .2s ease;
}
.tana-alert-btn--primary:hover{
  transform:translateY(-1px);
  opacity:.95;
}
.tana-alert-btn--secondary{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
  padding:10px 18px;
  border-radius:10px;
  cursor:pointer;
  transition:background .15s, color .15s;
}
.tana-alert-btn--secondary:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text-primary);
}
.tana-alert-btn--danger{
  background:#c92a2a;
  border:none;
  color:#fff;
  font-weight:700;
  padding:10px 20px;
  border-radius:10px;
  cursor:pointer;
}
.tana-alert-btn--danger:hover{ background:#b02a2a; }
.tana-alert-btn--danger-outline{
  background:transparent;
  border:1px solid rgba(255,107,107,0.5);
  color:#ff6b6b;
  padding:10px 18px;
  border-radius:10px;
  cursor:pointer;
}
.tana-alert-btn--danger-outline:hover{
  background:rgba(255,107,107,0.12);
}

.evaluation-support-legend {
  margin:16px 0 0 0;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:13px;
}

/* Modal avaliação do sistema (estrelas) */
.evaluation-stars {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.evaluation-star {
  background:none;
  border:none;
  padding:4px;
  cursor:pointer;
  color:var(--muted);
  font-size:28px;
  line-height:1;
  transition:color 0.15s ease, transform 0.1s ease;
}
.evaluation-star:hover,
.evaluation-star.filled {
  color:var(--accent1, #ff7a00);
}
.evaluation-star:hover { transform:scale(1.1); }
.evaluation-star i { pointer-events:none; }

.evaluation-bonus-legend {
  margin: 0 0 16px 0;
  padding: 10px 14px;
  background: rgba(255, 122, 0, 0.12);
  border: 1px solid rgba(255, 122, 0, 0.25);
  border-radius: 8px;
  font-size: 14px;
  color: var(--text-primary);
}
.evaluation-bonus-legend i { color: var(--accent1, #ff7a00); margin-right: 6px; }

/* Modal check-out: detalhes do agendamento + botões sempre visíveis */
.checkout-modal-card {
  display: flex;
  flex-direction: column;
  max-height: min(90vh, 560px);
}
.checkout-modal-card .checkout-modal-body {
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}
.checkout-modal-card .modal-actions {
  flex-shrink: 0;
  margin-top: 20px;
}
.checkout-modal-details {
  font-size: 14px;
}
.checkout-modal-detail-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}
.checkout-modal-label {
  color: var(--text-secondary);
  flex-shrink: 0;
}
/* Selects do modal de check-out: texto claro */
.checkout-modal-body select{
  color:var(--text-primary);
}
.checkout-modal-body select option{
  background:var(--panel);
  color:var(--text-primary);
}

/* Modal detalhes do plano (info + botão Gerar QR Code) */
.modal-plan-detail-card { max-width: 420px; }
@media (min-width: 768px) {
  .modal-plan-detail-card { max-width: 900px; }
  .modal-plan-detail-card .plan-detail-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
  }
  .modal-plan-detail-card .plan-detail-col-right {
    position: sticky;
    top: 0;
  }
}
.modal-plan-detail-card .plan-detail-content { margin-bottom:0; }
.modal-plan-detail-card .plan-modal-title { margin:0 0 8px 0; font-size:1.25rem; display:flex; align-items:center; gap:0.5rem; }
.modal-plan-detail-card .plan-modal-price { font-size:1.5rem; font-weight:700; color:var(--accent1, #f15a00); margin-bottom:16px; }
.modal-plan-detail-card .plan-modal-features { list-style:none; margin:0 0 20px 0; padding:0; font-size:0.9rem; color:var(--text-secondary); }
.modal-plan-detail-card .plan-modal-features li { padding:6px 0; display:flex; align-items:center; gap:8px; }
.modal-plan-detail-card .plan-modal-features li i { color:var(--success, #22c55e); flex-shrink:0; }
.modal-plan-detail-card .plan-modal-features li.plan-modal-feature--excluded i { color:#ef4444 !important; }
.modal-plan-detail-card .plan-modal-features li.plan-modal-feature--excluded { opacity:0.85; }
.modal-plan-detail-card .plan-action-row { margin:16px 0; }
.modal-plan-detail-card #btn-gerar-qrcode-plan { width:100%; }
.modal-plan-detail-card .plan-switch-breakdown {
  margin-bottom:16px;
  padding:12px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  font-size:0.9rem;
  color:var(--text-primary);
  border:1px solid var(--border);
}
.modal-plan-detail-card .plan-breakdown-row { display:flex; justify-content:space-between; padding:4px 0; color:var(--text-primary); }
.modal-plan-detail-card .plan-breakdown-credit { color:var(--success, #34d399); }
.modal-plan-detail-card .plan-breakdown-cupom { color:var(--success, #34d399); }
.modal-plan-detail-card .plan-breakdown-fee { color:var(--text-secondary); }
.modal-plan-detail-card .plan-breakdown-total { font-weight:700; margin-top:8px; padding-top:8px; border-top:1px solid var(--border); color:var(--text-primary); }
.modal-plan-detail-card .plan-same-plan-msg {
  margin-bottom:16px;
  padding:12px;
  background:rgba(255,255,255,0.06);
  border-radius:10px;
  border:1px solid var(--border);
}
.modal-plan-detail-card .plan-same-plan-msg p { margin:0; color:var(--text-secondary); }
.modal-plan-detail-card .plan-no-fee-notice { display:flex; align-items:center; gap:8px; padding:10px 12px; margin-bottom:12px; background:rgba(34,197,94,0.12); border:1px solid rgba(34,197,94,0.3); border-radius:10px; font-size:0.9rem; color:var(--text-primary); }
.modal-plan-detail-card .plan-no-fee-notice i { color:var(--success, #22c55e); flex-shrink:0; }
.modal-plan-detail-card .plan-switch-explanation {
  display:flex; align-items:flex-start; gap:10px; padding:12px; margin-bottom:12px;
  background:rgba(14,165,233,0.08); border:1px solid rgba(14,165,233,0.25); border-radius:10px;
  font-size:0.85rem; color:var(--text-primary);
}
.modal-plan-detail-card .plan-switch-explanation i { color:var(--accent1); flex-shrink:0; margin-top:2px; }
.modal-plan-detail-card .plan-switch-explanation ul { margin:6px 0 0 0; padding-left:18px; }
.modal-plan-detail-card .plan-switch-explanation li { margin:4px 0; color:var(--text-secondary); }
.modal-plan-detail-card .plan-breakdown-title { font-weight:600; margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); font-size:0.9rem; color:var(--text-primary); }

/* Modal Ajustar equipe após downgrade */
.modal-adjust-barbers-card { max-width: 480px; }
.adjust-barbers-list { max-height: 320px; overflow-y: auto; }
.adjust-barbers-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px; background:rgba(255,255,255,0.06); border:1px solid var(--border); border-radius:10px; margin-bottom:8px; }
.adjust-barbers-item .adjust-barber-name { font-weight:500; color:var(--text-primary); }
.adjust-barbers-item .adjust-barber-email { font-size:0.85rem; color:var(--text-secondary); }
.adjust-barbers-item .adjust-barber-actions { display:flex; gap:8px; flex-shrink:0; }
.adjust-barbers-done { text-align:center; padding:20px 0; }
.adjust-barbers-done .btn { margin-top:12px; }
.edit-service-status-row{
  display:flex;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.edit-service-status-row .muted{ flex:1; min-width:0; font-size:14px; }
.edit-service-image-field{ margin-bottom:20px; }
.edit-service-image-wrap{
  display:flex;
  gap:24px;
  align-items:flex-start;
  flex-wrap:wrap;
}
.edit-service-current-image{
  width:120px;
  height:120px;
  border-radius:12px;
  overflow:hidden;
  background:var(--bg);
  border:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.edit-service-current-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.edit-service-no-image{
  font-size:13px;
  text-align:center;
  padding:12px;
}
.edit-service-image-upload{ flex:1; min-width:0; }
.edit-service-new-preview{
  margin-top:12px;
}
.edit-service-new-preview img{
  max-width:120px;
  max-height:120px;
  border-radius:8px;
  object-fit:cover;
  border:1px solid var(--border);
}
.modal-actions{
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:20px;
  padding-top:16px;
  border-top:1px solid var(--border);
}
.btn-ghost{
  background:transparent;
  border:1px solid var(--border);
  color:var(--text-secondary);
}
.btn-ghost:hover{
  background:rgba(255,255,255,0.05);
  color:var(--text-primary);
}
.btn-danger-outline{
  border:1px solid rgba(255,107,107,0.4);
  color:#ff6b6b;
  background:transparent;
}
.btn-danger-outline:hover{
  background:rgba(255,107,107,0.12);
  border-color:#ff6b6b;
}
.btn-danger{
  background:#c92a2a;
  border-color:#c92a2a;
  color:#fff;
}
.btn-danger:hover{
  background:#b02a2a;
  border-color:#b02a2a;
  color:#fff;
}
.modal-card--danger h3{
  color:#f03e3e;
}
.modal-delete-warning{
  margin:0 0 12px 0;
  font-size:14px;
  color:var(--text-secondary);
  line-height:1.5;
}
.modal-delete-warning strong{
  color:var(--text-primary);
}

/* Modal de planos (registro) */
.plan-modal-overlay{
  position:fixed;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.75);
  z-index:100;
  padding:20px;
  overflow-y:auto;
}
.plan-modal-box{
  width:100%;
  max-width:960px;
  margin:auto;
  background:var(--panel);
  padding:28px;
  border-radius:18px;
  border:1px solid var(--border);
  box-shadow:0 8px 32px rgba(0,0,0,0.4);
}
.plan-modal-title{
  text-align:center;
  font-size:22px;
  margin-bottom:8px;
  color:var(--text-primary);
}
.plan-modal-subtitle{
  text-align:center;
  color:var(--muted);
  font-size:14px;
  margin-bottom:24px;
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(200px, 1fr));
  gap:16px;
}
.plan-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:14px;
  padding:20px;
  display:flex;
  flex-direction:column;
  transition:border-color .2s, box-shadow .2s;
}
.plan-card:hover{
  border-color:var(--accent1);
  box-shadow:0 4px 16px rgba(241,90,0,0.15);
}
.plan-card.popular{
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(241,90,0,0.3);
  position:relative;
}
.plan-card .plan-badge{
  position:absolute;
  top:-10px;
  left:50%;
  transform:translateX(-50%);
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#0b0b0b;
  font-size:11px;
  font-weight:700;
  padding:4px 12px;
  border-radius:999px;
  white-space:nowrap;
}
.plan-card .plan-name{
  font-size:18px;
  font-weight:700;
  margin-bottom:12px;
  color:var(--text-primary);
  padding-top:4px;
}
.plan-card.popular .plan-name{margin-top:8px}
.plan-price-old{
  font-size:14px;
  color:var(--muted);
  text-decoration:line-through;
  margin-bottom:2px;
}
.plan-price{
  font-size:24px;
  font-weight:700;
  color:var(--accent1);
}
.plan-price span{font-size:14px;font-weight:500;color:var(--muted)}
.plan-features{
  list-style:none;
  margin:16px 0;
  flex:1;
}
.plan-features li{
  font-size:13px;
  color:var(--text-secondary);
  padding:6px 0;
  padding-left:20px;
  position:relative;
}
.plan-features li::before{
  content:'✓';
  position:absolute;
  left:0;
  color:var(--accent1);
  font-weight:700;
}
.plan-trial{
  font-size:12px;
  color:var(--accent1);
  font-weight:600;
  margin-bottom:14px;
}
.btn-choose-plan{
  width:100%;
  padding:12px 16px;
  border-radius:10px;
  border:none;
  background:linear-gradient(90deg,var(--accent1),var(--accent2));
  color:#0b0b0b;
  font-weight:700;
  cursor:pointer;
  font-size:14px;
  transition:transform .2s, opacity .2s;
}
.btn-choose-plan:hover{
  transform:translateY(-1px);
  opacity:.95;
}

.row{
  display:flex;
  gap:10px;
}

.small{flex:1}

.footer-note{
  color:var(--muted);
  text-align:center;
  margin-top:auto;
  font-size:13px;
}

/* ====== Fundo igual à landing (preto #0f0f0f) na página de login/registro ====== */
body.page-auth {
  background: #0f0f0f !important;
  color: #fff !important;
  zoom: 1; /* login/cadastro: sem zoom global do dashboard */
}

body.page-auth .wrap {
  background: #0f0f0f;
}

body.page-auth .auth-info {
  background: transparent;
  border-color: rgba(255,255,255,0.06);
}

body.page-auth .auth-card {
  background: #110f0f;
  border-color: rgba(255,255,255,0.08);
}

body.page-auth .footer-note {
  color: rgba(255,255,255,0.5);
}

body.page-auth .muted,
body.page-auth .hero p,
body.page-auth .auth-perks {
  color: rgba(255,255,255,0.6);
}

body.page-auth .hero h1 {
  color: #fff;
}

/* ====== Rodapé auth (Links Rápidos, Documentos Legais, Contato) ====== */
.auth-footer {
  margin-top: auto;
  flex-shrink: 0;
  padding: 32px 24px 24px;
  border-top: 1px solid rgba(255,255,255,0.08);
}

.auth-footer-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 32px 48px;
  justify-content: flex-start;
}

.auth-footer--simple .auth-footer-inner {
  justify-content: center;
}

.auth-footer-col {
  min-width: 160px;
}

.auth-footer-brand {
  display: flex;
  align-items: flex-start;
}

.auth-footer-brand .brand-link-kronis {
  font-size: 1.5rem;
}

.auth-footer-title {
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,0.95);
  margin: 0 0 12px 0;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.auth-footer-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.auth-footer-links a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  font-size: 14px;
  transition: color 0.2s;
}

.auth-footer-links a:hover {
  color: rgba(255,255,255,0.9);
}

.auth-footer-contact a {
  word-break: break-all;
}

/* ====== Responsivo Desktop (Login/Register) - Página inteira ====== */
body.page-auth .wrap{
  max-width:100%;
  min-height:100vh;
}

body.page-auth #mainView{
  flex:1;
  display:flex;
  flex-direction:column;
  min-height:0;
}

body.page-auth .auth-grid{
  flex:1;
  min-height:0;
}

/* Cadastro / login: grade equilibrada e conteúdo centralizado */
#page-register.auth-grid,
#page-login.auth-grid,
#page-esqueci-senha.auth-grid {
  width: 100%;
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px);
  padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box;
}

body.page-auth header{
  margin-bottom:0;
}

body.page-auth .auth-footer{
  padding: 24px 32px;
}

@media (min-width: 768px) {
  body.page-auth .wrap{
    display:flex;
    flex-direction:column;
    min-height:100vh;
    padding:0;
  }

  body.page-auth header{
    margin-bottom:24px;
    padding:32px 48px 0;
  }

  body.page-auth .brand .logo{
    width:52px;
    height:52px;
  }

  body.page-auth .brand .title{
    font-size:22px;
  }

  body.page-auth .brand .subtitle{
    font-size:14px;
  }

  body.page-auth .auth-grid{
    flex-direction:row;
    align-items:stretch;
    gap:28px;
    flex:1;
  }

  body.page-auth .auth-info{
    flex:1 1 50%;
    min-width:0;
    max-width:none;
    display:flex;
    flex-direction:column;
    justify-content:center;
    padding:40px 36px;
    min-height:0;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.08);
    background:rgba(20,20,20,0.6);
    box-shadow:0 4px 32px rgba(0,0,0,0.25);
  }

  body.page-auth .auth-card{
    flex:1 1 50%;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
    padding:40px 36px;
    max-width:none;
    border-radius:20px;
    border:1px solid rgba(255,255,255,0.1);
    background:#141414;
    box-shadow:0 8px 40px rgba(0,0,0,0.35);
  }

  body.page-auth .hero{
    padding:24px 8px 24px 0 !important;
    max-width:420px;
  }

  body.page-auth .hero h1{
    font-size:28px;
  }

  body.page-auth .hero p{
    font-size:16px;
  }

  body.page-auth .auth-perks{
    font-size:15px;
    gap:12px;
  }

  body.page-auth .auth-footer{
    padding: 28px 48px;
  }
}

@media (min-width: 1024px) {
  body.page-auth .auth-grid{
    gap:40px;
    max-width:1180px;
  }

  body.page-auth .auth-info{
    padding:48px 44px;
  }

  body.page-auth .auth-card{
    padding:48px 44px;
  }

  body.page-auth .hero{
    padding:28px 12px 28px 0 !important;
    max-width:460px;
  }

  body.page-auth .hero h1{
    font-size:32px;
  }

  body.page-auth .hero .icon{
    width:80px;
    height:80px;
    margin-bottom:16px;
  }

  body.page-auth .hero .icon svg{
    width:48px;
    height:48px;
  }

  body.page-auth .auth-perks{
    font-size:16px;
    margin-top:24px;
  }

  body.page-auth .auth-perks li{
    gap:12px;
  }

  body.page-auth form label{
    font-size:15px;
  }

  body.page-auth .input{
    padding:16px;
  }

  body.page-auth .input input{
    font-size:15px;
  }

  body.page-auth .btn{
    padding:14px 24px;
    font-size:16px;
  }

  body.page-auth .auth-footer{
    padding: 32px 72px;
  }
}

.alert{
  padding:12px;
  border-radius:10px;
  margin-bottom:15px;
  text-align:center;
  font-size:14px;
}

.alert-error{
  background:rgba(255,0,0,0.1);
  color:#ff6b6b;
  border:1px solid rgba(255,0,0,0.2);
}

.alert-success{
  background:rgba(0,255,0,0.08);
  color:#6ad68a;
  border:1px solid rgba(0,255,0,0.18);
}

/* ====== Robô WhatsApp ====== */
.robo-hero {
  text-align: center;
  padding: 2.1rem 1.6rem;
  margin-bottom: 2rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(37, 211, 102, 0.12), rgba(0, 180, 216, 0.06));
  border: 1px solid color-mix(in srgb, #25d366 35%, transparent);
  border-radius: 18px;
  box-shadow: 0 22px 48px -26px color-mix(in srgb, #25d366 42%, transparent);
  position: relative;
  overflow: hidden;
}
.robo-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 150%;
  height: 150%;
  background: radial-gradient(circle, rgba(37, 211, 102, 0.06) 0%, transparent 50%);
  pointer-events: none;
}
.robo-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border-radius: 16px;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(37, 211, 102, 0.35);
}
.robo-hero h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.robo-hero p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

.robo-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.robo-card:hover {
  border-color: rgba(37, 211, 102, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.robo-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.robo-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(37, 211, 102, 0.15);
  border-radius: 12px;
  color: #25d366;
  font-size: 1.25rem;
}
.robo-card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}
.robo-card-header p {
  font-size: 0.875rem;
  margin: 0;
}

.robo-status-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding: 1rem 1.25rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.robo-status-label {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-secondary);
}
.robot-status-badge {
  font-weight: 600;
  font-size: 0.9rem;
  padding: 0.4rem 1rem;
  border-radius: 10px;
  letter-spacing: 0.02em;
  transition: all 0.2s;
}
.robot-status-connected {
  background: rgba(34, 197, 94, 0.2);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.4);
  box-shadow: 0 0 12px rgba(34, 197, 94, 0.15);
}
.robot-status-disconnected {
  background: rgba(156, 163, 175, 0.15);
  color: #9ca3af;
  border: 1px solid rgba(156, 163, 175, 0.25);
}

.robo-qr-connecting {
  display: none;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1rem;
  padding: 0.9rem 1.1rem;
  background: rgba(37, 211, 102, 0.12);
  border: 1px solid rgba(37, 211, 102, 0.35);
  border-radius: 12px;
  color: var(--text-primary);
  font-size: 0.9rem;
  line-height: 1.45;
}
.robo-qr-connecting-main {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  flex: 1 1 200px;
  min-width: 0;
}
.robo-qr-connecting .bi-hourglass-split {
  font-size: 1.15rem;
  color: #25d366;
  flex-shrink: 0;
}
.robo-btn-encerrar-qr {
  font-weight: 600;
  font-size: 0.875rem;
}
.robo-btn-encerrar-qr--inline {
  flex-shrink: 0;
  padding: 0.45rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(239, 68, 68, 0.45);
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.robo-btn-encerrar-qr--inline:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: rgba(239, 68, 68, 0.6);
  color: #fca5a5;
}
.robo-qr-wrap .robo-btn-encerrar-qr:not(.robo-btn-encerrar-qr--inline) {
  margin-top: 1.25rem;
  width: 100%;
  max-width: 280px;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
@media (max-width: 576px) {
  .robo-qr-wrap .robo-btn-encerrar-qr:not(.robo-btn-encerrar-qr--inline) {
    max-width: none;
  }
  .robo-btn-encerrar-qr--inline {
    width: 100%;
    justify-content: center;
  }
}

.robo-qr-wrap {
  display: none;
  margin-bottom: 1.25rem;
  padding: 2rem;
  background: #fff;
  border-radius: 16px;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
}
.robo-qr-help {
  text-align: left;
  margin-bottom: 1.35rem;
  padding: 1rem 1.15rem;
  background: rgba(37, 211, 102, 0.08);
  border: 1px solid rgba(37, 211, 102, 0.22);
  border-radius: 12px;
}
.robo-qr-help-title {
  margin: 0 0 0.75rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: #0f172a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.robo-qr-help-title .bi-whatsapp {
  color: #25d366;
  font-size: 1.2rem;
}
.robo-qr-steps {
  margin: 0;
  padding-left: 1.25rem;
  color: #334155;
  font-size: 0.9rem;
  line-height: 1.55;
}
.robo-qr-steps li {
  margin-bottom: 0.45rem;
}
.robo-qr-steps li:last-child {
  margin-bottom: 0;
}
.robo-qr-tip {
  margin: 0.85rem 0 0 0;
  font-size: 0.85rem;
  color: #64748b;
  line-height: 1.45;
}
.robo-qr-container {
  display: inline-block;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  border: 2px solid rgba(37, 211, 102, 0.2);
}
.robo-qr-container img {
  max-width: 256px;
  height: auto;
  display: block;
}

.robo-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.btn-robo-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, #25d366, #128c7e);
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(37, 211, 102, 0.3);
}
.btn-robo-whatsapp:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(37, 211, 102, 0.4);
  color: #fff;
}
.btn-robo-ghost {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(239, 68, 68, 0.15);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: 10px;
  color: #ef4444;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-robo-ghost:hover {
  background: rgba(239, 68, 68, 0.25);
  border-color: rgba(239, 68, 68, 0.5);
  color: #ef4444;
}

.robo-desc {
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 1.25rem;
}
.robo-control-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.btn-robo-start {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.3);
}
.btn-robo-start:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
  color: #fff;
}
.btn-robo-start:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.btn-robo-stop {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-robo-stop:hover:not(:disabled) {
  background: rgba(239, 68, 68, 0.15);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}
.btn-robo-stop:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.robo-hint {
  font-size: 0.875rem;
  color: var(--muted);
  margin: 0;
}
.robo-checkbox-wrap {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 1.1rem;
  cursor: pointer;
  font-size: 0.9rem;
  color: var(--text-secondary);
  line-height: 1.4;
}
.robo-checkbox-wrap input {
  flex-shrink: 0;
  width: 1.05rem;
  height: 1.05rem;
  accent-color: #25d366;
}

/* ====== Indicação ====== */
.indicacao-hero {
  text-align: center;
  padding: 2.1rem 1.6rem;
  margin-bottom: 2rem;
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 45%),
    linear-gradient(135deg, rgba(236, 72, 153, 0.12), color-mix(in srgb, var(--accent1) 10%, transparent), rgba(159, 140, 237, 0.1));
  border: 1px solid color-mix(in srgb, #ec4899 32%, transparent);
  border-radius: 18px;
  box-shadow: 0 22px 48px -26px color-mix(in srgb, #ec4899 35%, transparent);
  position: relative;
  overflow: hidden;
}
.indicacao-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -30%;
  width: 160%;
  height: 160%;
  background: radial-gradient(circle, rgba(236, 72, 153, 0.05) 0%, transparent 50%);
  pointer-events: none;
}
.indicacao-hero-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ec4899, var(--accent1));
  border-radius: 16px;
  color: #fff;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(236, 72, 153, 0.35);
}
.indicacao-hero h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}
.indicacao-hero p {
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.5;
}

.indicacao-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1.25rem;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.indicacao-card:hover {
  border-color: rgba(236, 72, 153, 0.25);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.indicacao-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.indicacao-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: rgba(236, 72, 153, 0.15);
  border-radius: 12px;
  color: #ec4899;
  font-size: 1.25rem;
}
.indicacao-card-header h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem 0;
}
.indicacao-card-header p {
  font-size: 0.875rem;
  margin: 0;
}

.indicacao-link-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.indicacao-input {
  flex: 1;
  min-width: 200px;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 0.9rem;
  transition: border-color 0.2s;
}
.indicacao-input:focus {
  outline: none;
  border-color: var(--accent1);
}
.indicacao-code-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.indicacao-code-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}
.indicacao-code-label {
  font-size: 0.9rem;
  color: var(--text-secondary);
}
.indicacao-code-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: stretch;
  flex: 1 1 220px;
  min-width: 0;
}
.indicacao-code-input {
  flex: 1 1 120px;
  min-width: 0;
  padding: 0.65rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}
.btn-indicacao-copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.65rem 1.25rem;
  min-height: 44px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none;
  border-radius: 10px;
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 4px 14px rgba(255, 122, 0, 0.3);
  flex-shrink: 0;
}
.btn-indicacao-copy:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255, 122, 0, 0.4);
  color: #fff;
}

/* Indicação: link + código + Copiar em telas estreitas */
@media (max-width: 576px) {
  .indicacao-card {
    padding: 1.25rem 1rem;
  }
  .indicacao-link-row {
    flex-direction: column;
    align-items: stretch;
  }
  .indicacao-input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
  }
  .indicacao-link-row .btn-indicacao-copy {
    width: 100%;
    flex-shrink: 1;
  }
  .indicacao-code-row {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
  }
  .indicacao-code-wrap {
    flex-direction: column;
    flex: 1 1 auto;
    width: 100%;
  }
  .indicacao-code-input {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
  }
  .indicacao-code-wrap .btn-indicacao-copy {
    width: 100%;
    flex-shrink: 1;
  }
  .indicacao-code-wrap #btn-save-referral-code {
    width: 100%;
  }
}

.indicacao-stats-intro {
  font-size: 0.9rem;
  margin-bottom: 1rem;
  padding: 0.5rem 0;
}
.indicacao-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.indicacao-stats--three {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}
.indicacao-stat-pending {
  border-color: rgba(245, 158, 11, 0.35);
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.08), rgba(245, 158, 11, 0.05));
}
.indicacao-stat-pending .indicacao-stat-value {
  color: #f59e0b;
}
.indicacao-card-pending {
  margin-bottom: 1.5rem;
}
.indicacao-badge-pending {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.25rem 0.65rem;
  border-radius: 999px;
  background: rgba(245, 158, 11, 0.12);
  color: #d97706;
  border: 1px solid rgba(245, 158, 11, 0.35);
  white-space: nowrap;
}
.indicacao-empty--muted {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.45;
}
.indicacao-stat-card {
  padding: 1.25rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: all 0.2s;
}
.indicacao-stat-card:hover {
  border-color: rgba(236, 72, 153, 0.2);
}
.indicacao-stat-highlight {
  border-color: rgba(236, 72, 153, 0.3);
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.06), rgba(255, 122, 0, 0.04));
}
.indicacao-stat-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--accent1);
  margin-bottom: 0.25rem;
}
.indicacao-stat-highlight .indicacao-stat-value {
  color: #ec4899;
}
.indicacao-stat-label {
  font-size: 0.85rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.indicacao-earnings-list {
  overflow-x: auto;
}
.indicacao-earnings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.indicacao-earnings-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 1px solid var(--border);
}
.indicacao-earnings-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.indicacao-earnings-table tr:hover td {
  background: rgba(255, 255, 255, 0.02);
}
.indicacao-earnings-amount {
  font-weight: 600;
  color: var(--accent1);
  text-align: right;
}
.indicacao-empty {
  text-align: center;
  padding: 2rem;
  color: var(--muted);
  font-size: 0.95rem;
}
.indicacao-empty i {
  display: block;
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.6;
}

/* ====== Suporte (aba dashboard) ====== */
#tab-suporte {
  padding-bottom: 2rem;
}

.suporte-tab-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.suporte-grid-main {
  display: grid;
  gap: 1.25rem;
  margin-bottom: 1.25rem;
}

@media (min-width: 1024px) {
  .suporte-grid-main {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

#tab-suporte .evaluation-in-support-section {
  margin-bottom: 1.25rem;
}

.suporte-hero {
  text-align: center;
  padding: 2.25rem 1.75rem 2rem;
  margin-bottom: 1.5rem;
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background:
    linear-gradient(165deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%),
    linear-gradient(145deg, color-mix(in srgb, var(--accent1) 16%, transparent) 0%, color-mix(in srgb, var(--accent2, var(--accent1)) 10%, transparent) 55%, transparent 100%);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06) inset,
    0 28px 56px -32px color-mix(in srgb, var(--accent1) 55%, transparent);
}

.suporte-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% -20%, color-mix(in srgb, var(--accent1) 22%, transparent), transparent 70%);
  pointer-events: none;
}

.suporte-hero-badge {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.35rem 0.85rem;
  margin-bottom: 1rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-primary);
  background: rgba(0, 0, 0, 0.28);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 999px;
}

.suporte-hero-badge i {
  font-size: 0.85rem;
  color: var(--accent1);
}

.suporte-hero-icon {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 1rem;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 85%, #000));
  border-radius: 18px;
  color: #fff;
  font-size: 1.65rem;
  box-shadow:
    0 4px 20px color-mix(in srgb, var(--accent1) 45%, transparent),
    0 1px 0 rgba(255, 255, 255, 0.25) inset;
}

.suporte-hero h2 {
  position: relative;
  z-index: 1;
  font-size: clamp(1.35rem, 2.5vw, 1.65rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem 0;
  color: var(--text-primary);
}

.suporte-hero p {
  position: relative;
  z-index: 1;
  color: var(--text-secondary);
  font-size: 0.95rem;
  max-width: 520px;
  margin: 0 auto;
  line-height: 1.6;
}

.suporte-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem 1.6rem;
  margin-bottom: 0;
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.suporte-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 28%, var(--border));
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 0 0 1px color-mix(in srgb, var(--accent1) 12%, transparent);
}

.suporte-card-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.suporte-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent1) 22%, transparent), color-mix(in srgb, var(--accent1) 8%, transparent));
  border-radius: 14px;
  color: var(--accent1);
  font-size: 1.2rem;
  border: 1px solid color-mix(in srgb, var(--accent1) 25%, transparent);
}

.suporte-card-header h3 {
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.3rem 0;
  letter-spacing: -0.01em;
}

.suporte-card-header p {
  font-size: 0.875rem;
  margin: 0;
  line-height: 1.45;
}

.suporte-form .suporte-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.suporte-textarea {
  width: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 0.95rem;
  resize: vertical;
  margin-bottom: 1rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  min-height: 120px;
}

.suporte-textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent1) 55%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent1) 18%, transparent);
}

.suporte-form-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.suporte-toast {
  font-size: 0.9rem;
  color: var(--muted);
}

.btn-suporte-send {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.78rem 1.45rem;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 88%, #000));
  border: none;
  border-radius: 12px;
  color: #fff !important;
  font-weight: 600;
  font-size: 0.92rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
  box-shadow: 0 6px 20px color-mix(in srgb, var(--accent1) 38%, transparent);
}

.btn-suporte-send:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent1) 45%, transparent);
  color: #fff !important;
}

.suporte-info-box {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  background: color-mix(in srgb, var(--accent1) 10%, transparent);
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--accent1) 22%, transparent);
  border-left-width: 4px;
  font-size: 0.84rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

.suporte-info-box i {
  color: var(--accent1);
  flex-shrink: 0;
  margin-top: 0.12rem;
  font-size: 1.05rem;
}

.suporte-filter-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.suporte-filter-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--muted);
}

.suporte-filter-select {
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 0.9rem;
  min-width: 180px;
  cursor: pointer;
}

.suporte-filter-select:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent1) 45%, var(--border));
}

.suporte-tickets-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  max-height: min(420px, 55vh);
  overflow-y: auto;
  padding-right: 4px;
  margin-right: -4px;
}

.suporte-tickets-list::-webkit-scrollbar {
  width: 6px;
}

.suporte-tickets-list::-webkit-scrollbar-thumb {
  background: color-mix(in srgb, var(--accent1) 35%, var(--border));
  border-radius: 6px;
}

.suporte-eval-thanks {
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 1rem 1.1rem;
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.25);
  border-radius: 14px;
  font-size: 0.95rem;
}

.suporte-eval-thanks i {
  color: #22c55e;
  font-size: 1.35rem;
}

.evaluation-bonus-legend {
  padding: 0.85rem 1.05rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.12), rgba(168, 85, 247, 0.08));
  border-radius: 14px;
  border: 1px solid rgba(236, 72, 153, 0.22);
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

.evaluation-bonus-legend i {
  color: #ec4899;
  margin-right: 0.35rem;
}

.suporte-eval-form .evaluation-stars-wrap {
  margin-bottom: 1rem;
}

.evaluation-stars-label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  margin-bottom: 0.55rem;
  color: var(--text-primary);
}

.evaluation-stars {
  display: flex;
  gap: 0.45rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}

.evaluation-star {
  padding: 0.55rem 0.65rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--muted);
  font-size: 1.45rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.evaluation-star:hover {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(251, 191, 36, 0.08);
}

.evaluation-star.active,
.evaluation-star.rated {
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.55);
  box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.2);
}

.suporte-eval-comment {
  margin-bottom: 1rem;
}

.suporte-eval-comment label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
  color: var(--text-primary);
}

.suporte-eval-comment textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  color: var(--text-primary);
  font-size: 0.9rem;
  resize: vertical;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.suporte-eval-comment textarea:focus {
  outline: none;
  border-color: color-mix(in srgb, var(--accent1) 45%, var(--border));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent1) 14%, transparent);
}

/* Canais — grid responsivo */
.support-channels {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}

.support-channels-grid {
  display: grid;
  gap: 0.85rem;
}

@media (min-width: 768px) {
  .support-channels-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }
}

.support-channel-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.15rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  color: var(--text-primary);
  text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
  min-height: 5.5rem;
}

.support-channel-card:hover {
  transform: translateY(-2px);
  color: var(--text-primary);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.2);
}

.support-channel-card:focus-visible {
  outline: 2px solid var(--accent1);
  outline-offset: 2px;
}

.support-channel-card--instagram:hover {
  border-color: rgba(225, 48, 108, 0.45);
  background: linear-gradient(145deg, rgba(225, 48, 108, 0.12), rgba(131, 58, 180, 0.08));
}

.support-channel-card--whatsapp:hover {
  border-color: rgba(37, 211, 102, 0.45);
  background: linear-gradient(145deg, rgba(37, 211, 102, 0.12), rgba(18, 140, 126, 0.08));
}

.support-channel-card--email:hover {
  border-color: color-mix(in srgb, var(--accent1) 45%, var(--border));
  background: color-mix(in srgb, var(--accent1) 10%, var(--panel));
}

.support-channel-icon {
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  color: #fff;
  transition: transform 0.2s ease;
}

.support-channel-card--instagram .support-channel-icon {
  background: linear-gradient(145deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
}

.support-channel-card--whatsapp .support-channel-icon {
  background: linear-gradient(145deg, #25d366, #128c7e);
}

.support-channel-card--email .support-channel-icon {
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 80%, #333));
  color: #fff;
}

.support-channel-card--email .support-channel-icon svg {
  stroke: #fff;
}

.support-channel-card:hover .support-channel-icon {
  transform: scale(1.05);
}

.support-channel-icon svg {
  width: 24px;
  height: 24px;
}

.support-channel-content {
  flex: 1;
  min-width: 0;
}

.support-channel-content h4 {
  font-size: 0.98rem;
  font-weight: 600;
  margin: 0 0 0.2rem 0;
  letter-spacing: -0.01em;
}

.support-channel-content p {
  margin: 0;
  font-size: 0.82rem;
  color: var(--text-secondary);
  word-break: break-word;
}

.support-channel-arrow {
  color: var(--muted);
  font-size: 1.15rem;
  flex-shrink: 0;
  transition: transform 0.2s ease, color 0.2s ease;
}

.support-channel-card:hover .support-channel-arrow {
  transform: translateX(5px);
  color: var(--accent1);
}

.support-hours {
  margin-top: 1.35rem;
  padding: 1.1rem 1.25rem;
  border-radius: 16px;
  display: flex;
  align-items: center;
  gap: 1rem;
  text-align: left;
  background: linear-gradient(135deg, color-mix(in srgb, var(--accent1) 8%, var(--panel)), var(--panel));
  border: 1px solid color-mix(in srgb, var(--accent1) 20%, var(--border));
}

.support-hours-icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 14px;
  background: color-mix(in srgb, var(--accent1) 18%, transparent);
  color: var(--accent1);
  font-size: 1.35rem;
}

.support-hours-text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.support-hours-title {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.support-hours-sub {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text-primary);
}

/* Card “Entre em contato”: leve destaque */
.suporte-card-contact .suporte-card-icon {
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent1) 24%, transparent), color-mix(in srgb, var(--accent1) 10%, transparent));
}

@media (max-width: 767px) {
  .support-channels-grid {
    grid-template-columns: 1fr;
  }
  .support-channel-card {
    min-height: 0;
    padding: 1rem;
  }
  .support-channel-icon {
    width: 46px;
    height: 46px;
  }
  .support-channel-icon svg {
    width: 22px;
    height: 22px;
  }
  .suporte-hero {
    padding: 1.65rem 1.2rem;
    border-radius: 16px;
  }
  .suporte-tickets-list {
    max-height: none;
  }
  .support-hours {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}

/* Support ticket cards (gerados via JS) */
.support-ticket-card {
  background: var(--panel) !important;
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  padding: 1.1rem 1.15rem !important;
  margin-bottom: 0.65rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.support-ticket-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 30%, var(--border)) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}
.support-ticket-reply-form textarea {
  width: 100%;
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-primary);
  font-size: 0.9rem;
  resize: vertical;
  margin-bottom: 0.5rem;
}
.support-ticket-send-btn {
  padding: 0.55rem 1.1rem !important;
  font-size: 0.9rem !important;
  background: linear-gradient(145deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 85%, #000)) !important;
  border: none !important;
  border-radius: 10px !important;
  color: #fff !important;
  box-shadow: 0 4px 14px color-mix(in srgb, var(--accent1) 35%, transparent);
}

.appointment-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.01), rgba(0,0,0,0.02));
  border-radius:12px;
  padding:12px;
  margin-bottom:10px;
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
  border:1px solid rgba(255,255,255,0.02);
}

.tab-pane{display:block}

.auth-grid{
  display:flex;
  flex-direction:column;
  gap:24px;
}

.auth-info{
  background:var(--card);
  border-radius:20px;
  border:1px solid rgba(255,255,255,0.04);
  padding:24px;
}

.auth-card{
  background:var(--panel);
  border-radius:22px;
  border:1px solid rgba(255,255,255,0.05);
  padding:24px;
}

.auth-card .field-group {
  display: block;
  margin-bottom: 14px;
}

.auth-card .referral-code-hint {
  margin-top: 8px;
  margin-bottom: 0;
  font-size: 13px;
}

.auth-card .referral-code-status {
  font-size: 13px;
}

.auth-card .referral-code-valid {
  color: #22c55e;
}

.auth-card .referral-code-invalid {
  color: #f44336;
}

/* Cadastro: ritmo vertical, plano legível, CTA */
body.page-auth #form-register {
  width: 100%;
  max-width: 100%;
}
body.page-auth #form-register > .field-group {
  margin-bottom: 0;
}
body.page-auth #form-register > label,
body.page-auth #form-register .field-group > label {
  margin-top: 1.15rem;
  margin-bottom: 0.5rem;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(255, 255, 255, 0.75);
}
body.page-auth #form-register > .field-group:first-child > label:first-child {
  margin-top: 0;
}
body.page-auth #form-register > .field-group + .field-group {
  margin-top: 0.35rem;
}
body.page-auth #form-register .input {
  margin-bottom: 0;
}
body.page-auth #form-register .input--plan-select select,
body.page-auth #form-register #input-plan {
  width: 100%;
  min-width: 0;
  flex: 1 1 auto;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
  border-radius: 8px;
  cursor: pointer;
}
body.page-auth #form-register #input-plan option {
  padding: 8px;
  white-space: normal;
}
body.page-auth #form-register .plan-select-hint {
  margin-top: 8px;
  font-size: 12px;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.45);
}
body.page-auth #form-register .legal-checkboxes {
  margin-top: 1.25rem;
  padding-top: 0.25rem;
}
body.page-auth #form-register .form-register-submit-wrap {
  margin-top: 1rem;
}
body.page-auth #form-register #btn-register-submit {
  width: 100%;
  margin-top: 0;
  padding: 14px 20px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 12px;
  color: #0b0b0b;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none;
  box-shadow: 0 6px 24px rgba(241, 90, 0, 0.35);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}
body.page-auth #form-register #btn-register-submit:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 28px rgba(241, 90, 0, 0.45);
}
body.page-auth #form-register #btn-register-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}
body.page-auth #page-register .auth-card > .muted.register-form-footer-link {
  text-align: center;
  margin-top: 1.25rem;
  font-size: 14px;
}

.auth-perks{
  margin-top:18px;
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:10px;
  color:var(--muted);
  font-size:14px;
}

.auth-perks li{
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.auth-perks span{
  color:var(--accent1);
}

/* Login: tema claro (verde, azul, rosa) – campos com boa legibilidade */
body.page-auth.theme-light .auth-card,
body.page-auth.theme-light .auth-info{
  border-color:var(--border);
  box-shadow:0 2px 20px rgba(0,0,0,0.06);
}
body.page-auth.theme-light .input{
  background:#fff;
  border:1px solid var(--border);
  color:#111827;
  box-shadow:0 1px 3px rgba(0,0,0,0.04);
}
body.page-auth.theme-light .input:focus-within{
  border-color:var(--accent1);
  box-shadow:0 0 0 2px rgba(0,0,0,0.06);
}
body.page-auth.theme-light .input input{
  color:#111827;
}
body.page-auth.theme-light .input input::placeholder{
  color:#9ca3af;
}
body.page-auth.theme-light .input svg{
  color:#6b7280;
  opacity:0.8;
}
body.page-auth.theme-light form label{
  color:#374151;
}
body.page-auth.theme-light #form-register > label,
body.page-auth.theme-light #form-register .field-group > label {
  color: rgba(17, 24, 39, 0.85);
}
body.page-auth.theme-light #form-register .plan-select-hint {
  color: rgba(17, 24, 39, 0.5);
}
body.page-auth.theme-light #form-register .input select,
body.page-auth.theme-light #form-register #input-plan {
  color: #111827;
  background: transparent;
}

/* ====== Páginas legais (Privacidade, Segurança, Termos) ====== */
.legal-page{
  max-width:720px;
  margin:0 auto;
  padding:24px 0 48px;
}
.legal-page-inner{
  background:var(--card);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:clamp(20px,4vw,32px);
}
.legal-page-title{
  font-size:clamp(1.5rem,4vw,1.75rem);
  margin-bottom:8px;
  color:var(--text-primary,#fff);
}
.legal-page-updated{
  font-size:13px;
  color:var(--muted);
  margin-bottom:24px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border);
}
.legal-content{
  font-size:15px;
  line-height:1.65;
  color:var(--text-secondary,#ddd);
}
.legal-content p{
  margin-bottom:16px;
}
.legal-content h2{
  font-size:1.1rem;
  color:var(--text-primary,#fff);
  margin:24px 0 12px;
}
.legal-content h2:first-of-type{
  margin-top:0;
}
.legal-content ul{
  margin:0 0 16px 1.25em;
  padding:0;
}
.legal-content li{
  margin-bottom:8px;
}
.legal-content .link{
  color:var(--accent1);
  text-decoration:none;
  font-weight:600;
}
.legal-content .link:hover{
  text-decoration:underline;
}
.legal-contact{
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid var(--border);
  font-size:14px;
  color:var(--muted);
}
.legal-back{
  margin-top:24px;
  margin-bottom:0;
}
.legal-back .link{
  color:var(--accent1);
  text-decoration:none;
  font-weight:600;
}
.legal-back .link:hover{
  text-decoration:underline;
}

/* Modal leitura obrigatória - documentos legais no cadastro */
.btn-outline{
  background:transparent;
  border:1px solid var(--accent1);
  color:var(--accent1);
}
.btn-outline:hover{
  background:rgba(255,122,0,0.12);
}
.modal-legal-overlay{
  position:fixed;
  inset:0;
  background:rgba(0,0,0,0.75);
  z-index:10000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:20px;
  opacity:0;
  visibility:hidden;
  transition:opacity 0.2s ease, visibility 0.2s ease;
}
.modal-legal-overlay.modal-legal-overlay--open{
  opacity:1;
  visibility:visible;
}
.modal-legal-box{
  width:100%;
  max-width:600px;
  max-height:90vh;
  background:var(--card);
  border-radius:var(--radius, 18px);
  border:1px solid var(--border);
  box-shadow:0 12px 40px rgba(0,0,0,0.5);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.modal-legal-header{
  flex-shrink:0;
  padding:20px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
.modal-legal-header h3{
  margin:0;
  font-size:1.1rem;
  font-weight:600;
  color:var(--text-primary);
}
.modal-legal-body{
  flex:1;
  overflow-y:auto;
  padding:24px;
  max-height:60vh;
}
.modal-legal-body .legal-page{
  margin-bottom:32px;
  padding:0;
}
.modal-legal-body .legal-page-inner{
  padding:0;
}
.modal-legal-body .legal-page-title{
  font-size:1.1rem;
  margin-bottom:8px;
}
.modal-legal-body .legal-back{
  display:none;
}
.legal-modal-fim{
  margin-top:24px;
  padding-top:16px;
  border-top:1px dashed var(--border);
  font-size:14px;
  color:var(--muted);
  text-align:center;
}
.modal-legal-footer{
  flex-shrink:0;
  padding:16px 24px;
  border-top:1px solid var(--border);
}
.modal-legal-footer .btn:disabled{
  opacity:0.5;
  cursor:not-allowed;
}
.legal-accept-area #legal-acceptado-badge{
  display:flex;
  align-items:center;
  font-size:14px;
  color:#22c55e;
}

/* Esqueci senha - wizard steps */
.forgot-steps-indicator{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-bottom:24px;
}
.forgot-step-dot{
  width:36px;
  height:36px;
  border-radius:50%;
  background:var(--border);
  color:var(--muted);
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:600;
  font-size:14px;
}
.forgot-step-dot.active{
  background:var(--accent1);
  color:#fff;
}
.forgot-step-line{
  width:40px;
  height:2px;
  background:var(--border);
}
.forgot-step-forgot .input{ margin-bottom:8px; }

/* Checkboxes de aceite no registro (Política de Privacidade, Segurança, Termos) */
.legal-checkboxes{
  display:flex;
  flex-direction:column;
  gap:12px;
}
.legal-checkbox-label{
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:14px;
  color:var(--text-secondary, #ddd);
  line-height:1.4;
}
.legal-checkbox-label input[type="checkbox"]{
  flex-shrink:0;
  margin-top:2px;
  width:18px;
  height:18px;
  accent-color:var(--accent1);
}
.legal-checkbox-label .link{
  color:var(--accent1);
  text-decoration:none;
  font-weight:600;
}
.legal-checkbox-label .link:hover{
  text-decoration:underline;
}

/* ====== Responsividade ====== */
@media(max-width:600px){
  header{
    flex-direction:column;
    align-items:flex-start;
  }
  .user-info{
    width:100%;
    justify-content:space-between;
  }
  .row{flex-direction:column;}
  .tabs{gap:8px;}
  .tab{flex:1 1 calc(50% - 8px);}
  .appointment-card{
    flex-direction:column;
    align-items:flex-start;
  }
}

/* ====== Dashboard: menu lateral altura total (estilo referência) ====== */
#page-dashboard .dashboard-layout{
  display:flex;
  gap:0;
  min-height:0;
  flex:1;
  align-items:stretch;
}

#page-dashboard .dashboard-sidebar{
  position:fixed;
  top:0;
  bottom:0;
  left:0;
  flex-shrink:0;
  width:260px;
  background:var(--bg);
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  padding:0;
  transition:width 0.3s ease;
  z-index:10;
}

#page-dashboard .dashboard-sidebar.collapsed{
  width:80px;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-brand{
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding:20px 8px 12px;
  gap:12px;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-brand-name{
  opacity:0;
  width:0;
  height:0;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-label{
  opacity:0;
  height:0;
  padding:0;
  margin:0;
  overflow:hidden;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-btn span{
  opacity:0;
  width:0;
  overflow:hidden;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-btn{
  justify-content:center;
  padding:14px;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-toggle-btn{
  margin-left:0;
  margin-top:0;
  align-self:flex-end;
  width:28px;
  height:28px;
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-toggle-btn i{
  transform:rotate(180deg);
}

#page-dashboard .dashboard-sidebar.collapsed .sidebar-nav{
  padding:24px 8px;
}

#page-dashboard .sidebar-btn span{
  transition:opacity 0.2s ease, width 0.2s ease;
  white-space:nowrap;
  overflow:hidden;
}

#page-dashboard .sidebar-brand{
  padding:28px 24px 24px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:14px;
  position:relative;
}

#page-dashboard .sidebar-logo{
  width:44px;
  height:44px;
  border-radius:12px;
  background:linear-gradient(135deg,var(--accent1),var(--accent2));
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  box-shadow:0 4px 14px rgba(241,90,0,0.25);
}

#page-dashboard .sidebar-logo svg{
  width:22px;
  height:22px;
  fill:#0b0b0b;
}

#page-dashboard .sidebar-logo-img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}

#page-dashboard .sidebar-brand-name{
  font-size:18px;
  font-weight:700;
  color:var(--text-primary);
  letter-spacing:-0.02em;
  transition:opacity 0.2s ease, width 0.2s ease;
  white-space:nowrap;
  overflow:hidden;
}

#page-dashboard .sidebar-toggle-btn{
  margin-left:auto;
  width:32px;
  height:32px;
  border:none;
  border-radius:8px;
  background:rgba(255,255,255,0.06);
  color:var(--text-secondary);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease, transform 0.2s ease;
  flex-shrink:0;
}

#page-dashboard .sidebar-toggle-btn:hover{
  background:rgba(255,255,255,0.1);
  color:var(--text-primary);
}

#page-dashboard .sidebar-toggle-btn i{
  font-size:16px;
  transition:transform 0.2s ease;
}

#page-dashboard .sidebar-nav{
  display:flex;
  flex-direction:column;
  gap:2px;
  padding:24px 16px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  scrollbar-width:thin;
  scrollbar-color:var(--card) var(--border);
}
#page-dashboard .sidebar-nav::-webkit-scrollbar{ width:6px; }
#page-dashboard .sidebar-nav::-webkit-scrollbar-track{ background:var(--border); border-radius:3px; }
#page-dashboard .sidebar-nav::-webkit-scrollbar-thumb{ background:var(--card); border-radius:3px; }
#page-dashboard .sidebar-nav::-webkit-scrollbar-thumb:hover{ background:var(--muted); }

#page-dashboard .sidebar-label{
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  padding:0 12px 14px;
  margin-bottom:4px;
}

#page-dashboard .sidebar-btn{
  display:flex;
  align-items:center;
  gap:14px;
  width:100%;
  padding:14px 16px;
  border:none;
  border-radius:12px;
  background:transparent;
  color:var(--text-secondary);
  font-size:15px;
  font-weight:500;
  cursor:pointer;
  transition:background 0.2s ease, color 0.2s ease;
  text-align:left;
}

#page-dashboard .sidebar-btn i{
  font-size:20px;
  flex-shrink:0;
  opacity:0.85;
}

#page-dashboard .sidebar-btn:hover{
  background:rgba(255,255,255,0.06);
  color:var(--text-primary);
}

#page-dashboard .sidebar-btn.active{
  background:rgba(241,90,0,0.18);
  color:var(--accent1);
}

#page-dashboard .sidebar-btn.active i{
  color:var(--accent1);
  opacity:1;
}

#page-dashboard .sidebar-btn.sidebar-btn--plan-locked{
  opacity:0.88;
  color:var(--muted);
}
#page-dashboard .sidebar-btn.sidebar-btn--plan-locked i{
  opacity:0.65;
}
#page-dashboard .sidebar-btn.sidebar-btn--plan-locked .sidebar-plan-lock-badge{
  margin-left:auto;
  flex-shrink:0;
  font-size:10px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:var(--text-secondary);
  background:rgba(0,0,0,0.12);
  border:1px solid var(--border);
  padding:3px 7px;
  border-radius:6px;
}
#page-dashboard .dashboard-sidebar.collapsed .sidebar-btn.sidebar-btn--plan-locked .sidebar-plan-lock-badge{
  display:none;
}

#page-dashboard .dashboard-main{
  flex:1;
  min-width:0;
  overflow:auto;
}

/* Formulário de cupom - layout completo no desktop */
.admin-cupom-form {
  background: var(--card);
  border-radius: var(--radius);
  padding: 1.5rem;
  border: 1px solid var(--border);
  width: 100%;
}

.admin-cupom-form-grid {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.admin-cupom-field {
  min-width: 0;
}

.admin-cupom-form-actions {
  margin-top: 1.5rem;
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

@media (min-width: 768px) {
  .admin-cupom-form-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem 1.5rem;
  }

  .admin-cupom-field-full {
    grid-column: 1 / -1;
  }

  .admin-cupom-form {
    max-width: 100%;
  }
}

@media(max-width:767px){
  .page-dashboard .wrap{padding:clamp(16px,4vw,32px);}
  .page-dashboard header,
  .page-dashboard #mainView{
    margin-left:0;
  }
  .page-dashboard #mainView{display:block;}
  .page-dashboard #page-dashboard{display:block;}
  #page-dashboard .dashboard-layout{
    flex-direction:column;
  }
  .page-dashboard .dashboard-main .tab-content{
    scroll-margin-top:1px;
  }
  #page-dashboard .dashboard-sidebar{
    position:static;
    top:auto;
    bottom:auto;
    left:auto;
    width:100%;
    height:auto;
    border-right:none;
    border-bottom:none;
    padding-bottom:0;
  }
  #page-dashboard .dashboard-sidebar.collapsed{
    width:100%;
  }
  #page-dashboard .sidebar-brand{
    padding:16px 20px;
    display:flex;
    align-items:center;
    gap:12px;
  }
  #page-dashboard .sidebar-toggle-btn{
    display:flex;
    margin-left:auto;
    width:44px;
    height:44px;
    align-items:center;
    justify-content:center;
    border-radius:10px;
    background:rgba(255,255,255,0.06);
    border:1px solid var(--border);
    color:var(--text-primary);
    flex-shrink:0;
  }
  #page-dashboard .sidebar-toggle-btn i{
    font-size:20px;
    transition:transform 0.25s ease;
  }
  #page-dashboard .dashboard-sidebar.sidebar-mobile-open .sidebar-toggle-btn i{
    transform:rotate(-90deg);
  }
  #page-dashboard .sidebar-brand-name{
    opacity:1 !important;
    width:auto !important;
    flex:1;
    min-width:0;
  }
  #page-dashboard .sidebar-label{
    width:100%;
    padding:0 0 10px;
    margin-bottom:0;
    opacity:1 !important;
    height:auto !important;
  }
  /* No mobile o menu fica escondido até abrir; ao clicar numa opção, fecha e mostra só o conteúdo */
  #page-dashboard .sidebar-nav{
    flex-direction:column;
    flex-wrap:nowrap;
    padding:0 16px 16px;
    flex:none;
    gap:4px;
    max-height:0;
    overflow:hidden;
    opacity:0;
    transition:max-height 0.3s ease, opacity 0.2s ease, padding 0.2s ease;
  }
  #page-dashboard .dashboard-sidebar.sidebar-mobile-open .sidebar-nav{
    max-height:80vh;
    overflow:auto;
    opacity:1;
    padding:12px 16px 16px;
  }
  #page-dashboard .sidebar-btn{
    flex:none;
    min-width:0;
    width:100%;
    justify-content:flex-start;
    padding:12px 14px;
  }
  #page-dashboard .sidebar-btn span{
    opacity:1 !important;
    width:auto !important;
  }
}

@media(min-width:768px){
  .wrap{max-width:100%;}
  .grid{
    grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  }
}

@media(min-width:1024px){
  .page-dashboard .wrap{
    max-width:100%;
  }
  .page-dashboard .dashboard-grid{
    display:grid;
    grid-template-columns:320px 1fr;
    gap:32px;
    align-items:flex-start;
  }
  .page-dashboard .panel-side{
    position:sticky;
    top:30px;
  }
  .page-dashboard .panel-main{
    padding:30px;
  }
}


/* ====== Relatório de Vendas ====== */
.report-vendas-tab {
  padding-bottom: 0.5rem;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}
.report-filter-section { margin-bottom: 1.5rem; }
.report-filter-card {
  padding: 1.35rem 1.5rem;
}
.report-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem 1.25rem;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 80%, transparent);
}
.report-card-heading--chart {
  margin-bottom: 0.25rem;
  padding-bottom: 0.85rem;
}
.report-card-heading h3 {
  margin-bottom: 0.35rem;
  font-size: 1.05rem;
}
.report-card-subtitle {
  margin: 0;
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--text-secondary);
  max-width: 36rem;
}
.report-card-heading-text { min-width: 0; }
.report-period-label {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--muted);
  font-weight: 500;
}
.report-export-actions--toolbar {
  margin: 0;
  flex-shrink: 0;
}
.report-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-end;
}
.report-period-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  padding: 4px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--card) 92%, rgba(0,0,0,0.15));
  border: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
}
.report-period-btn {
  padding: 9px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease;
}
.report-period-btn:hover {
  background: rgba(255,255,255,0.06);
  color: var(--text-primary);
}
.report-period-btn.active {
  background: linear-gradient(135deg, var(--accent1), color-mix(in srgb, var(--accent2, var(--accent1)) 88%, #000));
  color: #0b0b0b;
  box-shadow: 0 2px 12px color-mix(in srgb, var(--accent1) 35%, transparent);
}
.report-date-picker-wrap label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-secondary);
  margin-bottom: 6px;
}
.report-date-picker-wrap input[type="date"] {
  padding: 10px 14px;
  min-width: 160px;
  border-radius: 12px;
  background: color-mix(in srgb, var(--card) 85%, transparent);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
}
.report-apply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 10px 18px;
  font-weight: 600;
  border-radius: 12px;
}
.report-summary-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 1.5rem;
}
.report-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 1.15rem 1.2rem;
  border-radius: 16px;
  border: 1px solid var(--border);
  background:
    linear-gradient(145deg, color-mix(in srgb, var(--card) 100%, transparent) 0%, color-mix(in srgb, var(--card) 92%, #000) 100%);
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.report-stat-card:hover {
  border-color: color-mix(in srgb, var(--accent1) 22%, var(--border));
  box-shadow: 0 12px 28px -18px color-mix(in srgb, var(--accent1) 40%, transparent);
}
.report-stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 1.15rem;
  color: #fff;
  box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}
.report-stat-card--revenue .report-stat-icon {
  background: linear-gradient(135deg, #22c55e, #4ade80);
}
.report-stat-card--clients .report-stat-icon {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}
.report-stat-card--services .report-stat-icon {
  background: linear-gradient(135deg, var(--accent1), color-mix(in srgb, var(--accent1) 75%, #f97316));
}
.report-stat-card--ticket .report-stat-icon {
  background: linear-gradient(135deg, #a855f7, #c084fc);
}
.report-stat-card--commission .report-stat-icon {
  background: linear-gradient(135deg, #14b8a6, #2dd4bf);
}
.report-stat-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted);
  line-height: 1.2;
}
.report-stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.report-stat-card--revenue .report-stat-value,
.report-stat-card--ticket .report-stat-value,
.report-stat-card--commission .report-stat-value {
  color: var(--accent1);
}
.report-chart-section { margin-bottom: 1.5rem; }
.report-chart-section .report-card-heading--chart h3 { margin-bottom: 0.15rem; }
.report-chart-wrap {
  position: relative;
  height: min(320px, 48vw);
  min-height: 240px;
  margin-top: 0.75rem;
  padding: 0.5rem 0.25rem 0;
}
.report-grid-two {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1.25rem;
  margin-bottom: 1.5rem;
}
.report-grid-two .report-grid-full {
  grid-column: 1 / -1;
}
.report-breakdown-card h3 { margin-bottom: 0.35rem; }
.report-breakdown-card .report-card-subtitle {
  margin-bottom: 0.75rem;
}
.report-breakdown {
  margin-top: 0.25rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.report-breakdown .empty {
  text-align: center;
  padding: 2rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  border-radius: 12px;
  background: rgba(255,255,255,0.02);
  border: 1px dashed color-mix(in srgb, var(--border) 80%, transparent);
}
.report-breakdown-item {
  position: relative;
  padding: 0.75rem 0 0.65rem;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  font-size: 14px;
}
.report-breakdown-item:last-child { border-bottom: none; }
.report-breakdown-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 8px;
}
.report-breakdown-item .name {
  color: var(--text-primary);
  font-weight: 500;
}
.report-breakdown-item .value {
  color: var(--accent1);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  text-align: right;
  flex-shrink: 0;
}
.report-breakdown-item .count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 500;
  margin-left: 6px;
}
.report-breakdown-track {
  height: 5px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--border) 50%, transparent);
  overflow: hidden;
}
.report-breakdown-fill {
 display: block;
 height: 100%;
 border-radius: 999px;
 background: linear-gradient(90deg, var(--accent1), color-mix(in srgb, var(--accent1) 60%, #fff));
 transition: width 0.35s ease;
}
.report-breakdown-item.report-barber-item .report-breakdown-fill {
  background: linear-gradient(90deg, #14b8a6, #5eead4);
}
.report-details-section { margin-bottom: 1.5rem; }
.report-details-section .report-card-heading { border-bottom: none; padding-bottom: 0; margin-bottom: 0.75rem; }
.report-table-wrap {
  overflow-x: auto;
  margin-top: 0;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 96%, transparent);
  -webkit-overflow-scrolling: touch;
}
.report-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.report-table th, .report-table td {
  padding: 12px 14px;
  text-align: left;
  border-bottom: 1px solid color-mix(in srgb, var(--border) 70%, transparent);
  vertical-align: middle;
}
.report-table th.report-th-num,
.report-table td:nth-child(5),
.report-table td:nth-child(6) {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.report-table tbody tr:last-child td {
  border-bottom: none;
}
.report-table th {
  background: color-mix(in srgb, var(--accent1) 12%, transparent);
  color: var(--text-primary);
  font-weight: 700;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.report-table tbody tr {
  transition: background 0.15s ease;
}
.report-table tbody tr:hover {
  background: color-mix(in srgb, var(--accent1) 6%, transparent);
}
.report-table .empty-cell {
  text-align: center;
  color: var(--muted);
  padding: 2.75rem 1rem;
  font-size: 0.9rem;
}
.report-pay-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border);
  color: var(--text-secondary);
}
.report-pay-badge--pix {
  background: color-mix(in srgb, #22c55e 16%, transparent);
  border-color: color-mix(in srgb, #22c55e 35%, transparent);
  color: #86efac;
}
.report-pay-badge--dinheiro {
  background: color-mix(in srgb, #eab308 14%, transparent);
  border-color: color-mix(in srgb, #eab308 30%, transparent);
  color: #fde047;
}
.report-pay-badge--cartao,
.report-pay-badge--credito,
.report-pay-badge--debito {
  background: color-mix(in srgb, #6366f1 16%, transparent);
  border-color: color-mix(in srgb, #6366f1 32%, transparent);
  color: #a5b4fc;
}
.report-export-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.report-export-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border-radius: 11px;
  font-weight: 600;
  font-size: 13px;
  border: 1px solid var(--border);
  background: color-mix(in srgb, var(--card) 90%, transparent);
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.15s ease;
}
.report-export-btn:hover {
  border-color: color-mix(in srgb, var(--accent1) 35%, var(--border));
  background: color-mix(in srgb, var(--accent1) 8%, var(--card));
}
.report-export-btn--excel i { color: #22c55e; }
.report-export-btn--pdf i { color: #ef4444; }
@media (max-width: 640px) {
  .report-card-heading {
    flex-direction: column;
    align-items: stretch;
  }
  .report-export-actions--toolbar {
    justify-content: flex-start;
  }
  .report-summary-cards {
    grid-template-columns: 1fr;
  }
  .report-stat-value { font-size: 1.2rem; }
}

/* ====== Aba Estoque (layout tipo Produtos) ====== */
#tab-estoque .tab-subtitle { margin-bottom: 1rem; }
.estoque-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}
.estoque-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 200px;
  max-width: 400px;
  padding: 0.5rem 0.75rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.estoque-search-wrap i { color: var(--muted); font-size: 1rem; }
.estoque-search-wrap input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 0.9rem;
  outline: none;
}
.estoque-search-wrap input::placeholder { color: var(--muted); }
.estoque-actions-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}
.estoque-filter-select-wrap { position: relative; }
.estoque-filter-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  width: auto;
  min-width: 0;
  max-width: 150px;
  padding: 0.35rem 1.5rem 0.35rem 0.5rem;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text-primary);
  font-size: 0.8rem;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 12 12' fill='none' stroke='%239b9b9b' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 4.5l3 3 3-3'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 10px;
}
.estoque-filter-select:hover { border-color: rgba(255,255,255,0.12); }
.estoque-filter-select:focus {
  outline: none;
  border-color: var(--accent1);
}
.estoque-table-wrap { margin-top: 0.5rem; }
.estoque-table .estoque-col-img { width: 48px; text-align: center; }
.estoque-img-placeholder {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--muted);
  font-size: 1.25rem;
}
.estoque-row-actions {
  display: flex;
  gap: 0.35rem;
  align-items: center;
}
#tab-estoque .btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background 0.2s, color 0.2s;
}
#tab-estoque .btn-icon:hover { background: rgba(255,255,255,0.08); color: var(--accent1); }
.estoque-add-form { margin-bottom: 1rem; }
.estoque-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
@media (max-width: 640px) { .estoque-form-grid { grid-template-columns: 1fr; } }
.estoque-form-actions { margin-top: 0.5rem; }

/* Modal Novo Produto */
.modal-novo-produto-card { max-width: 480px; }
.modal-novo-produto-card .modal-card-header { margin-bottom: 1rem; }
.modal-novo-produto-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem 1rem;
  margin-bottom: 1.25rem;
}
.modal-novo-produto-fields .profile-info-field label .required { color: var(--accent1); }
.modal-novo-produto-image-field { grid-column: 1 / -1; }
.prod-image-upload-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.prod-image-input {
  font-size: 0.9rem;
  color: var(--text-primary);
}
.prod-image-input::file-selector-button {
  padding: 0.4rem 0.75rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--text-primary);
  cursor: pointer;
  margin-right: 0.5rem;
}
.prod-image-filename { font-size: 0.85rem; }
.prod-image-preview { margin-top: 0.5rem; }
.prod-image-preview-img {
  max-width: 120px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
}
.estoque-product-img {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--border);
  display: block;
}
@media (max-width: 520px) { .modal-novo-produto-fields { grid-template-columns: 1fr; } }

/* ====== Seletor de cor do tema ====== */
.theme-color-section .theme-picker-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-start;
}

.theme-color-preview {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}

.theme-picker-controls {
  flex: 1;
  min-width: 240px;
}

.theme-input-wrap {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}

.theme-input-wrap input[type="color"] {
  width: 48px;
  height: 44px;
  padding: 4px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  cursor: pointer;
  background: transparent;
}

.theme-input-wrap input[type="text"] {
  flex: 1;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border);
  color: var(--text-primary);
  font-size: 14px;
  font-family: monospace;
}

.theme-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

.theme-preset-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 2px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.theme-preset-btn:hover {
  transform: scale(1.1);
  border-color: rgba(255,255,255,0.4);
}

.theme-segment-title{
  margin-top:16px;
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:0.08em;
}

.theme-segment-title-light{
  margin-top:12px;
}

.theme-segment-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:10px;
  margin-top:8px;
}

.theme-segment-card{
  background:rgba(255,255,255,0.02);
  border-radius:12px;
  border:1px solid rgba(255,255,255,0.06);
  padding:10px 12px;
  text-align:left;
  cursor:pointer;
  display:flex;
  flex-direction:column;
  gap:6px;
  transition:all 0.2s ease;
}

.theme-segment-card:hover{
  border-color:rgba(241,90,0,0.35);
  background:rgba(255,255,255,0.03);
  transform:translateY(-1px);
}

.theme-segment-card.selected{
  border-color:var(--accent1);
  box-shadow:0 0 0 1px var(--accent1);
}

.theme-segment-header{
  display:flex;
  flex-direction:column;
  gap:1px;
}

.theme-segment-name{
  font-size:13px;
  font-weight:600;
  color:var(--text-primary);
}

.theme-segment-tag{
  font-size:10px;
  color:var(--muted);
}

.theme-segment-swatches{
  display:flex;
  gap:5px;
  margin-top:2px;
}

.theme-swatch{
  width:16px;
  height:16px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.35);
}

/* ====== Ícones Bootstrap ====== */
.bi {
  display: inline-block;
  vertical-align: -0.125em;
}

/* Ajustes para ícones nos inputs */
.input .bi {
  flex-shrink: 0;
  font-size: 18px;
  opacity: 0.6;
}

/* Ajustes para ícones nas abas */
.tab .bi {
  font-size: 18px;
  margin-bottom: 2px;
}

/* Ajustes para ícones nos stats */
.stat .bi {
  font-size: 28px;
}

/* Cores para ícones específicos */
.bi-calendar-plus { color: var(--accent1); }
.bi-clock { color: #6ad68a; }
.bi-archive { color: #8da8ff; }
.bi-scissors { color: var(--accent2); }
.bi-person-plus { color: #ff6b6b; }
.bi-list-check { color: #6ad68a; }
.bi-share { color: #8da8ff; }
.bi-check-circle { color: #6ad68a; }
.bi-calendar-check { color: #8da8ff; }
.bi-x-circle { color: #ff6b6b; }
.bi-envelope { color: var(--muted); }
.bi-lock { color: var(--muted); }
.bi-shop { color: var(--muted); }
.bi-box-arrow-in-right { color: var(--accent1); }

/* Hover effects para ícones */
.tab:hover .bi {
  opacity: 0.8;
}

.tab.active .bi {
  opacity: 1;
}


/* Card moderno estilo imagem - VERSÃO ATUALIZADA */
.appointment-card-modern {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(241, 90, 0, 0.3);
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 20px;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.appointment-card-modern:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.12);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* Lado esquerdo - Informações do serviço */
.appointment-service-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.service-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}

.service-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: inline-block;
  width: fit-content;
}

.status-pending {
  background: rgba(241, 90, 0, 0.15);
  color: #f15a00;
  border: 1px solid rgba(241, 90, 0, 0.3);
}

.status-confirmed {
  background: rgba(106, 214, 138, 0.15);
  color: #6ad68a;
  border: 1px solid rgba(106, 214, 138, 0.3);
}

.status-done {
  background: rgba(141, 168, 255, 0.15);
  color: #8da8ff;
  border: 1px solid rgba(141, 168, 255, 0.3);
}

.status-cancelled {
  background: rgba(255, 107, 107, 0.15);
  color: #ff6b6b;
  border: 1px solid rgba(255, 107, 107, 0.3);
}

.service-duration {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--muted);
}

.service-duration i {
  color: var(--accent1);
  font-size: 12px;
}

/* Divisor vertical */
.divider {
  width: 1px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  margin: 0 10px;
}

/* Lado direito - Data, hora e preço */
.appointment-datetime-price {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 140px;
}

.datetime-section {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.date-group,
.time-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.datetime-label {
  font-size: 11px;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: 600;
}

.datetime-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.price-section {
  padding-top: 8px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.price-value {
  font-size: 18px;
  font-weight: 700;
  color: #6ad68a;
  text-align: center;
}

/* Responsividade */
@media (max-width: 768px) {
  .appointment-card-modern {
    flex-direction: column;
    gap: 16px;
    text-align: center;
    padding: 16px;
  }
  
  .divider {
    width: 100%;
    height: 1px;
    margin: 8px 0;
  }
  
  .appointment-datetime-price {
    flex-direction: row;
    justify-content: space-between;
    width: 100%;
    min-width: auto;
    gap: 20px;
  }
  
  .datetime-section {
    flex-direction: row;
    gap: 20px;
  }
  
  .price-section {
    border-top: none;
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 20px;
    padding-top: 0;
  }
  
  .price-value {
    font-size: 16px;
  }
}

@media (max-width: 480px) {
  .appointment-datetime-price {
    flex-direction: column;
    gap: 12px;
  }
  
  .datetime-section {
    flex-direction: column;
    gap: 10px;
  }
  
  .price-section {
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-left: 0;
    padding-top: 12px;
    width: 100%;
  }
}

/* ====== Estilos responsivos para botões da equipe ====== */
.barber-item {
  padding: 12px 0;
}

.barber-item-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.barber-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
}

.barber-actions .btn-small {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 12px;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.barber-actions .btn-small i {
  font-size: 14px;
  flex-shrink: 0;
}

.barber-actions .btn-small .btn-text {
  display: inline;
}

/* Tablet e desktop - layout horizontal */
@media (min-width: 600px) {
  .barber-item-content {
    flex-direction: row;
    align-items: start;
  }
  
  .barber-actions {
    width: auto;
    margin-top: 0;
    flex-wrap: nowrap;
  }
  
  .barber-actions .btn-small {
    flex: 0 0 auto;
  }
}

/* Mobile muito pequeno - apenas ícones */
@media (max-width: 360px) {
  .barber-actions .btn-small .btn-text {
    display: none;
  }
  
  .barber-actions .btn-small {
    padding: 8px;
    min-width: 40px;
  }
  
  .barber-actions .btn-small i {
    font-size: 16px;
  }
}

/* Planos */
.plan-current-section {
  padding: 20px 24px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
}
.plan-current-section h3 {
  margin: 0 0 16px 0;
  font-size: 16px;
  color: var(--accent1);
  display: flex;
  align-items: center;
  gap: 8px;
}
.plan-current-row {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 32px;
}
.plan-current-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.plan-current-label {
  font-size: 12px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.plan-current-value {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
.plan-expiry-text {
  color: var(--accent1);
}
.plan-days-left {
  color: var(--accent1);
}
.plan-days-expired {
  color: #ef4444;
}

.pix-copy-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
}
.pix-copy-input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  font-size: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--panel);
  color: var(--text-primary);
}
.pix-loading {
  padding: 24px;
  text-align: center;
  color: var(--text-secondary);
}

.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.landing-plans-grid {
  margin-top: 32px;
}

.plan-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 28px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  display: flex;
  flex-direction: column;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  border-color: rgba(241, 90, 0, 0.3);
}

.plan-card.plan-popular {
  border-color: var(--accent1);
  border-width: 2px;
  box-shadow: 0 4px 16px rgba(241, 90, 0, 0.15);
}

.plan-card.plan-popular:hover {
  box-shadow: 0 8px 32px rgba(241, 90, 0, 0.25);
}

.plan-badge {
  position: absolute;
  top: -12px;
  right: 24px;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #0b0b0b;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.plan-header {
  margin-bottom: 24px;
  text-align: center;
}

.plan-name {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 16px;
}

.plan-price {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.plan-price-old {
  display: flex;
  align-items: baseline;
  gap: 2px;
  opacity: 0.6;
}

.plan-currency-old {
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: line-through;
}

.plan-value-old {
  font-size: 20px;
  color: var(--text-secondary);
  font-weight: 500;
  text-decoration: line-through;
}

.plan-price-current {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
}

.plan-currency {
  font-size: 18px;
  color: var(--text-secondary);
  font-weight: 500;
}

.plan-value {
  font-size: 42px;
  font-weight: 700;
  color: var(--accent1);
  line-height: 1;
}

.plan-period {
  font-size: 16px;
  color: var(--text-secondary);
  font-weight: 500;
}

.plan-features {
  flex: 1;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.plan-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.plan-feature i {
  color: var(--accent1);
  font-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}

.plan-feature strong {
  color: var(--text-primary);
  font-weight: 600;
}

.plan-feature-note {
  font-size: 0.88em;
  color: var(--muted, var(--text-secondary));
  font-weight: 400;
}

.plan-feature--excluded {
  opacity: 0.72;
}

.plan-feature--excluded i {
  color: #ef4444 !important;
}

.plan-feature--excluded span {
  color: var(--muted, var(--text-secondary));
}

.plan-btn {
  margin-top: auto;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  border: none;
  color: #0b0b0b;
  font-weight: 600;
  padding: 14px 24px;
}

.plan-card.plan-popular .plan-btn {
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  box-shadow: 0 4px 12px rgba(241, 90, 0, 0.3);
}

.plan-btn:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

a.plan-btn {
  display: block;
  text-align: center;
  text-decoration: none;
  border-radius: 10px;
  transition: opacity 0.2s, transform 0.2s;
}

.plan-payment-history-section {
  padding: 20px 24px;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.plan-payment-history-section h3 {
  margin: 0 0 8px 0;
  font-size: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.plan-payment-history-loading {
  padding: 16px 0;
}

.plan-payment-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.plan-payment-history-table th,
.plan-payment-history-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}

.plan-payment-history-table th {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.plan-payment-history-table tbody tr:hover {
  background: rgba(255, 255, 255, 0.02);
}

.plan-payment-history-table td:nth-child(3) {
  font-weight: 600;
  color: var(--accent1);
}

.plan-payment-history-table td.plan-history-breakdown {
  font-size: 12px;
  color: var(--muted);
  max-width: 280px;
  word-break: break-word;
}

/* --- Aba Planos (dashboard): layout e visual refinado --- */
.plans-tab {
  padding-bottom: 2rem;
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

.plans-tab-hero {
  text-align: center;
  max-width: 38rem;
  margin: 0 auto 2rem;
}

.plans-tab-title {
  font-size: clamp(1.35rem, 2.4vw, 1.85rem);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.65rem 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  letter-spacing: -0.02em;
}

.plans-tab-title .bi {
  color: var(--accent1);
  font-size: 1.05em;
}

.plans-tab-lead {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.65;
  color: var(--text-secondary);
}

.plans-compare-heading {
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.35rem 0;
  letter-spacing: -0.015em;
}

.plans-compare-hint {
  margin: 0 0 1.35rem 0;
  font-size: 0.875rem;
  line-height: 1.55;
}

.plans-tab .plan-current-section {
  position: relative;
  overflow: hidden;
  margin-bottom: 2rem;
  padding: 1.35rem 1.5rem 1.5rem;
  background: linear-gradient(135deg, rgba(241, 90, 0, 0.09) 0%, var(--card) 42%, var(--card) 100%);
  border: 1px solid var(--border);
  border-radius: 18px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.14);
}

.plans-tab .plan-current-section::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -8%;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(241, 90, 0, 0.14) 0%, transparent 68%);
  pointer-events: none;
}

.plans-tab .plan-current-heading {
  position: relative;
  z-index: 1;
  margin: 0 0 1.1rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent1);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.plans-tab .plan-current-heading .bi {
  filter: drop-shadow(0 0 10px rgba(241, 90, 0, 0.35));
}

.plans-tab .plan-current-row {
  position: relative;
  z-index: 1;
  gap: 1.25rem 2rem;
}

.plans-tab .plan-current-item {
  min-width: 0;
  padding: 0.5rem 0.65rem;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.06);
}

.plans-tab .plans-grid {
  gap: 1.5rem;
  margin-top: 0.25rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 272px), 1fr));
  align-items: stretch;
}

.plans-tab .plan-card {
  border-radius: 18px;
  padding: 1.6rem 1.45rem;
  background: linear-gradient(168deg, rgba(255, 255, 255, 0.055) 0%, var(--card) 32%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.plans-tab .plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.2);
  border-color: rgba(241, 90, 0, 0.35);
}

.plans-tab .plan-card.plan-popular {
  border-width: 1px;
  border-color: rgba(241, 90, 0, 0.55);
  box-shadow: 0 6px 28px rgba(241, 90, 0, 0.18);
  background: linear-gradient(168deg, rgba(241, 90, 0, 0.1) 0%, var(--card) 38%);
}

.plans-tab .plan-card.plan-popular:hover {
  box-shadow: 0 18px 44px rgba(241, 90, 0, 0.28);
  border-color: var(--accent1);
}

.plans-tab .plan-card--basico {
  border-color: rgba(255, 255, 255, 0.09);
}

.plans-tab .plan-card--premium {
  border-color: rgba(234, 179, 8, 0.38);
  box-shadow: 0 4px 26px rgba(234, 179, 8, 0.1);
  background: linear-gradient(168deg, rgba(234, 179, 8, 0.08) 0%, var(--card) 36%);
}

.plans-tab .plan-card--premium:hover {
  border-color: rgba(234, 179, 8, 0.55);
  box-shadow: 0 16px 40px rgba(234, 179, 8, 0.12);
}

.plans-tab .plan-card--platinum {
  border-color: rgba(167, 139, 250, 0.45);
  background: linear-gradient(168deg, rgba(99, 102, 241, 0.12) 0%, rgba(167, 139, 250, 0.06) 22%, var(--card) 42%);
  box-shadow: 0 4px 28px rgba(99, 102, 241, 0.12);
}

.plans-tab .plan-card--platinum:hover {
  border-color: rgba(167, 139, 250, 0.65);
  box-shadow: 0 16px 44px rgba(99, 102, 241, 0.2);
}

.plans-tab .plan-badge {
  top: -11px;
  right: 20px;
  padding: 7px 15px;
  font-size: 11px;
  letter-spacing: 0.06em;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
}

.plans-tab .plan-badge--platinum {
  background: linear-gradient(125deg, #a78bfa 0%, #6366f1 100%);
  color: #fff;
}

.plans-tab .plan-card--platinum .plan-header .plan-name {
  margin-top: 10px;
}

.plans-tab .plan-header {
  margin-bottom: 1.15rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.plans-tab .plan-name {
  font-size: 1.35rem;
  margin-bottom: 0.85rem;
  letter-spacing: -0.02em;
}

.plans-tab .plan-value {
  font-size: 2.35rem;
  letter-spacing: -0.03em;
}

.plans-tab .plan-features {
  padding: 0.15rem 0 0.15rem 0;
  margin-bottom: 1.15rem;
  gap: 0.65rem;
  overflow: visible;
}

.plans-tab .plan-feature {
  font-size: 0.88rem;
  line-height: 1.45;
  padding: 0.35rem 0;
  border-radius: 8px;
  padding-left: 0.15rem;
  margin: 0 -0.15rem;
}

.plans-tab .plan-feature:not(.plan-feature--excluded):hover {
  background: rgba(255, 255, 255, 0.03);
}

.plans-tab .plan-feature i.bi-check-circle-fill {
  color: #34d399;
}

.plans-tab .plan-feature--excluded {
  opacity: 0.88;
}

.plan-features-separator {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1rem 0 0.5rem 0;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.plan-features-separator::before,
.plan-features-separator::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
  opacity: 0.85;
}

.plan-features-separator span {
  flex-shrink: 0;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border);
}

.plans-tab .plan-btn {
  width: 100%;
  border-radius: 12px;
  padding: 0.85rem 1.25rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 16px rgba(241, 90, 0, 0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.plans-tab .plan-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(241, 90, 0, 0.35);
  opacity: 1;
}

.plans-tab .plan-card.plan-popular .plan-btn {
  box-shadow: 0 4px 18px rgba(241, 90, 0, 0.35);
}

.plans-tab .plan-payment-history-section {
  margin-top: 2.5rem;
  padding: 1.35rem 1.5rem;
  border-radius: 18px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035) 0%, var(--card) 45%);
  border: 1px solid var(--border);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08);
}

.plans-tab .plan-payment-heading {
  margin: 0 0 0.35rem 0;
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.plans-tab .plan-payment-heading .bi {
  color: var(--accent1);
}

.plans-tab .plan-payment-desc {
  margin: 0 0 0.75rem 0;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .plans-tab-hero {
    text-align: left;
    margin-bottom: 1.5rem;
  }

  .plans-tab-title {
    justify-content: flex-start;
  }

  .plans-tab .plan-current-item {
    width: 100%;
  }

  .plans-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  
  .plan-card {
    padding: 24px;
  }
  
  .plan-value {
    font-size: 36px;
  }

  /* Histórico de pagamentos em cards no mobile */
  .plan-payment-history-section {
    padding: 16px;
  }
  .plan-payment-history-table,
  .plan-payment-history-table thead,
  .plan-payment-history-table tbody,
  .plan-payment-history-table tr {
    display: block;
  }
  .plan-payment-history-table thead tr {
    display: none;
  }
  .plan-payment-history-table tbody tr {
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
  }
  .plan-payment-history-table tbody tr:last-child {
    border-bottom: none;
  }
  .plan-payment-history-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 6px 0;
    border: none;
    font-size: 14px;
  }
  .plan-payment-history-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    flex-shrink: 0;
  }
  .plan-payment-history-table td:nth-child(3) {
    font-weight: 600;
    color: var(--accent1);
  }
  .plan-payment-history-table td.plan-history-breakdown {
    font-size: 12px;
    color: var(--muted);
    flex-direction: column;
    align-items: flex-start;
  }
  .plan-payment-history-table td.plan-history-breakdown::before {
    margin-bottom: 2px;
  }
}

/* ====== Landing page (register) – estilo Trinks ====== */
.landing-page {
  width: 100%;
  max-width: 100%;
  margin: 0 auto;
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
}

/* Header com nav (landing-style – páginas legais, etc.) */
body.page-auth header.header-landing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 8px;
  min-height: 64px;
  padding: 16px 24px 0;
}

.brand-link {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: inherit;
}

.brand-link:hover .title { opacity: 0.9; }

/* Logo Kronis com degradê na hotbar (login/register) – mesma fonte da landing (Alfa Slab One) */
.brand-link-kronis {
  font-family: 'Alfa Slab One', serif;
  font-size: 1.5rem;
  font-weight: 400;
  letter-spacing: 0.02em;
}

.brand-kronis-text {
  font-family: inherit;
  background: var(--gradient-kronis);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.brand-link-kronis:hover .brand-kronis-text {
  opacity: 0.9;
}

/* Logo da hotbar (imagem configurável no admin) */
.brand-hotbar-logo {
  display: block;
  max-height: 26px;
  width: auto;
  object-fit: contain;
  transition: opacity 0.2s;
}
.brand-link:hover .brand-hotbar-logo,
.brand-link-kronis:hover .brand-hotbar-logo {
  opacity: 0.9;
}
.brand-link-img {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

/* Kronis com degradê no header do dashboard (main layout) */
.brand-kronis-dashboard {
  font-family: 'Alfa Slab One', serif;
  font-size: 1.5rem;
  font-weight: 400;
  background: var(--gradient-kronis);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.landing-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.landing-nav-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-family: 'Alfa Slab One', serif;
  font-size: 14px;
  font-weight: 400;
  transition: opacity 0.2s;
}

.landing-nav-link:hover {
  opacity: 0.9;
}

/* Botão Cadastrar – outline pill (igual à landing) */
.landing-nav-btn-cadastrar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff !important;
  text-decoration: none;
  font-family: 'Alfa Slab One', serif;
  font-size: 14px;
  font-weight: 400;
  padding: 10px 24px;
  border: 1px solid #ffa800;
  border-radius: 1000px;
  background: transparent;
  transition: background 0.2s, opacity 0.2s;
}

.landing-nav-btn-cadastrar:hover {
  background: rgba(255, 168, 0, 0.1);
  opacity: 0.95;
}

.btn-landing-nav-cta {
  display: inline-flex;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #0b0b0b !important;
  font-weight: 700;
  padding: 10px 20px;
  border-radius: 10px;
  text-decoration: none;
  font-size: 14px;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 2px 12px rgba(241, 90, 0, 0.25);
}

.btn-landing-nav-cta:hover {
  opacity: 0.95;
  transform: translateY(-1px);
}

/* Hero com badge (estilo Trinks) + imagem */
.landing-hero {
  padding: 40px 24px 56px;
  margin: 0 -24px 0;
  background: linear-gradient(180deg, rgba(255,122,0,0.08) 0%, rgba(255,255,255,0.03) 40%, transparent 70%);
  border-radius: 0 0 24px 24px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}

.landing-hero-content {
  display: flex;
  flex-direction: column;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  align-items: center;
}

.landing-hero-text {
  text-align: center;
}

.landing-hero-img {
  width: 100%;
  max-width: 480px;
  min-height: 280px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
  background: rgba(0,0,0,0.15);
}

.landing-hero-img img {
  width: 100%;
  height: auto;
  min-height: 280px;
  display: block;
  object-fit: cover;
}

.landing-hero-badge {
  display: inline-block;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #0b0b0b;
  font-size: 13px;
  font-weight: 700;
  padding: 8px 18px;
  border-radius: 999px;
  margin-bottom: 24px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-hero-title {
  font-size: clamp(26px, 4.5vw, 38px);
  font-weight: 800;
  line-height: 1.25;
  margin-bottom: 16px;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
}

.landing-hero-sub {
  font-size: 17px;
  color: var(--muted);
  max-width: 560px;
  margin: 0 auto 28px;
  line-height: 1.55;
}

.btn-landing-cta {
  display: inline-flex;
  background: linear-gradient(135deg, var(--accent1), var(--accent2));
  color: #0b0b0b;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 12px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
  box-shadow: 0 4px 16px rgba(241, 90, 0, 0.3);
}

.btn-landing-cta:hover {
  opacity: 0.95;
  transform: translateY(-2px);
}

.btn-landing-cta-lg {
  padding: 16px 32px;
  font-size: 16px;
}

/* Faixas tipo Trinks */
.landing-banner {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.05);
  margin: 0 -24px 32px;
  padding: 40px 24px;
  text-align: center;
}

.landing-banner-with-img {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
}

.landing-banner-with-img .landing-banner-inner {
  order: 1;
}

.landing-banner-with-img .landing-banner-img {
  order: 0;
  max-width: 320px;
  margin: 0 auto;
  min-height: 200px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.12);
}

.landing-banner-with-img .landing-banner-img img {
  width: 100%;
  height: auto;
  min-height: 200px;
  display: block;
  object-fit: cover;
}

.landing-banner-alt.landing-banner-with-img .landing-banner-img {
  order: 1;
}

.landing-banner-alt.landing-banner-with-img .landing-banner-inner {
  order: 0;
}

.landing-banner-alt {
  background: rgba(255,122,0,0.06);
  border-color: rgba(255,122,0,0.15);
}

.landing-banner-inner {
  max-width: 640px;
  margin: 0 auto;
}

.landing-banner-title {
  font-size: clamp(20px, 3.5vw, 26px);
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.landing-banner-text {
  font-size: 16px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Seções */
.landing-section {
  padding: 48px 0 56px;
  max-width: 1100px;
  margin: 0 auto;
}

.landing-section-alt {
  background: rgba(255,255,255,0.02);
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
  border-radius: 20px;
}

.landing-section-dark {
  background: linear-gradient(180deg, rgba(0,0,0,0.2), rgba(255,122,0,0.05));
  margin-left: -24px;
  margin-right: -24px;
  padding: 48px 24px 56px;
  border-radius: 20px;
}

.landing-section-title {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
  color: var(--text-primary);
}

.landing-section-sub {
  text-align: center;
  color: var(--muted);
  font-size: 16px;
  margin-bottom: 36px;
}

/* Cards por tipo de negócio (estilo Trinks) */
.landing-segments {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.landing-segment-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  overflow: hidden;
  padding: 0;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.landing-segment-card-img {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background: rgba(0,0,0,0.2);
  border-radius: 18px 18px 0 0;
}

.landing-segment-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.landing-segment-card h3,
.landing-segment-card p,
.landing-segment-card .landing-segment-list,
.landing-segment-card .landing-segment-link {
  padding-left: 28px;
  padding-right: 28px;
}

.landing-segment-card h3 {
  padding-top: 20px;
  margin-bottom: 12px;
}

.landing-segment-card p {
  padding-bottom: 16px;
}

.landing-segment-card .landing-segment-list {
  margin-bottom: 20px;
}

.landing-segment-card .landing-segment-link {
  display: inline-block;
  padding-bottom: 24px;
}

.landing-segment-card:hover {
  border-color: rgba(255,122,0,0.35);
  box-shadow: 0 8px 28px rgba(0,0,0,0.2);
}

.landing-segment-card h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent1);
  margin-bottom: 12px;
}

.landing-segment-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.landing-segment-list {
  list-style: none;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.landing-segment-list li::before {
  content: "• ";
  color: var(--accent1);
  font-weight: 700;
}

.landing-segment-link {
  color: var(--accent1);
  font-weight: 700;
  text-decoration: none;
  font-size: 15px;
  transition: opacity 0.2s;
}

.landing-segment-link:hover {
  opacity: 0.85;
  text-decoration: underline;
}

/* Outros benefícios – grid */
.landing-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.landing-benefit-item {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.05);
  border-radius: 16px;
  padding: 24px;
  transition: border-color 0.2s;
}

.landing-benefit-item:hover {
  border-color: rgba(255,122,0,0.25);
}

.landing-benefit-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: rgba(241, 90, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  color: var(--accent1);
}

.landing-benefit-item h3 {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 8px;
}

.landing-benefit-item p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
}

/* Soluções – cards */
.landing-solutions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.landing-solution-card {
  background: var(--card);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 18px;
  padding: 28px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.landing-solution-card:hover {
  border-color: rgba(255,122,0,0.3);
  box-shadow: 0 6px 24px rgba(0,0,0,0.15);
}

.landing-solution-card h3 {
  font-size: 19px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 10px;
}

.landing-solution-card p {
  font-size: 15px;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 16px;
}

.landing-solution-list {
  list-style: none;
  margin-bottom: 20px;
  font-size: 14px;
  color: var(--text-secondary);
  line-height: 1.7;
}

.landing-solution-list li::before {
  content: "✓ ";
  color: var(--accent1);
  font-weight: 700;
}

/* Números (estilo Trinks) */
.landing-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 56px;
  margin-top: 32px;
}

.landing-stat-item {
  text-align: center;
}

.landing-stat-num {
  display: block;
  font-size: clamp(36px, 6vw, 52px);
  font-weight: 800;
  color: var(--accent1);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.landing-stat-label {
  font-size: 15px;
  color: var(--muted);
  text-transform: lowercase;
}

/* Avaliações na landing (register) */
.landing-section-reviews .landing-section-sub {
  margin-bottom: 28px;
}

.landing-reviews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 24px;
  margin-top: 24px;
}

.landing-review-card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 24px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.landing-review-card:hover {
  border-color: rgba(255,122,0,0.25);
  box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.landing-review-stars {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  color: var(--accent1, #ff7a00);
  font-size: 20px;
  line-height: 1;
}

.landing-review-stars .bi-star-fill,
.landing-review-stars .bi-star {
  display: block;
}

.landing-review-text {
  font-size: 15px;
  color: var(--text-primary);
  line-height: 1.55;
  margin: 0 0 12px 0;
}

.landing-review-author {
  font-size: 14px;
  color: var(--muted);
  margin: 0;
  font-weight: 500;
}

/* CTA block com imagem de fundo */
.landing-cta-block {
  position: relative;
  background: linear-gradient(135deg, rgba(255,122,0,0.12), rgba(241,90,0,0.06));
  border: 1px solid rgba(255,122,0,0.2);
  margin: 0 -24px 48px;
  padding: 48px 24px;
  text-align: center;
  border-radius: 20px;
  overflow: hidden;
}

.landing-cta-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.landing-cta-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.2;
}

.landing-cta-inner {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
}

.landing-cta-title {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: 12px;
  line-height: 1.3;
}

.landing-cta-text {
  font-size: 17px;
  color: var(--muted);
  margin-bottom: 24px;
  line-height: 1.5;
}

/* Planos – lista */
.landing-perks {
  list-style: none;
  max-width: 520px;
  margin: 24px auto 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  color: var(--text-secondary);
}

.landing-perks span {
  color: var(--accent1);
  margin-right: 10px;
}

.landing-section .btn-landing-cta {
  display: block;
  width: fit-content;
  margin: 0 auto;
}

/* Seção de cadastro no final da landing */
.landing-register-section {
  padding: 56px 0 64px;
  margin-top: 32px;
  margin-left: -20px;
  margin-right: -20px;
  padding-left: 20px;
  padding-right: 20px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,0.02) 20%);
  border-radius: 24px 24px 0 0;
  box-sizing: border-box;
}

.landing-register-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.landing-register-header {
  text-align: center;
  margin-bottom: 8px;
}

.landing-register-header .icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(241, 90, 0, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
}

.landing-register-header h2 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-primary);
}

.landing-register-perks {
  max-width: 480px;
  margin: 0 auto 28px;
  padding: 0 16px;
}

/* Layout: imagem + formulário lado a lado (desktop) */
.landing-register-content {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 8px;
}

.landing-register-visual {
  text-align: center;
  margin: 0 auto;
  max-width: 420px;
  min-height: 260px;
  background: rgba(0,0,0,0.12);
  border-radius: 16px;
  overflow: hidden;
}

.landing-register-visual img {
  width: 100%;
  height: auto;
  min-height: 260px;
  display: block;
  border-radius: 16px;
  object-fit: cover;
  border: 1px solid rgba(255,255,255,0.06);
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}

.landing-register-visual-caption {
  margin-top: 12px;
  font-size: 14px;
  color: var(--text-secondary);
  font-weight: 500;
}

.landing-register-card {
  max-width: 100%;
  margin: 0 auto;
  padding: 28px 24px 32px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.05);
  box-sizing: border-box;
}

@media (min-width: 900px) {
  .landing-hero {
    padding: 56px 24px 72px;
  }
  .landing-hero-content {
    flex-direction: row;
    text-align: left;
    gap: 48px;
  }
  .landing-hero-text {
    flex: 1;
    text-align: left;
  }
  .landing-hero-title,
  .landing-hero-sub {
    margin-left: 0;
    margin-right: 0;
  }
  .landing-hero-img {
    flex: 0 0 420px;
    max-width: 420px;
  }
  .landing-banner-with-img {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    text-align: left;
    padding: 40px 48px;
  }
  .landing-banner-with-img .landing-banner-inner {
    margin: 0;
  }
  .landing-banner-with-img .landing-banner-img {
    margin: 0;
    max-width: 100%;
  }
  .landing-banner-alt.landing-banner-with-img {
    grid-template-columns: 1fr 1fr;
  }
  .landing-banner-alt.landing-banner-with-img .landing-banner-img {
    order: 1;
  }
  .landing-banner-alt.landing-banner-with-img .landing-banner-inner {
    order: 0;
  }
  .landing-section {
    padding: 56px 24px 64px;
  }
  .landing-register-section {
    padding: 64px 24px 64px;
    margin-left: -20px;
    margin-right: -20px;
    padding-left: 24px;
    padding-right: 24px;
  }
  .landing-register-content {
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    max-width: 960px;
    margin-left: auto;
    margin-right: auto;
  }
  .landing-register-visual {
    max-width: 100%;
    text-align: left;
    position: sticky;
    top: 24px;
  }
  .landing-register-card {
    max-width: 100%;
    padding: 32px 36px 36px;
  }
  .landing-banner {
    margin-left: -24px;
    margin-right: -24px;
    padding: 48px 24px;
  }
  .landing-cta-block {
    margin-left: -24px;
    margin-right: -24px;
    padding: 56px 24px;
  }
}