/* illu-status-fixes-v4 — marcador usado pelo revert. Nao remover. */

/* ═══════════════════════════════════════════════════════════════════
   1. Botao "Ver historico de incidentes" (card CTA) -> BRANCO
   ═══════════════════════════════════════════════════════════════════ */
.illu-incident-cta,
.illu-btn-history,
[data-illu-history] {
  background-color:#FFFFFF !important;
  background-image:none !important;
  color:#0B0C10 !important;
  border:0 !important;
  box-shadow:0 1px 2px rgba(0,0,0,.06) !important;
  --variant-containedBg:#FFFFFF !important;
  --variant-containedColor:#0B0C10 !important;
  --variant-textColor:#0B0C10 !important;
  --variant-outlinedColor:#0B0C10 !important;
  --variant-outlinedBorder:rgba(11,12,16,.2) !important;
}
.illu-incident-cta:hover,
.illu-btn-history:hover,
[data-illu-history]:hover {
  background-color:#F4F6F8 !important;
  color:#0B0C10 !important;
  --variant-containedBg:#F4F6F8 !important;
  filter:none !important;
}
.illu-incident-cta *,
.illu-btn-history *,
[data-illu-history] * { color:inherit !important; fill:currentColor !important; }

.illu-btn-history [data-illu-history-skeleton],
[data-illu-history] [data-illu-history-skeleton] {
  display:none;gap:4px;align-items:center;margin-right:8px;vertical-align:middle;
}
.illu-btn-history[data-illu-history-skel="1"] [data-illu-history-skeleton],
[data-illu-history][data-illu-history-skel="1"] [data-illu-history-skeleton] {
  display:inline-flex !important;
}
.illu-skel-bar {
  display:inline-block;width:6px;height:14px;border-radius:2px;
  background:rgba(11,12,16,.18);
  animation:illu-skel-pulse 1.15s ease-in-out infinite;
}
.illu-skel-bar:nth-child(2){animation-delay:.12s}
.illu-skel-bar:nth-child(3){animation-delay:.24s}
@keyframes illu-skel-pulse{0%,100%{opacity:.35}50%{opacity:.95}}
@media (prefers-reduced-motion:reduce){.illu-skel-bar{animation:none;opacity:.6}}

/* ═══════════════════════════════════════════════════════════════════
   2. Hero2 CTA principal -> BRANCO
   ═══════════════════════════════════════════════════════════════════ */
.illu-hero2-cta .illu-hero2-btn-primary {
  background-color:#FFFFFF !important; color:#0B0C10 !important;
  --variant-containedBg:#FFFFFF !important; --variant-containedColor:#0B0C10 !important;
}
.illu-hero2-cta .illu-hero2-btn-primary:hover {
  background-color:#F4F6F8 !important; color:#0B0C10 !important; filter:none !important;
}
.illu-hero2-cta .illu-hero2-btn-ghost { border-color:rgba(255,255,255,.22) !important; }
[data-color-scheme=light] .illu-hero2-cta .illu-hero2-btn-ghost {
  border-color:var(--palette-divider) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   3. /contact — SELECT "Selecionar area"
      Fundo transparente + CHEVRON preservado (SVG inline).
      Vence illu-ui-pages.css:2427 sem matar a seta.
   ═══════════════════════════════════════════════════════════════════ */
#contact_area,
.illu-contact-select,
#contact_slot_time,
#contact_slot_date {
  background-color: transparent !important;
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%23C4C9D0' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  background-size: 12px 8px !important;
  padding-right: 40px !important;
  color-scheme: dark;
}
#contact_area:invalid,
#contact_area:-moz-ui-invalid,
#contact_area:-moz-submit-invalid,
.illu-contact-select:invalid,
select:invalid {
  border-color: rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  outline: none !important;
}
#contact_area:focus,
#contact_area:focus-visible,
.illu-contact-select:focus,
.illu-contact-select:focus-visible {
  border-color: rgba(60,138,241,.6) !important;
  box-shadow: 0 0 0 3px rgba(60,138,241,.18) !important;
  outline: none !important;
}
#contact_area option,
.illu-contact-select option { background-color: #14171C; color: #E0E3E9; }

[data-color-scheme=light] #contact_area,
[data-color-scheme=light] .illu-contact-select,
[data-color-scheme=light] #contact_slot_time,
[data-color-scheme=light] #contact_slot_date {
  border-color: var(--palette-divider) !important;
  color: #1B1D20 !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%231B1D20' d='M6 8 0 2l1.4-1.4L6 5.2 10.6.6 12 2z'/></svg>") !important;
  color-scheme: light;
}
[data-color-scheme=light] #contact_area option,
[data-color-scheme=light] .illu-contact-select option {
  background-color: #FFFFFF; color: #1B1D20;
}

