/* ========================================
   NUVEMSHOP STATUS PAGE — INSTI STYLEGUIDE
   Tokens: insti-styleguide (nuvem-skills)
   Font: Plus Jakarta Sans
   Brand: #0050c3 (Nimbus Blue)
   ======================================== */

/* ========================================
   BASE — Fundo azul marca Nuvemshop
   ======================================== */
html, body {
  background: #0050c3!important;
  background: linear-gradient(180deg, #3388e8 0%, #1a6dd4 25%, #0050c3 50%, #0050c3 70%, #003fa0 100%)!important;
  background-attachment: fixed!important;
  min-height: 100vh!important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Helvetica Neue", arial, sans-serif!important;
  -webkit-font-smoothing: antialiased!important;
}

.page-header, .masthead, .masthead-wrapper, header {
  background: transparent!important;
}

.page-header {
  text-align: center!important;
  padding: 0!important;
  overflow: visible!important;
}

.page-header .logo-container {
  display: none!important;
}

/* ========================================
   CONTAINER PRINCIPAL — Glass card
   (sem overflow:hidden e sem backdrop-filter,
    para não clipar/aprisionar o dropdown do Subscribe)
   ======================================== */
.layout-content {
  position: relative!important;
  background: rgba(255, 255, 255, 0.1)!important;
  border: 1px solid rgba(255, 255, 255, 0.2)!important;
  max-width: 840px!important;
  margin: 40px auto!important;
  border-radius: 16px!important;
  box-shadow: 0 24px 48px -12px rgba(0, 40, 120, 0.25), inset 0 1px 0 rgba(255,255,255,0.12)!important;
  padding-bottom: 32px!important;
  overflow: visible!important;
}

/* ========================================
   SLOT DO SUBSCRIBE — Posicionamento do
   painel dropdown que cai logo abaixo do botão
   ======================================== */
#native-subscribe-slot {
  position: relative!important;
  display: inline-flex!important;
  align-items: center!important;
  flex-shrink: 0!important;
  z-index: 10!important;
}

/* ========================================
   BOTÃO SUBSCRIBE NATIVO — movido via JS
   para dentro do header custom. Estilizado
   como pill outline.
   ======================================== */
.moved-subscribe-btn,
a.moved-subscribe-btn,
.moved-subscribe-btn.show-updates-dropdown {
  position: static!important;
  left: auto!important;
  top: auto!important;
  right: auto!important;
  bottom: auto!important;
  transform: none!important;
  opacity: 1!important;
  visibility: visible!important;
  pointer-events: auto!important;
  display: inline-flex!important;
  align-items: center!important;
  justify-content: center!important;
  gap: 6px!important;
  padding: 10px 22px!important;
  border: 1px solid rgba(255,255,255,0.4)!important;
  border-radius: 100px!important;
  color: #fff!important;
  background: transparent!important;
  font-size: 14px!important;
  font-weight: 600!important;
  text-decoration: none!important;
  font-family: 'Plus Jakarta Sans', sans-serif!important;
  cursor: pointer!important;
  transition: all .15s ease!important;
  flex-shrink: 0!important;
  box-shadow: none!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
}

.moved-subscribe-btn:hover {
  background: #fff!important;
  color: #0050c3!important;
  border-color: #fff!important;
}

.moved-subscribe-btn .subscribe-text-full,
.moved-subscribe-btn .subscribe-text-short {
  color: inherit!important;
  display: inline!important;
  font-weight: 600!important;
}

.moved-subscribe-btn .subscribe-text-short {
  display: none!important;
}

.moved-subscribe-btn i,
.moved-subscribe-btn svg {
  color: inherit!important;
  fill: currentColor!important;
}

/* Fallback: botão nativo que NÃO foi movido (duplicata) — escondido */
.show-updates-dropdown:not(.moved-subscribe-btn),
#show-updates-dropdown:not(.moved-subscribe-btn),
[data-js-hook="show-updates-dropdown"]:not(.moved-subscribe-btn) {
  position: absolute!important;
  left: -9999px!important;
  top: -9999px!important;
  opacity: 0!important;
  pointer-events: none!important;
}

.subscribe-text-full,
.subscribe-text-short {
  color: #fff!important;
}

/* ========================================
   PAINEL DROPDOWN — posicionado
   relativamente ao slot (abre abaixo do botão)
   ======================================== */
.moved-subscribe-panel,
#native-subscribe-slot .updates-dropdown,
#native-subscribe-slot .subscribe-dropdown-content,
#native-subscribe-slot .subscribe-dropdown {
  position: absolute!important;
  top: calc(100% + 10px)!important;
  right: 0!important;
  left: auto!important;
  min-width: 340px!important;
  max-width: min(420px, calc(100vw - 32px))!important;
  z-index: 100000!important;
}

