/* CH OS v170 - Mobile / Tablet optimization
   Safe layer: only responsive overrides. Desktop structure remains controlled by current portal CSS. */

:root{
  --ch-mobile-safe-left: env(safe-area-inset-left, 0px);
  --ch-mobile-safe-right: env(safe-area-inset-right, 0px);
  --ch-mobile-safe-top: env(safe-area-inset-top, 0px);
  --ch-mobile-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* evita vazamento horizontal causado por cards grandes, selects nativos e títulos longos */
html, body { max-width: 100%; overflow-x: clip; }
*, *::before, *::after { box-sizing: border-box; }
img, svg, video { max-width: 100%; height: auto; }

/* tablets grandes / iPad landscape: mantém estética, reduz exageros e melhora leitura */
@media (max-width: 1366px){
  body.client-portal-body,
  body.cp-client-body,
  body.portal-client-body,
  body[class*="client"]{
    background-size: auto, 88px 88px, cover !important;
  }

  .client-shell,
  .portal-shell,
  .cp-shell{
    gap: clamp(20px, 3vw, 44px) !important;
  }

  .client-sidebar,
  .portal-sidebar,
  .cp-sidebar,
  aside.sidebar,
  .sidebar{
    width: clamp(260px, 29vw, 330px) !important;
    min-width: clamp(260px, 29vw, 330px) !important;
  }

  main,
  .client-main,
  .portal-main,
  .cp-main,
  .page-main{
    width: min(100%, 1060px) !important;
  }

  .cp-service-hero-v79 h1,
  .intro-panel h1,
  .form-intro h1,
  .form-intro h2,
  .form-card > h1,
  .form-card > h2,
  .dashboard-hero h1,
  .cp-dashboard-hero h1,
  .hero h1{
    font-size: clamp(34px, 5.2vw, 68px) !important;
    line-height: .94 !important;
    letter-spacing: -0.045em !important;
    overflow-wrap: anywhere;
  }

  .form-card,
  .intro-panel,
  .cp-service-hero-v79,
  .cp-access-card-v79,
  .dashboard-card,
  .cp-card,
  .service-card{
    border-radius: clamp(22px, 3vw, 34px) !important;
  }

  .form-card input,
  .form-card select,
  .form-card textarea,
  input, select, textarea{
    max-width: 100% !important;
  }
}

/* tablet: coloca textos explicativos acima dos formulários e centraliza blocos */
@media (max-width: 1180px){
  .form-wrap,
  section.form-wrap,
  .register-existing-v151{
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 22px !important;
    width: min(100%, 920px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: clamp(18px, 3vw, 32px) !important;
    padding-right: clamp(18px, 3vw, 32px) !important;
  }

  .form-wrap > .intro-panel,
  .register-existing-v151 > .intro-panel,
  .form-wrap > .copy-panel,
  .form-wrap > .info-card{
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    text-align: center !important;
    min-height: unset !important;
    padding: clamp(28px, 5vw, 48px) !important;
  }

  .form-wrap > .intro-panel .kicker,
  .register-existing-v151 > .intro-panel .kicker,
  .form-intro .kicker,
  .kicker{
    justify-content: center !important;
    text-align: center !important;
  }

  .form-card,
  .register-existing-v151 > .form-card{
    width: 100% !important;
    max-width: 920px !important;
    margin: 0 auto !important;
    padding: clamp(28px, 5vw, 46px) !important;
  }

  .form-intro{
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
  }

  .form-grid{
    grid-template-columns: 1fr 1fr !important;
    gap: 18px !important;
  }

  .plan-grid,
  .package-grid,
  .cards-grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .cp-service-stage-v79{
    width: min(100%, 980px) !important;
    padding-left: clamp(18px, 3vw, 32px) !important;
    padding-right: clamp(18px, 3vw, 32px) !important;
  }

  .cp-login-register-grid-v79{
    grid-template-columns: 1fr !important;
  }
}

/* mobile e tablet estreito: sidebar vira bloco superior, cards 1 coluna, campos 1 coluna */
@media (max-width: 900px){
  html, body{ overflow-x: hidden !important; }

  body{
    min-width: 0 !important;
  }

  .client-shell,
  .portal-shell,
  .cp-shell,
  .app-shell,
  .layout{
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-height: 100dvh !important;
    padding: calc(14px + var(--ch-mobile-safe-top)) calc(14px + var(--ch-mobile-safe-right)) calc(20px + var(--ch-mobile-safe-bottom)) calc(14px + var(--ch-mobile-safe-left)) !important;
    gap: 18px !important;
  }

  .client-sidebar,
  .portal-sidebar,
  .cp-sidebar,
  aside.sidebar,
  .sidebar{
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: unset !important;
    max-height: none !important;
    overflow: visible !important;
    padding: 22px !important;
    border-radius: 26px !important;
  }

  .client-sidebar .logo,
  .portal-sidebar .logo,
  .cp-sidebar .logo,
  .sidebar .logo,
  .brand-logo{
    max-width: 220px !important;
  }

  .language-switch,
  .lang-switch,
  .cp-lang-switch,
  .lang-tabs{
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 18px 0 !important;
  }

  .client-nav,
  .portal-nav,
  .cp-nav,
  nav.menu,
  .sidebar nav{
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .client-nav a,
  .portal-nav a,
  .cp-nav a,
  .sidebar nav a{
    min-height: 54px !important;
    padding: 12px !important;
    border-radius: 16px !important;
  }

  main,
  .client-main,
  .portal-main,
  .cp-main,
  .page-main{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .form-wrap,
  section.form-wrap,
  .register-existing-v151,
  .cp-service-stage-v79{
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
  }

  .form-grid{
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  .form-card,
  .intro-panel,
  .cp-service-hero-v79,
  .cp-access-card-v79,
  .dashboard-card,
  .cp-card,
  .service-card{
    width: 100% !important;
    max-width: 100% !important;
    padding: clamp(24px, 7vw, 34px) !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .intro-panel,
  .cp-service-hero-v79{
    text-align: center !important;
  }

  .intro-panel h1,
  .cp-service-hero-v79 h1,
  .hero h1{
    font-size: clamp(36px, 12vw, 58px) !important;
    line-height: .92 !important;
  }

  .form-card h1,
  .form-card h2,
  .form-intro h2{
    font-size: clamp(26px, 7vw, 36px) !important;
    line-height: 1 !important;
  }

  input, select, textarea,
  .form-card input,
  .form-card select,
  .form-card textarea{
    width: 100% !important;
    min-height: 54px !important;
    font-size: 16px !important; /* evita zoom automático no iOS */
  }

  textarea{ min-height: 130px !important; }

  .actions,
  .form-actions{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 12px !important;
  }

  .btn,
  button,
  .button{
    min-height: 52px !important;
    justify-content: center !important;
    text-align: center !important;
  }

  .plan-grid,
  .package-grid,
  .cards-grid,
  .stats-grid,
  .dashboard-grid{
    grid-template-columns: 1fr !important;
  }

  .client-footer,
  .portal-footer,
  .cp-footer,
  footer{
    flex-direction: column !important;
    gap: 12px !important;
    text-align: center !important;
    padding: 24px 0 !important;
  }
}

/* celular pequeno */
@media (max-width: 560px){
  .client-shell,
  .portal-shell,
  .cp-shell,
  .app-shell,
  .layout{
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .client-nav,
  .portal-nav,
  .cp-nav,
  nav.menu,
  .sidebar nav{
    grid-template-columns: 1fr !important;
  }

  .client-sidebar,
  .portal-sidebar,
  .cp-sidebar,
  aside.sidebar,
  .sidebar{
    padding: 18px !important;
    border-radius: 22px !important;
  }

  .form-card,
  .intro-panel,
  .cp-service-hero-v79,
  .cp-access-card-v79{
    padding: 22px !important;
    border-radius: 22px !important;
  }

  .intro-panel h1,
  .cp-service-hero-v79 h1,
  .hero h1{
    font-size: clamp(32px, 13vw, 48px) !important;
  }

  .kicker{
    font-size: 11px !important;
    letter-spacing: .16em !important;
  }
}