/* ═══════════════════════════════════════════════════════════════════
   4. Modal "Ver historico de incidentes" — botoes
      Cancelar = GHOST (transparente + borda sutil, texto primario)
      Entrar   = PRIMARY (branco solido + texto escuro)
      Padrao identico ao hero2 (btn-ghost / btn-primary).
   ═══════════════════════════════════════════════════════════════════ */
.illu-incident-modal .illu-incident-cancel,
.illu-incident-modal .illu-incident-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 44px;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  font: 600 14px/1.4 "Illu Sans", system-ui, -apple-system, sans-serif !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease, filter .18s ease !important;
  text-decoration: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
}

/* Cancelar (ghost) — dark */
.illu-incident-modal .illu-incident-cancel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
  box-shadow: none !important;
}
.illu-incident-modal .illu-incident-cancel:hover,
.illu-incident-modal .illu-incident-cancel:focus-visible {
  background: rgba(255,255,255,.08) !important;
  background-color: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.36) !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  outline: none !important;
}

/* Entrar (primary) — dark */
.illu-incident-modal .illu-incident-submit {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  background-image: none !important;
  color: #0B0C10 !important;
  border: 1px solid #FFFFFF !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
}
.illu-incident-modal .illu-incident-submit:hover,
.illu-incident-modal .illu-incident-submit:focus-visible {
  background: #F4F6F8 !important;
  background-color: #F4F6F8 !important;
  color: #0B0C10 !important;
  border-color: #F4F6F8 !important;
  filter: none !important;
  outline: none !important;
}