/* ========================================
   STATUS BANNER — Verde institucional
   ======================================== */
.page-status {
  margin: 0 24px 24px!important;
  border-radius: 16px!important;
  padding: 20px 28px!important;
  font-weight: 900!important;
  font-size: 18px!important;
  border: none!important;
  letter-spacing: -0.2px!important;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3)!important;
  -webkit-text-stroke: 0.3px rgba(255,255,255,0.5)!important;
}

.page-status.status-green {
  background: linear-gradient(135deg, rgba(12, 167, 107, 0.9) 0%, rgba(12, 167, 107, 0.7) 100%)!important;
  box-shadow: 0 8px 24px rgba(12,167,107,0.3)!important;
  color: #fff!important;
}

.page-status.status-yellow {
  background: linear-gradient(135deg, rgba(200, 123, 0, 0.9) 0%, rgba(200, 123, 0, 0.7) 100%)!important;
  color: #fff!important;
}

.page-status.status-orange {
  background: linear-gradient(135deg, rgba(255, 159, 67, 0.9) 0%, rgba(255, 159, 67, 0.7) 100%)!important;
  color: #fff!important;
}

.page-status.status-red {
  background: linear-gradient(135deg, rgba(200, 0, 3, 0.9) 0%, rgba(200, 0, 3, 0.7) 100%)!important;
  color: #fff!important;
}

.page-status.status-blue {
  background: linear-gradient(135deg, rgba(0, 80, 195, 0.9) 0%, rgba(0, 80, 195, 0.7) 100%)!important;
  color: #fff!important;
}

/* ========================================
   COMPONENTES
   ======================================== */
.components-section {
  padding: 0 24px!important;
}

.component-container {
  background: transparent!important;
  border: none!important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08)!important;
  border-radius: 0!important;
  margin-bottom: 0!important;
  padding: 15px 20px!important;
  transition: background 0.15s ease!important;
}

.component-container:last-child {
  border-bottom: none!important;
}

.component-container:hover {
  background: rgba(255, 255, 255, 0.06)!important;
}

.component-inner-container {
  display: flex!important;
  justify-content: space-between!important;
  align-items: center!important;
  width: 100%!important;
  gap: 16px!important;
}

.component-container .name {
  color: #fff!important;
  font-weight: 700!important;
  font-size: 15px!important;
  flex: 1!important;
  min-width: 0!important;
}

.component-status,
span.component-status {
  font-weight: 700!important;
  font-size: 14px!important;
  font-style: normal!important;
  display: inline-flex!important;
  align-items: center!important;
  gap: 8px!important;
  flex-shrink: 0!important;
  margin-left: auto!important;
  text-align: right!important;
}

.component-status::before,
span.component-status::before {
  content: ""!important;
  display: inline-block!important;
  width: 10px!important;
  height: 10px!important;
  border-radius: 50%!important;
  flex-shrink: 0!important;
}

.component-status.status-green,
span.component-status.status-green {
  color: #22c55e!important;
}
.component-status.status-green::before,
span.component-status.status-green::before {
  background: #22c55e!important;
  box-shadow: 0 0 10px #22c55e, 0 0 4px #22c55e!important;
}

.component-status.status-yellow,
span.component-status.status-yellow {
  color: #eab308!important;
}
.component-status.status-yellow::before,
span.component-status.status-yellow::before {
  background: #eab308!important;
  box-shadow: 0 0 10px #eab308, 0 0 4px #eab308!important;
}

.component-status.status-orange,
span.component-status.status-orange {
  color: #f97316!important;
}
.component-status.status-orange::before,
span.component-status.status-orange::before {
  background: #f97316!important;
  box-shadow: 0 0 10px #f97316, 0 0 4px #f97316!important;
}

.component-status.status-red,
span.component-status.status-red {
  color: #ef4444!important;
}
.component-status.status-red::before,
span.component-status.status-red::before {
  background: #ef4444!important;
  box-shadow: 0 0 10px #ef4444, 0 0 4px #ef4444!important;
}

.component-status.status-blue,
span.component-status.status-blue {
  color: #3b82f6!important;
}
.component-status.status-blue::before,
span.component-status.status-blue::before {
  background: #3b82f6!important;
  box-shadow: 0 0 10px #3b82f6, 0 0 4px #3b82f6!important;
}

/* Component group (expand/collapse) */
.component-inner-group {
  border-left: 2px solid rgba(188, 223, 253, 0.15)!important;
  margin-left: 8px!important;
  padding-left: 16px!important;
}

.component-inner-group .component-container .name {
  font-size: 13px!important;
  color: rgba(255,255,255,0.8)!important;
}

/* ========================================
   INCIDENTES
   ======================================== */
