/* front.md — tokens e padrões visuais transversais do SIGCAÇAMBA.
   Paleta: mantida a oficial (#2E7D32 / #F57C00 / #1565C0 / #263238).
   Tipografia: Public Sans (referência SIGCACAMBA.dc.html); Inter do front.md
   foi rejeitado para não regredir a identidade oficial nem os testes Leva16.
   Cores genéricas do prompt (#2d5016 / #c8621a) mapeadas aos tokens oficiais.
   CSP-safe: somente stylesheet externo; zero style=/on*/script inline. */

:root {
  --front-green: var(--color-green, #2E7D32);
  --front-green-rgb: 46, 125, 50;
  --front-orange: var(--color-orange, #F57C00);
  --front-ink-rgb: 38, 50, 56;
  --front-radius-btn: 14px;
  --front-radius-card: 14px;
  --front-radius-outline: 8px;
  --front-radius-badge: 10px;
  --front-radius-status: 4px;
  --front-radius-pill: 20px;
  --front-shadow-card: 0 1px 4px rgba(var(--front-ink-rgb), .06);
  --front-content-max: 1200px;
  --front-gap: 1rem;
  --front-body-size: 14px;
  --front-label-size: 11px;
}

/* Tipografia — pesos 400–700 e métricas do front.md */
body.sig-app,
body.public-shell,
body.auth-shell {
  font-weight: 400;
  font-size: var(--front-body-size);
  line-height: 1.5;
}

.sig-topbar__title,
.page-header .title,
.admin .title,
.auth-card .card-title,
.sig-kpi__value,
.sig-indicator__value,
h1, h2 {
  font-weight: 700;
  letter-spacing: -0.03em;
}

h3, h4, .card-form-title, .filter-title, .sig-panel__title {
  font-weight: 600;
  letter-spacing: -0.02em;
}

body.sig-app,
body.public-shell,
body.auth-shell,
.sig-content,
.public-content,
.admin {
  font-weight: 400;
  font-size: var(--front-body-size);
}

.sig-indicators__label,
.sig-topbar__crumb,
.sig-account__label,
.data-view-text .data-text-title,
.table thead th,
.ui-table-count,
.sig-nav__group {
  font-size: var(--front-label-size);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-label,
label.control-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

/* O painel autenticado usa toda a largura útil do desktop. */
.sig-content,
.sig-content.admin {
  width: 100%;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Páginas públicas mantêm uma coluna centralizada para leitura. */
.public-content,
.container.public-content,
.public-shell .container {
  max-width: var(--front-content-max);
  margin-left: auto;
  margin-right: auto;
}

/* Grades KPI / indicadores — auto-fit com piso; gap no container (não nos li) */
.sig-kpi-grid,
.sig-indicators,
.den-kpis,
.front-auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 160px), 1fr));
  gap: 1rem;
  align-items: stretch;
}

.sig-kpi-grid,
.sig-indicators {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  gap: 1rem; /* reforço: fundo cinza visível entre cards brancos */
}

