/* Canal Essencial — Admin Lab
   Tema: escuro profissional com detalhe dourado.
   Escopo: interface interna/admin local. Sem producao. */

:root {
  --bg: #0d0f12;
  --bg-elevated: #15181d;
  --bg-sidebar: #101317;
  --border: #23272e;
  --text: #e7e9ec;
  --text-muted: #9aa1ab;
  --gold: #c9a227;
  --gold-soft: rgba(201, 162, 39, 0.14);
  --danger-muted: #3a2a2a;
  --radius: 10px;
  --font: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.5;
}

.app {
  display: grid;
  grid-template-columns: 250px 1fr;
  min-height: 100vh;
}

/* ---------- Sidebar ---------- */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: 20px 16px;
  gap: 24px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: var(--gold-soft);
  border: 1px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.5px;
}

.brand-text { display: flex; flex-direction: column; }
.brand-text strong { font-size: 16px; }
.brand-sub {
  font-size: 12px;
  color: var(--gold);
  letter-spacing: 1px;
  text-transform: uppercase;
}

.nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-item {
  display: block;
  padding: 10px 14px;
  border-radius: var(--radius);
  color: var(--text-muted);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.nav-item:hover {
  background: var(--bg-elevated);
  color: var(--text);
}

.nav-item.is-active {
  background: var(--gold-soft);
  color: var(--text);
  border-left-color: var(--gold);
}

.sidebar-footer {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.badge {
  font-size: 11px;
  letter-spacing: 0.5px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--gold);
  border: 1px solid var(--gold);
  text-align: center;
}

.badge-muted {
  background: transparent;
  color: var(--text-muted);
  border-color: var(--border);
}

/* ---------- Conteudo ---------- */
.content {
  display: flex;
  flex-direction: column;
  padding: 24px 32px;
  gap: 20px;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  padding-bottom: 16px;
}

.topbar-title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
}

.topbar-tag {
  font-size: 12px;
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 999px;
  padding: 4px 12px;
}

.scope-note {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 12px 16px;
  font-size: 13px;
  color: var(--text-muted);
}

.scope-note strong { color: var(--text); }

.panel {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  flex: 1;
}

.panel-placeholder { color: var(--text-muted); }

.panel h2 {
  margin-top: 0;
  font-size: 18px;
  color: var(--text);
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.card {
  position: relative;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius);
  padding: 18px 18px 16px;
  min-height: 92px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 20px rgba(0, 0, 0, 0.22);
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.card:hover {
  transform: translateY(-2px);
  border-color: var(--gold);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 12px 28px rgba(0, 0, 0, 0.3);
}

.card-value {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}

.card-label {
  margin-top: 8px;
  font-size: 12px;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}

.content-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 14px;
}

.dot { color: var(--border); }

@media (max-width: 720px) {
  .app { grid-template-columns: 1fr; }
  .sidebar { flex-direction: column; }
}

/* Empresas: lista clicavel e detalhe (F-Frontend-Lab-1E) */
.company-list {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.company {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
}
.company-link {
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  color: var(--text);
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.company-link:hover {
  color: var(--gold);
}
.company-link:disabled {
  opacity: 0.5;
  cursor: default;
}

/* Busca de empresas (F-Frontend-Lab-1H) */
.search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 12px;
}
.search-row input {
  flex: 1 1 220px;
  min-width: 200px;
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 12px;
  font: inherit;
}
.search-row button {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 14px;
  font: inherit;
  cursor: pointer;
}
.search-row button:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* F5-B3 UX visual geral - frontend-only */
.panel-section {
  animation: panelFadeIn 160ms ease-out;
}

@keyframes panelFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.panel-heading {
  gap: 16px;
}

.panel-heading .muted {
  max-width: 620px;
}

.search-row {
  align-items: end;
  gap: 12px;
  margin: 18px 0;
}

.search-row label {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.82;
}

.input,
.search-row input,
.search-row select {
  min-height: 40px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--bg);
  padding: 8px 12px;
  outline: none;
}

.input:focus,
.search-row input:focus,
.search-row select:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-soft);
}

.company-list {
  display: grid;
  gap: 12px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
}

.company {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--bg);
}

.company strong {
  display: block;
  margin-bottom: 8px;
}

.company ul {
  display: grid;
  gap: 6px;
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.company li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--border);
  padding-top: 6px;
}

.company li:first-child {
  border-top: 0;
  padding-top: 0;
}

.muted {
  line-height: 1.5;
}

.panel-placeholder {
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  padding: 18px;
}

.nav-item {
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.nav-item:hover {
  transform: translateY(-1px);
}

@media (max-width: 760px) {
  .search-row {
    display: grid;
    grid-template-columns: 1fr;
  }

  .company li {
    display: grid;
    gap: 4px;
  }

  .panel-heading {
    display: grid;
  }
}

/* F6-B7-PATCH - Polish visual global CSS-only */

:root {
  --bg-hover: #1b1f26;
  --shadow: 0 6px 18px rgba(0,0,0,0.28);
  --ring: 0 0 0 3px var(--gold-soft);
}

/* base */
body {
  -webkit-font-smoothing: antialiased;
  letter-spacing: 0.1px;
}
::selection {
  background: var(--gold-soft);
  color: var(--text);
}

/* sidebar / nav */
.sidebar {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
}
.brand-mark {
  box-shadow: inset 0 0 0 1px var(--gold);
}
.nav-item {
  font-weight: 500;
}
.nav-item:hover {
  background: var(--bg-hover);
}
.nav-item.is-active {
  font-weight: 600;
}

/* topbar / eyebrow */
.topbar-title {
  font-size: 24px;
  font-weight: 700;
}
.topbar-tag {
  background: var(--gold-soft);
  font-weight: 600;
}
.eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: var(--gold);
}

/* panel / card */
.panel {
  box-shadow: var(--shadow);
}
.panel-heading {
  align-items: start;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.card {
  background: var(--bg-hover);
}

/* company / list hover */
.company {
  transition: border-color 160ms ease, background 160ms ease;
}
.company:hover {
  border-color: var(--gold);
  background: var(--bg-hover);
}
.company strong {
  color: var(--text);
}

/* buttons / inputs */
.search-row button {
  font-weight: 600;
  transition: border-color 160ms ease, color 160ms ease;
}
.search-row button:hover {
  border-color: var(--gold);
  color: var(--gold);
}
.search-row button:first-of-type {
  background: var(--gold);
  border-color: var(--gold);
  color: #1a1606;
}
.search-row input:hover,
.search-row select:hover,
.input:hover {
  border-color: var(--gold-soft);
}

/* focus-visible */
a:focus-visible,
button:focus-visible,
.nav-item:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

/* responsivo simples */
@media (max-width: 720px) {
  .sidebar {
    position: static;
    height: auto;
  }
}

/* fim F6-B7-PATCH */

/* F6-B8-PATCH - Cards/listas premium CSS-only */

.panel-grid {
  gap: 18px;
}

.card {
  overflow: hidden;
  background: linear-gradient(160deg, var(--bg-hover), var(--bg-elevated));
}

.card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold), transparent);
  opacity: 0.55;
}

.card-value {
  letter-spacing: 0.3px;
}

.card-label {
  color: var(--text-muted);
}

.company-list {
  gap: 14px;
}

.company {
  padding: 16px 18px;
}

.company strong {
  font-size: 15px;
  letter-spacing: 0.2px;
  color: var(--text);
}

.company ul {
  margin-top: 10px;
  gap: 0;
}

.company li {
  padding: 7px 0;
}

.company .company {
  background: transparent;
  border: 0;
  border-top: 1px solid var(--border);
  border-radius: 0;
  padding: 7px 2px;
  color: var(--text-muted);
}

.panel-placeholder {
  text-align: center;
  padding: 22px 18px;
  background: var(--bg);
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--text-muted);
}

.muted {
  color: var(--text-muted);
}

/* fim F6-B8-PATCH */

/* F6-C0-PATCH - Design tokens identidade visual */

:root {
  --brand: #2f6fae;
  --brand-soft: rgba(47, 111, 174, 0.14);
  --accent: #c9a227;
  --accent-soft: rgba(201, 162, 39, 0.14);
  --confidential: #16233a;
  --success: #3fae6b;
  --success-soft: rgba(63, 174, 107, 0.14);
  --warning: #e0962b;
  --warning-soft: rgba(224, 150, 43, 0.14);
  --danger: #d65a5a;
  --danger-soft: rgba(214, 90, 90, 0.14);
  --info: #4f9bd9;
  --info-soft: rgba(79, 155, 217, 0.14);
  --neutral: var(--text-muted);
  --gold: var(--accent);
  --gold-soft: var(--accent-soft);
}

/* fim F6-C0-PATCH */

/* F6-C1B-PATCH-INICIO: identidade visual leve CSS-only */

:root {
--ring: 0 0 0 3px var(--brand-soft);
}

.nav-item.is-active {
background: var(--brand-soft);
border-left-color: var(--brand);
}

.topbar-tag {
background: var(--brand-soft);
color: var(--brand);
border-color: var(--brand);
}

.badge:not(.badge-muted) {
background: var(--brand-soft);
color: var(--brand);
border-color: var(--brand);
}

.search-row button:first-of-type {
background: var(--brand);
border-color: var(--brand);
color: var(--text);
}

.search-row button:first-of-type:hover {
background: var(--brand);
border-color: var(--brand);
color: var(--text);
}

.input:focus,
.search-row input:focus,
.search-row select:focus {
border-color: var(--brand);
box-shadow: 0 0 0 3px var(--brand-soft);
}

/* F6-C1B-PATCH-FIM */

/* F6-D1-PATCH-INICIO: empresas plus frontend-only */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.1;
}

.status-pill.is-active {
  background: var(--success-soft);
  color: var(--success);
  border-color: var(--success);
}

.status-pill.is-inactive {
  background: var(--neutral);
  color: var(--text-muted);
  border-color: rgba(148, 163, 184, 0.35);
}

.empresas-pager {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 1rem;
}

.empresas-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.45;
}

.empresas-page-info {
  color: var(--text-muted);
  font-size: 0.88rem;
}

/* F6-D1-PATCH-FIM */

/* F6-D2-PATCH-INICIO */
.areas-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  flex-wrap: wrap;
}

.areas-pager button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.areas-page-info {
  color: var(--text-muted);
  font-size: 0.9rem;
}

.status-pill.is-inactive {
  background: rgba(148, 163, 184, 0.14);
  color: #cbd5e1;
  border-color: rgba(148, 163, 184, 0.36);
}
/* F6-D2-PATCH-FIM */

/* F6-D3B-DASHBOARD-VISUAL-FIX-INICIO */
.section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 16px;
}

.section-header h2 {
  margin: 0 0 8px;
}

.section-header .muted {
  margin: 0;
}

#dashboard-refresh {
  min-width: 104px;
  white-space: nowrap;
}

#dashboard-result > div {
  display: grid;
  gap: 22px;
}

.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 18px;
  margin-bottom: 24px;
}

.metric-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-height: 112px;
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.52);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.18);
}

.metric-card .card-value {
  display: block;
  margin-bottom: 8px;
  color: var(--accent);
  font-size: 2rem;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -0.04em;
}

.metric-card .card-label {
  display: block;
  color: var(--text);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1.3;
  text-transform: uppercase;
}

.metric-card small.muted {
  display: block;
  margin-top: 8px;
  line-height: 1.45;
}

.metric-card .status-pill {
  margin-bottom: 8px;
}

.company-list {
  display: grid;
  gap: 14px;
  margin-top: 14px;
}

.company-card {
  padding: 18px;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: rgba(15, 23, 42, 0.42);
}

.company-card h3 {
  margin: 0 0 14px;
}

.detail-row {
  display: grid;
  grid-template-columns: minmax(120px, 0.45fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
}

.detail-row:last-child {
  border-bottom: 0;
}

.detail-row span {
  color: var(--text-muted);
  font-size: 0.86rem;
}

.detail-row strong {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  color: var(--text);
  font-size: 0.92rem;
}

@media (max-width: 980px) {
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .section-header {
    flex-direction: column;
  }
}

@media (max-width: 640px) {
  .panel-grid {
    grid-template-columns: 1fr;
  }

  .detail-row {
    grid-template-columns: 1fr;
  }
}
/* F6-D3B-DASHBOARD-VISUAL-FIX-FIM */

/* F6-D3C-DASHBOARD-PREMIUM-HOVER-INICIO */
#dashboard-result .panel-grid {
  perspective: 1200px;
}

#dashboard-result .metric-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.22);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.86), rgba(15, 23, 42, 0.48)),
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.16), transparent 36%);
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

#dashboard-result .metric-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: linear-gradient(180deg, var(--accent), var(--brand));
  opacity: 0.72;
}

#dashboard-result .metric-card::after {
  content: "";
  position: absolute;
  inset: -40% -30% auto auto;
  width: 140px;
  height: 140px;
  border-radius: 999px;
  background: rgba(234, 179, 8, 0.08);
  filter: blur(4px);
  pointer-events: none;
}

#dashboard-result .metric-card:hover {
  transform: translateY(-4px);
  border-color: rgba(234, 179, 8, 0.42);
  box-shadow:
    0 22px 48px rgba(0, 0, 0, 0.28),
    0 0 0 1px rgba(234, 179, 8, 0.12);
}

#dashboard-result .metric-card:hover .card-value {
  color: var(--accent);
  text-shadow: 0 0 18px rgba(234, 179, 8, 0.18);
}

#dashboard-result .metric-card .card-label,
#dashboard-result .metric-card small,
#dashboard-result .metric-card .status-pill {
  position: relative;
  z-index: 1;
}

#dashboard-result .metric-card .card-value {
  position: relative;
  z-index: 1;
}

#dashboard-result .company-card {
  position: relative;
  overflow: hidden;
  border-color: rgba(148, 163, 184, 0.18);
  background:
    linear-gradient(145deg, rgba(15, 23, 42, 0.72), rgba(15, 23, 42, 0.42));
  transition:
    transform 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease,
    background 180ms ease;
}

#dashboard-result .company-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 3px;
  background: var(--brand);
  opacity: 0.62;
}

#dashboard-result .company-card:hover {
  transform: translateY(-3px);
  border-color: rgba(37, 99, 235, 0.42);
  box-shadow:
    0 18px 38px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(37, 99, 235, 0.10);
}

#dashboard-result .company-card h3,
#dashboard-result .company-card .detail-row {
  position: relative;
  z-index: 1;
}

#dashboard-result .detail-row:hover {
  background: rgba(148, 163, 184, 0.05);
  border-radius: 10px;
  padding-left: 8px;
  padding-right: 8px;
}

#dashboard-refresh {
  border-color: rgba(37, 99, 235, 0.55);
  background:
    linear-gradient(135deg, rgba(37, 99, 235, 0.28), rgba(15, 23, 42, 0.38));
  color: var(--text);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease;
}

#dashboard-refresh:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: rgba(234, 179, 8, 0.55);
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.24),
    0 0 0 1px rgba(234, 179, 8, 0.12);
}

#dashboard-refresh:disabled {
  opacity: 0.58;
  cursor: wait;
}
/* F6-D3C-DASHBOARD-PREMIUM-HOVER-FIM */

/* F6-D5-CSS-FINAL-RESPONSIVO-INICIO */

/* Completa classes introduzidas nas telas funcionais da Fase 6. */
.stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.section-description {
  margin: 6px 0 18px;
  max-width: 860px;
  color: var(--text-muted);
  font-size: 0.94rem;
  line-height: 1.55;
}

.company-meta {
  display: grid;
  gap: 8px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.company-meta li {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  color: var(--text-muted);
  font-size: 0.93rem;
  line-height: 1.45;
}

.company-meta strong {
  color: var(--text-main);
  font-weight: 700;
}

/* Ajuste leve de consistencia entre cards funcionais. */
.company.card {
  display: block;
}

.company .company-link,
.company-link {
  align-self: flex-start;
}

/* Responsividade final aditiva, sem reescrever media queries antigas. */
@media (max-width: 760px) {
  .content {
    padding: 20px;
  }

  .search-row {
    align-items: stretch;
    gap: 10px;
  }

  .search-row .input,
  .search-row button,
  .search-row .btn {
    width: 100%;
  }

  .empresas-pager,
  .areas-pager {
    justify-content: center;
    gap: 10px;
  }

  .empresas-page-info,
  .areas-page-info {
    width: 100%;
    text-align: center;
  }

  .company-meta li {
    flex-direction: column;
    gap: 2px;
  }
}

@media (max-width: 640px) {
  .content {
    padding: 16px;
  }

  .panel-grid {
    grid-template-columns: 1fr;
  }

  .card,
  .company {
    border-radius: 18px;
  }

  .section-description {
    font-size: 0.9rem;
  }
}

/* F6-D5-CSS-FINAL-RESPONSIVO-FIM */


/* F6-D7-PREMIUM-INICIO */
/* Polimento visual premium final - frontend-only, CSS-only, aditivo */

/* Ritmo visual geral */
.content {
  gap: 1.35rem;
}

.panel {
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 22px 70px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.panel-section {
  margin-top: 1.25rem;
}

.panel-heading {
  margin-bottom: 1rem;
}

.panel-heading h2,
.panel-heading h3 {
  letter-spacing: -0.02em;
}

.section-description {
  max-width: 760px;
  line-height: 1.55;
}

/* Linguagem unificada para listas/cards */
.company-list {
  gap: 0.9rem;
}

.company,
article.company.card {
  position: relative;
  border: 1px solid rgba(255, 255, 255, 0.105);
  border-left: 3px solid rgba(201, 166, 70, 0.72);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.075), rgba(255, 255, 255, 0.035)),
    rgba(8, 18, 32, 0.52);
  box-shadow:
    0 14px 38px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
  transition:
    transform 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    background 160ms ease;
}

.company:hover,
article.company.card:hover {
  transform: translateY(-2px);
  border-color: rgba(42, 111, 216, 0.78);
  border-left-color: rgba(42, 111, 216, 0.95);
  background:
    linear-gradient(135deg, rgba(42, 111, 216, 0.13), rgba(255, 255, 255, 0.045)),
    rgba(8, 18, 32, 0.62);
  box-shadow:
    0 20px 52px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(42, 111, 216, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.company strong,
article.company.card strong {
  letter-spacing: -0.015em;
}

.company-meta {
  gap: 0.45rem 0.8rem;
  opacity: 0.94;
}

/* Dashboard: hierarquia entre cards e lista */
.metric-grid {
  gap: 1rem;
}

.metric-card {
  border-color: rgba(255, 255, 255, 0.11);
  box-shadow:
    0 16px 44px rgba(0, 0, 0, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.metric-card:hover {
  border-color: rgba(42, 111, 216, 0.70);
  box-shadow:
    0 22px 58px rgba(0, 0, 0, 0.30),
    0 0 0 1px rgba(42, 111, 216, 0.10);
}

.card-value {
  letter-spacing: -0.045em;
}

.card-label {
  letter-spacing: 0.035em;
}

/* Botões e ações */
.search-row button,
.company-link,
.empresas-pager button,
.areas-pager button {
  border-radius: 999px;
  min-height: 40px;
  font-weight: 700;
  letter-spacing: 0.01em;
  transition:
    transform 150ms ease,
    border-color 150ms ease,
    background 150ms ease,
    box-shadow 150ms ease,
    opacity 150ms ease;
}

.search-row button:hover,
.company-link:hover,
.empresas-pager button:hover,
.areas-pager button:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 28px rgba(42, 111, 216, 0.22);
}

.search-row button:focus-visible,
.company-link:focus-visible,
.empresas-pager button:focus-visible,
.areas-pager button:focus-visible,
.nav-item:focus-visible {
  outline: 2px solid rgba(42, 111, 216, 0.85);
  outline-offset: 3px;
}

.search-row button:disabled,
.empresas-pager button:disabled,
.areas-pager button:disabled {
  cursor: not-allowed;
  opacity: 0.52;
  transform: none;
  box-shadow: none;
}

/* Inputs/filtros */
.search-row input,
.search-row select {
  min-height: 42px;
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.035);
}

.search-row input:focus,
.search-row select:focus {
  border-color: rgba(42, 111, 216, 0.76);
  box-shadow:
    0 0 0 3px rgba(42, 111, 216, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* Navegacao */
.nav-item {
  transition:
    background 150ms ease,
    border-color 150ms ease,
    transform 150ms ease,
    color 150ms ease;
}

.nav-item:hover {
  transform: translateX(2px);
  border-color: rgba(42, 111, 216, 0.46);
}

.nav-item.is-active {
  box-shadow:
    0 12px 30px rgba(42, 111, 216, 0.16),
    inset 3px 0 0 rgba(201, 166, 70, 0.92);
}

/* Status */
.status-pill {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
}

/* Paginadores */
.empresas-pager,
.areas-pager {
  gap: 0.75rem;
  margin-top: 1rem;
}

.empresas-pager span,
.areas-pager span {
  opacity: 0.86;
  font-size: 0.92rem;
}

/* Responsividade aditiva */
@media (max-width: 760px) {
  .content {
    gap: 1rem;
  }

  .panel {
    border-radius: 20px;
  }

  .panel-section {
    margin-top: 1rem;
  }

  .company,
  article.company.card {
    border-radius: 16px;
  }

  .search-row {
    gap: 0.7rem;
  }
}

@media (max-width: 640px) {
  .search-row {
    align-items: stretch;
  }

  .search-row button,
  .company-link,
  .empresas-pager button,
  .areas-pager button {
    width: 100%;
  }

  .empresas-pager,
  .areas-pager {
    justify-content: center;
    text-align: center;
  }

  .company-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .nav-item:hover {
    transform: none;
  }
}

/* F6-D7-PREMIUM-FIM */

/* F6-D7B-INSTITUCIONAL-INICIO */
/* Tema claro institucional Canal Essencial - frontend-only, CSS-only, aditivo */

/* Tokens finais baseados na identidade visual Canal Essencial */
:root {
  --bg: #f7f9fa;
  --bg-elevated: #ffffff;
  --bg-sidebar: #00385c;
  --bg-hover: #eef3f6;

  --border: #dde3e8;
  --text: #07182d;
  --text-muted: #4b5b6b;

  --brand: #009fa6;
  --brand-strong: #20c2c7;
  --brand-soft: rgba(0, 159, 166, 0.12);

  --accent: #d9a928;
  --accent-strong: #c99618;
  --accent-soft: rgba(217, 169, 40, 0.16);

  --gold: #d9a928;
  --gold-strong: #c99618;
  --gold-soft: rgba(217, 169, 40, 0.16);

  --confidential: #00385c;
  --confidential-soft: rgba(0, 56, 92, 0.10);

  --success: #178a5a;
  --success-soft: rgba(23, 138, 90, 0.12);
  --warning: #b7791f;
  --warning-soft: rgba(183, 121, 31, 0.13);
  --danger: #b42318;
  --danger-soft: rgba(180, 35, 24, 0.12);
  --info: #009fa6;
  --info-soft: rgba(0, 159, 166, 0.12);
}

/* Base clara */
html {
  background: #f7f9fa;
}

body {
  color: var(--text);
  background:
    radial-gradient(circle at 0% 0%, rgba(0, 159, 166, 0.10), transparent 32%),
    radial-gradient(circle at 100% 100%, rgba(217, 169, 40, 0.10), transparent 30%),
    linear-gradient(135deg, #ffffff 0%, #f7f9fa 48%, #eef3f6 100%);
}

::selection {
  color: #ffffff;
  background: var(--brand);
}

/* Scrollbar clara */
* {
  scrollbar-color: rgba(0, 159, 166, 0.45) #eef3f6;
}

::-webkit-scrollbar-track {
  background: #eef3f6;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 159, 166, 0.46);
  border: 2px solid #eef3f6;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 56, 92, 0.72);
}

/* Estrutura principal */
.app-shell,
.main,
.content {
  background: transparent;
  color: var(--text);
}

.panel,
.panel-section,
.card,
.metric-card,
.company,
article.company.card {
  color: var(--text);
  background: var(--bg-elevated);
  border-color: var(--border);
}

/* Sidebar institucional navy */
.sidebar {
  color: #ffffff;
  background:
    linear-gradient(180deg, #00385c 0%, #002f4f 100%);
  border-right: 1px solid rgba(217, 169, 40, 0.34);
  box-shadow:
    14px 0 36px rgba(0, 47, 79, 0.18),
    inset -1px 0 0 rgba(255, 255, 255, 0.08);
}

.sidebar *,
.sidebar .brand-text strong,
.sidebar .brand-sub,
.sidebar .sidebar-footer,
.sidebar small {
  color: rgba(255, 255, 255, 0.86);
}

.sidebar .brand-text strong {
  color: #ffffff;
}

.sidebar .brand-sub {
  color: rgba(32, 194, 199, 0.95);
}

.sidebar .badge,
.sidebar .topbar-tag {
  color: #ffffff;
  background: rgba(0, 159, 166, 0.24);
  border-color: rgba(32, 194, 199, 0.44);
}

.nav-item {
  color: rgba(255, 255, 255, 0.84);
  border-color: transparent;
  background: transparent;
}

.nav-item:hover {
  color: #ffffff;
  background: rgba(0, 159, 166, 0.16);
  border-color: rgba(32, 194, 199, 0.34);
}

.nav-item.is-active {
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(0, 159, 166, 0.34), rgba(0, 159, 166, 0.14));
  border-color: rgba(32, 194, 199, 0.55);
  box-shadow:
    inset 3px 0 0 var(--accent),
    0 12px 28px rgba(0, 47, 79, 0.24);
}

/* Topbar clara */
.topbar {
  color: var(--text);
  background: rgba(255, 255, 255, 0.82);
  border-bottom: 1px solid rgba(221, 227, 232, 0.90);
  box-shadow: 0 12px 28px rgba(7, 24, 45, 0.06);
  backdrop-filter: blur(14px);
}

.topbar-title {
  color: var(--confidential);
}

.topbar-tag,
.badge {
  color: var(--confidential);
  background: rgba(0, 159, 166, 0.10);
  border-color: rgba(0, 159, 166, 0.24);
}

/* Paineis e superficies claras */
.panel {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(247, 249, 250, 0.96));
  border: 1px solid var(--border);
  box-shadow:
    0 18px 46px rgba(7, 24, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

.panel-heading h1,
.panel-heading h2,
.panel-heading h3 {
  color: var(--confidential);
}

.panel-heading p,
.section-description,
.muted,
.text-muted {
  color: var(--text-muted);
}

/* Cards e metricas */
.card,
.metric-card {
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
  border: 1px solid var(--border);
  box-shadow:
    0 12px 32px rgba(7, 24, 45, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.95);
}

.card::before,
.metric-card::before {
  background: linear-gradient(180deg, var(--brand), var(--accent));
}

.card:hover,
.metric-card:hover {
  border-color: rgba(0, 159, 166, 0.36);
  background:
    linear-gradient(180deg, #ffffff 0%, #eefafa 100%);
  box-shadow:
    0 18px 42px rgba(0, 56, 92, 0.12),
    0 0 0 1px rgba(0, 159, 166, 0.09);
}

.card-value,
.metric-value {
  color: var(--confidential);
}

.card-label,
.metric-label {
  color: var(--text-muted);
}

/* Listas de empresas e areas */
.company-list {
  color: var(--text);
}

.company,
article.company.card {
  background:
    linear-gradient(180deg, #ffffff 0%, #f9fbfc 100%);
  border: 1px solid var(--border);
  border-left: 4px solid rgba(0, 159, 166, 0.72);
  box-shadow:
    0 10px 26px rgba(7, 24, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.company:hover,
article.company.card:hover {
  background:
    linear-gradient(180deg, #ffffff 0%, #eefafa 100%);
  border-color: rgba(0, 159, 166, 0.34);
  border-left-color: var(--accent);
  box-shadow:
    0 16px 36px rgba(0, 56, 92, 0.12),
    0 0 0 1px rgba(0, 159, 166, 0.08);
}

.company strong,
article.company.card strong {
  color: var(--confidential);
}

.company-meta,
.company small,
article.company.card small {
  color: var(--text-muted);
}

/* Formularios, buscas e filtros */
.search-row input,
.search-row select,
input,
select,
textarea {
  color: var(--text);
  background: #ffffff;
  border: 1px solid var(--border);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 1px 2px rgba(7, 24, 45, 0.04);
}

.search-row input::placeholder,
textarea::placeholder {
  color: rgba(75, 91, 107, 0.70);
}

.search-row input:focus,
.search-row select:focus,
input:focus,
select:focus,
textarea:focus {
  border-color: rgba(0, 159, 166, 0.68);
  box-shadow:
    0 0 0 3px rgba(0, 159, 166, 0.14),
    0 6px 18px rgba(0, 56, 92, 0.07);
  outline: none;
}

/* Botoes */
button,
.search-row button,
.company-link,
.empresas-pager button,
.areas-pager button {
  color: #ffffff;
  background:
    linear-gradient(135deg, var(--brand), #008892);
  border: 1px solid rgba(0, 159, 166, 0.70);
  box-shadow:
    0 10px 22px rgba(0, 159, 166, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.22);
}

button:hover,
.search-row button:hover,
.company-link:hover,
.empresas-pager button:hover,
.areas-pager button:hover {
  color: #ffffff;
  background:
    linear-gradient(135deg, #00aeb6, #007f89);
  border-color: rgba(0, 56, 92, 0.25);
  box-shadow:
    0 14px 28px rgba(0, 159, 166, 0.25),
    0 0 0 1px rgba(217, 169, 40, 0.14);
}

button:first-of-type,
.search-row button:first-of-type {
  color: #ffffff;
}

button:disabled,
.search-row button:disabled,
.empresas-pager button:disabled,
.areas-pager button:disabled {
  color: rgba(75, 91, 107, 0.72);
  background: #eef3f6;
  border-color: #dbe3e8;
  box-shadow: none;
}

/* Links e acoes secundarias */
a,
.company-link {
  color: var(--brand);
}

.company-link {
  color: #ffffff;
  text-decoration: none;
}

/* Status pills */
.status-pill {
  color: var(--confidential);
  background: rgba(0, 159, 166, 0.10);
  border: 1px solid rgba(0, 159, 166, 0.20);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.status-pill.is-active,
.status-pill.active,
.status-pill.success {
  color: #0f5f42;
  background: rgba(23, 138, 90, 0.12);
  border-color: rgba(23, 138, 90, 0.24);
}

.status-pill.is-inactive,
.status-pill.inactive,
.status-pill.warning,
.status-pill.neutral {
  color: #4b5b6b;
  background: #eef3f6;
  border-color: #d5dde4;
}

/* Tabelas, caso existam */
table {
  color: var(--text);
  background: #ffffff;
  border-color: var(--border);
}

thead,
th {
  color: #ffffff;
  background: linear-gradient(135deg, var(--brand), #008892);
}

td {
  border-color: var(--border);
}

/* Paginadores */
.empresas-pager,
.areas-pager {
  color: var(--text-muted);
}

.empresas-pager span,
.areas-pager span {
  color: var(--text-muted);
}

/* Neutralizacao especifica de residuos escuros F6-D3/F6-D7 */
.metric-grid,
.dashboard-grid,
.cards-grid {
  background: transparent;
}

.metric-card,
.company,
article.company.card,
.panel,
.card {
  border-color: var(--border) !important;
}

.metric-card:hover,
.company:hover,
article.company.card:hover,
.card:hover {
  border-color: rgba(0, 159, 166, 0.36) !important;
}

/* Responsividade preservada */
@media (max-width: 760px) {
  .sidebar {
    box-shadow: 0 10px 28px rgba(0, 47, 79, 0.18);
  }

  .topbar {
    background: rgba(255, 255, 255, 0.92);
  }

  .panel {
    box-shadow: 0 12px 30px rgba(7, 24, 45, 0.07);
  }
}

@media (max-width: 640px) {
  body {
    background:
      linear-gradient(180deg, #ffffff 0%, #f7f9fa 100%);
  }

  .company,
  article.company.card,
  .metric-card,
  .card {
    box-shadow: 0 8px 22px rgba(7, 24, 45, 0.07);
  }
}

/* F6-D7B-INSTITUCIONAL-FIM */

/* F6-D7C-CARDS-CLAROS-INICIO */
/* Correcao visual: cards quase brancos, sem overlay escuro, texto legivel */

/* Remove residuos escuros de overlays/gradientes anteriores */
.card::after,
.metric-card::after,
.company::after,
article.company.card::after,
.panel::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Mantem apenas o filete/acento visual, sem escurecer o card */
.card::before,
.metric-card::before {
  opacity: 1 !important;
  background: linear-gradient(180deg, #009fa6, #d9a928) !important;
}

/* Cards principais quase brancos */
.card,
.metric-card,
.company,
article.company.card {
  color: #07182d !important;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
  border: 1px solid #dde3e8 !important;
  border-left-color: rgba(0, 159, 166, 0.72) !important;
  box-shadow:
    0 8px 22px rgba(7, 24, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  filter: none !important;
  opacity: 1 !important;
}

/* Cards de metricas do dashboard */
.metric-card {
  min-height: 122px;
}

.metric-card:hover,
.card:hover,
.company:hover,
article.company.card:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eefafa 100%) !important;
  border-color: rgba(0, 159, 166, 0.34) !important;
  border-left-color: #d9a928 !important;
  box-shadow:
    0 12px 28px rgba(0, 56, 92, 0.11),
    0 0 0 1px rgba(0, 159, 166, 0.08) !important;
}

/* Tipografia legivel dentro dos cards */
.card *,
.metric-card *,
.company *,
article.company.card * {
  text-shadow: none !important;
}

.card-value,
.metric-value,
.metric-card .card-value,
.metric-card .metric-value {
  color: #d9a928 !important;
  font-weight: 800 !important;
}

.card-label,
.metric-label,
.metric-card .card-label,
.metric-card .metric-label,
.company-meta,
.company small,
article.company.card small {
  color: #4b5b6b !important;
}

.card strong,
.metric-card strong,
.company strong,
article.company.card strong,
.company-title,
.company-name {
  color: #07182d !important;
}

/* Textos auxiliares do dashboard que ficaram apagados */
.metric-card p,
.metric-card small,
.card p,
.card small {
  color: #4b5b6b !important;
  opacity: 1 !important;
}

/* Lista de empresas consideradas */
.company {
  background: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
}

.company:hover {
  background: linear-gradient(180deg, #ffffff 0%, #eefafa 100%) !important;
}

/* Paineis internos claros */
.panel,
.panel-section {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbfc 100%) !important;
  color: #07182d !important;
  border-color: #dde3e8 !important;
}

/* Botao Atualizar ficou apagado no print */
button,
.search-row button,
.company-link,
.empresas-pager button,
.areas-pager button {
  color: #ffffff !important;
  background: linear-gradient(135deg, #009fa6, #008892) !important;
  border-color: rgba(0, 159, 166, 0.65) !important;
}

/* Botoes desabilitados */
button:disabled,
.search-row button:disabled,
.empresas-pager button:disabled,
.areas-pager button:disabled {
  color: #4b5b6b !important;
  background: #eef3f6 !important;
  border-color: #d5dde4 !important;
}

/* Pills legiveis */
.status-pill {
  color: #00385c !important;
  background: rgba(0, 159, 166, 0.10) !important;
  border-color: rgba(0, 159, 166, 0.24) !important;
}

.status-pill.is-active,
.status-pill.active,
.status-pill.success {
  color: #0f5f42 !important;
  background: rgba(23, 138, 90, 0.13) !important;
  border-color: rgba(23, 138, 90, 0.26) !important;
}

.status-pill.is-inactive,
.status-pill.inactive,
.status-pill.neutral {
  color: #4b5b6b !important;
  background: #ffffff !important;
  border-color: #d5dde4 !important;
}

/* F6-D7C-CARDS-CLAROS-FIM */

/* F6-D7D-EMPRESAS-CARDS-CLAROS-INICIO */
/* Correcao especifica: lista de empresas consideradas clara e legivel */

/* Remove overlay/pseudo-elemento escuro residual dos cards de empresas */
.company::before,
.company::after,
.company-list .company::before,
.company-list .company::after,
article.company.card::before,
article.company.card::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Forca superficie clara nos cards inferiores de empresas */
.company-list .company,
.company,
article.company.card {
  position: relative !important;
  overflow: hidden !important;
  color: #07182d !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
  border: 1px solid #dde3e8 !important;
  border-left: 4px solid #009fa6 !important;
  box-shadow:
    0 8px 22px rgba(7, 24, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Hover claro e institucional */
.company-list .company:hover,
.company:hover,
article.company.card:hover {
  color: #07182d !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #eefafa 100%) !important;
  border-color: rgba(0, 159, 166, 0.34) !important;
  border-left-color: #d9a928 !important;
  box-shadow:
    0 12px 28px rgba(0, 56, 92, 0.11),
    0 0 0 1px rgba(0, 159, 166, 0.08) !important;
}

/* Garante que todo conteudo fique acima de qualquer residuo visual */
.company-list .company > *,
.company > *,
article.company.card > * {
  position: relative !important;
  z-index: 2 !important;
  color: inherit;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Textos da lista de empresas */
.company-list .company strong,
.company strong,
article.company.card strong,
.company-list .company h1,
.company-list .company h2,
.company-list .company h3,
.company-list .company h4,
.company-title,
.company-name {
  color: #07182d !important;
  opacity: 1 !important;
}

.company-list .company small,
.company small,
article.company.card small,
.company-meta,
.company-list .company .company-meta,
.company-list .company span,
.company-list .company p {
  color: #4b5b6b !important;
  opacity: 1 !important;
}

/* Valores importantes dentro dos cards de empresa */
.company-list .company b,
.company-list .company strong + span,
.company-list .company .value,
.company-list .company .count {
  color: #07182d !important;
  opacity: 1 !important;
}

/* Pills dentro dos cards inferiores */
.company-list .status-pill,
.company .status-pill,
article.company.card .status-pill {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.company-list .status-pill.is-active,
.company .status-pill.is-active,
.company-list .status-pill.active,
.company .status-pill.active,
.company-list .status-pill.success,
.company .status-pill.success {
  color: #0f5f42 !important;
  background: rgba(23, 138, 90, 0.13) !important;
  border-color: rgba(23, 138, 90, 0.26) !important;
}

.company-list .status-pill.is-inactive,
.company .status-pill.is-inactive,
.company-list .status-pill.inactive,
.company .status-pill.inactive,
.company-list .status-pill.neutral,
.company .status-pill.neutral {
  color: #4b5b6b !important;
  background: #ffffff !important;
  border-color: #d5dde4 !important;
}

/* F6-D7D-EMPRESAS-CARDS-CLAROS-FIM */

/* F6-D7E-COMPANY-CARD-DASHBOARD-CLARO-INICIO */
/* Correcao especifica: cards .company-card do dashboard em tema claro institucional */

/* Classe real usada na secao "Empresas consideradas nos indicadores" */
.company-card,
#dashboard-result .company-card {
  color: #07182d !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #fbfdfe 100%) !important;
  border: 1px solid #dde3e8 !important;
  border-left: 4px solid #009fa6 !important;
  border-radius: 18px !important;
  box-shadow:
    0 8px 22px rgba(7, 24, 45, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.98) !important;
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}

/* Neutraliza pseudo-elementos escuros residuais, mantendo apenas acento leve */
.company-card::after,
#dashboard-result .company-card::after {
  content: none !important;
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.company-card::before,
#dashboard-result .company-card::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 4px !important;
  height: auto !important;
  opacity: 1 !important;
  visibility: visible !important;
  background: linear-gradient(180deg, #009fa6, #d9a928) !important;
  box-shadow: none !important;
  filter: none !important;
}

/* Hover claro e institucional */
.company-card:hover,
#dashboard-result .company-card:hover {
  color: #07182d !important;
  background: #ffffff !important;
  background-image: linear-gradient(180deg, #ffffff 0%, #eefafa 100%) !important;
  border-color: rgba(0, 159, 166, 0.34) !important;
  border-left-color: #d9a928 !important;
  box-shadow:
    0 12px 28px rgba(0, 56, 92, 0.11),
    0 0 0 1px rgba(0, 159, 166, 0.08) !important;
}

/* Garante conteudo acima de qualquer residuo visual */
.company-card > *,
#dashboard-result .company-card > * {
  position: relative !important;
  z-index: 2 !important;
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
}

/* Titulos e textos dentro dos cards reais */
.company-card strong,
.company-card h1,
.company-card h2,
.company-card h3,
.company-card h4,
.company-card .company-title,
.company-card .company-name,
#dashboard-result .company-card strong,
#dashboard-result .company-card h1,
#dashboard-result .company-card h2,
#dashboard-result .company-card h3,
#dashboard-result .company-card h4,
#dashboard-result .company-card .company-title,
#dashboard-result .company-card .company-name {
  color: #07182d !important;
  opacity: 1 !important;
}

/* Linhas de detalhe do dashboard */
.company-card .detail-row,
#dashboard-result .company-card .detail-row {
  color: #4b5b6b !important;
  opacity: 1 !important;
  border-color: rgba(221, 227, 232, 0.78) !important;
}

.company-card .detail-row span,
.company-card .detail-row strong,
.company-card .detail-row b,
.company-card .detail-label,
.company-card .detail-value,
#dashboard-result .company-card .detail-row span,
#dashboard-result .company-card .detail-row strong,
#dashboard-result .company-card .detail-row b,
#dashboard-result .company-card .detail-label,
#dashboard-result .company-card .detail-value {
  color: #07182d !important;
  opacity: 1 !important;
}

/* Labels secundarios dentro dos detail-row */
.company-card .detail-row span:first-child,
#dashboard-result .company-card .detail-row span:first-child {
  color: #4b5b6b !important;
}

/* Pills dentro dos company-card reais */
.company-card .status-pill,
#dashboard-result .company-card .status-pill {
  opacity: 1 !important;
  filter: none !important;
  text-shadow: none !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
}

.company-card .status-pill.is-active,
.company-card .status-pill.active,
.company-card .status-pill.success,
#dashboard-result .company-card .status-pill.is-active,
#dashboard-result .company-card .status-pill.active,
#dashboard-result .company-card .status-pill.success {
  color: #0f5f42 !important;
  background: rgba(23, 138, 90, 0.13) !important;
  border-color: rgba(23, 138, 90, 0.26) !important;
}

.company-card .status-pill.is-inactive,
.company-card .status-pill.inactive,
.company-card .status-pill.neutral,
#dashboard-result .company-card .status-pill.is-inactive,
#dashboard-result .company-card .status-pill.inactive,
#dashboard-result .company-card .status-pill.neutral {
  color: #4b5b6b !important;
  background: #ffffff !important;
  border-color: #d5dde4 !important;
}

/* F6-D7E-COMPANY-CARD-DASHBOARD-CLARO-FIM */
/* F7-A6C-DENUNCIAS-TABELA-ADMIN-CSS-INICIO */
/* CSS-only. Escopo: view local/lab de denuncias ficticias. Sem backend, sem banco e sem dados reais. */

#panel:has([data-f7-a6b-denuncias-lista-compacta-v2="true"]) {
  max-width: 1060px;
  margin: 0 auto;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .section-header {
  margin-bottom: 12px;
  padding: 0 2px;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .eyebrow {
  color: #10795c;
  letter-spacing: .08em;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.2;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .section-description {
  margin: 6px 0 12px;
  color: #5e6d68;
  font-size: 12px;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 12px;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .metric-card {
  min-height: 72px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid #e2e8e6;
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(10, 31, 26, .08);
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .metric-value {
  display: block;
  margin-bottom: 5px;
  color: #005f80;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .metric-label {
  color: #556761;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(10, 31, 26, .08);
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table {
  width: 100%;
  min-width: 860px;
  border-collapse: separate;
  border-spacing: 0;
  color: #102a24;
  font-size: 12px;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table thead th {
  padding: 11px 12px;
  background: #f6f8f7;
  border-bottom: 1px solid #dfe7e4;
  color: #596c66;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid #e8eeee;
  color: #172f28;
  vertical-align: middle;
  white-space: nowrap;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table tbody tr:last-child td {
  border-bottom: 0;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table tbody tr:hover td {
  background: #f8fbfa;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table tbody td:first-child {
  font-weight: 800;
  color: #102a24;
}

[data-f7-a6b-denuncias-lista-compacta-v2="true"] .data-table .status-pill {
  display: inline-flex;
  align-items: center;
  min-height: 20px;
  padding: 3px 9px;
  border-radius: 999px;
  background: #e7f6ef;
  color: #0c7656;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
}

@media (max-width: 900px) {
  [data-f7-a6b-denuncias-lista-compacta-v2="true"] .metrics-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  #panel:has([data-f7-a6b-denuncias-lista-compacta-v2="true"]) {
    max-width: 100%;
  }

  [data-f7-a6b-denuncias-lista-compacta-v2="true"] .metrics-grid {
    grid-template-columns: 1fr;
  }

  [data-f7-a6b-denuncias-lista-compacta-v2="true"] .metric-card {
    min-height: 64px;
  }
}

/* F7-A6C-DENUNCIAS-TABELA-ADMIN-CSS-FIM */
/* F7-A6D-DENUNCIAS-ADMIN-ANTIGO-LAYOUT-INICIO */
/* Ajuste visual local/lab. Aproxima denuncias ficticias do layout administrativo antigo. */

/* Topbar visual sem mexer em index.html: a sidebar passa a se comportar como menu superior. */
body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) {
  background: #f3f6f5;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) .app {
  display: block;
  min-height: 100vh;
  background: #f3f6f5;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) .content {
  padding: 0;
  min-height: calc(100vh - 44px);
  background: #f3f6f5;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) .topbar {
  display: none;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) .scope-note {
  display: none;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) #panel {
  max-width: 1060px;
  margin: 0 auto;
  padding: 18px 18px 48px;
}

body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) .content-footer {
  display: none;
}

[data-f7-a6d-denuncias-admin-antigo-layout="true"] {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

[data-f7-a6d-denuncias-admin-antigo-layout="true"] .section-header {
  display: none;
}

.denuncias-admin-shell {
  width: 100%;
}

.denuncias-admin-metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.denuncias-admin-metric {
  min-height: 58px;
  padding: 12px 14px;
  background: #ffffff;
  border: 1px solid #dfe7e4;
  border-radius: 10px;
  box-shadow: 0 8px 18px rgba(15, 31, 28, .08);
}

.denuncias-admin-metric-value {
  display: block;
  margin-bottom: 5px;
  font-size: 24px;
  line-height: 1;
  font-weight: 800;
}

.denuncias-admin-metric-label {
  display: block;
  color: #687872;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.metric-blue { color: #0b68b8; }
.metric-red { color: #d95735; }
.metric-orange { color: #f39b23; }
.metric-purple { color: #5b50c8; }

.denuncias-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.denuncias-admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 25px;
  padding: 6px 10px;
  border: 1px solid #e1e8e6;
  border-radius: 8px;
  background: #ffffff;
  color: #34423f;
  font-size: 11px;
  font-weight: 700;
  cursor: default;
}

.denuncias-admin-tab strong {
  min-width: 18px;
  height: 16px;
  padding: 2px 5px;
  border-radius: 999px;
  background: #eef2f1;
  color: #697772;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.denuncias-admin-tab.is-active {
  background: #10231d;
  color: #ffffff;
  border-color: #10231d;
}

.denuncias-admin-filters {
  display: grid;
  grid-template-columns: minmax(190px, 1.2fr) minmax(140px, .8fr) minmax(120px, .7fr) minmax(150px, .8fr) 128px 128px auto auto auto;
  gap: 8px;
  align-items: center;
  margin-bottom: 10px;
}

.denuncias-admin-filters .input {
  min-height: 32px;
  padding: 7px 10px;
  border-radius: 7px;
  border: 1px solid #dfe7e4;
  background: #ffffff;
  color: #23342f;
  font-size: 11px;
}

.denuncias-admin-filters .button {
  min-height: 32px;
  padding: 7px 11px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.denuncias-admin-table-wrap {
  overflow-x: auto;
  background: #ffffff;
  border: 1px solid #dce5e2;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 31, 28, .08);
}

.denuncias-admin-table {
  width: 100%;
  min-width: 930px;
  border-collapse: collapse;
  color: #172c27;
  font-size: 11px;
}

.denuncias-admin-table thead th {
  height: 34px;
  padding: 8px 10px;
  background: #f7f9f8;
  border-bottom: 1px solid #dfe7e4;
  color: #61716c;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .07em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

.denuncias-admin-table tbody td {
  height: 34px;
  padding: 7px 10px;
  border-bottom: 1px solid #e7eeee;
  color: #1a302b;
  vertical-align: middle;
  white-space: nowrap;
}

.denuncias-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.denuncias-admin-table tbody tr:hover td {
  background: #f8fbfa;
}

.denuncias-admin-protocolo {
  color: #0f2520;
  font-weight: 900;
  font-size: 10px;
}

.denuncias-admin-inline-tags {
  display: inline-flex;
  gap: 4px;
  margin-left: 6px;
  vertical-align: middle;
}

.denuncias-admin-mini-tag {
  display: inline-flex;
  align-items: center;
  padding: 2px 5px;
  border-radius: 999px;
  background: #eef0ff;
  color: #4947a8;
  font-size: 9px;
  font-weight: 800;
}

.denuncias-admin-pill {
  display: inline-flex;
  align-items: center;
  min-height: 18px;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  white-space: nowrap;
}

.gravidade-alta { background: #fff0dc; color: #a65d00; }
.gravidade-media { background: #e8f7ef; color: #0f7d58; }
.gravidade-critica { background: #ffe5e3; color: #bd382f; }

.prazo-vencido { background: #ffe5e3; color: #bd382f; }
.prazo-neutro { background: #eef2f1; color: #61716c; }

.status-respondido { background: #ddf7ef; color: #0c7656; }
.status-rh { background: #fff0dc; color: #a65d00; }
.status-descartado { background: #eceff1; color: #65736e; }

.denuncias-admin-note {
  margin: 10px 2px 0;
  color: #74827d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .06em;
}

@media (max-width: 1180px) {
  .denuncias-admin-filters {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .denuncias-admin-metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) #panel {
    padding: 12px;
  }

  .denuncias-admin-metrics,
  .denuncias-admin-filters {
    grid-template-columns: 1fr;
  }
}

/* F7-A6D-DENUNCIAS-ADMIN-ANTIGO-LAYOUT-FIM */
/* F7-A6E1-TOPMENU-INICIO */
/* CSS-only: transforma a navegacao lateral em menu superior horizontal sem editar index.html. */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.sidebar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 22px;
  width: 100%;
  height: auto;
  min-height: 56px;
  padding: 8px 22px;
  border-right: 0;
  border-bottom: 1px solid rgba(0, 56, 92, 0.20);
  background: linear-gradient(90deg, #00385c, #002f4f);
  box-shadow: 0 2px 10px rgba(7, 24, 45, 0.12);
  flex-wrap: wrap;
}

.sidebar .brand {
  margin: 0;
  gap: 10px;
  flex: 0 0 auto;
}

.sidebar .brand-text strong {
  color: #ffffff;
}

.sidebar .brand-sub,
.sidebar .brand-text span {
  color: #9fc7d6;
}

.sidebar .brand-mark {
  background: #009fa6;
  color: #ffffff;
  border: 0;
  border-radius: 8px;
}

.sidebar .nav {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  margin: 0;
  flex: 1 1 auto;
}

.sidebar .nav-item {
  width: auto;
  min-height: 32px;
  border-left: 0;
  border-bottom: 2px solid transparent;
  border-radius: 6px;
  padding: 8px 14px;
  color: #d6e6ee;
  background: transparent;
  font-weight: 600;
  white-space: nowrap;
}

.sidebar .nav-item:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  transform: none;
}

.sidebar .nav-item.is-active {
  background: rgba(31, 157, 87, 0.18);
  color: #ffffff;
  border-bottom-color: #1f9d57;
  box-shadow: none;
}

.sidebar .sidebar-footer {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-top: 0;
  margin-left: auto;
  align-items: center;
  flex: 0 0 auto;
}

.content {
  width: 100%;
  min-width: 0;
}

@media (max-width: 760px) {
  .sidebar {
    align-items: flex-start;
    gap: 12px;
    padding: 8px 12px;
  }

  .sidebar .nav {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .sidebar .sidebar-footer {
    margin-left: 0;
  }
}

/* F7-A6E1-TOPMENU-FIM */

/* F7-VISUAL-ADMIN-ANTIGO-INICIO
   Objetivo: aproximar visualmente o sistema novo local/lab do painel admin antigo.
   Escopo: CSS-only, frontend-only, dados ficticios, sem backend, sem producao.
*/

:root {
  --f7-bg: #eef2f7;
  --f7-surface: #ffffff;
  --f7-surface-soft: #f8fafc;
  --f7-border: rgba(15, 23, 42, 0.10);
  --f7-border-strong: rgba(15, 23, 42, 0.16);
  --f7-text: #0f172a;
  --f7-muted: #64748b;
  --f7-blue: #2563eb;
  --f7-blue-dark: #1d4ed8;
  --f7-blue-soft: #dbeafe;
  --f7-gold: #b68a2c;
  --f7-green: #16a34a;
  --f7-green-soft: #dcfce7;
  --f7-red: #dc2626;
  --f7-red-soft: #fee2e2;
  --f7-orange: #ea580c;
  --f7-orange-soft: #ffedd5;
  --f7-violet: #7c3aed;
  --f7-violet-soft: #ede9fe;
  --f7-shadow: 0 18px 45px rgba(15, 23, 42, 0.10);
  --f7-shadow-soft: 0 10px 28px rgba(15, 23, 42, 0.08);
  --f7-radius-lg: 22px;
  --f7-radius-md: 16px;
  --f7-radius-sm: 999px;
}

/* Base clara/institucional parecida com admin antigo */
body {
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.10), transparent 34rem),
    linear-gradient(180deg, #f8fafc 0%, var(--f7-bg) 100%) !important;
  color: var(--f7-text) !important;
}

/* Top menu mais parecido com painel admin antigo */
.app-shell,
.layout,
.main-shell {
  background: transparent !important;
}

.sidebar,
.topbar,
header,
.app-header {
  box-shadow: var(--f7-shadow-soft);
}

.nav,
.sidebar .nav {
  gap: 8px !important;
}

.nav-item,
.nav a,
.sidebar a,
button.nav-item {
  border-radius: var(--f7-radius-sm) !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease, color 160ms ease, border-color 160ms ease;
}

.nav-item:hover,
.nav a:hover,
.sidebar a:hover {
  transform: translateY(-1px);
}

.nav-item.is-active,
.nav a.is-active,
.sidebar a.is-active,
.nav-item[aria-current="page"] {
  background: linear-gradient(135deg, var(--f7-blue), var(--f7-blue-dark)) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  box-shadow: 0 12px 26px rgba(37, 99, 235, 0.28);
}

/* Area principal */
main,
.content,
.main-content,
#panel {
  color: var(--f7-text);
}

/* Cabecalhos de secao */
.section-header,
.denuncias-admin-header,
.page-header {
  margin-bottom: 18px !important;
}

.section-header h1,
.denuncias-admin-header h1,
.page-header h1,
#view-title {
  color: var(--f7-text) !important;
  font-size: clamp(1.55rem, 2.2vw, 2.15rem) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em;
}

.section-description,
.denuncias-admin-header p,
.page-header p {
  color: var(--f7-muted) !important;
  font-size: 0.96rem !important;
}

/* Dashboard simples */
.dashboard-screen {
  max-width: 1280px;
  margin: 0 auto;
}

.dashboard-grid,
.panel-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-card,
.card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--f7-text) !important;
  border: 1px solid var(--f7-border) !important;
  border-radius: var(--f7-radius-lg) !important;
  box-shadow: var(--f7-shadow-soft) !important;
  padding: 20px !important;
  position: relative;
  overflow: hidden;
}

.dashboard-card::before,
.card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--f7-blue), var(--f7-gold));
  opacity: 0.95;
}

.card-value {
  color: var(--f7-blue-dark) !important;
  font-size: clamp(1.75rem, 3vw, 2.45rem) !important;
  font-weight: 850 !important;
  line-height: 1;
  letter-spacing: -0.055em;
}

.card-label {
  color: var(--f7-muted) !important;
  margin-top: 8px;
  font-size: 0.86rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

/* Tela Denuncias/Protocolos */
.denuncias-admin-screen {
  max-width: 1320px;
  margin: 0 auto;
  color: var(--f7-text);
}

.denuncias-admin-screen * {
  box-sizing: border-box;
}

.denuncias-admin-screen h1 {
  color: var(--f7-text) !important;
  font-weight: 850 !important;
  letter-spacing: -0.045em;
}

/* Cards de metricas estilo admin antigo */
.denuncias-admin-metrics,
.denuncias-metrics,
.metrics-grid,
.stats-grid,
#stats {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px !important;
  margin: 18px 0 16px !important;
}

.denuncias-admin-metrics > *,
.denuncias-metrics > *,
.metrics-grid > *,
.stats-grid > *,
#stats > * {
  background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%) !important;
  color: var(--f7-text) !important;
  border: 1px solid var(--f7-border) !important;
  border-radius: 18px !important;
  box-shadow: var(--f7-shadow-soft) !important;
  padding: 16px 16px 15px !important;
  min-height: 96px;
  position: relative;
  overflow: hidden;
}

.denuncias-admin-metrics > *::before,
.denuncias-metrics > *::before,
.metrics-grid > *::before,
.stats-grid > *::before,
#stats > *::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 4px;
  border-radius: 999px;
  background: var(--f7-blue);
}

.denuncias-admin-metrics > *:nth-child(1)::before,
.denuncias-metrics > *:nth-child(1)::before,
#stats > *:nth-child(1)::before {
  background: var(--f7-blue);
}

.denuncias-admin-metrics > *:nth-child(2)::before,
.denuncias-metrics > *:nth-child(2)::before,
#stats > *:nth-child(2)::before {
  background: var(--f7-green);
}

.denuncias-admin-metrics > *:nth-child(3)::before,
.denuncias-metrics > *:nth-child(3)::before,
#stats > *:nth-child(3)::before {
  background: var(--f7-orange);
}

.denuncias-admin-metrics > *:nth-child(4)::before,
.denuncias-metrics > *:nth-child(4)::before,
#stats > *:nth-child(4)::before {
  background: var(--f7-red);
}

.denuncias-admin-metrics > *:nth-child(5)::before,
.denuncias-metrics > *:nth-child(5)::before,
#stats > *:nth-child(5)::before {
  background: var(--f7-violet);
}

.denuncias-admin-metrics strong,
.denuncias-admin-metrics b,
.denuncias-metrics strong,
.denuncias-metrics b,
.metric-value,
.stat-value,
.kpi-value {
  color: var(--f7-text) !important;
  font-size: 1.72rem !important;
  font-weight: 850 !important;
  letter-spacing: -0.04em;
}

.denuncias-admin-metrics span,
.denuncias-admin-metrics small,
.denuncias-metrics span,
.denuncias-metrics small,
.metric-label,
.stat-label,
.kpi-label {
  color: var(--f7-muted) !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  text-transform: uppercase;
  letter-spacing: 0.055em;
}

/* Chips/tabs superiores */
.denuncias-admin-tabs,
.denuncias-tabs,
.view-tabs,
#views {
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 9px !important;
  margin: 16px 0 !important;
}

.denuncias-admin-tabs button,
.denuncias-tabs button,
.view-tab,
#views button,
.tab-chip {
  appearance: none;
  border: 1px solid var(--f7-border) !important;
  background: #ffffff !important;
  color: var(--f7-text) !important;
  border-radius: var(--f7-radius-sm) !important;
  padding: 10px 13px !important;
  font-weight: 800 !important;
  font-size: 0.84rem !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  cursor: pointer;
}

.denuncias-admin-tabs button::before,
.denuncias-tabs button::before,
.view-tab::before,
#views button::before,
.tab-chip::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--f7-blue);
  box-shadow: 0 0 0 4px var(--f7-blue-soft);
  flex: 0 0 auto;
}

.denuncias-admin-tabs button:nth-child(2)::before,
.denuncias-tabs button:nth-child(2)::before,
.view-tab:nth-child(2)::before,
#views button:nth-child(2)::before {
  background: var(--f7-green);
  box-shadow: 0 0 0 4px var(--f7-green-soft);
}

.denuncias-admin-tabs button:nth-child(3)::before,
.denuncias-tabs button:nth-child(3)::before,
.view-tab:nth-child(3)::before,
#views button:nth-child(3)::before {
  background: var(--f7-blue);
  box-shadow: 0 0 0 4px var(--f7-blue-soft);
}

.denuncias-admin-tabs button:nth-child(4)::before,
.denuncias-tabs button:nth-child(4)::before,
.view-tab:nth-child(4)::before,
#views button:nth-child(4)::before {
  background: var(--f7-orange);
  box-shadow: 0 0 0 4px var(--f7-orange-soft);
}

.denuncias-admin-tabs button:nth-child(5)::before,
.denuncias-tabs button:nth-child(5)::before,
.view-tab:nth-child(5)::before,
#views button:nth-child(5)::before {
  background: var(--f7-red);
  box-shadow: 0 0 0 4px var(--f7-red-soft);
}

.denuncias-admin-tabs button:nth-child(6)::before,
.denuncias-tabs button:nth-child(6)::before,
.view-tab:nth-child(6)::before,
#views button:nth-child(6)::before {
  background: var(--f7-violet);
  box-shadow: 0 0 0 4px var(--f7-violet-soft);
}

.denuncias-admin-tabs button.active,
.denuncias-admin-tabs button.is-active,
.denuncias-tabs button.active,
.denuncias-tabs button.is-active,
.view-tab.active,
.view-tab.is-active,
#views button.active,
#views button.is-active,
.tab-chip.active,
.tab-chip.is-active {
  color: #ffffff !important;
  background: linear-gradient(135deg, #0f172a, #1e3a8a) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
}

/* Contadores dentro dos chips */
.denuncias-admin-tabs .cnt,
.denuncias-tabs .cnt,
.view-tab .cnt,
#views .cnt {
  min-width: 23px;
  height: 23px;
  border-radius: 999px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.08);
  color: inherit;
  font-size: 0.76rem;
  font-weight: 900;
}

/* Filtros estilo admin antigo */
.denuncias-admin-filters,
.denuncias-filters,
.toolbar,
.filters-row {
  background: rgba(255, 255, 255, 0.88) !important;
  border: 1px solid var(--f7-border) !important;
  border-radius: var(--f7-radius-lg) !important;
  box-shadow: var(--f7-shadow-soft) !important;
  padding: 14px !important;
  margin: 14px 0 16px !important;
  display: flex !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px !important;
}

.denuncias-admin-filters input,
.denuncias-admin-filters select,
.denuncias-filters input,
.denuncias-filters select,
.toolbar input,
.toolbar select,
.filters-row input,
.filters-row select,
.search,
.filter {
  min-height: 40px;
  border-radius: 13px !important;
  border: 1px solid var(--f7-border-strong) !important;
  background: #ffffff !important;
  color: var(--f7-text) !important;
  padding: 0 12px !important;
  font-weight: 650;
  outline: none;
}

.denuncias-admin-filters input:focus,
.denuncias-admin-filters select:focus,
.denuncias-filters input:focus,
.denuncias-filters select:focus,
.toolbar input:focus,
.toolbar select:focus,
.filters-row input:focus,
.filters-row select:focus {
  border-color: rgba(37, 99, 235, 0.55) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

/* Painel e tabela principal */
.denuncias-admin-table,
.denuncias-table,
.table-wrap,
.panel,
.data-panel {
  background: #ffffff !important;
  border: 1px solid var(--f7-border) !important;
  border-radius: var(--f7-radius-lg) !important;
  box-shadow: var(--f7-shadow) !important;
  overflow: hidden !important;
}

.denuncias-admin-table table,
.denuncias-table table,
.table-wrap table,
.panel table,
table {
  width: 100%;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: var(--f7-text) !important;
}

.denuncias-admin-table thead th,
.denuncias-table thead th,
.table-wrap thead th,
.panel thead th,
thead th {
  background: linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
  color: #475569 !important;
  border-bottom: 1px solid var(--f7-border) !important;
  font-size: 0.72rem !important;
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 13px 14px !important;
  white-space: nowrap;
}

.denuncias-admin-table tbody td,
.denuncias-table tbody td,
.table-wrap tbody td,
.panel tbody td,
tbody td {
  background: #ffffff !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  color: var(--f7-text) !important;
  padding: 13px 14px !important;
  vertical-align: middle;
  font-size: 0.9rem;
}

.denuncias-admin-table tbody tr,
.denuncias-table tbody tr,
.table-wrap tbody tr,
.panel tbody tr,
tbody tr {
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}

.denuncias-admin-table tbody tr:hover td,
.denuncias-table tbody tr:hover td,
.table-wrap tbody tr:hover td,
.panel tbody tr:hover td,
tbody tr:hover td {
  background: #f8fafc !important;
}

/* Protocolo e empresa */
.proto,
.protocol,
.protocolo,
.denuncia-protocolo {
  color: var(--f7-blue-dark) !important;
  font-weight: 900 !important;
  letter-spacing: -0.015em;
}

.emp,
.company,
.empresa,
.denuncia-empresa {
  color: var(--f7-muted) !important;
  font-weight: 750 !important;
}

/* Badges, pills e status */
.badge,
.tag,
.pill,
.status-pill,
.sla-pill,
[class*="gravidade"],
[class*="status"],
[class*="prazo"] {
  border-radius: var(--f7-radius-sm) !important;
  font-weight: 850 !important;
  letter-spacing: 0.01em;
}

.badge,
.tag,
.pill,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 26px;
  padding: 5px 10px !important;
  font-size: 0.76rem !important;
  border: 1px solid var(--f7-border);
  background: #f8fafc;
  color: var(--f7-text);
}

.status-aberto,
.status-em-aberto,
.badge-aberto,
.pill-aberto {
  background: var(--f7-green-soft) !important;
  color: #166534 !important;
  border-color: rgba(22, 163, 74, 0.22) !important;
}

.status-pendente,
.status-sla,
.prazo-pendente,
.sla-pill,
.badge-pendente {
  background: var(--f7-orange-soft) !important;
  color: #9a3412 !important;
  border-color: rgba(234, 88, 12, 0.24) !important;
}

.status-urgente,
.gravidade-urgente,
.badge-urgente,
.pill-urgente {
  background: var(--f7-red-soft) !important;
  color: #991b1b !important;
  border-color: rgba(220, 38, 38, 0.22) !important;
}

.status-retorno,
.badge-retorno,
.pill-retorno {
  background: var(--f7-violet-soft) !important;
  color: #5b21b6 !important;
  border-color: rgba(124, 58, 237, 0.22) !important;
}

.status-nao-lido,
.badge-nao-lido,
.pill-nao-lido {
  background: var(--f7-blue-soft) !important;
  color: #1d4ed8 !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
}

/* Botoes */
button,
.btn,
.button {
  border-radius: 13px !important;
  font-weight: 800 !important;
}

.btn-primary,
button.primary,
button[data-action="primary"] {
  background: linear-gradient(135deg, var(--f7-blue), var(--f7-blue-dark)) !important;
  color: #ffffff !important;
  border-color: transparent !important;
  box-shadow: 0 12px 24px rgba(37, 99, 235, 0.22);
}

button:hover,
.btn:hover {
  transform: translateY(-1px);
}

/* Empresas e Areas, para nao ficarem destoantes */
.company-card,
.area-card,
.list-card {
  background: #ffffff !important;
  border: 1px solid var(--f7-border) !important;
  border-radius: var(--f7-radius-lg) !important;
  box-shadow: var(--f7-shadow-soft) !important;
}

.company-meta,
.area-meta {
  color: var(--f7-muted) !important;
}

/* Responsividade */
@media (max-width: 1100px) {
  .denuncias-admin-metrics,
  .denuncias-metrics,
  .metrics-grid,
  .stats-grid,
  #stats,
  .dashboard-grid,
  .panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .denuncias-admin-screen,
  .dashboard-screen {
    max-width: 100%;
  }

  .denuncias-admin-metrics,
  .denuncias-metrics,
  .metrics-grid,
  .stats-grid,
  #stats,
  .dashboard-grid,
  .panel-grid {
    grid-template-columns: 1fr !important;
  }

  .denuncias-admin-filters,
  .denuncias-filters,
  .toolbar,
  .filters-row {
    align-items: stretch;
  }

  .denuncias-admin-filters input,
  .denuncias-admin-filters select,
  .denuncias-filters input,
  .denuncias-filters select,
  .toolbar input,
  .toolbar select,
  .filters-row input,
  .filters-row select {
    width: 100%;
  }

  .denuncias-admin-table,
  .denuncias-table,
  .table-wrap,
  .panel,
  .data-panel {
    overflow-x: auto !important;
  }

  table {
    min-width: 760px;
  }
}

/* F7-VISUAL-ADMIN-ANTIGO-FIM */

/* F7-DENUNCIAS-HOVER-CLICK-CSS-INICIO */
.denuncias-admin-metric,
.denuncias-admin-tab {
  cursor: pointer !important;
  user-select: none;
}

.denuncias-admin-metric {
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, background 160ms ease !important;
}

.denuncias-admin-metric:hover {
  transform: translateY(-3px) !important;
  border-color: rgba(22, 163, 74, 0.55) !important;
  box-shadow: 0 20px 42px rgba(15, 23, 42, 0.16) !important;
}

.denuncias-admin-metric.is-active,
.denuncias-admin-metric[data-active="true"] {
  border-color: rgba(37, 99, 235, 0.65) !important;
  box-shadow: 0 20px 42px rgba(37, 99, 235, 0.16), inset 0 0 0 1px rgba(37, 99, 235, 0.18) !important;
}

.denuncias-admin-tab {
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease, background 140ms ease, color 140ms ease !important;
}

.denuncias-admin-tab:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(37, 99, 235, 0.42) !important;
  box-shadow: 0 14px 28px rgba(15, 23, 42, 0.12) !important;
}

.denuncias-admin-tab.is-active {
  background: linear-gradient(135deg, #0f172a, #1e3a8a) !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.20) !important;
}

.denuncias-admin-table tbody tr:hover td {
  background: #f1f5f9 !important;
}

.denuncias-admin-filtered-empty {
  padding: 20px !important;
  color: #64748b !important;
  font-weight: 700 !important;
  text-align: center !important;
}
/* F7-DENUNCIAS-HOVER-CLICK-CSS-FIM */

/* F7-DENUNCIAS-TABLE-UX-CSS-INICIO
   Escopo: corrigir checkbox, selecao geral e cabecalhos ordenaveis da tabela Denuncias.
*/

.denuncias-admin-table th,
.denuncias-admin-table td {
  line-height: 1.35 !important;
}

.denuncias-admin-table th:first-child,
.denuncias-admin-table td:first-child {
  width: 44px !important;
  min-width: 44px !important;
  max-width: 44px !important;
  text-align: center !important;
  vertical-align: middle !important;
  padding-left: 12px !important;
  padding-right: 12px !important;
}

.denuncias-admin-table input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-block !important;
  vertical-align: middle !important;
  accent-color: #2563eb;
  cursor: pointer;
  transform: none !important;
  position: static !important;
}

.denuncias-admin-table thead th {
  position: relative;
}

.denuncias-admin-table thead th:not(:first-child) {
  cursor: pointer !important;
  user-select: none !important;
}

.denuncias-admin-table thead th:not(:first-child):hover {
  color: #1d4ed8 !important;
  background: linear-gradient(180deg, #eff6ff 0%, #e0ecff 100%) !important;
}

.denuncias-admin-table thead th[data-sort-active="true"] {
  color: #1d4ed8 !important;
}

.denuncias-admin-table thead th[data-sort-active="true"]::after {
  content: attr(data-sort-icon);
  display: inline-block;
  margin-left: 7px;
  font-size: 0.75rem;
  color: #2563eb;
}

.denuncias-admin-table tbody tr.is-selected td {
  background: #eff6ff !important;
}

.denuncias-admin-table tbody tr[hidden],
.denuncias-admin-table tbody tr[style*="display: none"] {
  display: none !important;
}

/* F7-DENUNCIAS-TABLE-UX-CSS-FIM */

/* F7-DENUNCIAS-FINO-CHECKBOX-CANTO-CSS-INICIO
   Escopo: acabamento fino da tabela de Denuncias:
   - corrigir a linha/separacao visual da coluna do checkbox
   - arredondar corretamente o canto superior esquerdo da tabela
*/

.denuncias-admin-table,
.denuncias-table,
.table-wrap,
.panel,
.data-panel {
  overflow: hidden !important;
  border-radius: 22px !important;
}

.denuncias-admin-table table,
.denuncias-table table,
.table-wrap table,
.panel table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

.denuncias-admin-table thead th:first-child,
.denuncias-table thead th:first-child,
.table-wrap thead th:first-child,
.panel thead th:first-child {
  border-top-left-radius: 22px !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
}

.denuncias-admin-table thead th:last-child,
.denuncias-table thead th:last-child,
.table-wrap thead th:last-child,
.panel thead th:last-child {
  border-top-right-radius: 22px !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
}

/* reforca o desenho da primeira coluna (checkbox) */
.denuncias-admin-table tbody td:first-child,
.denuncias-table tbody td:first-child,
.table-wrap tbody td:first-child,
.panel tbody td:first-child {
  position: relative !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  background-clip: padding-box !important;
}

/* cria a linha horizontal visual no topo de cada celula da coluna checkbox */
.denuncias-admin-table tbody td:first-child::before,
.denuncias-table tbody td:first-child::before,
.table-wrap tbody td:first-child::before,
.panel tbody td:first-child::before {
  content: "";
  position: absolute;
  top: 0;
  left: 10px;
  right: 10px;
  height: 1px;
  background: rgba(15, 23, 42, 0.07);
  pointer-events: none;
}

/* evita dupla linha na primeira linha logo abaixo do header */
.denuncias-admin-table tbody tr:first-child td:first-child::before,
.denuncias-table tbody tr:first-child td:first-child::before,
.table-wrap tbody tr:first-child td:first-child::before,
.panel tbody tr:first-child td:first-child::before {
  display: none;
}

/* arredondamento visual tambem no rodape da tabela, se necessario */
.denuncias-admin-table tbody tr:last-child td:first-child,
.denuncias-table tbody tr:last-child td:first-child,
.table-wrap tbody tr:last-child td:first-child,
.panel tbody tr:last-child td:first-child {
  border-bottom-left-radius: 22px !important;
}

.denuncias-admin-table tbody tr:last-child td:last-child,
.denuncias-table tbody tr:last-child td:last-child,
.table-wrap tbody tr:last-child td:last-child,
.panel tbody tr:last-child td:last-child {
  border-bottom-right-radius: 22px !important;
}

/* F7-DENUNCIAS-FINO-CHECKBOX-CANTO-CSS-FIM */

/* F7-DENUNCIAS-TABLE-FINO-RESPONSIVO-INICIO
   Escopo:
   - corrigir checkbox visualmente cortado
   - eliminar quina quadrada superior esquerda
   - expandir tabela em tela cheia sem barra horizontal desnecessaria
   - manter responsivo em telas menores
*/

/* O painel de denuncias deve ocupar melhor a tela cheia */
.denuncias-admin-screen {
  width: 100% !important;
  max-width: none !important;
}

/* Container da tabela com cantos realmente arredondados */
.denuncias-admin-table {
  width: 100% !important;
  max-width: 100% !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
}

/* Remove a necessidade de barra horizontal em desktop */
.denuncias-admin-table table {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  table-layout: fixed !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Larguras proporcionais para caber na tela */
.denuncias-admin-table th:nth-child(1),
.denuncias-admin-table td:nth-child(1) {
  width: 46px !important;
  min-width: 46px !important;
  max-width: 46px !important;
}

.denuncias-admin-table th:nth-child(2),
.denuncias-admin-table td:nth-child(2) {
  width: 185px !important;
}

.denuncias-admin-table th:nth-child(3),
.denuncias-admin-table td:nth-child(3) {
  width: 92px !important;
}

.denuncias-admin-table th:nth-child(4),
.denuncias-admin-table td:nth-child(4) {
  width: 105px !important;
}

.denuncias-admin-table th:nth-child(5),
.denuncias-admin-table td:nth-child(5) {
  width: auto !important;
}

.denuncias-admin-table th:nth-child(6),
.denuncias-admin-table td:nth-child(6) {
  width: 104px !important;
}

.denuncias-admin-table th:nth-child(7),
.denuncias-admin-table td:nth-child(7) {
  width: 112px !important;
}

.denuncias-admin-table th:nth-child(8),
.denuncias-admin-table td:nth-child(8) {
  width: 170px !important;
}

/* Canto superior esquerdo sem ponta quadrada */
.denuncias-admin-table thead th:first-child {
  border-top-left-radius: 20px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

.denuncias-admin-table thead th:last-child {
  border-top-right-radius: 20px !important;
  overflow: hidden !important;
  background-clip: padding-box !important;
}

/* Garante que nenhuma celula pinte por fora do raio */
.denuncias-admin-table thead,
.denuncias-admin-table tbody,
.denuncias-admin-table tr,
.denuncias-admin-table th,
.denuncias-admin-table td {
  background-clip: padding-box !important;
}

/* Corrige separacao horizontal da coluna checkbox */
.denuncias-admin-table tbody td:first-child {
  border-top: 1px solid rgba(15, 23, 42, 0.07) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: inset 0 1px 0 rgba(15, 23, 42, 0.07) !important;
}

/* Primeira linha nao precisa de linha dupla contra o header */
.denuncias-admin-table tbody tr:first-child td:first-child {
  border-top: 0 !important;
  box-shadow: none !important;
}

/* Checkbox redesenhado para nao depender do desenho nativo cortado */
.denuncias-admin-table input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  display: inline-grid !important;
  place-content: center !important;
  vertical-align: middle !important;
  border: 1.5px solid #94a3b8 !important;
  border-radius: 3px !important;
  background: #ffffff !important;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.75) !important;
  cursor: pointer !important;
  position: static !important;
  transform: none !important;
}

.denuncias-admin-table input[type="checkbox"]:hover {
  border-color: #2563eb !important;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12) !important;
}

.denuncias-admin-table input[type="checkbox"]:checked {
  border-color: #2563eb !important;
  background: #2563eb !important;
}

.denuncias-admin-table input[type="checkbox"]:checked::after {
  content: "";
  width: 8px;
  height: 5px;
  border-left: 2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translate(1px, -1px);
}

/* Textos longos nao devem estourar a tabela */
.denuncias-admin-table th,
.denuncias-admin-table td {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.denuncias-admin-table td {
  white-space: nowrap !important;
}

.denuncias-admin-table td:nth-child(5) {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

/* Badges longos, principalmente status, precisam caber dentro da coluna */
.denuncias-admin-table .badge,
.denuncias-admin-table .tag,
.denuncias-admin-table .pill,
.denuncias-admin-table .status-pill,
.denuncias-admin-table .sla-pill,
.denuncias-admin-table .denuncias-admin-mini-tag,
.denuncias-admin-table [class*="status"],
.denuncias-admin-table [class*="prazo"],
.denuncias-admin-table [class*="gravidade"] {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Remove barra horizontal artificial em desktop */
.denuncias-admin-table,
.denuncias-table,
.table-wrap {
  overflow-x: hidden !important;
}

/* Em telas menores, ai sim permite scroll horizontal */
@media (max-width: 980px) {
  .denuncias-admin-table,
  .denuncias-table,
  .table-wrap {
    overflow-x: auto !important;
  }

  .denuncias-admin-table table {
    min-width: 860px !important;
    table-layout: auto !important;
  }
}

/* F7-DENUNCIAS-TABLE-FINO-RESPONSIVO-FIM */

/* F7-DENUNCIAS-REMOVE-LINHA-FUNDO-TABELA-INICIO
   Escopo: remover linha/borda quadrada aparente atras da tabela de protocolos.
*/

/* Remove contorno herdado do wrapper/painel que aparece atras do canto arredondado */
.denuncias-admin-screen .denuncias-admin-table,
.denuncias-admin-screen .table-wrap,
.denuncias-admin-screen .panel,
.denuncias-admin-screen .data-panel {
  outline: none !important;
  border-radius: 20px !important;
  background-clip: padding-box !important;
}

/* A tabela vira o unico bloco visual; evita borda dupla entre wrapper e table */
.denuncias-admin-screen .denuncias-admin-table {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
}

/* Mascara qualquer linha quadrada residual no canto superior esquerdo */
.denuncias-admin-screen .denuncias-admin-table::before {
  content: "";
  position: absolute;
  z-index: 3;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top-left-radius: 20px;
  background: #ffffff;
  pointer-events: none;
}

/* Recria o arco arredondado por cima da mascara */
.denuncias-admin-screen .denuncias-admin-table::after {
  content: "";
  position: absolute;
  z-index: 4;
  top: -1px;
  left: -1px;
  width: 22px;
  height: 22px;
  border-top: 1px solid rgba(15, 23, 42, 0.12);
  border-left: 1px solid rgba(15, 23, 42, 0.12);
  border-top-left-radius: 20px;
  pointer-events: none;
}

/* Garante que o header nao pinte quadrado por tras do raio */
.denuncias-admin-screen .denuncias-admin-table thead th:first-child {
  border-top-left-radius: 20px !important;
  background-clip: padding-box !important;
  overflow: hidden !important;
}

/* Evita que algum pseudo-elemento anterior da primeira coluna apareca no canto */
.denuncias-admin-screen .denuncias-admin-table tbody td:first-child::before {
  left: 0 !important;
  right: 0 !important;
}

/* F7-DENUNCIAS-REMOVE-LINHA-FUNDO-TABELA-FIM */

/* F7-DENUNCIAS-CORRIGE-MASCARA-CANTO-INICIO
   Escopo: desfazer a mascara visual que piorou o canto superior esquerdo da tabela.
*/

/* Desativa a mascara criada no patch anterior */
.denuncias-admin-screen .denuncias-admin-table::before,
.denuncias-admin-screen .denuncias-admin-table::after {
  content: none !important;
  display: none !important;
}

/* Mantem um unico bloco arredondado limpo */
.denuncias-admin-screen .denuncias-admin-table {
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
}

/* Garante que a tabela interna nao desenhe borda quadrada propria */
.denuncias-admin-screen .denuncias-admin-table table {
  border-radius: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}

/* Header precisa respeitar o raio do container */
.denuncias-admin-screen .denuncias-admin-table thead th:first-child {
  border-top-left-radius: 18px !important;
}

.denuncias-admin-screen .denuncias-admin-table thead th:last-child {
  border-top-right-radius: 18px !important;
}

/* Remove qualquer linha artificial criada na primeira coluna */
.denuncias-admin-screen .denuncias-admin-table tbody td:first-child::before {
  content: none !important;
  display: none !important;
}

/* Mantem a linha horizontal normal via borda da celula, sem pseudo-elemento */
.denuncias-admin-screen .denuncias-admin-table tbody td:first-child {
  border-top: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: none !important;
}

/* F7-DENUNCIAS-CORRIGE-MASCARA-CANTO-FIM */

/* F7-DENUNCIAS-REMOVE-LINHA-FINA-FINAL-INICIO
   Escopo: remover linha fina residual atras/acima da tabela de protocolos.
   Abordagem: wrappers transparentes; apenas .denuncias-admin-table desenha borda/sombra.
*/

/* Neutraliza wrappers que podem estar desenhando a linha fina */
.denuncias-admin-screen .table-wrap,
.denuncias-admin-screen .panel,
.denuncias-admin-screen .data-panel,
.denuncias-admin-screen .denuncias-table {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* A tabela de protocolos vira o unico card visual */
.denuncias-admin-screen .denuncias-admin-table {
  position: relative !important;
  z-index: 1 !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.10) !important;
}

/* Remove qualquer borda/sombra da table interna */
.denuncias-admin-screen .denuncias-admin-table table {
  margin: 0 !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
  border-radius: 0 !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Header limpo, sem linha de fundo externa */
.denuncias-admin-screen .denuncias-admin-table thead,
.denuncias-admin-screen .denuncias-admin-table thead tr {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* O primeiro header recebe o canto arredondado real */
.denuncias-admin-screen .denuncias-admin-table thead th:first-child {
  border-top-left-radius: 18px !important;
  border-left: 0 !important;
  box-shadow: none !important;
}

/* Remove qualquer resquicio visual no topo/esquerda */
.denuncias-admin-screen .denuncias-admin-table thead th:first-child::before,
.denuncias-admin-screen .denuncias-admin-table thead th:first-child::after,
.denuncias-admin-screen .denuncias-admin-table tbody td:first-child::before,
.denuncias-admin-screen .denuncias-admin-table tbody td:first-child::after {
  content: none !important;
  display: none !important;
}

/* Evita que checkbox ou celula criem borda propria no canto */
.denuncias-admin-screen .denuncias-admin-table th:first-child,
.denuncias-admin-screen .denuncias-admin-table td:first-child {
  outline: 0 !important;
  box-shadow: none !important;
}

/* Mantem separacao horizontal normal entre linhas */
.denuncias-admin-screen .denuncias-admin-table tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}

/* F7-DENUNCIAS-REMOVE-LINHA-FINA-FINAL-FIM */

/* F7-DENUNCIAS-PAINEL-TRAS-TRANSPARENTE-INICIO
   Escopo:
   - tornar transparente o painel/wrapper atras da tabela
   - impedir moldura dupla
   - manter a tabela visivel e arredondada
*/

/* O wrapper/painel de tras nao deve desenhar nada */
.denuncias-admin-screen .table-wrap,
.denuncias-admin-screen .panel,
.denuncias-admin-screen .data-panel,
.denuncias-admin-screen .denuncias-table,
.denuncias-admin-screen .denuncias-admin-table {
  background: transparent !important;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}

/* A tabela real vira o unico bloco visual */
.denuncias-admin-screen .denuncias-admin-table table {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.12) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  table-layout: fixed !important;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08) !important;
}

/* Header respeita o raio da tabela real */
.denuncias-admin-screen .denuncias-admin-table thead th:first-child {
  border-top-left-radius: 18px !important;
}

.denuncias-admin-screen .denuncias-admin-table thead th:last-child {
  border-top-right-radius: 18px !important;
}

/* Remove qualquer pseudo-elemento residual da moldura antiga */
.denuncias-admin-screen .denuncias-admin-table::before,
.denuncias-admin-screen .denuncias-admin-table::after,
.denuncias-admin-screen .denuncias-admin-table th::before,
.denuncias-admin-screen .denuncias-admin-table th::after,
.denuncias-admin-screen .denuncias-admin-table td::before,
.denuncias-admin-screen .denuncias-admin-table td::after {
  content: none !important;
  display: none !important;
}

/* Sem borda lateral duplicada nas celulas */
.denuncias-admin-screen .denuncias-admin-table th,
.denuncias-admin-screen .denuncias-admin-table td {
  border-left: 0 !important;
  border-right: 0 !important;
  box-shadow: none !important;
}

/* Linhas apenas entre registros */
.denuncias-admin-screen .denuncias-admin-table tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.07) !important;
}

.denuncias-admin-screen .denuncias-admin-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

/* Responsivo: em desktop sem barra horizontal; em telas menores permite */
.denuncias-admin-screen .denuncias-admin-table {
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: visible !important;
}

@media (max-width: 980px) {
  .denuncias-admin-screen .denuncias-admin-table {
    overflow-x: auto !important;
  }

  .denuncias-admin-screen .denuncias-admin-table table {
    min-width: 860px !important;
    table-layout: auto !important;
  }
}

/* F7-DENUNCIAS-PAINEL-TRAS-TRANSPARENTE-FIM */

/* F7-DASHBOARD-RICO-CSS-INICIO
   Escopo: Dashboard rico frontend-only com dados ficticios.
   Nao altera Denuncias.
*/

.dashboard-rico-screen {
  display: grid;
  gap: 18px;
  width: 100%;
}

.dashboard-rico-hero {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: stretch;
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 24px;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.14), transparent 32%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(248, 250, 252, 0.90));
  box-shadow: 0 18px 46px rgba(15, 23, 42, 0.10);
}

.dashboard-rico-eyebrow {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  margin-bottom: 10px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.dashboard-rico-hero h2 {
  margin: 0;
  color: #0f172a;
  font-size: clamp(26px, 3vw, 38px);
  letter-spacing: -0.04em;
}

.dashboard-rico-hero p {
  max-width: 760px;
  margin: 8px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.65;
}

.dashboard-rico-health {
  min-width: 160px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 18px;
  border-radius: 20px;
  background: #0f172a;
  color: #ffffff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}

.dashboard-rico-health strong {
  font-size: 22px;
  letter-spacing: -0.03em;
}

.dashboard-rico-health span {
  margin-top: 4px;
  color: #cbd5e1;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-rico-kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.dashboard-rico-kpi {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.dashboard-rico-kpi:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12);
  border-color: rgba(37, 99, 235, 0.22);
}

.dashboard-rico-kpi::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: #64748b;
}

.dashboard-rico-kpi-blue::before { background: #2563eb; }
.dashboard-rico-kpi-green::before { background: #16a34a; }
.dashboard-rico-kpi-red::before { background: #dc2626; }
.dashboard-rico-kpi-amber::before { background: #d97706; }
.dashboard-rico-kpi-purple::before { background: #7c3aed; }

.dashboard-rico-kpi strong {
  display: block;
  color: #0f172a;
  font-size: 34px;
  line-height: 1;
  letter-spacing: -0.06em;
}

.dashboard-rico-kpi span {
  display: block;
  margin-top: 8px;
  color: #1e293b;
  font-size: 13px;
  font-weight: 800;
}

.dashboard-rico-kpi small {
  display: block;
  margin-top: 6px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-rico-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.dashboard-rico-card {
  min-width: 0;
  padding: 18px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.dashboard-rico-card h3 {
  margin: 0 0 14px;
  color: #0f172a;
  font-size: 15px;
  letter-spacing: -0.02em;
}

.dashboard-rico-bars {
  display: grid;
  gap: 12px;
}

.dashboard-rico-bar-row {
  display: grid;
  gap: 6px;
}

.dashboard-rico-bar-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
}

.dashboard-rico-bar-top span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dashboard-rico-bar-top strong {
  color: #0f172a;
}

.dashboard-rico-bar-track {
  height: 9px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.22);
}

.dashboard-rico-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #2563eb, #60a5fa);
}

.dashboard-rico-donut-card {
  display: grid;
  align-content: start;
}

.dashboard-rico-donut-wrap {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 178px;
}

.dashboard-rico-donut {
  width: 156px;
  height: 156px;
  transform: rotate(-90deg);
}

.dashboard-rico-donut-bg,
.dashboard-rico-donut-fg {
  fill: none;
  stroke-width: 14;
}

.dashboard-rico-donut-bg {
  stroke: rgba(148, 163, 184, 0.22);
}

.dashboard-rico-donut-fg {
  stroke: #2563eb;
  stroke-linecap: round;
}

.dashboard-rico-donut-center {
  position: absolute;
  display: grid;
  place-items: center;
  text-align: center;
}

.dashboard-rico-donut-center strong {
  color: #0f172a;
  font-size: 32px;
  line-height: 1;
  letter-spacing: -0.05em;
}

.dashboard-rico-donut-center span {
  margin-top: 4px;
  color: #64748b;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.dashboard-rico-trend-card p {
  margin: 8px 0 0;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-rico-line {
  width: 100%;
  height: 150px;
}

.dashboard-rico-line-grid {
  fill: none;
  stroke: rgba(148, 163, 184, 0.26);
  stroke-width: 1;
}

.dashboard-rico-line-path {
  fill: none;
  stroke: #2563eb;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.dashboard-rico-recent {
  padding: 0;
  overflow: hidden;
}

.dashboard-rico-recent h3 {
  padding: 18px 18px 0;
}

.dashboard-rico-recent-list {
  display: grid;
}

.dashboard-rico-recent-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  padding: 14px 18px;
  border-top: 1px solid rgba(15, 23, 42, 0.07);
}

.dashboard-rico-recent-row strong {
  display: block;
  color: #0f172a;
  font-size: 13px;
}

.dashboard-rico-recent-row span {
  display: block;
  margin-top: 4px;
  color: #64748b;
  font-size: 12px;
  font-weight: 700;
}

.dashboard-rico-recent-row em {
  flex: 0 0 auto;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
}

@media (max-width: 1180px) {
  .dashboard-rico-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .dashboard-rico-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .dashboard-rico-hero {
    display: grid;
  }

  .dashboard-rico-health {
    justify-items: start;
  }

  .dashboard-rico-kpis,
  .dashboard-rico-grid {
    grid-template-columns: 1fr;
  }

  .dashboard-rico-recent-row {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* F7-DASHBOARD-RICO-CSS-FIM */

/* F7-DASHBOARD-RICO-CORES-ANTIGO-INICIO
   Escopo: refinamento visual do Dashboard rico com paleta executiva variada.
   CSS-only. Nao altera Denuncias.
*/

.dashboard-rico-screen {
  --dash-ink: #0f172a;
  --dash-muted: #64748b;
  --dash-blue: #2563eb;
  --dash-green: #16a34a;
  --dash-red: #dc2626;
  --dash-amber: #d97706;
  --dash-purple: #7c3aed;
  --dash-teal: #0f766e;
  --dash-indigo: #4f46e5;
  --dash-slate: #334155;
}

/* Hero mais executivo, menos monocromatico */
.dashboard-rico-hero {
  border-color: rgba(15, 23, 42, 0.12) !important;
  background:
    radial-gradient(circle at 12% 10%, rgba(217, 119, 6, 0.16), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(37, 99, 235, 0.14), transparent 30%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.92)) !important;
}

.dashboard-rico-eyebrow {
  background: linear-gradient(90deg, rgba(217, 119, 6, 0.14), rgba(37, 99, 235, 0.10)) !important;
  color: #92400e !important;
  border: 1px solid rgba(217, 119, 6, 0.18) !important;
}

.dashboard-rico-health {
  background:
    radial-gradient(circle at top right, rgba(217, 119, 6, 0.24), transparent 36%),
    linear-gradient(135deg, #0f172a, #1e293b) !important;
}

/* KPIs com personalidade visual por status */
.dashboard-rico-kpi {
  background:
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.93)) !important;
}

.dashboard-rico-kpi-neutral {
  background:
    radial-gradient(circle at 90% 12%, rgba(51, 65, 85, 0.12), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-blue {
  background:
    radial-gradient(circle at 90% 12%, rgba(37, 99, 235, 0.15), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-green {
  background:
    radial-gradient(circle at 90% 12%, rgba(22, 163, 74, 0.15), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-red {
  background:
    radial-gradient(circle at 90% 12%, rgba(220, 38, 38, 0.14), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-amber {
  background:
    radial-gradient(circle at 90% 12%, rgba(217, 119, 6, 0.16), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-purple {
  background:
    radial-gradient(circle at 90% 12%, rgba(124, 58, 237, 0.14), transparent 34%),
    #ffffff !important;
}

.dashboard-rico-kpi-neutral strong { color: var(--dash-slate) !important; }
.dashboard-rico-kpi-blue strong { color: var(--dash-blue) !important; }
.dashboard-rico-kpi-green strong { color: var(--dash-green) !important; }
.dashboard-rico-kpi-red strong { color: var(--dash-red) !important; }
.dashboard-rico-kpi-amber strong { color: var(--dash-amber) !important; }
.dashboard-rico-kpi-purple strong { color: var(--dash-purple) !important; }

/* Cards com acento superior discreto, parecido com painel executivo */
.dashboard-rico-card {
  position: relative !important;
  overflow: hidden !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.98), rgba(248,250,252,0.94)) !important;
  border-color: rgba(15, 23, 42, 0.11) !important;
}

.dashboard-rico-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--dash-blue);
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(1)::before {
  background: linear-gradient(90deg, var(--dash-purple), #a78bfa);
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(2)::before {
  background: linear-gradient(90deg, var(--dash-green), #86efac);
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(3)::before {
  background: linear-gradient(90deg, var(--dash-red), var(--dash-purple));
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(4)::before {
  background: linear-gradient(90deg, var(--dash-amber), #fbbf24);
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(5)::before {
  background: linear-gradient(90deg, var(--dash-teal), #5eead4);
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(6)::before {
  background: linear-gradient(90deg, var(--dash-blue), var(--dash-indigo));
}

/* Barras com cores diferentes por bloco */
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-fill {
  background: linear-gradient(90deg, var(--dash-purple), #a78bfa) !important;
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(2) .dashboard-rico-bar-fill {
  background: linear-gradient(90deg, var(--dash-green), #86efac) !important;
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(5) .dashboard-rico-bar-fill {
  background: linear-gradient(90deg, var(--dash-teal), #5eead4) !important;
}

/* Varia tambem barras internas para nao parecer tudo igual */
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-row:nth-child(1) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-blue), #60a5fa) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-row:nth-child(2) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-purple), #a78bfa) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-row:nth-child(3) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-green), #86efac) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-row:nth-child(4) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-amber), #fbbf24) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(1) .dashboard-rico-bar-row:nth-child(5) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-red), #f87171) !important; }

.dashboard-rico-grid .dashboard-rico-card:nth-child(2) .dashboard-rico-bar-row:nth-child(1) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-green), #86efac) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(2) .dashboard-rico-bar-row:nth-child(2) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-teal), #5eead4) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(2) .dashboard-rico-bar-row:nth-child(3) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-blue), #60a5fa) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(2) .dashboard-rico-bar-row:nth-child(4) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-purple), #a78bfa) !important; }

.dashboard-rico-grid .dashboard-rico-card:nth-child(5) .dashboard-rico-bar-row:nth-child(1) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-teal), #5eead4) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(5) .dashboard-rico-bar-row:nth-child(2) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-indigo), #818cf8) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(5) .dashboard-rico-bar-row:nth-child(3) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-amber), #fbbf24) !important; }
.dashboard-rico-grid .dashboard-rico-card:nth-child(5) .dashboard-rico-bar-row:nth-child(4) .dashboard-rico-bar-fill { background: linear-gradient(90deg, var(--dash-green), #86efac) !important; }

/* Donuts com significado visual: gravidade em vermelho/roxo, SLA em ambar */
.dashboard-rico-grid .dashboard-rico-card:nth-child(3) .dashboard-rico-donut-fg {
  stroke: var(--dash-red) !important;
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(3) .dashboard-rico-donut-center strong {
  color: var(--dash-red) !important;
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(4) .dashboard-rico-donut-fg {
  stroke: var(--dash-amber) !important;
}

.dashboard-rico-grid .dashboard-rico-card:nth-child(4) .dashboard-rico-donut-center strong {
  color: var(--dash-amber) !important;
}

/* Linha de tendencia em azul institucional com area mais elegante */
.dashboard-rico-line-path {
  stroke: var(--dash-indigo) !important;
  filter: drop-shadow(0 4px 8px rgba(79, 70, 229, 0.18));
}

/* Protocolos recentes com badges por ordem, gerando variedade visual */
.dashboard-rico-recent::before {
  background: linear-gradient(90deg, var(--dash-slate), var(--dash-blue), var(--dash-amber)) !important;
}

.dashboard-rico-recent-row:nth-child(1) em {
  background: rgba(37, 99, 235, 0.11) !important;
  color: var(--dash-blue) !important;
}

.dashboard-rico-recent-row:nth-child(2) em {
  background: rgba(124, 58, 237, 0.11) !important;
  color: var(--dash-purple) !important;
}

.dashboard-rico-recent-row:nth-child(3) em {
  background: rgba(22, 163, 74, 0.11) !important;
  color: var(--dash-green) !important;
}

.dashboard-rico-recent-row:nth-child(4) em {
  background: rgba(217, 119, 6, 0.13) !important;
  color: var(--dash-amber) !important;
}

.dashboard-rico-recent-row:nth-child(5) em {
  background: rgba(220, 38, 38, 0.10) !important;
  color: var(--dash-red) !important;
}

/* Hover mais premium nos graficos */
.dashboard-rico-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
}

.dashboard-rico-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 20px 46px rgba(15, 23, 42, 0.12) !important;
  border-color: rgba(37, 99, 235, 0.20) !important;
}

/* F7-DASHBOARD-RICO-CORES-ANTIGO-FIM */

/* F7-DASHBOARD-DENUNCIAS-LINK-CSS-INICIO
   Escopo: indicar que os KPIs do Dashboard sao clicaveis e levam para Denuncias.
*/

.dashboard-rico-kpi[role="button"] {
  cursor: pointer !important;
}

.dashboard-rico-kpi[role="button"]::after {
  content: "Abrir filtro";
  position: absolute;
  right: 14px;
  bottom: 12px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.06);
  color: #475569;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.02em;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity .18s ease, transform .18s ease, background .18s ease, color .18s ease;
}

.dashboard-rico-kpi[role="button"]:hover::after,
.dashboard-rico-kpi[role="button"]:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
  background: rgba(37, 99, 235, 0.10);
  color: #1d4ed8;
}

.dashboard-rico-kpi[role="button"]:focus-visible {
  outline: 3px solid rgba(37, 99, 235, 0.22) !important;
  outline-offset: 3px !important;
}

/* F7-DASHBOARD-DENUNCIAS-LINK-CSS-FIM */

/* F7-DASHBOARD-TITULO-PREMIUM-INICIO
   Escopo: melhorar o bloco visual do titulo "Dashboard" no topo.
   CSS-only. Nao altera Denuncias.
*/

/* Remove aparencia quadrada/antiga do titulo principal */
#view-title {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  margin: 0 !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.88), rgba(248,250,252,0.72)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.07) !important;
  color: #0f172a !important;
  font-size: clamp(22px, 2.2vw, 31px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.08 !important;
}

/* Ponto/acento premium antes do titulo */
#view-title::before {
  content: "" !important;
  width: 9px !important;
  height: 9px !important;
  margin-right: 10px !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #d97706, #2563eb) !important;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.10) !important;
}

/* Neutraliza o painel quadrado imediatamente ao redor do titulo, se existir */
:is(.page-header, .view-header, .content-header, .workspace-header, .main-header, .admin-header, .section-header, .panel-header):has(#view-title) {
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top left, rgba(217, 119, 6, 0.10), transparent 28%),
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.10), transparent 30%),
    rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
  overflow: hidden !important;
}

/* Se o titulo estiver dentro de um card generico, suaviza sem quebrar layout */
:is(.card, .panel, .surface, .shell, .topbar, .toolbar):has(#view-title) {
  border-radius: 24px !important;
  background-clip: padding-box !important;
}

/* Melhor encaixe do Dashboard rico logo abaixo do titulo */
.dashboard-rico-screen {
  margin-top: 4px !important;
}

/* Em telas pequenas, evita que o titulo em formato pill estoure */
@media (max-width: 640px) {
  #view-title {
    width: 100% !important;
    justify-content: flex-start !important;
    font-size: 24px !important;
    border-radius: 20px !important;
  }
}

/* F7-DASHBOARD-TITULO-PREMIUM-FIM */

/* F7-DASHBOARD-TITULO-LIMPO-CENTRAL-INICIO
   Escopo:
   - remover acento/ponto antes do titulo
   - deixar painel atras do titulo transparente
   - centralizar verticalmente o titulo na area superior
   - CSS-only. Nao altera Denuncias.
*/

/* Titulo limpo, sem pill, sem fundo e sem borda */
#view-title {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  color: #0f172a !important;
  font-size: clamp(28px, 3vw, 40px) !important;
  font-weight: 900 !important;
  letter-spacing: -0.055em !important;
  line-height: 1 !important;
}

/* Remove o ponto/acento antes da palavra Dashboard */
#view-title::before,
#view-title::after {
  content: none !important;
  display: none !important;
}

/* Deixa transparente qualquer painel/header que esteja atras do titulo */
:is(.page-header, .view-header, .content-header, .workspace-header, .main-header, .admin-header, .section-header, .panel-header):has(#view-title) {
  display: flex !important;
  align-items: center !important;
  min-height: 64px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
}

/* Se algum card/panel generico envolver o titulo, tambem fica transparente */
:is(.card, .panel, .surface, .shell, .topbar, .toolbar):has(#view-title) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  border-radius: 0 !important;
}

/* Aproxima o dashboard rico do titulo sem parecer separado por um painel antigo */
.dashboard-rico-screen {
  margin-top: 0 !important;
}

/* Ajuste mobile */
@media (max-width: 640px) {
  #view-title {
    min-height: 46px !important;
    font-size: 30px !important;
  }

  :is(.page-header, .view-header, .content-header, .workspace-header, .main-header, .admin-header, .section-header, .panel-header):has(#view-title) {
    min-height: 52px !important;
  }
}

/* F7-DASHBOARD-TITULO-LIMPO-CENTRAL-FIM */

/* F7-DENUNCIAS-FILTROS-RAPIDOS-CSS-INICIO
   Escopo: filtros rapidos de Denuncias alinhados aos 8 cards do Dashboard.
   CSS-only para a faixa existente .denuncias-admin-tabs.
*/

.denuncias-admin-tabs-rapidas {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 34%),
    rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.06) !important;
}

.denuncias-admin-tab-rapida {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-height: 38px !important;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease, color .16s ease !important;
}

.denuncias-admin-tab-rapida:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, 0.24) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
  color: #1d4ed8 !important;
}

.denuncias-admin-tab-rapida.is-active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16) !important;
}

.denuncias-admin-tab-rapida strong {
  display: inline-grid !important;
  place-items: center !important;
  min-width: 24px !important;
  height: 24px !important;
  padding: 0 7px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1d4ed8 !important;
  font-size: 11px !important;
  font-weight: 900 !important;
}

.denuncias-admin-tab-rapida.is-active strong {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

.denuncias-admin-tab-rapida[data-f7-quick-filter="urgentes"] strong {
  background: rgba(220, 38, 38, 0.12) !important;
  color: #dc2626 !important;
}

.denuncias-admin-tab-rapida[data-f7-quick-filter="sla"] strong {
  background: rgba(217, 119, 6, 0.14) !important;
  color: #b45309 !important;
}

.denuncias-admin-tab-rapida[data-f7-quick-filter="retorno"] strong {
  background: rgba(124, 58, 237, 0.12) !important;
  color: #7c3aed !important;
}

.denuncias-admin-tab-rapida[data-f7-quick-filter="anonimos"] strong {
  background: rgba(15, 118, 110, 0.12) !important;
  color: #0f766e !important;
}

.denuncias-admin-tab-rapida.is-active strong {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
}

@media (max-width: 760px) {
  .denuncias-admin-tabs-rapidas {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .denuncias-admin-tab-rapida {
    justify-content: space-between !important;
    width: 100% !important;
  }
}

@media (max-width: 460px) {
  .denuncias-admin-tabs-rapidas {
    grid-template-columns: 1fr !important;
  }
}

/* F7-DENUNCIAS-FILTROS-RAPIDOS-CSS-FIM */

/* F7-EMPRESAS-AREAS-PREMIUM-CSS-INICIO
   Escopo: visual premium frontend-only para Empresas e Areas.
   Nao altera Dashboard, Denuncias, backend, banco ou endpoints.
*/

.empresas-areas-premium {
  display: grid !important;
  gap: 16px !important;
  margin: 16px 0 18px !important;
}

.empresas-areas-kpis {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.empresas-areas-kpi {
  position: relative !important;
  min-height: 118px !important;
  padding: 18px !important;
  border-radius: 24px !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at top right, rgba(37, 99, 235, 0.14), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(248,250,252,0.78)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

.empresas-areas-kpi::after {
  content: "" !important;
  position: absolute !important;
  right: -28px !important;
  bottom: -34px !important;
  width: 92px !important;
  height: 92px !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.08) !important;
}

.empresas-areas-kpi[data-tone="green"] {
  background:
    radial-gradient(circle at top right, rgba(22, 163, 74, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(240,253,244,0.72)) !important;
}

.empresas-areas-kpi[data-tone="red"] {
  background:
    radial-gradient(circle at top right, rgba(220, 38, 38, 0.15), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(254,242,242,0.72)) !important;
}

.empresas-areas-kpi[data-tone="amber"] {
  background:
    radial-gradient(circle at top right, rgba(217, 119, 6, 0.17), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(255,251,235,0.72)) !important;
}

.empresas-areas-kpi[data-tone="purple"] {
  background:
    radial-gradient(circle at top right, rgba(124, 58, 237, 0.16), transparent 35%),
    linear-gradient(135deg, rgba(255,255,255,0.94), rgba(245,243,255,0.72)) !important;
}

.empresas-areas-kpi span {
  display: block !important;
  margin-bottom: 10px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.empresas-areas-kpi strong {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  color: #0f172a !important;
  font-size: clamp(24px, 2.4vw, 36px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  line-height: 1 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.empresas-areas-kpi em {
  display: block !important;
  margin-top: 10px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-style: normal !important;
  font-weight: 800 !important;
}

.empresas-areas-tools {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 14px !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, 0.72) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 12px 28px rgba(15, 23, 42, 0.05) !important;
}

.empresas-areas-tools > span {
  margin-right: 4px !important;
  color: #64748b !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.empresas-areas-chip {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 36px !important;
  padding: 8px 13px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 23, 42, 0.10) !important;
  background: rgba(255,255,255,0.88) !important;
  color: #334155 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  transition: transform .16s ease, box-shadow .16s ease, color .16s ease, border-color .16s ease, background .16s ease !important;
}

.empresas-areas-chip:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(37, 99, 235, 0.22) !important;
  color: #1d4ed8 !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.08) !important;
}

.empresas-areas-chip.is-active {
  background: #0f172a !important;
  color: #ffffff !important;
  border-color: #0f172a !important;
  box-shadow: 0 12px 26px rgba(15, 23, 42, 0.16) !important;
}

.empresas-areas-table-wrap {
  overflow-x: auto !important;
  border-radius: 24px !important;
  background: rgba(255,255,255,0.86) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.07) !important;
}

.empresas-areas-admin-table {
  width: 100% !important;
  min-width: 760px !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  color: #0f172a !important;
  font-size: 13px !important;
}

.empresas-areas-admin-table thead th {
  padding: 14px 16px !important;
  background: rgba(248, 250, 252, 0.94) !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.08) !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-align: left !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
}

.empresas-areas-admin-table tbody td {
  padding: 15px 16px !important;
  border-bottom: 1px solid rgba(15, 23, 42, 0.06) !important;
  vertical-align: middle !important;
}

.empresas-areas-admin-table tbody tr:last-child td {
  border-bottom: 0 !important;
}

.empresas-areas-admin-table tbody tr {
  background: rgba(255,255,255,0.72) !important;
  transition: background .16s ease, transform .16s ease !important;
}

.empresas-areas-admin-table tbody tr:hover {
  background: rgba(248,250,252,0.96) !important;
}

.empresas-areas-admin-table td strong {
  display: block !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 950 !important;
}

.empresas-areas-admin-table td small {
  display: block !important;
  margin-top: 3px !important;
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 800 !important;
}

.empresas-areas-status {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  white-space: nowrap !important;
}

.empresas-areas-status[data-status="ativo"] {
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
}

.empresas-areas-status[data-status="inativo"] {
  background: rgba(220, 38, 38, 0.11) !important;
  color: #dc2626 !important;
}

.empresas-areas-action {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  border: 1px solid rgba(37, 99, 235, 0.16) !important;
  border-radius: 999px !important;
  background: rgba(37, 99, 235, 0.08) !important;
  color: #1d4ed8 !important;
  font-size: 12px !important;
  font-weight: 950 !important;
  cursor: pointer !important;
}

.empresas-areas-action:hover {
  background: rgba(37, 99, 235, 0.14) !important;
  border-color: rgba(37, 99, 235, 0.28) !important;
}

.empresas-areas-original-list {
  display: none !important;
}

@media (max-width: 980px) {
  .empresas-areas-kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 560px) {
  .empresas-areas-kpis {
    grid-template-columns: 1fr !important;
  }

  .empresas-areas-tools {
    align-items: stretch !important;
  }

  .empresas-areas-tools > span {
    width: 100% !important;
  }

  .empresas-areas-chip {
    justify-content: center !important;
    flex: 1 1 auto !important;
  }
}

/* F7-EMPRESAS-AREAS-PREMIUM-CSS-FIM */

/* F7-AREAS-HIDE-NAV-INICIO
   Escopo:
   - Esconde a aba Areas do menu superior.
   - Mantem a rota #areas funcional.
   - Mantem Areas acessivel pelo detalhe da empresa via openCompany.
   - CSS-only. Nao altera index.html, app.js, backend ou banco.
*/

.nav-item[data-view="areas"] {
  display: none !important;
}

/* F7-AREAS-HIDE-NAV-FIM */

/* F7-EMPRESA-DETALHE-AREAS-PREMIUM-CSS-INICIO
   Escopo: ajuste fino do visual premium de Areas e setores dentro do detalhe da empresa.
   Complementa o bloco F7-EMPRESAS-AREAS-PREMIUM-CSS.
*/

.empresa-detalhe-areas-premium {
  margin-top: 14px !important;
  margin-bottom: 18px !important;
}

.empresa-detalhe-areas-premium .empresas-areas-table-wrap {
  margin-top: 0 !important;
}

.empresa-detalhe-areas-premium + .empresas-areas-original-list,
.empresa-detalhe-areas-premium ~ .empresas-areas-original-list {
  display: none !important;
}

/* F7-EMPRESA-DETALHE-AREAS-PREMIUM-CSS-FIM */

/* F7-EMPRESA-DETALHE-HEADER-FINO-INICIO
   Escopo:
   - centraliza texto do botao Voltar para empresas no detalhe da empresa
   - melhora o painel superior com nome, slug, status e funcionarios
   - CSS-only. Nao altera JS, backend, banco ou endpoints.
*/

/* Botao Voltar para empresas centralizado e mais refinado */
#panel .panel-heading .company-link,
#panel button.company-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-height: 42px !important;
  padding: 10px 18px !important;
  border-radius: 13px !important;
  text-align: center !important;
  font-weight: 950 !important;
  letter-spacing: -0.01em !important;
}

/* Painel principal da empresa dentro do detalhe */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) {
  display: block !important;
  margin: 16px 0 20px !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Card da empresa no detalhe */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company {
  position: relative !important;
  overflow: hidden !important;
  padding: 20px 20px 18px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.96), rgba(248,250,252,0.82)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 16px 36px rgba(15, 23, 42, 0.08) !important;
}

/* Faixa colorida lateral mais discreta */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0ea5e9, #14b8a6) !important;
}

/* Nome da empresa */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > strong,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > h3,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > h4 {
  display: block !important;
  margin: 0 0 14px !important;
  padding-left: 2px !important;
  color: #0f172a !important;
  font-size: clamp(17px, 1.6vw, 22px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
}

/* Transforma Slug / Status / Funcionarios em linha horizontal */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company ul,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company .company-meta {
  display: grid !important;
  grid-template-columns: minmax(220px, 1.5fr) minmax(120px, 0.8fr) minmax(140px, 0.8fr) !important;
  gap: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  list-style: none !important;
}

/* Cada informacao vira um mini-card */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company ul > li,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company .company-meta > li,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company .company-meta > * {
  display: flex !important;
  align-items: center !important;
  min-height: 54px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.74) !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  color: #0f172a !important;
  font-size: 13px !important;
  font-weight: 850 !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
}

/* Destaque visual para o label antes dos dois-pontos */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company ul > li::first-letter {
  color: #0f172a !important;
}

/* Status/pills dentro do card */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 26px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
}

/* Mantem a area premium abaixo com respiro correto */
#panel .empresa-detalhe-areas-premium {
  margin-top: 18px !important;
}

/* Responsivo: empilha em telas menores */
@media (max-width: 820px) {
  #panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company ul,
  #panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company .company-meta {
    grid-template-columns: 1fr !important;
  }

  #panel .panel-heading .company-link,
  #panel button.company-link {
    min-height: 44px !important;
  }
}

/* F7-EMPRESA-DETALHE-HEADER-FINO-FIM */

/* F7-EMPRESA-DETALHE-CARD-UNICO-INICIO
   Escopo:
   - transforma o bloco principal da empresa em 1 card unico
   - nome da empresa no topo
   - slug/status/funcionarios lado a lado na horizontal
   - remove visual antigo de linhas/tabela
   - CSS-only
*/

/* Card principal da empresa no detalhe */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) {
  margin: 16px 0 18px !important;
  padding: 0 !important;
  list-style: none !important;
}

#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company {
  position: relative !important;
  overflow: hidden !important;
  display: block !important;
  padding: 20px 20px 18px !important;
  border-radius: 24px !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.92)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08) !important;
}

#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 18px !important;
  bottom: 18px !important;
  width: 4px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0ea5e9, #14b8a6) !important;
}

/* Nome da empresa */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > strong,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > h3,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > h4 {
  display: block !important;
  margin: 0 0 16px !important;
  padding: 0 0 0 2px !important;
  color: #0f172a !important;
  font-size: clamp(18px, 1.6vw, 24px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.035em !important;
  line-height: 1.15 !important;
  border: 0 !important;
}

/* Lista de metadados vira linha horizontal */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > ul,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > .company-meta {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  border: 0 !important;
  background: transparent !important;
}

/* Cada item vira mini-card */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > ul > li,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > .company-meta > li,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > ul > *,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > .company-meta > * {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 58px !important;
  margin: 0 !important;
  padding: 14px 16px !important;
  border-radius: 18px !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  background: rgba(255, 255, 255, 0.85) !important;
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04) !important;
  color: #0f172a !important;
  font-size: 14px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
}

/* Remove qualquer borda antiga interna herdada */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company ul li + li,
#panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company .company-meta li + li {
  border-top: 0 !important;
}

/* Status pill dentro do card */
#panel .panel-section > .company-list:not(.empresas-areas-original-list) .status-pill {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 5px 10px !important;
  min-height: 24px !important;
  margin-left: 8px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(34, 197, 94, 0.12) !important;
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  box-shadow: none !important;
}

/* Botao voltar com texto centralizado */
#panel .panel-heading .company-link,
#panel button.company-link {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  width: 100% !important;
  min-height: 42px !important;
  font-weight: 950 !important;
}

/* Responsivo */
@media (max-width: 900px) {
  #panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > ul,
  #panel .panel-section > .company-list:not(.empresas-areas-original-list) > .company > .company-meta {
    grid-template-columns: 1fr !important;
  }
}

/* F7-EMPRESA-DETALHE-CARD-UNICO-FIM */

/* F7-EMPRESAS-FLASH-RESUMO-V2-CSS-INICIO
   Escopo:
   - evita flash visual antigo em Empresas
   - card unico premium do resumo da empresa no detalhe
*/

#empresas-list.f7-empresas-list-prepremium {
  visibility: hidden !important;
  min-height: 180px !important;
}

#panel .empresa-detalhe-resumo-card-v2 {
  position: relative !important;
  overflow: hidden !important;
  display: grid !important;
  gap: 16px !important;
  margin: 16px 0 22px !important;
  padding: 22px !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at top right, rgba(20, 184, 166, 0.14), transparent 34%),
    radial-gradient(circle at bottom left, rgba(37, 99, 235, 0.09), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,0.98), rgba(248,250,252,0.91)) !important;
  border: 1px solid rgba(15, 23, 42, 0.08) !important;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.09) !important;
}

#panel .empresa-detalhe-resumo-card-v2::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 20px !important;
  bottom: 20px !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0ea5e9, #14b8a6) !important;
}

#panel .empresa-detalhe-resumo-card-v2-header {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  gap: 5px !important;
}

#panel .empresa-detalhe-resumo-card-v2-header span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

#panel .empresa-detalhe-resumo-card-v2-header h3 {
  margin: 0 !important;
  color: #0f172a !important;
  font-size: clamp(20px, 2.1vw, 30px) !important;
  font-weight: 950 !important;
  letter-spacing: -0.055em !important;
  line-height: 1.08 !important;
}

#panel .empresa-detalhe-resumo-card-v2-grid {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(220px, 1.4fr) minmax(150px, .8fr) minmax(160px, .8fr) !important;
  gap: 14px !important;
}

#panel .empresa-detalhe-resumo-card-v2-item {
  display: grid !important;
  align-content: center !important;
  gap: 7px !important;
  min-height: 76px !important;
  padding: 15px 16px !important;
  border-radius: 20px !important;
  background: rgba(255,255,255,0.84) !important;
  border: 1px solid rgba(15, 23, 42, 0.07) !important;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.05) !important;
}

#panel .empresa-detalhe-resumo-card-v2-item span {
  color: #64748b !important;
  font-size: 11px !important;
  font-weight: 950 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
}

#panel .empresa-detalhe-resumo-card-v2-item strong {
  color: #0f172a !important;
  font-size: 15px !important;
  font-weight: 950 !important;
  line-height: 1.2 !important;
  word-break: break-word !important;
}

#panel .empresa-detalhe-resumo-card-v2-item[data-type="ativo"] strong {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(22, 163, 74, 0.12) !important;
  color: #15803d !important;
  font-size: 12px !important;
}

#panel .empresa-detalhe-resumo-card-v2-item[data-type="inativo"] strong {
  display: inline-flex !important;
  width: fit-content !important;
  align-items: center !important;
  padding: 6px 12px !important;
  border-radius: 999px !important;
  background: rgba(220, 38, 38, 0.11) !important;
  color: #dc2626 !important;
  font-size: 12px !important;
}

#panel .empresa-detalhe-resumo-card-v2-source {
  display: none !important;
}

@media (max-width: 880px) {
  #panel .empresa-detalhe-resumo-card-v2-grid {
    grid-template-columns: 1fr !important;
  }
}

/* F7-EMPRESAS-FLASH-RESUMO-V2-CSS-FIM */

/* F8-B-EMPRESAS-CSS-INICIO */
#panel .f8-lab-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

#panel .panel-heading .f8-lab-actions {
  margin-left: auto;
}

#panel .f8-lab-actions-detail {
  margin-top: 18px;
  justify-content: flex-start;
}

#panel .f8-lab-button {
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 999px;
  padding: 10px 16px;
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.18), rgba(30, 64, 175, 0.14));
  color: var(--text, #f8fafc);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.16);
}

#panel .f8-lab-button:hover {
  border-color: rgba(212, 175, 55, 0.72);
  transform: translateY(-1px);
}

.f8-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(2, 6, 23, 0.68);
  backdrop-filter: blur(10px);
}

.f8-modal-card {
  width: min(520px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  border: 1px solid rgba(212, 175, 55, 0.28);
  border-radius: 24px;
  padding: 24px;
  background: linear-gradient(180deg, rgba(15, 23, 42, 0.98), rgba(15, 23, 42, 0.94));
  color: #f8fafc;
  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.42);
}

.f8-modal-head {
  display: grid;
  gap: 8px;
  margin-bottom: 18px;
}

.f8-modal-head h3 {
  margin: 0;
  font-size: 24px;
}

.f8-modal-head p {
  margin: 0;
  color: rgba(226, 232, 240, 0.78);
}

.f8-lab-badge {
  width: fit-content;
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 999px;
  padding: 5px 10px;
  background: rgba(212, 175, 55, 0.12);
  color: #facc15;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.f8-modal-field {
  display: grid;
  gap: 7px;
  margin-top: 12px;
}

.f8-modal-field span {
  color: rgba(226, 232, 240, 0.86);
  font-size: 13px;
  font-weight: 700;
}

.f8-modal-card .input {
  width: 100%;
}

.f8-modal-card .input:disabled {
  opacity: 0.72;
  cursor: not-allowed;
}

.f8-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}

.f8-modal-actions button:not(.f8-lab-button) {
  border: 1px solid rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  padding: 10px 16px;
  background: rgba(15, 23, 42, 0.6);
  color: #e2e8f0;
  cursor: pointer;
}

@media (max-width: 680px) {
  #panel .panel-heading .f8-lab-actions {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
  }

  .f8-modal {
    padding: 14px;
  }

  .f8-modal-card {
    padding: 18px;
    border-radius: 20px;
  }

  .f8-modal-actions {
    justify-content: stretch;
  }

  .f8-modal-actions button {
    width: 100%;
  }
}
/* F8-B-EMPRESAS-CSS-FIM */

/* F8-C-AREAS-CSS-INICIO */
#panel .f8-area-actions {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  margin: 14px 0 16px 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

#panel .f8-area-actions .f8-lab-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 42px !important;
}
/* F8-C-AREAS-CSS-FIM */

/* F8-C17-AREAS-ESTRUTURAL-CSS-INICIO */
.empresas-areas-tools {
  display: grid;
  gap: 0.85rem;
}

.empresas-areas-tools-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.85rem;
  flex-wrap: wrap;
}

.empresas-areas-chips {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-left: auto;
}

.empresas-areas-new-button {
  border: 1px solid rgba(212, 175, 55, 0.55);
  border-radius: 999px;
  padding: 0.58rem 0.95rem;
  font-weight: 800;
  color: #06111f;
  background: linear-gradient(135deg, #f2d16b, #d4af37);
  box-shadow: 0 10px 28px rgba(212, 175, 55, 0.22);
  cursor: pointer;
}

.empresas-areas-new-button:hover {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.empresas-areas-filter-input {
  width: 100%;
  min-height: 42px;
  border-radius: 14px;
  border: 1px solid rgba(148, 163, 184, 0.28);
  background: rgba(15, 23, 42, 0.62);
  color: var(--text, #f8fafc);
  padding: 0.72rem 0.9rem;
  outline: none;
}

.empresas-areas-filter-input::placeholder {
  color: rgba(226, 232, 240, 0.62);
}

.empresas-areas-filter-input:focus {
  border-color: rgba(59, 130, 246, 0.72);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.18);
}

@media (max-width: 720px) {
  .empresas-areas-tools-top {
    align-items: stretch;
  }

  .empresas-areas-chips {
    width: 100%;
    margin-left: 0;
  }

  .empresas-areas-new-button {
    width: 100%;
  }
}
/* F8-C17-AREAS-ESTRUTURAL-CSS-FIM */
/* F8-C19-AREAS-ALINHAMENTO-DIREITA-CSS-INICIO */
.empresas-areas-tools {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.empresas-areas-tools > .empresas-areas-tools-top {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: auto minmax(1rem, 1fr) auto auto !important;
  align-items: center !important;
  column-gap: 0.85rem !important;
  row-gap: 0.65rem !important;
}

.empresas-areas-tools > .empresas-areas-tools-top > span {
  grid-column: 1 !important;
  justify-self: start !important;
  min-width: 0 !important;
}

.empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-chips {
  grid-column: 3 !important;
  justify-self: end !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.5rem !important;
  width: auto !important;
  margin-left: 0 !important;
}

.empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-new-button {
  grid-column: 4 !important;
  justify-self: end !important;
  width: auto !important;
  white-space: nowrap !important;
}

@media (max-width: 720px) {
  .empresas-areas-tools > .empresas-areas-tools-top {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .empresas-areas-tools > .empresas-areas-tools-top > span,
  .empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-chips,
  .empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-new-button {
    grid-column: 1 !important;
    justify-self: stretch !important;
  }

  .empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-chips {
    justify-content: flex-start !important;
    width: 100% !important;
  }

  .empresas-areas-tools > .empresas-areas-tools-top > .empresas-areas-new-button {
    width: 100% !important;
  }
}
/* F8-C19-AREAS-ALINHAMENTO-DIREITA-CSS-FIM */
/* F8-C20-AREAS-HIDE-LEGACY-CANCEL-RED-CSS-INICIO */

/* Esconde apenas o bloco superior legado de Areas criado em openCompany.
   Mantem o painel premium F8-C17 visivel e funcional. */
.f8-area-actions,
.f8-area-actions + .search-row,
.f8-area-actions + .search-row + .panel-placeholder,
.search-row:has(#company-detail-areas-filter),
.search-row:has(#company-detail-areas-filter) + .panel-placeholder {
  display: none !important;
}

/* Botoes Cancelar dos modais: Empresa e Area. */
.f8-modal-actions button[data-f8-modal-close],
.f8-modal-actions button[data-f8-area-modal-close] {
  border-color: rgba(239, 68, 68, 0.55) !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
  font-weight: 800 !important;
}

.f8-modal-actions button[data-f8-modal-close]:hover,
.f8-modal-actions button[data-f8-area-modal-close]:hover {
  border-color: rgba(220, 38, 38, 0.85) !important;
  background: #fecaca !important;
  color: #991b1b !important;
  transform: translateY(-1px);
}

/* F8-C20-AREAS-HIDE-LEGACY-CANCEL-RED-CSS-FIM */

/* F8-C21-ALIGN-TOP-ACTIONS-CSS-INICIO */

/* Alinha o botao superior "Editar empresa" a direita. */
.empresa-detalhe-edit-button {
  display: block !important;
  width: max-content !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Alinha o botao superior "Nova area" a direita.
   Tambem reexibe a action superior caso F8-C20 a tenha escondido. */
.f8-area-actions {
  display: flex !important;
  justify-content: flex-end !important;
  align-items: center !important;
  width: 100% !important;
}

.f8-area-actions .empresa-detalhe-top-new-area-button {
  display: inline-flex !important;
  width: auto !important;
  margin-left: auto !important;
  margin-right: 0 !important;
}

/* Mantem escondidos apenas o filtro legado e a faixa antiga, nao o botao. */
.search-row:has(#company-detail-areas-filter),
.search-row:has(#company-detail-areas-filter) + .panel-placeholder,
.f8-area-actions + .search-row,
.f8-area-actions + .search-row + .panel-placeholder {
  display: none !important;
}

/* F8-C21-ALIGN-TOP-ACTIONS-CSS-FIM */

/* F8-E2-RELATORIOS-UI-FICTICIA-CSS-INICIO */
.relatorios-screen {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.relatorios-hero,
.relatorios-panel,
.relatorios-toolbar,
.relatorios-metric {
  border: 1px solid rgba(226, 232, 240, 0.12);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(15, 23, 42, 0.78));
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.22);
}

.relatorios-hero {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  padding: 24px;
  border-radius: 24px;
}

.relatorios-hero h2 {
  margin: 4px 0 8px;
}

.relatorios-eyebrow {
  margin: 0;
  color: var(--accent, #38bdf8);
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.relatorios-subtitle {
  max-width: 760px;
  margin: 0;
  color: var(--muted, #94a3b8);
  line-height: 1.55;
}

.relatorios-badge {
  flex: 0 0 auto;
  border: 1px solid rgba(56, 189, 248, 0.32);
  border-radius: 999px;
  padding: 8px 12px;
  color: var(--accent, #38bdf8);
  background: rgba(14, 165, 233, 0.12);
  font-size: 0.78rem;
  font-weight: 800;
}

.relatorios-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px;
  border-radius: 20px;
}

.relatorios-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.relatorios-filter {
  border: 1px solid rgba(148, 163, 184, 0.24);
  border-radius: 999px;
  padding: 9px 13px;
  color: var(--muted, #94a3b8);
  background: rgba(15, 23, 42, 0.76);
  cursor: pointer;
  font-weight: 800;
}

.relatorios-filter:hover,
.relatorios-filter.is-active {
  border-color: rgba(56, 189, 248, 0.5);
  color: var(--text, #e2e8f0);
  background: rgba(14, 165, 233, 0.18);
}

.relatorios-search-wrap {
  display: grid;
  min-width: min(360px, 100%);
  gap: 6px;
  color: var(--muted, #94a3b8);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.relatorios-search {
  width: 100%;
  border: 1px solid rgba(148, 163, 184, 0.26);
  border-radius: 14px;
  padding: 11px 13px;
  color: var(--text, #e2e8f0);
  background: rgba(2, 6, 23, 0.28);
  outline: none;
}

.relatorios-search:focus {
  border-color: rgba(56, 189, 248, 0.62);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.12);
}

.relatorios-metrics.panel-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.relatorios-metric {
  display: grid;
  gap: 6px;
  min-height: 124px;
  padding: 18px;
  border-radius: 20px;
}

.relatorios-metric small {
  color: var(--muted, #94a3b8);
  font-weight: 700;
}

.relatorios-visual-grid {
  display: grid;
  grid-template-columns: minmax(280px, 0.8fr) minmax(420px, 1.2fr);
  gap: 18px;
}

.relatorios-panel {
  min-width: 0;
  padding: 18px;
  border-radius: 22px;
}

.relatorios-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.relatorios-panel-head h3 {
  margin: 0;
  font-size: 1rem;
}

.relatorios-panel-head span {
  color: var(--muted, #94a3b8);
  font-size: 0.82rem;
  font-weight: 800;
}

.relatorios-bars {
  display: grid;
  gap: 12px;
}

.relatorios-bar-row {
  display: grid;
  grid-template-columns: 100px 1fr 32px;
  align-items: center;
  gap: 10px;
  color: var(--text, #e2e8f0);
  font-size: 0.88rem;
  font-weight: 800;
}

.relatorios-bar-track {
  overflow: hidden;
  height: 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.16);
}

.relatorios-bar {
  width: var(--relatorios-bar-width, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.9), rgba(234, 179, 8, 0.86));
}

.relatorios-table-wrap {
  overflow-x: auto;
  border: 1px solid rgba(148, 163, 184, 0.14);
  border-radius: 18px;
}

.relatorios-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 680px;
}

.relatorios-table th,
.relatorios-table td {
  padding: 13px 14px;
  border-bottom: 1px solid rgba(148, 163, 184, 0.12);
  text-align: left;
}

.relatorios-table th {
  color: var(--muted, #94a3b8);
  background: rgba(15, 23, 42, 0.72);
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.relatorios-table td {
  color: var(--text, #e2e8f0);
  font-size: 0.9rem;
}

.relatorios-table tr:last-child td {
  border-bottom: 0;
}

.relatorios-status {
  border-color: rgba(148, 163, 184, 0.25);
}

.relatorios-status--concluido {
  border-color: rgba(34, 197, 94, 0.35);
  color: #bbf7d0;
  background: rgba(22, 163, 74, 0.14);
}

.relatorios-status--pendente {
  border-color: rgba(234, 179, 8, 0.38);
  color: #fef3c7;
  background: rgba(234, 179, 8, 0.14);
}

.relatorios-status--em-revisao {
  border-color: rgba(56, 189, 248, 0.36);
  color: #bae6fd;
  background: rgba(14, 165, 233, 0.14);
}

.relatorios-empty,
.relatorios-empty-cell {
  color: var(--muted, #94a3b8);
}

.relatorios-empty-cell {
  padding: 22px;
  text-align: center;
}

@media (max-width: 900px) {
  .relatorios-metrics.panel-grid,
  .relatorios-visual-grid {
    grid-template-columns: 1fr;
  }

  .relatorios-toolbar,
  .relatorios-hero {
    align-items: stretch;
    flex-direction: column;
  }

  .relatorios-search-wrap {
    min-width: 100%;
  }
}

@media (max-width: 640px) {
  .relatorios-hero,
  .relatorios-toolbar,
  .relatorios-panel,
  .relatorios-metric {
    border-radius: 16px;
  }

  .relatorios-bar-row {
    grid-template-columns: 82px 1fr 28px;
  }
}
/* F8-E2-RELATORIOS-UI-FICTICIA-CSS-FIM */

/* F8-E3-RELATORIOS-POLIMENTO-CSS-INICIO */
.relatorios-screen {
  gap: 18px;
  color: #172033;
}

.relatorios-screen .relatorios-hero,
.relatorios-screen .relatorios-toolbar,
.relatorios-screen .relatorios-panel,
.relatorios-screen .relatorios-metric {
  border: 1px solid rgba(15, 23, 42, 0.09);
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 16px 42px rgba(15, 23, 42, 0.08);
}

.relatorios-screen .relatorios-hero {
  position: relative;
  overflow: hidden;
  min-height: 132px;
  padding: 26px;
  color: #111827;
}

.relatorios-screen .relatorios-hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, #0ea5e9, #eab308);
}

.relatorios-screen .relatorios-hero > * {
  position: relative;
  z-index: 1;
}

.relatorios-screen .relatorios-hero h2 {
  color: #111827;
  font-size: 1.65rem;
  letter-spacing: -0.04em;
}

.relatorios-screen .relatorios-eyebrow {
  color: #b7791f;
}

.relatorios-screen .relatorios-subtitle {
  color: #475569;
}

.relatorios-screen .relatorios-badge {
  border-color: rgba(14, 116, 144, 0.2);
  color: #0f766e;
  background: rgba(240, 253, 250, 0.95);
}

.relatorios-screen .relatorios-toolbar {
  align-items: end;
  padding: 18px;
}

.relatorios-screen .relatorios-filter {
  border-color: rgba(14, 165, 233, 0.22);
  color: #075985;
  background: #f8fafc;
  box-shadow: none;
}

.relatorios-screen .relatorios-filter:hover,
.relatorios-screen .relatorios-filter.is-active {
  border-color: rgba(14, 165, 233, 0.5);
  color: #ffffff;
  background: linear-gradient(135deg, #0284c7, #2563eb);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.18);
}

.relatorios-screen .relatorios-search-wrap {
  color: #475569;
}

.relatorios-screen .relatorios-search {
  border-color: rgba(15, 23, 42, 0.16);
  color: #111827;
  background: #ffffff;
}

.relatorios-screen .relatorios-search::placeholder {
  color: #94a3b8;
}

.relatorios-screen .relatorios-search:focus {
  border-color: rgba(37, 99, 235, 0.55);
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.11);
}

.relatorios-screen .relatorios-metrics.panel-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.relatorios-screen .relatorios-metric {
  min-height: 118px;
  border-radius: 20px;
}

.relatorios-screen .relatorios-metric .card-value {
  color: #2563eb;
}

.relatorios-screen .relatorios-metric .card-label {
  color: #334155;
}

.relatorios-screen .relatorios-metric small {
  color: #64748b;
}

.relatorios-screen .relatorios-visual-grid {
  grid-template-columns: minmax(280px, 0.72fr) minmax(460px, 1.28fr);
}

.relatorios-screen .relatorios-panel {
  color: #111827;
}

.relatorios-screen .relatorios-panel-head h3 {
  color: #111827;
  font-weight: 900;
}

.relatorios-screen .relatorios-panel-head span {
  color: #64748b;
}

.relatorios-screen .relatorios-bar-row {
  color: #334155;
}

.relatorios-screen .relatorios-bar-track {
  background: rgba(15, 23, 42, 0.08);
}

.relatorios-screen .relatorios-table-wrap {
  border-color: rgba(15, 23, 42, 0.08);
  background: #ffffff;
}

.relatorios-screen .relatorios-table {
  min-width: 620px;
}

.relatorios-screen .relatorios-table th {
  color: #334155;
  background: #f8fafc;
  border-bottom-color: rgba(14, 165, 233, 0.22);
}

.relatorios-screen .relatorios-table td {
  color: #111827;
  border-bottom-color: rgba(15, 23, 42, 0.08);
}

.relatorios-screen .relatorios-table tbody tr:hover td {
  background: #f8fafc;
}

.relatorios-screen .relatorios-empty,
.relatorios-screen .relatorios-empty-cell {
  color: #64748b;
}

.relatorios-screen .relatorios-status--concluido {
  color: #166534;
  background: #dcfce7;
  border-color: rgba(22, 101, 52, 0.2);
}

.relatorios-screen .relatorios-status--pendente {
  color: #92400e;
  background: #fef3c7;
  border-color: rgba(146, 64, 14, 0.2);
}

.relatorios-screen .relatorios-status--em-revisao {
  color: #075985;
  background: #e0f2fe;
  border-color: rgba(7, 89, 133, 0.2);
}

@media (max-width: 1100px) {
  .relatorios-screen .relatorios-metrics.panel-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .relatorios-screen .relatorios-visual-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 700px) {
  .relatorios-screen .relatorios-metrics.panel-grid {
    grid-template-columns: 1fr;
  }

  .relatorios-screen .relatorios-hero,
  .relatorios-screen .relatorios-toolbar {
    align-items: stretch;
    flex-direction: column;
  }
}
/* F8-E3-RELATORIOS-POLIMENTO-CSS-FIM */

/* F8-E4-RELATORIOS-CORES-NUMEROS-CARDS-CSS-INICIO */
.relatorios-screen .relatorios-metrics .relatorios-metric:nth-child(1) .card-value {
  color: #2563eb;
}

.relatorios-screen .relatorios-metrics .relatorios-metric:nth-child(2) .card-value {
  color: #111827;
}

.relatorios-screen .relatorios-metrics .relatorios-metric:nth-child(3) .card-value {
  color: #f97316;
}

.relatorios-screen .relatorios-metrics .relatorios-metric:nth-child(4) .card-value {
  color: #0f766e;
}
/* F8-E4-RELATORIOS-CORES-NUMEROS-CARDS-CSS-FIM */

/* F8-E4C-RELATORIOS-CORES-ROBUSTAS-INICIO */
/* Correção robusta: classes específicas por métrica, sem depender de nth-child. */
.relatorios-screen .relatorios-metrics .relatorios-metric.relatorios-metric--relatorios .card-value {
  color: #2563eb !important;
}

.relatorios-screen .relatorios-metrics .relatorios-metric.relatorios-metric--concluidos .card-value {
  color: #111827 !important;
}

.relatorios-screen .relatorios-metrics .relatorios-metric.relatorios-metric--pendentes .card-value {
  color: #f97316 !important;
}

.relatorios-screen .relatorios-metrics .relatorios-metric.relatorios-metric--volume .card-value {
  color: #0f766e !important;
}

/* Status da lista/tabela de relatórios com escopo reforçado. */
.relatorios-screen .relatorios-status.relatorios-status--concluido {
  color: #166534 !important;
  background: rgba(22, 163, 74, 0.14) !important;
  border-color: rgba(22, 163, 74, 0.32) !important;
}

.relatorios-screen .relatorios-status.relatorios-status--pendente {
  color: #b45309 !important;
  background: rgba(245, 158, 11, 0.16) !important;
  border-color: rgba(245, 158, 11, 0.34) !important;
}

.relatorios-screen .relatorios-status.relatorios-status--em-revisao {
  color: #0369a1 !important;
  background: rgba(14, 165, 233, 0.14) !important;
  border-color: rgba(14, 165, 233, 0.32) !important;
}
/* F8-E4C-RELATORIOS-CORES-ROBUSTAS-FIM */

/* F8-F-ACTIVITY-CSS-INICIO */
/* F8-F3-ACTIVITY-FILTROS-CSS-INICIO */
.activity-screen {
  display: grid;
  gap: 1.25rem;
}

.activity-screen .section-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.activity-lab-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2rem;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(15, 23, 42, 0.72);
  color: #dbeafe;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.activity-safety-note {
  border: 1px solid rgba(14, 165, 233, 0.24);
  background: linear-gradient(135deg, rgba(14, 165, 233, 0.10), rgba(15, 23, 42, 0.64));
  border-radius: 1rem;
  padding: 0.9rem 1rem;
  color: rgba(226, 232, 240, 0.88);
  line-height: 1.5;
}

.activity-safety-note strong {
  color: #bfdbfe;
}

.activity-metrics {
  align-items: stretch;
}

.activity-metric {
  position: relative;
  overflow: hidden;
}

.activity-metric::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: rgba(59, 130, 246, 0.78);
}

.activity-metric--eventos::before { background: rgba(59, 130, 246, 0.86); }
.activity-metric--hoje::before { background: rgba(245, 158, 11, 0.88); }
.activity-metric--modulos::before { background: rgba(20, 184, 166, 0.86); }
.activity-metric--simulados::before { background: rgba(34, 197, 94, 0.82); }

.activity-card-caption {
  display: block;
  margin-top: 0.35rem;
  color: rgba(203, 213, 225, 0.72);
  font-size: 0.82rem;
}

.activity-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.activity-filter {
  appearance: none;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background: rgba(15, 23, 42, 0.58);
  color: rgba(226, 232, 240, 0.78);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.48rem 0.8rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 800;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease, color 160ms ease;
}

.activity-filter:hover,
.activity-filter:focus-visible {
  border-color: rgba(59, 130, 246, 0.62);
  background: rgba(37, 99, 235, 0.16);
  color: #dbeafe;
  outline: none;
  transform: translateY(-1px);
}

.activity-filter.is-active {
  border-color: rgba(59, 130, 246, 0.72);
  background: rgba(37, 99, 235, 0.24);
  box-shadow: inset 0 0 0 1px rgba(191, 219, 254, 0.08);
  color: #eff6ff;
}

.activity-table-card {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: rgba(15, 23, 42, 0.58);
  border-radius: 1.1rem;
  overflow: hidden;
  box-shadow: 0 18px 45px rgba(2, 6, 23, 0.18);
}

.activity-table-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.18);
}

.activity-table-header h3 {
  margin: 0;
  color: #f8fafc;
}

.activity-table-header p {
  margin: 0.25rem 0 0;
  color: rgba(203, 213, 225, 0.72);
}

.activity-origin {
  color: rgba(125, 211, 252, 0.86);
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
}

.activity-result-count {
  padding: 0.75rem 1rem 0;
  color: rgba(191, 219, 254, 0.88);
  font-size: 0.84rem;
  font-weight: 800;
}

.activity-table-wrap {
  width: 100%;
  overflow-x: auto;
}

.activity-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 760px;
}

.activity-table th,
.activity-table td {
  padding: 0.85rem 1rem;
  border-bottom: 1px solid rgba(148, 163, 184, 0.14);
  text-align: left;
  vertical-align: middle;
}

.activity-table th {
  color: rgba(191, 219, 254, 0.92);
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.activity-table td {
  color: rgba(226, 232, 240, 0.86);
  font-size: 0.9rem;
}

.activity-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.07);
}

.activity-empty {
  padding: 1rem;
  color: rgba(226, 232, 240, 0.72);
  font-weight: 700;
}

.activity-status { font-weight: 800; }
.activity-status--ok {
  background: rgba(34, 197, 94, 0.14);
  color: #86efac;
  border-color: rgba(34, 197, 94, 0.34);
}
.activity-status--simulado {
  background: rgba(59, 130, 246, 0.14);
  color: #bfdbfe;
  border-color: rgba(59, 130, 246, 0.34);
}
.activity-status--ignorado {
  background: rgba(245, 158, 11, 0.14);
  color: #fde68a;
  border-color: rgba(245, 158, 11, 0.34);
}

@media (max-width: 760px) {
  .activity-screen .section-header,
  .activity-table-header {
    align-items: stretch;
    flex-direction: column;
  }

  .activity-origin,
  .activity-lab-badge {
    white-space: normal;
  }
}
/* F8-F3-ACTIVITY-FILTROS-CSS-FIM */
/* F8-F-ACTIVITY-CSS-FIM */

/* F8-F4-ACTIVITY-VISUAL-PREMIUM-CSS-INICIO */
.activity-screen .activity-safety-note {
  border-color: rgba(96, 165, 250, 0.38);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.96), rgba(30, 64, 175, 0.34));
  box-shadow: 0 16px 36px rgba(2, 6, 23, 0.22), inset 4px 0 0 rgba(59, 130, 246, 0.72);
  color: rgba(241, 245, 249, 0.94);
}

.activity-screen .activity-safety-note strong {
  color: #ffffff;
}

.activity-screen .card.activity-metric {
  border: 1px solid rgba(148, 163, 184, 0.22);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.98), rgba(30, 41, 59, 0.92));
  box-shadow: 0 20px 48px rgba(2, 6, 23, 0.30);
  color: #f8fafc;
}

.activity-screen .card.activity-metric:hover {
  border-color: rgba(96, 165, 250, 0.42);
  transform: translateY(-1px);
}

.activity-screen .activity-metric .card-label {
  color: rgba(191, 219, 254, 0.88);
}

.activity-screen .activity-metric .card-value {
  color: #f8fafc;
  text-shadow: 0 10px 28px rgba(59, 130, 246, 0.22);
}

.activity-screen .activity-card-caption {
  color: rgba(226, 232, 240, 0.76);
}

.activity-screen .activity-table-card {
  border-color: rgba(148, 163, 184, 0.24);
  background: linear-gradient(145deg, rgba(15, 23, 42, 0.96), rgba(30, 41, 59, 0.88));
  box-shadow: 0 22px 52px rgba(2, 6, 23, 0.30);
}

.activity-screen .activity-table-header {
  border-bottom-color: rgba(96, 165, 250, 0.22);
  background: linear-gradient(135deg, rgba(15, 23, 42, 0.98), rgba(30, 64, 175, 0.26));
}

.activity-screen .activity-table-header h3 {
  color: #ffffff;
}

.activity-screen .activity-table-header p {
  color: rgba(226, 232, 240, 0.82);
}

.activity-screen .activity-origin {
  color: #bfdbfe;
}

.activity-screen .activity-result-count {
  color: rgba(219, 234, 254, 0.94);
}

.activity-screen .activity-table th {
  color: rgba(219, 234, 254, 0.96);
  background: rgba(15, 23, 42, 0.42);
}

.activity-screen .activity-table td {
  color: rgba(241, 245, 249, 0.90);
}

.activity-screen .activity-table tbody tr:hover {
  background: rgba(59, 130, 246, 0.10);
}
/* F8-F4-ACTIVITY-VISUAL-PREMIUM-CSS-FIM */

/* F8-F6-ACTIVITY-EMPRESAS-CLEAN-CSS-INICIO */
.activity-screen {
  color: #0f172a;
}

.activity-screen .section-header {
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border-radius: 1.1rem;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
  padding: 1.35rem 1.5rem;
}

.activity-screen .section-kicker {
  color: #92400e;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.activity-screen .section-header h2 {
  color: #0f172a;
}

.activity-screen .section-description {
  color: #475569;
}

.activity-screen .activity-lab-badge {
  border: 1px solid rgba(45, 212, 191, 0.42);
  background: #ecfeff;
  color: #0f766e;
  box-shadow: none;
}

.activity-screen .activity-safety-note {
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-left: 4px solid #d97706;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.05);
  color: #334155;
}

.activity-screen .activity-safety-note strong {
  color: #0f172a;
}

.activity-screen .panel-grid.activity-metrics {
  gap: 1rem;
}

.activity-screen .card.activity-metric {
  align-items: flex-start;
  background: linear-gradient(135deg, #ffffff, #f8fbff);
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 1rem;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06);
  color: #0f172a;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 112px;
  overflow: hidden;
  padding: 1.1rem 1.2rem;
  position: relative;
}

.activity-screen .card.activity-metric:hover {
  border-color: rgba(45, 212, 191, 0.38);
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.08);
  transform: translateY(-1px);
}

.activity-screen .activity-metric .card-label {
  color: #475569;
  display: block;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  line-height: 1.2;
  margin-bottom: 0.45rem;
  text-transform: uppercase;
}

.activity-screen .activity-metric .card-value {
  color: #0f172a;
  display: block;
  font-size: 1.85rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.45rem;
  text-shadow: none;
}

.activity-screen .activity-card-caption {
  color: #64748b;
  display: block;
  font-size: 0.82rem;
  line-height: 1.35;
}

.activity-screen .activity-toolbar {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 1rem;
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.04);
  gap: 0.65rem;
  padding: 0.85rem 1rem;
}

.activity-screen .activity-filter {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.95);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.04);
  color: #0f172a;
  font-weight: 900;
}

.activity-screen .activity-filter:hover,
.activity-screen .activity-filter:focus-visible {
  background: #ecfeff;
  border-color: rgba(20, 184, 166, 0.38);
  color: #0f766e;
  transform: translateY(-1px);
}

.activity-screen .activity-filter.is-active {
  background: #0f172a;
  border-color: #0f172a;
  box-shadow: 0 12px 24px rgba(15, 23, 42, 0.16);
  color: #ffffff;
}

.activity-screen .activity-table-card {
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.95);
  border-radius: 1.1rem;
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06);
  overflow: hidden;
}

.activity-screen .activity-table-header {
  background: #ffffff;
  border-bottom: 1px solid rgba(203, 213, 225, 0.85);
}

.activity-screen .activity-table-header h3 {
  color: #0f172a;
}

.activity-screen .activity-table-header p {
  color: #475569;
}

.activity-screen .activity-origin {
  color: #0f766e;
}

.activity-screen .activity-result-count {
  background: #ffffff;
  color: #475569;
  font-weight: 800;
}

.activity-screen .activity-table {
  background: #ffffff;
}

.activity-screen .activity-table th {
  background: #eaf7fa;
  border-bottom: 1px solid rgba(20, 184, 166, 0.55);
  color: #475569;
}

.activity-screen .activity-table td {
  background: #ffffff;
  color: #0f172a;
}

.activity-screen .activity-table tbody tr:hover td {
  background: #f8fcfd;
}

.activity-screen .activity-empty {
  background: #ffffff;
  color: #64748b;
}

.activity-screen .activity-status--ok {
  background: #dcfce7;
  border-color: #bbf7d0;
  color: #15803d;
}

.activity-screen .activity-status--simulado {
  background: #e0f2fe;
  border-color: #bae6fd;
  color: #0369a1;
}

.activity-screen .activity-status--ignorado {
  background: #fef3c7;
  border-color: #fde68a;
  color: #92400e;
}
/* F8-F6-ACTIVITY-EMPRESAS-CLEAN-CSS-FIM */

/* F8-F7-ACTIVITY-CARDS-STATUS-CORES-CSS-INICIO */
.activity-screen .card.activity-metric {
  isolation: isolate;
}

.activity-screen .card.activity-metric::after {
  content: '';
  position: absolute;
  right: -2.4rem;
  bottom: -2.6rem;
  width: 7.2rem;
  height: 7.2rem;
  border-radius: 999px;
  opacity: 0.46;
  pointer-events: none;
  z-index: 0;
}

.activity-screen .card.activity-metric > * {
  position: relative;
  z-index: 1;
}

.activity-screen .card.activity-metric--eventos {
  background: linear-gradient(135deg, #ffffff 0%, #f7fbff 56%, #eef5ff 100%);
}

.activity-screen .card.activity-metric--eventos::before {
  background: #2563eb;
}

.activity-screen .card.activity-metric--eventos::after {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.42), rgba(96, 165, 250, 0));
}

.activity-screen .card.activity-metric--eventos .card-value {
  color: #2563eb;
}

.activity-screen .card.activity-metric--hoje {
  background: linear-gradient(135deg, #ffffff 0%, #f6fef9 56%, #ecfdf3 100%);
}

.activity-screen .card.activity-metric--hoje::before {
  background: #16a34a;
}

.activity-screen .card.activity-metric--hoje::after {
  background: radial-gradient(circle, rgba(74, 222, 128, 0.40), rgba(74, 222, 128, 0));
}

.activity-screen .card.activity-metric--hoje .card-value {
  color: #16a34a;
}

.activity-screen .card.activity-metric--modulos {
  background: linear-gradient(135deg, #ffffff 0%, #f4fefd 56%, #ecfeff 100%);
}

.activity-screen .card.activity-metric--modulos::before {
  background: #0f766e;
}

.activity-screen .card.activity-metric--modulos::after {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.42), rgba(45, 212, 191, 0));
}

.activity-screen .card.activity-metric--modulos .card-value {
  color: #0f766e;
}

.activity-screen .card.activity-metric--simulados {
  background: linear-gradient(135deg, #ffffff 0%, #fffaf0 56%, #fff7ed 100%);
}

.activity-screen .card.activity-metric--simulados::before {
  background: #d97706;
}

.activity-screen .card.activity-metric--simulados::after {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.40), rgba(251, 191, 36, 0));
}

.activity-screen .card.activity-metric--simulados .card-value {
  color: #d97706;
}

.activity-screen .activity-table .status-pill.activity-status {
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.4rem;
  padding: 0.32rem 0.68rem;
  font-size: 0.78rem;
  font-weight: 900;
  line-height: 1;
}

.activity-screen .activity-table .status-pill.activity-status--ok {
  background: #dcfce7 !important;
  border-color: #86efac !important;
  color: #15803d !important;
}

.activity-screen .activity-table .status-pill.activity-status--simulado {
  background: #e0f2fe !important;
  border-color: #7dd3fc !important;
  color: #0369a1 !important;
}

.activity-screen .activity-table .status-pill.activity-status--ignorado {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

.activity-screen .activity-table th:last-child,
.activity-screen .activity-table td:last-child {
  text-align: center;
}
/* F8-F7-ACTIVITY-CARDS-STATUS-CORES-CSS-FIM */

/* F8-F8-ACTIVITY-CARDS-EMPRESAS-CSS-INICIO */
.activity-screen .panel-grid.activity-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1rem;
}

.activity-screen .panel-grid.activity-metrics .card.activity-metric {
  align-items: flex-start !important;
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
  border-radius: 1rem !important;
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.06) !important;
  display: block !important;
  min-height: 118px !important;
  overflow: hidden !important;
  padding: 1.15rem 1.25rem !important;
  position: relative !important;
}

.activity-screen .panel-grid.activity-metrics .card.activity-metric::before {
  content: none !important;
}

.activity-screen .panel-grid.activity-metrics .card.activity-metric::after {
  content: '';
  position: absolute;
  right: -2.2rem;
  bottom: -2.35rem;
  width: 7.6rem;
  height: 7.6rem;
  border-radius: 999px;
  opacity: 0.58;
  pointer-events: none;
}

.activity-screen .panel-grid.activity-metrics .activity-metric .card-label {
  color: #64748b !important;
  display: block !important;
  font-size: 0.73rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.09em !important;
  line-height: 1.15 !important;
  margin: 0 0 0.7rem 0 !important;
  text-transform: uppercase !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric .card-value {
  display: block !important;
  font-size: 1.75rem !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  line-height: 1 !important;
  margin: 0 0 0.55rem 0 !important;
  text-shadow: none !important;
}

.activity-screen .panel-grid.activity-metrics .activity-card-caption {
  color: #64748b !important;
  display: block !important;
  font-size: 0.82rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
  margin: 0 !important;
  max-width: 82%;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--eventos {
  background: linear-gradient(135deg, #ffffff 0%, #f8fbff 55%, #edf4ff 100%) !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--eventos::after {
  background: radial-gradient(circle, rgba(96, 165, 250, 0.30) 0%, rgba(96, 165, 250, 0.17) 42%, rgba(96, 165, 250, 0) 72%);
}

.activity-screen .panel-grid.activity-metrics .activity-metric--eventos .card-value {
  color: #2563eb !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--hoje {
  background: linear-gradient(135deg, #ffffff 0%, #f7fefa 55%, #eafbf2 100%) !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--hoje::after {
  background: radial-gradient(circle, rgba(74, 222, 128, 0.30) 0%, rgba(74, 222, 128, 0.16) 42%, rgba(74, 222, 128, 0) 72%);
}

.activity-screen .panel-grid.activity-metrics .activity-metric--hoje .card-value {
  color: #16a34a !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--modulos {
  background: linear-gradient(135deg, #ffffff 0%, #f5fdfd 55%, #e8fbfb 100%) !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--modulos::after {
  background: radial-gradient(circle, rgba(45, 212, 191, 0.30) 0%, rgba(45, 212, 191, 0.16) 42%, rgba(45, 212, 191, 0) 72%);
}

.activity-screen .panel-grid.activity-metrics .activity-metric--modulos .card-value {
  color: #0f766e !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--simulados {
  background: linear-gradient(135deg, #ffffff 0%, #fffdfa 55%, #fff4df 100%) !important;
}

.activity-screen .panel-grid.activity-metrics .activity-metric--simulados::after {
  background: radial-gradient(circle, rgba(251, 191, 36, 0.30) 0%, rgba(251, 191, 36, 0.16) 42%, rgba(251, 191, 36, 0) 72%);
}

.activity-screen .panel-grid.activity-metrics .activity-metric--simulados .card-value {
  color: #d97706 !important;
}

@media (max-width: 1020px) {
  .activity-screen .panel-grid.activity-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .activity-screen .panel-grid.activity-metrics {
    grid-template-columns: 1fr;
  }
}
/* F8-F8-ACTIVITY-CARDS-EMPRESAS-CSS-FIM */

/* F8-J1-BOTOES-EMPRESAS-DETALHE-INICIO */
/* F8-J3: visual premium para Empresas/Detalhe e modais. */

#panel #f8-nova-empresa,
#panel #empresas-buscar,
#panel #empresas-limpar,
#panel .f8-lab-actions-detail .f8-lab-button,
#panel [data-f8-area-modal="nova"]:not(.empresa-detalhe-top-new-area-button),
#panel .company-link,
.f8-modal-actions .f8-lab-button[data-f8-modal-save] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.22px !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.30) !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
  border-radius: 16px !important;
  padding: 12px 19px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.42), transparent 20%),
    radial-gradient(circle at 28% 8%, rgba(224,187,126,0.36), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(251,243,228,0.24), transparent 32%),
    linear-gradient(135deg, rgba(154,210,214,0.90) 0%, rgba(42,157,157,0.80) 34%, rgba(19,128,143,0.78) 66%, rgba(11,51,87,0.86) 100%) !important;
  box-shadow:
    0 8px 18px rgba(19,128,143,0.18),
    0 4px 10px rgba(11,51,87,0.12),
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -10px 18px rgba(6,39,68,0.13) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease !important;
}

#panel #f8-nova-empresa::before,
#panel #empresas-buscar::before,
#panel #empresas-limpar::before,
#panel .f8-lab-actions-detail .f8-lab-button::before,
#panel [data-f8-area-modal="nova"]:not(.empresa-detalhe-top-new-area-button)::before,
#panel .company-link::before,
.f8-modal-actions .f8-lab-button[data-f8-modal-save]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 7%;
  width: 86%;
  height: 48%;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.58), rgba(255,255,255,0.22), rgba(251,243,228,0.15), transparent);
  z-index: -1;
  pointer-events: none;
}

#panel #f8-nova-empresa:hover,
#panel #empresas-buscar:hover,
#panel #empresas-limpar:hover,
#panel .f8-lab-actions-detail .f8-lab-button:hover,
#panel [data-f8-area-modal="nova"]:not(.empresa-detalhe-top-new-area-button):hover,
#panel .company-link:hover,
.f8-modal-actions .f8-lab-button[data-f8-modal-save]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) saturate(1.05) !important;
  border-color: rgba(224,187,126,0.72) !important;
  box-shadow:
    0 13px 26px rgba(19,128,143,0.23),
    0 7px 18px rgba(11,51,87,0.16),
    0 3px 12px rgba(192,144,76,0.17),
    inset 0 1px 0 rgba(255,255,255,0.74),
    inset 0 -12px 22px rgba(6,39,68,0.14) !important;
}

#panel #f8-nova-empresa:focus-visible,
#panel #empresas-buscar:focus-visible,
#panel #empresas-limpar:focus-visible,
#panel .f8-lab-actions-detail .f8-lab-button:focus-visible,
#panel [data-f8-area-modal="nova"]:not(.empresa-detalhe-top-new-area-button):focus-visible,
#panel .company-link:focus-visible,
.f8-modal-actions .f8-lab-button[data-f8-modal-save]:focus-visible {
  outline: 3px solid rgba(224,187,126,0.44) !important;
  outline-offset: 3px !important;
}

/* Cancelar dos modais: premium, mas vermelho. */
.f8-modal-actions button[data-f8-modal-close]:not(.f8-lab-button),
.f8-modal-actions button:not(.f8-lab-button) {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.20px !important;
  text-shadow: 0 1px 2px rgba(90,18,18,0.28) !important;
  border: 1px solid rgba(244,163,163,0.72) !important;
  border-radius: 16px !important;
  padding: 12px 19px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.38), transparent 20%),
    radial-gradient(circle at 85% 80%, rgba(255,221,221,0.22), transparent 32%),
    linear-gradient(135deg, rgba(244,102,102,0.92) 0%, rgba(211,64,64,0.90) 46%, rgba(142,38,38,0.94) 100%) !important;
  box-shadow:
    0 8px 18px rgba(211,64,64,0.18),
    0 4px 10px rgba(90,18,18,0.12),
    inset 0 1px 0 rgba(255,255,255,0.56),
    inset 0 -10px 18px rgba(90,18,18,0.14) !important;
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease !important;
}

.f8-modal-actions button[data-f8-modal-close]:not(.f8-lab-button):hover,
.f8-modal-actions button:not(.f8-lab-button):hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.04) saturate(1.04) !important;
  border-color: rgba(255,196,196,0.88) !important;
  box-shadow:
    0 12px 24px rgba(211,64,64,0.24),
    0 6px 16px rgba(90,18,18,0.16),
    inset 0 1px 0 rgba(255,255,255,0.66),
    inset 0 -12px 20px rgba(90,18,18,0.14) !important;
}
/* F8-J1-BOTOES-EMPRESAS-DETALHE-FIM */

/* F8-J5-CORRECAO-NOVA-AREA-MODAL-INICIO */
/* Aplica o padrao premium no Nova area correto e no Salvar simulado do modal de Area. */

#panel .empresas-areas-new-button,
.f8-modal-actions .f8-lab-button[data-f8-area-modal-save] {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  cursor: pointer !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.22px !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.30) !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
  border-radius: 16px !important;
  padding: 12px 19px !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255,255,255,0.42), transparent 20%),
    radial-gradient(circle at 28% 8%, rgba(224,187,126,0.36), transparent 28%),
    radial-gradient(circle at 88% 78%, rgba(251,243,228,0.24), transparent 32%),
    linear-gradient(135deg, rgba(154,210,214,0.90) 0%, rgba(42,157,157,0.80) 34%, rgba(19,128,143,0.78) 66%, rgba(11,51,87,0.86) 100%) !important;
  box-shadow:
    0 8px 18px rgba(19,128,143,0.18),
    0 4px 10px rgba(11,51,87,0.12),
    inset 0 1px 0 rgba(255,255,255,0.62),
    inset 0 -10px 18px rgba(6,39,68,0.13) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease, border-color 0.22s ease !important;
}

#panel .empresas-areas-new-button::before,
.f8-modal-actions .f8-lab-button[data-f8-area-modal-save]::before {
  content: "";
  position: absolute;
  top: 1px;
  left: 7%;
  width: 86%;
  height: 48%;
  border-radius: 0 0 18px 18px;
  background: linear-gradient(to bottom, rgba(255,255,255,0.58), rgba(255,255,255,0.22), rgba(251,243,228,0.15), transparent);
  z-index: -1;
  pointer-events: none;
}

#panel .empresas-areas-new-button:hover,
.f8-modal-actions .f8-lab-button[data-f8-area-modal-save]:hover {
  transform: translateY(-2px) !important;
  filter: brightness(1.06) saturate(1.05) !important;
  border-color: rgba(224,187,126,0.72) !important;
  box-shadow:
    0 13px 26px rgba(19,128,143,0.23),
    0 7px 18px rgba(11,51,87,0.16),
    0 3px 12px rgba(192,144,76,0.17),
    inset 0 1px 0 rgba(255,255,255,0.74),
    inset 0 -12px 22px rgba(6,39,68,0.14) !important;
}

#panel .empresas-areas-new-button:focus-visible,
.f8-modal-actions .f8-lab-button[data-f8-area-modal-save]:focus-visible {
  outline: 3px solid rgba(224,187,126,0.44) !important;
  outline-offset: 3px !important;
}
/* F8-J5-CORRECAO-NOVA-AREA-MODAL-FIM */

/* F8-J8-MODAIS-EMPRESA-AREA-CLAROS-INICIO */
/* Escopo: modais F8 de Nova Empresa e Nova Area. Nao altera botoes ja aprovados. */

.f8-modal {
  background:
    radial-gradient(circle at top left, rgba(154, 210, 214, 0.18), transparent 34%),
    radial-gradient(circle at bottom right, rgba(224, 187, 126, 0.14), transparent 32%),
    rgba(6, 39, 68, 0.36) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

.f8-modal-card {
  color: #2c3a45 !important;
  background:
    radial-gradient(circle at 14% 0%, rgba(154, 210, 214, 0.20), transparent 30%),
    radial-gradient(circle at 92% 12%, rgba(251, 243, 228, 0.78), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 54%, #f3f8fa 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.50) !important;
  box-shadow:
    0 24px 70px rgba(6, 39, 68, 0.22),
    0 10px 28px rgba(15, 128, 143, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.f8-modal-head {
  border-bottom: 1px solid rgba(226, 232, 236, 0.95) !important;
}

.f8-modal-head h3 {
  color: #243746 !important;
  text-shadow: none !important;
}

.f8-modal-head p,
.f8-modal-card .muted,
.f8-modal-card p.muted {
  color: #5f7280 !important;
}

.f8-modal-field span {
  color: #344b5b !important;
  font-weight: 800 !important;
  letter-spacing: 0.12px !important;
}

.f8-modal-card .input {
  color: #243746 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.66) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 3px 10px rgba(6, 39, 68, 0.05) !important;
}

.f8-modal-card .input:focus {
  border-color: rgba(19, 128, 143, 0.82) !important;
  box-shadow:
    0 0 0 4px rgba(154, 210, 214, 0.24),
    0 8px 18px rgba(19, 128, 143, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  outline: none !important;
}

.f8-modal-card .input:disabled {
  color: #667985 !important;
  background:
    linear-gradient(180deg, #eef5f6 0%, #e8f0f2 100%) !important;
  border-color: rgba(203, 213, 220, 0.88) !important;
  opacity: 1 !important;
}

.f8-modal-card .f8-lab-badge {
  color: #0f5964 !important;
  background:
    linear-gradient(135deg, rgba(234, 246, 246, 0.98), rgba(251, 243, 228, 0.94)) !important;
  border: 1px solid rgba(154, 210, 214, 0.72) !important;
  box-shadow: 0 6px 14px rgba(6, 39, 68, 0.07) !important;
}

/* F8-J8-MODAIS-EMPRESA-AREA-CLAROS-FIM */

/* F8-L1-FILTROS-VISUAIS-PADRAO-EMPRESAS-INICIO */
/* Escopo: filtros visuais de Relatorios, Activity e Denuncias conforme F8-J9. */
/* Regra: filtro normal branco/grafite; filtro selecionado grafite/branco. */

/* Paineis de filtros claros/premium */
.relatorios-screen .relatorios-filters,
.activity-screen .activity-toolbar,
.denuncias-admin-tabs {
  background:
    radial-gradient(circle at 12% 0%, rgba(154, 210, 214, 0.14), transparent 32%),
    radial-gradient(circle at 92% 8%, rgba(251, 243, 228, 0.68), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfc 58%, #f3f8fa 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.48) !important;
  box-shadow:
    0 14px 34px rgba(6, 39, 68, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
  border-radius: 22px !important;
}

/* Filtros nao selecionados */
.relatorios-screen .relatorios-filter:not(.is-active),
.activity-screen .activity-filter:not(.is-active),
.denuncias-admin-tabs .denuncias-admin-tab:not(.is-active) {
  position: relative !important;
  color: #2c3a45 !important;
  background:
    linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.62) !important;
  border-radius: 999px !important;
  box-shadow:
    0 6px 14px rgba(6, 39, 68, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
  font-weight: 800 !important;
  text-shadow: none !important;
  transition:
    transform 0.20s ease,
    box-shadow 0.20s ease,
    border-color 0.20s ease,
    background 0.20s ease,
    color 0.20s ease !important;
}

.relatorios-screen .relatorios-filter:not(.is-active):hover,
.activity-screen .activity-filter:not(.is-active):hover,
.denuncias-admin-tabs .denuncias-admin-tab:not(.is-active):hover {
  transform: translateY(-1px) !important;
  color: #0f5964 !important;
  border-color: rgba(19, 128, 143, 0.70) !important;
  box-shadow:
    0 10px 22px rgba(19, 128, 143, 0.13),
    inset 0 1px 0 rgba(255, 255, 255, 0.95) !important;
}

/* Filtros selecionados */
.relatorios-screen .relatorios-filter.is-active,
.activity-screen .activity-filter.is-active,
.denuncias-admin-tabs .denuncias-admin-tab.is-active {
  position: relative !important;
  color: #ffffff !important;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 255, 255, 0.18), transparent 24%),
    linear-gradient(135deg, #111827 0%, #1f2937 48%, #0f172a 100%) !important;
  border: 1px solid rgba(224, 187, 126, 0.70) !important;
  border-radius: 999px !important;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.22),
    0 4px 12px rgba(192, 144, 76, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28) !important;
}

/* Preservar contadores das tabs de Denuncias */
.denuncias-admin-tabs .denuncias-admin-tab strong {
  color: inherit !important;
  font-weight: 900 !important;
}

/* Preservar dots das tabs de Denuncias, apenas reforcando contraste sem alterar content */
.denuncias-admin-tabs .denuncias-admin-tab::before {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.72),
    0 3px 8px rgba(6, 39, 68, 0.16) !important;
}

.denuncias-admin-tabs .denuncias-admin-tab.is-active::before {
  box-shadow:
    0 0 0 3px rgba(255, 255, 255, 0.34),
    0 3px 8px rgba(0, 0, 0, 0.20) !important;
}

/* Foco acessivel */
.relatorios-screen .relatorios-filter:focus-visible,
.activity-screen .activity-filter:focus-visible,
.denuncias-admin-tabs .denuncias-admin-tab:focus-visible {
  outline: 3px solid rgba(224, 187, 126, 0.46) !important;
  outline-offset: 3px !important;
}
/* F8-L1-FILTROS-VISUAIS-PADRAO-EMPRESAS-FIM */

/* F8-L2-RELATORIOS-CARDS-ORDER-CSS-INICIO */
/* Escopo: somente tela Relatorios. Objetivo: cards no padrao Empresas e filtros abaixo dos cards. */

.relatorios-screen {
  display: flex;
  flex-direction: column;
}

.relatorios-screen .relatorios-hero {
  order: 0;
}

.relatorios-screen .relatorios-metrics {
  order: 1;
  margin-top: 18px;
  margin-bottom: 18px;
}

.relatorios-screen .relatorios-toolbar {
  order: 2;
  margin-top: 0;
  margin-bottom: 22px;
}

.relatorios-screen .relatorios-visual-grid {
  order: 3;
}

.relatorios-screen .relatorios-metric {
  position: relative;
  overflow: hidden;
  padding: 22px 22px 20px;
  border-radius: 24px;
  border: 1px solid rgba(148, 163, 184, 0.26);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 252, 0.96) 100%);
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.08);
  transition:
    transform 180ms ease,
    box-shadow 180ms ease,
    border-color 180ms ease,
    background 180ms ease;
}

.relatorios-screen .relatorios-metric::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: linear-gradient(
    90deg,
    rgba(20, 184, 166, 0.86),
    rgba(15, 23, 42, 0.92),
    rgba(202, 138, 4, 0.78)
  );
  pointer-events: none;
}

.relatorios-screen .relatorios-metric:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 184, 166, 0.34);
  box-shadow: 0 24px 58px rgba(15, 23, 42, 0.12);
}

.relatorios-screen .relatorios-metric .card-label {
  margin: 0 0 8px;
  color: #334155;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.relatorios-screen .relatorios-metric .card-value {
  margin: 0;
  font-size: clamp(1.9rem, 3vw, 2.55rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.045em;
}

.relatorios-screen .relatorios-metric small {
  display: block;
  margin-top: 10px;
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 650;
  line-height: 1.45;
}

@media (max-width: 760px) {
  .relatorios-screen .relatorios-metrics {
    margin-top: 14px;
    margin-bottom: 14px;
  }

  .relatorios-screen .relatorios-toolbar {
    margin-bottom: 18px;
  }

  .relatorios-screen .relatorios-metric {
    padding: 20px;
    border-radius: 22px;
  }
}
/* F8-L2-RELATORIOS-CARDS-ORDER-CSS-FIM */

/* F8-L3-RELATORIOS-CARDS-CORRETIVO-CSS-INICIO */
/* Escopo: somente cards da tela Relatorios. Mantem a ordem do F8-L2 e corrige visual para o padrao dos cards aprovados. */

.relatorios-screen .relatorios-metric {
  padding: 18px 18px 16px;
  min-height: 116px;
  border-radius: 22px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(248, 250, 252, 0.94) 100%);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

.relatorios-screen .relatorios-metric::before {
  display: none;
}

.relatorios-screen .relatorios-metric:hover {
  transform: translateY(-1px);
  border-color: rgba(15, 23, 42, 0.14);
  box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
}

.relatorios-screen .relatorios-metric .card-label {
  margin: 0 0 7px;
  color: #334155;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

.relatorios-screen .relatorios-metric .card-value {
  margin: 0;
  font-size: clamp(1.72rem, 2.6vw, 2.25rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.04em;
}

.relatorios-screen .relatorios-metric small {
  display: block;
  margin-top: 8px;
  color: #64748b;
  font-size: 0.84rem;
  font-weight: 650;
  line-height: 1.4;
}

@media (max-width: 760px) {
  .relatorios-screen .relatorios-metric {
    padding: 17px;
    min-height: 106px;
    border-radius: 20px;
  }

  .relatorios-screen .relatorios-metric .card-value {
    font-size: clamp(1.55rem, 8vw, 2rem);
  }
}
/* F8-L3-RELATORIOS-CARDS-CORRETIVO-CSS-FIM */

/* F8-L6-RELATORIOS-PAINEL-FILTROS-PADRAO-EMPRESAS-INICIO */
/* Escopo: somente painel de filtros da tela Relatorios. Objetivo: remover caixa branca aparente e igualar ao fundo premium do padrao Empresas. */

.relatorios-screen .relatorios-toolbar {
  background:
    radial-gradient(circle at 88% 18%, rgba(202, 138, 4, 0.10), transparent 34%),
    radial-gradient(circle at 9% 18%, rgba(20, 184, 166, 0.10), transparent 30%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.78) 0%, rgba(248, 250, 252, 0.70) 100%);
  border: 1px solid rgba(125, 211, 252, 0.46);
  border-radius: 24px;
  box-shadow:
    0 18px 42px rgba(15, 23, 42, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
  padding: 18px 20px;
}

.relatorios-screen .relatorios-filters {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.relatorios-screen .relatorios-search {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.relatorios-screen .relatorios-search label {
  color: #334155;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.relatorios-screen .relatorios-search input {
  background: rgba(255, 255, 255, 0.76);
  border: 1px solid rgba(148, 163, 184, 0.36);
  border-radius: 16px;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.relatorios-screen .relatorios-search input:focus {
  background: rgba(255, 255, 255, 0.94);
  border-color: rgba(20, 184, 166, 0.48);
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.10),
    0 12px 26px rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
  .relatorios-screen .relatorios-toolbar {
    padding: 16px;
    border-radius: 22px;
  }
}
/* F8-L6-RELATORIOS-PAINEL-FILTROS-PADRAO-EMPRESAS-FIM */

/* F8-L7-RELATORIOS-FILTROS-SEM-LINHAS-BUSCA-BRANCA-INICIO */
/* Escopo: somente tela Relatorios. Corrige linhas entre filtros e restaura busca com fundo branco. */

.relatorios-screen .relatorios-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  box-shadow: none;
  outline: 0;
  padding: 0;
}

.relatorios-screen .relatorios-filters::before,
.relatorios-screen .relatorios-filters::after {
  content: none;
  display: none;
}

.relatorios-screen .relatorios-filter,
.relatorios-screen .relatorios-filter:not(.is-active) {
  margin: 0;
  border-left: 1px solid rgba(125, 211, 252, 0.58);
  border-right: 1px solid rgba(125, 211, 252, 0.58);
  border-top: 1px solid rgba(125, 211, 252, 0.58);
  border-bottom: 1px solid rgba(125, 211, 252, 0.58);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.86);
  box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  outline: 0;
}

.relatorios-screen .relatorios-filter::before,
.relatorios-screen .relatorios-filter::after {
  content: none;
  display: none;
}

.relatorios-screen .relatorios-filter + .relatorios-filter {
  margin-left: 0;
}

.relatorios-screen .relatorios-filter.is-active {
  background: linear-gradient(135deg, #111827 0%, #0f172a 100%);
  border-color: rgba(202, 138, 4, 0.24);
  color: #ffffff;
  box-shadow:
    0 10px 24px rgba(15, 23, 42, 0.22),
    0 0 0 1px rgba(202, 138, 4, 0.16);
}

.relatorios-screen .relatorios-search {
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
}

.relatorios-screen .relatorios-search input {
  background: #ffffff;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 16px;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
}

.relatorios-screen .relatorios-search input:focus {
  background: #ffffff;
  border-color: rgba(20, 184, 166, 0.52);
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.11),
    0 10px 24px rgba(15, 23, 42, 0.08);
}

@media (max-width: 760px) {
  .relatorios-screen .relatorios-filters {
    gap: 8px;
  }
}
/* F8-L7-RELATORIOS-FILTROS-SEM-LINHAS-BUSCA-BRANCA-FIM */

/* F8-L9-RELATORIOS-FILTROS-FINAL-DOM-REAL-INICIO */
/* Escopo: somente Relatorios. Baseado no DOM real: input.relatorios-search e container .relatorios-filters. */

/* Remove definitivamente o painel interno atras dos botoes. */
.relatorios-screen .relatorios-toolbar > .relatorios-filters {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 10px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-left: 0 !important;
  border-right: 0 !important;
  border-top: 0 !important;
  border-bottom: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  outline: 0 !important;
  overflow: visible !important;
}

.relatorios-screen .relatorios-toolbar > .relatorios-filters::before,
.relatorios-screen .relatorios-toolbar > .relatorios-filters::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Mantem apenas os botoes individuais como pills, sem trilho/linha entre eles. */
.relatorios-screen .relatorios-toolbar > .relatorios-filters > .relatorios-filter {
  margin: 0 !important;
  border-radius: 999px !important;
  background-clip: padding-box !important;
  position: relative !important;
  z-index: 1 !important;
}

.relatorios-screen .relatorios-toolbar > .relatorios-filters > .relatorios-filter::before,
.relatorios-screen .relatorios-toolbar > .relatorios-filters > .relatorios-filter::after {
  content: none !important;
  display: none !important;
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* Corrige o alvo real da busca: o input em si tem class="relatorios-search". */
.relatorios-screen .relatorios-search-wrap {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

.relatorios-screen .relatorios-search-wrap > span {
  color: #334155 !important;
  font-weight: 900 !important;
  letter-spacing: 0.08em !important;
}

.relatorios-screen input.relatorios-search,
.relatorios-screen .relatorios-search-wrap > input.relatorios-search {
  display: block !important;
  width: 100% !important;
  min-height: 40px !important;
  padding: 10px 14px !important;
  background: #ffffff !important;
  background-color: #ffffff !important;
  background-image: none !important;
  border: 1px solid rgba(148, 163, 184, 0.42) !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
  color: #111827 !important;
  outline: 0 !important;
}

.relatorios-screen input.relatorios-search:focus,
.relatorios-screen .relatorios-search-wrap > input.relatorios-search:focus {
  background: #ffffff !important;
  background-color: #ffffff !important;
  border-color: rgba(20, 184, 166, 0.52) !important;
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.11),
    0 10px 24px rgba(15, 23, 42, 0.08) !important;
}

@media (max-width: 760px) {
  .relatorios-screen .relatorios-toolbar > .relatorios-filters {
    gap: 8px !important;
  }
}
/* F8-L9-RELATORIOS-FILTROS-FINAL-DOM-REAL-FIM */

/* F8-M2-BOTOES-SECUNDARIOS-GLASS-CSS-INICIO */
/*
  Escopo:
  - CSS-only.
  - Padroniza botoes utilitarios fora do padrao Empresas.
  - Nao altera JS, HTML, backend, banco, .env ou rotas.
  - Evita seletores globais amplos como button, .primary e .ghost.
*/

/* Base compartilhada dos botoes utilitarios mapeados no diagnostico F8-M1 */
#empresas-buscar,
#empresas-limpar,
#empresas-prev,
#empresas-next,
#areas-search,
#areas-clear,
.denuncias-admin-screen .button.button-secondary {
  appearance: none;
  min-height: 42px;
  padding: 0.68rem 1.05rem;
  border-radius: 999px;
  border: 1px solid rgba(14, 116, 144, 0.24);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transform: translateY(0);
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    opacity 160ms ease;
}

/* Acoes principais de busca: glass teal/navy com acento premium */
#empresas-buscar,
#areas-search {
  color: #ffffff;
  border-color: rgba(212, 175, 55, 0.34);
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(15, 44, 67, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0));
  box-shadow:
    0 16px 34px rgba(15, 44, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24);
}

#empresas-buscar:hover,
#areas-search:hover {
  transform: translateY(-1px);
  border-color: rgba(212, 175, 55, 0.52);
  box-shadow:
    0 20px 42px rgba(15, 44, 67, 0.24),
    inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

/* Acoes secundarias: glass claro, mantendo hierarquia abaixo dos botoes principais */
#empresas-limpar,
#empresas-prev,
#empresas-next,
#areas-clear,
.denuncias-admin-screen .button.button-secondary {
  color: #26323f;
  border-color: rgba(15, 44, 67, 0.16);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0));
  box-shadow:
    0 12px 26px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.82);
}

#empresas-limpar:hover,
#empresas-prev:hover,
#empresas-next:hover,
#areas-clear:hover,
.denuncias-admin-screen .button.button-secondary:hover {
  transform: translateY(-1px);
  color: #101923;
  border-color: rgba(15, 118, 110, 0.30);
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 247, 0.94)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0));
  box-shadow:
    0 16px 32px rgba(15, 44, 67, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.90);
}

/* Estados de teclado e acessibilidade visual */
#empresas-buscar:focus-visible,
#empresas-limpar:focus-visible,
#empresas-prev:focus-visible,
#empresas-next:focus-visible,
#areas-search:focus-visible,
#areas-clear:focus-visible,
.denuncias-admin-screen .button.button-secondary:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.22);
  outline-offset: 3px;
}

/* Paginacao desabilitada: clara, sem parecer acao disponivel */
#empresas-prev:disabled,
#empresas-next:disabled,
#empresas-prev[disabled],
#empresas-next[disabled] {
  cursor: not-allowed;
  opacity: 0.54;
  transform: none;
  color: #7b8794;
  border-color: rgba(148, 163, 184, 0.22);
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.76));
  box-shadow: none;
}

/* Responsividade fina: botoes utilitarios ocupam melhor a largura em telas pequenas */
@media (max-width: 640px) {
  #empresas-buscar,
  #empresas-limpar,
  #empresas-prev,
  #empresas-next,
  #areas-search,
  #areas-clear,
  .denuncias-admin-screen .button.button-secondary {
    width: 100%;
    min-height: 44px;
  }
}
/* F8-M2-BOTOES-SECUNDARIOS-GLASS-CSS-FIM */

/* F8-M4-DENUNCIAS-PAINEL-CARDS-BOTOES-CSS-INICIO */
/*
  Escopo:
  - CSS-only.
  - Ajusta apenas tela Denuncias.
  - Nao altera tabs, dots, contadores, tabela, JS, HTML, backend, banco ou .env.
  - Usa !important apenas onde necessario para vencer o CSS antigo de Denuncias.
*/

/* Container principal de Denuncias: base clara no padrao visual atual */
.section-card.denuncias-admin-screen {
  color: #17202a !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.10) !important;
  border-radius: 28px !important;
  box-shadow:
    0 24px 60px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
}

/* Shell interno: remove aparencia antiga e preserva hierarquia clara */
.denuncias-admin-screen .denuncias-admin-shell {
  color: #17202a !important;
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* Cards/KPIs de Denuncias no padrao claro premium */
.denuncias-admin-screen .denuncias-admin-metrics {
  gap: 1rem !important;
}

.denuncias-admin-screen .denuncias-admin-metric {
  position: relative !important;
  overflow: hidden !important;
  min-height: 116px !important;
  padding: 1.05rem 1.1rem !important;
  border-radius: 24px !important;
  color: #17202a !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 250, 0.94)) !important;
  border: 1px solid rgba(15, 44, 67, 0.11) !important;
  box-shadow:
    0 18px 42px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.denuncias-admin-screen .denuncias-admin-metric::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 auto 0 0 !important;
  width: 5px !important;
  background: linear-gradient(180deg, #0f766e, #d4af37) !important;
  opacity: 0.95 !important;
}

.denuncias-admin-screen .denuncias-admin-metric-value {
  color: #0f2c43 !important;
  font-weight: 900 !important;
  letter-spacing: -0.035em !important;
  text-shadow: none !important;
}

.denuncias-admin-screen .denuncias-admin-metric-label {
  color: #536171 !important;
  font-weight: 800 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

/* Painel de filtros de Denuncias: claro, arredondado e sem fundo navy */
.denuncias-admin-screen .denuncias-admin-filters {
  color: #17202a !important;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.98), rgba(247, 250, 252, 0.94)) !important;
  border: 1px solid rgba(15, 44, 67, 0.10) !important;
  border-radius: 24px !important;
  box-shadow:
    0 16px 40px rgba(15, 44, 67, 0.09),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

/* Campos do painel: claros, com texto grafite */
.denuncias-admin-screen .denuncias-admin-filters input,
.denuncias-admin-screen .denuncias-admin-filters select {
  color: #17202a !important;
  background: rgba(255, 255, 255, 0.96) !important;
  border: 1px solid rgba(15, 44, 67, 0.14) !important;
  border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.78) !important;
}

.denuncias-admin-screen .denuncias-admin-filters input:focus,
.denuncias-admin-screen .denuncias-admin-filters select:focus {
  border-color: rgba(15, 118, 110, 0.42) !important;
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.86) !important;
  outline: none !important;
}

/* Botoes de Denuncias: vence regras antigas com !important pontual */
.denuncias-admin-screen .denuncias-admin-filters .button,
.denuncias-admin-screen .button.button-secondary,
.denuncias-admin-screen .button.button-primary {
  appearance: none !important;
  min-height: 42px !important;
  padding: 0.68rem 1.05rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transform: translateY(0) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    opacity 160ms ease !important;
}

/* Primarios CSV/Excel: glass teal/navy/gold */
.denuncias-admin-screen .denuncias-admin-filters .button.button-primary,
.denuncias-admin-screen .button.button-primary {
  color: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.34) !important;
  background:
    linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(15, 44, 67, 0.96)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)) !important;
  box-shadow:
    0 16px 34px rgba(15, 44, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

/* Secundario Limpar periodo: glass claro */
.denuncias-admin-screen .denuncias-admin-filters .button.button-secondary,
.denuncias-admin-screen .button.button-secondary {
  color: #26323f !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(244, 248, 250, 0.90)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)) !important;
  box-shadow:
    0 12px 26px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.84) !important;
}

.denuncias-admin-screen .denuncias-admin-filters .button:hover,
.denuncias-admin-screen .button.button-secondary:hover,
.denuncias-admin-screen .button.button-primary:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(212, 175, 55, 0.48) !important;
  box-shadow:
    0 20px 42px rgba(15, 44, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.denuncias-admin-screen .denuncias-admin-filters .button:focus-visible,
.denuncias-admin-screen .button.button-secondary:focus-visible,
.denuncias-admin-screen .button.button-primary:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.22) !important;
  outline-offset: 3px !important;
}

/* Mantem tabela clara, apenas refinando borda/sombra externa */
.denuncias-admin-screen .denuncias-admin-table-wrap {
  background: #ffffff !important;
  border: 1px solid rgba(15, 44, 67, 0.10) !important;
  border-radius: 24px !important;
  box-shadow: 0 16px 40px rgba(15, 44, 67, 0.08) !important;
}

/* Responsividade sem reescrever layout */
@media (max-width: 640px) {
  .denuncias-admin-screen .denuncias-admin-filters .button,
  .denuncias-admin-screen .button.button-secondary,
  .denuncias-admin-screen .button.button-primary {
    width: 100% !important;
    min-height: 44px !important;
  }
}
/* F8-M4-DENUNCIAS-PAINEL-CARDS-BOTOES-CSS-FIM */

/* F8-M5-DENUNCIAS-CARDS-BOTOES-GLASS-CORRETIVO-CSS-INICIO */
/*
  Corretivo visual F8-M5:
  - Ajusta somente Denuncias.
  - Reforca cards/KPIs no padrao claro premium.
  - Reforca botoes Limpar periodo, CSV e Excel em glass.
  - Amplia o painel de filtros para o design aparecer corretamente.
  - Nao altera tabs, dots, contadores, tabela, JS, HTML, backend, banco ou .env.
*/

/* Cards/KPIs: aproximar do padrao Empresas/Relatorios com base clara, profundidade e acento */
.section-card.denuncias-admin-screen .denuncias-admin-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(205px, 1fr)) !important;
  gap: 1.05rem !important;
  margin: 1.15rem 0 1.35rem !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 128px !important;
  padding: 1.18rem 1.22rem 1.08rem 1.38rem !important;
  border-radius: 26px !important;
  color: #162231 !important;
  background:
    radial-gradient(circle at 92% 12%, rgba(212, 175, 55, 0.16), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 249, 251, 0.95)) !important;
  border: 1px solid rgba(15, 44, 67, 0.12) !important;
  box-shadow:
    0 22px 48px rgba(15, 44, 67, 0.12),
    0 4px 14px rgba(15, 44, 67, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94) !important;
  transform: translateY(0) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(15, 118, 110, 0.22) !important;
  box-shadow:
    0 26px 56px rgba(15, 44, 67, 0.15),
    0 6px 18px rgba(15, 44, 67, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.96) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric::before {
  content: "" !important;
  position: absolute !important;
  inset: 14px auto 14px 0 !important;
  width: 5px !important;
  border-radius: 999px !important;
  background: linear-gradient(180deg, #0f766e 0%, #d4af37 100%) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric::after {
  content: "" !important;
  position: absolute !important;
  width: 84px !important;
  height: 84px !important;
  right: -28px !important;
  top: -28px !important;
  border-radius: 999px !important;
  background: radial-gradient(circle, rgba(15, 118, 110, 0.14), transparent 68%) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric-value {
  position: relative !important;
  z-index: 1 !important;
  color: #0f2c43 !important;
  font-size: clamp(2rem, 2.7vw, 2.75rem) !important;
  font-weight: 950 !important;
  line-height: 0.98 !important;
  letter-spacing: -0.055em !important;
  text-shadow: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric-label {
  position: relative !important;
  z-index: 1 !important;
  margin-top: 0.38rem !important;
  color: #4f5f70 !important;
  font-size: 0.84rem !important;
  font-weight: 850 !important;
  line-height: 1.2 !important;
  letter-spacing: 0.015em !important;
  text-transform: none !important;
}

/* Painel de filtros: mais area visual para o card/painel aparecer atras dos campos e botoes */
.section-card.denuncias-admin-screen .denuncias-admin-filters {
  width: 100% !important;
  box-sizing: border-box !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)) !important;
  align-items: end !important;
  gap: 1rem !important;
  padding: 1.18rem !important;
  margin: 1rem 0 1.2rem !important;
  border-radius: 26px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(212, 175, 55, 0.12), transparent 28%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 251, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.12) !important;
  box-shadow:
    0 18px 44px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-filters > * {
  min-width: 0 !important;
}

/* Botoes dentro dos filtros: tamanho suficiente para o glass aparecer */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button,
.section-card.denuncias-admin-screen .denuncias-admin-filters button,
.section-card.denuncias-admin-screen .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-primary {
  position: relative !important;
  isolation: isolate !important;
  overflow: hidden !important;
  min-height: 44px !important;
  width: 100% !important;
  padding: 0.72rem 1.12rem !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  font-weight: 900 !important;
  letter-spacing: 0.01em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  cursor: pointer !important;
  text-shadow: none !important;
  backdrop-filter: blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(135%) !important;
  transform: translateY(0) !important;
  transition:
    transform 160ms ease,
    box-shadow 160ms ease,
    border-color 160ms ease,
    background 160ms ease,
    color 160ms ease,
    opacity 160ms ease !important;
}

/* Brilho interno glass sem depender da estrutura do botao */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button::before,
.section-card.denuncias-admin-screen .denuncias-admin-filters button::before,
.section-card.denuncias-admin-screen .button.button-secondary::before,
.section-card.denuncias-admin-screen .button.button-primary::before {
  content: "" !important;
  position: absolute !important;
  inset: 1px !important;
  border-radius: inherit !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.05) 44%, rgba(255, 255, 255, 0)) !important;
  opacity: 0.82 !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

/* CSV/Excel: glass principal com teal/navy/gold, menos estatico */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-primary,
.section-card.denuncias-admin-screen .button.button-primary {
  color: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.42) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.26), transparent 30%),
    radial-gradient(circle at 88% 100%, rgba(212, 175, 55, 0.26), transparent 34%),
    linear-gradient(135deg, rgba(15, 118, 110, 0.82), rgba(15, 44, 67, 0.92)) !important;
  box-shadow:
    0 18px 40px rgba(15, 44, 67, 0.22),
    0 5px 14px rgba(15, 118, 110, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* Limpar periodo: glass secundario claro real */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-secondary {
  color: #243140 !important;
  border: 1px solid rgba(15, 118, 110, 0.24) !important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.82), transparent 34%),
    radial-gradient(circle at 92% 100%, rgba(15, 118, 110, 0.12), transparent 38%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.76), rgba(238, 247, 247, 0.66)) !important;
  box-shadow:
    0 16px 34px rgba(15, 44, 67, 0.13),
    0 4px 12px rgba(15, 118, 110, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Hover dos botoes: mais vivo, ainda premium */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button:hover,
.section-card.denuncias-admin-screen .denuncias-admin-filters button:hover,
.section-card.denuncias-admin-screen .button.button-secondary:hover,
.section-card.denuncias-admin-screen .button.button-primary:hover {
  transform: translateY(-1px) !important;
  border-color: rgba(212, 175, 55, 0.54) !important;
  box-shadow:
    0 22px 48px rgba(15, 44, 67, 0.20),
    0 6px 16px rgba(15, 118, 110, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.34) !important;
}

/* Foco acessivel */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button:focus-visible,
.section-card.denuncias-admin-screen .denuncias-admin-filters button:focus-visible,
.section-card.denuncias-admin-screen .button.button-secondary:focus-visible,
.section-card.denuncias-admin-screen .button.button-primary:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.24) !important;
  outline-offset: 3px !important;
}

/* Responsividade: preserva painel visivel em telas pequenas */
@media (max-width: 760px) {
  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-metrics {
    grid-template-columns: 1fr !important;
  }
}
/* F8-M5-DENUNCIAS-CARDS-BOTOES-GLASS-CORRETIVO-CSS-FIM */

/* F8-M6-DENUNCIAS-TABS-FILTROS-BOTOES-AJUSTE-FINO-CSS-INICIO */
/*
  Ajuste fino F8-M6:
  - Corrige tamanho excessivo dos botoes CSV, Excel e Limpar periodo.
  - Amplia o painel superior dos status/tabs.
  - Centraliza os botoes de status dentro do painel.
  - Da mais destaque ao campo de busca por protocolo.
  - CSS-only, escopado apenas em Denuncias.
*/

/* Painel superior dos filtros de status: maior, claro e com botoes centralizados */
.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 92px !important;
  padding: 1.12rem 1.25rem !important;
  margin: 1rem 0 1.15rem !important;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.72rem !important;
  border-radius: 28px !important;
  color: #17202a !important;
  background:
    radial-gradient(circle at 94% 0%, rgba(212, 175, 55, 0.12), transparent 30%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(246, 250, 251, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.12) !important;
  box-shadow:
    0 18px 44px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Botoes/chips dos status: ficam dentro do painel, com altura uniforme */
.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
  min-height: 44px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.45rem !important;
  padding: 0.68rem 1rem !important;
  border-radius: 999px !important;
  flex: 0 1 auto !important;
  text-align: center !important;
}

/* Painel dos filtros inferiores: mais organizado, sem apertar o campo de protocolo */
.section-card.denuncias-admin-screen .denuncias-admin-filters {
  grid-template-columns: repeat(4, minmax(138px, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0.85rem !important;
  padding: 1.22rem !important;
}

/* Campo Buscar por protocolo: linha propria, mais largo e com aparencia de subpainel */
.section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i] {
  grid-column: 1 / -1 !important;
  width: 100% !important;
  min-width: 100% !important;
  min-height: 48px !important;
  padding: 0.78rem 1rem !important;
  border-radius: 20px !important;
  color: #17202a !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(15, 118, 110, 0.08), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 252, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.14) !important;
  box-shadow:
    0 10px 24px rgba(15, 44, 67, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Botoes CSV, Excel e Limpar periodo: corrigir excesso de largura/tamanho do F8-M5 */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button,
.section-card.denuncias-admin-screen .denuncias-admin-filters button,
.section-card.denuncias-admin-screen .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-primary {
  width: auto !important;
  min-width: 126px !important;
  max-width: 172px !important;
  min-height: 40px !important;
  padding: 0.58rem 0.92rem !important;
  justify-self: center !important;
  align-self: center !important;
  font-size: 0.88rem !important;
  border-radius: 999px !important;
}

/* Botoes principais CSV/Excel: glass mais refinado e menos chapado */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-primary,
.section-card.denuncias-admin-screen .button.button-primary {
  color: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.36) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.03) 42%, rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(15, 118, 110, 0.88), rgba(15, 44, 67, 0.94)) !important;
  box-shadow:
    0 12px 26px rgba(15, 44, 67, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

/* Limpar periodo: glass secundario claro, menor e alinhado */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-secondary {
  color: #26323f !important;
  border: 1px solid rgba(15, 118, 110, 0.22) !important;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.18) 44%, rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.90), rgba(238, 247, 247, 0.78)) !important;
  box-shadow:
    0 10px 22px rgba(15, 44, 67, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Hover menos exagerado, mantendo premium */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button:hover,
.section-card.denuncias-admin-screen .denuncias-admin-filters button:hover,
.section-card.denuncias-admin-screen .button.button-secondary:hover,
.section-card.denuncias-admin-screen .button.button-primary:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    0 14px 30px rgba(15, 44, 67, 0.16),
    inset 0 1px 0 rgba(255, 255, 255, 0.32) !important;
}

/* Responsividade: manter painel e botoes organizados em telas menores */
@media (max-width: 900px) {
  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: center !important;
    padding: 1rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: 1fr !important;
    padding: 1rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters .button,
  .section-card.denuncias-admin-screen .denuncias-admin-filters button,
  .section-card.denuncias-admin-screen .button.button-secondary,
  .section-card.denuncias-admin-screen .button.button-primary {
    width: 100% !important;
    max-width: none !important;
  }
}
/* F8-M6-DENUNCIAS-TABS-FILTROS-BOTOES-AJUSTE-FINO-CSS-FIM */

/* F8-M7-DENUNCIAS-TABS-UMA-LINHA-CSS-INICIO */
/*
  Ajuste fino F8-M7:
  - Mantem os filtros superiores de Denuncias em uma unica linha.
  - Evita quebra para duas linhas em telas com largura suficiente.
  - Em telas estreitas, permite rolagem horizontal controlada.
  - CSS-only, escopado apenas em Denuncias.
*/

.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  min-height: 76px !important;
  padding: 1rem 1.18rem !important;
  gap: 0.58rem !important;
  scroll-behavior: smooth !important;
  scrollbar-width: thin !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  min-height: 42px !important;
  padding: 0.62rem 0.86rem !important;
  font-size: 0.86rem !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar {
  height: 8px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar-thumb {
  border-radius: 999px !important;
  background: rgba(15, 44, 67, 0.18) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar-track {
  background: transparent !important;
}

/* Em telas muito estreitas, continua uma linha com rolagem horizontal */
@media (max-width: 760px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: flex-start !important;
    padding: 0.95rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
    font-size: 0.84rem !important;
    padding: 0.58rem 0.78rem !important;
  }
}
/* F8-M7-DENUNCIAS-TABS-UMA-LINHA-CSS-FIM */

/* F8-M8-DENUNCIAS-FILTROS-UMA-LINHA-SEM-SCROLL-CSS-INICIO */
/*
  Ajuste fino F8-M8:
  - Reduz os chips superiores para caberem em uma linha sem barra de rolagem em tela normal.
  - Mantem o painel superior maior e centralizado.
  - Reorganiza filtros inferiores para buscar protocolo, filtros e botoes ficarem em uma linha no desktop.
  - Mantem CSS-only, escopado apenas em Denuncias.
  - Exportacoes continuam temporariamente no painel atual; mover para toolbar propria exigira gate JS + CSS separado.
*/

/* Painel superior: uma linha sem scrollbar em desktop normal */
.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  min-height: 68px !important;
  padding: 0.82rem 0.95rem !important;
  gap: 0.42rem !important;
  flex-wrap: nowrap !important;
  justify-content: center !important;
  align-items: center !important;
  overflow-x: visible !important;
  overflow-y: hidden !important;
  scrollbar-width: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar {
  display: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
  min-height: 38px !important;
  padding: 0.52rem 0.66rem !important;
  font-size: 0.78rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  flex: 0 1 auto !important;
  max-width: none !important;
  letter-spacing: 0 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab strong {
  font-size: 0.78rem !important;
  line-height: 1 !important;
}

/* Filtros inferiores: uma linha em desktop com protocolo maior */
.section-card.denuncias-admin-screen .denuncias-admin-filters {
  grid-template-columns:
    minmax(250px, 1.65fr)
    minmax(118px, 0.82fr)
    minmax(118px, 0.82fr)
    minmax(118px, 0.82fr)
    minmax(104px, auto)
    minmax(96px, auto)
    minmax(96px, auto) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0.62rem !important;
  padding: 1rem 1.05rem !important;
}

/* Buscar protocolo: volta para a mesma linha, mas com largura privilegiada */
.section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i] {
  grid-column: auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0.64rem 0.82rem !important;
  border-radius: 17px !important;
}

/* Campos menores alinhados com protocolo */
.section-card.denuncias-admin-screen .denuncias-admin-filters input,
.section-card.denuncias-admin-screen .denuncias-admin-filters select {
  min-height: 42px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.62rem 0.76rem !important;
  font-size: 0.86rem !important;
}

/* Botoes inferiores menores e alinhados com os filtros */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button,
.section-card.denuncias-admin-screen .denuncias-admin-filters button,
.section-card.denuncias-admin-screen .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-primary {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  padding: 0.54rem 0.66rem !important;
  font-size: 0.78rem !important;
  justify-self: stretch !important;
  align-self: center !important;
}

/* Em largura intermediaria, permitir duas linhas apenas para nao esmagar campos */
@media (max-width: 1180px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar {
    display: block !important;
    height: 6px !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns:
      minmax(240px, 1.4fr)
      repeat(3, minmax(120px, 1fr))
      repeat(3, minmax(92px, 0.72fr)) !important;
  }
}

/* Em telas menores, prioriza legibilidade sobre uma linha forcada */
@media (max-width: 900px) {
  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: repeat(2, minmax(140px, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: 1fr !important;
  }
}
/* F8-M8-DENUNCIAS-FILTROS-UMA-LINHA-SEM-SCROLL-CSS-FIM */

/* F8-M9-DENUNCIAS-TABS-CENTRO-FILTROS-REFINO-CSS-INICIO */
/*
  Ajuste fino F8-M9:
  - Centraliza de verdade os filtros superiores de status.
  - Remove sensacao de painel apertado.
  - Reorganiza painel inferior para Protocolo e Natureza terem destaque.
  - Evita painel inferior espremido em uma linha unica.
  - CSS-only, escopado apenas em Denuncias.
*/

/* Painel superior: centralizacao real horizontal e vertical */
.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  min-height: 82px !important;
  padding: 1rem 1.2rem !important;
  margin: 1rem 0 1.2rem !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  align-content: center !important;
  justify-content: center !important;
  gap: 0.46rem !important;
  overflow-x: visible !important;
  overflow-y: hidden !important;
  text-align: center !important;
  scrollbar-width: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs::-webkit-scrollbar {
  display: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
  flex: 0 1 auto !important;
  min-width: auto !important;
  max-width: none !important;
  min-height: 40px !important;
  padding: 0.58rem 0.72rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  align-self: center !important;
  gap: 0.38rem !important;
  white-space: nowrap !important;
  text-align: center !important;
  font-size: 0.79rem !important;
  line-height: 1 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab strong,
.section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab span {
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Painel inferior: layout limpo, sem tudo espremido em uma linha */
.section-card.denuncias-admin-screen .denuncias-admin-filters {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: center !important;
  justify-items: stretch !important;
  gap: 0.8rem !important;
  padding: 1.15rem !important;
  margin: 1rem 0 1.25rem !important;
}

/* Regra base dos campos */
.section-card.denuncias-admin-screen .denuncias-admin-filters input,
.section-card.denuncias-admin-screen .denuncias-admin-filters select {
  min-height: 44px !important;
  width: 100% !important;
  min-width: 0 !important;
  padding: 0.68rem 0.84rem !important;
  border-radius: 18px !important;
  font-size: 0.88rem !important;
}

/* Buscar por protocolo: destaque principal, largo e elegante */
.section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i] {
  grid-column: span 5 !important;
  min-height: 48px !important;
  padding: 0.78rem 1rem !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(15, 118, 110, 0.08), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 252, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.14) !important;
  box-shadow:
    0 10px 24px rgba(15, 44, 67, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Natureza: destaque secundario, ao lado do protocolo quando houver seletor especifico */
.section-card.denuncias-admin-screen .denuncias-admin-filters select[aria-label*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[name*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[id*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[title*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[aria-label*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="natureza" i] {
  grid-column: span 3 !important;
  min-height: 48px !important;
  padding: 0.78rem 0.95rem !important;
  border-radius: 20px !important;
  background:
    radial-gradient(circle at 96% 0%, rgba(212, 175, 55, 0.10), transparent 32%),
    linear-gradient(145deg, rgba(255, 255, 255, 0.99), rgba(248, 251, 252, 0.96)) !important;
  border: 1px solid rgba(15, 44, 67, 0.14) !important;
  box-shadow:
    0 10px 24px rgba(15, 44, 67, 0.07),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Demais filtros: menores, organizados e sem competir com protocolo/natureza */
.section-card.denuncias-admin-screen .denuncias-admin-filters input:not([type="search"]),
.section-card.denuncias-admin-screen .denuncias-admin-filters select {
  grid-column: span 2 !important;
}

/* Se natureza existir como select/input, ela recupera span 3 mesmo apos regra generica */
.section-card.denuncias-admin-screen .denuncias-admin-filters select[aria-label*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[name*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[id*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters select[title*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[aria-label*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="natureza" i],
.section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="natureza" i] {
  grid-column: span 3 !important;
}

/* Botoes: compactos, alinhados, sem gigantismo */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button,
.section-card.denuncias-admin-screen .denuncias-admin-filters button,
.section-card.denuncias-admin-screen .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-primary {
  grid-column: span 2 !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 40px !important;
  padding: 0.56rem 0.72rem !important;
  justify-self: stretch !important;
  align-self: center !important;
  font-size: 0.8rem !important;
  border-radius: 999px !important;
}

/* Mantem botoes com visual glass, mas mais discretos */
.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-primary,
.section-card.denuncias-admin-screen .button.button-primary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 44%, rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(15, 118, 110, 0.86), rgba(15, 44, 67, 0.94)) !important;
  box-shadow:
    0 12px 26px rgba(15, 44, 67, 0.17),
    inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-filters .button.button-secondary,
.section-card.denuncias-admin-screen .button.button-secondary {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.74), rgba(255, 255, 255, 0.20) 44%, rgba(255, 255, 255, 0)),
    linear-gradient(135deg, rgba(255, 255, 255, 0.92), rgba(238, 247, 247, 0.80)) !important;
  box-shadow:
    0 10px 22px rgba(15, 44, 67, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.92) !important;
}

/* Desktop medio: mantem tabs centralizadas e permite filtros respirarem */
@media (max-width: 1180px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: center !important;
    overflow-x: visible !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs .denuncias-admin-tab {
    padding: 0.54rem 0.58rem !important;
    font-size: 0.75rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i] {
    grid-column: span 5 !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters select[aria-label*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[name*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[id*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[title*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[aria-label*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="natureza" i] {
    grid-column: span 3 !important;
  }
}

/* Tablet/mobile: legibilidade acima de compressao */
@media (max-width: 900px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    justify-content: flex-start !important;
    overflow-x: auto !important;
    scrollbar-width: thin !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters input[type="search"],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="protocolo" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[aria-label*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[name*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[id*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters select[title*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[aria-label*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[name*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[id*="natureza" i],
  .section-card.denuncias-admin-screen .denuncias-admin-filters input[placeholder*="natureza" i] {
    grid-column: 1 / -1 !important;
  }
}

@media (max-width: 640px) {
  .section-card.denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: 1fr !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-filters .button,
  .section-card.denuncias-admin-screen .denuncias-admin-filters button,
  .section-card.denuncias-admin-screen .button.button-secondary,
  .section-card.denuncias-admin-screen .button.button-primary {
    grid-column: 1 / -1 !important;
  }
}
/* F8-M9-DENUNCIAS-TABS-CENTRO-FILTROS-REFINO-CSS-FIM */


/* F8-M16-DENUNCIAS-FILTROS-EXPORTACOES-CSS-INICIO */
.denuncias-admin-screen .denuncias-admin-filters {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 10px !important;
  align-items: end !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasFiltroStatus {
  order: 1 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasFiltroUrgencia {
  order: 2 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasFiltroEmpresa {
  order: 3 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasDataInicial {
  order: 4 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasDataFinal {
  order: 5 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasBuscaTexto {
  order: 6 !important;
  grid-column: 1 / 5 !important;
}

.denuncias-admin-screen .denuncias-admin-filters > #denunciasLimparBusca {
  order: 7 !important;
  grid-column: 5 / 6 !important;
}

.denuncias-admin-screen .denuncias-admin-export {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  justify-content: flex-end !important;
  margin-top: 12px !important;
}

.denuncias-admin-screen .denuncias-admin-export .button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

@media (max-width: 760px) {
  .denuncias-admin-screen .denuncias-admin-filters {
    grid-template-columns: 1fr 1fr !important;
  }

  .denuncias-admin-screen .denuncias-admin-filters > #denunciasBuscaTexto {
    grid-column: 1 / -1 !important;
  }

  .denuncias-admin-screen .denuncias-admin-filters > #denunciasLimparBusca {
    grid-column: 1 / -1 !important;
  }

  .denuncias-admin-screen .denuncias-admin-export {
    justify-content: flex-start !important;
  }
}
/* F8-M16-DENUNCIAS-FILTROS-EXPORTACOES-CSS-FIM */


/* F8-M28-DENUNCIAS-FILTROS-FLEX-CONSOLIDADO-CSS-INICIO */

/* Container final dos filtros: duas linhas reais, sem herdar grid antigo. */
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  gap: 10px !important;
}

/* Linha 1: cinco filtros iguais na mesma linha. */
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
  box-sizing: border-box !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Campos da primeira linha: exatamente o comportamento que funcionou no Console. */
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary > #denunciasFiltroStatus,
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary > #denunciasFiltroUrgencia,
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary > #denunciasFiltroEmpresa,
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary > #denunciasDataInicial,
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-primary > #denunciasDataFinal {
  flex: 1 1 0 !important;
  width: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 8px !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  display: block !important;
}

/* Linha 2: busca ampla + botao limpar fixo a direita. */
.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-search {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  gap: 8px !important;
  margin-top: 0 !important;
  box-sizing: border-box !important;
  align-items: center !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-search > #denunciasBuscaTexto {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-filters.denuncias-admin-filters-final > .denuncias-admin-filters-line-search > #denunciasLimparBusca {
  flex: 0 0 130px !important;
  width: 130px !important;
  min-width: 130px !important;
  max-width: 130px !important;
  height: 38px !important;
  min-height: 38px !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 7px 10px !important;
  font-size: 12px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

/* Toolbar abaixo da tabela preservada compacta e alinhada a direita. */
.section-card.denuncias-admin-screen .denuncias-admin-export {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: center !important;
  gap: 6px !important;
  width: 100% !important;
  margin-top: 12px !important;
  margin-bottom: 8px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  width: auto !important;
  min-width: 58px !important;
  max-width: 110px !important;
  height: 30px !important;
  min-height: 30px !important;
  padding: 6px 10px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  border-radius: 10px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(1),
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(2) {
  min-width: 58px !important;
  max-width: 68px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(3) {
  min-width: 92px !important;
  max-width: 110px !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button[disabled] {
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* F8-M28-DENUNCIAS-FILTROS-FLEX-CONSOLIDADO-CSS-FIM */

/* F8-M30-DENUNCIAS-BOTOES-CARDS-TABS-CSS-INICIO */

/* Parte 2 e 3: botoes CSV, Excel e PDF com cores especificas e hover glass */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
  border-radius: 14px !important;
  color: #ffffff !important;
  font-weight: 800 !important;
  letter-spacing: 0.18px !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.32) !important;
  border-width: 1px !important;
  border-style: solid !important;
  transform: translateY(0) !important;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease,
    border-color 0.25s ease,
    background 0.25s ease !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button::before {
  content: "" !important;
  position: absolute !important;
  top: 1px !important;
  left: 8% !important;
  width: 84% !important;
  height: 48% !important;
  border-radius: 0 0 16px 16px !important;
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.56),
      rgba(255, 255, 255, 0.22),
      rgba(251, 243, 228, 0.12),
      transparent
    ) !important;
  z-index: 0 !important;
  pointer-events: none !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button::after {
  content: "" !important;
  position: absolute !important;
  top: -48% !important;
  left: -62% !important;
  width: 42% !important;
  height: 210% !important;
  transform: rotate(27deg) !important;
  background:
    linear-gradient(
      to right,
      transparent 0%,
      rgba(255, 255, 255, 0.10) 18%,
      rgba(251, 243, 228, 0.42) 38%,
      rgba(255, 255, 255, 0.74) 50%,
      rgba(224, 187, 126, 0.32) 62%,
      rgba(255, 255, 255, 0.12) 80%,
      transparent 100%
    ) !important;
  z-index: 1 !important;
  pointer-events: none !important;
  transition: left 0.76s ease !important;
}

/* CSV: verde mais fechado */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(1) {
  border-color: rgba(27, 124, 95, 0.72) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.38), transparent 19%),
    radial-gradient(circle at 28% 8%, rgba(224, 187, 126, 0.20), transparent 28%),
    linear-gradient(135deg, #2f9d72 0%, #217f5d 45%, #155f47 100%) !important;
  box-shadow:
    0 8px 18px rgba(21, 95, 71, 0.18),
    0 4px 10px rgba(6, 39, 68, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.55),
    inset 0 -10px 18px rgba(6, 39, 68, 0.14) !important;
}

/* Excel: verde mais claro que o CSV */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(2) {
  border-color: rgba(78, 184, 129, 0.76) !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.46), transparent 19%),
    radial-gradient(circle at 28% 8%, rgba(251, 243, 228, 0.24), transparent 28%),
    linear-gradient(135deg, #78d9a2 0%, #4fbe82 42%, #2f9d72 100%) !important;
  box-shadow:
    0 8px 18px rgba(79, 190, 130, 0.18),
    0 4px 10px rgba(6, 39, 68, 0.11),
    inset 0 1px 0 rgba(255, 255, 255, 0.62),
    inset 0 -10px 18px rgba(6, 39, 68, 0.10) !important;
}

/* PDF: vermelho, mantendo disabled/aria-disabled e sem funcao real */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:nth-child(3),
.section-card.denuncias-admin-screen .denuncias-admin-export > .button[disabled],
.section-card.denuncias-admin-screen .denuncias-admin-export > .button[aria-disabled="true"] {
  border-color: rgba(190, 54, 54, 0.76) !important;
  color: #ffffff !important;
  cursor: not-allowed !important;
  opacity: 0.92 !important;
  background:
    radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.38), transparent 19%),
    radial-gradient(circle at 28% 8%, rgba(251, 243, 228, 0.16), transparent 28%),
    linear-gradient(135deg, #e06363 0%, #c83f3f 45%, #9f2828 100%) !important;
  box-shadow:
    0 7px 15px rgba(159, 40, 40, 0.16),
    0 4px 10px rgba(6, 39, 68, 0.10),
    inset 0 1px 0 rgba(255, 255, 255, 0.50),
    inset 0 -10px 18px rgba(80, 12, 12, 0.13) !important;
}

/* Hover glass somente em CSV e Excel */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover {
  transform: translateY(-3px) !important;
  filter: brightness(1.06) saturate(1.06) !important;
  border-color: rgba(224, 187, 126, 0.78) !important;
  box-shadow:
    0 14px 28px rgba(19, 128, 143, 0.20),
    0 7px 18px rgba(11, 51, 87, 0.15),
    0 3px 12px rgba(192, 144, 76, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    inset 0 -12px 22px rgba(6, 39, 68, 0.13) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button:not(:disabled):not([disabled]):not([aria-disabled="true"]):hover::after {
  left: 125% !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-export > .button:not(:disabled):not([disabled]):not([aria-disabled="true"]):active {
  transform: translateY(0) !important;
  box-shadow:
    0 5px 12px rgba(19, 128, 143, 0.16),
    inset 0 3px 8px rgba(6, 39, 68, 0.16) !important;
}

/* Disabled nao deve simular hover funcional */
.section-card.denuncias-admin-screen .denuncias-admin-export > .button:disabled:hover,
.section-card.denuncias-admin-screen .denuncias-admin-export > .button[disabled]:hover,
.section-card.denuncias-admin-screen .denuncias-admin-export > .button[aria-disabled="true"]:hover {
  transform: none !important;
  filter: none !important;
}

/* Parte 4: ocultar cards/KPIs redundantes somente na tela Denuncias */
.section-card.denuncias-admin-screen .denuncias-admin-metrics,
.section-card.denuncias-admin-screen #denunciasAdminMetrics {
  display: none !important;
}

/* Parte 5: no tab ativo, apenas o numero/contador permanece preto */
.section-card.denuncias-admin-screen .denuncias-admin-tab.is-active strong,
.section-card.denuncias-admin-screen .denuncias-admin-tabs button.is-active strong,
.section-card.denuncias-admin-screen #denunciasAdminTabs .denuncias-admin-tab.is-active strong {
  color: #111827 !important;
  text-shadow: none !important;
}

/* F8-M30-DENUNCIAS-BOTOES-CARDS-TABS-CSS-FIM */

/* F8-M32-DENUNCIAS-NOTE-SEAL-CSS-INICIO */

/* Nota final como selo discreto premium, sem alterar JS/HTML */
.section-card.denuncias-admin-screen .denuncias-admin-note {
  width: fit-content !important;
  max-width: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 6px 0 0 auto !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(224, 187, 126, 0.36) !important;
  background:
    linear-gradient(
      135deg,
      rgba(251, 243, 228, 0.94) 0%,
      rgba(255, 255, 255, 0.82) 100%
    ) !important;
  color: #6f5130 !important;
  font-size: 11px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 0.075em !important;
  text-transform: uppercase !important;
  box-shadow:
    0 8px 18px rgba(6, 39, 68, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.72) !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-note::before {
  content: "" !important;
  width: 7px !important;
  height: 7px !important;
  flex: 0 0 7px !important;
  border-radius: 999px !important;
  background: #c0904c !important;
  box-shadow: 0 0 0 3px rgba(192, 144, 76, 0.16) !important;
}

/* F8-M32-DENUNCIAS-NOTE-SEAL-CSS-FIM */

/* F9-B1D-AREAS-BOTOES-CSS-INICIO */
/* Polimento CSS-only dos botoes Editar/Inativar/Ativar das areas no detalhe da empresa. */
#panel .empresas-areas-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
}

#panel .empresas-areas-actions .f8-lab-button {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 32px;
  padding: 8px 12px !important;
  border-radius: 999px !important;
  border: 1px solid rgba(222, 177, 73, 0.46) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 34%, transparent 35%),
    linear-gradient(135deg, rgba(19, 128, 143, 0.30), rgba(6, 39, 68, 0.62)) !important;
  color: #f7fbff !important;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.015em;
  line-height: 1.1;
  text-decoration: none;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.28);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 -1px 0 rgba(6, 39, 68, 0.22),
    0 8px 18px rgba(0, 0, 0, 0.16),
    0 0 0 1px rgba(255, 255, 255, 0.035);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    border-color 0.18s ease,
    background 0.18s ease,
    opacity 0.18s ease;
}

#panel .empresas-areas-actions .f8-lab-button::before {
  content: "";
  position: absolute;
  inset: 1px auto 1px 1px;
  width: 42%;
  border-radius: inherit;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0.06) 55%, transparent);
  opacity: 0.70;
  pointer-events: none;
  z-index: -1;
}

#panel .empresas-areas-actions .f8-lab-button::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(circle at 24% 18%, rgba(255, 255, 255, 0.26), transparent 24%),
    radial-gradient(circle at 76% 12%, rgba(222, 177, 73, 0.26), transparent 28%);
  opacity: 0.55;
  pointer-events: none;
  z-index: -1;
}

#panel .empresas-areas-actions .f8-lab-button:hover {
  transform: translateY(-1px);
  border-color: rgba(222, 177, 73, 0.70) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.20), rgba(255, 255, 255, 0.04) 34%, transparent 35%),
    linear-gradient(135deg, rgba(42, 157, 157, 0.38), rgba(11, 51, 87, 0.70)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.30),
    0 12px 24px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(222, 177, 73, 0.12);
}

#panel .empresas-areas-actions .f8-lab-button:focus-visible {
  outline: 2px solid rgba(222, 177, 73, 0.78);
  outline-offset: 3px;
}

#panel .empresas-areas-actions .f8-lab-button[data-f9-area-toggle] {
  border-color: rgba(222, 177, 73, 0.54) !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.03) 34%, transparent 35%),
    linear-gradient(135deg, rgba(222, 177, 73, 0.20), rgba(15, 110, 123, 0.38), rgba(6, 39, 68, 0.66)) !important;
}

@media (max-width: 760px) {
  #panel .empresas-areas-actions {
    gap: 6px;
  }

  #panel .empresas-areas-actions .f8-lab-button {
    min-height: 30px;
    padding: 7px 10px !important;
    font-size: 0.74rem;
  }
}
/* F9-B1D-AREAS-BOTOES-CSS-FIM */

/* F9-B1D2-AREAS-BOTOES-ALINHAMENTO-DIREITA-INICIO */
/* Ajuste CSS-only: alinha os botoes Editar/Inativar/Ativar das areas a direita no desktop. */
#panel .empresas-areas-actions {
  justify-content: flex-end;
  text-align: right;
}

@media (max-width: 760px) {
  #panel .empresas-areas-actions {
    justify-content: flex-start;
    text-align: left;
  }
}
/* F9-B1D2-AREAS-BOTOES-ALINHAMENTO-DIREITA-FIM */
/* F10-B1V-HOTFIX-LAYOUT-DENUNCIAS-INICIO
   Escopo: corrigir regressao visual da tela #denuncias apos F10-B1.
   Frontend-only CSS. Sem backend, sem banco, sem PDF real, sem reports API.
*/
.denuncias-admin-screen {
  max-width: 100%;
  overflow-x: clip;
}

.denuncias-admin-shell {
  max-width: 100%;
  overflow-x: clip;
}

.denuncias-admin-metrics,
.denuncias-admin-tabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  overflow: visible;
}

.denuncias-admin-metric,
.denuncias-admin-tab {
  flex: 0 1 auto;
  min-width: 0;
  white-space: nowrap;
}

.denuncias-admin-tab {
  padding: 8px 12px;
}

.denuncias-admin-filters,
.denuncias-admin-filters-final {
  max-width: 100%;
  overflow: visible;
}

.denuncias-admin-filters-line {
  display: grid;
  gap: 10px;
  max-width: 100%;
}

.denuncias-admin-filters-line-primary {
  grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.denuncias-admin-filters-line-search {
  grid-template-columns: minmax(220px, 1fr) auto;
}

.denuncias-admin-filters .input {
  min-width: 0;
  width: 100%;
}

.denuncias-admin-table-wrap {
  max-width: 100%;
  overflow-x: auto;
  scrollbar-width: thin;
}

.denuncias-admin-table {
  width: 100%;
  min-width: 0;
  table-layout: fixed;
}

.denuncias-admin-table th,
.denuncias-admin-table td {
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
  vertical-align: top;
}

.denuncias-admin-table th:nth-child(1),
.denuncias-admin-table td:nth-child(1) {
  width: 44px;
}

.denuncias-admin-table th:nth-child(2),
.denuncias-admin-table td:nth-child(2) {
  width: 18%;
}

.denuncias-admin-table th:nth-child(3),
.denuncias-admin-table td:nth-child(3) {
  width: 10%;
}

.denuncias-admin-table th:nth-child(4),
.denuncias-admin-table td:nth-child(4) {
  width: 10%;
}

.denuncias-admin-table th:nth-child(5),
.denuncias-admin-table td:nth-child(5) {
  width: 18%;
}

.denuncias-admin-table th:nth-child(6),
.denuncias-admin-table td:nth-child(6) {
  width: 10%;
}

.denuncias-admin-table th:nth-child(7),
.denuncias-admin-table td:nth-child(7) {
  width: 16%;
}

.denuncias-admin-table th:nth-child(8),
.denuncias-admin-table td:nth-child(8) {
  width: 18%;
}

.denuncias-admin-export {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  max-width: 100%;
}

.denuncias-admin-note {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

@media (max-width: 980px) {
  .denuncias-admin-filters-line-primary {
    grid-template-columns: repeat(2, minmax(130px, 1fr));
  }

  .denuncias-admin-filters-line-search {
    grid-template-columns: 1fr;
  }

  .denuncias-admin-table {
    min-width: 760px;
  }
}
/* F10-B1V-HOTFIX-LAYOUT-DENUNCIAS-FIM */
/* F10-B1V2-HOTFIX-FILTROS-TOP-DENUNCIAS-INICIO
   Escopo: corrigir apenas a faixa superior de filtros/abas da tela #denuncias.
   Preserva a tabela corrigida no F10-B1V.
*/
.denuncias-admin-screen .denuncias-admin-metrics,
.denuncias-admin-screen .denuncias-admin-tabs,
.denuncias-admin-shell .denuncias-admin-metrics,
.denuncias-admin-shell .denuncias-admin-tabs {
  display: flex !important;
  flex-flow: row wrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  white-space: normal !important;
}

.denuncias-admin-screen .denuncias-admin-metric,
.denuncias-admin-screen .denuncias-admin-tab,
.denuncias-admin-shell .denuncias-admin-metric,
.denuncias-admin-shell .denuncias-admin-tab {
  flex: 0 1 auto !important;
  min-width: max-content !important;
  max-width: 100% !important;
  height: auto !important;
  min-height: 38px !important;
  white-space: nowrap !important;
}

.denuncias-admin-screen .denuncias-admin-metric *,
.denuncias-admin-screen .denuncias-admin-tab *,
.denuncias-admin-shell .denuncias-admin-metric *,
.denuncias-admin-shell .denuncias-admin-tab * {
  max-width: 100% !important;
}

.denuncias-admin-screen .denuncias-admin-shell,
.denuncias-admin-screen .section-card,
.denuncias-admin-screen {
  height: auto !important;
  max-height: none !important;
  overflow-y: visible !important;
}

@media (max-width: 1180px) {
  .denuncias-admin-screen .denuncias-admin-metric,
  .denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-shell .denuncias-admin-metric,
  .denuncias-admin-shell .denuncias-admin-tab {
    flex: 1 1 calc(25% - 8px) !important;
    min-width: 150px !important;
  }
}

@media (max-width: 820px) {
  .denuncias-admin-screen .denuncias-admin-metric,
  .denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-shell .denuncias-admin-metric,
  .denuncias-admin-shell .denuncias-admin-tab {
    flex: 1 1 calc(50% - 8px) !important;
    min-width: 140px !important;
  }
}
/* F10-B1V2-HOTFIX-FILTROS-TOP-DENUNCIAS-FIM */
/* F10-B1V3-HOTFIX-FILTROS-TOP-COMPACTOS-INICIO
   Escopo: manter filtros/abas superiores da tela #denuncias em uma linha.
   Nao altera tabela. Nao altera app.js. Override final sobre F10-B1V/F10-B1V2.
*/
.denuncias-admin-screen .denuncias-admin-metrics,
.denuncias-admin-screen .denuncias-admin-tabs,
.denuncias-admin-shell .denuncias-admin-metrics,
.denuncias-admin-shell .denuncias-admin-tabs {
  display: flex !important;
  flex-flow: row nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 5px !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  white-space: nowrap !important;
}

.denuncias-admin-screen .denuncias-admin-metric,
.denuncias-admin-screen .denuncias-admin-tab,
.denuncias-admin-shell .denuncias-admin-metric,
.denuncias-admin-shell .denuncias-admin-tab {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 34px !important;
  min-height: 34px !important;
  padding: 5px 7px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.denuncias-admin-screen .denuncias-admin-metric span,
.denuncias-admin-screen .denuncias-admin-tab span,
.denuncias-admin-shell .denuncias-admin-metric span,
.denuncias-admin-shell .denuncias-admin-tab span {
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: 11px !important;
  line-height: 1 !important;
}

.denuncias-admin-screen .denuncias-admin-metric strong,
.denuncias-admin-screen .denuncias-admin-tab strong,
.denuncias-admin-shell .denuncias-admin-metric strong,
.denuncias-admin-shell .denuncias-admin-tab strong {
  flex: 0 0 auto !important;
  min-width: 20px !important;
  height: 20px !important;
  padding: 2px 5px !important;
  font-size: 11px !important;
  line-height: 16px !important;
  border-radius: 999px !important;
}

.denuncias-admin-screen .denuncias-admin-metric::before,
.denuncias-admin-screen .denuncias-admin-tab::before,
.denuncias-admin-shell .denuncias-admin-metric::before,
.denuncias-admin-shell .denuncias-admin-tab::before {
  flex: 0 0 auto !important;
  width: 8px !important;
  height: 8px !important;
  margin-right: 3px !important;
}

@media (max-width: 1180px) {
  .denuncias-admin-screen .denuncias-admin-metric,
  .denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-shell .denuncias-admin-metric,
  .denuncias-admin-shell .denuncias-admin-tab {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }

  .denuncias-admin-screen .denuncias-admin-metric span,
  .denuncias-admin-screen .denuncias-admin-tab span,
  .denuncias-admin-shell .denuncias-admin-metric span,
  .denuncias-admin-shell .denuncias-admin-tab span {
    font-size: 10px !important;
  }

  .denuncias-admin-screen .denuncias-admin-metric strong,
  .denuncias-admin-screen .denuncias-admin-tab strong,
  .denuncias-admin-shell .denuncias-admin-metric strong,
  .denuncias-admin-shell .denuncias-admin-tab strong {
    min-width: 18px !important;
    height: 18px !important;
    padding: 1px 4px !important;
    font-size: 10px !important;
    line-height: 16px !important;
  }
}
/* F10-B1V3-HOTFIX-FILTROS-TOP-COMPACTOS-FIM */

/* F10-B3D-B2-BOTAO-MARCAR-LIDO-VISIVEL-CSS-INICIO */
.f10-marcar-lido-box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding-bottom: 28px;
}

.f10-marcar-lido-box [data-f10-marcar-lido] {
  order: 3;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  min-width: 180px;
  padding: 10px 18px;
  margin: 4px 0 2px;
  border: 1px solid rgba(6, 39, 68, 0.18);
  border-radius: 999px;
  background: linear-gradient(135deg, #0F6E7B, #13808F);
  color: #ffffff !important;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(15, 110, 123, 0.22);
  cursor: pointer;
  position: relative;
  z-index: 2;
}

.f10-marcar-lido-box [data-f10-marcar-lido]:hover {
  transform: translateY(-1px);
}

.f10-marcar-lido-box [data-f10-marcar-lido]:disabled {
  opacity: 0.75;
  cursor: default;
  transform: none;
}

.f10-marcar-lido-box [data-f10-marcar-lido-status] {
  order: 4;
  margin-top: 2px;
}
/* F10-B3D-B2-BOTAO-MARCAR-LIDO-VISIVEL-CSS-FIM */

/* F10-B3F-INDICADOR-NAO-LIDA-CSS-INICIO */
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"],
.denuncias-admin-table tbody tr[data-lido="false"] {
  font-weight: 700;
  background: linear-gradient(90deg, rgba(200, 162, 74, 0.14), rgba(200, 162, 74, 0.05) 44%, transparent);
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child,
.denuncias-admin-table tbody tr[data-lido="false"] td:first-child {
  border-left: 3px solid var(--accent-gold, var(--gold, #c8a24a));
  color: var(--text-strong, inherit);
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child::before,
.denuncias-admin-table tbody tr[data-lido="false"] td:first-child::before {
  content: "";
  display: inline-block;
  width: 0.52rem;
  height: 0.52rem;
  margin-right: 0.45rem;
  border-radius: 999px;
  background: var(--accent-gold, var(--gold, #c8a24a));
  box-shadow: 0 0 0 3px rgba(200, 162, 74, 0.16);
  vertical-align: middle;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:first-child::before,
.denuncias-admin-table tbody tr[data-lido="true"] td:first-child::before {
  content: none;
}

@media (max-width: 760px) {
  #denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child,
  .denuncias-admin-table tbody tr[data-lido="false"] td:first-child {
    border-left-width: 2px;
  }

  #denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child::before,
  .denuncias-admin-table tbody tr[data-lido="false"] td:first-child::before {
    width: 0.45rem;
    height: 0.45rem;
    margin-right: 0.35rem;
  }
}
/* F10-B3F-INDICADOR-NAO-LIDA-CSS-FIM */

/* F10-B3F-AJUSTE-TIPOGRAFIA-LIDO-CSS-INICIO */
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:first-child,
.denuncias-admin-table tbody tr[data-lido="true"] td:first-child {
  font-weight: 500;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child,
.denuncias-admin-table tbody tr[data-lido="false"] td:first-child {
  font-weight: 700;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(2),
#denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(4),
.denuncias-admin-table tbody tr td:nth-child(2),
.denuncias-admin-table tbody tr td:nth-child(4) {
  font-size: 0.86rem;
  line-height: 1.35;
  font-weight: 500;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:nth-child(2),
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:nth-child(4),
.denuncias-admin-table tbody tr[data-lido="true"] td:nth-child(2),
.denuncias-admin-table tbody tr[data-lido="true"] td:nth-child(4) {
  opacity: 0.88;
}

@media (max-width: 760px) {
  #denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(2),
  #denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(4),
  .denuncias-admin-table tbody tr td:nth-child(2),
  .denuncias-admin-table tbody tr td:nth-child(4) {
    font-size: 0.82rem;
  }
}
/* F10-B3F-AJUSTE-TIPOGRAFIA-LIDO-CSS-FIM */

/* F10-B3F-HOTFIX-PROTOCOLO-NEGRITO-CONDICIONAL-CSS-INICIO */
/* Regra final: protocolo em negrito apenas enquanto a linha estiver nao lida. */
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child,
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] td:first-child *,
.denuncias-admin-table tbody tr[data-lido="false"] td:first-child,
.denuncias-admin-table tbody tr[data-lido="false"] td:first-child * {
  font-weight: 800 !important;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:first-child,
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] td:first-child *,
.denuncias-admin-table tbody tr[data-lido="true"] td:first-child,
.denuncias-admin-table tbody tr[data-lido="true"] td:first-child * {
  font-weight: 500 !important;
}

/* Data e natureza menores, sem afetar o texto usado pela busca. */
#denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(2),
#denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(4),
.denuncias-admin-table tbody tr td:nth-child(2),
.denuncias-admin-table tbody tr td:nth-child(4) {
  font-size: 0.84rem;
  line-height: 1.35;
}

@media (max-width: 760px) {
  #denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(2),
  #denunciasFicticiasMount .denuncias-admin-table tbody tr td:nth-child(4),
  .denuncias-admin-table tbody tr td:nth-child(2),
  .denuncias-admin-table tbody tr td:nth-child(4) {
    font-size: 0.8rem;
  }
}
/* F10-B3F-HOTFIX-PROTOCOLO-NEGRITO-CONDICIONAL-CSS-FIM */

/* F10-B3F-HOTFIX-PROTOCOLO-REGRA-LIDO-CSS-INICIO */
/* Correcao final: o protocolo deve seguir data-lido da linha. */
/* Escopo intencional: tela de denuncias ficticias; sem alterar DOM/JS/texto. */

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] > td:first-child,
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] > td:first-child :is(a, button, span, strong, b, code, small, em),
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] :is(td.protocolo, td.protocol, .protocolo, .protocol, .denuncia-protocolo, .protocol-code, .protocol-cell, [data-field="protocolo"], [data-key="protocolo"], [data-coluna="protocolo"], [data-column="protocolo"]),
.denuncias-admin-table tbody tr[data-lido="false"] > td:first-child,
.denuncias-admin-table tbody tr[data-lido="false"] > td:first-child :is(a, button, span, strong, b, code, small, em),
.denuncias-admin-table tbody tr[data-lido="false"] :is(td.protocolo, td.protocol, .protocolo, .protocol, .denuncia-protocolo, .protocol-code, .protocol-cell, [data-field="protocolo"], [data-key="protocolo"], [data-coluna="protocolo"], [data-column="protocolo"]) {
  font-weight: 800 !important;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] > td:first-child,
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] > td:first-child :is(a, button, span, strong, b, code, small, em),
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] :is(td.protocolo, td.protocol, .protocolo, .protocol, .denuncia-protocolo, .protocol-code, .protocol-cell, [data-field="protocolo"], [data-key="protocolo"], [data-coluna="protocolo"], [data-column="protocolo"]),
.denuncias-admin-table tbody tr[data-lido="true"] > td:first-child,
.denuncias-admin-table tbody tr[data-lido="true"] > td:first-child :is(a, button, span, strong, b, code, small, em),
.denuncias-admin-table tbody tr[data-lido="true"] :is(td.protocolo, td.protocol, .protocolo, .protocol, .denuncia-protocolo, .protocol-code, .protocol-cell, [data-field="protocolo"], [data-key="protocolo"], [data-coluna="protocolo"], [data-column="protocolo"]) {
  font-weight: 500 !important;
}

/* Mantem o indicador visual apenas nas nao lidas. */
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] > td:first-child::before,
.denuncias-admin-table tbody tr[data-lido="true"] > td:first-child::before {
  content: none !important;
}
/* F10-B3F-HOTFIX-PROTOCOLO-REGRA-LIDO-CSS-FIM */

/* F10-B3F-HOTFIX-PROTOCOLO-FIRSTCELL-V3-INICIO */
/* Hotfix especifico: protocolo = primeira coluna da tabela de denuncias ficticias. */
/* Regra: nao lida em negrito; lida em peso normal. Zero JS. */
.denuncias-admin-table tbody tr[data-lido="false"] > td:first-child,
.denuncias-admin-table tbody tr[data-lido="false"] > td:first-child *,
#denunciasFicticiasMount table tbody tr[data-lido="false"] > td:first-child,
#denunciasFicticiasMount table tbody tr[data-lido="false"] > td:first-child * {
  font-weight: 800 !important;
}

.denuncias-admin-table tbody tr[data-lido="true"] > td:first-child,
.denuncias-admin-table tbody tr[data-lido="true"] > td:first-child *,
#denunciasFicticiasMount table tbody tr[data-lido="true"] > td:first-child,
#denunciasFicticiasMount table tbody tr[data-lido="true"] > td:first-child * {
  font-weight: 500 !important;
}
/* F10-B3F-HOTFIX-PROTOCOLO-FIRSTCELL-V3-FIM */

/* F10-B3F-HOTFIX-PROTOCOLO-SEGUNDA-COLUNA-CSS-V5-INICIO */
/*
  Hotfix V5:
  - A coluna 1 e checkbox.
  - A coluna 2 e o protocolo.
  - O protocolo usa td.denuncias-admin-protocolo.
  - Nao lida: protocolo em negrito.
  - Lida: protocolo em peso normal.
  - Data e natureza ficam menores nas colunas corretas: 4 e 5.
  CSS-only; sem alterar DOM, JS, texto, busca, filtros, backend ou banco.
*/

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] > td:nth-child(2),
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="false"] > td.denuncias-admin-protocolo,
.denuncias-admin-table tbody tr[data-lido="false"] > td:nth-child(2),
.denuncias-admin-table tbody tr[data-lido="false"] > td.denuncias-admin-protocolo {
  font-weight: 900 !important;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] > td:nth-child(2),
#denunciasFicticiasMount .denuncias-admin-table tbody tr[data-lido="true"] > td.denuncias-admin-protocolo,
.denuncias-admin-table tbody tr[data-lido="true"] > td:nth-child(2),
.denuncias-admin-table tbody tr[data-lido="true"] > td.denuncias-admin-protocolo {
  font-weight: 500 !important;
}

#denunciasFicticiasMount .denuncias-admin-table tbody tr > td:nth-child(4),
#denunciasFicticiasMount .denuncias-admin-table tbody tr > td:nth-child(5),
.denuncias-admin-table tbody tr > td:nth-child(4),
.denuncias-admin-table tbody tr > td:nth-child(5) {
  font-size: 0.86rem !important;
  line-height: 1.35 !important;
}

@media (max-width: 760px) {
  #denunciasFicticiasMount .denuncias-admin-table tbody tr > td:nth-child(4),
  #denunciasFicticiasMount .denuncias-admin-table tbody tr > td:nth-child(5),
  .denuncias-admin-table tbody tr > td:nth-child(4),
  .denuncias-admin-table tbody tr > td:nth-child(5) {
    font-size: 0.8rem !important;
  }
}
/* F10-B3F-HOTFIX-PROTOCOLO-SEGUNDA-COLUNA-CSS-V5-FIM */


/* F10-B3G-RESPONSIVIDADE-DENUNCIAS-GRAVIDADE-CSS-INICIO */
/* Escopo: responsividade da tela #denuncias e ajuste de legibilidade da coluna Gravidade.
   CSS-only, aditivo, sem alterar DOM, JS, dados, filtros ou modal.
*/
.section-card.denuncias-admin-screen {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

#denunciasFicticiasMount,
#denunciasFicticiasMount .denuncias-admin-table-wrap,
.section-card.denuncias-admin-screen .denuncias-admin-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metrics {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)) !important;
  gap: 0.72rem !important;
  align-items: stretch !important;
  width: 100% !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric {
  min-width: 0 !important;
  overflow: hidden !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric-value {
  font-size: clamp(1.34rem, 2.05vw, 2.1rem) !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric-label {
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)) !important;
  gap: 0.55rem !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: visible !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab {
  width: 100% !important;
  min-width: 0 !important;
  justify-content: center !important;
  text-align: center !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab span,
.section-card.denuncias-admin-screen .denuncias-admin-tab strong {
  min-width: 0 !important;
  max-width: 100% !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab strong {
  font-size: clamp(0.72rem, 1.15vw, 0.9rem) !important;
  line-height: 1 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table-wrap {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch;
}

.section-card.denuncias-admin-screen .denuncias-admin-table {
  width: 100% !important;
  min-width: 900px !important;
  table-layout: auto !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table th,
.section-card.denuncias-admin-screen .denuncias-admin-table td {
  vertical-align: middle !important;
}

/* Coluna 6 = Gravidade. Coluna 1 e checkbox, coluna 2 e protocolo. */
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(6),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) {
  width: 96px !important;
  min-width: 82px !important;
  max-width: 112px !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
  font-size: 0.72rem !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) .denuncias-admin-pill,
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) [class*="pill"],
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) [class*="gravidade"],
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) span {
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 3px 6px !important;
  font-size: 0.66rem !important;
  line-height: 1.05 !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

@media (max-width: 1180px) {
  .section-card.denuncias-admin-screen .denuncias-admin-metrics {
    grid-template-columns: repeat(auto-fit, minmax(122px, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-table {
    min-width: 840px !important;
  }
}

@media (max-width: 760px) {
  .section-card.denuncias-admin-screen {
    padding-left: 0.85rem !important;
    padding-right: 0.85rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.55rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-metric-value {
    font-size: clamp(1.18rem, 5vw, 1.58rem) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-metric-label {
    font-size: 0.68rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-table {
    min-width: 760px !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(6),
  .section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) {
    width: 82px !important;
    min-width: 76px !important;
    max-width: 92px !important;
    font-size: 0.66rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) .denuncias-admin-pill,
  .section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) [class*="pill"],
  .section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) [class*="gravidade"],
  .section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) span {
    padding: 2px 5px !important;
    font-size: 0.61rem !important;
  }
}

@media (max-width: 480px) {
  .section-card.denuncias-admin-screen .denuncias-admin-metrics {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* F10-B3G-RESPONSIVIDADE-DENUNCIAS-GRAVIDADE-CSS-FIM */

/* F10-B3G-FULLWIDTH-RESPONSIVO-DENUNCIAS-GRAVIDADE-V5-INICIO */
/*
  Escopo: F10-B3G CSS-only.
  Objetivo: fazer Denuncias ocupar largura util em tela cheia, alinhar status/cards e melhorar a leitura da coluna Gravidade.
  Sem JS, sem DOM novo e sem alterar dados. Protocolo preservado na segunda coluna.
*/

body:has(.denuncias-admin-screen) #panel,
body:has(#denunciasFicticiasMount) #panel,
#panel:has(.denuncias-admin-screen),
#panel:has(#denunciasFicticiasMount) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

body:has(.denuncias-admin-screen) .main-content,
body:has(.denuncias-admin-screen) .content,
body:has(.denuncias-admin-screen) .page-content,
body:has(.denuncias-admin-screen) .workspace,
body:has(.denuncias-admin-screen) main {
  width: 100% !important;
  max-width: none !important;
}

#panel .section-card.denuncias-admin-screen,
.section-card.denuncias-admin-screen,
#denunciasFicticiasMount .denuncias-admin-screen {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metrics,
.section-card.denuncias-admin-screen .denuncias-admin-tabs {
  width: 100% !important;
  max-width: none !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)) !important;
  gap: 0.72rem !important;
  align-items: stretch !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric,
.section-card.denuncias-admin-screen .denuncias-admin-tab {
  min-width: 0 !important;
  width: auto !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-metric-value,
.section-card.denuncias-admin-screen .denuncias-admin-tab strong {
  white-space: nowrap !important;
  font-size: clamp(1rem, 1.45vw, 1.7rem) !important;
  line-height: 1 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-filters,
.section-card.denuncias-admin-screen .denuncias-admin-table-wrap {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table-wrap {
  overflow-x: auto !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table {
  width: 100% !important;
  min-width: 1120px !important;
  table-layout: fixed !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(1),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(1) { width: 46px !important; }
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(2),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(2) { width: 150px !important; }
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(3),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(3) { width: 128px !important; }
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(4),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(4) { width: 104px !important; }
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(5),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(5) { width: 230px !important; }
.section-card.denuncias-admin-screen .denuncias-admin-table th:nth-child(6),
.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) {
  width: 112px !important;
  font-size: 0.68rem !important;
  line-height: 1.12 !important;
  white-space: normal !important;
  word-break: normal !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table td:nth-child(6) :is(.denuncias-admin-pill, .status-pill, .badge, [class*="pill"], [class*="badge"], [class*="gravidade"]) {
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 3px 5px !important;
  font-size: 0.64rem !important;
  line-height: 1.1 !important;
  white-space: normal !important;
  text-align: center !important;
}

/* Protocolo: segunda coluna. Mantem regra visual validada apos B3F. */
.section-card.denuncias-admin-screen .denuncias-admin-table tbody tr[data-lido="false"] > td:nth-child(2),
.section-card.denuncias-admin-screen .denuncias-admin-table tbody tr[data-lido="false"] > td.denuncias-admin-protocolo {
  font-weight: 800 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-table tbody tr[data-lido="true"] > td:nth-child(2),
.section-card.denuncias-admin-screen .denuncias-admin-table tbody tr[data-lido="true"] > td.denuncias-admin-protocolo {
  font-weight: 500 !important;
}

@media (min-width: 1440px) {
  .section-card.denuncias-admin-screen .denuncias-admin-table {
    min-width: 1280px !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-metrics,
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr)) !important;
  }
}

@media (max-width: 980px) {
  .section-card.denuncias-admin-screen .denuncias-admin-metrics,
  .section-card.denuncias-admin-screen .denuncias-admin-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
/* F10-B3G-FULLWIDTH-RESPONSIVO-DENUNCIAS-GRAVIDADE-V5-FIM */

/* F10-B3G-HOTFIX-STATUS-SUPERIOR-UMA-LINHA-CSS-V7-INICIO */
/* Hotfix: status/contadores superiores de Denuncias permanecem em uma unica linha. */
/* Escopo: somente Denuncias; preserva full-width, tabela, protocolo, gravidade e demais telas. */
.section-card.denuncias-admin-screen .denuncias-admin-tabs,
.denuncias-admin-screen .denuncias-admin-tabs,
.section-card.denuncias-admin-screen .denuncias-admin-tabs-rapidas,
.denuncias-admin-screen .denuncias-admin-tabs-rapidas {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  justify-content: stretch !important;
  gap: clamp(0.24rem, 0.42vw, 0.58rem) !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain !important;
  scrollbar-width: thin !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab,
.denuncias-admin-screen .denuncias-admin-tab,
.section-card.denuncias-admin-screen .denuncias-admin-tab-rapida,
.denuncias-admin-screen .denuncias-admin-tab-rapida {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  display: inline-flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: clamp(0.16rem, 0.34vw, 0.42rem) !important;
  padding: clamp(0.38rem, 0.58vw, 0.64rem) clamp(0.26rem, 0.42vw, 0.54rem) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab span,
.denuncias-admin-screen .denuncias-admin-tab span,
.section-card.denuncias-admin-screen .denuncias-admin-tab-rapida span,
.denuncias-admin-screen .denuncias-admin-tab-rapida span {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: clamp(0.58rem, 0.66vw, 0.78rem) !important;
  line-height: 1 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab strong,
.denuncias-admin-screen .denuncias-admin-tab strong,
.section-card.denuncias-admin-screen .denuncias-admin-tab-rapida strong,
.denuncias-admin-screen .denuncias-admin-tab-rapida strong {
  flex: 0 0 auto !important;
  min-width: clamp(1.10rem, 1.34vw, 1.58rem) !important;
  height: clamp(1.10rem, 1.34vw, 1.58rem) !important;
  padding: 0 0.20rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
  font-size: clamp(0.56rem, 0.64vw, 0.76rem) !important;
  line-height: 1 !important;
}

@media (max-width: 1180px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-screen .denuncias-admin-tab,
  .section-card.denuncias-admin-screen .denuncias-admin-tab-rapida,
  .denuncias-admin-screen .denuncias-admin-tab-rapida {
    flex-basis: 0 !important;
    padding-left: 0.30rem !important;
    padding-right: 0.30rem !important;
  }
}

@media (max-width: 860px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs,
  .denuncias-admin-screen .denuncias-admin-tabs,
  .section-card.denuncias-admin-screen .denuncias-admin-tabs-rapidas,
  .denuncias-admin-screen .denuncias-admin-tabs-rapidas {
    gap: 0.22rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-screen .denuncias-admin-tab,
  .section-card.denuncias-admin-screen .denuncias-admin-tab-rapida,
  .denuncias-admin-screen .denuncias-admin-tab-rapida {
    flex: 0 0 clamp(70px, 13.5vw, 96px) !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab span,
  .denuncias-admin-screen .denuncias-admin-tab span,
  .section-card.denuncias-admin-screen .denuncias-admin-tab-rapida span,
  .denuncias-admin-screen .denuncias-admin-tab-rapida span {
    font-size: 0.55rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab strong,
  .denuncias-admin-screen .denuncias-admin-tab strong,
  .section-card.denuncias-admin-screen .denuncias-admin-tab-rapida strong,
  .denuncias-admin-screen .denuncias-admin-tab-rapida strong {
    min-width: 1.04rem !important;
    height: 1.04rem !important;
    font-size: 0.54rem !important;
  }
}
/* F10-B3G-HOTFIX-STATUS-SUPERIOR-UMA-LINHA-CSS-V7-FIM */

/* F10-B3G-STATUS-SUPERIOR-4X2-CSS-V9-INICIO */
/* Layout previsivel: 8 status superiores em grade fixa 4x2, sem afetar tabela/modal. */
.section-card.denuncias-admin-screen .denuncias-admin-tabs,
.denuncias-admin-screen .denuncias-admin-tabs,
#denunciasFicticiasMount .denuncias-admin-tabs {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: clamp(0.46rem, 0.72vw, 0.76rem) !important;
  align-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  overflow: visible !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab,
.denuncias-admin-screen .denuncias-admin-tab,
#denunciasFicticiasMount .denuncias-admin-tab {
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 44px !important;
  padding: clamp(0.48rem, 0.72vw, 0.68rem) clamp(0.52rem, 0.78vw, 0.78rem) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.42rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab span,
.denuncias-admin-screen .denuncias-admin-tab span,
#denunciasFicticiasMount .denuncias-admin-tab span {
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: clamp(0.68rem, 0.78vw, 0.84rem) !important;
  line-height: 1.1 !important;
}

.section-card.denuncias-admin-screen .denuncias-admin-tab strong,
.denuncias-admin-screen .denuncias-admin-tab strong,
#denunciasFicticiasMount .denuncias-admin-tab strong {
  flex: 0 0 auto !important;
  min-width: 1.65rem !important;
  height: 1.65rem !important;
  padding: 0 0.32rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: clamp(0.72rem, 0.82vw, 0.9rem) !important;
  line-height: 1 !important;
}

@media (max-width: 980px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs,
  .denuncias-admin-screen .denuncias-admin-tabs,
  #denunciasFicticiasMount .denuncias-admin-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.42rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-screen .denuncias-admin-tab,
  #denunciasFicticiasMount .denuncias-admin-tab {
    min-height: 40px !important;
    padding: 0.46rem 0.48rem !important;
    gap: 0.34rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab span,
  .denuncias-admin-screen .denuncias-admin-tab span,
  #denunciasFicticiasMount .denuncias-admin-tab span {
    font-size: 0.68rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab strong,
  .denuncias-admin-screen .denuncias-admin-tab strong,
  #denunciasFicticiasMount .denuncias-admin-tab strong {
    min-width: 1.45rem !important;
    height: 1.45rem !important;
    font-size: 0.72rem !important;
  }
}

@media (max-width: 700px) {
  .section-card.denuncias-admin-screen .denuncias-admin-tabs,
  .denuncias-admin-screen .denuncias-admin-tabs,
  #denunciasFicticiasMount .denuncias-admin-tabs {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 0.32rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab,
  .denuncias-admin-screen .denuncias-admin-tab,
  #denunciasFicticiasMount .denuncias-admin-tab {
    min-height: 38px !important;
    padding: 0.42rem 0.34rem !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab span,
  .denuncias-admin-screen .denuncias-admin-tab span,
  #denunciasFicticiasMount .denuncias-admin-tab span {
    font-size: 0.62rem !important;
    letter-spacing: -0.01em !important;
  }

  .section-card.denuncias-admin-screen .denuncias-admin-tab strong,
  .denuncias-admin-screen .denuncias-admin-tab strong,
  #denunciasFicticiasMount .denuncias-admin-tab strong {
    min-width: 1.28rem !important;
    height: 1.28rem !important;
    font-size: 0.66rem !important;
    padding: 0 0.2rem !important;
  }
}
/* F10-B3G-STATUS-SUPERIOR-4X2-CSS-V9-FIM */

/* F45-C3-CARD-STATUS-OPERACIONAL-LAB-INICIO */
.f45-alterar-status-box {
  width: 100%;
  margin-top: 14px;
  padding: 16px !important;
  border: 1px solid rgba(212, 175, 55, 0.28) !important;
  border-radius: 14px !important;
  background: rgba(15, 23, 42, 0.65) !important;
  box-shadow: none !important;
  color: #f8fafc;
}

.f45-alterar-status-box::before,
.f45-alterar-status-box::after {
  content: none !important;
  display: none !important;
}

.f45-alterar-status-box h4 {
  margin: 0 0 8px;
  color: #f8fafc;
}

.f45-alterar-status-box select.input {
  display: block;
  width: 100%;
  margin: 10px 0 0;
}

.f45-alterar-status-box button.denuncias-admin-action {
  display: inline-block;
  margin-top: 10px;
}

.f45-alterar-status-box p.section-description {
  margin: 10px 0 0;
  color: rgba(226, 232, 240, 0.85);
}
/* F45-C3-CARD-STATUS-OPERACIONAL-LAB-FIM */

/* F45-C3B-STATUS-OPERACIONAL-LAB-VISUAL-INICIO */
/* CSS-only: padroniza o card Status operacional lab ao tema claro do modal. */
.f45-alterar-status-box {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.66) !important;
  color: #243746 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 38px rgba(15, 45, 58, 0.10);
}

.f45-alterar-status-box::before {
  background: linear-gradient(180deg, #0F6E7B 0%, #13808F 100%) !important;
}

.f45-alterar-status-box h4 {
  color: #062744 !important;
  margin-bottom: 2px;
}

.f45-alterar-status-box .section-description {
  color: #344b5b !important;
  margin: 0;
}

.f45-alterar-status-box .input {
  background: #ffffff !important;
  border-color: rgba(154, 210, 214, 0.92) !important;
  color: #243746 !important;
  min-height: 42px;
}

.f45-alterar-status-box .input:focus {
  border-color: #0F6E7B !important;
  box-shadow: 0 0 0 3px rgba(15, 110, 123, 0.14) !important;
  outline: none;
}

.f45-alterar-status-box .denuncias-admin-action {
  align-self: flex-start;
  min-height: 42px;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 110, 123, 0.24) !important;
  background: linear-gradient(135deg, #0F6E7B 0%, #13808F 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(15, 110, 123, 0.20);
}

.f45-alterar-status-box .denuncias-admin-action:hover {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 110, 123, 0.25);
}

.f45-alterar-status-box .denuncias-admin-action:focus-visible {
  outline: 3px solid rgba(15, 110, 123, 0.22);
  outline-offset: 3px;
}

@media (max-width: 640px) {
  .f45-alterar-status-box .denuncias-admin-action {
    width: 100%;
    justify-content: center;
  }
}
/* F45-C3B-STATUS-OPERACIONAL-LAB-VISUAL-FIM */
/* F50-G1B-CENTRAL-RELATORIOS-CSS-INICIO */
[data-f50-central-relatorios="1"] {
  display: grid;
  gap: 18px;
}

[data-f50-central-relatorios="1"] > .relatorios-panel-head {
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}

[data-f50-central-relatorios="1"] > .section-description {
  margin: 0;
}

[data-f50-central-relatorios="1"] .relatorios-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(280px, 1.15fr);
  gap: 16px;
  align-items: end;
}

[data-f50-central-relatorios="1"] .relatorios-search-wrap {
  display: grid;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

[data-f50-central-relatorios="1"] .relatorios-search-wrap > span {
  display: block;
}

[data-f50-central-relatorios="1"] .relatorios-search {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

[data-f50-central-relatorios="1"] [data-f50-central-periodo="1"] {
  display: grid;
  grid-template-columns: minmax(110px, 0.8fr) minmax(150px, 1.2fr);
  gap: 10px;
  width: 100%;
  min-width: 0;
}

[data-f50-central-relatorios="1"] [data-f50-central-periodo="1"] > * {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
}

[data-f50-central-relatorios="1"] [data-f50-central-periodo-anterior="1"] {
  margin: 0;
  overflow-wrap: anywhere;
}

[data-f50-central-relatorios="1"] [data-f50-central-estado="1"] {
  margin: 0;
  flex: 1 1 320px;
}

[data-f50-central-relatorios="1"] [data-f50-central-gerar="1"] {
  flex: 0 0 auto;
  cursor: not-allowed;
  opacity: 0.72;
}

@media (max-width: 900px) {
  [data-f50-central-relatorios="1"] .relatorios-toolbar {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }

  [data-f50-central-relatorios="1"] .relatorios-toolbar > :last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  [data-f50-central-relatorios="1"] .relatorios-toolbar {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-f50-central-relatorios="1"] .relatorios-toolbar > :last-child {
    grid-column: auto;
  }

  [data-f50-central-relatorios="1"] [data-f50-central-periodo="1"] {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-f50-central-relatorios="1"] [data-f50-central-gerar="1"] {
    width: 100%;
  }
}
/* F50-G1B-CENTRAL-RELATORIOS-CSS-FIM */
/* F51-C2-AUTH-REAL-CSS-INICIO */
html.f51-auth-pending .app,
html.f51-auth-required .app {
  display: none !important;
}

.f51-auth-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: grid;
  place-items: center;
  min-height: 100vh;
  padding: 24px;
  overflow: auto;
  background:
    radial-gradient(circle at top left, rgba(0, 84, 135, 0.24), transparent 42%),
    linear-gradient(145deg, #07111b 0%, #0a1723 52%, #0d2435 100%);
}

.f51-auth-root[hidden],
html.f51-auth-authenticated .f51-auth-root {
  display: none !important;
}

.f51-auth-card {
  width: min(100%, 440px);
  padding: 32px;
  border: 1px solid rgba(212, 175, 55, 0.38);
  border-radius: 22px;
  background: rgba(10, 23, 35, 0.96);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.44);
}

.f51-auth-brand {
  margin: 0 0 8px;
  color: #d4af37;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.f51-auth-title {
  margin: 0;
  color: #f8fafc;
  font-size: clamp(26px, 4vw, 34px);
  line-height: 1.15;
}

.f51-auth-description,
.f51-auth-note {
  color: rgba(226, 232, 240, 0.78);
  line-height: 1.55;
}

.f51-auth-description {
  margin: 12px 0 24px;
}

.f51-auth-note {
  margin: 20px 0 0;
  font-size: 12px;
}

.f51-auth-form,
.f51-auth-field {
  display: grid;
  gap: 9px;
}

.f51-auth-form {
  gap: 16px;
}

.f51-auth-label {
  color: rgba(241, 245, 249, 0.92);
  font-size: 13px;
  font-weight: 700;
}

.f51-auth-input {
  width: 100%;
  min-height: 46px;
}

.f51-auth-submit {
  width: 100%;
  min-height: 46px;
  margin-top: 4px;
}

.f51-auth-status {
  min-height: 20px;
  margin: 0;
  color: rgba(226, 232, 240, 0.82);
  font-size: 13px;
}

.f51-auth-status[data-kind="error"] {
  color: #fca5a5;
}

.f51-auth-status[data-kind="success"] {
  color: #86efac;
}

.f51-userbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-left: auto;
  padding-left: 20px;
}

.f51-userbar-identity {
  display: grid;
  gap: 2px;
  min-width: 0;
  text-align: right;
}

.f51-userbar-name {
  color: #f8fafc;
  font-size: 13px;
}

.f51-userbar-details,
.f51-userbar-status {
  color: rgba(226, 232, 240, 0.72);
  font-size: 11px;
}

.f51-userbar-status:empty {
  display: none;
}

.f51-logout-button {
  min-height: 36px;
  padding: 8px 14px;
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 999px;
  background: rgba(212, 175, 55, 0.08);
  color: #f8fafc;
}

.f51-logout-button:hover {
  border-color: rgba(212, 175, 55, 0.76);
  background: rgba(212, 175, 55, 0.14);
}

@media (max-width: 760px) {
  .f51-auth-root {
    padding: 16px;
  }

  .f51-auth-card {
    padding: 24px;
  }

  .f51-userbar {
    width: 100%;
    justify-content: space-between;
    padding-left: 0;
  }

  .f51-userbar-identity {
    text-align: left;
  }
}
/* F51-C2-AUTH-REAL-CSS-FIM */
/* USUARIOS1-B7B-CSS-INICIO */
.usuarios-filtros .input {
  min-width: 150px;
}

.usuarios-list {
  gap: 14px;
}

.usuarios-card {
  display: grid;
  gap: 14px;
}

.usuarios-card-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.usuarios-card-heading h3 {
  margin: 0;
}

.usuarios-meta {
  margin: 0;
}

.usuarios-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.usuarios-actions button {
  min-height: 38px;
}

.usuarios-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.usuarios-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  background: var(--bg-elevated);
  font-size: 0.78rem;
  line-height: 1.1;
}

.usuarios-self-note {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--brand);
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 700;
}

.usuarios-modal-card {
  width: min(720px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: auto;
}

.usuarios-modal-body {
  display: grid;
  gap: 14px;
}

.usuarios-feedback {
  min-height: 1.25rem;
}

.usuarios-company-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

.usuarios-company-option {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 10px;
  background: var(--bg);
}

.usuarios-company-option input {
  margin-top: 3px;
}

@media (max-width: 760px) {
  .usuarios-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .usuarios-actions button {
    width: 100%;
  }

  .usuarios-company-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* USUARIOS1-B7B-CSS-FIM */

/* F56-D9/D14-TESTE-AUTOMACAO-CSS-INICIO */
.atx-card h2 { margin-bottom: 4px; }
.atx-hint { margin: 0 0 12px; opacity: 0.85; }
.atx-linha {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.atx-linha label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.atx-linha select { min-width: 220px; padding: 6px 8px; }
.atx-status { min-height: 20px; margin: 4px 0 12px; font-size: 13px; }
.atx-status-ok { color: #1a7f37; }
.atx-status-erro { color: #b42318; }
.atx-bloco { margin-top: 16px; }
.atx-bloco h3 { margin-bottom: 6px; font-size: 15px; }
.atx-vazio { opacity: 0.7; font-size: 13px; }
.atx-tabela { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.atx-tabela th, .atx-tabela td {
  border-bottom: 1px solid rgba(127, 127, 127, 0.25);
  padding: 6px 8px;
  text-align: left;
}
.atx-btn-mini { padding: 2px 8px; font-size: 12px; }
/* F56-D9/D14-TESTE-AUTOMACAO-CSS-FIM */

/* CONFIGURACAO1-A2-ATXC-INICIO */
.atxc-grade {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
  margin-bottom: 10px;
}
.atxc-grade label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.atxc-grade input, .atxc-grade select { padding: 6px 8px; }
.atxc-form { border-top: 1px solid rgba(127, 127, 127, 0.25); padding-top: 10px; }
.atxc-empresas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-bottom: 8px;
}
.atxc-check { font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
/* CONFIGURACAO1-A2-ATXC-FIM */

/* IMPLEMENTADOR_RELATORIOS1-A5.3B-CSS-INICIO */
[data-a5ta-root] .a5ta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
  margin: 12px 0;
}
[data-a5ta-root] .a5ta-grid label {
  display: grid;
  gap: 6px;
}
[data-a5ta-root] .a5ta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
[data-a5ta-root] .a5ta-list {
  display: grid;
  gap: 12px;
  margin-top: 12px;
}
[data-a5ta-root] .a5ta-item {
  border: 1px solid var(--border, rgba(255,255,255,.14));
  border-radius: 12px;
  padding: 14px;
  background: rgba(255,255,255,.025);
}
[data-a5ta-root] .a5ta-kv {
  display: grid;
  grid-template-columns: minmax(150px, .45fr) 1fr;
  gap: 10px;
  padding: 4px 0;
}
[data-a5ta-root] .a5ta-k {
  font-weight: 700;
}
[data-a5ta-root] .a5ta-v {
  overflow-wrap: anywhere;
}
@media (max-width: 680px) {
  [data-a5ta-root] .a5ta-kv { grid-template-columns: 1fr; gap: 2px; }
}
/* IMPLEMENTADOR_RELATORIOS1-A5.3B-CSS-FIM */

/* CONCLUSAO_OPERACIONAL_AUTOMACAO_MODELOS1-A8.7-CSS-INICIO
   Estilo da view #automacoesModelos. TODO o bloco e escopado em
   [data-a54e-root]: nenhum seletor global e criado ou alterado, e nenhuma
   outra tela do app e afetada. Paleta local, sem tocar nos tokens globais. */

[data-a54e-root].a87 {
  --a87-accent: #0f766e;
  --a87-accent-hover: #115e56;
  --a87-accent-soft: #ecfdf5;
  --a87-accent-line: #99f6e4;
  --a87-surface: #ffffff;
  --a87-surface-2: #f8fafc;
  --a87-line: #e2e8f0;
  --a87-line-strong: #cbd5e1;
  --a87-ink: #0f172a;
  --a87-muted: #64748b;
  --a87-ok-bg: #dcfce7;
  --a87-ok-ink: #166534;
  --a87-off-bg: #fee2e2;
  --a87-off-ink: #b91c1c;
  --a87-info-bg: #eff6ff;
  --a87-info-line: #bfdbfe;
  --a87-warn-bg: #fffbeb;
  --a87-warn-line: #fde68a;
  --a87-r: 10px;
  color: var(--a87-ink);
}

/* ---------- cabecalho da pagina ---------- */
[data-a54e-root] .a87-page-head { margin-bottom: 14px; }
[data-a54e-root] .a87-page-head h2 {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: 22px; line-height: 1.25; color: var(--a87-ink);
}
[data-a54e-root] .a87-chip {
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px;
  background: var(--a87-accent-soft); color: var(--a87-accent);
  border: 1px solid var(--a87-accent-line);
}
[data-a54e-root] .a87-page-sub { margin: 0; font-size: 13.5px; color: var(--a87-muted); }

[data-a54e-root] .a87-note {
  border: 1px solid var(--a87-warn-line); background: var(--a87-warn-bg);
  border-radius: var(--a87-r); padding: 11px 14px; margin-bottom: 18px;
  font-size: 13px; line-height: 1.6; color: #78350f;
}
[data-a54e-root] .a87-note a { color: #92400e; text-decoration: underline; }

/* ---------- cartoes ---------- */
[data-a54e-root] .a87-card {
  background: var(--a87-surface); border: 1px solid var(--a87-line);
  border-radius: 14px; padding: 20px 22px; margin-bottom: 20px;
}
[data-a54e-root] .a87-card-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 4px;
}
[data-a54e-root] .a87-card-head h3 { margin: 0 0 4px; font-size: 17px; color: var(--a87-ink); }
[data-a54e-root] .a87-card-sub { margin: 0; font-size: 13px; color: var(--a87-muted); }
[data-a54e-root] .a87-badge {
  font-size: 11px; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: var(--a87-accent-soft); color: var(--a87-accent);
  border: 1px solid var(--a87-accent-line); white-space: nowrap;
}
[data-a54e-root] .a87-callout {
  margin: 14px 0 4px; padding: 12px 14px; border-radius: var(--a87-r);
  background: var(--a87-info-bg); border: 1px solid var(--a87-info-line);
  font-size: 13px; line-height: 1.6; color: #1e3a8a;
}
[data-a54e-root] .a87-status { min-height: 0; margin: 10px 0 0; font-size: 13px; }
[data-a54e-root] .a87-status:empty { margin: 0; }

/* ---------- etapas ---------- */
[data-a54e-root] .a87-steps {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 28px; margin-top: 18px;
}
[data-a54e-root] .a87-step { min-width: 0; padding-top: 18px; border-top: 1px solid var(--a87-line); }
[data-a54e-root] .a87-step:nth-child(1),
[data-a54e-root] .a87-step:nth-child(2) { border-top: 0; padding-top: 0; }
[data-a54e-root] .a87-step-wide { grid-column: 1 / -1; }
[data-a54e-root] .a87-step-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
[data-a54e-root] .a87-step-head h4 { margin: 0; font-size: 15px; color: var(--a87-ink); }
[data-a54e-root] .a87-step-n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%;
  background: var(--a87-accent); color: #fff;
  font-size: 12px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
[data-a54e-root] .a87-step-desc { margin: 0 0 12px; font-size: 13px; color: var(--a87-muted); }

/* ---------- campos ---------- */
[data-a54e-root] .a87-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
[data-a54e-root] .a87-lbl { font-size: 12.5px; font-weight: 600; color: #334155; }
/* D5: input[type=date] entra na mesma familia visual de select/number. Sem a
   inclusao explicita o campo de data unica herdaria o estilo cru do agente. */
[data-a54e-root] .a87-field select,
[data-a54e-root] .a87-field input[type="number"],
[data-a54e-root] .a87-field input[type="date"] {
  width: 100%; box-sizing: border-box; height: 42px;
  padding: 0 12px; font-size: 14px; font-family: inherit;
  color: var(--a87-ink); background: var(--a87-surface);
  border: 1px solid var(--a87-line-strong); border-radius: var(--a87-r);
}
[data-a54e-root] .a87-field select[multiple] { height: auto; min-height: 150px; padding: 8px; }
[data-a54e-root] .a87-field select:focus,
[data-a54e-root] .a87-field input:focus {
  outline: none; border-color: var(--a87-accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
[data-a54e-root] .a87-field select:disabled,
[data-a54e-root] .a87-field input:disabled {
  background: var(--a87-surface-2); color: #94a3b8; cursor: not-allowed;
}
[data-a54e-root] .a87-hint { margin: 6px 0 0; font-size: 12px; color: var(--a87-muted); line-height: 1.5; }
/* D5 — correcao de higiene. `.a87-field` declara display:flex, que vence a
   regra [hidden]{display:none} da folha do navegador (estilo de autor sempre
   ganha do UA). Resultado: `campo.hidden = true` nunca escondeu de fato o
   campo de empresas no escopo "todas" — ele so ficava desabilitado. Com quatro
   escopos e o campo de mes condicional, esconder de verdade passou a ser
   requisito, entao a reposicao escopada entra aqui. */
[data-a54e-root] .a87-field[hidden],
[data-a54e-root] .a87-step[hidden] { display: none; }
[data-a54e-root] .a87-grid-2 {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px;
}
[data-a54e-root] .a87-aviso {
  align-self: end; padding: 11px 13px; border-radius: var(--a87-r);
  background: var(--a87-warn-bg); border: 1px solid var(--a87-warn-line);
  font-size: 12.5px; line-height: 1.5; color: #92400e;
}

/* D5 — "Nenhuma empresa" NUNCA pode ser confundido com "Todas as empresas".
   A distincao e estrutural (elementos DOM separados no HTML) e reforcada aqui
   com paleta propria: o aviso de "todas" e ambar; o de "nenhuma" e azul de
   informacao. Nao ha reaproveitamento de elemento com troca de texto. */
[data-a54e-root] .a87-aviso-nenhuma {
  align-self: end; padding: 11px 13px; border-radius: var(--a87-r);
  background: var(--a87-info-bg); border: 1px solid var(--a87-info-line);
  font-size: 12.5px; line-height: 1.5; color: #1e3a8a;
}
[data-a54e-root] .a87-radio-nenhuma { border-style: dashed; }
[data-a54e-root] .a87-radio-nenhuma:has(input:checked) {
  border-style: solid; border-color: #1d4ed8; background: var(--a87-info-bg);
  box-shadow: 0 0 0 1px #1d4ed8 inset;
}
[data-a54e-root] .a87-radio-nenhuma input:checked ~ .a87-radio-body .a87-radio-t { color: #1d4ed8; }
[data-a54e-root] .a87-pill-nenhuma {
  background: var(--a87-info-bg); color: #1e3a8a; border-color: var(--a87-info-line);
}

/* D5 — grupos de modalidade e paineis da etapa 5.
   O painel inativo sai do fluxo (display:none) em vez de apenas esmaecer:
   com cinco modalidades, manter todas visiveis viraria ruido. O .is-off dos
   paineis legados da etapa 5 (.a87-prazo) continua com o comportamento antigo
   de opacidade, porque .a87-painel e uma classe nova e separada. */
[data-a54e-root] .a87-mod-grupo { margin-bottom: 16px; }
[data-a54e-root] .a87-mod-grupo.is-off { display: none; }
[data-a54e-root] .a87-paineis { display: grid; gap: 16px; }
[data-a54e-root] .a87-painel.is-off { display: none; }
[data-a54e-root] .a87-painel { opacity: 1; }

/* D5 — aviso nao-bloqueante de data ja vencida numa config existente. */
[data-a54e-root] .a87-data-aviso {
  margin: 8px 0 0; padding: 8px 11px; border-radius: var(--a87-r);
  background: var(--a87-warn-bg); border: 1px solid var(--a87-warn-line);
  font-size: 12px; line-height: 1.5; color: #92400e;
}
[data-a54e-root] .a87-data-aviso[hidden] { display: none; }

/* ---------- opcoes em cartao ---------- */
[data-a54e-root] .a87-radios { display: grid; gap: 12px; }
[data-a54e-root] .a87-radios-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
[data-a54e-root] .a87-radios-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
[data-a54e-root] .a87-radio {
  display: flex; align-items: flex-start; gap: 10px; min-width: 0;
  padding: 13px 14px; cursor: pointer;
  background: var(--a87-surface); border: 1px solid var(--a87-line-strong);
  border-radius: var(--a87-r); transition: border-color .15s, background .15s, box-shadow .15s;
}
[data-a54e-root] .a87-radio:hover { border-color: var(--a87-accent-line); }
[data-a54e-root] .a87-radio input { margin: 2px 0 0; accent-color: var(--a87-accent); flex: 0 0 auto; }
[data-a54e-root] .a87-radio-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
[data-a54e-root] .a87-radio-t { font-size: 13.5px; font-weight: 600; color: var(--a87-ink); }
[data-a54e-root] .a87-radio-d { font-size: 12px; line-height: 1.45; color: var(--a87-muted); }
/* Estado selecionado: :has() no cartao inteiro, com reforco no corpo para
   navegadores sem :has(). */
[data-a54e-root] .a87-radio input:checked ~ .a87-radio-body .a87-radio-t { color: var(--a87-accent); }
[data-a54e-root] .a87-radio:has(input:checked) {
  border-color: var(--a87-accent); background: var(--a87-accent-soft);
  box-shadow: 0 0 0 1px var(--a87-accent) inset;
}

/* ---------- prazo / intervalo ---------- */
[data-a54e-root] .a87-prazos {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 16px;
}
/* A8.7-ajuste: paineis da etapa 5 quase retangulares, com arredondamento leve
   apenas nas pontas, alinhados aos demais cartoes da tela. min-width e
   overflow-wrap garantem que rotulos e textos de apoio fiquem integralmente
   contidos, sem encostar ou ultrapassar a borda. Padding, cores, hierarquia e
   o estado ativo/inativo permanecem inalterados. */
[data-a54e-root] .a87-prazo {
  padding: 16px; border-radius: 4px; border: 1px solid var(--a87-line);
  background: var(--a87-surface-2); transition: opacity .15s;
  min-width: 0; overflow-wrap: anywhere;
}
/* A8.7-v2 — CONFLITO PROVADO, e o unico motivo do !important abaixo.
   A regra global de badges/pills em main.css:3436 seleciona por SUBSTRING de
   classe:
       [class*="prazo"] { border-radius: var(--f7-radius-sm) !important; ... }
   e --f7-radius-sm vale 999px (main.css:2914). Como o seletor casa qualquer
   classe que contenha "prazo", ele atinge acidentalmente .a87-prazo,
   .a87-prazo-unico e .a87-prazo-repetido desta tela, que nada tem a ver com
   badges. Por usar !important, aquela declaracao vence QUALQUER valor deste
   bloco independentemente de especificidade — foi por isso que trocar 12px por
   8px nao produziu efeito visual algum: o raio renderizado continuava 999px,
   ou seja, capsula.
   A regra global NAO e alterada (pertence ao trilho de denuncias). A correcao
   e uma reposicao escopada em [data-a54e-root], restrita a border-radius. */
[data-a54e-root] .a87-prazo,
[data-a54e-root] .a87-prazo-unico,
[data-a54e-root] .a87-prazo-repetido {
  border-radius: 4px !important;
}
[data-a54e-root] .a87-prazo h5 {
  margin: 0 0 4px; font-size: 13px; font-weight: 700; color: var(--a87-accent);
}
[data-a54e-root] .a87-prazo-repetido h5 { color: #1d4ed8; }
[data-a54e-root] .a87-prazo .a87-grid-2 { margin-top: 10px; }
[data-a54e-root] .a87-prazo.is-off { opacity: .5; }

/* ---------- acoes do formulario ---------- */
[data-a54e-root] .a87-actions {
  display: flex; justify-content: flex-end; align-items: center;
  gap: 10px; flex-wrap: wrap; margin-top: 22px;
  padding-top: 18px; border-top: 1px solid var(--a87-line);
}
[data-a54e-root] .a87-btn {
  height: 42px; padding: 0 18px; border-radius: var(--a87-r);
  font-size: 14px; font-weight: 600; font-family: inherit; cursor: pointer;
  border: 1px solid var(--a87-line-strong); background: var(--a87-surface); color: var(--a87-ink);
  transition: background .15s, border-color .15s, color .15s;
}
[data-a54e-root] .a87-btn:hover { border-color: var(--a87-line-strong); background: var(--a87-surface-2); }
[data-a54e-root] .a87-btn-primary {
  background: var(--a87-accent); border-color: var(--a87-accent); color: #fff;
}
[data-a54e-root] .a87-btn-primary:hover { background: var(--a87-accent-hover); border-color: var(--a87-accent-hover); }
[data-a54e-root] .a87-btn-ghost { border-color: transparent; color: var(--a87-muted); }
[data-a54e-root] .a87-btn:disabled { opacity: .55; cursor: not-allowed; }

/* ---------- filtros e botoes de icone ---------- */
[data-a54e-root] .a87-card-head-list { align-items: center; margin-bottom: 14px; }
[data-a54e-root] .a87-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
[data-a54e-root] .a87-filters select {
  height: 40px; min-width: 168px; padding: 0 12px; font-size: 13.5px; font-family: inherit;
  color: var(--a87-ink); background: var(--a87-surface);
  border: 1px solid var(--a87-line-strong); border-radius: var(--a87-r);
}
[data-a54e-root] .a87-filters select:focus {
  outline: none; border-color: var(--a87-accent);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .14);
}
[data-a54e-root] .a87-icon-btn {
  width: 38px; height: 38px; flex: 0 0 auto; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--a87-surface); color: #475569;
  border: 1px solid var(--a87-line-strong); border-radius: 9px;
  transition: background .15s, color .15s, border-color .15s;
}
[data-a54e-root] .a87-icon-btn svg {
  width: 17px; height: 17px; fill: none; stroke: currentColor;
  stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
}
[data-a54e-root] .a87-icon-btn:hover { background: var(--a87-surface-2); color: var(--a87-ink); }
[data-a54e-root] .a87-icon-perigo { color: var(--a87-off-ink); border-color: #fecaca; background: #fef2f2; }
[data-a54e-root] .a87-icon-perigo:hover { background: #fee2e2; color: var(--a87-off-ink); }
[data-a54e-root] .a87-icon-ok { color: var(--a87-ok-ink); border-color: #bbf7d0; background: #f0fdf4; }
[data-a54e-root] .a87-icon-ok:hover { background: var(--a87-ok-bg); color: var(--a87-ok-ink); }
[data-a54e-root] .a87-icon-btn:disabled { opacity: .5; cursor: not-allowed; }

/* ---------- tabela administrativa ---------- */
[data-a54e-root] .a87-table-wrap {
  border: 1px solid var(--a87-line); border-radius: 12px; overflow-x: auto;
}
[data-a54e-root] .a87-table { width: 100%; min-width: 880px; border-collapse: collapse; font-size: 13.5px; }
[data-a54e-root] .a87-table thead th {
  text-align: left; white-space: nowrap; padding: 12px 16px;
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--a87-muted); background: var(--a87-surface-2);
  border-bottom: 1px solid var(--a87-line);
}
[data-a54e-root] .a87-table tbody td {
  padding: 14px 16px; vertical-align: top;
  border-bottom: 1px solid var(--a87-line); color: var(--a87-ink);
}
[data-a54e-root] .a87-table tbody tr:last-child td { border-bottom: 0; }
[data-a54e-root] .a87-table tbody tr:hover td { background: var(--a87-surface-2); }
[data-a54e-root] .a87-td-modelo { min-width: 190px; }
[data-a54e-root] .a87-modelo-nome { display: block; font-weight: 600; line-height: 1.35; }
[data-a54e-root] .a87-modelo-sub { display: block; margin-top: 2px; font-size: 12px; color: var(--a87-muted); }
[data-a54e-root] .a87-td-base { min-width: 175px; color: #334155; }
[data-a54e-root] .a87-td-prazo { min-width: 200px; }
[data-a54e-root] .a87-prazo-linha { display: block; line-height: 1.5; color: #334155; }
[data-a54e-root] .a87-td-data { white-space: nowrap; color: #334155; }
[data-a54e-root] .a87-th-acoes, [data-a54e-root] .a87-td-acoes { text-align: right; }
[data-a54e-root] .a87-acoes { display: inline-flex; gap: 8px; justify-content: flex-end; }
[data-a54e-root] .a87-count { margin: 12px 2px 0; font-size: 12.5px; color: var(--a87-muted); }

/* ---------- pills ---------- */
[data-a54e-root] .a87-pill {
  display: inline-block; padding: 4px 11px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; white-space: nowrap; border: 1px solid transparent;
}
[data-a54e-root] .a87-pill-ativa { background: var(--a87-ok-bg); color: var(--a87-ok-ink); border-color: #bbf7d0; }
[data-a54e-root] .a87-pill-inativa { background: var(--a87-off-bg); color: var(--a87-off-ink); border-color: #fecaca; }
[data-a54e-root] .a87-pill-unico { background: var(--a87-info-bg); color: #1d4ed8; border-color: var(--a87-info-line); }
[data-a54e-root] .a87-pill-repetido { background: #ede9fe; color: #5b21b6; border-color: #ddd6fe; }
[data-a54e-root] .a87-pill-neutro { background: var(--a87-surface-2); color: #475569; border-color: var(--a87-line-strong); }

/* ---------- estados vazio / erro / carregando ---------- */
[data-a54e-root] .a87-msg { padding: 30px 16px; text-align: center; font-size: 13.5px; color: var(--a87-muted); }
[data-a54e-root] .a87-msg-erro { color: var(--a87-off-ink); }
/* D5 — higiene: linhaMensagem() ja emitia as variantes "vazio" e "load" desde
   a A8.7, mas nenhuma regra existia para elas e ambas caiam no cinza generico
   de .a87-msg. Agora cada estado tem peso visual proprio. */
[data-a54e-root] .a87-msg-vazio { color: #475569; font-style: italic; }
[data-a54e-root] .a87-msg-load { color: var(--a87-accent); }
[data-a54e-root] .a87-tr-msg:hover td { background: transparent; }

/* ---------- detalhe (unico lugar com empresas) ---------- */
[data-a54e-root] .a87-detail {
  margin-top: 18px; padding: 18px; border-radius: 12px;
  border: 1px solid var(--a87-line); background: var(--a87-surface-2);
}
[data-a54e-root] .a87-detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px;
}
[data-a54e-root] .a87-detail-head h4 { margin: 0; font-size: 15px; color: var(--a87-ink); }
[data-a54e-root] .a87-kv-grid { display: grid; gap: 2px; }
[data-a54e-root] .a87-kv {
  display: grid; grid-template-columns: minmax(150px, .32fr) 1fr; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--a87-line);
}
[data-a54e-root] .a87-kv:last-child { border-bottom: 0; }
[data-a54e-root] .a87-k { font-size: 12.5px; font-weight: 600; color: var(--a87-muted); }
[data-a54e-root] .a87-v { font-size: 13.5px; color: var(--a87-ink); overflow-wrap: anywhere; }
[data-a54e-root] .a87-chips { display: flex; flex-wrap: wrap; gap: 6px; max-height: 160px; overflow-y: auto; }
[data-a54e-root] .a87-chip-empresa {
  padding: 3px 10px; border-radius: 999px; font-size: 12px;
  background: var(--a87-surface); color: #334155; border: 1px solid var(--a87-line-strong);
}

/* ---------- responsividade ---------- */
@media (max-width: 1080px) {
  [data-a54e-root] .a87-steps { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  [data-a54e-root] .a87-step:nth-child(2) { border-top: 1px solid var(--a87-line); padding-top: 18px; }
  [data-a54e-root] .a87-prazos { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 760px) {
  [data-a54e-root] .a87-card { padding: 16px; }
  [data-a54e-root] .a87-radios-2,
  [data-a54e-root] .a87-radios-3 { grid-template-columns: minmax(0, 1fr); }
  [data-a54e-root] .a87-grid-2 { grid-template-columns: minmax(0, 1fr); }
  [data-a54e-root] .a87-card-head-list { align-items: stretch; }
  [data-a54e-root] .a87-filters { width: 100%; }
  [data-a54e-root] .a87-filters select { flex: 1 1 160px; min-width: 0; }
  [data-a54e-root] .a87-actions { justify-content: stretch; }
  [data-a54e-root] .a87-actions .a87-btn { flex: 1 1 auto; }
  [data-a54e-root] .a87-kv { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}
/* CONCLUSAO_OPERACIONAL_AUTOMACAO_MODELOS1-A8.7-CSS-FIM */

/* FCPM-B2-PARTE-3C-CSS-INICIO */
[data-fcpm-comp] {
  display: grid;
  gap: 16px;
}

[data-fcpm-comp] .fcpm-comp-filtros {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, auto) auto;
  gap: 10px;
  align-items: end;
}

[data-fcpm-comp] .fcpm-comp-filtros > * {
  min-width: 0;
}

[data-fcpm-comp] .fcpm-contador {
  align-self: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  opacity: 0.82;
}

[data-fcpm-comp] .fcpm-comp-lista {
  display: grid;
  gap: 8px;
  max-height: 320px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 4px;
  scrollbar-gutter: stable;
}

[data-fcpm-comp] .fcpm-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid rgba(148, 163, 184, 0.32);
  border-left: 4px solid transparent;
  border-radius: 10px;
  background: rgba(15, 23, 42, 0.28);
}

[data-fcpm-comp] .fcpm-item input[type="checkbox"] {
  margin-top: 3px;
}

[data-fcpm-comp] .fcpm-item-txt {
  display: grid;
  gap: 3px;
  min-width: 0;
}

[data-fcpm-comp] .fcpm-item-txt strong,
[data-fcpm-comp] .fcpm-item-txt small {
  overflow-wrap: anywhere;
}

[data-fcpm-comp] .fcpm-item-txt small {
  line-height: 1.35;
  opacity: 0.74;
}

[data-fcpm-comp] .fcpm-item-ativo {
  border-style: solid;
}

[data-fcpm-comp] .fcpm-item-inativo {
  border-style: dashed;
  opacity: 0.74;
}

[data-fcpm-comp] .fcpm-item-selecionado {
  border-left-color: currentColor;
  box-shadow: inset 0 0 0 1px rgba(148, 163, 184, 0.24);
  background: rgba(30, 64, 175, 0.12);
}

[data-fcpm-comp] .fcpm-item-bloqueado {
  cursor: not-allowed;
  border-style: dashed;
  opacity: 0.58;
}

[data-fcpm-comp] .fcpm-item-bloqueado input[type="checkbox"] {
  cursor: not-allowed;
}

[data-fcpm-comp] .fcpm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 28px;
}

[data-fcpm-comp] .fcpm-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 5px 7px 5px 10px;
  border: 1px solid rgba(148, 163, 184, 0.34);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.12);
}

[data-fcpm-comp] .fcpm-chip > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

[data-fcpm-comp] .fcpm-chip-x {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

[data-fcpm-comp] .fcpm-chip-x:hover,
[data-fcpm-comp] .fcpm-chip-x:focus-visible {
  background: rgba(148, 163, 184, 0.2);
}

[data-fcpm-comp] .fcpm-carregando {
  padding: 12px;
  text-align: center;
  opacity: 0.76;
}

[data-fcpm-comp] .fcpm-erro {
  padding: 10px 12px;
  border: 1px solid rgba(248, 113, 113, 0.5);
  border-radius: 8px;
  background: rgba(127, 29, 29, 0.18);
}

.fcpm-qtd {
  display: inline-block;
  min-width: 2ch;
  text-align: center;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
}

@media (max-width: 720px) {
  [data-fcpm-comp] .fcpm-comp-filtros {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }

  [data-fcpm-comp] .fcpm-contador {
    white-space: normal;
  }

  [data-fcpm-comp] .fcpm-comp-lista {
    max-height: 240px;
  }

  [data-fcpm-comp] .fcpm-item {
    padding: 9px 10px;
  }

  [data-fcpm-comp] .fcpm-chip {
    max-width: 100%;
  }
}
/* FCPM-B2-PARTE-3C-CSS-FIM */

/* FCPM-C1-CSS-INICIO */
/* Badge "Padrao global" na listagem de pacotes. Cores reutilizam os
   mesmos tokens do bloco FCPM-B2 (sem identidade visual paralela). */
.fcpm-badge-padrao {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid rgba(148, 163, 184, 0.45);
  border-radius: 999px;
  background: rgba(30, 64, 175, 0.16);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Nome e ativacao travados: no formulario de pacotes estes dois campos
   so ficam :disabled quando o formulario aberto e o PADRAO GLOBAL
   (fNomeEl.disabled = compPacotePadraoGlobal; idem fAtivoEl). Escopo
   pelos data-attributes reais do template — sem nome ou ID fixo. */
[data-mdl-form] [data-mdl-f-nome]:disabled,
[data-mdl-form] [data-mdl-f-ativo]:disabled {
  opacity: 0.62;
  cursor: not-allowed;
}

/* Espelho de status junto ao botao Salvar (aria-live).
   Quando vazio, apenas recolhe o espaco reservado sem ocultar o elemento. */
.atxc-form .atx-status.fcpm-status-acao {
  margin: 10px 0 6px;
}

.atxc-form .atx-status.fcpm-status-acao:empty {
  min-height: 0;
  margin: 0;
}

/* Aviso: a classe atx-status-aviso nao tem cor em nenhum ponto do CSS
   real. A regra fica escopada aos dois elementos que recebem a classe;
   .atx-status-ok e .atx-status-erro permanecem intocados. */
[data-mdl-status].atx-status-aviso,
[data-mdl-status-acao].atx-status-aviso {
  color: #9a6700;
}

@media (max-width: 720px) {
  .fcpm-badge-padrao {
    white-space: normal;
  }
}
/* FCPM-C1-CSS-FIM */

/* D6-CLAUDE1-CSS-INICIO
   Selo de situacao do Modelo Configuravel. TODO o bloco e escopado em
   [data-rmod-root]: nenhum seletor global e criado ou alterado, e nenhuma
   outra tela do app e afetada.

   Por que classes proprias: as .a87-pill* existentes vivem inteiramente
   dentro de [data-a54e-root].a87, inclusive os tokens de cor. Reaproveitar
   aqueles nomes fora daquele escopo renderizaria o selo SEM estilo. Os
   valores abaixo espelham a mesma paleta, em literal, sem depender de
   token de outra view e sem tocar nela. */

[data-rmod-root] .rmod-pill {
  display: inline-block;
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  border: 1px solid transparent;
}
[data-rmod-root] .rmod-pill-ativo {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}
[data-rmod-root] .rmod-pill-inativo {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fecaca;
}
[data-rmod-root] .rmod-pill-arquivado {
  background: #f8fafc;
  color: #475569;
  border-color: #cbd5e1;
}
/* D6-CLAUDE1-CSS-FIM */

/* D7-FEEDBACK-CONTEXTUAL-CSS-INICIO
   Slot de feedback contextual das acoes. TODO o bloco e escopado em
   [data-d7-status]: nenhuma regra existente e alterada e nenhum seletor
   global novo e criado. As cores reutilizam .atx-status-ok/-erro que ja
   existem em main.css:11757-11758. */

[data-d7-status] {
  margin: 10px 0 6px;
}

/* Slot vazio nao ocupa espaco nem gera gap. display:none e obrigatorio
   (e nao min-height:0) porque .usuarios-card e grid com gap 14px e
   .usuarios-actions e flex com gap 8px: um item vazio ainda consumiria
   o gap. */
[data-d7-status]:empty {
  display: none;
}

/* .atx-status-aviso so tinha cor escopada em [data-mdl-status*]
   (main.css:12430). Mesmo hex, agora tambem para o slot D7. */
[data-d7-status].atx-status-aviso {
  color: #9a6700;
}

/* Slot de LISTA LONGA. Ancora na borda INFERIOR: a posicao normal do slot
   fica DEPOIS do container da lista, entao enquanto o usuario estiver numa
   linha distante essa posicao esta abaixo da dobra e bottom:0 puxa a caixa
   para cima, fixando-a na base da viewport. Ao chegar ao fim do bloco ela
   volta ao fluxo normal. Nao depende da altura do topmenu (que cresce
   quando o nav quebra em telas estreitas), logo vale igual em 480, 720,
   1024 px e desktop — sem media query e sem medicao por JavaScript. */
[data-d7-status][data-d7-sticky] {
  position: sticky;
  top: auto;
  bottom: 0;
  z-index: 4;
  max-width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-elevated);
  box-shadow: var(--shadow);
}

/* D7-H2: severidade claramente perceptivel.
   Antes o slot era apenas texto colorido (.atx-status-ok = #1a7f37) sobre a
   superficie branca do sticky: lia-se como texto escuro comum. Agora cada
   severidade tem fundo, borda e peso proprios.
   As cores REUTILIZAM a paleta ja existente no projeto — sao os mesmos hexes
   de [data-rmod-root] .rmod-pill-ativo/-inativo (main.css) e dos tokens
   --a87-ok-bg / --a87-off-bg / --a87-warn-bg do bloco A8.7. Nenhuma cor
   improvisada e nenhum componente historico alterado.
   Estas regras vem DEPOIS de [data-d7-sticky] de proposito: mesma
   especificidade, entao o fundo da severidade vence o fundo neutro do
   sticky. Valem igualmente no slot normal e no sticky. */
[data-d7-status].atx-status-ok,
[data-d7-status].atx-status-erro,
[data-d7-status].atx-status-aviso {
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  line-height: 1.45;
}

[data-d7-status].atx-status-ok {
  background: #dcfce7;
  color: #166534;
  border-color: #86efac;
}

[data-d7-status].atx-status-erro {
  background: #fee2e2;
  color: #b91c1c;
  border-color: #fca5a5;
}

[data-d7-status].atx-status-aviso {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}

/* D7-FEEDBACK-CONTEXTUAL-CSS-FIM */

/* D11-PADRAO-VISUAL-CSS-INICIO
   D11 - padronizacao visual das cinco telas-alvo pela linguagem ja homologada
   em Dashboard, Empresas, Relatorios e Activity (blocos F8-J1/J3, F8-M2,
   F8-F6 e a familia .status-pill).

   Escopo fechado: todo seletor deste bloco comeca por uma das cinco raizes
   [data-rmod-root], [data-a54e-root], [data-mdl-root], [data-atx-root] e
   .usuarios-screen. Nenhuma regra alcanca o menu, a casca ou as telas de
   referencia. A ordem do menu e resolvida em JS; a ocultacao de Areas
   continua sendo a regra historica F7-AREAS-HIDE-NAV.

   !important so nas propriedades visuais autorizadas (background, border,
   border-color, box-shadow, color, text-shadow, filter, opacity).
   `display` aparece uma unica vez, sempre guardado por :not([hidden]),
   para nao reabrir controle que as telas escondem por atributo. */

/* D11-ESCOPO: [data-rmod-root] [data-mdl-root] [data-atx-root] */

[data-rmod-root],
[data-mdl-root],
[data-atx-root] {
  --d11-tinta: #0f172a;
  --d11-mudo: #475569;
  --d11-linha: rgba(203, 213, 225, 0.95);
  --d11-th-fundo: #eaf7fa;
  --d11-th-linha: rgba(20, 184, 166, 0.55);
  --d11-hover: #f8fcfd;
  --d11-vazio: #64748b;
  --d11-ok: #15803d;
  --d11-erro: #b42318;
}

[data-rmod-root] > h2,
[data-mdl-root] > h2,
[data-atx-root] > h2 {
  margin: 0 0 6px;
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--d11-tinta) !important;
}

[data-rmod-root] > p,
[data-mdl-root] > p,
[data-atx-root] > p {
  margin: 0 0 12px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: var(--d11-mudo) !important;
  opacity: 1 !important;
}

[data-rmod-root] .atx-bloco h3,
[data-mdl-root] .atx-bloco h3,
[data-atx-root] .atx-bloco h3 {
  margin: 0 0 10px;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--d11-tinta) !important;
}

[data-rmod-root] .atx-linha label,
[data-mdl-root] .atx-linha label,
[data-atx-root] .atx-linha label,
[data-rmod-root] .atxc-grade label,
[data-mdl-root] .atxc-grade label {
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--d11-mudo) !important;
}

[data-rmod-root] .atx-tabela,
[data-mdl-root] .atx-tabela,
[data-atx-root] .atx-tabela {
  font-size: 0.9rem;
  background: #ffffff !important;
}

[data-rmod-root] .atx-tabela th,
[data-mdl-root] .atx-tabela th,
[data-atx-root] .atx-tabela th {
  padding: 12px 14px;
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d11-mudo) !important;
  background: var(--d11-th-fundo) !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--d11-th-linha) !important;
}

[data-rmod-root] .atx-tabela td,
[data-mdl-root] .atx-tabela td,
[data-atx-root] .atx-tabela td {
  padding: 13px 14px;
  color: var(--d11-tinta) !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: var(--d11-linha) !important;
}

[data-rmod-root] .atx-tabela tbody tr:hover td,
[data-mdl-root] .atx-tabela tbody tr:hover td,
[data-atx-root] .atx-tabela tbody tr:hover td {
  background: var(--d11-hover) !important;
}

[data-rmod-root] .atx-vazio,
[data-mdl-root] .atx-vazio,
[data-atx-root] .atx-vazio {
  padding: 16px 2px;
  font-size: 0.9rem;
  color: var(--d11-vazio) !important;
  opacity: 1 !important;
}

[data-rmod-root] .atx-status-ok,
[data-mdl-root] .atx-status-ok,
[data-atx-root] .atx-status-ok {
  font-weight: 700;
  color: var(--d11-ok) !important;
}

[data-rmod-root] .atx-status-erro,
[data-mdl-root] .atx-status-erro,
[data-atx-root] .atx-status-erro {
  font-weight: 700;
  color: var(--d11-erro) !important;
}

[data-rmod-root] .btn:not([hidden]),
[data-mdl-root] .btn:not([hidden]),
[data-atx-root] .btn:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1;
  cursor: pointer;
}

[data-rmod-root] .btn.btn-primary,
[data-mdl-root] .btn.btn-primary,
[data-atx-root] .btn.btn-primary {
  padding: 11px 18px;
  font-weight: 800;
  letter-spacing: 0.22px;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.30) !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
  background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.42), transparent 20%), radial-gradient(circle at 28% 8%, rgba(224, 187, 126, 0.36), transparent 28%), linear-gradient(135deg, rgba(154, 210, 214, 0.90) 0%, rgba(42, 157, 157, 0.80) 34%, rgba(19, 128, 143, 0.78) 66%, rgba(11, 51, 87, 0.86) 100%) !important;
  box-shadow: 0 8px 18px rgba(19, 128, 143, 0.18), 0 4px 10px rgba(11, 51, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

[data-rmod-root] .btn.btn-primary:hover,
[data-mdl-root] .btn.btn-primary:hover,
[data-atx-root] .btn.btn-primary:hover {
  filter: brightness(1.06) saturate(1.05) !important;
  border-color: rgba(224, 187, 126, 0.72) !important;
}

[data-rmod-root] .btn:not(.btn-primary),
[data-mdl-root] .btn:not(.btn-primary),
[data-atx-root] .btn:not(.btn-primary) {
  padding: 10px 16px;
  font-weight: 800;
  color: #26323f !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88)), linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)) !important;
  box-shadow: 0 12px 26px rgba(15, 44, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

[data-rmod-root] .btn:not(.btn-primary):hover,
[data-mdl-root] .btn:not(.btn-primary):hover,
[data-atx-root] .btn:not(.btn-primary):hover {
  color: #101923 !important;
  border-color: rgba(15, 118, 110, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 247, 0.94)), linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)) !important;
}

[data-rmod-root] .atx-btn-mini,
[data-mdl-root] .atx-btn-mini,
[data-atx-root] .atx-btn-mini {
  padding: 5px 12px;
  font-size: 12px;
}

[data-rmod-root] .btn:disabled,
[data-mdl-root] .btn:disabled,
[data-atx-root] .btn:disabled {
  opacity: 0.54 !important;
  box-shadow: none !important;
}

[data-rmod-root] .btn:focus-visible,
[data-mdl-root] .btn:focus-visible,
[data-atx-root] .btn:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.22);
  outline-offset: 3px;
}

[data-rmod-root] .rmod-pill {
  font-weight: 800;
  letter-spacing: 0.01em;
  border: 1px solid transparent !important;
}

[data-rmod-root] .rmod-pill-ativo {
  color: #15803d !important;
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}

[data-rmod-root] .rmod-pill-inativo {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #fde68a !important;
}

[data-rmod-root] .rmod-pill-arquivado {
  color: #475569 !important;
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-mdl-root] .fcpm-chip {
  font-weight: 700;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
}

[data-mdl-root] .fcpm-badge-padrao {
  font-weight: 800;
  color: #15803d !important;
  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
}

[data-mdl-root] .fcpm-item-selecionado {
  background: #f8fcfd !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

[data-mdl-root] .fcpm-contador {
  font-weight: 800;
  color: #475569 !important;
}

/* D11-ESCOPO: .usuarios-screen */

.usuarios-screen #usuarios-novo,
.usuarios-screen .usuarios-actions .f8-lab-button {
  padding: 11px 18px;
  font-weight: 800;
  letter-spacing: 0.22px;
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.30) !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
  background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.42), transparent 20%), radial-gradient(circle at 28% 8%, rgba(224, 187, 126, 0.36), transparent 28%), linear-gradient(135deg, rgba(154, 210, 214, 0.90) 0%, rgba(42, 157, 157, 0.80) 34%, rgba(19, 128, 143, 0.78) 66%, rgba(11, 51, 87, 0.86) 100%) !important;
  box-shadow: 0 8px 18px rgba(19, 128, 143, 0.18), 0 4px 10px rgba(11, 51, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

.usuarios-screen #usuarios-novo:hover,
.usuarios-screen .usuarios-actions .f8-lab-button:hover {
  filter: brightness(1.06) saturate(1.05) !important;
  border-color: rgba(224, 187, 126, 0.72) !important;
}

.usuarios-screen #usuarios-buscar {
  color: #ffffff !important;
  border: 1px solid rgba(212, 175, 55, 0.34) !important;
  background: linear-gradient(135deg, rgba(15, 118, 110, 0.96), rgba(15, 44, 67, 0.96)), linear-gradient(180deg, rgba(255, 255, 255, 0.18), rgba(255, 255, 255, 0)) !important;
  box-shadow: 0 16px 34px rgba(15, 44, 67, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.24) !important;
}

.usuarios-screen #usuarios-buscar:hover {
  border-color: rgba(212, 175, 55, 0.52) !important;
  box-shadow: 0 20px 42px rgba(15, 44, 67, 0.24), inset 0 1px 0 rgba(255, 255, 255, 0.28) !important;
}

.usuarios-screen #usuarios-limpar,
.usuarios-screen .usuarios-pager button,
.usuarios-screen .usuarios-actions button:not(.f8-lab-button) {
  font-weight: 800;
  color: #26323f !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88)), linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)) !important;
  box-shadow: 0 12px 26px rgba(15, 44, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

.usuarios-screen #usuarios-limpar:hover,
.usuarios-screen .usuarios-pager button:hover,
.usuarios-screen .usuarios-actions button:not(.f8-lab-button):hover {
  color: #101923 !important;
  border-color: rgba(15, 118, 110, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 247, 0.94)), linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)) !important;
}

.usuarios-screen .usuarios-pager button:disabled,
.usuarios-screen .usuarios-actions button:disabled {
  opacity: 0.54 !important;
  color: #7b8794 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
  background: linear-gradient(135deg, rgba(248, 250, 252, 0.88), rgba(241, 245, 249, 0.76)) !important;
  box-shadow: none !important;
}

.usuarios-screen #usuarios-buscar:focus-visible,
.usuarios-screen #usuarios-limpar:focus-visible,
.usuarios-screen .usuarios-pager button:focus-visible,
.usuarios-screen .usuarios-actions button:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.22);
  outline-offset: 3px;
}

.usuarios-screen #usuarios-buscar:not([hidden]),
.usuarios-screen #usuarios-limpar:not([hidden]),
.usuarios-screen #usuarios-novo:not([hidden]),
.usuarios-screen .usuarios-pager button:not([hidden]),
.usuarios-screen .usuarios-actions button:not([hidden]) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  line-height: 1;
  min-height: 42px;
  cursor: pointer;
}

.usuarios-screen .usuarios-chip {
  font-weight: 700;
  color: #0369a1 !important;
  background: #e0f2fe !important;
  border: 1px solid #bae6fd !important;
}

.usuarios-screen .usuarios-self-note {
  font-weight: 800;
  color: #0f766e !important;
  background: #eaf7fa !important;
  border: 1px solid #bae6fd !important;
}

@media (max-width: 640px) {
  .usuarios-screen #usuarios-buscar,
  .usuarios-screen #usuarios-limpar,
  .usuarios-screen .usuarios-pager button {
    width: 100%;
    min-height: 44px;
  }
}

/* D11-ESCOPO: [data-a54e-root] */

/* D11-PAPEL: superficies
   Remapeamento dos tokens locais do a87 para a paleta das referencias.
   Uma unica regra propaga cor, superficie e linha para toda a tela sem
   tocar em grid, passos, campos, radios, ordem ou comportamento. */
[data-a54e-root].a87 {
  --a87-accent: #13808f;
  --a87-accent-hover: #0b3357;
  --a87-accent-soft: #eaf7fa;
  --a87-accent-line: rgba(154, 210, 214, 0.60);
  --a87-surface: #ffffff;
  --a87-surface-2: #f8fcfd;
  --a87-line: rgba(203, 213, 225, 0.95);
  --a87-line-strong: rgba(15, 44, 67, 0.16);
  --a87-ink: #0f172a;
  --a87-muted: #475569;
  --a87-ok-bg: #dcfce7;
  --a87-ok-ink: #15803d;
  --a87-off-bg: #fee2e2;
  --a87-off-ink: #b42318;
  --a87-info-bg: #e0f2fe;
  --a87-info-line: #bae6fd;
  --a87-warn-bg: #fef3c7;
  --a87-warn-line: #fde68a;
}

[data-a54e-root] .a87-card,
[data-a54e-root] .a87-detail,
[data-a54e-root] .a87-table-wrap {
  background: #ffffff !important;
}

[data-a54e-root] .a87-callout {
  background: #e0f2fe !important;
  color: #0f172a !important;
}

[data-a54e-root] .a87-note {
  background: #fef3c7 !important;
  color: #92400e !important;
}

/* D11-PAPEL: bordas */
[data-a54e-root] .a87-card,
[data-a54e-root] .a87-detail,
[data-a54e-root] .a87-table-wrap {
  border: 1px solid rgba(203, 213, 225, 0.95) !important;
}

[data-a54e-root] .a87-callout {
  border: 1px solid #bae6fd !important;
}

[data-a54e-root] .a87-note {
  border: 1px solid #fde68a !important;
}

/* D11-PAPEL: sombras */
[data-a54e-root] .a87-card,
[data-a54e-root] .a87-table-wrap {
  box-shadow: 0 18px 42px rgba(15, 23, 42, 0.06) !important;
}

[data-a54e-root] .a87-detail {
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05) !important;
}

/* D11-PAPEL: botoes */
[data-a54e-root] .a87-btn-primary {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(6, 39, 68, 0.30) !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
  background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.42), transparent 20%), radial-gradient(circle at 28% 8%, rgba(224, 187, 126, 0.36), transparent 28%), linear-gradient(135deg, rgba(154, 210, 214, 0.90) 0%, rgba(42, 157, 157, 0.80) 34%, rgba(19, 128, 143, 0.78) 66%, rgba(11, 51, 87, 0.86) 100%) !important;
  box-shadow: 0 8px 18px rgba(19, 128, 143, 0.18), 0 4px 10px rgba(11, 51, 87, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.62) !important;
}

[data-a54e-root] .a87-btn-primary:hover {
  filter: brightness(1.06) saturate(1.05) !important;
  border-color: rgba(224, 187, 126, 0.72) !important;
  background: radial-gradient(circle at 16% 10%, rgba(255, 255, 255, 0.42), transparent 20%), radial-gradient(circle at 28% 8%, rgba(224, 187, 126, 0.36), transparent 28%), linear-gradient(135deg, rgba(154, 210, 214, 0.90) 0%, rgba(42, 157, 157, 0.80) 34%, rgba(19, 128, 143, 0.78) 66%, rgba(11, 51, 87, 0.86) 100%) !important;
}

[data-a54e-root] .a87-btn:not(.a87-btn-primary) {
  color: #26323f !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88)), linear-gradient(180deg, rgba(255, 255, 255, 0.36), rgba(255, 255, 255, 0)) !important;
  box-shadow: 0 12px 26px rgba(15, 44, 67, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

[data-a54e-root] .a87-btn:not(.a87-btn-primary):hover {
  color: #101923 !important;
  border-color: rgba(15, 118, 110, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 247, 0.94)), linear-gradient(180deg, rgba(255, 255, 255, 0.42), rgba(255, 255, 255, 0)) !important;
}

[data-a54e-root] .a87-btn:disabled {
  opacity: 0.54 !important;
  box-shadow: none !important;
}

[data-a54e-root] .a87-icon-btn {
  color: #26323f !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.96), rgba(244, 248, 250, 0.88)) !important;
  box-shadow: 0 6px 14px rgba(15, 44, 67, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.82) !important;
}

[data-a54e-root] .a87-icon-btn:hover {
  color: #101923 !important;
  border-color: rgba(15, 118, 110, 0.30) !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.99), rgba(238, 247, 247, 0.94)) !important;
}

[data-a54e-root] .a87-icon-perigo {
  color: #b42318 !important;
  border-color: #fecaca !important;
  background: #fef2f2 !important;
}

[data-a54e-root] .a87-icon-perigo:hover {
  color: #b42318 !important;
  border-color: #fca5a5 !important;
  background: #fee2e2 !important;
}

[data-a54e-root] .a87-icon-ok {
  color: #15803d !important;
  border-color: #bbf7d0 !important;
  background: #f0fdf4 !important;
}

[data-a54e-root] .a87-icon-ok:hover {
  color: #15803d !important;
  border-color: #86efac !important;
  background: #dcfce7 !important;
}

[data-a54e-root] .a87-btn:focus-visible,
[data-a54e-root] .a87-icon-btn:focus-visible {
  outline: 3px solid rgba(20, 184, 166, 0.22);
  outline-offset: 3px;
}

/* D11-PAPEL: tabela */
[data-a54e-root] .a87-table thead th {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #475569 !important;
  background: #eaf7fa !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(20, 184, 166, 0.55) !important;
}

[data-a54e-root] .a87-table tbody td {
  color: #0f172a !important;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(203, 213, 225, 0.95) !important;
}

[data-a54e-root] .a87-table tbody tr:hover td {
  background: #f8fcfd !important;
}

[data-a54e-root] .a87-td-base,
[data-a54e-root] .a87-prazo-linha,
[data-a54e-root] .a87-td-data {
  color: #475569 !important;
}

/* D11-PAPEL: pills */
[data-a54e-root] .a87-pill {
  font-weight: 800;
  letter-spacing: 0.01em;
}

[data-a54e-root] .a87-pill-ativa {
  color: #15803d !important;
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}

[data-a54e-root] .a87-pill-inativa {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #fde68a !important;
}

[data-a54e-root] .a87-pill-unico {
  color: #0369a1 !important;
  background: #e0f2fe !important;
  border-color: #bae6fd !important;
}

[data-a54e-root] .a87-pill-repetido {
  color: #5b21b6 !important;
  background: #ede9fe !important;
  border-color: #ddd6fe !important;
}

[data-a54e-root] .a87-pill-neutro,
[data-a54e-root] .a87-pill-nenhuma {
  color: #475569 !important;
  background: #e2e8f0 !important;
  border-color: #cbd5e1 !important;
}

[data-a54e-root] .a87-chip,
[data-a54e-root] .a87-badge {
  color: #0f766e !important;
  background: #eaf7fa !important;
  border: 1px solid rgba(154, 210, 214, 0.60) !important;
}

[data-a54e-root] .a87-chip-empresa {
  color: #26323f !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 44, 67, 0.16) !important;
}

/* D11-PAPEL: tipografia */
[data-a54e-root] .a87-page-head h2 {
  font-size: 22px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f172a !important;
}

[data-a54e-root] .a87-page-sub,
[data-a54e-root] .a87-card-sub {
  font-size: 0.96rem;
  line-height: 1.55;
  color: #475569 !important;
}

[data-a54e-root] .a87-card-head h3,
[data-a54e-root] .a87-detail-head h4 {
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a !important;
}

[data-a54e-root] .a87-step-head h4 {
  font-weight: 800;
  letter-spacing: -0.01em;
  color: #0f172a !important;
}

[data-a54e-root] .a87-lbl {
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #475569 !important;
}

[data-a54e-root] .a87-msg,
[data-a54e-root] .a87-count,
[data-a54e-root] .a87-hint {
  font-size: 0.9rem;
  color: #64748b !important;
  opacity: 1 !important;
}

[data-a54e-root] .a87-msg-erro {
  font-weight: 700;
  color: #b42318 !important;
}

[data-a54e-root] .a87-msg-load {
  color: #13808f !important;
}
/* D11-PADRAO-VISUAL-CSS-FIM */

/* D12-PADRAO-VISUAL-CSS-INICIO
   D12 - listagem de Usuarios no padrao de tabela ja homologado em Pacotes de
   Modelos (bloco D11, seletores .atx-tabela).

   A grade e feita com CSS grid sobre article/div marcados por ARIA, nunca com
   <table>: o motor D7 recusa por contrato inserir o slot de feedback dentro de
   table/tr/td, e a mensagem por linha deixaria de existir. Os valores abaixo
   sao os mesmos do skin D11 - so o veiculo muda.

   Escopo fechado: todo seletor comeca por .usuarios-screen. Bloco append-only;
   nenhuma regra historica e alterada. !important apenas em border-color, para
   alinhar a barra de acoes ao trilho da tabela sobre o !important que o D11 ja
   aplica nesses dois botoes. */

.usuarios-screen {
  --d12-tinta: #0f172a;
  --d12-mudo: #475569;
  --d12-linha: rgba(203, 213, 225, 0.95);
  --d12-th-fundo: #eaf7fa;
  --d12-th-linha: rgba(20, 184, 166, 0.55);
  --d12-hover: #f8fcfd;
  --d12-colunas: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.4fr) minmax(0, auto);
}

/* A lista deixa de ser pilha de cards e vira a moldura da tabela: uma coluna
   vertical de linhas, com o trilho externo e o recorte do cabecalho. */
.usuarios-screen .usuarios-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--d12-linha);
  border-radius: var(--radius);
  background: #ffffff;
}

/* Cabecalho e linha compartilham UMA declaracao de colunas: se divergirem, a
   tabela desalinha. */
.usuarios-screen .usuarios-tabela-head,
.usuarios-screen .usuarios-card {
  display: grid;
  grid-template-columns: var(--d12-colunas);
  align-items: center;
  gap: 12px;
}

.usuarios-screen .usuarios-tabela-head {
  padding: 12px 14px;
  background: var(--d12-th-fundo);
  border-bottom: 1px solid var(--d12-th-linha);
}

.usuarios-screen .usuarios-tabela-head [role="columnheader"] {
  font-size: 0.76rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--d12-mudo);
}

/* Neutraliza a moldura de card herdada de .company e .card: a linha nao tem
   mais borda de quatro lados, raio, sombra, altura minima nem o realce dourado
   da esquerda. As classes historicas continuam na linha. */
.usuarios-screen .usuarios-card {
  min-height: 0;
  padding: 13px 14px;
  border: 0;
  border-bottom: 1px solid var(--d12-linha);
  border-radius: 0;
  background: #ffffff;
  box-shadow: none;
  color: var(--d12-tinta);
}

.usuarios-screen .usuarios-list .usuarios-card:last-child {
  border-bottom: 0;
}

/* .card:hover levanta o cartao; numa tabela isso vira tremor de linha. */
.usuarios-screen .usuarios-card:hover {
  transform: none;
  background: var(--d12-hover);
  border-color: var(--d12-linha);
  box-shadow: none;
}

.usuarios-screen .usuarios-cell-usuario,
.usuarios-screen .usuarios-cell-papel,
.usuarios-screen .usuarios-cell-status,
.usuarios-screen .usuarios-cell-empresas {
  min-width: 0;
  font-size: 0.9rem;
  color: var(--d12-tinta);
}

.usuarios-screen .usuarios-cell-usuario {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.usuarios-screen .usuarios-cell-usuario h3 {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--d12-tinta);
}

/* .company ul e .company li desenham lista de detalhe com borda entre itens;
   dentro da celula a meta e apenas uma segunda linha de texto. */
.usuarios-screen .usuarios-meta {
  display: block;
  margin: 0;
  padding: 0;
  list-style: none;
}

.usuarios-screen .usuarios-meta li {
  display: block;
  gap: 0;
  border-top: 0;
  padding-top: 0;
  font-size: 0.8rem;
  color: var(--d12-mudo);
}

.usuarios-screen .usuarios-meta strong {
  display: inline;
  margin: 0;
  font-weight: 700;
  color: var(--d12-mudo);
}

.usuarios-screen .usuarios-cell-status {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.usuarios-screen .usuarios-cell-empresas .usuarios-chip-list {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
}

.usuarios-screen .usuarios-cell-empresas .usuarios-chip {
  font-size: 0.74rem;
}

/* Quinta celula. Sem fundo proprio para nao cobrir o realce da linha. */
.usuarios-screen .usuarios-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  background: transparent;
}

/* O selo do proprio usuario e emitido em toda linha e escondido por atributo;
   sem esta regra ele ocuparia uma faixa vazia em cada linha alheia. */
.usuarios-screen .usuarios-self-note[hidden] {
  display: none;
}

/* A faixa do D7 nasce como irma da linha, dentro da lista. Precisa atravessar
   todas as colunas da grade, senao viveria dentro de uma coluna. */
.usuarios-screen [data-d7-status] {
  grid-column: 1 / -1;
  margin: 0;
  border-radius: 0;
}

/* Estado vazio: unico filho da lista, tambem de largura total. */
.usuarios-screen .usuarios-list .muted {
  grid-column: 1 / -1;
  margin: 0;
  padding: 16px 14px;
  font-size: 0.9rem;
  color: var(--d12-mudo);
}

/* Rodape da tabela: a paginacao encosta na moldura e repete o trilho. */
.usuarios-screen .usuarios-pager {
  margin-top: 12px;
  border-top: 1px solid var(--d12-linha);
  padding-top: 12px;
  background: #ffffff;
}

.usuarios-screen .usuarios-pager button {
  font-size: 0.82rem;
  color: var(--d12-tinta);
}

/* A barra de filtros passa a compartilhar o trilho da tabela. */
.usuarios-screen #usuarios-buscar,
.usuarios-screen #usuarios-limpar {
  border-color: var(--d12-th-linha) !important;
}

/* Abaixo da largura util das cinco colunas a grade empilha e cada celula passa
   a carregar o proprio rotulo, derivado da CLASSE - nao de data-*. */
@media (max-width: 860px) {
  .usuarios-screen .usuarios-tabela-head {
    display: none;
  }

  .usuarios-screen .usuarios-card {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
    gap: 6px;
    padding: 14px;
  }

  .usuarios-screen .usuarios-cell-papel::before,
  .usuarios-screen .usuarios-cell-status::before,
  .usuarios-screen .usuarios-cell-empresas::before {
    display: block;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--d12-mudo);
  }

  .usuarios-screen .usuarios-cell-papel::before {
    content: "Papel";
  }

  .usuarios-screen .usuarios-cell-status::before {
    content: "Status";
  }

  .usuarios-screen .usuarios-cell-empresas::before {
    content: "Empresas";
  }

  .usuarios-screen .usuarios-actions {
    justify-content: flex-start;
  }
}
/* D12-PADRAO-VISUAL-CSS-FIM */
/* D12B-CORRETIVO-CSS-INICIO
   APPEND-ONLY. Nenhuma regra historica e removida ou editada. A coluna
   Empresas deixa de ser RENDERIZADA pelo app.js; as regras dela
   (.usuarios-cell-empresas e derivadas) permanecem no arquivo, inertes por
   ausencia do no. O ajuste vem por redefinicao POSTERIOR, sempre escopada
   em .usuarios-screen / [data-usuarios-b7b]. */

/* Quatro colunas: Usuario | Papel | Status | Acoes. A variavel historica e
   redefinida aqui em vez de editada la em cima - assim o prefixo do arquivo
   permanece byte a byte identico. */
.usuarios-screen,
[data-usuarios-b7b] {
  --d12-colunas: minmax(0, 2.6fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, auto);
}

/* Faixa de feedback D7 ACIMA da tabela, ocupando a largura inteira da
   regiao. Nasce fora de #usuarios-list, entao nao participa do grid da
   lista; grid-column garante largura total caso o pai seja um grid. */
.usuarios-screen [data-d7-status],
[data-usuarios-b7b] [data-d7-status] {
  grid-column: 1 / -1;
  display: block;
  box-sizing: border-box;
  width: 100%;
  margin: 0 0 12px 0;
  padding: 10px 14px;
  border-radius: var(--radius);
}

/* Busca do seletor de empresas, acima da area rolavel. */
.usuarios-screen .usuarios-company-busca,
[data-usuarios-b7b] .usuarios-company-busca {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 10px 0;
}

.usuarios-screen .usuarios-company-busca .input,
[data-usuarios-b7b] .usuarios-company-busca .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Area tabular com rolagem propria: centenas de empresas sem esticar o
   modal ate o infinito. */
.usuarios-screen .usuarios-company-scroll,
[data-usuarios-b7b] .usuarios-company-scroll {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--d12-linha);
  border-radius: var(--radius);
  padding: 6px;
}

/* Grupo das empresas ja persistidas, visualmente destacado no topo. */
.usuarios-screen .usuarios-company-persistidas,
[data-usuarios-b7b] .usuarios-company-persistidas {
  border-bottom-color: var(--d12-linha);
  border-bottom-style: solid;
  border-bottom-width: 1px;
  margin-bottom: 6px;
  padding-bottom: 6px;
}

/* Vinculo travado: empresa inativada depois da concessao. */
.usuarios-screen .usuarios-company-option input:disabled + span,
[data-usuarios-b7b] .usuarios-company-option input:disabled + span {
  opacity: 0.75;
  font-style: italic;
}
/* D12B-CORRETIVO-CSS-FIM */

/* D12D-MODAL-CSS-INICIO
   APPEND-ONLY. Nenhuma regra historica e removida ou editada.

   POR QUE ESTE BLOCO EXISTE: o modal e anexado em document.body, logo vive
   FORA de .usuarios-screen e de [data-usuarios-b7b]. Todo o bloco D12B foi
   escopado nesses dois seletores e, por isso, NUNCA alcancou o seletor de
   empresas - quem mandava era a regra historica sem escopo
   ".usuarios-company-grid { grid-template-columns: repeat(2, ...) }", que e
   literalmente o layout de cards em duas colunas reprovado no B4.

   O escopo correto e o card do proprio modal: .usuarios-modal-card.
   O bloco D12B permanece intocado e segue valido para a tabela de usuarios
   dentro de .usuarios-screen. */

/* Uma empresa por linha: a grade de duas colunas e neutralizada aqui,
   sem tocar na regra historica. */
.usuarios-modal-card .usuarios-company-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  margin-top: 0;
}

/* Area tabular rolavel - o equivalente do D12B, agora no escopo que alcanca. */
.usuarios-modal-card .usuarios-company-scroll {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

/* Cabecalho e linha compartilham UMA declaracao de colunas: se divergirem,
   a tabela desalinha. */
.usuarios-modal-card .usuarios-company-head,
.usuarios-modal-card .usuarios-company-option {
  display: grid;
  grid-template-columns: 28px minmax(0, 2.4fr) minmax(0, 1.6fr) minmax(0, 90px);
  align-items: center;
  gap: 8px;
}

.usuarios-modal-card .usuarios-company-head {
  position: sticky;
  top: 0;
  background: var(--bg);
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}

/* A linha deixa de ser card: sem moldura, sem respiro de cartao. */
.usuarios-modal-card .usuarios-company-option {
  border: 0;
  border-radius: 0;
  padding: 6px 10px;
  background: transparent;
  border-bottom: 1px solid var(--border);
}

.usuarios-modal-card .usuarios-company-option:last-child {
  border-bottom-width: 0;
}

.usuarios-modal-card .usuarios-company-option input {
  margin-top: 0;
}

/* Grupo das persistidas: separacao visual do restante do catalogo. */
.usuarios-modal-card .usuarios-company-persistidas {
  border-bottom-color: var(--border);
  border-bottom-style: solid;
  border-bottom-width: 2px;
}

/* Busca acima da area tabular. */
.usuarios-modal-card .usuarios-company-busca {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 8px 0;
}

.usuarios-modal-card .usuarios-company-busca .input {
  flex: 1 1 auto;
  min-width: 0;
}

/* Vinculo travado (empresa inativada, ou seletor em somente leitura). */
.usuarios-modal-card .usuarios-company-option input:disabled + span {
  opacity: 0.75;
  font-style: italic;
}
/* D12D-MODAL-CSS-FIM */

/* D12D-MODAL-HIDDEN-CSS-INICIO */
.usuarios-modal-card .f8-modal-field[hidden] {
  display: none;
}
/* D12D-MODAL-HIDDEN-CSS-FIM */

/* D13D-COLUNA-RESPONSAVEL-CSS-INICIO */
.usuarios-screen .usuarios-linha-com-responsavel,
[data-usuarios-b7b] .usuarios-linha-com-responsavel {
  --d12-colunas: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, auto);
}

.usuarios-screen .usuarios-cell-responsavel[hidden],
[data-usuarios-b7b] .usuarios-cell-responsavel[hidden] {
  display: none;
}
/* D13D-COLUNA-RESPONSAVEL-CSS-FIM */

/* D15-PADRAO-SISTEMA-CSS-INICIO */
/* Escopo autorizado: [data-rmod-root] e [data-a54e-root]. Zero regra global.
   Append-only: nenhuma regra historica reescrita. */

/* Selo do catalogo. Modificador da base .rmod-pill ja existente; herda
   geometria e so troca a cor. Indigo para nao colidir com verde (ativo),
   ambar (inativo) nem cinza (arquivado). */
[data-rmod-root] .rmod-pill-padrao {
  margin-left: 8px;
  color: #3730a3 !important;
  background: #e0e7ff !important;
  border-color: #c7d2fe !important;
}

/* Periodicidade travada e aviso do comparativo. Sao texto, nao controle. */
[data-a54e-root] .a54e-periodicidade-travada {
  margin: 2px 0 6px;
  font-weight: 700;
}

[data-a54e-root] .a54e-aviso-sistema {
  margin: 0 0 10px;
  padding: 8px 10px;
  border-left: 3px solid #c7d2fe;
  background: #eef2ff;
  border-radius: 6px;
}

[data-a54e-root] .a54e-periodicidade-travada[hidden],
[data-a54e-root] .a54e-aviso-sistema[hidden] {
  display: none;
}
/* D15-PADRAO-SISTEMA-CSS-FIM */

/* D18-VERSOES-VISUAIS-CSS-INICIO
   Ciclo de versoes visuais. Bloco PROPRIO: o bloco D15-PADRAO-SISTEMA-CSS
   acima permanece byte-identico. Toda regra daqui e escopada em
   [data-rmod-root] — nenhum seletor global e criado ou alterado. */

[data-rmod-root] .rmod-pill-nativa {
  color: #0f766e !important;
  background: #ccfbf1 !important;
  border-color: #99f6e4 !important;
}

[data-rmod-root] .rmod-pill-html {
  color: #3730a3 !important;
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}

[data-rmod-root] .rmod-pill-publicada {
  color: #1a7f37 !important;
  background: #dcfce7 !important;
  border-color: #bbf7d0 !important;
}

[data-rmod-root] .rmod-pill-rascunho {
  color: #92400e !important;
  background: #fef3c7 !important;
  border-color: #fde68a !important;
}

[data-rmod-root] .rmod-pill-descartada {
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
  text-decoration: line-through;
}

[data-rmod-root] .rmod-pill-obsoleta {
  color: #6b7280 !important;
  background: #f3f4f6 !important;
  border-color: #e5e7eb !important;
}

/* A ATIVA e a unica informacao da tela que nao pode ser confundida com
   nenhuma outra: e ela que decide o que sai nas geracoes novas. */
[data-rmod-root] .rmod-pill-ativa {
  color: #ffffff !important;
  background: #15803d !important;
  border-color: #166534 !important;
  font-weight: 700;
}

[data-rmod-root] .rmod-ativa-bloco {
  border: 1px solid rgba(21, 128, 61, 0.35);
  border-radius: 6px;
  padding: 10px 12px;
  margin: 10px 0;
  background: rgba(21, 128, 61, 0.06);
}

[data-rmod-root] .rmod-ativa-bloco.rmod-ativa-ausente {
  border-color: rgba(146, 64, 14, 0.35);
  background: rgba(146, 64, 14, 0.06);
}

[data-rmod-root] .rmod-ativa-titulo {
  font-weight: 700;
  display: block;
  margin-bottom: 2px;
}

[data-rmod-root] .rmod-aviso-padrao {
  border-left: 3px solid #6366f1;
  padding: 6px 10px;
  margin: 8px 0;
  background: rgba(99, 102, 241, 0.06);
  font-size: 13px;
}

[data-rmod-root] .rmod-aviso-starter {
  border-left: 3px solid #b45309;
  padding: 6px 10px;
  margin: 6px 0;
  background: rgba(180, 83, 9, 0.07);
  font-size: 12px;
}

/* Editor. Monoespacada, sem quebra automatica: HTML e CSS de relatorio tem
   linhas longas e a quebra visual esconde a estrutura real. */
[data-rmod-root] .rmod-editor textarea,
[data-rmod-root] textarea.rmod-codigo {
  font-family: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  font-size: 12.5px;
  line-height: 1.5;
  white-space: pre;
  overflow-wrap: normal;
  overflow-x: auto;
  resize: vertical;
  min-height: 220px;
  tab-size: 2;
}

[data-rmod-root] textarea.rmod-codigo[readonly] {
  background: rgba(127, 127, 127, 0.08);
  cursor: default;
}

[data-rmod-root] .rmod-contador {
  font-size: 12px;
  opacity: 0.85;
}

[data-rmod-root] .rmod-contador.rmod-contador-alerta {
  color: #b45308;
  font-weight: 700;
  opacity: 1;
}

[data-rmod-root] .rmod-sujo {
  color: #92400e;
  font-weight: 700;
  font-size: 12px;
}

[data-rmod-root] .rmod-ws-cabecalho {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 8px 0 4px;
}

[data-rmod-root] .rmod-catalogo {
  max-height: 320px;
  overflow-y: auto;
  overflow-x: auto;
  border: 1px solid rgba(127, 127, 127, 0.25);
  border-radius: 6px;
  margin-top: 6px;
}

[data-rmod-root] .rmod-catalogo code {
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
}

[data-rmod-root] .rmod-versoes-tabela {
  overflow-x: auto;
}

[data-rmod-root] button[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  [data-rmod-root] .rmod-ws-cabecalho {
    flex-direction: column;
    align-items: flex-start;
  }
  [data-rmod-root] .rmod-editor textarea,
  [data-rmod-root] textarea.rmod-codigo {
    min-height: 160px;
  }
}
/* D18-VERSOES-VISUAIS-CSS-FIM */

/* D18-ORIGEM-NOVA-VERSAO-CSS-INICIO
   Seletor de origem da nova versao. Escopado em [data-rmod-root], como todo
   o resto do bloco D18. */
[data-rmod-root] .rmod-origem {
  margin: 10px 0;
}

[data-rmod-root] .rmod-origem-lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}

[data-rmod-root] .rmod-origem-opcao {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

[data-rmod-root] .rmod-origem-versao {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  margin-left: 26px;
}

[data-rmod-root] .rmod-origem-versao select {
  padding: 6px 8px;
  min-width: 280px;
  max-width: 100%;
}
/* D18-ORIGEM-NOVA-VERSAO-CSS-FIM */

/* ==========================================================================
   D19 — TESTE DA AUTOMACAO POR PACOTE
   Aditivo. Nenhuma regra existente foi alterada: a view reusa .atx-card,
   .atx-hint, .atx-linha, .atx-status, .atx-bloco, .atx-vazio e .atx-tabela,
   e aqui entra somente o que a composicao nova introduziu — o campo de
   e-mail de teste e a legibilidade da tabela de 8 colunas.
   ========================================================================== */

[data-atx-root] [data-atx-email-teste] {
  min-width: 15rem;
}

[data-atx-root] [data-atx-pacote] {
  min-width: 12rem;
}

/* A tabela do resultado tem 8 colunas; em telas estreitas ela rola dentro
   do proprio bloco, nunca empurra a pagina na horizontal. */
[data-atx-root] .atx-bloco {
  overflow-x: auto;
}

[data-atx-root] .atx-tabela td:last-child,
[data-atx-root] .atx-tabela th:last-child {
  text-align: right;
  white-space: nowrap;
}

[data-atx-root] .atx-tabela td:nth-child(5),
[data-atx-root] .atx-tabela th:nth-child(5) {
  white-space: nowrap;
}

/* D20-HISTORICO-CSS-INICIO
   Bloco ADITIVO e ESCOPADO. Nenhuma regra existente foi reescrita.

   Duas necessidades, e so duas:

   1. A variante de FALHA. A folha ja trazia --concluido (verde),
      --pendente (ambar) e --em-revisao (azul), mas nenhuma vermelha: a
      maquete ficticia nunca teve um status de falha para exibir. O
      historico real tem. Mapear falha para ambar faria uma execucao
      quebrada parecer apenas atrasada.

   2. A lista de definicoes do detalhe. .atx-linha e flex-row e nao serve
      para pares rotulo/valor empilhados; reaproveita-la deformaria o
      bloco de auditoria. Classe propria, escopada em [data-d20-historico].
*/
.relatorios-status--falha {
  border-color: rgba(220, 38, 38, 0.38);
  color: #fecaca;
  background: rgba(220, 38, 38, 0.14);
}

.relatorios-screen .relatorios-status--falha {
  color: #991b1b;
  background: #fee2e2;
  border-color: rgba(153, 27, 27, 0.2);
}

.relatorios-screen .relatorios-status.relatorios-status--falha {
  color: #991b1b !important;
  background: #fee2e2 !important;
  border-color: rgba(153, 27, 27, 0.2) !important;
}

/* ORDEM DOS BLOCOS.

   O bloco historico F8-L2 declara `order` explicito para hero (0),
   metrics (1), toolbar (2) e visual-grid (3) dentro de
   .relatorios-screen. A D20 nao usa .relatorios-visual-grid: a tabela e o
   detalhe sao .relatorios-panel filhos diretos. Sem `order` proprio eles
   herdam o default 0 e sobem para junto do hero — a tela renderizava
   tabela, detalhe, KPIs e filtros nessa ordem.

   Aqui so se declara a posicao dos dois blocos NOVOS. A ordem historica
   (KPIs acima dos filtros, padrao da tela Empresas) permanece intacta. */
[data-d20-historico] > .relatorios-panel {
  order: 3;
}

[data-d20-historico] > [data-d20-detalhe] {
  order: 4;
}

/* BARRA DE FILTROS.

   .relatorios-toolbar nasceu para DOIS filhos — o grupo de pills e um
   campo de busca — e por isso e `display: flex` com
   `justify-content: space-between` e SEM `flex-wrap`. A D20 tem dez
   controles: sem wrap eles se espremem na mesma linha e os ultimos
   somem. Grid com auto-fit resolve sem tocar a regra historica, que
   continua valendo para qualquer outra tela.

   O grupo de botoes ocupa a linha inteira: acao nao se mistura com
   campo. */
[data-d20-historico] > .relatorios-toolbar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px 16px;
  align-items: end;
  justify-content: initial;
}

[data-d20-historico] > .relatorios-toolbar > .relatorios-filters {
  grid-column: 1 / -1;
  justify-content: flex-start;
}

[data-d20-historico] .relatorios-search-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

[data-d20-historico] .relatorios-search-wrap > span {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.75;
}

[data-d20-historico] .relatorios-search-wrap > select,
[data-d20-historico] .relatorios-search-wrap > input {
  width: 100%;
  min-width: 0;
}

[data-d20-historico] .relatorios-table tbody tr {
  cursor: pointer;
}

[data-d20-historico] .atx-bloco h4 {
  margin-bottom: 6px;
  font-size: 15px;
}

[data-d20-historico] .d20-campos {
  display: grid;
  grid-template-columns: minmax(160px, 220px) 1fr;
  gap: 4px 16px;
  margin: 0 0 12px;
  font-size: 13px;
}

[data-d20-historico] .d20-campos dt {
  opacity: 0.75;
}

[data-d20-historico] .d20-campos dd {
  margin: 0;
  overflow-wrap: anywhere;
  font-variant-numeric: tabular-nums;
}
/* D20-HISTORICO-CSS-FIM */

/* D20-HOMOLOGACAO-FILTROS-VISUAL-INICIO
   Ajuste VISUAL pedido na homologacao manual. CSS-only, aditivo e
   escopado em [data-d20-historico]: nenhuma regra anterior foi reescrita
   e nenhuma outra tela e alcancada.

   1. SELECTS COM FUNDO BRANCO.

      O tratamento branco dos campos vem de F8-L9:

        .relatorios-screen input.relatorios-search { background: #ffffff; ... }

      Ele casa pela TAG. Os sete filtros da D20 sao <select> e carregam a
      MESMA classe .relatorios-search, entao ficavam de fora e herdavam
      `.relatorios-screen .relatorios-search { background: transparent;
      border: 0; padding: 0 }` — medido em navegador: fundo
      rgba(0,0,0,0), borda 0, padding 0, altura 17px, contra 40px dos
      inputs.

      Aqui se espelha o MESMO conjunto de declaracoes do input, valor por
      valor, para que os dez controles fiquem indistinguiveis. Sem
      `!important`: `[data-d20-historico] select.relatorios-search` tem
      especificidade maior que `.relatorios-screen .relatorios-search` e
      vem depois no arquivo.

      `appearance` NAO e tocada: o dropdown continua nativo, como pedido.

   2. BOTOES AGRUPADOS A DIREITA.

      Aplicar e Limpar filtros ja seguem o padrao do sistema — o branco
      deles vem de `background-image` (gradiente) em
      `.relatorios-screen .relatorios-filter:not(.is-active)`, e por isso
      `backgroundColor` le transparente sem que estejam sem fundo. O que
      faltava era so posicao: o grupo ocupa a linha inteira do grid e
      estava com `justify-content: flex-start`.

      Alem do alinhamento, `min-height` iguala a altura dos botoes (39px)
      a dos campos (40px), para que "mesma altura" seja exata e nao
      aproximada. */

[data-d20-historico] select.relatorios-search {
  display: block;
  width: 100%;
  min-height: 40px;
  padding: 10px 14px;
  background: #ffffff;
  background-color: #ffffff;
  background-image: none;
  border: 1px solid rgba(148, 163, 184, 0.42);
  border-radius: 16px;
  box-shadow:
    0 8px 20px rgba(15, 23, 42, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.96);
  color: #111827;
  outline: 0;
}

[data-d20-historico] select.relatorios-search:focus {
  background: #ffffff;
  background-color: #ffffff;
  border-color: rgba(20, 184, 166, 0.52);
  box-shadow:
    0 0 0 4px rgba(20, 184, 166, 0.11),
    0 10px 24px rgba(15, 23, 42, 0.08);
}

/* Desabilitado continua legivel, sem virar campo "apagado". */
[data-d20-historico] select.relatorios-search:disabled {
  background: #f8fafc;
  background-color: #f8fafc;
  color: #64748b;
}

[data-d20-historico] > .relatorios-toolbar > .relatorios-filters {
  justify-content: flex-end;
}

[data-d20-historico] > .relatorios-toolbar > .relatorios-filters > .relatorios-filter {
  min-height: 40px;
}

/* Em tela estreita a barra vira uma coluna so. Os botoes continuam
   agrupados e a direita, mas passam a poder ocupar a largura util sem
   estourar a linha. */
@media (max-width: 760px) {
  [data-d20-historico] > .relatorios-toolbar > .relatorios-filters {
    justify-content: flex-end;
    gap: 8px;
  }

  [data-d20-historico] > .relatorios-toolbar > .relatorios-filters > .relatorios-filter {
    flex: 1 1 auto;
  }
}
/* D20-HOMOLOGACAO-FILTROS-VISUAL-FIM */

/* D21-DETALHE-CSS-INICIO
   ============================================================
   D21 - PAGINA INTERNA DE PROTOCOLO.
   ============================================================

   TODO seletor deste bloco comeca por [data-d21-detalhe]. Nada aqui alcanca
   a listagem, o dashboard ou qualquer outra tela: o bloco e verificavel por
   parser, e a suite mede isso nos dois sentidos.

   O bloco e APPEND-ONLY, como os 111 anteriores. Nenhuma regra existente foi
   editada.

   SOBRE O !important.
   O plano da D21 previa uma cauda sem nenhum `!important`. A prova visual
   REFUTOU essa premissa, e o registro fica aqui: main.css:1995-2003 tem uma
   regra GLOBAL

     button, .search-row button, .company-link, ... {
       color: #ffffff !important;
       background: linear-gradient(135deg, #009fa6, #008892) !important;
     }

   que pinta TODO <button> do app de teal com texto branco, e
   main.css:3502-3506 forca `border-radius: 13px !important` em todo botao.
   Sem `!important`, as quatro abas, o Voltar e os botoes de acao desta
   pagina saem teal e ilegiveis -- foi exatamente o que a medicao de
   contraste pegou (razao 1.1:1 na aba ativa).

   `!important` e o mecanismo de override desta base: ha 2548 deles nos 111
   blocos anteriores. O contrato que importa nao e "sem !important", e sim
   "todo seletor escopado em [data-d21-detalhe]" -- verificavel por parser, e
   e isso que a guarda checa.

   Tres decisoes vem de defeitos ja pagos na D20, e estao aqui por escrito
   para nao voltarem:

   1. NENHUM `order` explicito. Um container com `order` nos filhos faz o
      filho novo -- sem `order` -- herdar 0 e subir para o topo. Foi assim
      que a area de previa da D20 apareceu colada no hero.
   2. `flex-wrap: wrap` em TODA barra. Uma barra flex desenhada para dois
      filhos deixa os ultimos com largura ~0 quando recebe dez.
   3. `min-width: 0` em todo filho de grid e de flex. Sem isso, o `descricao`
      (longtext, ate 4000 chars sem espaco) estoura a coluna em vez de quebrar.

   A pagina herda a coluna de 1060px centrada de
   `body:has([data-f7-a6d-denuncias-admin-antigo-layout="true"]) #panel`.
   A listagem e apenas OCULTADA, nunca removida, entao esse `:has` continua
   casando e o layout nao salta ao alternar lista e detalhe. */

[data-d21-detalhe] {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
  color: #1f2b3a;
}

/* ---------- TOPO ---------- */

[data-d21-detalhe] .d21-topo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 18px 20px;
  margin-bottom: 14px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.08);
}

[data-d21-detalhe] .d21-topo > * {
  min-width: 0;
}

[data-d21-detalhe] .d21-voltar {
  flex: 0 0 auto;
  padding: 8px 14px;
  border: 1px solid rgba(15, 23, 42, 0.16) !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  background-image: none !important;
  color: #1f2b3a !important;
  font-size: 0.86rem;
  font-weight: 600 !important;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

[data-d21-detalhe] .d21-voltar:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.28) !important;
}

[data-d21-detalhe] .d21-identidade {
  flex: 1 1 260px;
  min-width: 0;
}

[data-d21-detalhe] .d21-protocolo {
  margin: 0;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #0f172a;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .d21-subtitulo {
  margin: 4px 0 0;
  font-size: 0.88rem;
  color: #55657a;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .d21-selos {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 0 1 auto;
  min-width: 0;
}

/* ---------- FAIXA DE FATOS ---------- */

[data-d21-detalhe] .d21-faixa-fatos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

[data-d21-detalhe] .d21-fato {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.88);
}

[data-d21-detalhe] .d21-fato-rotulo {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  /* #7a8798 dava 3.65:1 sobre o card claro -- abaixo do minimo de 4.5:1 para
     texto normal, e este e texto pequeno. Medido, nao estimado. */
  color: #4f5d6e;
}

[data-d21-detalhe] .d21-fato-valor {
  font-size: 0.98rem;
  font-weight: 600;
  color: #1f2b3a;
  overflow-wrap: anywhere;
}

/* ---------- ABAS ---------- */

[data-d21-detalhe] .d21-abas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px;
  margin-bottom: 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 999px;
  background: rgba(241, 245, 249, 0.9);
}

[data-d21-detalhe] .d21-aba {
  min-width: 0;
  flex: 0 1 auto;
  padding: 9px 18px;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: transparent !important;
  background-image: none !important;
  color: #45566b !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

[data-d21-detalhe] .d21-aba:hover {
  background: rgba(255, 255, 255, 0.75) !important;
  color: #16202e !important;
}

[data-d21-detalhe] .d21-aba.is-active {
  background: #ffffff !important;
  background-image: none !important;
  border-color: rgba(15, 23, 42, 0.12) !important;
  color: #0f172a !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.10);
}

[data-d21-detalhe] .d21-aba:focus-visible,
[data-d21-detalhe] .d21-voltar:focus-visible,
[data-d21-detalhe] button:focus-visible,
[data-d21-detalhe] select:focus-visible,
[data-d21-detalhe] input:focus-visible,
[data-d21-detalhe] textarea:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

/* ---------- PAINEIS E GRADE ---------- */

[data-d21-detalhe] .d21-painel {
  min-width: 0;
}

[data-d21-detalhe] .d21-grade {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

[data-d21-detalhe] .d21-grade > * {
  min-width: 0;
}

[data-d21-detalhe] .d21-coluna-principal,
[data-d21-detalhe] .d21-coluna-lateral,
[data-d21-detalhe] .d21-coluna-unica {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

[data-d21-detalhe] .d21-coluna-principal > *,
[data-d21-detalhe] .d21-coluna-lateral > *,
[data-d21-detalhe] .d21-coluna-unica > * {
  min-width: 0;
}

/* ---------- CARDS REAPROVEITADOS ---------- */

/* Os construtores reaproveitados devolvem .dashboard-rico-card, que ja e
   claro e ja tem min-width: 0. Aqui so garantimos que dentro da pagina eles
   nao herdem largura fixa nem quebrem em texto longo. */
[data-d21-detalhe] .dashboard-rico-card {
  width: 100%;
  min-width: 0;
  margin: 0;
}

[data-d21-detalhe] .dashboard-rico-recent-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  align-items: baseline;
  min-width: 0;
}

[data-d21-detalhe] .dashboard-rico-recent-row > span {
  flex: 0 0 auto;
  color: #7a8798;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

[data-d21-detalhe] .dashboard-rico-recent-row > strong {
  flex: 1 1 200px;
  min-width: 0;
  color: #1f2b3a;
  font-weight: 600;
  /* `descricao` e longtext: pode chegar sem um unico espaco. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

[data-d21-detalhe] .section-description {
  color: #55657a;
  overflow-wrap: anywhere;
}

/* ---------- BOTOES DE ACAO ----------
   Fecha tres lacunas reais do CSS de hoje: .f46-registrar-evento-box e
   .f49-resposta-publica-box nao tinham NENHUMA regra, e nao existe regra
   base para .denuncias-admin-action -- so seletores descendentes
   qualificados. Dentro do modal, "Registrar evento" e "Publicar resposta
   publica" saiam com aparencia de <button> nativo. */

[data-d21-detalhe] .denuncias-admin-action,
[data-d21-detalhe] .f8-lab-button {
  min-width: 0;
  max-width: 100%;
  padding: 9px 16px;
  border: 1px solid rgba(29, 78, 216, 0.35) !important;
  border-radius: 999px !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.88rem;
  font-weight: 600 !important;
  line-height: 1.2;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}

[data-d21-detalhe] .denuncias-admin-action:hover,
[data-d21-detalhe] .f8-lab-button:hover {
  background: #1e40af !important;
}

[data-d21-detalhe] .denuncias-admin-action:disabled,
[data-d21-detalhe] .f8-lab-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  background: #64748b !important;
  color: #ffffff !important;
}

/* O Voltar e as abas NAO sao botoes de acao: precisam desfazer a regra acima
   caso alguma delas ganhe as classes por engano, e sobretudo desfazer a
   regra global de <button>. */
[data-d21-detalhe] .d21-voltar,
[data-d21-detalhe] .d21-aba {
  background-image: none !important;
}

[data-d21-detalhe] input,
[data-d21-detalhe] select,
[data-d21-detalhe] textarea,
[data-d21-detalhe] .input {
  max-width: 100%;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.16);
  border-radius: 12px;
  background: #ffffff;
  color: #1f2b3a;
  font-size: 0.9rem;
  font-family: inherit;
}

[data-d21-detalhe] textarea {
  min-height: 96px;
  resize: vertical;
}

/* ---------- PILLS DE STATUS ----------
   As tres classes historicas (status-respondido, status-rh,
   status-descartado) continuam valendo na TABELA e nao sao tocadas. As
   cinco abaixo existem so dentro da pagina, e sao geradas pela
   normalizarClasse que ja existia -- nao ha mapa de rotulos novo. */

[data-d21-detalhe] .denuncias-admin-pill {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 5px 12px;
  border-radius: 999px;
  background: rgba(148, 163, 184, 0.20);
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .status-recebido {
  background: rgba(100, 116, 139, 0.18);
  color: #334155;
}

[data-d21-detalhe] .status-aguardando-rh,
[data-d21-detalhe] .status-rh {
  background: rgba(234, 179, 8, 0.20);
  color: #854d0e;
}

[data-d21-detalhe] .status-em-analise,
[data-d21-detalhe] .status-em-apuracao {
  background: rgba(59, 130, 246, 0.18);
  color: #1e40af;
}

[data-d21-detalhe] .status-rh-respondeu,
[data-d21-detalhe] .status-respondido-ao-colaborador,
[data-d21-detalhe] .status-respondido {
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
}

[data-d21-detalhe] .status-concluida {
  background: rgba(16, 185, 129, 0.20);
  color: #065f46;
}

[data-d21-detalhe] .status-arquivada {
  background: rgba(148, 163, 184, 0.24);
  color: #475569;
}

[data-d21-detalhe] .status-descartado {
  background: rgba(239, 68, 68, 0.16);
  color: #991b1b;
}

[data-d21-detalhe] .gravidade-critica,
[data-d21-detalhe] .gravidade-alta {
  background: rgba(239, 68, 68, 0.16);
  color: #991b1b;
}

[data-d21-detalhe] .gravidade-media {
  background: rgba(234, 179, 8, 0.18);
  color: #854d0e;
}

[data-d21-detalhe] .gravidade-baixa {
  background: rgba(34, 197, 94, 0.16);
  color: #166534;
}

/* ---------- TELA DE ERRO ---------- */

[data-d21-detalhe] .d21-erro {
  padding: 22px;
}

[data-d21-detalhe] .d21-erro h3 {
  margin: 0 0 8px;
  font-size: 1.06rem;
  color: #0f172a;
}

[data-d21-detalhe] .d21-erro-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 16px;
}

/* ---------- TABELAS INTERNAS ----------
   As secoes de encaminhamento e de mensagens podem renderizar tabelas. Sem
   um container proprio de overflow, elas alargariam a pagina inteira. */

[data-d21-detalhe] table {
  width: 100%;
  min-width: 0;
  border-collapse: collapse;
}

[data-d21-detalhe] .dashboard-rico-card {
  overflow-x: auto;
}

/* ---------- RESPONSIVO ---------- */

@media (min-width: 900px) {
  [data-d21-detalhe] .d21-grade {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  [data-d21-detalhe] .d21-topo {
    padding: 14px 16px;
  }

  [data-d21-detalhe] .d21-protocolo {
    font-size: 1.14rem;
  }

  [data-d21-detalhe] .d21-faixa-fatos {
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
  }
}

@media (max-width: 560px) {
  /* As quatro abas nao cabem lado a lado: viram faixa rolavel com snap, em
     vez de encolher ate ficarem ilegiveis. */
  [data-d21-detalhe] .d21-abas {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    border-radius: 18px;
  }

  [data-d21-detalhe] .d21-aba {
    flex: 0 0 auto;
    scroll-snap-align: start;
    padding: 9px 14px;
  }

  [data-d21-detalhe] .d21-selos {
    width: 100%;
  }
}

@media (max-width: 560px) {
  /* No estreito, `flex: 1 1 200px` no valor forcava quebra e deixava cada
     par rotulo/valor com o dobro da altura util. Empilhar de proposito e
     mais curto e mais legivel do que quebrar por acidente. */
  [data-d21-detalhe] .dashboard-rico-recent-row {
    flex-direction: column;
    gap: 2px;
  }

  [data-d21-detalhe] .dashboard-rico-recent-row > strong {
    flex: 0 0 auto;
    width: 100%;
  }
}

@media (max-width: 420px) {
  [data-d21-detalhe] .d21-faixa-fatos {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-d21-detalhe] .d21-aba {
    font-size: 0.84rem;
    padding: 8px 12px;
  }

  [data-d21-detalhe] .denuncias-admin-action,
  [data-d21-detalhe] .f8-lab-button {
    width: 100%;
  }

  [data-d21-detalhe] .d21-voltar {
    width: auto;
  }
}
/* D21-DETALHE-CSS-FIM */

/* D21-HISTORICO-CSS-INICIO
   ============================================================
   D21 - HISTORICO COMPACTO (accordion).
   ============================================================

   Extensao append-only do bloco D21-DETALHE-CSS. Todo seletor continua
   escopado em [data-d21-detalhe] -- o parser da guarda verifica isso.

   O `!important` aparece nos mesmos pontos de sempre e pela mesma razao ja
   documentada: main.css:1995-2003 pinta TODO <button> de teal com texto
   branco, e :3502 forca border-radius. O cabecalho do evento e um <button>
   de verdade (por acessibilidade), entao precisa desfazer isso.

   Sem `order` explicito e com `flex-wrap` em toda barra -- as duas licoes da
   D20 continuam valendo aqui. */

[data-d21-detalhe] [data-d21-historico="compacto"] {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 0;
}

[data-d21-detalhe] .d21-evento {
  min-width: 0;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

[data-d21-detalhe] .d21-evento:first-of-type {
  border-top: 0;
}

/* ---------- LINHA RECOLHIDA ---------- */

[data-d21-detalhe] .d21-evento-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 12px;
  width: 100%;
  min-width: 0;
  padding: 11px 10px;
  border: 0 !important;
  border-radius: 12px !important;
  background: transparent !important;
  background-image: none !important;
  color: #1f2b3a !important;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600 !important;
  text-align: left;
  line-height: 1.35;
  cursor: pointer;
  transition: background 0.12s ease;
}

[data-d21-detalhe] .d21-evento-cabecalho:hover {
  background: rgba(241, 245, 249, 0.85) !important;
}

[data-d21-detalhe] .d21-evento.is-aberto > .d21-evento-cabecalho {
  background: rgba(241, 245, 249, 0.6) !important;
}

/* Data presente, mas nao dominante. */
[data-d21-detalhe] .d21-evento-quando {
  flex: 0 0 auto;
  min-width: 0;
  color: #5b6a7c;
  font-size: 0.78rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

[data-d21-detalhe] .d21-evento-titulo {
  flex: 0 1 auto;
  min-width: 0;
  color: #0f172a;
  font-weight: 700;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .d21-evento-resumo {
  flex: 1 1 200px;
  min-width: 0;
  color: #45566b;
  font-weight: 500;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .d21-evento-chevron {
  flex: 0 0 auto;
  margin-left: auto;
  color: #7a8798;
  font-size: 0.72rem;
  line-height: 1;
}

/* ---------- EXPANSAO ---------- */

[data-d21-detalhe] .d21-evento-detalhes {
  min-width: 0;
  padding: 2px 10px 14px;
}

[data-d21-detalhe] .d21-evento-detalhes[hidden] {
  display: none;
}

[data-d21-detalhe] .d21-evento-detalhes .stack {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 2px;
  min-width: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(248, 250, 252, 0.9);
}

[data-d21-detalhe] .d21-evento-detalhes .dashboard-rico-recent-row {
  display: grid;
  grid-template-columns: minmax(120px, 190px) minmax(0, 1fr);
  gap: 2px 14px;
  align-items: baseline;
  min-width: 0;
  padding: 3px 0;
}

[data-d21-detalhe] .d21-evento-detalhes .dashboard-rico-recent-row > span {
  min-width: 0;
}

[data-d21-detalhe] .d21-evento-detalhes .dashboard-rico-recent-row > strong {
  min-width: 0;
  flex: none;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 560px) {
  [data-d21-detalhe] .d21-evento-cabecalho {
    padding: 10px 8px;
    font-size: 0.86rem;
  }

  [data-d21-detalhe] .d21-evento-resumo {
    flex: 1 1 100%;
  }

  [data-d21-detalhe] .d21-evento-chevron {
    margin-left: auto;
  }

  [data-d21-detalhe] .d21-evento-detalhes .dashboard-rico-recent-row {
    grid-template-columns: minmax(0, 1fr);
  }
}
/* D21-HISTORICO-CSS-FIM */

/* D21-REDESIGN-CSS-INICIO
   ============================================================
   D21 - REDESIGN VISUAL DA PAGINA DE PROTOCOLO.
   ============================================================

   Terceira e ultima extensao append-only dos blocos D21. Todo seletor segue
   escopado em [data-d21-detalhe] -- verificado por parser pela guarda.

   Vem depois de D21-DETALHE-CSS e D21-HISTORICO-CSS, entao vence por ordem
   nos pontos em que refina. Os dois blocos anteriores nao foram editados:
   este acrescenta e sobrepoe, que e como as 111 folhas anteriores desta base
   sempre trabalharam.

   TOKENS DA LINGUAGEM VISUAL (nao ha custom properties globais nesta base;
   ficam documentados aqui e aplicados literalmente):

     azul-marinho (titulos)      #0f2744
     azul forte (CTA)            #1d4ed8 / hover #1e40af
     teal de apoio               #0d9488 / fundo rgba(13,148,136,0.10)
     texto corpo                 #334155
     texto auxiliar              #64748b
     rotulo pequeno              #7c8ba1
     fundo da pagina             #f4f6fa
     card                        #ffffff
     borda                       #e4e9f0

   O !important continua necessario e pelo mesmo motivo ja documentado:
   main.css:1995-2003 pinta todo <button> de teal com texto branco e :3502
   forca border-radius em todo botao.

   Sem `order` explicito. `flex-wrap` em toda barra. `min-width: 0` em todo
   filho de grid/flex. As tres licoes da D20 continuam valendo. */

/* ---------- SUPERFICIE ---------- */

[data-d21-detalhe] {
  color: #334155;
}

/* Fundo cinza muito claro atras dos cards. O #panel e compartilhado com a
   listagem, entao pintamos a propria pagina, nao o container. */
[data-d21-detalhe].d21-pagina {
  padding: 2px 0 28px;
}

[data-d21-detalhe] .dashboard-rico-card {
  border: 1px solid #e4e9f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
  box-shadow: none !important;
  padding: 20px 22px !important;
}

[data-d21-detalhe] .dashboard-rico-card h3,
[data-d21-detalhe] .dashboard-rico-card h4 {
  margin: 0 0 14px !important;
  color: #0f2744 !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

[data-d21-detalhe] .section-description {
  color: #64748b !important;
  font-size: 0.88rem;
  line-height: 1.55;
}

/* ---------- CABECALHO ----------
   GRID, nao flex. As referencias mostram o botao Voltar sobrepondo o
   protocolo; com tres areas nomeadas isso e estruturalmente impossivel. */

[data-d21-detalhe] .d21-topo {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "voltar identidade selos";
  align-items: center;
  gap: 16px 20px;
  padding: 20px 24px;
  margin-bottom: 16px;
  border: 1px solid #e4e9f0;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: none;
}

[data-d21-detalhe] .d21-voltar {
  grid-area: voltar;
  align-self: center;
  padding: 10px 18px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.85rem;
  font-weight: 600 !important;
  white-space: nowrap;
}

[data-d21-detalhe] .d21-voltar:hover {
  background: #1e40af !important;
}

/* O mesmo brilho teal legado tinge o Voltar e as abas. */
[data-d21-detalhe] .d21-voltar,
[data-d21-detalhe] .d21-aba,
[data-d21-detalhe] .denuncias-admin-action,
[data-d21-detalhe] .f8-lab-button {
  box-shadow: none !important;
}

[data-d21-detalhe] .d21-aba.is-active {
  box-shadow: 0 1px 3px rgba(15, 39, 68, 0.12) !important;
}

[data-d21-detalhe] .d21-identidade {
  grid-area: identidade;
  min-width: 0;
}

[data-d21-detalhe] .d21-protocolo {
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: #0f2744;
  line-height: 1.15;
}

[data-d21-detalhe] .d21-subtitulo {
  margin-top: 6px;
  font-size: 0.9rem;
  color: #64748b;
}

[data-d21-detalhe] .d21-selos {
  grid-area: selos;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}

/* ---------- KPIs ---------- */

[data-d21-detalhe] .d21-faixa-fatos {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}

[data-d21-detalhe] .d21-fato {
  gap: 6px;
  padding: 14px 16px;
  border: 1px solid #e4e9f0;
  border-radius: 14px;
  background: #ffffff;
}

[data-d21-detalhe] .d21-fato-rotulo {
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  /* #7c8ba1 dava 3.46:1 -- abaixo do minimo. O ajuste de contraste da
     rodada anterior usava #4f5d6e, e o redesign o havia desfeito. */
  color: #4f5d6e;
}

[data-d21-detalhe] .d21-fato-valor {
  font-size: 1.02rem;
  font-weight: 700;
  color: #0f2744;
}

/* ---------- TABS ---------- */

[data-d21-detalhe] .d21-abas {
  gap: 4px;
  padding: 5px;
  margin-bottom: 18px;
  border: 1px solid #e4e9f0;
  border-radius: 999px;
  background: #eef2f8;
}

[data-d21-detalhe] .d21-aba {
  padding: 10px 22px;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #5a6b81 !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  box-shadow: none;
}

[data-d21-detalhe] .d21-aba:hover {
  background: rgba(255, 255, 255, 0.7) !important;
  color: #0f2744 !important;
}

[data-d21-detalhe] .d21-aba.is-active {
  background: #ffffff !important;
  background-image: none !important;
  border: 0 !important;
  color: #0f2744 !important;
  box-shadow: 0 1px 3px rgba(15, 39, 68, 0.12) !important;
}

/* ---------- GRADE DAS ABAS ---------- */

[data-d21-detalhe] .d21-grade {
  gap: 18px;
}

[data-d21-detalhe] .d21-coluna-principal,
[data-d21-detalhe] .d21-coluna-lateral,
[data-d21-detalhe] .d21-coluna-unica {
  gap: 16px;
}

[data-d21-detalhe] .d21-nota-aba {
  margin: 0 0 2px;
}

/* ---------- PAINEIS DE APOIO E RESUMO ---------- */

[data-d21-detalhe] .d21-painel-apoio,
[data-d21-detalhe] .d21-resumo-rapido {
  padding: 18px 20px !important;
}

[data-d21-detalhe] .d21-apoio-titulo {
  margin: 0 0 12px !important;
  font-size: 0.92rem !important;
}

[data-d21-detalhe] .d21-apoio-lista {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

[data-d21-detalhe] .d21-apoio-item {
  min-width: 0;
  padding-left: 14px;
  border-left: 2px solid rgba(13, 148, 136, 0.45);
  color: #64748b;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

[data-d21-detalhe] .d21-apoio-rotulo {
  display: block;
  color: #0d9488;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

[data-d21-detalhe] .d21-apoio-valor {
  display: block;
  margin-top: 3px;
  color: #475569;
}

[data-d21-detalhe] .d21-resumo-lista {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  gap: 9px 14px;
  margin: 0;
}

[data-d21-detalhe] .d21-resumo-rotulo {
  min-width: 0;
  color: #4f5d6e;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  align-self: baseline;
}

[data-d21-detalhe] .d21-resumo-valor {
  min-width: 0;
  margin: 0;
  color: #0f2744;
  font-size: 0.88rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

/* ---------- CAMPOS ROTULO/VALOR ---------- */

[data-d21-detalhe] .dashboard-rico-recent-row {
  gap: 4px 16px;
  padding: 9px 0;
  border-bottom: 1px solid #f1f4f9;
}

[data-d21-detalhe] .dashboard-rico-recent-row:last-child {
  border-bottom: 0;
}

[data-d21-detalhe] .dashboard-rico-recent-row > span {
  color: #4f5d6e;
  font-size: 0.7rem;
  letter-spacing: 0.07em;
}

[data-d21-detalhe] .dashboard-rico-recent-row > strong {
  color: #243b57;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ---------- CONTROLES ---------- */

[data-d21-detalhe] input,
[data-d21-detalhe] select,
[data-d21-detalhe] textarea,
[data-d21-detalhe] .input {
  padding: 10px 14px;
  border: 1px solid #dde3ec !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  color: #243b57 !important;
  font-size: 0.9rem;
  line-height: 1.4;
}

[data-d21-detalhe] textarea {
  min-height: 104px;
}

[data-d21-detalhe] .denuncias-admin-action,
[data-d21-detalhe] .f8-lab-button {
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.86rem;
  font-weight: 600 !important;
  white-space: normal;
  box-shadow: none !important;
}

[data-d21-detalhe] .denuncias-admin-action:hover,
[data-d21-detalhe] .f8-lab-button:hover {
  background: #1e40af !important;
}

/* Toda caixa de acao vira uma linha flex que ENVOLVE: e o que impede o botao
   de encostar/estourar a coluna, defeito visivel nas referencias. */
[data-d21-detalhe] .f45-alterar-status-box,
[data-d21-detalhe] .f10-marcar-lido-box,
[data-d21-detalhe] .f46-registrar-evento-box,
[data-d21-detalhe] .f49-resposta-publica-box {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  min-width: 0;
}

[data-d21-detalhe] .f45-alterar-status-box > *,
[data-d21-detalhe] .f10-marcar-lido-box > *,
[data-d21-detalhe] .f46-registrar-evento-box > *,
[data-d21-detalhe] .f49-resposta-publica-box > * {
  min-width: 0;
  max-width: 100%;
}

[data-d21-detalhe] .f46-registrar-evento-box button,
[data-d21-detalhe] .f49-resposta-publica-box button,
[data-d21-detalhe] .f45-alterar-status-box button,
[data-d21-detalhe] .f10-marcar-lido-box button {
  align-self: flex-start;
}

/* ---------- PILLS ---------- */

[data-d21-detalhe] .denuncias-admin-pill {
  padding: 6px 14px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* ---------- HISTORICO / TIMELINE ----------
   Marcador circular e linha vertical por pseudo-elemento: zero markup novo,
   e a linha nao pode se desalinhar do texto porque ancora no mesmo item. */

[data-d21-detalhe] .d21-card-registrar {
  margin-bottom: 2px;
}

[data-d21-detalhe] [data-d21-historico="compacto"] {
  position: relative;
  padding-left: 26px;
}

[data-d21-detalhe] .d21-evento {
  position: relative;
  border-top: 0;
  border-radius: 12px;
}

/* A linha vertical e desenhada POR EVENTO, ligando o marcador ao proximo, e
   nao no container. Desenhar no container fazia a linha atravessar tambem a
   nota de rodape ("Historico carregado do backend...") e passar do ultimo
   evento -- o desalinhamento de timeline que as referencias tem e que nao se
   deve copiar. */
[data-d21-detalhe] .d21-evento::after {
  content: "";
  position: absolute;
  left: -19px;
  top: 30px;
  bottom: -6px;
  width: 2px;
  background: #e4e9f0;
}

[data-d21-detalhe] .d21-evento:last-of-type::after {
  display: none;
}

[data-d21-detalhe] .d21-evento::before {
  content: "";
  position: absolute;
  left: -23px;
  top: 20px;
  width: 10px;
  height: 10px;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #94a3b8;
  box-shadow: 0 0 0 2px #e4e9f0;
}

[data-d21-detalhe] .d21-evento.is-aberto::before {
  background: #1d4ed8;
  box-shadow: 0 0 0 2px rgba(29, 78, 216, 0.25);
}

/* Cabecalho do evento em GRID: data, titulo, resumo e chevron ocupam faixas
   proprias e nao podem se sobrepor -- o defeito de timeline das referencias. */
[data-d21-detalhe] .d21-evento-cabecalho {
  display: grid;
  grid-template-columns: max-content minmax(0, auto) minmax(0, 1fr) max-content;
  align-items: baseline;
  gap: 4px 14px;
  padding: 13px 14px !important;
  border-radius: 12px !important;
  /* A regra global de <button> tambem deixa um brilho teal
     (rgba(0,159,166,0.2) 0 10px 22px) que tingia cada linha da timeline de
     verde-agua. Medido no computed style, nao suposto. */
  box-shadow: none !important;
}

[data-d21-detalhe] .d21-evento-cabecalho:hover {
  background: #f6f8fc !important;
}

[data-d21-detalhe] .d21-evento.is-aberto > .d21-evento-cabecalho {
  background: #f6f8fc !important;
}

[data-d21-detalhe] .d21-evento-quando {
  /* mesma regressao de contraste do rotulo de KPI */
  color: #4f5d6e;
  font-size: 0.76rem;
  font-weight: 600;
}

[data-d21-detalhe] .d21-evento-titulo {
  color: #0f2744;
  font-size: 0.9rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-d21-detalhe] .d21-evento-resumo {
  color: #64748b;
  font-size: 0.86rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

[data-d21-detalhe] .d21-evento-chevron {
  margin-left: 0;
  color: #94a3b8;
  font-size: 0.64rem;
  align-self: center;
}

[data-d21-detalhe] .d21-evento-detalhes {
  padding: 0 14px 14px;
}

[data-d21-detalhe] .d21-evento-detalhes .stack {
  padding: 14px 16px;
  border: 1px solid #eef2f7;
  border-radius: 12px;
  background: #fafbfd;
}

/* ---------- CARDS ANINHADOS ----------
   renderizarDetalheInternoF46H1C monta cada grupo com criarSecao, e criarSecao
   devolve .dashboard-rico-card. Dentro do card "Detalhe interno" isso vira
   card dentro de card -- pesado e redundante. A referencia separa blocos
   internos por respiro e divisor, nao por moldura. */

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card {
  padding: 4px 0 16px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card + .dashboard-rico-card {
  padding-top: 18px !important;
  border-top: 1px solid #eef2f7 !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card:last-child {
  padding-bottom: 0 !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card h3,
[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card h4 {
  font-size: 0.86rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #0d9488 !important;
  margin-bottom: 8px !important;
}

/* Excecao: o corpo do evento no Historico ja tem moldura propria (.stack) e
   nao passa por criarSecao aninhado. */

/* ---------- DESCRICOES DAS CAIXAS DE ACAO ----------
   F45-C3B forca cor propria na descricao da caixa de status, e a regra
   global de peso deixa o texto em negrito escuro -- ele compete com o titulo
   em vez de apoia-lo. Aqui volta a ser texto auxiliar. */

[data-d21-detalhe] .f45-alterar-status-box .section-description,
[data-d21-detalhe] .f10-marcar-lido-box .section-description,
[data-d21-detalhe] .f46-registrar-evento-box .section-description,
[data-d21-detalhe] .f49-resposta-publica-box .section-description {
  color: #64748b !important;
  font-size: 0.85rem !important;
  font-weight: 400 !important;
  line-height: 1.55 !important;
}

[data-d21-detalhe] .f45-alterar-status-box,
[data-d21-detalhe] .f10-marcar-lido-box {
  background: #ffffff !important;
  background-image: none !important;
  color: #334155 !important;
}

[data-d21-detalhe] .f45-alterar-status-box::before,
[data-d21-detalhe] .f45-alterar-status-box::after {
  display: none !important;
}

[data-d21-detalhe] .f45-alterar-status-box h4,
[data-d21-detalhe] .f10-marcar-lido-box h4 {
  color: #0f2744 !important;
  margin-bottom: 12px !important;
  font-size: 1rem !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
}

[data-d21-detalhe] .f45-alterar-status-box .input {
  border-color: #dde3ec !important;
}

/* ---------- ESTADOS VAZIOS ---------- */

[data-d21-detalhe] .dashboard-rico-card > .section-description:only-of-type {
  padding: 14px 16px;
  border: 1px dashed #dde3ec;
  border-radius: 12px;
  background: #fafbfd;
  color: #7c8ba1 !important;
}

/* ---------- ERRO ---------- */

[data-d21-detalhe] .d21-erro {
  padding: 26px !important;
}

[data-d21-detalhe] .d21-erro h3 {
  font-size: 1.08rem !important;
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 1180px) {
  [data-d21-detalhe] .d21-faixa-fatos {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  /* A coluna lateral desce abaixo da principal. */
  [data-d21-detalhe] .d21-topo {
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "voltar identidade"
      "selos  selos";
    row-gap: 12px;
  }

  [data-d21-detalhe] .d21-selos {
    justify-content: flex-start;
  }

  [data-d21-detalhe] .d21-protocolo {
    font-size: 1.34rem;
  }
}

@media (max-width: 760px) {
  [data-d21-detalhe] .d21-faixa-fatos {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  [data-d21-detalhe] .d21-topo {
    padding: 16px 18px;
  }

  [data-d21-detalhe] .dashboard-rico-card {
    padding: 16px 18px !important;
  }
}

@media (max-width: 560px) {
  [data-d21-detalhe] .d21-topo {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "voltar"
      "identidade"
      "selos";
  }

  [data-d21-detalhe] .d21-voltar {
    justify-self: start;
  }

  /* Empilha data / titulo / resumo, mantendo o chevron ancorado no topo a
     direita. Em faixa estreita a grade de 4 colunas espremeria o resumo. */
  [data-d21-detalhe] .d21-evento-cabecalho {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 3px 10px;
  }

  [data-d21-detalhe] .d21-evento-quando {
    grid-column: 1;
  }

  [data-d21-detalhe] .d21-evento-titulo,
  [data-d21-detalhe] .d21-evento-resumo {
    grid-column: 1;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    overflow-wrap: anywhere;
  }

  /* Resumo longo empurrava a linha para 105px em 420. Limitar a altura
     mantem a lista compacta; o texto integral continua na expansao.
     -webkit-box nao serve aqui: item de grade e blockificado e o clamp nao
     clampa -- medido, display computado saiu flow-root. */
  [data-d21-detalhe] .d21-evento-resumo {
    max-height: 2.7em;
    overflow: hidden;
  }

  [data-d21-detalhe] .d21-evento-chevron {
    grid-column: 2;
    grid-row: 1 / span 3;
    align-self: center;
  }

  [data-d21-detalhe] .d21-resumo-lista {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }

  [data-d21-detalhe] .d21-resumo-valor {
    margin-bottom: 8px;
  }
}

@media (max-width: 420px) {
  [data-d21-detalhe] .d21-faixa-fatos {
    grid-template-columns: minmax(0, 1fr);
  }

  [data-d21-detalhe] .d21-protocolo {
    font-size: 1.18rem;
  }

  [data-d21-detalhe] [data-d21-historico="compacto"] {
    padding-left: 20px;
  }

  [data-d21-detalhe] .d21-evento::before {
    left: -18px;
  }

  /* Em 420 o resumo vira uma linha com reticencias: a lista fica uniforme e
     escaneavel, e o texto completo continua a um clique de distancia. */
  [data-d21-detalhe] .d21-evento-resumo {
    max-height: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/* D21-REDESIGN-CSS-FIM */

/* D21-REF-CSS-INICIO
   ============================================================
   D21 - CONFERENCIA CONTRA AS QUATRO IMAGENS DE REFERENCIA.
   ============================================================

   Quarta e ultima extensao append-only dos blocos D21. Escrita DEPOIS de ver
   as imagens reais, que a rodada anterior nao tinha recebido. Onde a imagem
   discorda da interpretacao textual anterior, a IMAGEM manda.

   Todo seletor continua escopado em [data-d21-detalhe].

   O QUE MUDOU EM RELACAO AO QUE EU TINHA FEITO POR TEXTO:

   1. Tabs: as imagens NAO tem barra fechada em volta. Sao pills soltas sobre
      o fundo da pagina; a inativa e azul-acinzentada muito clara e a ATIVA e
      branca com CONTORNO TEAL. Eu havia feito barra + sombra.
   2. Cards internos do "Detalhe interno": as imagens os mostram COM borda.
      Eu os havia achatado. Revertido.
   3. Form de "Registrar movimentacao": nas imagens e uma LINHA horizontal
      (select, titulo, detalhe, botao). Eu havia empilhado.
   4. Timeline: marcadores TEAL preenchidos e linhas de evento com fundo e
      borda proprios. Eu tinha marcador cinza e linha sem moldura.
   5. Estados vazios: caixa centralizada com icone circular teal.
   6. Orientacoes: subcards cinza-claro, nao barras laterais teal.

   Os defeitos visiveis nos mockups NAO foram copiados -- em especial o botao
   Voltar por cima do numero do protocolo, presente nas quatro imagens. O
   cabecalho segue em grid com areas nomeadas. */

/* ---------- TABS: PILLS SOLTAS, ATIVA COM CONTORNO TEAL ---------- */

[data-d21-detalhe] .d21-abas {
  gap: 10px;
  padding: 0;
  margin-bottom: 20px;
  border: 0;
  background: transparent;
}

[data-d21-detalhe] .d21-aba {
  padding: 9px 20px;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: #eaf0f7 !important;
  color: #56687f !important;
  font-size: 0.9rem;
  font-weight: 600 !important;
  box-shadow: none !important;
}

[data-d21-detalhe] .d21-aba:hover {
  background: #e2eaf4 !important;
  color: #24405f !important;
}

[data-d21-detalhe] .d21-aba.is-active {
  background: #ffffff !important;
  background-image: none !important;
  border: 1px solid #14b8a6 !important;
  color: #0f2744 !important;
  box-shadow: none !important;
}

/* ---------- CARDS INTERNOS: DE VOLTA A MOLDURA ----------
   As imagens mostram Relato / Contexto do fato / Envolvidos como cards com
   borda dentro do card "Detalhe interno". O achatamento da rodada anterior
   foi interpretacao minha e esta desfeito. */

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card {
  padding: 16px 18px !important;
  border: 1px solid #e8edf4 !important;
  border-radius: 14px !important;
  background: #ffffff !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card + .dashboard-rico-card {
  padding-top: 16px !important;
  border-top: 1px solid #e8edf4 !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card:last-child {
  padding-bottom: 16px !important;
}

[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card h3,
[data-d21-detalhe] .dashboard-rico-card .dashboard-rico-card h4 {
  color: #0f2744 !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
  text-transform: none;
  margin-bottom: 10px !important;
}

/* ---------- CARD EXTERNO DA ABA ---------- */

[data-d21-detalhe] .d21-aba-card {
  padding: 22px 24px !important;
}

[data-d21-detalhe] .d21-aba-titulo {
  margin: 0 0 6px !important;
  color: #0f2744 !important;
  font-size: 1.06rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em;
}

[data-d21-detalhe] .d21-aba-descricao {
  /* A regra de estado vazio do bloco anterior casa
     `.dashboard-rico-card > .section-description:only-of-type`, e a descricao
     da aba e exatamente isso -- virava caixa tracejada. Aqui ela volta a ser
     texto corrido. */
  margin: 0 0 20px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #56687f !important;
}

/* Encaminhamentos: a secao RH congelada e achatada para que o titulo dela
   ("Encaminhamento ao RH (lab)") sirva de cabecalho do card, como na
   referencia -- em vez de virar um card dentro do card. */
[data-d21-detalhe] [data-d21-aba-card="encaminhamentos"] > .d21-grade
  > .d21-coluna-principal > .dashboard-rico-card {
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

[data-d21-detalhe] [data-d21-aba-card="encaminhamentos"] > .d21-grade
  > .d21-coluna-principal > .dashboard-rico-card > h3 {
  font-size: 1.06rem !important;
  margin-bottom: 6px !important;
}

/* ---------- RESUMO RAPIDO: VALOR A DIREITA ---------- */

[data-d21-detalhe] .d21-resumo-lista {
  grid-template-columns: minmax(0, 1fr) max-content;
  gap: 11px 16px;
}

[data-d21-detalhe] .d21-resumo-rotulo {
  color: #56687f;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

[data-d21-detalhe] .d21-resumo-valor {
  text-align: right;
  color: #0f2744;
  font-size: 0.88rem;
  font-weight: 700;
}

/* ---------- ORIENTACOES: SUBCARDS ---------- */

[data-d21-detalhe] [data-d21-apoio-estilo="subcards"] .d21-apoio-lista {
  gap: 10px;
}

[data-d21-detalhe] [data-d21-apoio-estilo="subcards"] .d21-apoio-item {
  padding: 13px 15px;
  border: 0;
  border-radius: 12px;
  background: #f4f7fb;
}

[data-d21-detalhe] [data-d21-apoio-estilo="subcards"] .d21-apoio-rotulo {
  color: #0f2744;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}

[data-d21-detalhe] [data-d21-apoio-estilo="subcards"] .d21-apoio-valor {
  margin-top: 5px;
  color: #56687f;
  font-size: 0.84rem;
  line-height: 1.5;
}

[data-d21-detalhe] .d21-apoio-dica {
  margin: 12px 0 0;
  padding: 12px 15px;
  border-radius: 12px;
  background: rgba(20, 184, 166, 0.10);
  color: #0f766e;
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.5;
}

/* ---------- PROXIMOS PASSOS: CIRCULOS NUMERADOS ---------- */

[data-d21-detalhe] [data-d21-apoio-estilo="numerado"] .d21-apoio-lista,
[data-d21-detalhe] [data-d21-apoio-estilo="marcado"] .d21-apoio-lista {
  gap: 13px;
}

[data-d21-detalhe] [data-d21-apoio-estilo="numerado"] .d21-apoio-item,
[data-d21-detalhe] [data-d21-apoio-estilo="marcado"] .d21-apoio-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 0;
  border: 0;
  background: transparent;
}

[data-d21-detalhe] .d21-apoio-numero {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(20, 184, 166, 0.55);
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.10);
  color: #0f766e;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1;
}

[data-d21-detalhe] .d21-apoio-ponto {
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  margin-top: 7px;
  border-radius: 50%;
  background: #14b8a6;
}

[data-d21-detalhe] .d21-apoio-texto {
  min-width: 0;
  color: #45566b;
  font-size: 0.85rem;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/* ---------- REGISTRAR MOVIMENTACAO: LINHA HORIZONTAL ----------
   Nas imagens os quatro controles ficam lado a lado. `wrap` garante que em
   telas estreitas eles quebrem em vez de espremer -- o defeito de barra flex
   sem wrap que a D20 ja pagou. */

[data-d21-detalhe] .f46-registrar-evento-box {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}

[data-d21-detalhe] .f46-registrar-evento-box > h4,
[data-d21-detalhe] .f46-registrar-evento-box > p {
  flex: 1 1 100%;
  margin: 0;
}

[data-d21-detalhe] .f46-registrar-evento-box > p {
  margin-bottom: 4px;
}

[data-d21-detalhe] .f46-registrar-evento-box > select {
  flex: 0 1 170px;
}

[data-d21-detalhe] .f46-registrar-evento-box > input {
  flex: 1 1 200px;
}

[data-d21-detalhe] .f46-registrar-evento-box > textarea {
  flex: 2 1 280px;
  min-height: 62px;
}

[data-d21-detalhe] .f46-registrar-evento-box > button {
  flex: 0 0 auto;
  align-self: flex-start;
}

/* ---------- TIMELINE: MARCADOR TEAL E LINHA COM MOLDURA ---------- */

[data-d21-detalhe] [data-d21-historico="compacto"] {
  gap: 10px;
  padding-left: 30px;
}

[data-d21-detalhe] .d21-evento::before {
  left: -26px;
  top: 17px;
  width: 11px;
  height: 11px;
  border: 0;
  background: #14b8a6;
  box-shadow: 0 0 0 3px rgba(20, 184, 166, 0.16);
}

[data-d21-detalhe] .d21-evento.is-aberto::before {
  background: #0d9488;
  box-shadow: 0 0 0 3px rgba(13, 148, 136, 0.25);
}

[data-d21-detalhe] .d21-evento::after {
  left: -21px;
  top: 30px;
  bottom: -16px;
  background: rgba(20, 184, 166, 0.28);
}

[data-d21-detalhe] .d21-evento-cabecalho {
  border: 1px solid #e8edf4 !important;
  border-radius: 12px !important;
  background: #fafcfe !important;
  padding: 12px 16px !important;
}

[data-d21-detalhe] .d21-evento-cabecalho:hover {
  background: #f2f7fb !important;
  border-color: #d8e2ee !important;
}

[data-d21-detalhe] .d21-evento.is-aberto > .d21-evento-cabecalho {
  background: #f2f7fb !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
}

[data-d21-detalhe] .d21-evento-quando {
  color: #56687f;
  font-size: 0.78rem;
  font-weight: 500;
}

[data-d21-detalhe] .d21-evento-titulo {
  color: #0f2744;
  font-weight: 700;
}

[data-d21-detalhe] .d21-evento-resumo {
  color: #56687f;
  font-weight: 400;
}

[data-d21-detalhe] .d21-evento-detalhes {
  padding: 10px 16px 14px;
}

/* ---------- ESTADOS VAZIOS: CAIXA COM ICONE TEAL ----------
   Os estados vazios do RH e das mensagens sao <p class="section-description">
   dentro de um card congelado. O icone entra por pseudo-elemento: nenhum
   markup e injetado em codigo congelado. */

/* Medido nas duas secoes congeladas: o corpo e um <div> filho direto do
   card, e o estado vazio e o ULTIMO <p class="section-description"> dele.
   Com itens, o ultimo filho e um <div> e este seletor nao casa -- que e
   exatamente o comportamento desejado. */
[data-d21-detalhe] .d21-aba-card .dashboard-rico-card > div > p.section-description:last-child {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 28px 20px;
  border: 1px solid #e4ebf3;
  border-radius: 14px;
  background: #fbfdff;
  color: #56687f !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  text-align: center;
}

[data-d21-detalhe] .d21-aba-card .dashboard-rico-card > div > p.section-description:last-child::before {
  content: "✦";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(20, 184, 166, 0.45);
  border-radius: 50%;
  background: rgba(20, 184, 166, 0.10);
  color: #14b8a6;
  font-size: 1.1rem;
  font-weight: 400;
}

/* O CTA real do fluxo de encaminhamento e o botao "Novo encaminhamento" da
   secao congelada (app.js:13563). A referencia mostra um "Criar agora"
   dentro da caixa vazia; NAO foi criado um segundo botao -- so estilizamos o
   que ja existe. Divergencia deliberada, registrada no relatorio. */
[data-d21-detalhe] [data-d21-aba-card="encaminhamentos"] .btn.primary {
  align-self: flex-start;
  padding: 10px 20px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #1d4ed8 !important;
  background-image: none !important;
  color: #ffffff !important;
  font-size: 0.86rem;
  font-weight: 600 !important;
  box-shadow: none !important;
}

[data-d21-detalhe] [data-d21-aba-card="encaminhamentos"] .btn.primary:hover {
  background: #1e40af !important;
}

/* ---------- BADGES ---------- */

[data-d21-detalhe] .d21-selos .denuncias-admin-pill {
  padding: 6px 15px;
  border-radius: 999px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* ---------- RESPONSIVO ---------- */

@media (max-width: 760px) {
  [data-d21-detalhe] .d21-aba-card {
    padding: 18px 16px !important;
  }

  [data-d21-detalhe] .f46-registrar-evento-box > select,
  [data-d21-detalhe] .f46-registrar-evento-box > input,
  [data-d21-detalhe] .f46-registrar-evento-box > textarea {
    flex: 1 1 100%;
  }
}

@media (max-width: 560px) {
  [data-d21-detalhe] .d21-abas {
    gap: 8px;
  }

  [data-d21-detalhe] .d21-resumo-lista {
    grid-template-columns: minmax(0, 1fr) max-content;
  }

  [data-d21-detalhe] .d21-resumo-valor {
    margin-bottom: 0;
  }
}
/* D21-REF-CSS-FIM */


/* D21-SUPERFICIE-CSS-INICIO
   ==========================================================================
   HIERARQUIA DE SUPERFICIE: PAINEL DE FUNDO x CARD DE FRENTE

   O diagnostico foi MEDIDO no navegador, nao lido na folha -- main.css tem
   660 KB e ~30 declaracoes de `.card`, entao ler o fonte daria a primeira e
   nao a que vence a cascata. Dentro de #panel, TODA superficie da pagina
   D21 computava rgb(255, 255, 255): painel da aba, card de aba e cards
   internos. Separava-os apenas 1px de borda -- e por isso a tela lia como um
   bloco continuo unico.

   A referencia (Pacotes de Modelos) foi medida do mesmo jeito, montada pelo
   roteador real: html = rgb(247, 249, 250) e #panel = rgb(255, 255, 255).
   Ou seja, o padrao da casa tem DUAS camadas -- uma base cinza-azulada e
   cards brancos por cima. Nao ha uma terceira.

   A regra deste bloco e uma so, e vale para os quatro paineis:

       container que AGRUPA cards  -> base (mais escuro)
       container que carrega TEXTO -> card de frente (branco)

   Por isso o card de aba deixa de ter fundo proprio (ele agrupa), o painel
   de apoio em subcards vira base e seus itens viram brancos, e a secao do
   RH -- achatada na rodada das imagens para nao virar card dentro de card --
   volta a ser card branco, agora que o pai dela e base e nao mais card.

   Nada de estrutura, texto, aba, cabecalho ou comportamento e tocado: este
   bloco so declara fundo, borda, raio e espacamento.
   ========================================================================== */

/* ---------- CARD DE FRENTE: o padrao dentro dos paineis ---------- */

[data-d21-detalhe] .d21-painel .dashboard-rico-card {
  background: #ffffff !important;
  box-shadow: 0 1px 2px rgba(15, 39, 68, 0.05);
}

/* ---------- BASE 1: o painel de cada aba ----------
   Vale para as quatro abas, inclusive o Historico, que nao tem card de aba
   e cujos dois cards sao filhos diretos do painel. */

[data-d21-detalhe] .d21-painel {
  padding: 16px;
  border: 1px solid #dfe7f0;
  border-radius: 18px;
  background: #edf2f8;
}

/* ---------- BASE 2: o card de aba agrupa, entao nao pinta ----------
   Titulo e descricao da aba passam a ler direto sobre a base. O recuo que
   ele dava sai porque o painel acima ja o da. */

[data-d21-detalhe] .d21-painel .dashboard-rico-card.d21-aba-card {
  padding: 2px 2px 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* ---------- BASE 3: "Detalhe interno" agrupa tres cards ----------
   O :has() e proposital: a caixa so vira base QUANDO de fato contem cards.
   Se o renderizador congelado devolver mensagem de erro ou de carregamento,
   ela nao casa e segue card branco -- que e o certo para uma caixa de texto. */

[data-d21-detalhe] .d21-painel .dashboard-rico-card:has(> [data-protocolo-f46] > .dashboard-rico-card) {
  border-color: #dfe7f0 !important;
  background: #edf2f8 !important;
  box-shadow: none !important;
}

/* ---------- BASE 4: painel de apoio em subcards ----------
   So o estilo "subcards" vira base: os estilos "numerado" e "marcado" tem
   linhas de texto, nao cards, e por isso continuam sendo card de frente. */

[data-d21-detalhe] .d21-painel .dashboard-rico-card[data-d21-apoio-estilo="subcards"] {
  border-color: #dfe7f0 !important;
  background: #edf2f8 !important;
  box-shadow: none !important;
}

[data-d21-detalhe] [data-d21-apoio-estilo="subcards"] .d21-apoio-item {
  border: 1px solid #e4e9f0;
  background: #ffffff;
}

/* ---------- O RH VOLTA A SER CARD ----------
   Na rodada das imagens esta secao foi achatada para nao virar card dentro
   de card. Agora o pai dela e base, entao card branco e exatamente o que a
   hierarquia pede -- e o titulo dela continua servindo de cabecalho. */

[data-d21-detalhe] .d21-painel [data-d21-aba-card="encaminhamentos"] > .d21-grade
  > .d21-coluna-principal > .dashboard-rico-card {
  padding: 20px 22px !important;
  border: 1px solid #e4e9f0 !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

/* ---------- CONTRASTE DO TEXTO QUE MUDOU DE FUNDO ----------
   Escurecer a base move texto secundario que antes estava sobre branco. Os
   dois paragrafos abaixo sao os unicos nessa situacao -- achados por
   varredura do painel, nao por lista escolhida a mao.

   O da aba ja estava em 3.46:1 SOBRE BRANCO, ou seja, abaixo de 4.5:1 antes
   deste bloco existir; a base so tornou visivel um defeito que ja estava la.
   Ficam os dois em #54637a: 5.42:1 sobre a base, e ainda claramente
   secundarios ao lado do titulo em #0f2744.

   A descricao da aba precisa de especificidade alta: quem pinta os
   #7c8ba1 nela e a regra de ESTADO VAZIO
   (`.dashboard-rico-card > .section-description:only-of-type`), e a
   descricao da aba casa esse seletor por acidente -- foi a mesma regra que
   antes a transformava em caixa tracejada. */

[data-d21-detalhe] .d21-painel p.section-description.d21-aba-descricao,
[data-d21-detalhe] .d21-painel [data-protocolo-f46] > p.section-description {
  color: #54637a !important;
}

/* ---------- RESPONSIVO: a base afina antes de apertar o conteudo ---------- */

@media (max-width: 760px) {
  [data-d21-detalhe] .d21-painel {
    padding: 12px;
    border-radius: 16px;
  }
}

@media (max-width: 420px) {
  [data-d21-detalhe] .d21-painel {
    padding: 9px;
    border-radius: 14px;
  }
}
/* D21-SUPERFICIE-CSS-FIM */

/* D22-PILLS-TABELA-INICIO
   ============================================================
   D22 - PALETA DE STATUS NA TABELA.
   ============================================================

   As regras equivalentes ja existiam escopadas em
   [data-d21-detalhe] (main.css:14504-14541). A tabela ficava de fora
   e caia nas tres classes historicas, pintando Em analise, Concluida
   e Arquivada todas de verde.

   Este bloco repete AS MESMAS cores sem o escopo do detalhe, para que
   lista e pagina digam a mesma coisa. As tres regras historicas
   (.status-respondido, .status-rh, .status-descartado em
   main.css:2729-2731) continuam intactas: outras telas as usam, e a
   guarda de main.css e append-only.

   Os tres status legados continuam com cor propria. O DML da D22 ja
   os removeu do banco, mas payload antigo e dataset de demonstracao
   ainda podem traze-los, e status sem cor e pior do que status
   legado com cor. */

.denuncias-admin-table .status-recebido,
[data-d21-detalhe] .status-recebido {
  background: rgba(100, 116, 139, 0.18);
  color: #334155;
}

.denuncias-admin-table .status-aguardando-rh {
  background: rgba(234, 179, 8, 0.20);
  color: #854d0e;
}

.denuncias-admin-table .status-em-analise,
.denuncias-admin-table .status-em-apuracao {
  background: rgba(59, 130, 246, 0.18);
  color: #1e40af;
}

.denuncias-admin-table .status-rh-respondeu,
.denuncias-admin-table .status-respondido-ao-colaborador {
  background: rgba(34, 197, 94, 0.18);
  color: #166534;
}

.denuncias-admin-table .status-concluida {
  background: rgba(16, 185, 129, 0.20);
  color: #065f46;
}

.denuncias-admin-table .status-arquivada {
  background: rgba(148, 163, 184, 0.24);
  color: #475569;
}

.denuncias-admin-table .status-descartado,
.denuncias-admin-table .status-desconsiderado {
  background: rgba(239, 68, 68, 0.16);
  color: #991b1b;
}

/* Status fora do dominio conhecido: neutro legivel, nunca invisivel. */
.denuncias-admin-table td .denuncias-admin-pill[class="denuncias-admin-pill"] {
  background: rgba(148, 163, 184, 0.20);
  color: #334155;
}
/* D22-PILLS-TABELA-FIM */

/* D22-SUPERFICIES-INICIO
   ============================================================
   D22 - CARDS DE ACAO, MOTIVO E CONVERSA DE DUAS VIAS.
   ============================================================

   A paleta e a MESMA do card "Status operacional lab" da F45-C3B
   (main.css:11284-11350). Nao ha tema novo: os tres cards da D22
   (status, ciclo, triagem) sao irmaos daquele e precisam parecer
   irmaos.

   POR QUE TANTO !important. main.css:1995-2003 pinta TODO <button> de
   teal com !important, e as regras de card do tema escuro tambem sao
   !important. Um bloco novo sem !important perde e fica ilegivel. E a
   mesma razao pela qual a F45-C3B usou !important antes desta fase.

   Append-only: a guarda de main.css exige que o arquivo comece
   exatamente com o PRE, entao nada acima foi editado. */

.d22-acao-box {
  background: linear-gradient(180deg, #ffffff 0%, #f7fbfc 100%) !important;
  border: 1px solid rgba(154, 210, 214, 0.66) !important;
  color: #243746 !important;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 16px 38px rgba(15, 45, 58, 0.10);
}

.d22-acao-box::before {
  background: linear-gradient(180deg, #0F6E7B 0%, #13808F 100%) !important;
}

.d22-acao-box h4 {
  color: #062744 !important;
  margin-bottom: 2px;
}

.d22-acao-box h5.d22-subacao-titulo {
  color: #062744 !important;
  margin: 0 0 6px;
  font-size: 0.92rem;
  font-weight: 800;
}

.d22-acao-box .section-description {
  color: #344b5b !important;
  margin: 0;
}

.d22-acao-box .input {
  background: #ffffff !important;
  border-color: rgba(154, 210, 214, 0.92) !important;
  color: #243746 !important;
  min-height: 42px;
}

.d22-acao-box select.input {
  display: block;
  width: 100%;
  margin: 8px 0 0;
}

.d22-acao-box textarea.input {
  display: block;
  width: 100%;
  min-height: 76px;
  resize: vertical;
}

.d22-acao-box .input:focus {
  border-color: #0F6E7B !important;
  box-shadow: 0 0 0 3px rgba(15, 110, 123, 0.14) !important;
  outline: none;
}

.d22-acao-box .denuncias-admin-action {
  align-self: flex-start;
  min-height: 42px;
  margin-top: 10px;
  border-radius: 999px !important;
  border: 1px solid rgba(15, 110, 123, 0.24) !important;
  background: linear-gradient(135deg, #0F6E7B 0%, #13808F 100%) !important;
  color: #ffffff !important;
  font-weight: 800;
  letter-spacing: 0.01em;
  box-shadow: 0 12px 24px rgba(15, 110, 123, 0.20);
}

.d22-acao-box .denuncias-admin-action:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 16px 30px rgba(15, 110, 123, 0.25);
}

.d22-acao-box .denuncias-admin-action:focus-visible {
  outline: 3px solid rgba(15, 110, 123, 0.22);
  outline-offset: 3px;
}

/* Botao desabilitado precisa PARECER desabilitado: sem isto o gradiente
   teal com !important sobrevive e o operador clica num botao morto. */
.d22-acao-box .denuncias-admin-action:disabled {
  background: rgba(148, 163, 184, 0.35) !important;
  color: #475569 !important;
  border-color: rgba(148, 163, 184, 0.45) !important;
  box-shadow: none;
  cursor: not-allowed;
  transform: none;
}

.d22-subacao {
  border-top: 1px solid rgba(154, 210, 214, 0.45);
  padding-top: 12px;
  margin-top: 4px;
  display: flex;
  flex-direction: column;
}

.d22-subacao:first-child {
  border-top: 0;
  padding-top: 0;
  margin-top: 0;
}

.d22-campo-motivo {
  display: block;
  margin: 8px 0 0;
}

.d22-campo-motivo > span {
  display: block;
  margin-bottom: 4px;
  color: #062744 !important;
  font-weight: 700;
  font-size: 0.84rem;
}

.d22-campo-motivo .d22-motivo-ajuda {
  margin-top: 4px !important;
  font-size: 0.78rem;
  color: #5a7385 !important;
}

.d22-status-atual {
  font-weight: 700;
  color: #062744 !important;
}

.d22-triagem-vigente {
  background: rgba(15, 110, 123, 0.06);
  border: 1px solid rgba(154, 210, 214, 0.55);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ---------- CONVERSA DE DUAS VIAS ---------- */

.d22-faixa-indicador {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 10px;
}

.d22-faixa-indicador:empty {
  display: none;
}

.d22-indicador-comunicacao {
  padding: 6px 12px;
  font-size: 0.76rem;
  letter-spacing: 0.01em;
}

.d22-indicador-aguardando-retorno {
  background: rgba(234, 179, 8, 0.20);
  color: #854d0e;
}

.d22-indicador-retorno-recebido {
  background: rgba(59, 130, 246, 0.18);
  color: #1e40af;
}

.d22-timeline {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.d22-timeline-item {
  border-radius: 12px;
  padding: 10px 12px;
  border-left: 4px solid rgba(148, 163, 184, 0.6);
}

/* As duas direcoes precisam ser distinguiveis SEM depender so de cor:
   o cabecalho ja diz quem falou com quem, e a borda reforca. */
.d22-timeline-entrada {
  border-left-color: #0F6E7B;
}

.d22-timeline-saida {
  border-left-color: #16a34a;
}

.d22-timeline-cabecalho {
  display: block;
  margin-bottom: 4px;
  font-size: 0.8rem;
  letter-spacing: 0.01em;
}

@media (max-width: 640px) {
  .d22-acao-box .denuncias-admin-action {
    width: 100%;
    justify-content: center;
    align-self: stretch;
  }
}
/* D22-SUPERFICIES-FIM */

/* D22-CAMPO-RH-INICIO
   ============================================================
   D22 - CAMPO DE TEXTO DO FORMULARIO DE ENCAMINHAMENTO RH.
   ============================================================

   MEDIDO antes da correcao, na aba Encaminhamentos: o <label> do
   formulario RH nao tinha classe, herdava display:inline, e a textarea
   ficava com 185px dentro de um card de 851px -- 22% da largura util --
   com o rotulo colado ao lado.

   Aqui o campo passa a seguir o mesmo padrao dos demais formularios do
   painel: rotulo em bloco acima, controle ocupando a largura util,
   altura confortavel e contador logo abaixo.

   Escopo restrito ao formulario RH: todo seletor comeca em .rh-campo,
   que so existe onde criarCampoRotuladoRhA5B monta. Nenhuma regra
   generica de <label> foi criada -- isso alcancaria o painel inteiro.

   Append-only, como a guarda de main.css exige. */

.rh-campo {
  display: block;
  width: 100%;
  margin: 12px 0 0;
}

.rh-campo .rh-campo-rotulo {
  display: block;
  margin-bottom: 6px;
  font-weight: 700;
  font-size: 0.84rem;
  letter-spacing: 0.01em;
}

.rh-campo .input {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

.rh-campo textarea.input {
  min-height: 132px;
  resize: vertical;
  line-height: 1.45;
}

/* O seletor "Modo do conteudo" continua um <select> normal: ele nao
   precisa de altura de digitacao, so da mesma largura util. */
.rh-campo select.input {
  min-height: 42px;
}

/* Contador logo abaixo do campo, discreto e alinhado a direita. Fica
   FORA do label na montagem congelada; aqui so encostamos nele. */
.rh-campo-contador {
  margin: 4px 0 0 !important;
  text-align: right;
  font-size: 0.78rem;
  opacity: 0.85;
}

@media (max-width: 640px) {
  .rh-campo textarea.input {
    min-height: 112px;
  }
}
/* D22-CAMPO-RH-FIM */

/* ================================================================== */
/* D24-DASH-CSS-INICIO                                                 */
/* ================================================================== */

/* D24 - FILTROS DO DASHBOARD E IMPRESSAO A4 RETRATO.

   POSICAO DESTE BLOCO NAO E ESTETICA.
   Suites historicas homologadas fatiam este arquivo com
   css.slice(css.indexOf("<marco de bloco posterior>")) -- ou seja, do
   marco ate o FIM DO ARQUIVO. Um bloco novo colado no fim cairia
   DENTRO dessas fatias e passaria a ser cobrado por regras que nao sao
   dele (por exemplo, a exigencia de !important nos botoes daquele
   bloco). Por isso o D24 entra ANTES dos blocos posteriores, logo
   depois do fechamento do bloco do campo RH, e o arquivo continua
   terminando exatamente como terminava.

   Pelo mesmo motivo, nenhum comentario daqui repete o nome literal dos
   marcos de abertura/fechamento dos blocos que vem depois: indexOf
   acha a PRIMEIRA ocorrencia, e uma citacao aqui deslocaria todas
   aquelas fatias para ca. */


/* ---------- TELA ---------- */

.d24-filtros {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin: 0;
  padding: 14px 16px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.94);
}

.d24-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.d24-campo label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #1e293b;
}

.d24-filtros select,
.d24-filtros input[type="date"] {
  min-height: 40px;
  min-width: 172px;
  padding: 8px 12px;
  border: 1px solid rgba(15, 23, 42, 0.18);
  border-radius: 10px;
  background: #ffffff;
  color: #0f172a;
  font-size: 14px;
}

.d24-filtros select:focus,
.d24-filtros input[type="date"]:focus {
  outline: 2px solid #2563eb;
  outline-offset: 1px;
}

.d24-filtros select[disabled],
.d24-filtros input[type="date"][disabled] {
  background: #f1f5f9;
  color: #64748b;
}

.d24-acoes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* A regra global de <button> deste arquivo pinta TODO botao com
   !important. Para o secundario existir sem reestilizar botao nenhum
   fora daqui, a excecao e escopada em .d24-acoes e precisa da mesma
   forca. Forma tambem muda (borda + fundo claro), porque a acao nao
   pode ser comunicada so por cor. */
.d24-acoes .d24-btn-secundario {
  color: #0f172a !important;
  background: #ffffff !important;
  border: 1px solid rgba(15, 23, 42, 0.28) !important;
  box-shadow: none !important;
}

.d24-acoes .d24-btn-secundario:hover {
  background: #f1f5f9 !important;
  border-color: rgba(15, 23, 42, 0.40) !important;
}

.d24-acoes button[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.d24-filtros-erro {
  flex-basis: 100%;
  margin: 0;
  color: #b42318;
  font-size: 13px;
  font-weight: 700;
}

.d24-filtros-erro:empty {
  display: none;
}

.d24-aviso {
  flex-basis: 100%;
  margin: 0;
  color: #92400e;
  font-size: 12px;
  font-weight: 700;
}

.d24-aviso:empty {
  display: none;
}

.d24-resultado {
  display: grid;
  gap: 18px;
  width: 100%;
}

.d24-estado {
  padding: 22px;
  border: 1px solid rgba(15, 23, 42, 0.10);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.94);
}

.d24-estado h3 {
  margin: 0 0 8px;
  color: #0f172a;
  font-size: 16px;
  letter-spacing: -0.02em;
}

.d24-estado p {
  margin: 4px 0 0;
  color: #475569;
  font-size: 14px;
  line-height: 1.55;
}

.d24-estado-erro {
  border-color: rgba(180, 35, 24, 0.28);
}

.d24-estado-erro h3 {
  color: #b42318;
}

.d24-eco {
  font-weight: 700;
  color: #1e293b !important;
}

/* Cabecalho que so existe no papel. */
.d24-print-header {
  display: none;
}

@media (max-width: 760px) {
  .d24-filtros select,
  .d24-filtros input[type="date"] {
    min-width: 0;
    width: 100%;
  }

  .d24-campo {
    flex: 1 1 100%;
  }
}


/* ---------- IMPRESSAO ---------- */

/* Todas as regras abaixo exigem o atributo que o Dashboard coloca no
   <body> em beforeprint e retira em afterprint. Imprimir outra tela
   nao ativa nada disto. O @page NAO mora aqui: ele e injetado e
   removido dinamicamente pelo proprio Dashboard, porque @page e
   sempre global e nao aceita ser escopado por seletor. */

@media print {
  body[data-d24-print="dashboard"] .sidebar,
  body[data-d24-print="dashboard"] .topbar,
  body[data-d24-print="dashboard"] .scope-note,
  body[data-d24-print="dashboard"] .content-footer,
  body[data-d24-print="dashboard"] .d24-filtros,
  body[data-d24-print="dashboard"] .dashboard-rico-hero {
    display: none !important;
  }

  body[data-d24-print="dashboard"] .app {
    display: block !important;
    min-height: auto !important;
  }

  body[data-d24-print="dashboard"] .content {
    padding: 0 !important;
    gap: 0 !important;
  }

  body[data-d24-print="dashboard"] .panel {
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  body[data-d24-print="dashboard"] {
    background: #ffffff !important;
    overflow: visible !important;
  }

  body[data-d24-print="dashboard"] .d24-print-header {
    display: block !important;
    margin: 0 0 12px;
    padding: 0 0 10px;
    border-bottom: 2px solid #0f172a;
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  body[data-d24-print="dashboard"] .d24-print-header h2 {
    margin: 0;
    font-size: 20px;
    letter-spacing: -0.02em;
    color: #0f172a;
  }

  body[data-d24-print="dashboard"] .d24-print-aviso {
    margin: 2px 0 8px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #92400e;
  }

  body[data-d24-print="dashboard"] .d24-print-linha {
    margin: 2px 0;
    font-size: 12px;
    color: #1e293b;
  }

  body[data-d24-print="dashboard"] .d24-print-linha strong {
    font-weight: 800;
  }

  /* A caixa util do A4 retrato com margem de 12mm tem ~703px, o que
     CASA as media queries de tela deste Dashboard (1180px e 760px) e
     jogaria os oito KPIs em coluna unica no papel. A grade e
     re-declarada aqui de proposito. */
  body[data-d24-print="dashboard"] .dashboard-rico-kpis {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body[data-d24-print="dashboard"] .d24-resultado {
    gap: 12px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi,
  body[data-d24-print="dashboard"] .dashboard-rico-card,
  body[data-d24-print="dashboard"] .dashboard-rico-recent-row,
  body[data-d24-print="dashboard"] .d24-estado {
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-card h3 {
    break-after: avoid !important;
    page-break-after: avoid !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi {
    min-height: auto !important;
    padding: 10px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi strong {
    font-size: 22px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi span {
    margin-top: 4px !important;
    font-size: 11px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi small {
    margin-top: 2px !important;
    font-size: 10px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-card {
    padding: 12px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-donut-wrap {
    min-height: 132px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-donut {
    width: 120px !important;
    height: 120px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-line {
    height: 110px !important;
  }

  body[data-d24-print="dashboard"] .dashboard-rico-kpi,
  body[data-d24-print="dashboard"] .dashboard-rico-card {
    box-shadow: none !important;
    border-radius: 10px !important;
    transform: none !important;
    cursor: auto !important;
  }

  /* Barras, donuts e acentos sao fundo/traco: sem isto o navegador
     descarta a cor e o grafico sai cinza. */
  body[data-d24-print="dashboard"] .dashboard-rico-screen,
  body[data-d24-print="dashboard"] .dashboard-rico-screen * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }
}

/* ================================================================== */
/* D24-DASH-CSS-FIM                                                    */
/* ================================================================== */

/* ================================================================== */
/* D25-HEADER-CSS-INICIO                                               */
/* ================================================================== */

/* D25 - CABECALHO GLOBAL NO PADRAO VISUAL APROVADO.

   POR QUE ESTE BLOCO E CSS-ONLY.
   A navegacao ja e horizontal: um bloco anterior deste mesmo arquivo
   converteu a barra lateral em menu superior "sem editar index.html".
   A D25 segue a mesma via - nenhum no e criado, movido ou removido, e
   por isso `app.js` e `index.html` continuam byte-identicos e a
   impressao continua correta (ver PRINT, abaixo).

   POSICAO DESTE BLOCO NAO E ESTETICA.
   Suites homologadas fatiam este arquivo de um marco ate o FIM DO
   ARQUIVO. Um bloco colado no fim cairia dentro dessas fatias e seria
   cobrado por regras que nao sao dele. Por isso o D25 entra logo apos
   o fechamento do bloco do painel e ANTES dos blocos posteriores, e
   nenhum comentario daqui repete o nome literal desses marcos - indexOf
   acha a primeira ocorrencia e deslocaria aquelas fatias para ca.

   PRINT.
   Nada aqui pinta `body` nem `.app`, e o cabecalho continua
   `position: sticky` dentro de `.sidebar`. O bloco do painel esconde
   `.sidebar` e `.topbar` na impressao, e todo o cabecalho e filho de um
   dos dois - entao o papel continua sem header, por construcao.

   DISPLAY DOS ITENS DE MENU: SEM !important, DE PROPOSITO.
   Cinco itens sao ocultados em runtime com `style.display = "none"`
   (inline) e um sexto por uma regra `display: none !important` deste
   arquivo. Um `display: ... !important` aqui venceria o estilo inline e
   RESSUSCITARIA os cinco itens que moram dentro do hub. A regra abaixo
   usa `display` sem `!important` justamente para perder essa disputa. */


/* ---------- CONTAINER ---------- */

.sidebar {
  position: sticky;
  top: 12px;
  z-index: 50;
  width: auto;
  /* O bloco anterior fixava width:100%. Trocar por auto (necessario
     para a margem lateral) exporia o align-self:start herdado do shell e
     o container encolheria ate o conteudo, deixando um vao a direita em
     telas largas. Medido: 1432px de container num viewport de 1920.
     stretch devolve a largura cheia menos as margens. */
  align-self: stretch;
  margin: 12px 16px;
  padding: 26px 20px 18px;
  gap: 14px;
  align-items: center;
  min-height: 0;
  border: 1px solid #e6eaee;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.06);
}

/* Detalhe decorativo do canto superior esquerdo: dois tracos, teal e
   dourado, nas cores medidas na referencia aprovada. Dois
   pseudo-elementos em vez de um gradiente com paradas duras, para que
   cada traco tenha as pontas arredondadas como na arte. */
.sidebar::before,
.sidebar::after {
  content: "";
  position: absolute;
  top: 14px;
  height: 4px;
  border-radius: 999px;
}

.sidebar::before {
  left: 24px;
  width: 72px;
  background: #7cc4c3;
}

.sidebar::after {
  left: 102px;
  width: 34px;
  background: #e5c186;
}


/* ---------- MARCA ---------- */

.sidebar .brand {
  gap: 12px;
  flex: 0 0 auto;
}

/* Logo REAL do projeto. O no continua sendo o mesmo <span> com o texto
   "CE"; o texto e zerado e a marca entra como imagem de fundo. O
   caminho e relativo A ESTE ARQUIVO CSS:
   frontend/src/styles/ + ../../public/assets/ = frontend/public/assets/ */
.sidebar .brand-mark {
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 0;
  /* Um bloco anterior desenha um anel dourado por box-shadow inset no
     quadrado da marca. Sem zerar, a moldura fica em volta do emblema
     circular. Medido: rgb(217,169,40) 0 0 0 1px inset. */
  box-shadow: none;
  background: url("../../public/assets/canal-essencial-emblema.png") center / contain no-repeat;
  font-size: 0;
  line-height: 0;
  color: transparent;
  flex: 0 0 auto;
}

.sidebar .brand-text strong {
  color: #0f2744;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

.sidebar .brand-sub,
.sidebar .brand-text span {
  color: #5b7a8c;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  line-height: 1.4;
}


/* ---------- MENU ---------- */

.sidebar .nav {
  gap: 5px !important;
  align-items: center;
  justify-content: flex-start;
}

.sidebar .nav-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 0;
  padding: 8px 8px;
  border: 1px solid transparent;
  border-bottom: 1px solid transparent;
  border-radius: 12px !important;
  background: transparent;
  color: #1e3a52;
  font-size: 14px;
  font-weight: 700 !important;
  white-space: nowrap;
}

/* Icones: mascara SVG inline (data URI) pintada com currentColor, entao
   o icone acompanha a cor do rotulo - inclusive no estado ativo - sem
   precisar de um segundo arquivo por estado. Mesmo padrao de SVG
   estatico ja usado no projeto; nenhuma biblioteca, nenhum CDN. */
.sidebar .nav-item::before {
  content: "";
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.82;
}

.sidebar .nav-item[data-view="dashboard"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.6'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='3.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='3.5' width='7' height='7' rx='1.6'/><rect x='3.5' y='13.5' width='7' height='7' rx='1.6'/><rect x='13.5' y='13.5' width='7' height='7' rx='1.6'/></svg>");
}

.sidebar .nav-item[data-view="empresas"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5V5.2A1.2 1.2 0 0 1 5.2 4h7.6A1.2 1.2 0 0 1 14 5.2V20.5'/><path d='M14 9.5h4.8A1.2 1.2 0 0 1 20 10.7V20.5'/><path d='M2.6 20.5h18.8'/><path d='M7 7.6h1.4M10.6 7.6H12M7 11.2h1.4M10.6 11.2H12M7 14.8h1.4M10.6 14.8H12M16.6 13h1.2M16.6 16.4h1.2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20.5V5.2A1.2 1.2 0 0 1 5.2 4h7.6A1.2 1.2 0 0 1 14 5.2V20.5'/><path d='M14 9.5h4.8A1.2 1.2 0 0 1 20 10.7V20.5'/><path d='M2.6 20.5h18.8'/><path d='M7 7.6h1.4M10.6 7.6H12M7 11.2h1.4M10.6 11.2H12M7 14.8h1.4M10.6 14.8H12M16.6 13h1.2M16.6 16.4h1.2'/></svg>");
}

.sidebar .nav-item[data-view="relatorios"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 20V13'/><path d='M9.5 20V4.5'/><path d='M14.5 20V9'/><path d='M19.5 20V6.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M4.5 20V13'/><path d='M9.5 20V4.5'/><path d='M14.5 20V9'/><path d='M19.5 20V6.5'/></svg>");
}

.sidebar .nav-item[data-view="activity"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12h4l2.5-6.5 4.5 13 2.5-6.5h5.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M2.5 12h4l2.5-6.5 4.5 13 2.5-6.5h5.5'/></svg>");
}

.sidebar .nav-item[data-view="labTools"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 3h5'/><path d='M10.5 3v6.2L5.4 18a2 2 0 0 0 1.7 3h9.8a2 2 0 0 0 1.7-3l-5.1-8.8V3'/><path d='M7.6 14.5h8.8'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M9.5 3h5'/><path d='M10.5 3v6.2L5.4 18a2 2 0 0 0 1.7 3h9.8a2 2 0 0 0 1.7-3l-5.1-8.8V3'/><path d='M7.6 14.5h8.8'/></svg>");
}

.sidebar .nav-item[data-view="configuracoes"]::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.1'/><path d='M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.8 1.8M7.3 16.7l-1.8 1.8M18.5 18.5l-1.8-1.8M7.3 7.3 5.5 5.5'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='3.1'/><path d='M12 2.8v2.6M12 18.6v2.6M21.2 12h-2.6M5.4 12H2.8M18.5 5.5l-1.8 1.8M7.3 16.7l-1.8 1.8M18.5 18.5l-1.8-1.8M7.3 7.3 5.5 5.5'/></svg>");
}

.sidebar .nav-item:hover {
  background: #f4f7fa;
  color: #0f2744;
  transform: none;
}

/* A pill ativa da referencia e CLARA com texto azul-marinho. A regra
   antiga pinta o ativo com gradiente azul solido usando !important, por
   isso esta precisa de !important tambem - sem ele a tela continuaria
   com o ativo azul e nenhum teste de presenca de regra perceberia. */
.sidebar .nav-item.is-active,
.sidebar .nav-item[aria-current="page"] {
  background: #eff5fb !important;
  color: #0f2744 !important;
  border-color: #dbe7f5 !important;
  border-bottom-color: #dbe7f5 !important;
  box-shadow: none !important;
}

.sidebar .nav-item.is-active::before {
  opacity: 1;
}

.sidebar .nav-item:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}


/* ---------- BADGES ---------- */

.sidebar .sidebar-footer {
  gap: 8px;
  margin-left: auto;
  align-items: center;
}

.sidebar .badge,
.sidebar .badge-muted {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #dfe6ec;
  color: #33566b;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0;
  white-space: nowrap;
}

.sidebar .badge::before {
  content: "";
  width: 14px;
  height: 14px;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
  opacity: 0.75;
}

.sidebar .sidebar-footer .badge:not(.badge-muted)::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 4.6 5.6v5.6c0 4.4 3.1 8.3 7.4 9.9 4.3-1.6 7.4-5.5 7.4-9.9V5.6z'/><path d='M9.2 12.1l2 2 3.6-3.9'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2.8 4.6 5.6v5.6c0 4.4 3.1 8.3 7.4 9.9 4.3-1.6 7.4-5.5 7.4-9.9V5.6z'/><path d='M9.2 12.1l2 2 3.6-3.9'/></svg>");
}

.sidebar .sidebar-footer .badge-muted::before {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.8' y='4.2' width='18.4' height='12' rx='1.8'/><path d='M8.6 20h6.8'/><path d='M12 16.2V20'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'><rect x='2.8' y='4.2' width='18.4' height='12' rx='1.8'/><path d='M8.6 20h6.8'/><path d='M12 16.2V20'/></svg>");
}


/* ---------- RESPONSIVO ---------- */

/* Medido: com a composicao aprovada, uma linha exige ~1410px. Acima
   disso o cabecalho e uma faixa unica, como na referencia. Abaixo, os
   badges descem para a segunda linha - que ja e o comportamento
   historico deste header (hoje ele quebra em 1366). Nenhum item some,
   nao ha overflow e nao ha menu novo inventado. */
@media (max-width: 1440px) {
  .sidebar {
    margin: 12px 10px;
    padding: 24px 14px 16px;
    gap: 10px;
  }

  .sidebar .nav {
    gap: 4px !important;
  }

  .sidebar .nav-item {
    padding: 8px 6px;
  }
}

@media (max-width: 1120px) {
  .sidebar .sidebar-footer {
    margin-left: 0;
  }
}

@media (max-width: 760px) {
  .sidebar {
    margin: 8px;
    padding: 22px 14px 14px;
    align-items: flex-start;
  }

  /* Em tela estreita os badges precisam quebrar o texto. Sem isto o
     nowrap dos dois pills soma 435px e estende o documento alem do
     viewport - medido em 420px: scrollWidth 459 x clientWidth 420.
     Antes da D25 o badge nao tinha white-space e ja quebrava. */
  .sidebar .sidebar-footer {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .sidebar .badge,
  .sidebar .badge-muted {
    white-space: normal;
    max-width: 100%;
  }

  .sidebar::before {
    left: 14px;
  }

  .sidebar::after {
    left: 92px;
  }
}

/* ================================================================== */
/* D25-HEADER-CSS-FIM                                                  */
/* ================================================================== */

/* ================================================================== */
/* D26-VISUAL-CSS-INICIO                                               */
/* ================================================================== */

/* D26 - PADRONIZACAO VISUAL DAS 9 TELAS APROVADAS.
   Empresas, Teste da Automacao, Usuarios, Mensagens de E-mail,
   Pacotes de Modelos, Automacao por Modelo, Modelos Configuraveis,
   Activity e Historico de Relatorios.

   POSICAO NO ARQUIVO, e ela NAO e estetica. O bloco entra depois do
   fechamento do bloco do cabecalho global e ANTES do primeiro bloco
   posterior. Tres suites historicas fatiam o arquivo "de um marco ate
   o FIM" e cobram escopo dentro da fatia; um bloco no fim do arquivo
   cairia dentro das tres. Nenhum comentario daqui pode citar por
   extenso o nome de um marco posterior: indexOf acha a PRIMEIRA
   ocorrencia e deslocaria a fatia alheia para dentro deste bloco.

   ESCOPO. Toda regra nasce de uma raiz de tela. Nada de `.card`,
   `.panel`, `.btn`, `.badge`, `input` ou `select` nus: essas classes
   sao do lab inteiro e alcancariam telas fora da D26. As nove raizes:

     #panel .panel-section:not([data-empresa-slug])   Empresas
     .empresas-premium-screen                          Empresas (shell)
     .usuarios-screen                                  Usuarios
     .activity-screen                                  Activity
     .d23-msg-root                                     Mensagens
     [data-mdl-root] / .d23-pac-root                   Pacotes
     [data-a54e-root]                                  Automacao/Modelo
     [data-rmod-root]                                  Modelos Config.
     [data-atx-root]                                   Teste Automacao
     [data-d20-historico]                              Historico

   !important. O arquivo pinta todo <button> com !important e os
   blocos historicos ja usam !important nas mesmas propriedades. Sem
   ele nada aqui vence. Onde a regra concorre com bloco POSTERIOR no
   arquivo, a especificidade daqui e maior de proposito - entre
   declaracoes !important quem ganha e a especificidade, nao a ordem.

   O QUE ESTE BLOCO NAO FAZ: nao declara @page, nao pinta body nem
   .app, nao toca .topbar, .sidebar nem .nav-item, nao cria classe
   nova, nao move no do DOM. */

/* ---------------------------------------------------------------- */
/* 1. TOKENS - locais, nunca em :root                                */
/* ---------------------------------------------------------------- */

#panel .panel-section:not([data-empresa-slug]),
.empresas-premium-screen,
.usuarios-screen,
.activity-screen,
.d23-msg-root,
[data-mdl-root],
.d23-pac-root,
[data-a54e-root],
[data-rmod-root],
[data-atx-root],
[data-d20-historico] {
  --d26-superficie: #ffffff;
  --d26-fundo: #f7f9fb;
  --d26-fundo-th: #f1f5f9;
  --d26-borda: rgba(15, 23, 42, 0.10);
  --d26-borda-forte: rgba(15, 23, 42, 0.16);
  --d26-raio-sm: 8px;
  --d26-raio: 12px;
  --d26-raio-lg: 16px;
  --d26-pill: 999px;
  --d26-sombra: 0 1px 2px rgba(15, 23, 42, 0.04),
                0 4px 12px rgba(15, 23, 42, 0.05);
  --d26-tinta: #0f172a;
  --d26-mudo: #64748b;
  --d26-teal: #0e8a92;
  --d26-teal-escuro: #0b6f76;
  --d26-teal-fraco: rgba(14, 138, 146, 0.32);
}

/* ---------------------------------------------------------------- */
/* 2. SUPERFICIE UNICA                                               */
/* ---------------------------------------------------------------- */

/* Quatro telas tem cartao proprio DENTRO do painel: o resultado sao
   duas molduras brancas concentricas. As referencias mostram uma.
   Aqui o painel externo e achatado SO nessas quatro; nas outras cinco
   o painel E a superficie e continua pintado. `:has()` ja e usado no
   arquivo (por exemplo em #panel:has([data-f7-a6b-...])). */

#panel:has([data-atx-root]),
#panel:has(.d23-msg-root),
#panel:has([data-mdl-root]),
#panel:has([data-rmod-root]) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
}

/* O cartao interno assume a moldura, na escala nova. */
#panel:has([data-atx-root]) > .atx-card,
#panel:has(.d23-msg-root) > .atx-card,
#panel:has([data-mdl-root]) > .atx-card,
#panel:has([data-rmod-root]) > .atx-card {
  border-radius: var(--d26-raio-lg) !important;
  border: 1px solid var(--d26-borda) !important;
  box-shadow: var(--d26-sombra) !important;
  background: var(--d26-superficie) !important;
  padding: 22px 24px !important;
}

#panel:has([data-mdl-root]) > .atx-card + .atx-card {
  margin-top: 18px;
}

/* ---------------------------------------------------------------- */
/* 3. TIPOGRAFIA DE SECAO                                            */
/* ---------------------------------------------------------------- */

.d23-msg-root > h2,
[data-mdl-root] > h2,
.d23-pac-root > h2,
[data-rmod-root] > h2,
[data-atx-root] > h2 {
  margin: 0 0 6px !important;
  font-size: 1.22rem !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  color: var(--d26-tinta) !important;
}

.d23-msg-root > .atx-hint,
[data-mdl-root] > .atx-hint,
[data-mdl-root] > p,
.d23-pac-root > .atx-hint,
[data-rmod-root] > .atx-hint,
[data-atx-root] > .atx-hint {
  margin: 0 0 14px !important;
  max-width: 96ch;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: var(--d26-mudo) !important;
  opacity: 1 !important;
}

.d23-msg-root h3,
[data-mdl-root] .atx-bloco h3,
.d23-pac-root h3,
[data-rmod-root] .atx-bloco h3,
[data-atx-root] .atx-bloco h3 {
  margin: 0 0 10px !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  color: var(--d26-tinta) !important;
}

/* Empresas e Usuarios: o bloco de acao sobe para a direita do titulo.
   O detalhe da empresa fica de fora pelo :not([data-empresa-slug]). */
#panel .panel-section:not([data-empresa-slug]) > .panel-heading {
  display: flex !important;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

#panel .panel-section:not([data-empresa-slug])
  > .panel-heading .f8-lab-actions:not(.f8-lab-actions-detail) {
  margin: 0 !important;
  flex: 0 0 auto;
}

#panel .panel-section:not([data-empresa-slug]) > .panel-heading h2 {
  margin: 2px 0 4px !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  color: var(--d26-tinta) !important;
}

#panel .panel-section:not([data-empresa-slug]) > .panel-heading .eyebrow {
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  color: var(--d26-mudo) !important;
}

#panel .panel-section:not([data-empresa-slug])
  > .panel-heading .section-description {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--d26-mudo) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------- */
/* 4. BOTOES - um par primario/secundario para as nove telas         */
/* ---------------------------------------------------------------- */

/* base comum */
#panel .panel-section:not([data-empresa-slug]) button,
.empresas-premium-screen button,
.usuarios-screen button,
.d23-msg-root button,
[data-mdl-root] button,
.d23-pac-root button,
[data-rmod-root] button,
[data-atx-root] button,
[data-a54e-root] .a87-btn,
[data-d20-historico] .relatorios-filter {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  min-height: 36px;
  padding: 8px 16px !important;
  border-radius: var(--d26-raio-sm) !important;
  font-size: 0.85rem !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.2 !important;
  text-shadow: none !important;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

/* primario: teal chapado */
#panel .panel-section:not([data-empresa-slug]) .f8-lab-button,
.usuarios-screen .usuarios-actions .f8-lab-button,
.d23-msg-root .d23-btn-primario,
[data-mdl-root] .btn.btn-primary,
.d23-pac-root .d23-btn-primario,
[data-rmod-root] .btn.btn-primary,
[data-atx-root] .btn.btn-primary,
[data-a54e-root] .a87-btn.a87-btn-primary,
[data-d20-historico] .relatorios-filter[data-d20-aplicar] {
  color: #ffffff !important;
  background-color: var(--d26-teal) !important;
  background-image: none !important;
  border: 1px solid var(--d26-teal) !important;
  box-shadow: none !important;
}

#panel .panel-section:not([data-empresa-slug]) .f8-lab-button:hover:not(:disabled),
.usuarios-screen .usuarios-actions .f8-lab-button:hover:not(:disabled),
.d23-msg-root .d23-btn-primario:hover:not(:disabled),
[data-mdl-root] .btn.btn-primary:hover:not(:disabled),
.d23-pac-root .d23-btn-primario:hover:not(:disabled),
[data-rmod-root] .btn.btn-primary:hover:not(:disabled),
[data-atx-root] .btn.btn-primary:hover:not(:disabled),
[data-a54e-root] .a87-btn.a87-btn-primary:hover:not(:disabled),
[data-d20-historico] .relatorios-filter[data-d20-aplicar]:hover:not(:disabled) {
  background-color: var(--d26-teal-escuro) !important;
  border-color: var(--d26-teal-escuro) !important;
  filter: none !important;
}

/* secundario: branco com borda discreta */
#panel .panel-section:not([data-empresa-slug]) button:not(.f8-lab-button),
.empresas-premium-screen .empresas-areas-action,
.usuarios-screen .usuarios-actions button:not(.f8-lab-button),
.d23-msg-root .d23-btn:not(.d23-btn-primario),
[data-mdl-root] .btn:not(.btn-primary),
.d23-pac-root .d23-btn:not(.d23-btn-primario),
[data-rmod-root] .btn:not(.btn-primary),
[data-atx-root] .btn:not(.btn-primary),
[data-a54e-root] .a87-btn.a87-btn-secondary,
[data-d20-historico] .relatorios-filter[data-d20-limpar] {
  color: var(--d26-tinta) !important;
  background-color: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda-forte) !important;
  box-shadow: none !important;
}

#panel .panel-section:not([data-empresa-slug])
  button:not(.f8-lab-button):hover:not(:disabled),
.empresas-premium-screen .empresas-areas-action:hover:not(:disabled),
.usuarios-screen .usuarios-actions button:not(.f8-lab-button):hover:not(:disabled),
.d23-msg-root .d23-btn:not(.d23-btn-primario):hover:not(:disabled),
[data-mdl-root] .btn:not(.btn-primary):hover:not(:disabled),
.d23-pac-root .d23-btn:not(.d23-btn-primario):hover:not(:disabled),
[data-rmod-root] .btn:not(.btn-primary):hover:not(:disabled),
[data-atx-root] .btn:not(.btn-primary):hover:not(:disabled),
[data-a54e-root] .a87-btn.a87-btn-secondary:hover:not(:disabled),
[data-d20-historico] .relatorios-filter[data-d20-limpar]:hover:not(:disabled) {
  border-color: var(--d26-teal-fraco) !important;
  background-color: #f8fafc !important;
  filter: none !important;
}

/* mini: mesma pele, escala menor */
.d23-msg-root .atx-btn-mini,
[data-mdl-root] .atx-btn-mini,
.d23-pac-root .atx-btn-mini,
[data-rmod-root] .atx-btn-mini,
[data-atx-root] .atx-btn-mini {
  min-height: 30px;
  padding: 5px 12px !important;
  font-size: 0.79rem !important;
}

/* NEM TODO <button> E UM BOTAO DE ACAO. O cabecalho do acordeao
   "TESTE - QUAL MENSAGEM VENCE?" e um <button> de largura inteira: a
   pele comum acima o centralizava e o encolhia. Medido, e devolvido ao
   comportamento homologado da D23 - faixa inteira, rotulo a esquerda.

   O SELETOR CARREGA UM NIVEL A MAIS DE PROPOSITO. Uma suite homologada
   recorta a regra do cabecalho procurando pelo texto exato do seletor
   dela e lendo o corpo a partir dali. Repetir aquele mesmo texto aqui,
   mais cedo no arquivo, faria a suite ler ESTA regra em vez da dela -
   a mesma armadilha de primeira ocorrencia que vale para marcador de
   bloco, agora com seletor. Pelo mesmo motivo o texto do seletor alheio
   nao aparece nem neste comentario. A especificidade maior tambem e
   proposital: e ela que faz esta regra vencer sem precisar chegar
   depois no arquivo. */
.d23-msg-root .d23-teste-secao .d23-teste-cabecalho {
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center;
  width: 100%;
  min-height: 0;
  padding: 12px 14px !important;
  border-radius: var(--d26-raio) !important;
}

/* desabilitado: legivel, e obviamente desabilitado.
   Antes ficava branco sobre branco na tela de Usuarios. */
#panel .panel-section:not([data-empresa-slug]) button:disabled,
.empresas-premium-screen button:disabled,
.usuarios-screen button:disabled,
.d23-msg-root button:disabled,
[data-mdl-root] button:disabled,
.d23-pac-root button:disabled,
[data-rmod-root] button:disabled,
[data-atx-root] button:disabled,
[data-a54e-root] .a87-btn:disabled,
[data-d20-historico] .relatorios-filter:disabled {
  color: #94a3b8 !important;
  background-color: #f1f5f9 !important;
  background-image: none !important;
  border-color: var(--d26-borda) !important;
  box-shadow: none !important;
  opacity: 1 !important;
  cursor: not-allowed;
}

/* foco visivel em todas as nove */
#panel .panel-section:not([data-empresa-slug]) button:focus-visible,
.empresas-premium-screen button:focus-visible,
.usuarios-screen button:focus-visible,
.d23-msg-root button:focus-visible,
[data-mdl-root] button:focus-visible,
.d23-pac-root button:focus-visible,
[data-rmod-root] button:focus-visible,
[data-atx-root] button:focus-visible,
[data-a54e-root] .a87-btn:focus-visible,
[data-d20-historico] .relatorios-filter:focus-visible {
  outline: 3px solid rgba(14, 138, 146, 0.28);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- */
/* 5. CAMPOS - input e select com a mesma altura                     */
/* ---------------------------------------------------------------- */

#panel .panel-section:not([data-empresa-slug]) .input,
#panel .panel-section:not([data-empresa-slug]) .search-row input,
#panel .panel-section:not([data-empresa-slug]) .search-row select,
.d23-msg-root .input,
[data-mdl-root] .atx-linha input,
[data-mdl-root] .atx-linha select,
[data-mdl-root] .atxc-grade input,
[data-mdl-root] .atxc-grade select,
.d23-pac-root .input,
[data-rmod-root] .atx-linha input,
[data-rmod-root] .atx-linha select,
[data-rmod-root] .atxc-grade input,
[data-rmod-root] .atxc-grade select,
[data-atx-root] .atx-linha input,
[data-atx-root] .atx-linha select,
[data-d20-historico] .relatorios-search {
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: var(--d26-raio-sm) !important;
  border: 1px solid var(--d26-borda-forte) !important;
  background: var(--d26-superficie) !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  color: var(--d26-tinta) !important;
}

#panel .panel-section:not([data-empresa-slug]) .input:focus,
.d23-msg-root .input:focus,
[data-mdl-root] .atx-linha input:focus,
[data-mdl-root] .atx-linha select:focus,
[data-rmod-root] .atx-linha input:focus,
[data-rmod-root] .atx-linha select:focus,
[data-atx-root] .atx-linha input:focus,
[data-atx-root] .atx-linha select:focus,
[data-d20-historico] .relatorios-search:focus {
  outline: none;
  border-color: var(--d26-teal) !important;
  box-shadow: 0 0 0 3px rgba(14, 138, 146, 0.16) !important;
}

/* rotulo de campo */
[data-mdl-root] .atx-linha > label,
[data-mdl-root] .atxc-grade > label,
[data-rmod-root] .atx-linha > label,
[data-rmod-root] .atxc-grade > label,
[data-atx-root] .atx-linha > label {
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  color: var(--d26-mudo) !important;
  gap: 6px;
}

/* barra de filtros: alinhar pela base, nao pelo topo */
[data-mdl-root] > .atx-linha,
[data-rmod-root] > .atx-linha,
[data-atx-root] > .atx-linha {
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

/* ---------------------------------------------------------------- */
/* 6. TABELAS - uma so receita para o grupo                          */
/* ---------------------------------------------------------------- */

.empresas-premium-screen .empresas-areas-admin-table,
.d23-msg-root .d23-tabela,
[data-mdl-root] .atx-tabela,
[data-rmod-root] .atx-tabela,
[data-atx-root] .atx-tabela,
.activity-screen .activity-table,
[data-d20-historico] .relatorios-table {
  width: 100%;
  border-collapse: collapse !important;
  background: var(--d26-superficie) !important;
  font-size: 0.86rem !important;
}

.empresas-premium-screen .empresas-areas-admin-table thead th,
.d23-msg-root .d23-tabela thead th,
[data-mdl-root] .atx-tabela thead th,
[data-rmod-root] .atx-tabela thead th,
[data-atx-root] .atx-tabela thead th,
.activity-screen .activity-table thead th,
[data-d20-historico] .relatorios-table thead th {
  padding: 10px 14px !important;
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  text-align: left;
  white-space: nowrap;
  color: var(--d26-mudo) !important;
  background: var(--d26-fundo-th) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--d26-borda) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.empresas-premium-screen .empresas-areas-admin-table tbody td,
.d23-msg-root .d23-tabela tbody td,
[data-mdl-root] .atx-tabela tbody td,
[data-rmod-root] .atx-tabela tbody td,
[data-atx-root] .atx-tabela tbody td,
.activity-screen .activity-table tbody td,
[data-d20-historico] .relatorios-table tbody td {
  padding: 10px 14px !important;
  vertical-align: middle;
  color: var(--d26-tinta) !important;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--d26-borda) !important;
}

.empresas-premium-screen .empresas-areas-admin-table tbody tr:hover td,
.d23-msg-root .d23-tabela tbody tr:hover td,
[data-mdl-root] .atx-tabela tbody tr:hover td,
[data-rmod-root] .atx-tabela tbody tr:hover td,
[data-atx-root] .atx-tabela tbody tr:hover td,
.activity-screen .activity-table tbody tr:hover td,
[data-d20-historico] .relatorios-table tbody tr:hover td {
  background: var(--d26-fundo) !important;
}

/* A COLUNA DE ACOES NAO QUEBRA EM DUAS LINHAS.
   Medido no PRE: 4 de 12 linhas de Modelos Configuraveis e 1 de 2 de
   Pacotes de Modelos punham o segundo botao embaixo do primeiro. */
/* `display: flex` na celula tiraria o <td> do algoritmo de tabela: a
   coluna deixaria de reservar largura e a linha divisoria pararia antes
   dela. Medido. Por isso a nao-quebra vem de white-space, nao de flex. */
[data-mdl-root] .atx-tabela tbody tr > td:last-child,
[data-rmod-root] .atx-tabela tbody tr > td:last-child {
  white-space: nowrap !important;
  text-align: left;
  width: 1%;
}

/* A celula de acoes de Mensagens JA nasce flex no bloco homologado da
   D23. Aqui so se proibe a quebra - trocar o display seria mexer no
   que ja funciona. */
.d23-msg-root .d23-tabela tbody td.d23-col-acoes {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  gap: 8px;
}

.d23-msg-root .d23-tabela tbody td.d23-col-acoes > button + button,
[data-mdl-root] .atx-tabela tbody tr > td:last-child > button + button,
[data-rmod-root] .atx-tabela tbody tr > td:last-child > button + button {
  margin-left: 8px;
}

/* O selo do nome fica NA MESMA LINHA do nome. Medido no PRE: 8 de 12
   celulas de Modelos Configuraveis e 1 de 2 de Pacotes quebravam. A
   causa era largura de coluna, nao quebra de palavra - por isso a
   correcao e dar medida as colunas, e nao proibir a quebra. */
[data-rmod-root] .atx-tabela th:nth-child(1) { width: 11%; }
[data-rmod-root] .atx-tabela th:nth-child(2) { width: 38%; }
[data-rmod-root] .atx-tabela th:nth-child(3) { width: 22%; }
[data-rmod-root] .atx-tabela th:nth-child(4) { width: 7%; }
[data-rmod-root] .atx-tabela th:nth-child(5),
[data-rmod-root] .atx-tabela th:nth-child(6) { width: 7%; }

[data-rmod-root] .atx-tabela tbody tr > td:nth-child(2),
[data-mdl-root] .atx-tabela tbody tr > td:first-child {
  white-space: normal;
}

[data-rmod-root] .atx-tabela tbody tr > td:nth-child(2) .rmod-pill-padrao,
[data-mdl-root] .atx-tabela tbody tr > td:first-child .fcpm-badge-padrao {
  white-space: nowrap !important;
  vertical-align: middle;
}

/* A tabela larga rola DENTRO do proprio container, nunca cortada.
   A tela de Mensagens ja fazia isso com .d23-tabela-wrap; as outras
   duas eram recortadas por overflow-x:hidden do cartao. */
[data-rmod-root] [data-rmod-lista],
[data-mdl-root] [data-mdl-lista],
[data-atx-root] [data-atx-previa],
[data-atx-root] [data-atx-resultado] {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
}

.d23-msg-root .d23-tabela-wrap,
.activity-screen .activity-table-wrap,
.empresas-premium-screen .empresas-areas-table-wrap {
  overflow-x: auto;
  border-radius: var(--d26-raio) !important;
  border: 1px solid var(--d26-borda) !important;
  background: var(--d26-superficie) !important;
  box-shadow: none !important;
}

[data-rmod-root] .atx-tabela,
[data-mdl-root] .atx-tabela {
  min-width: 860px;
}

/* estado vazio */
.d23-msg-root .atx-vazio,
[data-mdl-root] .atx-vazio,
.d23-pac-root .atx-vazio,
[data-rmod-root] .atx-vazio,
[data-atx-root] .atx-vazio,
.activity-screen .activity-empty {
  padding: 18px 2px !important;
  font-size: 0.88rem !important;
  color: var(--d26-mudo) !important;
  opacity: 1 !important;
}

/* ---------------------------------------------------------------- */
/* 7. PILULAS - uma geometria; as CORES de cada estado nao mudam     */
/* ---------------------------------------------------------------- */

#panel .panel-section:not([data-empresa-slug]) .status-pill,
.empresas-premium-screen .empresas-areas-status,
.usuarios-screen .status-pill,
.activity-screen .status-pill,
.d23-msg-root .d23-badge,
[data-mdl-root] .fcpm-badge-padrao,
[data-mdl-root] .mdl-pill-status,
.d23-pac-root .d23-badge,
[data-rmod-root] .rmod-pill,
[data-d20-historico] .relatorios-status {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 3px 10px !important;
  border-radius: var(--d26-pill) !important;
  font-size: 0.72rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.5 !important;
  white-space: nowrap;
  box-shadow: none !important;
}

/* Status de Pacotes de Modelos. A cor sai do MESMO valor que a tela ja
   exibia; o hook de app.js so deu ao CSS um seletor para ler. As duas
   variantes usam a paleta de estado ja empregada nas outras telas. */
[data-mdl-root] .mdl-pill-status[data-status="ativo"] {
  color: #15803d !important;
  background: #dcfce7 !important;
  border: 1px solid #bbf7d0 !important;
}

[data-mdl-root] .mdl-pill-status[data-status="inativo"] {
  color: #b42318 !important;
  background: #fee2e2 !important;
  border: 1px solid #fecaca !important;
}

[data-mdl-root] .mdl-pill-status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: var(--d26-pill);
  background: currentColor;
}

/* ---------------------------------------------------------------- */
/* 8. KPIs - cartao sobrio, o data-tone continua mandando na cor     */
/* ---------------------------------------------------------------- */

.empresas-premium-screen .empresas-areas-kpi,
.activity-screen .empresas-areas-kpi,
[data-d20-historico] .empresas-areas-kpi {
  position: relative;
  overflow: hidden;
  padding: 16px 18px !important;
  border-radius: var(--d26-raio-lg) !important;
  border: 1px solid var(--d26-borda) !important;
  box-shadow: var(--d26-sombra) !important;
}

/* a bolha decorativa some: e o unico ponto em que os cartoes das
   referencias divergem dos atuais alem da escala */
.empresas-premium-screen .empresas-areas-kpi::after,
.activity-screen .empresas-areas-kpi::after,
[data-d20-historico] .empresas-areas-kpi::after {
  display: none !important;
}

.empresas-premium-screen .empresas-areas-kpi > span,
.activity-screen .empresas-areas-kpi > span,
[data-d20-historico] .empresas-areas-kpi > span {
  font-size: 0.68rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.09em !important;
  text-transform: uppercase;
  color: var(--d26-mudo) !important;
}

.empresas-premium-screen .empresas-areas-kpi > strong,
.activity-screen .empresas-areas-kpi > strong,
[data-d20-historico] .empresas-areas-kpi > strong {
  display: block;
  margin: 4px 0 2px;
  font-size: 1.9rem !important;
  font-weight: 700 !important;
  line-height: 1.1 !important;
  color: var(--d26-tinta) !important;
}

.empresas-premium-screen .empresas-areas-kpi > em,
.activity-screen .empresas-areas-kpi > em,
[data-d20-historico] .empresas-areas-kpi > em {
  font-style: normal;
  font-size: 0.75rem !important;
  color: var(--d26-mudo) !important;
}

/* KPI que ainda nao chegou nao deixa vao */
[data-d20-historico] .relatorios-metrics:empty {
  display: none !important;
}

/* ---------------------------------------------------------------- */
/* 9. EMPRESAS - referencia 01                                       */
/* ---------------------------------------------------------------- */

/* A superficie real da tela e construida pelo enhancer premium; a
   lista original fica escondida. Por isso o recorte e o shell. */

/* Tres botoes de Empresas sao pintados por regra de ID em #panel
   (especificidade 2,0,0, com !important e `background` abreviado, mais
   uma camada de brilho em ::before). Uma regra de classe nao alcanca:
   aqui o seletor carrega o ID de novo, dentro do recorte da tela. */
#panel .panel-section:not([data-empresa-slug]) #f8-nova-empresa,
#panel .panel-section:not([data-empresa-slug]) #empresas-buscar {
  color: #ffffff !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  padding: 8px 16px !important;
  border-radius: var(--d26-raio-sm) !important;
  border: 1px solid var(--d26-teal) !important;
  background: var(--d26-teal) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

#panel .panel-section:not([data-empresa-slug]) #empresas-limpar {
  color: var(--d26-tinta) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  text-shadow: none !important;
  padding: 8px 16px !important;
  border-radius: var(--d26-raio-sm) !important;
  border: 1px solid var(--d26-borda-forte) !important;
  background: var(--d26-superficie) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transform: none !important;
}

#panel .panel-section:not([data-empresa-slug]) #f8-nova-empresa:hover,
#panel .panel-section:not([data-empresa-slug]) #empresas-buscar:hover {
  background: var(--d26-teal-escuro) !important;
  border-color: var(--d26-teal-escuro) !important;
  transform: none !important;
}

#panel .panel-section:not([data-empresa-slug]) #empresas-limpar:hover {
  background: #f8fafc !important;
  border-color: var(--d26-teal-fraco) !important;
  transform: none !important;
}

/* a camada de brilho daqueles tres botoes sai junto */
#panel .panel-section:not([data-empresa-slug]) #f8-nova-empresa::before,
#panel .panel-section:not([data-empresa-slug]) #empresas-buscar::before,
#panel .panel-section:not([data-empresa-slug]) #empresas-limpar::before,
#panel .panel-section:not([data-empresa-slug]) #f8-nova-empresa::after,
#panel .panel-section:not([data-empresa-slug]) #empresas-buscar::after,
#panel .panel-section:not([data-empresa-slug]) #empresas-limpar::after {
  content: none !important;
  display: none !important;
}

#panel .panel-section:not([data-empresa-slug]) .search-row {
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

#panel .panel-section:not([data-empresa-slug]) .search-row .input {
  flex: 1 1 auto;
}

#panel .panel-section:not([data-empresa-slug]) #empresas-status,
#panel .panel-section:not([data-empresa-slug]) #usuarios-status {
  margin: 0 0 12px !important;
  font-size: 0.82rem !important;
  color: var(--d26-mudo) !important;
}

.empresas-premium-screen .empresas-areas-kpis {
  gap: 14px;
  margin-bottom: 14px;
}

/* A faixa de chips deixa de ser caixa com sombra e vira faixa plana. */
.empresas-premium-screen .empresas-areas-tools {
  padding: 0 !important;
  margin: 0 0 12px !important;
  gap: 8px;
  align-items: center;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.empresas-premium-screen .empresas-areas-tools > span {
  font-size: 0.8rem !important;
  color: var(--d26-mudo) !important;
}

.empresas-premium-screen .empresas-areas-chip {
  min-height: 30px;
  padding: 5px 14px !important;
  border-radius: var(--d26-pill) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.empresas-premium-screen .empresas-areas-admin-table tbody td strong {
  font-size: 0.86rem;
  font-weight: 600;
}

.empresas-premium-screen .empresas-areas-admin-table tbody td small {
  display: block;
  margin-top: 1px;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--d26-mudo);
}

#panel .panel-section:not([data-empresa-slug]) .empresas-pager {
  align-items: center;
  gap: 12px;
  margin-top: 14px;
  font-size: 0.82rem;
  color: var(--d26-mudo);
}

/* ---------------------------------------------------------------- */
/* 10. USUARIOS - referencia 03                                      */
/* ---------------------------------------------------------------- */

/* A ultima trilha era minmax(0, auto) e resolvia POR CONTEUDO: no
   cabecalho a palavra "Acoes" media 45px, na linha os quatro botoes
   mediam 363px. O cabecalho e as linhas declaravam a mesma variavel e
   mesmo assim nao se alinhavam. A trilha passa a ter medida propria.
   A declaracao historica de --d12-colunas NAO e editada: e
   redeclarada aqui, mais tarde no arquivo. */

.usuarios-screen,
[data-usuarios-b7b] {
  --d12-colunas: minmax(0, 2.4fr) minmax(0, 1fr) minmax(0, 1.15fr)
                 minmax(438px, 446px);
}

.usuarios-screen .usuarios-linha-com-responsavel,
[data-usuarios-b7b] .usuarios-linha-com-responsavel {
  --d12-colunas: minmax(0, 2.2fr) minmax(0, 0.95fr) minmax(0, 1.05fr)
                 minmax(0, 1.1fr) minmax(438px, 446px);
}

/* `overflow: hidden` daria o canto arredondado, mas CORTA a ultima
   acao quando a grade nao cabe - medido em 1440 e em 420. A moldura
   rola, entao nenhum controle fica inalcancavel. */
.usuarios-screen .usuarios-list {
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio) !important;
  background: var(--d26-superficie) !important;
  box-shadow: none !important;
  overflow-x: auto;
  overflow-y: visible;
  gap: 0 !important;
}

.usuarios-screen .usuarios-tabela-head {
  padding: 10px 16px !important;
  background: var(--d26-fundo-th) !important;
  background-image: none !important;
  border: 0 !important;
  border-bottom: 1px solid var(--d26-borda) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.usuarios-screen .usuarios-tabela-head [role="columnheader"] {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase !important;
  color: var(--d26-mudo) !important;
}

/* A LINHA DEIXA DE SER CARTAO.
   Vencedores medidos no PRE: .dashboard-card/.card (raio 22, sombra,
   padding 20) e article.company.card (border-left teal). Os dois usam
   !important, entao aqui a especificidade e maior de proposito. */
.usuarios-screen article.company.card.usuarios-card {
  padding: 12px 16px !important;
  margin: 0 !important;
  border: 0 !important;
  border-left: 0 !important;
  border-bottom: 1px solid var(--d26-borda) !important;
  border-radius: 0 !important;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  box-shadow: none !important;
  transform: none !important;
  /* `.card` traz overflow:hidden. Na linha isso CORTA a ultima acao
     quando o nome do botao e mais longo (medido: "Reset senha" na
     linha do proprio usuario). Quem rola e a moldura da lista. */
  overflow: visible !important;
}

.usuarios-screen article.company.card.usuarios-card:last-child {
  border-bottom: 0 !important;
}

.usuarios-screen article.company.card.usuarios-card:hover {
  background: var(--d26-fundo) !important;
  transform: none !important;
  box-shadow: none !important;
}

.usuarios-screen .usuarios-cell-usuario h3 {
  margin: 0 0 2px !important;
  font-size: 0.9rem !important;
  font-weight: 600 !important;
  color: var(--d26-tinta) !important;
}

.usuarios-screen .usuarios-meta {
  margin: 0 !important;
  font-size: 0.76rem !important;
  color: var(--d26-mudo) !important;
}

.usuarios-screen .usuarios-cell-papel,
.usuarios-screen .usuarios-cell-responsavel {
  font-size: 0.84rem !important;
  color: var(--d26-tinta) !important;
}

.usuarios-screen .usuarios-self-note {
  margin-top: 4px;
  padding: 2px 8px !important;
  border-radius: var(--d26-pill) !important;
  font-size: 0.68rem !important;
  font-weight: 600 !important;
}

.usuarios-screen .usuarios-actions {
  display: flex !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start;
  gap: 8px;
}

.usuarios-screen .usuarios-actions button {
  min-height: 32px;
  padding: 6px 12px !important;
  font-size: 0.79rem !important;
  white-space: nowrap;
}

/* ---------------------------------------------------------------- */
/* 11. ACTIVITY - referencia 08                                      */
/* ---------------------------------------------------------------- */

.activity-screen .section-header {
  padding: 18px 20px !important;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio-lg) !important;
  box-shadow: var(--d26-sombra) !important;
}

.activity-screen .section-header h2 {
  margin: 2px 0 4px !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  color: var(--d26-tinta) !important;
}

.activity-screen .section-kicker {
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  color: var(--d26-mudo) !important;
}

.activity-screen .section-description {
  margin: 0 !important;
  font-size: 0.9rem !important;
  color: var(--d26-mudo) !important;
  opacity: 1 !important;
}

.activity-screen .activity-safety-note {
  font-size: 0.84rem !important;
}

.activity-screen .activity-kpis {
  gap: 14px;
}

/* faixa plana de filtros, como na referencia */
.activity-screen .activity-toolbar {
  padding: 0 !important;
  margin: 14px 0 !important;
  gap: 8px;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.activity-screen .activity-filter {
  min-height: 30px;
  padding: 5px 14px !important;
  border-radius: var(--d26-pill) !important;
  font-size: 0.8rem !important;
  font-weight: 600 !important;
  box-shadow: none !important;
}

.activity-screen .activity-table-card {
  padding: 0 !important;
  overflow: hidden;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio-lg) !important;
  box-shadow: var(--d26-sombra) !important;
}

.activity-screen .activity-table-header {
  padding: 16px 18px 10px !important;
  border: 0 !important;
  background: transparent !important;
}

.activity-screen .activity-table-header h3 {
  margin: 0 0 2px !important;
  font-size: 0.98rem !important;
  font-weight: 700 !important;
  color: var(--d26-tinta) !important;
}

.activity-screen .activity-result-count {
  padding: 0 18px 10px !important;
  border: 0 !important;
  background: transparent !important;
  font-size: 0.78rem !important;
  color: var(--d26-mudo) !important;
}

.activity-screen .activity-table-wrap {
  border: 0 !important;
  border-top: 1px solid var(--d26-borda) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.activity-screen .activity-empty {
  padding: 24px 18px !important;
  text-align: center;
}

/* ---------------------------------------------------------------- */
/* 12. TESTE DA AUTOMACAO - referencia 02                            */
/* ---------------------------------------------------------------- */

[data-atx-root] .atx-bloco + .atx-bloco {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--d26-borda);
}

[data-atx-root] .atx-linha > label {
  min-width: 200px;
}

[data-atx-root] .atx-status:not(:empty) {
  margin: 12px 0 0;
  font-size: 0.86rem;
}

/* O bloco da "Mensagem adotada" e homologado e NAO e tocado aqui. */

/* ---------------------------------------------------------------- */
/* 13. HISTORICO DE RELATORIOS - referencia 09                       */
/* ---------------------------------------------------------------- */

/* A ordem visual (KPIs acima dos filtros) JA existe no arquivo por
   `order` nos filhos do flex. Medido no PRE: nada a fazer aqui. */

[data-d20-historico] .relatorios-hero {
  padding: 18px 20px !important;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio-lg) !important;
  box-shadow: var(--d26-sombra) !important;
}

[data-d20-historico] .relatorios-hero h2 {
  margin: 2px 0 6px !important;
  font-size: 1.22rem !important;
  font-weight: 700 !important;
  color: var(--d26-tinta) !important;
}

[data-d20-historico] .relatorios-eyebrow {
  font-size: 0.7rem !important;
  letter-spacing: 0.10em !important;
  color: var(--d26-mudo) !important;
}

[data-d20-historico] .relatorios-subtitle {
  margin: 0 !important;
  max-width: 96ch;
  font-size: 0.9rem !important;
  color: var(--d26-mudo) !important;
  opacity: 1 !important;
}

[data-d20-historico] .relatorios-toolbar {
  padding: 16px 18px !important;
  gap: 12px;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio-lg) !important;
  box-shadow: var(--d26-sombra) !important;
}

[data-d20-historico] .relatorios-search-wrap > span {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.07em !important;
  text-transform: uppercase;
  color: var(--d26-mudo) !important;
}

[data-d20-historico] .relatorios-panel {
  padding: 0 !important;
  overflow: hidden;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  border: 1px solid var(--d26-borda) !important;
  border-radius: var(--d26-raio-lg) !important;
  box-shadow: var(--d26-sombra) !important;
}

[data-d20-historico] .relatorios-panel-head {
  padding: 16px 18px 12px !important;
  border: 0 !important;
  background: transparent !important;
}

[data-d20-historico] .relatorios-metrics {
  gap: 14px;
}

/* ---------------------------------------------------------------- */
/* 14. AUTOMACAO POR MODELO - referencia 06                          */
/* ---------------------------------------------------------------- */

/* Medido: a tela ja E a referencia. O unico desvio era o botao
   primario, que carregava o gradiente antigo enquanto as outras oito
   telas passavam ao teal chapado - e ele ja entrou na secao 4.
   Menor patch inclui patch nenhum: nada mais e alterado aqui. */

/* ---------------------------------------------------------------- */
/* 15. RESPONSIVO                                                    */
/* ---------------------------------------------------------------- */

@media (max-width: 1180px) {
  .usuarios-screen,
  [data-usuarios-b7b] {
    --d12-colunas: minmax(0, 2.2fr) minmax(0, 1fr) minmax(0, 1fr)
                   minmax(438px, 446px);
  }
  .usuarios-screen .usuarios-linha-com-responsavel,
  [data-usuarios-b7b] .usuarios-linha-com-responsavel {
    --d12-colunas: minmax(0, 2fr) minmax(0, 0.9fr) minmax(0, 1fr)
                   minmax(0, 1fr) minmax(438px, 446px);
  }
}

@media (max-width: 900px) {
  #panel .panel-section:not([data-empresa-slug]) > .panel-heading {
    flex-direction: column;
    gap: 10px;
  }
  #panel .panel-section:not([data-empresa-slug]) .search-row {
    flex-wrap: wrap;
  }
  [data-mdl-root] > .atx-linha,
  [data-rmod-root] > .atx-linha,
  [data-atx-root] > .atx-linha {
    gap: 10px;
  }
  .usuarios-screen .usuarios-list {
    overflow-x: auto;
  }
}

@media (max-width: 640px) {
  #panel:has([data-atx-root]) > .atx-card,
  #panel:has(.d23-msg-root) > .atx-card,
  #panel:has([data-mdl-root]) > .atx-card,
  #panel:has([data-rmod-root]) > .atx-card {
    padding: 16px 14px !important;
  }
  .empresas-premium-screen .empresas-areas-kpis,
  .activity-screen .activity-kpis,
  [data-d20-historico] .relatorios-metrics {
    gap: 10px;
  }
  .empresas-premium-screen .empresas-areas-kpi > strong,
  .activity-screen .empresas-areas-kpi > strong,
  [data-d20-historico] .empresas-areas-kpi > strong {
    font-size: 1.55rem !important;
  }
}

/* ================================================================== */
/* D26-VISUAL-CSS-FIM                                                  */
/* ================================================================== */


/* ================================================================== */
/* LOGIN-VISUAL-CSS-INICIO                                             */
/* ================================================================== */

/* REDESENHO VISUAL DA TELA DE LOGIN ADMINISTRATIVA. CSS puro.

   POSICAO NO ARQUIVO, e ela NAO e estetica. Tres suites homologadas
   fatiam este arquivo de um marco proprio ate o FIM DO ARQUIVO e
   cobram escopo dentro da fatia; um bloco colado no fim cairia dentro
   das tres. Outras duas exigem que tudo ANTES da ancora historica do
   campo RH seja identico ao PRE, o que proibe editar o bloco original
   do login la em cima. Sobra exatamente esta janela. Pelo mesmo
   motivo, nenhum comentario daqui repete por extenso o nome de um
   marco alheio: indexOf acha a PRIMEIRA ocorrencia e deslocaria a
   fatia dos outros para ca.

   ESCOPO. Toda regra nasce de .f51-auth-, a raiz exclusiva da tela de
   login. Nada de body, .app, .input, button ou .card nus: essas
   classes sao do lab inteiro e vazariam para telas homologadas.

   O !important aparece so onde o projeto ja usa !important global e
   me obrigaria a perder: as regras que pintam todo button de teal.

   O bloco original do login continua no arquivo, intocado; estas
   regras vem depois e prevalecem por ordem em igualdade de peso. */


/* ---------- SUPERFICIE DA PAGINA ---------- */

/* Fundo claro e frio, com duas iluminacoes muito discretas: teal a
   esquerda, dourado no alto a direita. Sem cor saturada. */
.f51-auth-root {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 100vh;
  min-height: 100dvh;
  padding: clamp(12px, 1.9vw, 26px);
  overflow-y: auto;
  overflow-x: hidden;
  background:
    radial-gradient(78% 62% at 2% 16%, rgba(47, 159, 166, 0.13), transparent 62%),
    radial-gradient(52% 44% at 98% 2%, rgba(200, 162, 74, 0.13), transparent 64%),
    linear-gradient(168deg, #fdfefe 0%, #f5f9fb 46%, #eef4f8 100%);
  color: #33506b;
}


/* ---------- MOLDURA E ARCOS DECORATIVOS ---------- */

/* Camada puramente decorativa: fica atras de tudo, nao recebe clique e
   nao cria rolagem horizontal. Os arcos sao aneis de gradiente, nao
   imagem: nenhum asset novo entra por causa deles. */
.f51-auth-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle 250px at -30px 70px,
      rgba(47, 159, 166, 0) 0 206px,
      rgba(47, 159, 166, 0.30) 208px 211px,
      rgba(47, 159, 166, 0) 213px),
    radial-gradient(circle 150px at calc(100% - 132px) -34px,
      rgba(200, 162, 74, 0) 0 106px,
      rgba(200, 162, 74, 0.32) 108px 111px,
      rgba(200, 162, 74, 0) 113px),
    radial-gradient(circle 380px at calc(100% + 54px) calc(100% + 36px),
      rgba(35, 110, 170, 0) 0 314px,
      rgba(35, 110, 170, 0.17) 316px 320px,
      rgba(35, 110, 170, 0) 322px);
}

/* A moldura fina proxima da borda da viewport. */
.f51-auth-decor::before {
  content: "";
  position: absolute;
  inset: clamp(8px, 1.1vw, 18px);
  border: 1px solid rgba(150, 176, 198, 0.34);
  border-radius: clamp(14px, 1.6vw, 24px);
}


/* ---------- TOPO: MARCA E SELO ---------- */

.f51-auth-topo {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(2px, 0.8vw, 10px) clamp(2px, 1.4vw, 18px) 0;
}

/* Marca real do projeto, servida pelo mesmo caminho de asset que o
   cabecalho global ja usa. Entra por background para nao depender de
   um src relativo ao documento. */
.f51-auth-marca {
  flex: 0 0 auto;
  width: clamp(120px, 12vw, 144px);
  height: clamp(80px, 8vw, 96px);
  background:
    url("../../public/assets/canal-essencial-logo.png")
    left center / contain no-repeat;
}

.f51-auth-selo {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  padding: 7px 15px;
  border: 1px solid #e3eaf0;
  border-radius: 999px;
  background: #ffffff;
  color: #5c748c;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.3;
  box-shadow: 0 1px 2px rgba(18, 58, 92, 0.05);
}


/* ---------- CHAMADA INSTITUCIONAL ---------- */

.f51-auth-chamada {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1180px;
  margin: clamp(14px, 2.6vh, 28px) auto 0;
  padding: 0 clamp(2px, 1.4vw, 18px);
}

.f51-auth-chamada-titulo {
  max-width: 26ch;
  margin: 0;
  color: #2c4d68;
  font-size: clamp(19px, 2.3vw, 25px);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.28;
}

.f51-auth-chamada-sub {
  margin: 8px 0 0;
  color: #8297ab;
  font-size: clamp(13px, 1.4vw, 15px);
  font-weight: 400;
  line-height: 1.5;
}


/* ---------- CARD ---------- */

/* margin auto num item de flex-column absorve a folga acima e abaixo:
   o card fica equilibrado no espaco que sobra, sem coordenada fixa. */
.f51-auth-card {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: min(100%, 424px);
  margin: auto;
  padding: clamp(22px, 2.7vw, 28px) clamp(22px, 3vw, 32px)
    clamp(18px, 2.2vw, 22px);
  border: 1px solid rgba(220, 230, 238, 0.9);
  border-radius: 22px;
  background: #ffffff;
  box-shadow:
    0 1px 2px rgba(18, 58, 92, 0.04),
    0 18px 40px -18px rgba(18, 58, 92, 0.18),
    0 44px 92px -52px rgba(18, 58, 92, 0.30);
  overflow: hidden;
}

/* Linha decorativa do topo do card: teal, um segmento dourado curto e o
   restante em cinza-azulado quase branco. Fina, nunca barra. */
.f51-auth-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    #2f9fa6 0 26%,
    #c8a24a 26% 36%,
    #e7eef4 36% 100%);
}

/* O paragrafo da marca perde o texto no markup e passa a hospedar o
   emblema real, centralizado no alto do card. */
.f51-auth-brand {
  width: 48px;
  height: 48px;
  margin: 0 auto 10px;
  background:
    url("../../public/assets/canal-essencial-emblema.png")
    center / contain no-repeat;
  font-size: 0;
  letter-spacing: normal;
}

.f51-auth-title {
  margin: 0;
  color: #0f2f4c;
  font-size: clamp(22px, 2.6vw, 27px);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
}

.f51-auth-description {
  margin: 8px 0 16px;
  color: #5c748c;
  font-size: 14px;
  line-height: 1.55;
  text-align: center;
}


/* ---------- CAMPOS ---------- */

.f51-auth-form {
  gap: 15px;
}

.f51-auth-field {
  gap: 7px;
}

.f51-auth-label {
  color: #24455f;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.f51-auth-card .f51-auth-input {
  width: 100%;
  min-height: 46px;
  padding: 11px 14px;
  border: 1px solid #dde5ec;
  border-radius: 11px;
  background: #fbfcfe;
  color: #17364f;
  font-size: 14px;
  transition:
    border-color 0.16s ease,
    box-shadow 0.16s ease,
    background-color 0.16s ease;
}

.f51-auth-card .f51-auth-input::placeholder {
  color: #a0b2c2;
}

.f51-auth-card .f51-auth-input:hover {
  border-color: #cfdce7;
}

/* Foco no teal institucional, discreto mas visivel. */
.f51-auth-card .f51-auth-input:focus,
.f51-auth-card .f51-auth-input:focus-visible {
  border-color: #2f9fa6;
  background: #ffffff;
  box-shadow: 0 0 0 3px rgba(47, 159, 166, 0.17);
  outline: none;
}


/* ---------- BOTAO ---------- */

/* !important aqui e obrigatorio: o projeto pinta TODO button de teal
   com !important em regra global. Sem ele o botao do login nao seria
   navy. */
.f51-auth-card .f51-auth-submit {
  width: 100%;
  min-height: 48px;
  margin-top: 6px;
  border: 1px solid #123a5c !important;
  border-radius: 12px !important;
  background: linear-gradient(180deg, #1a4a71 0%, #123a5c 100%) !important;
  color: #ffffff !important;
  font-size: 15px;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  box-shadow: 0 10px 22px -12px rgba(18, 58, 92, 0.55);
  cursor: pointer;
  transition:
    background-color 0.16s ease,
    box-shadow 0.16s ease;
}

.f51-auth-card .f51-auth-submit:hover {
  background: linear-gradient(180deg, #1d5480 0%, #143f63 100%) !important;
  box-shadow: 0 14px 26px -12px rgba(18, 58, 92, 0.60);
  transform: none;
}

.f51-auth-card .f51-auth-submit:focus-visible {
  outline: 3px solid rgba(47, 159, 166, 0.45);
  outline-offset: 2px;
}

.f51-auth-card .f51-auth-submit:disabled {
  opacity: 0.62;
  cursor: default;
}

.f51-auth-status {
  min-height: 20px;
  margin: 0;
  color: #5c748c;
  font-size: 13px;
  font-weight: 500 !important;
  letter-spacing: normal;
  line-height: 1.45;
  text-align: center;
}

.f51-auth-status[data-kind="error"] {
  color: #b4232a;
}

.f51-auth-status[data-kind="success"] {
  color: #1c7a4a;
}


/* ---------- INFORMACOES DO LABORATORIO ---------- */

.f51-auth-lab {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef2f6;
}

.f51-auth-lab-destaque {
  margin: 0;
  color: #24455f;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.5;
}

.f51-auth-lab-lista {
  display: grid;
  gap: 7px;
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
}

.f51-auth-lab-item {
  position: relative;
  padding-left: 16px;
  color: #7089a0;
  font-size: 12px;
  line-height: 1.5;
}

/* Marcador dourado discreto. */
.f51-auth-lab-item::before {
  content: "";
  position: absolute;
  top: 7px;
  left: 2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #c8a24a;
}


/* ---------- RODAPE DE IDENTIFICACAO ---------- */

/* Sai de dentro do card de proposito: na referencia impressa ele
   encosta no botao, e sobreposicao nao e design pretendido. */
.f51-auth-note {
  position: relative;
  z-index: 1;
  margin: clamp(11px, 1.8vh, 18px) auto 0;
  color: #90a4b6;
  font-size: 12px;
  letter-spacing: 0.02em;
  line-height: 1.5;
  text-align: center;
}


/* Notebook e tela baixa: a composicao inteira precisa caber sem
   rolagem, entao cada junta cede um pouco. Nenhum elemento sai. */
@media (max-height: 900px) {
  .f51-auth-root {
    padding: clamp(10px, 1.4vw, 18px);
  }

  .f51-auth-marca {
    width: clamp(104px, 10vw, 120px);
    height: clamp(69px, 6.7vw, 80px);
  }

  .f51-auth-chamada {
    margin-top: clamp(10px, 1.6vh, 18px);
  }

  .f51-auth-chamada-titulo {
    font-size: clamp(17px, 1.8vw, 20px);
  }

  .f51-auth-card {
    padding: 20px 26px 18px;
  }

  .f51-auth-brand {
    width: 44px;
    height: 44px;
    margin-bottom: 8px;
  }

  .f51-auth-description {
    margin: 7px 0 14px;
  }

  .f51-auth-form {
    gap: 13px;
  }

  .f51-auth-lab {
    margin-top: 14px;
    padding-top: 12px;
  }

  .f51-auth-note {
    margin-top: clamp(9px, 1.4vh, 14px);
  }
}

/* ---------- RESPONSIVIDADE ---------- */

@media (max-width: 860px) {
  .f51-auth-topo {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .f51-auth-chamada {
    margin-top: clamp(18px, 3vh, 28px);
  }

  .f51-auth-chamada-titulo {
    max-width: none;
    font-size: 20px;
  }
}

@media (max-width: 620px) {
  .f51-auth-root {
    padding: 14px;
  }

  /* Os arcos somem: em tela estreita eles competiriam com o formulario
     sem acrescentar nada. A moldura permanece, mais discreta. */
  .f51-auth-decor {
    background-image: none;
  }

  .f51-auth-decor::before {
    inset: 6px;
    border-radius: 13px;
  }

  .f51-auth-chamada-sub {
    display: none;
  }

  .f51-auth-chamada-titulo {
    font-size: 18px;
  }

  .f51-auth-card {
    width: 100%;
    margin: clamp(18px, 4vh, 30px) auto 0;
    padding: 24px 20px 22px;
    border-radius: 18px;
  }

  .f51-auth-selo {
    padding: 6px 12px;
    font-size: 11px;
  }
}

@media (max-width: 380px) {
  .f51-auth-card {
    padding: 20px 16px 20px;
  }

  .f51-auth-marca {
    width: 96px;
    height: 64px;
  }
}

/* ================================================================== */
/* LOGIN-VISUAL-CSS-FIM                                                */
/* ================================================================== */


/* ================================================================ */
/* AUD-CSS-INICIO                                                   */
/*                                                                  */
/* AUDITORIA - Claude 3.                                            */
/*                                                                  */
/* ESCOPO. Todo seletor daqui nasce de `.activity-screen`. Nada de   */
/* `.card`, `.panel`, `.btn`, `.badge`, `input` ou `select` nus:     */
/* essas classes sao do lab inteiro e alcancariam telas de outras    */
/* frentes.                                                         */
/*                                                                  */
/* HERANCA. `.activity-screen` ja e uma das raizes que declaram os   */
/* tokens `--d26-*`. Eles sao CONSUMIDOS aqui e NUNCA redeclarados:  */
/* redeclarar criaria uma segunda verdade de cor e raio que          */
/* envelheceria sozinha.                                            */
/*                                                                  */
/* O QUE ESTE BLOCO NAO FAZ. Nao declara @page. Nao pinta `body`,    */
/* `.app`, `.topbar`, `.sidebar` nem `.nav-item`. Nao redefine       */
/* `.activity-toolbar`, `.activity-filter`, `.activity-table`,       */
/* `.activity-table-card`, `.activity-table-wrap`, `.activity-empty` */
/* nem `.empresas-areas-kpi`: essas ja estao pintadas pelo bloco     */
/* visual homologado das nove telas, e a Auditoria as reusa de       */
/* proposito para herdar a identidade sem reabri-la.                 */
/*                                                                  */
/* POSICAO. Este bloco entra por ancora, na janela livre entre o fim */
/* do bloco visual do login e o inicio do primeiro bloco posterior.  */
/* Nunca no fim do arquivo: tres suites historicas fatiam o arquivo  */
/* "de um marco ate o FIM" e cobram escopo dentro da fatia.          */
/*                                                                  */
/* !important. O arquivo pinta todo `<button>` com !important, e os  */
/* blocos historicos ja usam !important nas mesmas propriedades. Sem */
/* ele, o que e novo aqui nao vence.                                 */
/* ================================================================ */

/* ---------------------------------------------------------------- */
/* 1. BARRA DE FILTROS                                               */
/* ---------------------------------------------------------------- */

.activity-screen .aud-filtros {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0 16px;
}

.activity-screen .aud-filtros-linha {
  display: flex;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 12px;
}

.activity-screen .aud-campo {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 150px;
  flex: 1 1 150px;
}

.activity-screen .aud-campo > span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--d26-mudo);
}

/* Mesma receita de campo do bloco visual das nove telas, aplicada ao
   componente novo desta tela. Os valores sao os medidos la, nao um
   segundo conjunto. */
.activity-screen .aud-campo input,
.activity-screen .aud-campo select {
  width: 100%;
  min-height: 38px;
  padding: 8px 12px !important;
  border-radius: var(--d26-raio-sm) !important;
  border: 1px solid var(--d26-borda-forte) !important;
  background: var(--d26-superficie) !important;
  background-image: none !important;
  box-shadow: none !important;
  font-size: 0.88rem !important;
  color: var(--d26-tinta) !important;
}

.activity-screen .aud-campo input:focus,
.activity-screen .aud-campo select:focus {
  outline: none;
  border-color: var(--d26-teal) !important;
  box-shadow: 0 0 0 3px rgba(14, 138, 146, 0.16) !important;
}

/* Eixo que o backend nao alimentou continua VISIVEL e desabilitado,
   com o motivo na nota abaixo. Escondido, o operador acreditaria que
   o eixo nao existe. */
.activity-screen .aud-campo input:disabled,
.activity-screen .aud-campo select:disabled {
  color: #94a3b8 !important;
  background: #f1f5f9 !important;
  border-color: var(--d26-borda) !important;
  opacity: 1;
  cursor: not-allowed;
}

.activity-screen .aud-nota {
  margin: 0;
  font-size: 0.78rem;
  line-height: 1.5;
  color: var(--d26-mudo);
}

/* Aplicar e a acao primaria da tela. Sem `background-image: none` o
   gradiente global de <button> continua vencendo e a cor computada
   mente. */
.activity-screen .activity-filter[data-aud-aplicar] {
  color: #ffffff !important;
  background-color: var(--d26-teal) !important;
  background-image: none !important;
  border: 1px solid var(--d26-teal) !important;
  box-shadow: none !important;
}

.activity-screen .activity-filter[data-aud-aplicar]:hover:not(:disabled) {
  background-color: var(--d26-teal-escuro) !important;
  border-color: var(--d26-teal-escuro) !important;
  filter: none !important;
}

/* ---------------------------------------------------------------- */
/* 2. CONFIRMACAO DE EXPORTACAO                                      */
/* ---------------------------------------------------------------- */

.activity-screen .aud-exportacao {
  margin: 0 0 14px;
  padding: 10px 14px;
  border: 1px solid var(--d26-borda);
  border-radius: var(--d26-raio-sm);
  background: var(--d26-fundo);
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--d26-tinta);
  word-break: break-word;
}

.activity-screen .aud-exportacao--ok {
  border-color: var(--d26-teal-fraco);
}

.activity-screen .aud-exportacao--aviso {
  border-color: #fde68a;
  background: #fffbeb;
  color: #92400e;
}

.activity-screen .aud-exportacao--erro {
  border-color: #fecaca;
  background: #fee2e2;
  color: #b42318;
}

/* ---------------------------------------------------------------- */
/* 3. LINHA, AUSENCIA E MARCA DE QUALIDADE                           */
/* ---------------------------------------------------------------- */

.activity-screen [data-aud-linha] {
  cursor: pointer;
}

.activity-screen [data-aud-linha]:focus-visible {
  outline: 3px solid rgba(14, 138, 146, 0.28);
  outline-offset: -3px;
}

/* Ausencia e informacao: ela aparece com nome e em tom apagado, nunca
   como celula vazia nem como zero. */
.activity-screen .aud-ausente {
  color: var(--d26-mudo) !important;
  font-style: italic;
}

/* Discreta e clara: sem cor de alarme e sem icone. O registro legado
   nao e um erro do sistema, e um limite do dado historico. */
.activity-screen .aud-marca-qualidade {
  margin-left: 6px;
  color: var(--d26-mudo) !important;
  background: var(--d26-fundo-th) !important;
  border: 1px solid var(--d26-borda) !important;
}

.activity-screen .activity-filter.aud-ver {
  min-height: 26px;
  padding: 3px 12px !important;
  font-size: 0.75rem !important;
}

/* A coluna de acoes nao pode virar flex: isso tira o <td> do algoritmo
   de tabela. */
.activity-screen .activity-table td:last-child {
  white-space: nowrap !important;
  width: 1%;
}

/* ---------------------------------------------------------------- */
/* 4. PAGINACAO                                                      */
/* ---------------------------------------------------------------- */

.activity-screen .aud-paginacao {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding: 12px 2px 2px;
}

.activity-screen .aud-paginacao:empty {
  display: none;
}

.activity-screen .aud-paginacao-posicao {
  font-size: 0.8rem;
  color: var(--d26-mudo);
}

/* ---------------------------------------------------------------- */
/* 5. DETALHE                                                        */
/* ---------------------------------------------------------------- */

.activity-screen [data-aud-detalhe] {
  margin-top: 18px;
}

.activity-screen .aud-detalhe-bloco {
  padding: 16px 20px;
  border-top: 1px solid var(--d26-borda);
}

.activity-screen .aud-detalhe-bloco:first-child {
  border-top: 0;
}

.activity-screen .aud-detalhe-bloco > h4 {
  margin: 0 0 12px;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--d26-tinta);
}

.activity-screen .aud-campos {
  display: grid;
  grid-template-columns: minmax(150px, 220px) 1fr;
  gap: 8px 18px;
  margin: 0;
}

.activity-screen .aud-campos > dt {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--d26-mudo);
}

.activity-screen .aud-campos > dd {
  margin: 0;
  font-size: 0.86rem;
  color: var(--d26-tinta);
  word-break: break-word;
}

.activity-screen .aud-nota-legado {
  margin: 0 0 12px;
  padding: 8px 12px;
  border: 1px solid var(--d26-borda);
  border-radius: var(--d26-raio-sm);
  background: var(--d26-fundo);
}

/* A tabela de antes/depois reusa a receita de tabela do bloco visual;
   aqui so entra o par obrigatorio de rolagem propria. */
.activity-screen [data-aud-diff] {
  min-width: 520px;
}

/* ---------------------------------------------------------------- */
/* 6. BLOQUEIO - erro e sem permissao                                */
/* ---------------------------------------------------------------- */

.activity-screen [data-aud-bloqueio] .d24-estado {
  margin-top: 4px;
}

.activity-screen [data-aud-bloqueio] .activity-filter {
  margin-top: 12px;
}

/* ---------------------------------------------------------------- */
/* 7. RESPONSIVO                                                     */
/* ---------------------------------------------------------------- */

@media (max-width: 900px) {
  .activity-screen .aud-campo {
    flex: 1 1 100%;
    min-width: 0;
  }

  .activity-screen .aud-paginacao {
    justify-content: space-between;
  }

  .activity-screen .aud-campos {
    grid-template-columns: 1fr;
    gap: 2px 0;
  }

  .activity-screen .aud-campos > dd {
    margin-bottom: 10px;
  }
}

@media (max-width: 640px) {
  .activity-screen .aud-detalhe-bloco {
    padding: 14px 14px;
  }

  .activity-screen .aud-exportacao {
    font-size: 0.78rem;
  }

  .activity-screen .activity-table {
    min-width: 760px;
  }
}
/* AUD-CSS-FIM */

/* ================================================================== */
/* CONTA-SENHA-CSS-INICIO                                              */
/* ================================================================== */

/* Corretivo do overflow horizontal em 420.

   MEDIDO, nao suposto: com um terceiro filho na barra do usuario a
   linha passa a exceder a viewport em 420 (439 x 420). Em 760, 1024
   e 1440 o excesso e zero. A causa e que a barra ja vira largura
   total abaixo de 760, com os filhos afastados pelas pontas, mas sem
   permissao de quebra.

   Uma regra, escopada na propria barra, sem !important, dentro da
   media query que ja existe para ela. O bloco entra ANTES do
   primeiro marco D23 porque tres suites daquela fase fatiam do
   marcador delas ate o fim do arquivo, e uma exige que o arquivo
   termine exatamente onde termina. */

@media (max-width: 760px) {
  .f51-userbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
}

/* CONTA-SENHA-CSS-FIM */

/* ================================================================== */
/* DASHBOARD-PRINT-CORRETIVO-CSS-INICIO                                */
/* ================================================================== */

/* CORRETIVO DE IMPRESSAO DO DASHBOARD.

   POR QUE ESTE BLOCO EXISTE.
   A causa da sobreposicao no papel NAO e altura de conteudo: e
   contabilidade errada de fragmentacao de CSS Grid aninhado no paged
   media do Chromium.

   .d24-resultado e um container Grid, e seus filhos, em ordem, sao
   .dashboard-rico-kpis, .dashboard-rico-grid e o cartao "Protocolos
   recentes" - que NAO pertence a grade dos graficos, e sim a terceira
   linha desta grade externa.

   Ao fragmentar entre folhas, o Chromium posiciona cada linha da
   grade externa pelo offset calculado no layout NAO fragmentado,
   descontando so o block-size ja consumido. Como todo cartao tem
   overflow hidden e break-inside avoid, ele e monolitico: a linha dos
   dois donuts nao cabe no resto da primeira folha e e empurrada
   INTEIRA para a seguinte, deixando uma cauda vazia. A grade interna
   passa a consumir mais do que a propria altura intrinseca, e a grade
   externa nunca recalcula.

   MEDIDO no PDF real: a grade interna cresceu 120,8pt ao fragmentar e
   "Protocolos recentes" foi pintado 121,5pt acima do lugar correto -
   em cima de Empresas e de Tendencia recente. A folha residual sem
   nenhum elemento da aplicacao vem do mesmo descompasso.

   O QUE ESTE BLOCO FAZ.
   So o container que precisa atravessar folhas deixa de ser Grid no
   papel. Um container de bloco contabiliza o tamanho REALMENTE
   consumido por um filho fragmentado, que e a propriedade que falta
   ao Grid. Como bloco nao tem gap, os 12px viram margem no irmao
   seguinte - mesma distancia, mesmo desenho.

   O QUE ESTE BLOCO NAO FAZ. Nao declara @page. Nao toca em overflow,
   break-inside nem page-break. Nao mexe nas duas grades internas: os
   KPIs seguem em 4 colunas e os graficos em 2. Nao limita a lista de
   Empresas nem a de recentes. Nao altera dado nenhum. Nao vale na
   tela: depende do atributo que o Dashboard poe no <body> so durante
   a impressao.

   POR QUE align-items:start SAIU. Ele foi a tentativa anterior, e a
   medicao mostrou que apenas reduzia a area sobreposta pela metade
   (de 112,5pt para 64,5pt de altura) sem eliminar a sobreposicao,
   porque atacava o esticamento e nao a fragmentacao. Com este bloco
   ele nao tem mais efeito sobre o defeito, e sem ele os cartoes de
   uma mesma linha voltam a sair rentes no papel. */

@media print {
  body[data-d24-print="dashboard"] .d24-resultado {
    display: block !important;
  }

  body[data-d24-print="dashboard"] .d24-resultado > * + * {
    margin-top: 12px !important;
  }
}

/* ================================================================== */
/* DASHBOARD-PRINT-CORRETIVO-CSS-FIM                                   */
/* ================================================================== */

/* ================================================================== */
/* D23-VIS-CSS-INICIO                                                  */
/* ================================================================== */

/* Bloco da "Mensagem adotada" no resultado do Teste da Automacao.

   POSICAO NO ARQUIVO, e ela NAO e estetica.

   Duas suites homologadas recortam o CSS a partir do PRIMEIRO marcador de
   abertura delas ate o FIM DO ARQUIVO, e exigem escopo de todo seletor
   que caia dentro:

     teste_d23_frontend 8.3   a partir do bloco D23-ESTILO: tudo em .d23-
     teste_d23_msgind   F11.3 a partir do bloco msgind: .d23-msg-root
     teste_d23_msgind   F11.2 o arquivo TERMINA no marcador do msgind

   Regra .atx-* colocada depois de qualquer um dos dois marcadores cai
   dentro da fatia alheia e reprova por POSICAO, sem que nada de errado
   tenha acontecido — foi o que aconteceu na primeira tentativa deste
   bloco, e a 8.3 acusou. O unico lugar que respeita as tres afirmacoes e
   antes da abertura do bloco D23-ESTILO. Quem mover isto daqui quebra a
   8.3.

   E por isso este comentario NAO escreve os marcadores por extenso: as
   suites procuram o PRIMEIRO indexOf do marcador, e cita-lo aqui moveria
   o inicio da fatia alheia para dentro deste bloco — que foi o segundo
   erro da mesma tentativa. Marcador e endereco, nao vocabulario.

   Toda regra daqui e escopada por .atx-msg. Nada acima foi alterado. */

.atx-msg {
  margin: 12px 0 16px;
  padding: 12px 14px;
  border: 1px solid rgba(127, 127, 127, 0.35);
  border-left: 4px solid #1a7f37;
  border-radius: 6px;
  background: rgba(127, 127, 127, 0.07);
}

.atx-msg-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.75;
}

/* O NOME e a resposta que o Master procura, entao ele e o unico item com
   peso tipografico. Os tres campos abaixo dele sao contexto. */
.atx-msg-nome {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
}

.atx-msg-cartao {
  font-size: 13px;
}

.atx-msg-cartao + .atx-msg-cartao {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px dashed rgba(127, 127, 127, 0.4);
}

.atx-msg-cartao > div {
  margin: 2px 0;
}

.atx-msg-parte {
  margin: 0 0 4px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0.7;
}

/* Valor tecnico: presente para diagnostico, discreto para nao competir
   com o nome. */
.atx-msg-tec {
  margin: 8px 0 0;
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  opacity: 0.65;
  overflow-wrap: anywhere;
}

.atx-msg-aviso {
  margin: 0 0 10px;
  font-size: 13px;
  color: #b26a00;
}

.atx-msg-vazio {
  margin: 0;
  font-size: 13px;
  opacity: 0.7;
}

/* ---- PREVIA EXATA: o assunto e o corpo que sairiam ---- */

.atx-msg-secao {
  margin: 12px 0 0;
}

.atx-msg-rotulo {
  margin: 0 0 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.atx-msg-assunto {
  margin: 0;
  padding: 8px 10px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.35;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  overflow-wrap: anywhere;
}

/* As quebras de linha do corpo sao DADO, e nao formatacao: `pre-wrap` as
   preserva e ainda quebra a linha longa em vez de estourar a largura. O
   elemento e <pre>, e nao <textarea>: leitura, sem campo editavel. */
.atx-msg-corpo {
  margin: 0;
  padding: 10px 12px;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  border: 1px solid rgba(127, 127, 127, 0.3);
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.55);
  max-height: 320px;
  overflow-y: auto;
}

.atx-msg-ausente {
  font-style: italic;
  font-weight: 400;
  opacity: 0.7;
}

/* D23-VIS-CSS-FIM */

/* ================================================================== */
/* D23-ESTILO-INICIO                                                   */
/* ================================================================== */

/* Identidade visual da referencia de Empresas: fundo claro, cards brancos,
   cantos arredondados, teal/azul-petroleo, titulos escuros, bordas e
   sombras discretas.

   POR QUE !important NOS BOTOES. main.css:1996 pinta TODO <button> com
   gradiente teal e cor branca usando !important. Sem !important aqui, um
   botao secundario da D23 herdaria aquele gradiente e ficaria
   indistinguivel do primario — e a hierarquia visual da tela sumiria. Isto
   nao e forca bruta: e a unica forma de responder a uma regra global que ja
   usa !important, e o escopo esta restrito as classes .d23-*.

   Bloco APENDADO no fim do arquivo. Nenhuma regra anterior e alterada. */

/* ---- botoes ---- */

.d23-btn {
  color: #0f3b40 !important;
  background: #ffffff !important;
  border: 1px solid rgba(0, 159, 166, 0.45) !important;
  border-radius: 8px;
  padding: 7px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.d23-btn:hover:not(:disabled) {
  background: rgba(0, 159, 166, 0.08) !important;
  border-color: rgba(0, 159, 166, 0.75) !important;
}

.d23-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.d23-btn-primario {
  color: #ffffff !important;
  background: linear-gradient(135deg, #009fa6, #008892) !important;
  border-color: rgba(0, 136, 146, 0.8) !important;
}

/* ---- hub Configuracoes ---- */

.d23-hub-secao { margin-top: 20px; }

.d23-hub-secao-titulo {
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #0f3b40;
  margin: 0 0 10px;
  opacity: 0.75;
}

.d23-hub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 12px;
}

.d23-hub-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px 16px;
  background: #ffffff;
  border: 1px solid rgba(15, 59, 64, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 59, 64, 0.06);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.d23-hub-card:hover {
  border-color: rgba(0, 159, 166, 0.55);
  box-shadow: 0 3px 10px rgba(0, 159, 166, 0.14);
}

.d23-hub-card-titulo { font-weight: 600; color: #0f3b40; }
.d23-hub-card-desc { font-size: 12.5px; opacity: 0.8; }

/* ---- abas ---- */

.d23-abas {
  display: flex;
  gap: 8px;
  margin: 4px 0 16px;
  flex-wrap: wrap;
}

.d23-aba-ativa {
  color: #ffffff !important;
  background: linear-gradient(135deg, #009fa6, #008892) !important;
  border-color: rgba(0, 136, 146, 0.8) !important;
}

/* ---- linhas de configuracao ---- */

.d23-linha {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 59, 64, 0.12);
  border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15, 59, 64, 0.05);
}

.d23-linha-topo {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.d23-linha-sub { font-size: 12.5px; opacity: 0.8; margin: 2px 0; }
.d23-linha-assunto { font-size: 12.5px; margin: 6px 0; }
.d23-linha-assunto code { word-break: break-word; }

.d23-linha-acoes {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.d23-badge {
  font-size: 11px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid transparent;
  white-space: nowrap;
}

.d23-badge-ativo { background: rgba(26, 127, 55, 0.12); color: #1a7f37; border-color: rgba(26, 127, 55, 0.3); }
.d23-badge-inativo { background: rgba(180, 35, 24, 0.10); color: #b42318; border-color: rgba(180, 35, 24, 0.28); }
.d23-badge-herda { background: rgba(15, 59, 64, 0.08); color: #0f3b40; border-color: rgba(15, 59, 64, 0.2); }
.d23-badge-unitario { background: rgba(0, 159, 166, 0.12); color: #00757c; border-color: rgba(0, 159, 166, 0.3); }
.d23-badge-agrupado { background: rgba(91, 33, 182, 0.10); color: #5b21b6; border-color: rgba(91, 33, 182, 0.25); }
.d23-badge-estimativa { background: rgba(180, 120, 10, 0.12); color: #8a5a00; border-color: rgba(180, 120, 10, 0.3); }
.d23-badge-exata { background: rgba(26, 127, 55, 0.12); color: #1a7f37; border-color: rgba(26, 127, 55, 0.3); }

.d23-aviso {
  font-size: 12.5px;
  margin: 8px 0 0;
  padding: 8px 10px;
  background: rgba(0, 159, 166, 0.07);
  border-left: 3px solid rgba(0, 159, 166, 0.5);
  border-radius: 4px;
}

/* ---- editor ---- */

.d23-editor {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 18px;
  margin-top: 16px;
}

.d23-editor-campos { display: flex; flex-direction: column; gap: 12px; min-width: 0; }

.d23-campo { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }
.d23-campo > span { font-weight: 600; color: #0f3b40; }
.d23-campo .input { width: 100%; box-sizing: border-box; }

.d23-corpo { font-family: ui-monospace, "Cascadia Code", Consolas, monospace; font-size: 13px; line-height: 1.5; }

.d23-contador { font-weight: 400; font-size: 11px; opacity: 0.65; font-style: normal; }
.d23-contador-cheio { color: #b42318; opacity: 1; }

.d23-editor-acoes { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.d23-sujo {
  font-size: 12px;
  color: #8a5a00;
  background: rgba(180, 120, 10, 0.12);
  padding: 2px 9px;
  border-radius: 999px;
}

/* ---- catalogo de variaveis ---- */

.d23-catalogo {
  background: #ffffff;
  border: 1px solid rgba(15, 59, 64, 0.12);
  border-radius: 10px;
  padding: 14px;
  min-width: 0;
}

.d23-catalogo h4 { margin: 0 0 4px; color: #0f3b40; font-size: 14px; }
.d23-catalogo .input { width: 100%; box-sizing: border-box; margin-bottom: 10px; }

.d23-var-lista { list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto; }

.d23-var {
  padding: 9px 0;
  border-bottom: 1px solid rgba(15, 59, 64, 0.10);
}
.d23-var:last-child { border-bottom: none; }

/* Variavel indisponivel no cenario continua VISIVEL, apenas esmaecida: some
   la e o usuario procuraria uma variavel que "sumiu" sem explicacao. */
.d23-var-indisponivel { opacity: 0.55; }

.d23-var-topo { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.d23-var-nome { font-size: 12.5px; color: #00757c; word-break: break-all; }
.d23-var-disp { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.d23-var-disp-sim { background: rgba(26, 127, 55, 0.12); color: #1a7f37; }
.d23-var-disp-condicional { background: rgba(180, 120, 10, 0.12); color: #8a5a00; }
.d23-var-disp-nao { background: rgba(180, 35, 24, 0.10); color: #b42318; }

.d23-var-desc { font-size: 12px; margin: 4px 0 2px; opacity: 0.85; }
.d23-var-exemplo { font-size: 11.5px; margin: 0 0 6px; opacity: 0.7; }
.d23-var-acoes { display: flex; gap: 6px; }

/* ---- previa ---- */

.d23-previa {
  margin-top: 12px;
  padding: 14px;
  background: rgba(0, 159, 166, 0.05);
  border: 1px solid rgba(0, 159, 166, 0.25);
  border-radius: 10px;
}

.d23-previa h4 { margin: 0 0 8px; font-size: 14px; color: #0f3b40; }
.d23-previa-assunto { font-size: 13px; margin: 0 0 8px; }

.d23-previa-corpo {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, "Cascadia Code", Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.55;
  background: #ffffff;
  border: 1px solid rgba(15, 59, 64, 0.12);
  border-radius: 6px;
  padding: 12px;
  margin: 0;
  overflow-x: auto;
}

.d23-previa-avisos { margin: 10px 0 0; padding-left: 18px; font-size: 12px; color: #8a5a00; }

/* ---- previsao do ciclo ---- */






/* ---- horario do pacote ---- */

.d23-pac-item {
  padding: 14px 16px;
  margin-bottom: 10px;
  background: #ffffff;
  border: 1px solid rgba(15, 59, 64, 0.12);
  border-radius: 10px;
}

.d23-pac-opcoes { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.d23-pac-radio { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
.d23-pac-campos { align-items: flex-end; margin-bottom: 0; }
.d23-pac-campos .input { width: 90px; }
.d23-pac-aviso { margin-top: 10px; }

/* ---- corretivo de homologacao: destino do scroll e contexto ---- */

/* O editor e alvo de scrollIntoView({block:"start"}). Sem margem, o topo
   dele encosta na borda da viewport e o campo Nome fica colado no limite —
   legivel, mas desconfortavel. */
[data-d23-msg-editor] { scroll-margin-top: 16px; }


/* Causa confirmada: destaque discreto, nos tokens D23 ja usados. Nao e
   erro nem alerta — e um diagnostico correto, e a cor nao pode sugerir
   falha do sistema quando o que falta e configuracao. */

/* Feedback local do editor: imediatamente abaixo das acoes, para nascer
   onde o usuario esta olhando. */
.d23-editor-status { margin-top: 8px; min-height: 0; }
.d23-editor-status:empty { display: none; }

/* Painel de confirmacao pos-Salvar, no lugar do formulario. */
.d23-editor-confirmado {
  padding: 14px 16px;
  border: 1px solid var(--linha, #d9e2e1);
  border-radius: 8px;
  background: var(--card, #fff);
}
.d23-editor-confirmado h4 { margin: 0 0 6px; }
.d23-editor-confirmado .d23-editor-acoes { margin-top: 10px; }

/* ---- D23-HIER: personalizacao por Pacote de Modelos ---- */

.d23-pacote-bloco { margin-bottom: 14px; }
.d23-pacote-cartoes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.d23-pacote-cartao {
  border: 1px solid var(--linha, #d9e2e1);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--card, #fff);
}
.d23-pacote-cartao .d23-linha-acoes { margin-top: 8px; }

/* ---- responsividade: 980 / 760 / 640 ---- */

@media (max-width: 980px) {
  .d23-editor { grid-template-columns: minmax(0, 1fr); }
  .d23-var-lista { max-height: 300px; }
}

@media (max-width: 760px) {
  /* Abaixo de 760px a .sidebar vira barra SUPERIOR sticky, com
     min-height 56px e z-index 50 (main.css, bloco da navegacao). Sem esta
     margem maior, o topo do editor para EMBAIXO dela depois do scroll —
     e o campo que acabou de receber foco fica escondido. 56 + folga. */
  [data-d23-msg-editor] { scroll-margin-top: 72px; }
  .d23-pacote-cartoes { grid-template-columns: minmax(0, 1fr); }
  .d23-hub-grid { grid-template-columns: minmax(0, 1fr); }
  .d23-abas { flex-direction: column; }
  .d23-abas .d23-btn { width: 100%; }
  .d23-editor-acoes { flex-direction: column; align-items: stretch; }
  .d23-editor-acoes .d23-btn { width: 100%; }
}

@media (max-width: 640px) {
  .d23-linha,
  .d23-pac-item,
  .d23-linha-acoes { flex-direction: column; }
  .d23-linha-acoes .d23-btn { width: 100%; }
  .d23-corpo { font-size: 12px; }
  .d23-pac-campos .input { width: 100%; }
}
/* D23-ESTILO-FIM */

/* ================================================================== */
/* D23-MSGIND-CSS-INICIO                                               */
/* ================================================================== */

/* Bloco APPEND-ONLY da tela de Mensagens de E-mail centrada em MENSAGEM.
   Nada acima desta linha foi alterado: a tela nova reusa .d23-btn,
   .d23-badge*, .d23-editor*, .d23-campo e .d23-var* do bloco D23-ESTILO, e
   o que entra aqui e so o que a estrutura nova pediu — secoes, a tabela de
   mensagens, o painel de vinculo e o painel "Qual mensagem vence?".

   Toda regra e ESCOPADA por .d23-msg-root ou por classe propria. A regra
   global de <button> deste projeto pinta todo botao de teal com
   !important, e por isso os controles reusam .d23-btn, que ja vence
   aquela regra por especificidade e !important proprios. */

.d23-msg-root .d23-secao {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(15, 59, 64, 0.12);
}

.d23-msg-root .d23-secao > h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #0f3b40;
}

/* GRID, e nao flex solto: com titulo longo e dois controles a direita, o
   flex sem wrap espremia o botao ate largura ~0 — defeito ja medido na
   D20. Duas colunas nomeadas nao tem como espremer. */
.d23-msg-root .d23-secao-topo {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.d23-msg-root .d23-secao-topo > h3 { margin: 0; }

.d23-msg-root .d23-secao-acoes {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.d23-msg-root .d23-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #44585c;
  white-space: nowrap;
}

/* ---- tabela de mensagens personalizadas ---- */

/* O wrapper e quem rola. A pagina nunca rola na horizontal: overflow no
   proprio <table> nao funciona, e sem wrapper a tabela empurraria o
   #panel inteiro. */
.d23-msg-root .d23-tabela-wrap {
  overflow-x: auto;
  border: 1px solid rgba(15, 59, 64, 0.14);
  border-radius: 10px;
  background: #ffffff;
}

.d23-msg-root .d23-tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  min-width: 720px;
}

.d23-msg-root .d23-tabela thead th {
  text-align: left;
  padding: 10px 12px;
  background: #edf2f8;
  color: #0f3b40;
  font-weight: 600;
  border-bottom: 1px solid rgba(15, 59, 64, 0.14);
  white-space: nowrap;
}

.d23-msg-root .d23-tabela tbody td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(15, 59, 64, 0.08);
  vertical-align: top;
  color: #44585c;
}

.d23-msg-root .d23-tabela tbody tr:last-child td { border-bottom: none; }

.d23-msg-root .d23-col-nome { min-width: 220px; }
.d23-msg-root .d23-col-nome strong { color: #0f3b40; }

.d23-msg-root .d23-col-assunto {
  margin-top: 4px;
  font-size: 12px;
  color: #7c8ba1;
  word-break: break-word;
}

.d23-msg-root .d23-col-assunto code {
  background: transparent;
  padding: 0;
  font-size: 12px;
}

/* flex-wrap explicito: sao ate quatro acoes por linha, e sem wrap a
   ultima ficava com largura zero em telas estreitas. */
.d23-msg-root .d23-col-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 260px;
}

/* ---- painel de vinculo ---- */

.d23-msg-root .d23-vinculo-painel {
  margin-top: 14px;
  padding: 16px;
  border: 1px solid rgba(0, 159, 166, 0.35);
  border-radius: 10px;
  background: #ffffff;
}

.d23-msg-root .d23-vinculo-painel > h4 {
  margin: 0 0 6px;
  font-size: 14px;
  color: #0f3b40;
}

.d23-msg-root .d23-vinculo-opcoes {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin: 12px 0;
}

.d23-msg-root .d23-radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: #0f3b40;
}

/* ---- painel "Qual mensagem vence?" ---- */

.d23-msg-root .d23-efetiva-form {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: flex-end;
}

.d23-msg-root .d23-campo-inline {
  flex: 1 1 200px;
  min-width: 180px;
  margin: 0;
}

.d23-msg-root .d23-efetiva-saida {
  margin-top: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  background: #edf2f8;
  border: 1px solid rgba(15, 59, 64, 0.12);
}

.d23-msg-root .d23-efetiva-saida p { margin: 0 0 6px; }
.d23-msg-root .d23-efetiva-saida p:last-child { margin-bottom: 0; }

/* ---- aviso de bloqueio no catalogo de variaveis ---- */

.d23-msg-root .d23-var-bloqueio {
  margin: 6px 0 0;
  font-size: 12px;
  color: #b42318;
}

/* Os <select> desta tela precisam do fundo branco explicito: a regra de
   formulario do projeto casa por TAG em input, e o select ficava
   herdando o fundo do container — mesmo defeito corrigido na D20. */
.d23-msg-root select.input {
  background: #ffffff;
  color: #0f3b40;
}

@media (max-width: 860px) {
  .d23-msg-root .d23-secao-topo {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .d23-msg-root .d23-secao-acoes { justify-content: flex-start; }
  .d23-msg-root .d23-efetiva-form { flex-direction: column; align-items: stretch; }
}


/* ---- D23-TESTE: painel de TESTE da mensagem ---- */

/* Acrescentado DENTRO do bloco D23-MSGIND-CSS, e nao depois dele, de
   proposito: as duas invariantes que a suite ja cobra sobre este bloco — o
   arquivo termina no marcador FIM, e toda regra e escopada por
   .d23-msg-root — passam a valer tambem para estas regras. Abrir um bloco
   novo depois do FIM derrubaria a primeira e me obrigaria a afrouxar a
   propria assercao para acomodar a minha mudanca. */

.d23-msg-root .d23-teste-secao > h3 {
  letter-spacing: 0.02em;
}

/* O SUBTEXTO DE ALERTA INFORMATIVO.

   AMBAR, nunca vermelho: vermelho neste projeto significa erro
   (.atx-status-erro usa #b42318), e este aviso nao e erro — e um aviso de
   NATUREZA: "isto e ferramenta, nao configuracao". Pintar de vermelho
   ensinaria que algo deu errado.

   minusculo, italico e MENOR que o titulo, que tem 15px. */
.d23-msg-root .d23-teste-aviso {
  margin: 0 0 14px;
  padding: 8px 12px;
  font-size: 12.5px;
  font-style: italic;
  text-transform: lowercase;
  color: #8a5a00;
  background: rgba(191, 138, 0, 0.10);
  border: 1px solid rgba(191, 138, 0, 0.30);
  border-left: 3px solid #bf8a00;
  border-radius: 8px;
}

.d23-msg-root .d23-teste-tipo {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  margin: 12px 0;
}

.d23-msg-root .d23-teste-tipo-rotulo {
  font-size: 13px;
  color: #44585c;
  font-weight: 600;
}

.d23-msg-root .d23-teste-status:empty {
  display: none;
}

.d23-msg-root .d23-teste-status {
  margin-top: 10px;
}

/* O corpo resolvido pode ser longo: rola dentro do proprio bloco em vez de
   empurrar a pagina na horizontal. */
.d23-msg-root .d23-efetiva-saida .d23-previa-corpo {
  max-height: 320px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
}


/* ---- D23-PAINEL: o teste como acordeao ---- */

/* O <h3> perde a aparencia de titulo de secao e vira so o wrapper
   semantico do botao. O visual do cabecalho mora no botao. */
.d23-msg-root .d23-teste-titulo {
  margin: 0;
  font-size: inherit;
  font-weight: normal;
}

/* CABECALHO RECOLHIVEL.

   A regra global de <button> deste projeto pinta todo botao de teal com
   !important — sem !important proprio, este cabecalho sairia como um botao
   de acao teal, que e exatamente a leitura errada: ele nao executa nada,
   so abre e fecha.

   O alvo visual e "pequeno painel de ferramenta administrativa": fundo da
   base, borda discreta, largura total, texto a esquerda. Nada aqui imita
   formulario aberto. */
.d23-msg-root .d23-teste-cabecalho {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  border-radius: 10px;
  cursor: pointer;
  color: #0f3b40 !important;
  background: #edf2f8 !important;
  border: 1px solid rgba(15, 59, 64, 0.14) !important;
  box-shadow: none !important;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.d23-msg-root .d23-teste-cabecalho:hover {
  background: #e4ecf5 !important;
  border-color: rgba(15, 59, 64, 0.28) !important;
}

/* O foco tem de ser VISIVEL: este cabecalho e operavel por teclado, e sem
   anel de foco o Enter/Espaco vira uma acao as cegas. */
.d23-msg-root .d23-teste-cabecalho:focus-visible {
  outline: 2px solid #009fa6;
  outline-offset: 2px;
}

.d23-msg-root .d23-teste-chevron {
  font-size: 11px;
  line-height: 1;
  color: #44585c;
  flex: 0 0 auto;
}

.d23-msg-root .d23-teste-rotulo {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* A regiao so existe visualmente quando aberta. O `hidden` do HTML ja faz
   isso, e a regra abaixo existe para que nenhum `display` herdado do
   projeto o sobreponha — foi assim que um bloco antigo desta tela reapareceu
   por heranca. */
.d23-msg-root .d23-teste-regiao[hidden] {
  display: none;
}

.d23-msg-root .d23-teste-regiao {
  padding-top: 14px;
}

/* D23-MSGIND-CSS-FIM */