.unresolved-incidents {
  display: block!important;
  padding: 0 24px!important;
}

.unresolved-incident {
  background: rgba(255, 255, 255, 0.05)!important;
  border: 1px solid rgba(247, 199, 122, 0.3)!important;
  border-radius: 16px!important;
  margin-bottom: 16px!important;
  overflow: hidden!important;
}

.unresolved-incident .incident-title {
  background: linear-gradient(135deg, rgba(200, 123, 0, 0.85) 0%, rgba(200, 123, 0, 0.65) 100%)!important;
  color: #fff!important;
  padding: 16px 20px!important;
  padding-right: 110px!important;
  font-weight: 600!important;
  font-size: 14px!important;
  position: relative!important;
}

.unresolved-incident .incident-title a {
  color: #fff!important;
  text-decoration: none!important;
}

.unresolved-incident .updates {
  padding: 16px 20px!important;
  background: rgba(255, 255, 255, 0.05)!important;
}

.unresolved-incident .update {
  color: rgba(255,255,255,0.85)!important;
  font-size: 14px!important;
  line-height: 1.5!important;
}

.unresolved-incident .update-title {
  color: #f7c77a!important;
  font-weight: 600!important;
  font-size: 12px!important;
  text-transform: uppercase!important;
  letter-spacing: 0.5px!important;
}

.unresolved-incident .update-timestamp {
  color: rgba(255,255,255,0.45)!important;
  font-size: 12px!important;
}

.unresolved-incident a[href*="subscribe"],
.unresolved-incident .incident-subscribe {
  position: absolute!important;
  top: 50%!important;
  right: 16px!important;
  transform: translateY(-50%)!important;
  color: #fff!important;
  background: rgba(0,0,0,0.25)!important;
  border: 1px solid rgba(255,255,255,0.3)!important;
  padding: 4px 12px!important;
  border-radius: 6px!important;
  font-size: 12px!important;
  font-weight: 600!important;
  text-decoration: none!important;
  white-space: nowrap!important;
  pointer-events: auto!important;
}

.unresolved-incident a[href*="subscribe"]:hover,
.unresolved-incident .incident-subscribe:hover {
  background: rgba(0,0,0,0.4)!important;
  border-color: rgba(255,255,255,0.5)!important;
}

/* ========================================
   GLOBAL — Texto branco sobre azul
   EXCETO dentro de modais/dropdowns/forms
   do Subscribe
   ======================================== */
body {
  color: #fff!important;
}

body *:not(.component-status):not(.page-status):not(.updates-dropdown):not(.updates-dropdown *):not(.moved-subscribe-panel):not(.moved-subscribe-panel *):not(.update-subscribers-container):not(.update-subscribers-container *):not(.subscribe-form-container):not(.subscribe-form-container *):not(input):not(textarea):not(select):not(option):not(label):not(.modal):not(.modal *):not(.reveal-modal):not(.reveal-modal *):not([role="dialog"]):not([role="dialog"] *) {
  color: #fff!important;
}

body hr {
  border-color: rgba(188, 223, 253, 0.2)!important;
}

/* ========================================
   LINKS
   ======================================== */
a {
  color: #BCDFFD!important;
  transition: color 0.15s ease!important;
}

a:hover {
  color: #fff!important;
}

/* ========================================
   HISTÓRICO — Past Incidents
   ======================================== */
.incidents-list {
  background: rgba(255, 255, 255, 0.1)!important;
  border: 1px solid rgba(255, 255, 255, 0.2)!important;
  border-radius: 16px!important;
  max-width: 840px!important;
  margin: 24px auto 0!important;
  padding: 0 24px 8px!important;
  box-shadow: 0 24px 48px -12px rgba(0, 40, 120, 0.25), inset 0 1px 0 rgba(255,255,255,0.12)!important;
}

.incidents-list > h2:first-child,
.incidents-list h2,
.incidents-list .month,
.incidents-list .incident-header,
.past-incidents-header {
  color: #fff!important;
  font-weight: 800!important;
  font-size: 20px!important;
  padding: 28px 48px 22px!important;
  margin: 0!important;
  letter-spacing: -0.3px!important;
  border-bottom: 1px solid rgba(188, 223, 253, 0.1)!important;
}

.incidents-list .incident-container {
  border: none!important;
  border-bottom: none!important;
  margin: 0!important;
  padding: 0 48px 16px!important;
}

body .incidents-list .date:not(.x),
body .incidents-list h4:not(.x),
body .incidents-list .incident-date:not(.x),
body .incidents-list h4 small:not(.x) {
  color: #fff!important;
  font-weight: 700!important;
  font-size: 13px!important;
  text-transform: uppercase!important;
  letter-spacing: 0.8px!important;
  padding: 24px 0 8px!important;
  margin: 0!important;
  border-bottom: none!important;
}

