/* Ajustes reales para teléfonos: composición, áreas táctiles y cero desplazamiento lateral. */
body.portal-body { overflow-x:hidden; }

@media (max-width:820px) {
  .portal-body .app-content { padding:20px 18px calc(42px + env(safe-area-inset-bottom)); }
  .portal-body .portal-header { display:grid; grid-template-columns:48px minmax(0,1fr); align-items:center; gap:13px; margin-bottom:39px; }
  .portal-body .menu-button { display:grid; width:48px; height:48px; margin:0; place-items:center; border:1px solid rgba(255,255,255,.16); border-radius:4px; background:#1d1e1a; color:#e8cc7a; font-size:1.35rem; }
  .portal-body .profile-chip { position:static; grid-column:2; grid-row:1; justify-self:end; min-width:0; width:auto; max-width:calc(100vw - 92px); padding:0; border:0; background:transparent; }
  .portal-body .profile-chip > span { width:42px; height:42px; flex:0 0 42px; }
  .portal-body .profile-chip b { max-width:calc(100vw - 155px); overflow:hidden; color:var(--paper); font-size:.78rem; text-overflow:ellipsis; white-space:nowrap; }
  .portal-body .profile-chip small { display:none; }
  .portal-body .portal-header > div:first-of-type { grid-column:1/-1; grid-row:2; margin-top:3px; }
  .portal-body .portal-header h1 { margin-top:3px; font-size:clamp(3.15rem,15vw,4.35rem); }
  .portal-body .overview-intro { margin-bottom:26px; }
  .portal-body .overview-intro h2,.portal-body .view-heading h2 { max-width:330px; font-size:clamp(2.55rem,13vw,3.65rem); line-height:.94; }
  .portal-body .overview-intro p,.portal-body .view-heading > p:not(.eyebrow) { max-width:335px; font-size:.84rem; line-height:1.58; }
  .portal-body .overview-intro .primary-button { width:min(100%,360px); min-height:52px; margin-top:23px; }
  .portal-body .appointment-list { gap:12px; }
  .portal-body .appointment-card { grid-template-columns:76px minmax(0,1fr); gap:14px; padding:17px; }
  .portal-body .date-block { width:76px; min-height:88px; }
  .portal-body .date-block b { font-size:2rem; }
  .portal-body .appointment-main { min-width:0; }
  .portal-body .appointment-main h3 { overflow-wrap:anywhere; font-size:1.35rem; }
  .portal-body .appointment-main p { font-size:.78rem; line-height:1.55; }
  .portal-body .status-area { display:grid; grid-column:1/-1; grid-row:auto; width:100%; justify-items:stretch; gap:9px; }
  .portal-body .status-pill { width:max-content; }
  .portal-body .pay-button { width:100%; min-height:46px; font-size:.65rem; }
  .portal-body .private-note { padding:16px; }
  .portal-body .booking-form-app { width:100%; padding:22px 17px; }
  .portal-body .booking-form-app input,.portal-body .booking-form-app select,.portal-body .booking-form-app textarea,.portal-body .message-panel select,.portal-body .message-composer input { min-height:46px; font-size:16px; }
  .portal-body .home-location-share .outline-mini { min-height:42px; }
  .portal-body .client-map-card .map-canvas { height:270px; }
  .portal-body .message-panel { min-height:500px; }
}

@media (max-width:390px) {
  .portal-body .app-content { padding-right:15px; padding-left:15px; }
  .portal-body .portal-header { gap:10px; }
  .portal-body .menu-button { width:45px; height:45px; }
  .portal-body .profile-chip { padding:0; }
  .portal-body .profile-chip b { max-width:calc(100vw - 135px); }
  .portal-body .portal-header h1 { font-size:3.05rem; }
  .portal-body .appointment-card { grid-template-columns:64px minmax(0,1fr); padding:14px; }
  .portal-body .date-block { width:64px; min-height:81px; }
  .portal-body .date-block b { font-size:1.75rem; }
  .portal-body .appointment-main h3 { font-size:1.2rem; }
  .portal-body .booking-form-app { padding:19px 14px; }
}

@media (max-width:480px) {
  .pix-dialog { width:calc(100% - 18px); max-height:calc(100dvh - 18px); padding:25px 18px; border-radius:10px; }
  .pix-dialog::before { margin:-25px -18px 22px; }
  .pix-dialog h2 { font-size:2.1rem; }
  .pix-dialog .checkout-fields input,.pix-dialog .checkout-fields select { min-height:46px; font-size:16px; }
  .pix-dialog .primary-button { min-height:49px; }
}