:root {
  --cf-map-line: color-mix(in srgb, var(--cds-cor-linha, #ccc) 70%, transparent);
}

#loader {
  position: fixed;
  inset: 0;
  display: grid;
  place-items: center;
  background: var(--cds-cor-background, #fff);
  z-index: 9999;
}
#loader.is-off { display: none; }

.cf-flash {
  padding: 0.75rem 1rem;
  border-radius: var(--cds-raio-md, 8px);
  background: var(--cds-cor-superficie, #f5f5f5);
  margin-bottom: 1rem;
}
.cf-flash--erro { outline: 2px solid var(--cds-cor-erro, #b00020); }

.cf-page-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.cf-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.cf-cards, .cf-kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr)); gap: 1rem; margin: 1rem 0; }
.cf-card { padding: 1rem; border-radius: var(--cds-raio-md, 8px); }
.cf-kpi { font-size: 2rem; margin: 0; }

.cf-table-wrap { overflow-x: auto; margin: 1rem 0; }
.cf-table { width: 100%; border-collapse: collapse; }
.cf-table th, .cf-table td { text-align: left; padding: 0.5rem 0.4rem; border-bottom: 1px solid var(--cds-cor-linha, #ddd); vertical-align: top; }
.cf-row-critico { background: color-mix(in srgb, #c62828 12%, transparent); }

.cf-map {
  position: relative;
  width: 100%;
  aspect-ratio: var(--w, 100) / var(--h, 60);
  background:
    repeating-linear-gradient(0deg, transparent, transparent 9%, var(--cf-map-line) 9%, var(--cf-map-line) 10%),
    repeating-linear-gradient(90deg, transparent, transparent 9%, var(--cf-map-line) 9%, var(--cf-map-line) 10%),
    var(--cds-cor-superficie, #fafafa);
  border: 1px solid var(--cds-cor-linha, #ccc);
  border-radius: var(--cds-raio-md, 8px);
  margin: 1rem 0 2rem;
}
.cf-pin {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  border-radius: 999px;
  padding: 0.25rem 0.5rem;
  font-size: 0.75rem;
  cursor: grab;
  background: var(--cds-cor-primaria, #1565c0);
  color: #fff;
  max-width: 8rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cf-pin--critico { background: #c62828; }
.cf-fab { position: fixed; right: 1.25rem; bottom: 5rem; z-index: 20; }
.cf-dialog { border: 0; border-radius: 12px; padding: 1.25rem; max-width: 28rem; width: calc(100% - 2rem); }
.cf-inline { display: flex; gap: 0.75rem; align-items: center; margin: 0.4rem 0; flex-wrap: wrap; }
.cf-login-body { display: grid; place-items: center; min-height: 100vh; }
.cf-login-card { width: min(28rem, 92vw); padding: 1.5rem; border-radius: 12px; }
.cf-demo-hint { margin-top: 1rem; }
.cf-thumb { width: 96px; height: 96px; object-fit: cover; border-radius: 8px; }
.cf-evidences { display: flex; gap: 1rem; flex-wrap: wrap; list-style: none; padding: 0; }

#menu-usuario form { margin: 0; }
#btn-sair { width: 100%; justify-content: flex-start; }