body .incidents-list p:not(.x),
body .incidents-list .no-incidents:not(.x),
body .incidents-list .empty:not(.x),
body .incidents-list .impact-none:not(.x) {
  color: #fff!important;
  font-size: 14px!important;
  font-style: normal!important;
  font-weight: 600!important;
  padding: 4px 0 0!important;
  margin: 0!important;
}

.incidents-list .incident-title {
  background: rgba(0, 20, 60, 0.4)!important;
  border: 1px solid rgba(255, 255, 255, 0.12)!important;
  border-radius: 10px!important;
  padding: 16px 20px!important;
  margin: 10px 0 4px!important;
  font-size: 15px!important;
  font-weight: 700!important;
  line-height: 1.4!important;
}

.incidents-list .incident-title img,
.incidents-list .incident-title svg,
.incidents-list .incident-title .icon,
.incidents-list .incident-title i,
.component-container img,
.component-container svg {
  filter: brightness(0) invert(1)!important;
  opacity: 0.9!important;
}

.incidents-list .incident-title a {
  color: #fff!important;
  text-decoration: none!important;
  font-weight: 700!important;
}

.incidents-list .incident-title a:hover {
  color: #93c5fd!important;
}

body .incidents-list .update:not(.x) {
  position: relative!important;
  background: transparent!important;
  border: none!important;
  border-left: 2px solid rgba(255, 255, 255, 0.2)!important;
  border-radius: 0!important;
  margin: 0!important;
  padding: 12px 16px 12px 24px!important;
  margin-left: 10px!important;
  font-size: 14px!important;
  line-height: 1.6!important;
  color: #fff!important;
  font-weight: 500!important;
}

.incidents-list .update::before {
  content: ""!important;
  position: absolute!important;
  left: -5px!important;
  top: 17px!important;
  width: 8px!important;
  height: 8px!important;
  border-radius: 50%!important;
  background: rgba(255, 255, 255, 0.4)!important;
  border: none!important;
}

.incidents-list .update:last-child {
  border-left-color: transparent!important;
}

.incidents-list .update strong,
.incidents-list .update-title,
.incidents-list .update b,
.incidents-list .var {
  display: inline-block!important;
  font-size: 11px!important;
  font-weight: 700!important;
  text-transform: uppercase!important;
  letter-spacing: 0.5px!important;
  padding: 4px 12px!important;
  border-radius: 6px!important;
  margin-right: 8px!important;
  margin-bottom: 2px!important;
  vertical-align: middle!important;
  background: #2563eb!important;
  color: #fff!important;
}

body .incidents-list .update-timestamp:not(.x),
body .incidents-list .update small:not(.x),
body .incidents-list .update time:not(.x) {
  display: block!important;
  color: rgba(255,255,255,0.7)!important;
  font-size: 12px!important;
  margin-top: 5px!important;
  font-style: normal!important;
  font-weight: 500!important;
  text-transform: none!important;
  letter-spacing: 0!important;
  padding: 0!important;
}

.incidents-list hr,
.incidents-list .separator {
  border: none!important;
  border-top: 1px solid rgba(188, 223, 253, 0.06)!important;
  margin: 4px 0!important;
}

.incidents-list a[href*="history"] {
  display: inline-block!important;
  margin: 16px 28px 12px!important;
  padding: 8px 18px!important;
  border: 1px solid rgba(255,255,255,0.15)!important;
  border-radius: 100px!important;
  color: rgba(255,255,255,0.5)!important;
  font-size: 12px!important;
  font-weight: 600!important;
  text-decoration: none!important;
  transition: all 0.15s ease!important;
}

.incidents-list a[href*="history"]:hover {
  background: rgba(255,255,255,0.08)!important;
  color: #fff!important;
  border-color: rgba(255,255,255,0.3)!important;
}

/* ========================================
   BOTÃO INCIDENT HISTORY (home)
   ======================================== */
#history-btn-wrapper {
  text-align: center!important;
  padding: 32px 24px!important;
  background: transparent!important;
  border: none!important;
  box-shadow: none!important;
  -webkit-backdrop-filter: none!important;
  backdrop-filter: none!important;
  max-width: 840px!important;
  margin: 8px auto 0!important;
}

.history-btn {
  display: inline-block!important;
  padding: 16px 40px!important;
  background: rgba(255,255,255,0.1)!important;
  border: 1.5px solid rgba(255,255,255,0.4)!important;
  border-radius: 100px!important;
  color: #fff!important;
  font-weight: 900!important;
  font-size: 16px!important;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif!important;
  text-decoration: none!important;
  transition: all 0.15s ease!important;
  letter-spacing: 0.3px!important;
  -webkit-text-stroke: 0.5px #fff!important;
}

