.sbp-portal{
	max-width:980px;
	margin:0 auto;
	padding:20px;
	text-indent: 0;
}
.sbp-portal label{
	text-indent: 0;
}
.sbp-card{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:18px;box-shadow:0 10px 25px rgba(0,0,0,.06)}
.sbp-form{display:flex;flex-direction:column;gap:10px}
.sbp-form input{padding:12px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15)}
.sbp-btn{
    background:#000000;
    border:0;
    color:#fff;
    border-radius:999px;
    font-weight:800;
    cursor:pointer
}
.sbp-check{display:flex;align-items:center;gap:8px;font-size:14px}
.sbp-alert{margin:10px 0;padding:10px 12px;border-radius:12px;background:rgba(0,0,0,.04)}
.sbp-alert-ok{background:rgba(0,180,0,.08)}
.sbp-alert-error{background:rgba(255,0,0,.08)}
.sbp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sbp-box{background:#fafafa;border:1px solid rgba(0,0,0,.06);border-radius:14px;padding:14px}
.sbp-muted{opacity:.75;font-size:13px}
.sbp-list{margin:0;padding-left:18px}
.sbp-table{width:100%;border-collapse:collapse}
.sbp-table th,.sbp-table td{padding:10px;border-bottom:1px solid rgba(0,0,0,.08);text-align:left;font-size:14px}
.sbp-table-wrap{overflow:auto}
.sbp-booking {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 0;
    border-bottom:1px solid rgba(0,0,0,.06);
}
.sbp-booking:last-child{border-bottom:0}
.sbp-booking-main{min-width:0;flex:1 1 auto}
.sbp-booking-main strong{font-size:14px}
.sbp-booking-line{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  font-size:12px;
  opacity:.8;
  font-weight:700;
}
.sbp-booking-line span{white-space:nowrap}
.sbp-booking-actions{flex:0 0 auto}
.sbp-booking-actions .sbp-btn{
  padding:8px 12px;
  font-size:12px;
  font-weight:900;
}

/* User header (portal look-and-feel) */
.sbp-portal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.sbp-userhead{display:flex;align-items:center;gap:12px;min-width:0}
.sbp-userhead-avatar{width:44px;height:44px;border-radius:999px;object-fit:cover;background:rgba(0,0,0,.06)}
.sbp-userhead-meta{display:flex;flex-direction:column;gap:2px;min-width:0}
.sbp-userhead-name{font-weight:900;line-height:1.1}
.sbp-userhead-phone{font-size:12px;opacity:.8;font-weight:800}
.sbp-userhead-role{font-size:11px;font-weight:900;opacity:.75}

@media(max-width:520px){
  .sbp-portal-head{flex-direction:column;align-items:flex-start}
  .sbp-userhead-avatar{width:40px;height:40px}
}
.sbp-schedule-prev, .sbp-schedule-next{
  padding: 8px 15px !important;
	
}


@media(max-width:900px){.sbp-grid{grid-template-columns:1fr}}


/* SBP Access (OTP) - espaçamento caprichado */
.sbp-access{max-width:520px;margin:0 auto}
.sbp-access .sbp-field{display:flex;flex-direction:column;gap:6px;margin:12px 0}
.sbp-access .sbp-send-code{margin-top:6px}
.sbp-access .sbp-otp-wrap{margin-top:16px}
.sbp-access .sbp-verify-code{margin-top:8px}

/* Tabs (Admin portal) */
.sbp-portal-tabs{display:flex;gap:10px;margin:12px 0 14px;flex-wrap:wrap}
.sbp-tab{padding:10px 14px;border:1px solid rgba(0,0,0,.12);border-radius:999px;text-decoration:none;color:#111;font-weight:800}
.sbp-tab.active{background:#111;color:#fff;border-color:#111}

/* Schedule board (day view) */
.sbp-schedule{margin-top:10px}
.sbp-schedule-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:10px 0 12px}
.sbp-schedule-head .sbp-btn{padding:10px 14px}
.sbp-schedule-date{display:flex;align-items:center}
.sbp-schedule-date input{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);width:220px;max-width:100%}

.sbp-schedule-board{
  position:relative;
  display:flex;
  align-items:stretch;
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  overflow:auto;
  -webkit-overflow-scrolling:touch;
  box-shadow:0 10px 25px rgba(0,0,0,.06);
}
.sbp-time-axis{position:sticky;left:0;min-width:68px;background:linear-gradient(to right,#fff 0%,#fff 70%,rgba(0,0,0,.02) 100%);border-right:1px solid rgba(0,0,0,.06);z-index:2;margin-top:62px}
.sbp-time-axis{flex:0 0 68px}
.sbp-time-axis .sbp-time{position:absolute;left:0;width:68px;height:1px;margin-top:2px}
.sbp-time-axis .sbp-time span{position:absolute;top:-10px;left:10px;font-size:12px;opacity:.7;font-weight:700}

.sbp-cols{display:flex;min-width:760px;flex:1 1 auto}
.sbp-col{min-width:240px;border-right:1px solid rgba(0,0,0,.06)}
.sbp-col:last-child{border-right:0}
.sbp-col-head{position:sticky;top:0;z-index:3;display:flex;align-items:center;gap:10px;padding:12px 12px;background:#fff;border-bottom:1px solid rgba(0,0,0,.06)}
.sbp-pro-avatar{width:38px;height:38px;border-radius:999px;object-fit:cover;background:rgba(0,0,0,.06)}
.sbp-pro-avatar--placeholder{display:inline-block}
.sbp-pro-name{font-weight:900;font-size:14px}

.sbp-col-body{position:relative;background:repeating-linear-gradient(to bottom,rgba(0,0,0,.03) 0,rgba(0,0,0,.03) 1px,transparent 1px,transparent 72px)}

/* Event cards (UI/UX): readable, hierarchy, works for short appointments */
.sbp-event{
  position:absolute;
  left: calc(10px + (var(--sbp-col-i, 0) * ((100% - 20px) / var(--sbp-col-n, 1))));
  width: calc(((100% - 20px) / var(--sbp-col-n, 1)) - 6px);
  right: auto;
  background:#f5f7ff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  padding:10px;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.sbp-event-top{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.sbp-event-title{font-weight:900;font-size:13px;line-height:1.15;flex:1 1 auto;min-width:0}
.sbp-event-meta{font-size:11px;opacity:.75;font-weight:800;white-space:nowrap}

/* allow client name to wrap in 2 lines when needed */
.sbp-event-sub{
  font-size:12px;
  opacity:.75;
  line-height:1.2;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

/* keep actions visible; on short cards we only show on hover/focus */
.sbp-event-actions{margin-top:auto;display:flex;gap:8px;align-items:center}
.sbp-event-actions .sbp-btn{padding:8px 12px;font-weight:900}
/* if very small card, we hide actions unless hover/focus (avoids losing text) */
.sbp-event.sbp-event--compact .sbp-event-actions{display:none}
.sbp-event.sbp-event--compact:hover .sbp-event-actions,
.sbp-event.sbp-event--compact:focus-within .sbp-event-actions{display:flex}

/* In agenda cards, actions are handled via a popup (prevents overlap/click issues) */
.sbp-schedule .sbp-event-actions{display:none !important;}
.sbp-schedule .sbp-event{cursor:pointer;}

/* Modal styles */
body.sbp-modal-open{overflow:hidden;}
.sbp-modal{position:fixed;inset:0;z-index:99999;display:none;}
.sbp-modal[aria-hidden="false"]{display:block;}
.sbp-modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.sbp-modal__panel{position:relative;max-width:520px;width:calc(100% - 24px);margin:60px auto 24px;background:#fff;border-radius:18px;box-shadow:0 14px 60px rgba(0,0,0,.25);overflow:hidden;}
.sbp-modal__head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid #eee;}
.sbp-modal__title{font-weight:800;font-size:16px;}
.sbp-modal__body{padding:14px 16px;}
.sbp-modal__row{margin-bottom:8px;}
.sbp-modal__foot{display:flex;gap:10px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #eee;flex-wrap:wrap;}
.sbp-modal__service{font-size:18px;}
.sbp-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.sbp-grid-2 label{display:block;font-size:13px;}
.sbp-grid-2 input,.sbp-modal select{width:100%;margin-top:6px;padding:10px 12px;border:1px solid #ddd;border-radius:12px;}

/* subtle states */
.sbp-event[data-status="cancelled"], .sbp-event[data-status="canceled"]{opacity:.55;filter:grayscale(.2)}
.sbp-event:hover{transform:translateY(-1px)}

/* ===== Admin portal (Settings / CRUD) ===== */
.sbp-card-head h3{margin:0 0 4px;font-size:18px}
.sbp-card-head h4{margin:0}
.sbp-admin-grid{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
@media(min-width:1000px){.sbp-admin-grid{grid-template-columns:1fr 1fr}}

.sbp-field{display:flex;flex-direction:column;gap:6px;margin:10px 0}
.sbp-field label{font-size:13px;font-weight:800;opacity:.9}
.sbp-field input,.sbp-field textarea,.sbp-field select{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);font-size:14px;max-width:100%}
.sbp-row{display:flex;gap:12px;flex-wrap:wrap}
.sbp-row .sbp-field{flex:1 1 220px;min-width:200px}
.sbp-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px}
.sbp-msg{font-size:13px;opacity:.8;font-weight:700}
.sbp-btn--ghost{background:transparent;color:#111;border:1px solid rgba(0,0,0,.15)}

.sbp-crud{display:grid;grid-template-columns:1fr;gap:14px;margin-top:10px}
@media(min-width:960px){.sbp-crud{grid-template-columns:1.1fr .9fr}}
.sbp-crud-toolbar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:10px 0}
.sbp-crud-toolbar .sbp-search{flex:1 1 220px;padding:10px 12px;border-radius:999px;border:1px solid rgba(0,0,0,.15)}
.sbp-table td .sbp-btn{padding:8px 12px;font-weight:900}

.sbp-checkgrid{display:grid;grid-template-columns:repeat(2, minmax(0,1fr));gap:8px;margin-top:8px}
@media(max-width:640px){.sbp-checkgrid{grid-template-columns:1fr}}
.sbp-checkgrid label{display:flex;gap:8px;align-items:center;padding:8px 10px;border:1px solid rgba(0,0,0,.08);border-radius:12px;background:#fafafa}

.sbp-weekly{display:grid;grid-template-columns:1fr;gap:10px;margin-top:8px}
.sbp-weekday{border:1px solid rgba(0,0,0,.08);border-radius:14px;padding:10px;background:#fafafa}
.sbp-weekday-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sbp-weekday-head strong{font-size:13px}
.sbp-weekday .sbp-small{font-size:12px;opacity:.8}
.sbp-weekday .sbp-row{margin-top:8px}

.sbp-thumb-preview{margin-top:8px;display:flex;align-items:center;gap:10px}
.sbp-thumb-preview img{width:64px;height:64px;border-radius:14px;object-fit:cover;border:1px solid rgba(0,0,0,.12)}
.sbp-thumb-preview .sbp-muted{margin:0}

/* ===== MELHORIAS MOBILE ===== */

/* Tablets e telas médias */
@media(max-width:768px){
  .sbp-portal{padding:12px}
  
  /* Navegação de datas mais compacta */
  .sbp-schedule-head{gap:6px;margin:8px 0}
  .sbp-schedule-head .sbp-btn{padding:8px 12px;font-size:14px}
  .sbp-schedule-date input{width:150px;padding:8px 10px;font-size:14px}
  
  /* Colunas menores */
  .sbp-col{min-width:200px}
  .sbp-cols{min-width:600px}
  
  /* Eixo de tempo mais compacto */
  .sbp-time-axis{min-width:60px;flex:0 0 60px;margin-top:62px}
  .sbp-time-axis .sbp-time{width:60px}
  .sbp-time-axis .sbp-time span{left:8px;font-size:11px}
  
  /* Cards de eventos ajustados */
  .sbp-event{left:8px;right:8px;padding:8px;border-radius:12px}
  .sbp-event-title{font-size:12px}
  .sbp-event-meta{font-size:10px}
  .sbp-event-sub{font-size:11px}

  /*Desativando botões flutuantes no mobile*/
  .sticky-buttons.mobile-rule{
    display:none; 
  }

}

/* Smartphones em modo paisagem e portrait */
@media(max-width:640px){
  .sbp-portal{padding:10px}
  
  /* Hint visual para scroll horizontal */
  .sbp-schedule-board::after{
    content:'';
    position:absolute;
    top:0;
    right:0;
    width:30px;
    height:100%;
    background:linear-gradient(to left, rgba(0,0,0,.08), transparent);
    pointer-events:none;
    z-index:1;
  }
  
  /* Scroll suave com snap */
  .sbp-schedule-board{
    scroll-snap-type:x proximity;
    scroll-padding-left:68px;
  }
  
  /* Colunas com snap point */
  .sbp-col{
    scroll-snap-align:start;
    min-width:180px;
    flex:0 0 180px;
  }
  
  .sbp-cols{
    min-width:auto;
    flex-wrap:nowrap;
  }
  
  /* Eixo de tempo fixo e otimizado */
  .sbp-time-axis{
    min-width:50px;
    flex:0 0 50px;
    box-shadow:2px 0 8px rgba(0,0,0,.06);
    margin-top:60px;
  }
  .sbp-time-axis .sbp-time{width:50px}
  .sbp-time-axis .sbp-time span{left:6px;font-size:10px}
  
  /* Header das colunas sticky */
  .sbp-col-head{
    padding:10px 8px;
    gap:8px;
    min-height:60px;
  }
  
  .sbp-pro-avatar{width:32px;height:32px}
  .sbp-pro-name{font-size:13px;line-height:1.2}
  
  /* Cards otimizados para toque */
  .sbp-event{
    left:6px;
    right:6px;
    padding:8px;
    min-height:60px;
    border-radius:10px;
  }
  
  .sbp-event-title{font-size:12px}
  .sbp-event-meta{font-size:10px}
  .sbp-event-sub{font-size:11px;-webkit-line-clamp:1}
  
  /* Botões maiores para área de toque */
  .sbp-event-actions .sbp-btn{
        padding: 0 5px;
        font-size: 10px;
        min-height: 32px;
  }
  
  /* Mostrar ações em cards compactos no mobile (touch-friendly) */
  .sbp-event.sbp-event--compact .sbp-event-actions{
    display:flex;
    opacity:0.9;
  }
  
  /* Navegação de datas otimizada */
  .sbp-schedule-head{
    gap:6px;
    margin:6px 0 8px;
  }
  .sbp-schedule-head .sbp-btn{
    padding:8px 10px;
    font-size:13px;
    min-height:36px;
  }
  .sbp-schedule-date input{
    width:130px;
    padding:8px;
    font-size:13px;
  }
  
  /* Mensagem auxiliar menor */
  .sbp-muted{font-size:12px;margin-bottom:8px}
}


/* Smartphones pequenos (< 400px) */
@media(max-width:400px){
  .sbp-portal{padding:8px}
  
  /* Colunas ainda mais compactas */
  .sbp-col{
    min-width:160px;
    flex:0 0 160px;
  }
  
  .sbp-time-axis{
    min-width:45px;
    flex:0 0 45px;
    margin-top:52px;
  }
  .sbp-time-axis .sbp-time{width:45px}
  .sbp-time-axis .sbp-time span{left:4px;font-size:9px}
  
  .sbp-col-head{padding:8px 6px}
  .sbp-pro-avatar{width:28px;height:28px}
  .sbp-pro-name{font-size:12px}
  
  .sbp-event{
    left:4px;
    right:4px;
    padding:6px;
  }
  
  .sbp-event-title{font-size:11px}
  .sbp-event-meta{font-size:9px}
  .sbp-event-sub{font-size:10px}
  
  /* Navegação simplificada */
  .sbp-schedule-head .sbp-btn{
    padding:6px 8px;
    font-size:12px;
  }
  .sbp-schedule-date input{
    width:110px;
    padding:6px;
    font-size:12px;
  }
  
  /* Tabs responsivas */
  .sbp-tab{
    padding:8px 12px;
    font-size:13px;
  }
}

/* Orientação landscape em smartphones */
@media(max-width:900px) and (orientation:landscape){
  .sbp-col-head{
    padding:8px;
  }
  
  .sbp-pro-avatar{width:30px;height:30px}
  .sbp-pro-name{font-size:12px}
}

/* Melhorias para acessibilidade touch */
@media(hover:none) and (pointer:coarse){
  /* Área de toque mínima de 44x44px */
  .sbp-btn{
    min-height:44px;
    min-width:44px;
    padding:10px 16px;
  }
  
  .sbp-event{
    min-height:60px;
  }
  
  /* Feedback visual ao tocar */
  .sbp-btn:active{
    transform:scale(0.97);
    opacity:0.9;
  }
  
  .sbp-event:active{
    transform:scale(0.99);
  }
}

/* Drag & drop / resize helpers */
.sbp-event--draggable{cursor:grab}
.sbp-event.sbp-is-dragging{opacity:.9;cursor:grabbing;box-shadow:0 12px 28px rgba(0,0,0,.18)}
.sbp-resize-handle{position:absolute;left:10px;right:10px;bottom:6px;height:10px;border-radius:999px;background:rgba(0,0,0,.08);cursor:ns-resize}



/* === Patch: click-to-open modal; disable drag/resize/expand effects === */
.sbp-schedule .sbp-event{cursor:pointer !important;}
.sbp-schedule .sbp-event:active{transform:none !important;}
.sbp-event--draggable, .sbp-event--draggable-disabled{cursor:pointer !important;}
.sbp-resize-handle, .sbp-resize-handle-disabled{display:none !important;}
/* Keep time + client visible even in compact cards */
.sbp-event .sbp-event-meta{display:block !important;}
.sbp-event .sbp-event-sub{display:block !important;}


/* Client welcome wall (mural) */
.sbp-welcome-wall{background:#fff;border:1px solid rgba(0,0,0,.08);border-radius:12px;padding:12px 14px;margin:12px 0 14px 0;line-height:1.35;}


/* ===== Financeiro (Portal /administracao) ===== */
.sbp-finance-filter{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.sbp-fin-month{padding:10px 12px;border-radius:12px;border:1px solid rgba(0,0,0,.15);font-size:14px;background:#fff}

.sbp-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-top:12px}
@media(max-width:1100px){.sbp-kpi-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.sbp-kpi-grid{grid-template-columns:1fr}}

.sbp-kpi{background:#ffffff;border:1px solid rgba(0,0,0,.08);border-radius:16px;padding:14px;box-shadow:0 8px 20px rgba(0,0,0,.05)}
.sbp-kpi-label{font-size:12px;font-weight:800;opacity:.7;text-transform:uppercase;letter-spacing:.04em}
.sbp-kpi-value{font-size:22px;font-weight:900;margin-top:6px}
.sbp-kpi-sub{font-size:12px;opacity:.7;margin-top:6px}

.sbp-fin-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:12px}
@media(max-width:1100px){.sbp-fin-grid{grid-template-columns:1fr}}
.sbp-section-title{font-weight:900;margin-bottom:8px;font-size:14px;opacity:.85}