/*
 * ATPV Online Portal — acabamento final 3.8.0
 * Carregado por último para manter todas as telas alinhadas e responsivas.
 */

html body .atpv-shell,
html body .atpv-shell * ,
html body .atpv-shell *::before,
html body .atpv-shell *::after {
  box-sizing: border-box !important;
}

/*
 * Uma única linha de alinhamento para toda a página.
 * Evita que cabeçalho, protocolos, hero, métricas e cards comecem em posições diferentes.
 */
html body .atpv-shell {
  width: 100% !important;
  max-width: none !important;
  margin: 0 auto !important;
  padding: clamp(28px, 3vw, 46px) clamp(18px, 3.2vw, 52px) 60px !important;
  overflow-x: hidden !important;
  overflow-x: clip !important;
}

html body .atpv-shell.atpv-shell--compact {
  width: min(100%, 860px) !important;
  max-width: 860px !important;
}

html body .atpv-shell > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
}

html body .atpv-shell :where(
  main, section, article, form, fieldset, label, div, dl, figure,
  .atpv-dashboard-head, .atpv-request-tabs, .atpv-status-hero,
  .atpv-dashboard-metrics, .atpv-next-action, .atpv-dashboard-grid,
  .atpv-dashboard-section, .atpv-card, .atpv-card--timeline
) {
  min-width: 0 !important;
  max-width: 100% !important;
}

/* Tipografia consistente e legível. */
html body .atpv-shell {
  font-weight: 500 !important;
}

html body .atpv-shell :where(p, li, dd, label, input, select, textarea, button, a) {
  font-weight: 500 !important;
}

html body .atpv-shell :where(strong, b, dt) {
  font-weight: 700 !important;
}

html body .atpv-shell :where(h1, h2, h3, h4) {
  max-width: 100% !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  text-wrap: pretty;
}

html body .atpv-shell h1 {
  font-size: clamp(36px, 4.7vw, 64px) !important;
  font-weight: 700 !important;
  line-height: 1.06 !important;
}

html body .atpv-shell h2 {
  font-size: clamp(23px, 2.7vw, 38px) !important;
  font-weight: 700 !important;
  line-height: 1.18 !important;
}