.history-btn:hover {
  background: rgba(255,255,255,0.18)!important;
  border-color: rgba(255,255,255,0.6)!important;
  color: #fff!important;
}

/* ========================================
   FOOTER
   ======================================== */
.page-footer {
  display: none!important;
}

/* ========================================
   LEGENDA DE STATUS
   ======================================== */
.legend-item,
.legend-item * {
  color: rgba(255,255,255,0.5)!important;
  font-size: 12px!important;
}

/* ========================================
   SUBSCRIBE — Dropdown e Modais nativos
   Cascade: zera background de TODOS os filhos,
   re-aplica no wrapper, inputs e botões.
   Resolve a "faixa branca" em .modal-footer
   / .modal-body com background próprio.
   ======================================== */

.updates-dropdown,
.updates-dropdown *,
.moved-subscribe-panel,
.moved-subscribe-panel *,
.update-subscribers-container,
.update-subscribers-container *,
.subscribe-form-container,
.subscribe-form-container *,
.reveal-modal,
.reveal-modal *,
.modal,
.modal *,
#modal,
#modal *,
[role="dialog"],
[role="dialog"] * {
  background: transparent!important;
  background-color: transparent!important;
  background-image: none!important;
}

.updates-dropdown,
.moved-subscribe-panel,
.update-subscribers-container,
.subscribe-form-container,
.reveal-modal,
.modal,
#modal,
[role="dialog"] {
  background: #0a2a6a!important;
  background-color: #0a2a6a!important;
  color: #fff!important;
  border: 1px solid rgba(255,255,255,0.2)!important;
  border-radius: 16px!important;
  box-shadow: 0 32px 64px -16px rgba(0, 20, 60, 0.6)!important;
  padding: 20px!important;
}

.updates-dropdown *,
.moved-subscribe-panel *,
.update-subscribers-container *,
.subscribe-form-container *,
.reveal-modal *,
.modal *,
[role="dialog"] * {
  color: #fff!important;
}

.updates-dropdown input[type="text"],
.updates-dropdown input[type="email"],
.updates-dropdown input[type="tel"],
.updates-dropdown input[type="search"],
.updates-dropdown input[type="number"],
.updates-dropdown textarea,
.updates-dropdown select,
.moved-subscribe-panel input,
.moved-subscribe-panel textarea,
.moved-subscribe-panel select,
.update-subscribers-container input,
.update-subscribers-container textarea,
.update-subscribers-container select,
.reveal-modal input,
.reveal-modal textarea,
.reveal-modal select,
.modal input,
.modal textarea,
.modal select,
[role="dialog"] input,
[role="dialog"] textarea,
[role="dialog"] select {
  background: #fff!important;
  background-color: #fff!important;
  color: #0a1e4a!important;
  border: 1px solid rgba(255,255,255,0.4)!important;
  border-radius: 8px!important;
  padding: 10px 12px!important;
  font-family: 'Plus Jakarta Sans', sans-serif!important;
  font-size: 14px!important;
  width: 100%!important;
  box-sizing: border-box!important;
}

.updates-dropdown input::placeholder,
.moved-subscribe-panel input::placeholder,
.update-subscribers-container input::placeholder,
.reveal-modal input::placeholder,
.modal input::placeholder,
[role="dialog"] input::placeholder {
  color: rgba(10, 30, 74, 0.5)!important;
}

.updates-dropdown label,
.moved-subscribe-panel label,
.update-subscribers-container label,
.reveal-modal label,
.modal label,
[role="dialog"] label {
  color: #fff!important;
  font-weight: 600!important;
  font-size: 13px!important;
  display: block!important;
  margin-bottom: 6px!important;
}

.updates-dropdown button,
.updates-dropdown .btn,
.updates-dropdown button[type="submit"],
.moved-subscribe-panel button,
.moved-subscribe-panel .btn,
.update-subscribers-container button,
.update-subscribers-container .btn,
.reveal-modal button,
.reveal-modal .btn,
.modal button,
.modal .btn,
[role="dialog"] button {
  background: #fff!important;
  background-color: #fff!important;
  color: #0050c3!important;
  border: none!important;
  border-radius: 100px!important;
  padding: 10px 22px!important;
  font-weight: 700!important;
  font-size: 14px!important;
  cursor: pointer!important;
  font-family: 'Plus Jakarta Sans', sans-serif!important;
  text-transform: none!important;
  letter-spacing: 0!important;
}

.updates-dropdown button *,
.updates-dropdown .btn *,
.moved-subscribe-panel button *,
.reveal-modal button *,
.reveal-modal .btn *,
.modal button *,
.modal .btn *,
[role="dialog"] button * {
  color: #0050c3!important;
}