/* Light mode overrides */
[data-color-scheme=light] .illu-incident-modal .illu-incident-cancel {
  color: #1B1D20 !important;
  border-color: var(--palette-divider, #C4C9D0) !important;
  background: transparent !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-cancel:hover {
  background: rgba(0,0,0,.04) !important;
  border-color: rgba(0,0,0,.24) !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-submit {
  background: #0B0C10 !important; color: #FFFFFF !important; border-color: #0B0C10 !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-submit:hover {
  background: #1B1D20 !important; border-color: #1B1D20 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   5. Backdrop ASCII
   ═══════════════════════════════════════════════════════════════════ */
html[data-illu-backdrop="ascii"]::after {
  content:"";position:fixed;left:0;right:0;bottom:0;top:auto;z-index:-1;
  height:clamp(120px,20vh,260px);pointer-events:none;
  background:url(/static/media/backdrop/illu-backdrop-ascii.webp) center bottom / 100% auto no-repeat;
  opacity:.9;
}
html[data-illu-backdrop="ascii"]::before {
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:url(/static/media/backdrop/illu-backdrop-stars.svg) center center / cover no-repeat;
}
html[data-illu-backdrop="ascii"],
html[data-illu-backdrop="ascii"] body {
  background-color:transparent !important; background-image:none !important;
}
html[data-illu-backdrop="ascii"] body {
  background-color:var(--palette-background-default,#0B0C10) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v5
   6. Modal "Ver historico de incidentes" -> soberano, cobre FABs
   7. Icone de usuario (chrome account) -> tamanho/flex garantidos
   ═══════════════════════════════════════════════════════════════════ */

/* ── 6. Modal soberano ──────────────────────────────────────────── */
.illu-incident-modal {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(4,6,10,.72) !important;
  backdrop-filter: blur(6px) saturate(1.15) !important;
  -webkit-backdrop-filter: blur(6px) saturate(1.15) !important;
}
.illu-incident-modal[hidden] { display: none !important; }

.illu-incident-modal-card {
  position: relative !important;
  z-index: 2147483001 !important;
  width: 100% !important;
  max-width: 460px !important;
  max-height: calc(100vh - 48px) !important;
  overflow: auto !important;
  background: var(--palette-background-paper, #14171C) !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  border: 1px solid rgba(148,163,184,.18) !important;
  border-radius: 16px !important;
  padding: 28px 28px 24px !important;
  box-shadow: 0 24px 60px rgba(0,0,0,.5), 0 2px 8px rgba(0,0,0,.35) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}
.illu-incident-modal-card h3 {
  margin: 0 0 4px !important;
  font: 600 20px/1.3 "Illu Sans", system-ui, sans-serif !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
}
.illu-incident-modal-card p:not(.illu-incident-error) {
  margin: 0 0 12px !important;
  font: 400 14px/1.5 "Illu Sans", system-ui, sans-serif !important;
  color: var(--palette-text-secondary, #C4C9D0) !important;
}
/* The one message every refused sign-in shares. */
.illu-incident-modal-card .illu-incident-error {
  margin: 0 0 12px;
  padding: 8px 12px;
  border-radius: 8px;
  color: var(--palette-error-main, #ef4444);
  background: rgba(239, 68, 68, 0.12);
  font: 400 13px/1.4 "Illu Sans", system-ui, sans-serif;
}
.illu-incident-modal-card label {
  display: block !important;
  font: 500 13px/1.4 "Illu Sans", system-ui, sans-serif !important;
  color: var(--palette-text-secondary, #C4C9D0) !important;
  margin: 4px 0 -6px !important;
}
.illu-incident-modal-card input {
  width: 100% !important;
  box-sizing: border-box !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  border: 1px solid rgba(148,163,184,.22) !important;
  border-radius: 10px !important;
  padding: 12px 14px !important;
  font: 400 14px/1.4 "Illu Sans", system-ui, sans-serif !important;
  outline: 0 !important;
  color-scheme: dark !important;
  transition: border-color .18s ease, background-color .18s ease !important;
}
.illu-incident-modal-card input:hover { border-color: rgba(148,163,184,.42) !important; }
.illu-incident-modal-card input:focus,
.illu-incident-modal-card input:focus-visible {
  border-color: #3C8AF1 !important;
  background-color: rgba(60,138,241,.08) !important;
  box-shadow: 0 0 0 3px rgba(60,138,241,.18) !important;
}
.illu-incident-modal-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 10px !important;
  margin-top: 16px !important;
}

/* Dark: Cancelar ghost, Entrar primary (reforco — já definido no v4) */
.illu-incident-modal .illu-incident-cancel {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  border: 1px solid rgba(255,255,255,.22) !important;
}
.illu-incident-modal .illu-incident-cancel:hover,
.illu-incident-modal .illu-incident-cancel:focus-visible {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.36) !important;
  outline: none !important;
}
.illu-incident-modal .illu-incident-submit {
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0B0C10 !important;
  border: 1px solid #FFFFFF !important;
}
.illu-incident-modal .illu-incident-submit:hover {
  background: #F4F6F8 !important;
  border-color: #F4F6F8 !important;
  color: #0B0C10 !important;
  filter: none !important;
}

/* Light */
[data-color-scheme=light] .illu-incident-modal { background: rgba(15,18,28,.5) !important; }
[data-color-scheme=light] .illu-incident-modal-card {
  background: #FFFFFF !important;
  color: #1B1D20 !important;
  border-color: rgba(29,27,32,.12) !important;
}
[data-color-scheme=light] .illu-incident-modal-card h3 { color: #1B1D20 !important; }
[data-color-scheme=light] .illu-incident-modal-card p,
[data-color-scheme=light] .illu-incident-modal-card label { color: #45494F !important; }
[data-color-scheme=light] .illu-incident-modal-card input {
  background: #F4F6F8 !important;
  color: #1B1D20 !important;
  border-color: rgba(29,27,32,.14) !important;
  color-scheme: light !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-cancel {
  color: #1B1D20 !important;
  border-color: var(--palette-divider, #C4C9D0) !important;
  background: transparent !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-cancel:hover {
  background: rgba(0,0,0,.04) !important;
}
[data-color-scheme=light] .illu-incident-modal .illu-incident-submit {
  background: #0B0C10 !important;
  color: #FFFFFF !important;
  border-color: #0B0C10 !important;
}

/* ── 6b. Esconde TUDO que flutua enquanto o modal está aberto ── */
body.illu-modal-open .illu-fab,
body.illu-modal-open .illu-newsletter-fab,
body.illu-modal-open .illu-floating,
body.illu-modal-open .illu-hero2-cta,
body.illu-modal-open [class*="fab"][style*="position"][style*="fixed"],
body.illu-modal-open [class*="fab"]:not(button):not(a),
body.illu-modal-open [class*="newsletter-fab"],
body.illu-modal-open [class*="floating-action"],
body.illu-modal-open #illu-newsletter-fab,
body.illu-modal-open #illu-fab,
body.illu-modal-open .illu-back-to-top,
body.illu-modal-open [aria-label*="Voltar ao topo"],
body.illu-modal-open [aria-label*="Newsletter"] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── 7. Icone de usuario (chrome account) ──────────────────────── */
.illu-chrome-actions { display: inline-flex !important; align-items: center !important; gap: .5rem !important; }

.illu-chrome-account {
  display: inline-flex !important;
  align-items: center !important;
  gap: .5rem !important;
  min-height: 32px !important;
  line-height: 1.4 !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  max-width: 100% !important;
}

.illu-chrome-avatar {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 1.6rem !important;
  height: 1.6rem !important;
  min-width: 1.6rem !important;
  min-height: 1.6rem !important;
  border-radius: 999px !important;
  overflow: hidden !important;
  flex: 0 0 1.6rem !important;
  padding: 0 !important;
}
.illu-chrome-avatar > * {
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
}
.illu-chrome-avatar img,
.illu-chrome-avatar svg {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 999px !important;
}

/* Se o "logado" injetar um <img> com classe diferente, cobre: */
.illu-chrome-account img,
.illu-chrome-account > svg,
.illu-chrome-account [data-illu-avatar] {
  width: 1.6rem !important;
  height: 1.6rem !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  flex: 0 0 1.6rem !important;
  display: inline-block !important;
  overflow: hidden !important;
}

/* Nome de usuário quebrado/overflow */
.illu-chrome-account > span,
.illu-chrome-account > [data-illu-user-name] {
  max-width: 10rem !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: inline-block !important;
  vertical-align: middle !important;
}

@media(max-width:599.95px){
  .illu-chrome-avatar,
  .illu-chrome-account img,
  .illu-chrome-account > svg { width: 1.4rem !important; height: 1.4rem !important; flex-basis: 1.4rem !important; }
  .illu-chrome-account > span { max-width: 6rem !important; }
}

/* Hardening: nunca deixar o icone virar 0x0 ou quebrar layout */
.illu-chrome-actions svg[width="0"],
.illu-chrome-actions img[width="0"] { width: 1.6rem !important; height: 1.6rem !important; }

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v7
   8. Estado de erro dos inputs do modal
   9. Estrutura do incidente (base para o que vem do site-v1)
   ═══════════════════════════════════════════════════════════════════ */

.illu-incident-modal-card input[aria-invalid="true"] {
  border-color: #ff6b6b !important;
  box-shadow: 0 0 0 3px rgba(255,107,107,.16) !important;
}
.illu-incident-modal-card .illu-field-error {
  color: #ff6b6b !important;
  font: 500 12px/1.4 "Illu Sans", system-ui, sans-serif !important;
  margin-top: 6px !important;
  display: block !important;
}

/* Estrutura de lista de incidentes (espelha marketing.illunare.ai/status) */
.illu-incident-list { display:flex; flex-direction:column; gap:10px; margin: 16px 0 0; padding:0; list-style:none; }
.illu-incident-item {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 6px 16px;
  align-items: center;
  padding: 14px 18px;
  border: 1px solid rgba(148,163,184,.14);
  border-radius: 12px;
  background: var(--palette-background-paper, #14171C);
}
.illu-incident-item__title {
  font: 600 14px/1.35 "Illu Sans", system-ui, sans-serif;
  color: var(--palette-text-primary, #E0E3E9);
  margin: 0;
}
.illu-incident-item__meta {
  font: 400 12px/1.4 "Illu Sans", system-ui, sans-serif;
  color: var(--palette-text-secondary, #C4C9D0);
  margin: 2px 0 0;
}
.illu-incident-badge {
  display: inline-flex; align-items:center; gap:6px;
  padding: 4px 10px; border-radius: 999px;
  font: 600 12px/1.3 "Illu Sans", system-ui, sans-serif;
  background: rgba(34,197,94,.14); color: #4ade80;
  white-space: nowrap;
}
.illu-incident-badge--open    { background: rgba(239,68,68,.16); color:#fca5a5; }
.illu-incident-badge--partial { background: rgba(245,158,11,.16); color:#fcd34d; }
.illu-incident-more {
  display: block; width: max-content; margin: 18px auto 0;
  padding: 12px 28px; border-radius: 999px;
  background: #FFFFFF; color: #0B0C10;
  border: 1px solid rgba(11,12,16,.08);
  font: 600 14px/1.4 "Illu Sans", system-ui, sans-serif;
  cursor: pointer;
}
.illu-incident-more:hover { background:#F4F6F8; }

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v8
   10. Backdrop clicável, password reveal, skeleton, locked hint
   ═══════════════════════════════════════════════════════════════════ */

.illu-incident-modal-backdrop {
  position: absolute !important;
  inset: 0 !important;
  z-index: 0 !important;
  background: transparent !important;
  cursor: pointer !important;
}

.illu-incident-pass-wrap {
  position: relative !important;
  display: block !important;
}
.illu-incident-pass-wrap input {
  padding-right: 44px !important;
}
.illu-incident-pass-reveal {
  position: absolute !important;
  top: 50% !important;
  right: 8px !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--palette-text-secondary, #C4C9D0) !important;
  cursor: pointer !important;
  border-radius: 8px !important;
  transition: background-color .15s ease, color .15s ease !important;
}
.illu-incident-pass-reveal:hover {
  background: rgba(255,255,255,.08) !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
}
.illu-incident-pass-reveal svg { display:block; }
[data-color-scheme=light] .illu-incident-pass-reveal { color:#45494F !important; }
[data-color-scheme=light] .illu-incident-pass-reveal:hover { background:rgba(0,0,0,.05) !important; color:#1B1D20 !important; }

/* Skeleton de incidentes */
.illu-incident-skel {
  display: flex; flex-direction: column; gap: 10px; margin: 16px 0 0;
}
.illu-incident-skel-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
  padding: 14px 18px; border-radius: 12px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(148,163,184,.10);
}
.illu-incident-skel-row span {
  display: block; height: 10px; border-radius: 6px;
  background: linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.11), rgba(255,255,255,.05));
  background-size: 200% 100%;
  animation: illu-skel-sweep 1.6s ease-in-out infinite;
}
.illu-incident-skel-row span:nth-child(2){ width: 60%; }
@keyframes illu-skel-sweep{
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion:reduce){
  .illu-incident-skel-row span{ animation:none; opacity:.7; }
}

.illu-incident-locked-hint {
  margin: 12px 0 0 !important;
  font: 400 14px/1.5 "Illu Sans", system-ui, sans-serif !important;
  color: var(--palette-text-secondary, #C4C9D0) !important;
  text-align: center !important;
}

/* Esconde o hint "Entrar para visualizar" quando o botão sumiu/deslogou */
.illu-incident-locked-hint[hidden]{ display:none !important; }

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v9 — bloco bloqueado estilo site-v1
   (blur + overlay + botão branco "Entrar para visualizar")
   ═══════════════════════════════════════════════════════════════════ */
.illu-incident-locked {
  position: relative !important;
  margin: 20px 0 0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(148,163,184,.12) !important;
  background: var(--palette-background-paper, #14171C) !important;
  min-height: 240px !important;
}

.illu-incident-skel-blur {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  padding: 18px !important;
  filter: blur(6px) saturate(.9) !important;
  opacity: .55 !important;
  user-select: none !important;
  pointer-events: none !important;
}
.illu-incident-skel-row {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr) !important;
  gap: 12px !important;
  padding: 14px 16px !important;
  border-radius: 12px !important;
  background: rgba(255,255,255,.03) !important;
  border: 1px solid rgba(148,163,184,.10) !important;
  min-height: 44px !important;
}
.illu-incident-skel-row > i {
  display: block !important;
  height: 10px !important;
  align-self: center !important;
  border-radius: 6px !important;
  background: rgba(255,255,255,.10) !important;
}
.illu-incident-skel-row > i:nth-child(2){ width: 60% !important; }

.illu-incident-locked-overlay {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 24px !important;
  text-align: center !important;
  background: linear-gradient(180deg,
    rgba(11,12,16,.30) 0%,
    rgba(11,12,16,.70) 55%,
    rgba(11,12,16,.86) 100%) !important;
  z-index: 2 !important;
}
[data-color-scheme=light] .illu-incident-locked-overlay {
  background: linear-gradient(180deg,
    rgba(255,255,255,.34) 0%,
    rgba(255,255,255,.72) 55%,
    rgba(255,255,255,.88) 100%) !important;
}

.illu-incident-locked-overlay > p {
  margin: 0 !important;
  max-width: 26rem !important;
  font: 500 15px/1.5 "Illu Sans", system-ui, sans-serif !important;
  color: var(--palette-text-primary, #E0E3E9) !important;
  text-align: center !important;
}
[data-color-scheme=light] .illu-incident-locked-overlay > p { color:#1B1D20 !important; }

.illu-incident-unlock {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 12px 28px !important;
  border-radius: 999px !important;
  background: #FFFFFF !important;
  background-color: #FFFFFF !important;
  color: #0B0C10 !important;
  border: 1px solid rgba(11,12,16,.08) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.06) !important;
  font: 600 14px/1.4 "Illu Sans", system-ui, sans-serif !important;
  letter-spacing: .01em !important;
  cursor: pointer !important;
  transition: background-color .18s ease, color .18s ease !important;
}
.illu-incident-unlock:hover,
.illu-incident-unlock:focus-visible {
  background: #F4F6F8 !important;
  background-color: #F4F6F8 !important;
  color: #0B0C10 !important;
  outline: none !important;
}
[data-color-scheme=light] .illu-incident-unlock {
  background: #0B0C10 !important;
  color: #FFFFFF !important;
  border-color: #0B0C10 !important;
}
[data-color-scheme=light] .illu-incident-unlock:hover {
  background: #1B1D20 !important;
  border-color: #1B1D20 !important;
}

/* Oculta o antigo CTA azul quando o bloco bloqueado está presente */
.illu-incident-locked ~ .illu-incident-cta,
.illu-incident-cta[data-illu-hidden-by-locked] { display: none !important; }

/* ── Topo: garante que o parágrafo não quebre após remoção da 2ª frase ── */
main p.illu-status-lede,
main .illu-status-lede,
main p[data-illu-lede] {
  max-width: none !important;
  width: auto !important;
  text-wrap: pretty !important;
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v10 — fallback de paridade visual
   (autofix v10 sobrescreve em runtime com o valor real do board)
   ═══════════════════════════════════════════════════════════════════ */
.illu-incident-locked {
  background: #15171C !important;
  border: 1px solid rgba(148,163,184,.14) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}
[data-color-scheme=light] .illu-incident-locked {
  background: #F4F6F8 !important;
  border: 1px solid rgba(29,27,32,.10) !important;
}

/* o overlay do blur fica mais leve para o card aparecer igual ao board */
.illu-incident-locked-overlay {
  background: linear-gradient(180deg,
    rgba(21,23,28,.30) 0%,
    rgba(21,23,28,.72) 55%,
    rgba(21,23,28,.90) 100%) !important;
}
[data-color-scheme=light] .illu-incident-locked-overlay {
  background: linear-gradient(180deg,
    rgba(244,246,248,.34) 0%,
    rgba(244,246,248,.72) 55%,
    rgba(244,246,248,.90) 100%) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v11 — fallback CSS do paragrafo do topo
   (autofix v11 sobrescreve inline; este CSS cobre quando JS falha)
   ═══════════════════════════════════════════════════════════════════ */

/* O paragrafo imediatamente abaixo do H1 do topo */
main h1 + p,
main .illu-hero2-sub,
main [class*="lede"],
main [class*="subtitle"] {
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* Quando o autofix marca, garante o estado final */
main p[data-illu-lede-fixed="1"] {
  text-wrap: wrap !important;
  max-width: none !important;
  width: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v12 — corrige o paragrafo do topo NA FONTE
   O elemento e <h6 class="illu-1widywf">, com width: 516px / 85%.
   Sobrescreve por classe exata (nao depende de JS).
   ═══════════════════════════════════════════════════════════════════ */
h6.illu-1widywf,
.IlluTypography-h6.illu-1widywf,
main h1.illu-107xs6j + h6,
main .IlluTypography-h1 + .IlluTypography-h6 {
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  white-space: normal !important;
  text-wrap: wrap !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
  -webkit-hyphens: none !important;
}

/* v13: override de ancestrais REMOVIDO (quebrava centralizacao) */


/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v14 — backdrop ASCII só em /status
   O CSS já depende do atributo [data-illu-backdrop="ascii"], mas
   adicionamos uma trava explícita por [data-illu-page="status"] caso
   o template passe essa marca. Se não passar, o atributo no <html>
   é a única fonte de verdade (que o JS v14 já guarda).
   ═══════════════════════════════════════════════════════════════════ */
html[data-illu-backdrop="ascii"]:not([data-illu-page="status"])::before,
html[data-illu-backdrop="ascii"]:not([data-illu-page="status"])::after {
  /* se algum dia o atributo vazar para outra página, o CSS nao desenha */
  content: none !important;
  background: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v17 — controlo de sessão no header
   ═══════════════════════════════════════════════════════════════════ */
.illu-chrome-actions{
  display:inline-flex !important;align-items:center !important;gap:.4rem !important;
  margin-left:.25rem !important;
}
.illu-chrome-link,
.illu-chrome-account{
  display:inline-flex !important;align-items:center !important;gap:.35rem !important;
  padding:.35rem .7rem !important;border-radius:999px !important;
  background:transparent !important;border:1px solid transparent !important;
  color:var(--palette-text-secondary,#C4C9D0) !important;
  font:500 .875rem/1.4 "Illu Sans",system-ui,sans-serif !important;
  text-decoration:none !important;cursor:pointer !important;
  transition:color .18s,background-color .18s,border-color .18s !important;
  white-space:nowrap !important;
}
.illu-chrome-link:hover,
.illu-chrome-account:hover,
.illu-chrome-link:focus-visible,
.illu-chrome-account:focus-visible{
  color:var(--palette-text-primary,#E0E3E9) !important;
  border-color:var(--palette-divider,rgba(148,163,184,.22)) !important;
  background:rgba(255,255,255,.05) !important;outline:none !important;
}
.illu-chrome-link svg,.illu-chrome-account svg{
  width:16px !important;height:16px !important;display:block !important;
}
.illu-chrome-avatar{
  display:inline-flex !important;align-items:center !important;justify-content:center !important;
  width:1.5rem !important;height:1.5rem !important;min-width:1.5rem !important;min-height:1.5rem !important;
  border-radius:999px !important;
  background:color-mix(in oklab,var(--palette-primary-main,#3C8AF1) 22%,transparent) !important;
  border:1px solid color-mix(in oklab,var(--palette-primary-main,#3C8AF1) 45%,transparent) !important;
  color:var(--palette-primary-main,#3C8AF1) !important;
  flex:0 0 1.5rem !important;
}
.illu-chrome-logout{display:inline-flex !important;margin:0 !important;padding:0 !important;}
.illu-chrome-label{display:inline-block !important;}
[data-color-scheme=light] .illu-chrome-link,
[data-color-scheme=light] .illu-chrome-account{color:var(--palette-text-secondary,#45494F) !important;}
[data-color-scheme=light] .illu-chrome-link:hover,
[data-color-scheme=light] .illu-chrome-account:hover{
  color:var(--palette-text-primary,#1B1D20) !important;background:rgba(0,0,0,.04) !important;
}
@media (max-width:899.95px){
  .illu-chrome-label{display:none !important;}
  .illu-chrome-actions{gap:.25rem !important;}
}

/* ═══════════════════════════════════════════════════════════════════
   illu-status-fixes-v18 — accordion de incidentes (paridade v1)
   ═══════════════════════════════════════════════════════════════════ */
.illu-incident-list{
  display:flex !important;flex-direction:column !important;gap:10px !important;
  margin:16px 0 0 !important;padding:0 !important;list-style:none !important;
}
details.illu-incident-item{
  display:block !important;
  border:1px solid rgba(148,163,184,.14) !important;
  border-radius:12px !important;
  background:var(--palette-background-paper,#14171C) !important;
  padding:0 !important;margin:0 !important;
  overflow:hidden !important;
}
details.illu-incident-item > summary{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) auto !important;
  gap:6px 16px !important;align-items:center !important;
  padding:14px 18px !important;cursor:pointer !important;
  list-style:none !important;
}
details.illu-incident-item > summary::-webkit-details-marker{display:none !important;}
.illu-incident-item__title{
  margin:0 !important;font:600 14px/1.35 "Illu Sans",system-ui,sans-serif !important;
  color:var(--palette-text-primary,#E0E3E9) !important;
}
.illu-incident-item__meta{
  margin:2px 0 0 !important;font:400 12px/1.4 "Illu Sans",system-ui,sans-serif !important;
  color:var(--palette-text-secondary,#C4C9D0) !important;
}
.illu-incident-item__aside{
  display:inline-flex !important;align-items:center !important;gap:10px !important;
}
.illu-incident-item__chev{
  color:var(--palette-text-secondary,#C4C9D0) !important;
  transition:transform .18s ease !important;font-size:11px !important;
}
details.illu-incident-item[open] .illu-incident-item__chev{transform:rotate(180deg) !important;}
.illu-incident-item__body{
  padding:0 18px 16px 18px !important;
  border-top:1px solid rgba(148,163,184,.10) !important;
}
.illu-incident-item__desc{
  margin:12px 0 12px !important;
  font:400 13px/1.55 "Illu Sans",system-ui,sans-serif !important;
  color:var(--palette-text-secondary,#C4C9D0) !important;
}
.illu-incident-item__facts{
  display:flex !important;flex-wrap:wrap !important;gap:8px 20px !important;
  font:400 12px/1.4 "Illu Sans",system-ui,sans-serif !important;
  color:var(--palette-text-secondary,#C4C9D0) !important;
}
.illu-incident-item__facts strong{
  color:var(--palette-text-primary,#E0E3E9) !important;
  font-weight:600 !important;margin-left:4px !important;
}
.illu-incident-badge{
  display:inline-flex !important;align-items:center !important;gap:6px !important;
  padding:4px 10px !important;border-radius:999px !important;
  font:600 12px/1.3 "Illu Sans",system-ui,sans-serif !important;
  background:rgba(34,197,94,.14) !important;color:#4ade80 !important;
  white-space:nowrap !important;
}
.illu-incident-badge--open{background:rgba(239,68,68,.16) !important;color:#fca5a5 !important;}
[data-color-scheme=light] details.illu-incident-item{border-color:rgba(29,27,32,.12) !important;background:#fff !important;}
[data-color-scheme=light] .illu-incident-item__title{color:#1B1D20 !important;}
[data-color-scheme=light] .illu-incident-item__meta,
[data-color-scheme=light] .illu-incident-item__desc,
[data-color-scheme=light] .illu-incident-item__facts{color:#45494F !important;}
[data-color-scheme=light] .illu-incident-item__facts strong{color:#1B1D20 !important;}