html body .atpv-shell :where(
  p, li, dd, strong, small, span, a, button, label, figcaption, time, td, th
) {
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

/* Cabeçalho da área do cliente. */
html body .atpv-shell .atpv-page-tools,
html body .atpv-shell .atpv-dashboard-head,
html body .atpv-shell .atpv-request-tabs,
html body .atpv-shell .atpv-status-hero,
html body .atpv-shell .atpv-dashboard-metrics,
html body .atpv-shell .atpv-next-action,
html body .atpv-shell .atpv-dashboard-grid,
html body .atpv-shell .atpv-dashboard-section {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

html body .atpv-shell .atpv-dashboard-head {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  align-items: center !important;
  gap: 22px !important;
  margin-top: 30px !important;
  margin-bottom: 22px !important;
}

html body .atpv-shell .atpv-dashboard-head > div {
  min-width: 0 !important;
}

html body .atpv-shell .atpv-dashboard-head h1 {
  margin: 0 0 10px !important;
}

html body .atpv-shell .atpv-dashboard-head p {
  margin: 0 !important;
  font-size: clamp(15px, 1.4vw, 18px) !important;
  line-height: 1.55 !important;
}

/* Protocolos sem deslocamento lateral ou sombra que vaze. */
html body .atpv-shell .atpv-request-tabs {
  display: flex !important;
  align-items: stretch !important;
  gap: 12px !important;
  padding: 4px 0 8px !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  scroll-padding-inline: 0;
}

html body .atpv-shell .atpv-request-tabs a {
  flex: 0 0 clamp(230px, 24vw, 300px) !important;
  min-width: 0 !important;
  min-height: 104px !important;
  height: auto !important;
  display: grid !important;
  align-content: center !important;
  gap: 5px !important;
  padding: 17px 18px !important;
  overflow: hidden !important;
}

html body .atpv-shell .atpv-request-tabs a.is-active {
  box-shadow: inset 0 0 0 1px var(--atpv-teal), 0 8px 20px rgba(14, 102, 113, .08) !important;
}

html body .atpv-shell .atpv-request-tabs :where(span, strong, small) {
  display: block !important;
  width: 100% !important;
  line-height: 1.35 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

html body .atpv-shell .atpv-request-tabs strong {
  font-size: 15px !important;
}

html body .atpv-shell .atpv-request-tabs small {
  font-size: 10px !important;
  letter-spacing: .07em !important;
}

/* Status principal: largura segura e conteúdo sem corte. */
html body .atpv-shell .atpv-status-hero {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) minmax(230px, 290px) !important;
  align-items: center !important;
  gap: clamp(22px, 4vw, 52px) !important;
  padding: clamp(28px, 4vw, 48px) !important;
  border-radius: 24px !important;
  overflow: hidden !important;
}

html body .atpv-shell .atpv-status-hero > div:first-child {
  min-width: 0 !important;
}

html body .atpv-shell .atpv-status-hero h2 {
  margin: 0 0 12px !important;
  font-size: clamp(30px, 4.2vw, 54px) !important;
  line-height: 1.08 !important;
}

html body .atpv-shell .atpv-status-hero p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

html body .atpv-shell .atpv-status-protocol {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  padding: 20px !important;
  overflow: hidden !important;
}

html body .atpv-shell .atpv-status-protocol :where(strong, small) {
  display: block !important;
  width: 100% !important;
  overflow-wrap: anywhere !important;
}

/* Métricas e cards sempre dentro da largura disponível. */
html body .atpv-shell .atpv-dashboard-metrics {
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}

html body .atpv-shell .atpv-dashboard-metrics article {
  min-width: 0 !important;
  min-height: 112px !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 7px !important;
  padding: 18px !important;
  overflow: hidden !important;
}

html body .atpv-shell .atpv-dashboard-metrics :where(span, strong) {
  display: block !important;
  width: 100% !important;
  overflow-wrap: anywhere !important;
}

html body .atpv-shell .atpv-dashboard-grid {
  grid-template-columns: minmax(0, 1.15fr) minmax(300px, .85fr) !important;
  gap: 18px !important;
  align-items: start !important;
}

html body .atpv-shell :where(.atpv-card, .atpv-dashboard-section, .atpv-card--timeline) {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

html body .atpv-shell :where(
  .atpv-card, .atpv-dashboard-section, .atpv-card--timeline,
  .atpv-next-action, .atpv-form-section, .atpv-data-review,
  .atpv-upload-card, .atpv-result-card
) > * {
  min-width: 0 !important;
}

/* Formulários: títulos, campos e mensagens na mesma linha de base. */
html body .atpv-shell :where(.atpv-grid-2, .atpv-grid-3, .atpv-address-grid) {
  align-items: start !important;
  align-content: start !important;
}

html body .atpv-shell :where(.atpv-grid-2, .atpv-grid-3, .atpv-address-grid)
> label:not(.atpv-check):not(.atpv-choice):not(.atpv-payment-option):not(.atpv-file-field) {
  display: grid !important;
  grid-template-rows: minmax(24px, auto) minmax(56px, auto) minmax(20px, auto) !important;
  align-content: start !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}

html body .atpv-shell :where(
  input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),
  select, textarea
) {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html body .atpv-shell :where(.atpv-field-error, .atpv-field-status) {
  min-height: 20px !important;
  height: auto !important;
  white-space: normal !important;
  overflow: visible !important;
}

/* Listas e textos longos nunca ultrapassam o card. */
html body .atpv-shell :where(
  .atpv-details dd,
  .atpv-client-document-copy,
  .atpv-client-document-copy strong,
  .atpv-message-list p,
  .atpv-answer-review-list strong,
  .atpv-review-details dd,
  .atpv-result-summary strong,
  .atpv-progress-copy,
  .atpv-progress-title-row strong
) {
  min-width: 0 !important;
  max-width: 100% !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

html body .atpv-shell .atpv-client-document-list article {
  grid-template-columns: auto minmax(0, 1fr) auto auto !important;
  align-items: center !important;
}

/* Aviso de prazo e horário de atendimento. */
html body .atpv-shell .atpv-service-deadline {
  display: grid !important;
  gap: 12px !important;
  width: 100% !important;
  margin-top: 12px !important;
}

html body .atpv-shell .atpv-service-deadline__main {
  margin: 0 !important;
  color: var(--atpv-text) !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  line-height: 1.6 !important;
}

html body .atpv-shell .atpv-service-alert {
  display: grid !important;
  gap: 8px !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border: 1px solid rgba(180, 35, 24, .28) !important;
  border-left: 4px solid #b42318 !important;
  border-radius: 11px !important;
  color: #9f1f17 !important;
  background: #fff4f2 !important;
}

html body .atpv-shell .atpv-service-alert strong {
  display: block !important;
  color: #9f1f17 !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.3 !important;
  text-transform: uppercase !important;
  letter-spacing: .08em !important;
}

html body .atpv-shell .atpv-service-alert p {
  margin: 0 !important;
  color: #9f1f17 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.55 !important;
}

html body .atpv-shell .atpv-notice .atpv-service-deadline {
  margin-top: 0 !important;
}

html body .atpv-shell .atpv-notice .atpv-service-deadline__main {
  color: inherit !important;
}

/* Acompanhamento: status atual visível e futuras etapas preservadas. */
html body .atpv-shell .atpv-progress-title-row {
  min-width: 0 !important;
}

html body .atpv-shell .atpv-progress-state {
  max-width: 100% !important;
}

html body .atpv-shell .atpv-timeline-item--action .atpv-progress-state,
html body .atpv-shell .atpv-timeline-item--error .atpv-progress-state {
  color: #9f1f17 !important;
  border-color: rgba(180, 35, 24, .30) !important;
  background: #fff4f2 !important;
}

/* Tablet */
@media (max-width: 1100px) {
  html body .atpv-shell .atpv-dashboard-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  html body .atpv-shell .atpv-dashboard-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Mobile */
@media (max-width: 820px) {
  html body .atpv-shell,
  html body .atpv-shell.atpv-shell--compact,
  html body .atpv-shell.atpv-shell--wide {
    width: 100% !important;
    max-width: 100% !important;
    padding: 26px 14px 48px !important;
  }

  html body .atpv-shell .atpv-dashboard-head {
    grid-template-columns: minmax(0, 1fr) !important;
    align-items: stretch !important;
    gap: 16px !important;
    margin-top: 22px !important;
  }

  html body .atpv-shell .atpv-dashboard-head .atpv-button {
    width: 100% !important;
  }

  html body .atpv-shell h1 {
    font-size: clamp(30px, 10vw, 42px) !important;
  }

  html body .atpv-shell h2 {
    font-size: clamp(22px, 7vw, 30px) !important;
  }

  html body .atpv-shell .atpv-request-tabs a {
    flex-basis: min(82vw, 290px) !important;
  }

  html body .atpv-shell .atpv-status-hero {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 22px !important;
    padding: 26px 20px !important;
    border-radius: 18px !important;
  }

  html body .atpv-shell .atpv-status-hero h2 {
    font-size: clamp(28px, 9vw, 40px) !important;
  }

  html body .atpv-shell .atpv-status-protocol {
    width: 100% !important;
    min-width: 0 !important;
  }

  html body .atpv-shell :where(.atpv-grid-2, .atpv-grid-3, .atpv-address-grid) {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .atpv-shell .atpv-client-document-list article {
    grid-template-columns: auto minmax(0, 1fr) !important;
    align-items: start !important;
  }

  html body .atpv-shell .atpv-client-document-list article > :where(.atpv-chip, a) {
    grid-column: 2 !important;
    justify-self: start !important;
  }
}

@media (max-width: 620px) {
  html body .atpv-shell,
  html body .atpv-shell.atpv-shell--compact,
  html body .atpv-shell.atpv-shell--wide {
    padding-inline: 10px !important;
  }

  html body .atpv-shell .atpv-dashboard-metrics {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .atpv-shell .atpv-dashboard-metrics article {
    min-height: 92px !important;
  }

  html body .atpv-shell :where(
    .atpv-card, .atpv-form-card, .atpv-payment-main, .atpv-order-summary,
    .atpv-information-card, .atpv-documents-card, .atpv-prevalidation-card,
    .atpv-result-card, .atpv-dashboard-section, .atpv-card--timeline
  ) {
    padding: 20px 14px !important;
    border-radius: 15px !important;
  }

  html body .atpv-shell .atpv-progress-title-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 7px !important;
  }

  html body .atpv-shell .atpv-progress-state {
    justify-self: start !important;
    white-space: normal !important;
  }

  html body .atpv-shell .atpv-timeline-legend {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  html body .atpv-shell .atpv-service-alert {
    padding: 13px 13px !important;
  }
}