.updates-dropdown button:hover,
.updates-dropdown .btn:hover,
.moved-subscribe-panel button:hover,
.reveal-modal button:hover,
.reveal-modal .btn:hover,
.modal button:hover,
.modal .btn:hover,
[role="dialog"] button:hover {
  background: #e6f0ff!important;
  background-color: #e6f0ff!important;
}

.updates-dropdown .nav-tabs,
.updates-dropdown ul.nav,
.moved-subscribe-panel .nav-tabs,
.moved-subscribe-panel ul.nav,
.reveal-modal .nav-tabs,
.modal .nav-tabs {
  border-bottom: 1px solid rgba(255,255,255,0.2)!important;
  margin-bottom: 14px!important;
}

.updates-dropdown .nav-tabs li a,
.updates-dropdown ul.nav li a,
.moved-subscribe-panel .nav-tabs li a,
.moved-subscribe-panel ul.nav li a,
.reveal-modal .nav-tabs li a,
.modal .nav-tabs li a {
  color: rgba(255,255,255,0.7)!important;
  padding: 8px 14px!important;
  border: none!important;
  border-radius: 0!important;
  font-weight: 600!important;
  font-size: 13px!important;
}

.updates-dropdown .nav-tabs li.active a,
.updates-dropdown ul.nav li.active a,
.moved-subscribe-panel .nav-tabs li.active a,
.reveal-modal .nav-tabs li.active a,
.modal .nav-tabs li.active a {
  color: #fff!important;
  border-bottom: 2px solid #fff!important;
}

.updates-dropdown small,
.updates-dropdown .fine-print,
.updates-dropdown .legal-text,
.moved-subscribe-panel small,
.moved-subscribe-panel .fine-print,
.reveal-modal small,
.reveal-modal .fine-print,
.reveal-modal .legal-text,
.modal small,
.modal .fine-print,
.modal .legal-text,
[role="dialog"] small,
[role="dialog"] .fine-print {
  color: rgba(255, 255, 255, 0.7)!important;
  font-size: 11px!important;
  line-height: 1.5!important;
}

.updates-dropdown a,
.moved-subscribe-panel a,
.reveal-modal a,
.modal a,
[role="dialog"] a {
  color: #BCDFFD!important;
  text-decoration: underline!important;
}

.updates-dropdown a:hover,
.moved-subscribe-panel a:hover,
.reveal-modal a:hover,
.modal a:hover,
[role="dialog"] a:hover {
  color: #fff!important;
}

.reveal-modal-bg,
.modal-backdrop,
[class*="modal-backdrop"] {
  background: rgba(0, 20, 60, 0.6)!important;
  background-color: rgba(0, 20, 60, 0.6)!important;
  z-index: 99999!important;
}

.updates-dropdown .close-btn,
.moved-subscribe-panel .close-btn,
.reveal-modal .close-reveal-modal,
.modal .close,
[role="dialog"] .close,
[role="dialog"] [aria-label="Close"] {
  color: #fff!important;
  opacity: 0.8!important;
  font-size: 20px!important;
  background: transparent!important;
  border: none!important;
}

.updates-dropdown .close-btn:hover,
.moved-subscribe-panel .close-btn:hover,
.reveal-modal .close-reveal-modal:hover,
.modal .close:hover,
[role="dialog"] .close:hover {
  opacity: 1!important;
  background: transparent!important;
}

/* ========================================
   DESKTOP (1200px+)
   ======================================== */
@media (min-width: 1200px) {
  .layout-content {
    max-width: 900px!important;
    margin: 60px auto!important;
  }

  .incidents-list {
    max-width: 900px!important;
  }

  .page-status {
    padding: 24px 32px!important;
    font-size: 18px!important;
  }

  .component-container {
    padding: 18px 16px!important;
  }

  .component-container .name {
    font-size: 15px!important;
  }
}

/* ========================================
   4K / ULTRAWIDE (1600px+)
   ======================================== */
@media (min-width: 1600px) {
  .layout-content {
    max-width: 1000px!important;
    margin: 80px auto!important;
  }

  .incidents-list {
    max-width: 1000px!important;
  }

  .page-status {
    margin: 0 32px 32px!important;
    padding: 28px 36px!important;
    font-size: 20px!important;
  }

  .components-section {
    padding: 0 32px!important;
  }

  .component-container {
    padding: 20px 16px!important;
  }

  .component-container .name {
    font-size: 16px!important;
  }

  .unresolved-incidents {
    padding: 0 32px!important;
  }

  .unresolved-incident .incident-title {
    padding: 20px 24px!important;
    padding-right: 120px!important;
    font-size: 16px!important;
  }

  .unresolved-incident .updates {
    padding: 20px 24px!important;
  }

  .unresolved-incident .update {
    font-size: 15px!important;
  }
}