/* Markup usa <li> como item da grade — o card precisa preencher a célula */
.sig-kpi-grid > li,
.sig-indicators > li {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.sig-indicators__label {
  display: block;
  margin: 0 0 10px;
  color: #90A4AE;
  letter-spacing: 0.12em;
}

/* Cartas de escritório */
.sig-kpi,
.sig-indicator,
.sig-panel,
.page-panel,
.card:not(.qr-plate):not(.public-bin-id),
.filter-panel,
.admin .filter,
.admin .card-form,
.admin .card-option,
.dashboard-alert-card,
.dashboard-analytics-card,
.auth-card,
.empty-state,
.ui-empty-state,
.den-kpis > .den-kpi,
.den-kpis > .proto-card {
  background: #fff;
  border-radius: var(--front-radius-card);
  box-shadow: var(--front-shadow-card);
}

.sig-kpi,
.sig-indicator,
.sig-panel,
.page-panel,
.admin .filter,
.admin .card-form,
.card-body,
.den-kpis > .den-kpi,
.den-kpis > .proto-card {
  padding: 16px;
}

.page-panel,
.admin .page-panel,
.card:not(.qr-plate):not(.public-bin-id) {
  padding: 0;
}

.page-panel .table-responsive,
.admin .page-panel > .responsive-card-table {
  border-radius: inherit;
}

/* Botões primários */
.btn-primary,
.btn-success,
.solid-btn,
.solid-btn-light,
.sig-btn--primary,
.field-phone__action a,
.proto-action,
.docs-tab.is-active {
  background: var(--front-green) !important;
  border-color: var(--front-green) !important;
  color: #fff !important;
  border-radius: var(--front-radius-btn);
  font-weight: 600;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-success:hover,
.solid-btn:hover,
.solid-btn-light:hover,
.sig-btn--primary:hover {
  background: var(--color-green-light, #43A047) !important;
  border-color: var(--color-green-light, #43A047) !important;
  color: #fff !important;
}

/* Ícone em container translúcido nos botões primários */
.btn-primary > i,
.btn-primary > .ph,
.btn-success > i,
.btn-success > .ph,
.solid-btn > i,
.solid-btn > .ph,
.sig-btn--primary > i,
.sig-btn--primary > .ph,
.field-phone__action a > i,
.proto-action > i {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  margin-inline-end: .15rem;
  border-radius: 11px;
  background: rgba(255, 255, 255, .12);
  font-size: 1rem;
  line-height: 1;
}

/* Botões secundários / outline */
.btn-outline-primary,
.btn-outline-secondary,
.outline-btn,
.sig-btn:not(.sig-btn--primary),
.public-login-btn,
.gray-btn {
  border: 1px solid rgba(var(--front-ink-rgb), .12);
  border-radius: var(--front-radius-outline);
  background: #fff;
  color: var(--color-dark, #263238);
}

.btn-outline-primary:hover,
.outline-btn:hover,
.sig-btn:not(.sig-btn--primary):hover,
.public-login-btn:hover {
  border-color: var(--front-green);
  color: var(--front-green);
  background: rgba(var(--front-green-rgb), .06);
}

/* Distintivos de contagem (laranja oficial) */
.sig-nav__badge,
.sig-nav__badge--warning,
.sig-iconbtn__dot,
.badge.bg-warning,
.badge.text-bg-warning,
.count-badge,
.ui-count-badge {
  background: var(--front-orange) !important;
  border-radius: var(--front-radius-badge);
  color: #fff !important;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.2;
}

.sig-nav__badge {
  min-width: 1.25rem;
  padding: .2rem .4rem;
  text-align: center;
}

.sig-nav__badge--danger {
  background: var(--sig-danger, #C62828) !important;
}

.sig-nav__badge--info {
  background: #0288D1 !important;
}

.sig-nav__badge--neutral {
  background: var(--muted, #5B6B72) !important;
}

/* Etiquetas de status */
.tag-status,
.status-badge,
.status-regular,
.status-disponivel,
.status-em-uso,
.status-without-ctr,
.status-irregular,
.status-not-registered,
.status-badge--success,
.status-badge--warning,
.status-badge--danger,
.proto-status,
.registration-status,
.sig-account__badge {
  font-size: 10px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--front-radius-status);
  letter-spacing: .02em;
}

.status-regular,
.status-disponivel,
.status-badge--success,
.registration-status--active,
.proto-status--success {
  background: rgba(var(--front-green-rgb), .08);
  color: var(--front-green);
}

.status-em-uso,
.status-without-ctr,
.status-badge--warning,
.registration-status--pending {
  background: rgba(245, 124, 0, .12);
  color: #E65100;
}

.status-irregular,
.status-badge--danger,
.registration-status--inactive {
  background: rgba(198, 40, 40, .1);
  color: #C62828;
}

/* Status online — pílula com ponto animado */
.status-online {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: 22px;
  padding: .15rem .65rem;
  border: 1px solid rgba(var(--front-green-rgb), .15);
  border-radius: var(--front-radius-pill);
  background: rgba(var(--front-green-rgb), .06);
  color: var(--front-green);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.status-online__dot {
  position: relative;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: var(--front-green);
  flex: 0 0 auto;
}

.status-online__dot::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--front-green);
  content: "";
  animation: front-online-ping 1.6s ease-out infinite;
}

@keyframes front-online-ping {
  0% { transform: scale(.6); opacity: .7; }
  80%, 100% { transform: scale(2.4); opacity: 0; }
}

/* Listas — itens com padding e divisórias */
.list-group-item,
.docs-row,
.denuncia-steps li,
.user-edit__row,
.sig-content .table tbody td {
  padding-block: 14px;
  padding-inline: 16px;
}

.list-group-item + .list-group-item,
.docs-row + .docs-row {
  border-top: 1px solid rgba(var(--front-ink-rgb), .06);
  margin-inline: 0;
}

.list-group-item,
.docs-row {
  border-left: 0;
  border-right: 0;
}

/* Indicadores / KPI — card branco, tip + badge + valor + título + subtítulo + spark opcional */
.sig-kpi,
.sig-indicator,
.sig-kpi-grid > li > .sig-kpi,
.sig-kpi-grid > li > .sig-indicator,
.sig-kpi-grid > .sig-kpi,
.sig-kpi-grid > .sig-indicator,
.sig-indicators > li > .sig-kpi,
.sig-indicators > li > .sig-indicator,
.den-kpis > .den-kpi,
.den-kpis > .proto-card,
.den-kpis > .sig-kpi,
.den-kpis > .sig-indicator {
  position: relative;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 8.25rem;
  margin: 0;
  border: 0;
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 2px 10px rgba(var(--front-ink-rgb), .06);
  color: inherit;
  text-decoration: none;
  overflow: hidden;
}

.sig-kpi-grid > li > .sig-kpi,
.sig-kpi-grid > li > .sig-indicator,
.sig-kpi-grid > .sig-kpi,
.sig-kpi-grid > .sig-indicator,
.sig-indicators > li > .sig-kpi,
.sig-indicators > li > .sig-indicator {
  flex: 1 1 auto;
}

a.sig-kpi:hover,
a.sig-kpi:focus-visible,
a.sig-indicator:hover,
a.sig-indicator:focus-visible {
  border-color: transparent;
  box-shadow: 0 4px 14px rgba(var(--front-ink-rgb), .1);
  color: inherit;
}

.sig-kpi__top,
.sig-indicator__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
}

.sig-kpi__icon,
.sig-indicator__tip {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 11px; /* tip/quadrado — nunca círculo */
  font-size: 19px;
  line-height: 1;
}

.sig-kpi__icon--verde,
.sig-indicator__tip--verde { background: #E8F5E9; color: #2E7D32; }
.sig-kpi__icon--laranja,
.sig-indicator__tip--laranja { background: #FFF3E0; color: #E65100; }
.sig-kpi__icon--azul,
.sig-indicator__tip--azul { background: #E3F2FD; color: #1565C0; }
.sig-kpi__icon--vermelho,
.sig-indicator__tip--vermelho { background: #FFEBEE; color: #C62828; }
.sig-kpi__icon--cinza,
.sig-indicator__tip--cinza { background: #ECEFF1; color: #455A64; }
.sig-kpi__icon--roxo,
.sig-indicator__tip--roxo { background: #F3E5F5; color: #6A1B9A; }
.sig-kpi__icon--bege,
.sig-indicator__tip--bege { background: #F5F0E6; color: #6D5C3D; }

.sig-kpi__hint,
.sig-indicator__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 60%;
  padding: 3px 8px;
  border-radius: var(--front-radius-pill);
  background: #F1F3F4;
  color: #546E7A;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}

.sig-kpi__hint--verde,
.sig-indicator__badge--up {
  background: #E8F5E9;
  color: #2E7D32;
}

.sig-kpi__hint--laranja,
.sig-indicator__badge--warn {
  background: #FFF3E0;
  color: #E65100;
}

.sig-kpi__hint--azul,
.sig-indicator__badge--info {
  background: #E3F2FD;
  color: #1565C0;
}

.sig-kpi__hint--vermelho,
.sig-indicator__badge--danger {
  background: #FFEBEE;
  color: #C62828;
}

.sig-kpi__hint--neutro,
.sig-indicator__badge--muted {
  background: #F1F3F4;
  color: #546E7A;
}

.sig-kpi__value,
.sig-indicator__value {
  margin-top: 14px;
  color: var(--color-dark, #263238);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.sig-kpi__label,
.sig-indicator__title {
  margin-top: 6px;
  color: var(--color-dark, #263238);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.sig-indicator__subtitle,
.sig-kpi__subtitle {
  margin-top: 4px;
  color: #90A4AE;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}

.sig-indicator__subtitle a,
a.sig-indicator .sig-indicator__subtitle,
a.sig-kpi .sig-kpi__subtitle {
  color: #1565C0;
  text-decoration: none;
}

.sig-indicator__spark,
.sig-kpi__spark {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 72px;
  height: 28px;
  pointer-events: none;
}

.sig-indicator__spark--azul,
.sig-kpi__spark--azul { color: #1565C0; }
.sig-indicator__spark--verde,
.sig-kpi__spark--verde { color: #2E7D32; }
.sig-indicator__spark--laranja,
.sig-kpi__spark--laranja { color: #F57C00; }
.sig-indicator__spark--roxo,
.sig-kpi__spark--roxo { color: #6A1B9A; }

.den-kpi strong,
.den-kpis .sig-kpi__value,
.den-kpis .sig-indicator__value {
  display: block;
  margin-top: 0;
  color: var(--color-dark, #263238);
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.03em;
}

.den-kpi span,
.den-kpis .sig-kpi__label,
.den-kpis .sig-indicator__title {
  margin-top: 6px;
  color: var(--color-dark, #263238);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
}

.den-kpi__value--laranja {
  color: var(--front-orange) !important;
}

.sig-panel {
  border: 1px solid rgba(var(--front-ink-rgb), .06);
}

/* Breakpoints da grade KPI nesta folha (carrega por último e vence o shell) */
@media (min-width: 1400px) {
  .sig-kpi-grid,
  .sig-indicators { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .den-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1399.98px) and (min-width: 768px) {
  .sig-kpi-grid,
  .sig-indicators { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .den-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) and (min-width: 26.26rem) {
  .sig-kpi-grid,
  .sig-indicators,
  .den-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tabelas e painéis dentro do content max */
.table-responsive {
  border-radius: var(--front-radius-card);
  box-shadow: var(--front-shadow-card);
}

.badge:not(.sig-nav__badge):not(.bg-warning):not(.text-bg-warning) {
  border-radius: var(--front-radius-badge);
  font-size: 10px;
  font-weight: 700;
}

/* Preferências de movimento e contraste forçado */
@media (prefers-reduced-motion: reduce) {
  .status-online__dot::after {
    animation: none;
  }
}

@media (forced-colors: active) {
  .status-online,
  .btn-primary,
  .sig-btn--primary,
  .tag-status,
  .status-badge {
    border: 1px solid CanvasText;
  }
}

/* Mobile 360px — grades e botões confortáveis */
@media (max-width: 26.25rem) {
  .sig-content,
  .sig-content.admin {
    padding-inline: 12px;
  }

  .sig-kpi-grid,
  .sig-indicators,
  .den-kpis,
  .front-auto-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .sig-kpi,
  .sig-indicator,
  .den-kpis > .den-kpi,
  .den-kpis > .proto-card {
    min-height: 0;
  }

  .btn-primary,
  .sig-btn--primary,
  .solid-btn {
    width: 100%;
    justify-content: center;
  }
}