/* ========================================
   LAPTOP PEQUENO / TABLET LANDSCAPE (1024–1199px)
   ======================================== */
@media (min-width: 1024px) and (max-width: 1199px) {
  .layout-content {
    max-width: 780px!important;
    margin: 32px auto!important;
  }
}

/* ========================================
   TABLET PORTRAIT (768–1023px)
   ======================================== */
@media (min-width: 768px) and (max-width: 1023px) {
  .layout-content {
    max-width: 720px!important;
    margin: 24px auto!important;
  }

  .page-status {
    margin: 0 20px 20px!important;
    padding: 18px 24px!important;
  }

  .components-section {
    padding: 0 20px!important;
  }

  .component-container {
    padding: 14px 12px!important;
  }

  .unresolved-incidents {
    padding: 0 20px!important;
  }

  .unresolved-incident .incident-title {
    padding: 14px 18px!important;
    padding-right: 100px!important;
    font-size: 14px!important;
  }

  .unresolved-incident .updates {
    padding: 14px 18px!important;
  }
}

/* ========================================
   PHABLET (600–767px)
   ======================================== */
@media (min-width: 600px) and (max-width: 767px) {
  .layout-content {
    margin: 16px!important;
  }

  .incidents-list {
    margin: 16px!important;
    border-radius: 12px!important;
  }

  .incidents-list .incident-container { padding: 0 20px 12px!important; }
  .incidents-list > h2:first-child { padding: 20px 20px 16px!important; }

  .page-status {
    margin: 0 18px 18px!important;
    padding: 16px 20px!important;
    font-size: 15px!important;
  }

  .components-section {
    padding: 0 18px!important;
  }

  .component-container {
    padding: 12px 12px!important;
  }

  .component-container .name {
    font-size: 13px!important;
  }

  .component-container:hover {
    transform: none!important;
  }

  .unresolved-incidents {
    padding: 0 18px!important;
  }

  .unresolved-incident .incident-title {
    padding: 12px 16px!important;
    padding-right: 95px!important;
    font-size: 13px!important;
  }

  .unresolved-incident .updates {
    padding: 12px 16px!important;
  }

  .unresolved-incident .update {
    font-size: 13px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 4px 10px!important;
    font-size: 11px!important;
    right: 14px!important;
  }
}

/* ========================================
   CELULAR GRANDE (480–599px)
   ======================================== */
@media (min-width: 480px) and (max-width: 599px) {
  .layout-content {
    margin: 12px!important;
    padding-bottom: 24px!important;
  }

  .incidents-list {
    margin: 12px!important;
    border-radius: 12px!important;
  }

  .incidents-list .incident-container { padding: 0 16px 10px!important; }
  .incidents-list > h2:first-child { padding: 18px 16px 14px!important; font-size: 16px!important; }

  .page-status {
    margin: 0 14px 14px!important;
    padding: 14px 16px!important;
    border-radius: 12px!important;
    font-size: 14px!important;
  }

  .components-section {
    padding: 0 14px!important;
  }

  .component-container {
    padding: 12px 10px!important;
  }

  .component-container .name {
    font-size: 13px!important;
  }

  .component-container:hover {
    transform: none!important;
  }

  .unresolved-incidents {
    padding: 0 14px!important;
  }

  .unresolved-incident {
    border-radius: 12px!important;
  }

  .unresolved-incident .incident-title {
    padding: 11px 14px!important;
    padding-right: 85px!important;
    font-size: 13px!important;
  }

  .unresolved-incident .updates {
    padding: 11px 14px!important;
  }

  .unresolved-incident .update {
    font-size: 12px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 3px 8px!important;
    font-size: 10px!important;
    right: 12px!important;
  }
}

/* ========================================
   CELULAR MÉDIO (400–479px)
   ======================================== */
@media (min-width: 400px) and (max-width: 479px) {
  .layout-content {
    margin: 10px!important;
    border-radius: 12px!important;
    padding-bottom: 20px!important;
  }

  .incidents-list {
    margin: 10px!important;
    border-radius: 10px!important;
  }

  .incidents-list .incident-container { padding: 0 14px 8px!important; }
  .incidents-list > h2:first-child { padding: 16px 14px 12px!important; font-size: 15px!important; }

  .page-status {
    margin: 0 12px 12px!important;
    padding: 12px 14px!important;
    border-radius: 10px!important;
    font-size: 13px!important;
  }

  .components-section {
    padding: 0 12px!important;
  }

  .component-container {
    padding: 10px 8px!important;
  }

  .component-container .name {
    font-size: 12px!important;
  }

  .unresolved-incidents {
    padding: 0 12px!important;
  }

  .unresolved-incident {
    border-radius: 10px!important;
  }

  .unresolved-incident .incident-title {
    padding: 10px 12px!important;
    padding-right: 75px!important;
    font-size: 12px!important;
  }

  .unresolved-incident .updates {
    padding: 10px 12px!important;
  }

  .unresolved-incident .update {
    font-size: 11px!important;
    line-height: 1.5!important;
  }

  .unresolved-incident .update-timestamp {
    font-size: 10px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 3px 7px!important;
    font-size: 9px!important;
    right: 10px!important;
  }
}

/* ========================================
   CELULAR PEQUENO (360–399px)
   ======================================== */
@media (min-width: 360px) and (max-width: 399px) {
  .layout-content {
    margin: 8px!important;
    border-radius: 10px!important;
    padding-bottom: 16px!important;
  }

  .incidents-list {
    margin: 8px!important;
    border-radius: 8px!important;
  }

  .incidents-list .incident-container { padding: 0 12px 6px!important; }
  .incidents-list > h2:first-child { padding: 14px 12px 10px!important; font-size: 14px!important; }

  .page-status {
    margin: 0 10px 10px!important;
    padding: 10px 12px!important;
    border-radius: 8px!important;
    font-size: 12px!important;
  }

  .components-section {
    padding: 0 10px!important;
  }

  .component-container {
    padding: 10px 8px!important;
  }

  .component-container .name {
    font-size: 11px!important;
  }

  .unresolved-incidents {
    padding: 0 10px!important;
  }

  .unresolved-incident {
    border-radius: 8px!important;
  }

  .unresolved-incident .incident-title {
    padding: 9px 10px!important;
    padding-right: 70px!important;
    font-size: 11px!important;
  }

  .unresolved-incident .updates {
    padding: 9px 10px!important;
  }

  .unresolved-incident .update {
    font-size: 10px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 3px 6px!important;
    font-size: 8px!important;
    right: 8px!important;
  }
}

/* ========================================
   CELULAR MUITO PEQUENO (320–359px)
   ======================================== */
@media (min-width: 320px) and (max-width: 359px) {
  .layout-content {
    margin: 6px!important;
    border-radius: 8px!important;
    padding-bottom: 14px!important;
  }

  .incidents-list {
    margin: 6px!important;
    border-radius: 6px!important;
  }

  .incidents-list .incident-container { padding: 0 10px 4px!important; }
  .incidents-list > h2:first-child { padding: 12px 10px 8px!important; font-size: 13px!important; }

  .page-status {
    margin: 0 8px 8px!important;
    padding: 8px 10px!important;
    border-radius: 6px!important;
    font-size: 11px!important;
  }

  .components-section {
    padding: 0 8px!important;
  }

  .component-container {
    padding: 8px 6px!important;
  }

  .component-container .name {
    font-size: 10px!important;
  }

  .unresolved-incidents {
    padding: 0 8px!important;
  }

  .unresolved-incident .incident-title {
    padding: 8px!important;
    padding-right: 60px!important;
    font-size: 10px!important;
  }

  .unresolved-incident .updates {
    padding: 8px!important;
  }

  .unresolved-incident .update {
    font-size: 9px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 2px 5px!important;
    font-size: 7px!important;
    right: 6px!important;
  }
}

/* ========================================
   CELULAR MINÚSCULO (< 320px)
   ======================================== */
@media (max-width: 319px) {
  .layout-content {
    margin: 4px!important;
    border-radius: 6px!important;
    padding-bottom: 12px!important;
  }

  .incidents-list {
    margin: 4px!important;
    border-radius: 4px!important;
  }

  .incidents-list .incident-container { padding: 0 8px 4px!important; }
  .incidents-list > h2:first-child { padding: 10px 8px 6px!important; font-size: 12px!important; }

  .page-status {
    margin: 0 6px 6px!important;
    padding: 6px 8px!important;
    border-radius: 4px!important;
    font-size: 10px!important;
  }

  .components-section {
    padding: 0 6px!important;
  }

  .component-container {
    padding: 6px 4px!important;
  }

  .component-container .name {
    font-size: 9px!important;
  }

  .unresolved-incidents {
    padding: 0 6px!important;
  }

  .unresolved-incident .incident-title {
    padding: 6px!important;
    padding-right: 50px!important;
    font-size: 9px!important;
  }

  .unresolved-incident .updates {
    padding: 6px!important;
  }

  .unresolved-incident .update {
    font-size: 8px!important;
  }

  .unresolved-incident a[href*="subscribe"],
  .unresolved-incident .incident-subscribe {
    padding: 2px 4px!important;
    font-size: 6px!important;
    right: 4px!important;
  }
}