/* Visual do Interlock sobre o Bootstrap 5.3.3 (portal, telas de conta e páginas de erro).

   Grafite #22313B no menu lateral, nos títulos e no texto; fundo aço #EEF2F5; superfícies brancas com borda #D6DEE4;
   texto secundário #5B6B77; laranja da marca #FF9528 no item ativo, nos botões principais e nos contadores, sempre
   com texto grafite (nunca branco); links #A35700 (contraste de pelo menos 4,5:1 sobre branco).
   Situação sempre com ícone e texto, nunca só cor: verde (em contato), âmbar (atenção), vermelho (bloqueada) e
   cinza (sem dispositivo ou nunca se conectou). Fontes Barlow e Barlow Condensed servidas de vendor/fontes. */

/* As fontes (@font-face) ficam em fontes.css, que o painel do fornecedor também usa. */

:root {
  --il-grafite: #22313B;
  --il-grafite-claro: #2C3E4A;
  --il-fundo: #EEF2F5;
  --il-superficie: #FFFFFF;
  --il-borda: #D6DEE4;
  --il-borda-campo: #C5CFD7;
  --il-divisor: #E4E9ED;
  --il-texto-2: #5B6B77;
  --il-texto-3: #3D4C57;
  --il-laranja: #FF9528;
  --il-laranja-escuro: #F2850F;
  --il-link: #A35700;
  --il-link-hover: #7A4100;
  --il-desbloqueio: #2F6FB0;
  --il-negado: #E0533D;
  --il-condensada: "Barlow Condensed", "Arial Narrow", sans-serif;

  --bs-body-font-family: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --bs-body-font-size: 1rem;
  --bs-body-color: #22313B;
  --bs-body-color-rgb: 34, 49, 59;
  --bs-body-bg: #EEF2F5;
  --bs-emphasis-color: #22313B;
  --bs-heading-color: #22313B;
  --bs-secondary-color: #5B6B77;
  --bs-border-color: #D6DEE4;
  --bs-border-radius: 8px;
  --bs-primary: #FF9528;
  --bs-primary-rgb: 255, 149, 40;
  --bs-link-color: #A35700;
  --bs-link-color-rgb: 163, 87, 0;
  --bs-link-hover-color: #7A4100;
  --bs-link-hover-color-rgb: 122, 65, 0;
  --bs-focus-ring-color: rgba(255, 149, 40, 0.6);
}

body.il-corpo {
  background-color: var(--il-fundo);
  color: var(--il-grafite);
  min-width: 320px;
}

h1, h2, h3, h4, h5 {
  color: var(--il-grafite);
}

/* Foco visível em tudo que é clicável: contorno laranja de 3 px. */
:focus-visible {
  outline: 3px solid var(--il-laranja);
  outline-offset: 2px;
}

.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.page-link:focus {
  outline: 3px solid var(--il-laranja);
  outline-offset: 1px;
  box-shadow: none;
  border-color: var(--il-borda-campo);
}

/* Ícones (templatetag icone): alinham com o texto. */
.il-icone {
  flex: none;
  vertical-align: -0.2em;
}

.il-condensada {
  font-family: var(--il-condensada);
}

/* Texto que começa com minúscula no código (os textos exatos do portal) e aparece com maiúscula. */
.il-maiuscula {
  display: inline-block;
}

.il-maiuscula::first-letter {
  text-transform: uppercase;
}

/* ---------- Botões ---------- */

.btn {
  --bs-btn-font-weight: 600;
  --bs-btn-font-size: 15px;
  --bs-btn-padding-x: 18px;
  --bs-btn-border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}

.btn-sm {
  --bs-btn-padding-x: 14px;
  --bs-btn-font-size: 14px;
  --bs-btn-border-radius: 8px;
}

.btn-primary {
  --bs-btn-color: #22313B;
  --bs-btn-bg: #FF9528;
  --bs-btn-border-color: #FF9528;
  --bs-btn-hover-color: #22313B;
  --bs-btn-hover-bg: #F2850F;
  --bs-btn-hover-border-color: #F2850F;
  --bs-btn-active-color: #22313B;
  --bs-btn-active-bg: #E07A0B;
  --bs-btn-active-border-color: #E07A0B;
  --bs-btn-disabled-color: #22313B;
  --bs-btn-disabled-bg: #FF9528;
  --bs-btn-disabled-border-color: #FF9528;
}

.btn-outline-primary,
.btn-outline-secondary {
  --bs-btn-color: #22313B;
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #C5CFD7;
  --bs-btn-hover-color: #22313B;
  --bs-btn-hover-bg: #F1F4F7;
  --bs-btn-hover-border-color: #8796A1;
  --bs-btn-active-color: #22313B;
  --bs-btn-active-bg: #E4E9ED;
  --bs-btn-active-border-color: #8796A1;
}

.btn-outline-danger {
  --bs-btn-color: #B5332A;
  --bs-btn-bg: #FFFFFF;
  --bs-btn-border-color: #E9B7B2;
  --bs-btn-hover-color: #8E2A1C;
  --bs-btn-hover-bg: #FDEEEB;
  --bs-btn-hover-border-color: #D9443B;
  --bs-btn-active-color: #8E2A1C;
  --bs-btn-active-bg: #F8D9D6;
  --bs-btn-active-border-color: #D9443B;
}

.btn-link {
  --bs-btn-color: #A35700;
  --bs-btn-hover-color: #7A4100;
  --bs-btn-active-color: #7A4100;
}

/* ---------- Formulários ---------- */

.form-label {
  font-size: 14px;
  font-weight: 500;
  color: var(--il-texto-3);
  margin-bottom: 6px;
}

.form-control,
.form-select {
  min-height: 44px;
  border-color: var(--il-borda-campo);
  border-radius: 8px;
  font-size: 15px;
  color: var(--il-grafite);
}

.form-select-sm {
  min-height: 44px;
  font-size: 14px;
}

.form-check-input {
  width: 1.25em;
  height: 1.25em;
  border-color: #8796A1;
}

.form-check-input:checked {
  background-color: var(--il-laranja);
  border-color: var(--il-laranja);
}

.form-check-input:checked[type="checkbox"] {
  /* O "check" do Bootstrap é branco; sobre o laranja, ele fica grafite. */
  --bs-form-check-bg-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%2322313B' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 0;
}

.form-check .form-check-input {
  float: none;
  margin: 0;
}

.il-erro-campo {
  color: #B5332A;
  font-size: 14px;
  margin-top: 4px;
}

/* ---------- Alertas e mensagens ---------- */

.alert {
  --bs-alert-border-radius: 10px;
  --bs-alert-padding-y: 12px;
  --bs-alert-padding-x: 16px;
  font-size: 15px;
}

.alert-warning {
  --bs-alert-color: #5E4700;
  --bs-alert-bg: #FFF8DB;
  --bs-alert-border-color: #F1DC8E;
  --bs-alert-link-color: #5E4700;
}

.alert-danger {
  --bs-alert-color: #8E2A1C;
  --bs-alert-bg: #FDEEEB;
  --bs-alert-border-color: #F2C4BD;
  --bs-alert-link-color: #8E2A1C;
}

.alert-success {
  --bs-alert-color: #125E40;
  --bs-alert-bg: #E3F4EC;
  --bs-alert-border-color: #B5DFCB;
  --bs-alert-link-color: #125E40;
}

.alert-info {
  --bs-alert-color: #1F4E7A;
  --bs-alert-bg: #E6EEF7;
  --bs-alert-border-color: #BCD0E6;
  --bs-alert-link-color: #1F4E7A;
}

.alert-secondary {
  --bs-alert-color: #3D4C57;
  --bs-alert-bg: #F1F4F7;
  --bs-alert-border-color: #D6DEE4;
  --bs-alert-link-color: #3D4C57;
}

.alert-dismissible .btn-close {
  padding: 15px 16px;
}

.il-mensagens .alert:last-child {
  margin-bottom: 0;
}

/* ---------- Tabelas ---------- */

.table {
  --bs-table-color: #22313B;
  --bs-table-bg: transparent;
  --bs-table-border-color: #EEF2F5;
  --bs-table-hover-bg: #F6F8FA;
  --bs-table-hover-color: #22313B;
  font-size: 15px;
  margin-bottom: 0;
}

.table > :not(caption) > * > * {
  padding: 12px;
}

.table > thead th {
  color: var(--il-texto-2);
  font-size: 14px;
  font-weight: 500;
  border-bottom-color: var(--il-divisor);
  white-space: nowrap;
}

.table-warning {
  --bs-table-bg: #FFF8DB;
  --bs-table-color: #22313B;
}

.table-responsive {
  -webkit-overflow-scrolling: touch;
}

.il-nowrap {
  white-space: nowrap;
}

/* ---------- Paginação ---------- */

.pagination {
  --bs-pagination-color: #A35700;
  --bs-pagination-hover-color: #7A4100;
  --bs-pagination-border-color: #C5CFD7;
  --bs-pagination-disabled-color: #5B6B77;
  --bs-pagination-disabled-bg: #FFFFFF;
  --bs-pagination-border-radius: 8px;
  margin: 16px 0 0;
  flex-wrap: wrap;
}

.page-link {
  min-height: 44px;
  display: flex;
  align-items: center;
  font-weight: 500;
}

.active > .page-link,
.page-link.active {
  color: #22313B;
  background-color: #FF9528;
  border-color: #FF9528;
}

/* ---------- Estrutura do portal: menu lateral e conteúdo ---------- */

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

.il-topo {
  display: none;
}

.il-lateral {
  flex: none;
  width: 248px;
  background-color: var(--il-grafite);
  padding: 24px 12px;
  flex-direction: column;
  gap: 28px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

/* O menu é um "collapse" do Bootstrap só abaixo de 992 px; acima, fica sempre aberto. */
.il-lateral.collapse:not(.show),
.il-lateral {
  display: flex;
}

.il-lateral-logo {
  display: block;
  margin: 0 6px;
}

.il-lateral-logo img {
  width: 168px;
  height: auto;
  display: block;
}

.il-empresa {
  background-color: var(--il-grafite-claro);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.il-empresa-rotulo {
  font-size: 13px;
  color: #9FB0BC;
}

.il-empresa-nome {
  font-size: 15px;
  font-weight: 600;
  color: #FFFFFF;
  overflow-wrap: anywhere;
}

.il-nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.il-nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 8px;
  color: #C9D3DA;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.il-nav-item:hover,
.il-nav-item:focus-visible {
  background-color: var(--il-grafite-claro);
  color: #FFFFFF;
}

.il-nav-item.active {
  background-color: var(--il-laranja);
  color: var(--il-grafite);
  font-weight: 600;
}

.il-nav-texto {
  flex: 1;
  white-space: nowrap;
}

.il-contador.badge {
  background-color: var(--il-laranja);
  color: var(--il-grafite);
  font-size: 13px;
  font-weight: 700;
  border-radius: 999px;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.il-nav-item.active .il-contador.badge {
  background-color: var(--il-grafite);
  color: #FFFFFF;
}

.il-separador {
  height: 1px;
  background-color: #33495A;
  margin: 10px 4px;
}

.il-usuario {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 6px 0;
  border-top: 1px solid #33495A;
}

.il-avatar {
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 999px;
  background-color: #3B5566;
  color: #FFFFFF;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
}

.il-usuario-dados {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.il-usuario-nome {
  color: #FFFFFF;
  font-size: 15px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.il-usuario-papel {
  color: #9FB0BC;
  font-size: 13px;
}

.il-usuario form {
  margin: 0;
}

.il-botao-sair {
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #C9D3DA;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.il-botao-sair:hover {
  background-color: var(--il-grafite-claro);
  color: #FFFFFF;
}

.il-principal {
  flex: 1;
  min-width: 0;
  padding: 32px 40px 48px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.il-pagina {
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 1440px;
}

.il-principal > .alert {
  margin: 0;
  max-width: 1440px;
}

/* Celular e tablet: barra no topo com o logo e o botão que abre o menu. */
@media (max-width: 991.98px) {
  .il-app {
    flex-direction: column;
  }

  .il-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    background-color: var(--il-grafite);
    padding: 10px 16px;
    position: sticky;
    top: 0;
    z-index: 1020;
  }

  .il-topo img {
    height: 32px;
    width: auto;
    display: block;
  }

  .il-botao-menu {
    width: 44px;
    height: 44px;
    border: 1px solid #3B5566;
    border-radius: 8px;
    background: transparent;
    color: #FFFFFF;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .il-lateral {
    width: 100%;
    height: auto;
    position: static;
    gap: 16px;
    padding: 8px 16px 16px;
    overflow: visible;
  }

  .il-lateral.collapse:not(.show) {
    display: none;
  }

  .il-lateral.collapsing {
    display: flex;
    overflow: hidden;
  }

  .il-lateral-logo {
    display: none;
  }

  .il-principal {
    padding: 20px 16px 40px;
  }
}

/* ---------- Cabeçalho das páginas ---------- */

.il-cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.il-cabecalho-texto {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.il-titulo {
  margin: 0;
  font-family: var(--il-condensada);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.05;
  overflow-wrap: anywhere;
}

.il-apoio {
  margin: 0;
  font-size: 16px;
  color: var(--il-texto-2);
}

.il-voltar {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 32px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
}

.il-voltar:hover {
  text-decoration: underline;
}

.il-acoes {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

@media (max-width: 575.98px) {
  .il-titulo {
    font-size: 32px;
  }
}

/* ---------- Painéis ---------- */

.il-painel {
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 14px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.il-painel-tabela {
  padding-bottom: 8px;
}

.il-painel-cabeca {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
}

.il-painel-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.il-painel-titulo .il-icone {
  color: var(--il-texto-2);
}

.il-painel-nota {
  margin: 0;
  font-size: 14px;
  color: var(--il-texto-2);
}

.il-link-forte {
  font-size: 15px;
  font-weight: 500;
}

.il-vazio {
  margin: 0;
  color: var(--il-texto-2);
}

.il-secao {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.il-secao-titulo {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
}

.il-duas-colunas {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: stretch;
}

.il-coluna-larga {
  flex: 999 1 520px;
  min-width: 0;
}

.il-coluna-estreita {
  flex: 1 1 320px;
  min-width: 0;
}

@media (max-width: 575.98px) {
  .il-painel {
    padding: 18px 16px;
  }
}

/* Lista de dados (rótulo e valor). */
.il-dados {
  display: grid;
  grid-template-columns: minmax(140px, max-content) 1fr;
  gap: 10px 24px;
  margin: 0;
}

.il-dados dt {
  font-size: 14px;
  font-weight: 500;
  color: var(--il-texto-2);
}

.il-dados dd {
  margin: 0;
  font-size: 15px;
  overflow-wrap: anywhere;
}

@media (max-width: 575.98px) {
  .il-dados {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .il-dados dd {
    margin-bottom: 10px;
  }
}

/* ---------- Cores da situação ---------- */

.il-tom-verde {
  --il-cor: #1E9E6A;
  --il-cor-texto: #17845A;
  --il-halo: #D6F0E4;
}

.il-tom-ambar {
  --il-cor: #E5A800;
  --il-cor-texto: #8A6A00;
  --il-halo: #FBEFC4;
}

.il-tom-vermelho {
  --il-cor: #D9443B;
  --il-cor-texto: #B5332A;
  --il-halo: #F8D9D6;
}

/* Sem contato há pouco tempo (máquina desligada): normal, tom neutro, com o ícone de relógio. */
.il-tom-desligada {
  --il-cor: #8796A1;
  --il-cor-texto: #5B6B77;
  --il-halo: #E4E9ED;
}

.il-tom-cinza {
  --il-cor: #8796A1;
  --il-cor-texto: #5B6B77;
  --il-halo: #E4E9ED;
}

.il-luz {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 999px;
  background-color: var(--il-cor);
  box-shadow: 0 0 0 5px var(--il-halo);
}

.il-situacao {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--il-cor-texto);
}

.il-faixa {
  height: 10px;
  flex: none;
  background-color: var(--il-cor);
}

.il-tom-vermelho .il-faixa,
.il-faixa-bloqueada {
  background: repeating-linear-gradient(135deg, #F5C518 0 10px, #22313B 10px 20px);
}

/* ---------- Plaquetas das máquinas (Início e detalhe) ---------- */

.il-placas {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}

.il-placa {
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

a.il-placa:hover {
  color: inherit;
  box-shadow: 0 0 0 2px var(--il-grafite);
}

.il-placa-corpo {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.il-placa-topo {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
}

.il-placa-nome {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.il-placa .il-luz {
  margin-top: 6px;
}

.il-frota {
  font-family: var(--il-condensada);
  font-weight: 700;
  font-size: 34px;
  line-height: 1;
  letter-spacing: 0.5px;
  overflow-wrap: anywhere;
}

.il-descricao {
  font-size: 14px;
  color: var(--il-texto-2);
}

.il-situacao-2 {
  font-size: 14px;
  color: var(--il-texto-2);
  margin-top: -6px;
}

.il-placa-meta {
  margin-top: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 14px;
  color: var(--il-texto-2);
  border-top: 1px solid var(--il-divisor);
  padding-top: 10px;
}

.il-placa-meta span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Plaqueta grande, no topo do detalhe da máquina. */
.il-placa-grande .il-placa-corpo {
  padding: 22px 24px 24px;
  gap: 16px;
}

.il-placa-grande .il-frota {
  font-size: 48px;
}

.il-placa-grande .il-descricao {
  font-size: 16px;
}

.il-placa-grande .il-luz {
  width: 18px;
  height: 18px;
  box-shadow: 0 0 0 6px var(--il-halo);
  margin: 12px 6px 0 0;
}

.il-placa-grande .il-situacao {
  font-size: 17px;
}

.il-placa-campos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px 24px;
  border-top: 1px solid var(--il-divisor);
  padding-top: 16px;
}

/* ---------- Faixa de resumo do Início ---------- */

.il-resumo {
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 14px;
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.il-indicador {
  padding: 18px 22px;
  display: flex;
  gap: 14px;
  align-items: center;
  color: inherit;
  text-decoration: none;
  /* Divisores entre os indicadores, também quando a faixa quebra em mais de uma linha. */
  box-shadow: -1px 0 0 var(--il-divisor), 0 -1px 0 var(--il-divisor);
}

a.il-indicador:hover {
  color: inherit;
  background-color: #FFF9F2;
}

.il-indicador-icone {
  width: 44px;
  height: 44px;
  flex: none;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.il-ico-verde {
  background-color: #E3F4EC;
  color: #17845A;
}

.il-ico-azul {
  background-color: #E6EEF7;
  color: #2F6FB0;
}

.il-ico-laranja {
  background-color: #FFEBD6;
  color: #A35700;
}

.il-ico-vermelho {
  background-color: #FCE7E3;
  color: #C2412E;
}

.il-indicador-texto {
  display: flex;
  flex-direction: column;
}

.il-numero {
  font-family: var(--il-condensada);
  font-weight: 600;
  font-size: 30px;
  line-height: 1;
}

.il-rotulo {
  font-size: 14px;
  color: var(--il-texto-2);
}

a.il-indicador .il-rotulo {
  color: var(--il-link);
  font-weight: 500;
}

/* ---------- Gráficos ---------- */

.il-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 14px;
  color: var(--il-texto-3);
}

.il-legenda span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.il-amostra {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  flex: none;
}

.il-amostra-desbloqueios {
  background-color: var(--il-desbloqueio);
}

.il-amostra-negados {
  background-color: var(--il-negado);
}

.il-grafico {
  margin: 0;
  display: flex;
  gap: 10px;
}

.il-grafico-eixo {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 216px;
  margin: -8px 0 0;
  font-size: 12px;
  line-height: 16px;
  color: #5B6B77;
  text-align: right;
  min-width: 2ch;
}

.il-grafico-area {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.il-grafico-svg {
  display: block;
  width: 100%;
  height: 200px;
  overflow: visible;
}

.il-grafico-dias {
  display: flex;
  font-size: 12px;
  color: #5B6B77;
}

.il-grafico-dias span {
  flex: 1;
  min-width: 0;
  text-align: center;
}

.il-grafico-dias .il-hoje {
  color: var(--il-grafite);
  font-weight: 600;
}

@media (max-width: 575.98px) {
  .il-grafico-dias {
    font-size: 11px;
  }

  /* No celular, um rótulo sim, outro não (o último, "Hoje", sempre aparece). */
  .il-grafico-dias span:nth-last-child(2n) {
    visibility: hidden;
  }
}

.il-numeros summary {
  font-size: 14px;
  color: var(--il-link);
  font-weight: 500;
  cursor: pointer;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
}

.il-numeros table {
  margin-top: 8px;
}

.il-numeros .table > :not(caption) > * > * {
  padding: 6px 10px;
  font-size: 14px;
}

/* Barras horizontais (acessos negados por motivo). */
.il-hbarras {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.il-hbarra {
  display: grid;
  grid-template-columns: minmax(150px, 280px) 1fr 3.5em;
  align-items: center;
  gap: 12px;
  font-size: 15px;
}

.il-hbarra-svg {
  display: block;
  width: 100%;
  height: 14px;
}

.il-hbarra-valor {
  font-weight: 600;
  text-align: right;
}

@media (max-width: 575.98px) {
  .il-hbarra {
    grid-template-columns: 1fr 3em;
    gap: 4px 10px;
  }

  .il-hbarra-svg {
    grid-row: 2;
    grid-column: 1 / -1;
  }

  .il-hbarra-valor {
    grid-row: 1;
    grid-column: 2;
  }
}

/* Medida N/199 (operadores autorizados). */
.il-medida {
  display: flex;
  align-items: center;
  gap: 10px;
}

.il-medida-svg {
  flex: 1;
  min-width: 40px;
  height: 8px;
  display: block;
}

.il-medida-valor {
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Quadro "Precisa da sua atenção" ---------- */

.il-atencao {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.il-atencao-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: inherit;
  text-decoration: none;
  padding: 12px;
  border-radius: 10px;
  background-color: #F1F4F7;
}

.il-atencao-item:hover {
  color: inherit;
  box-shadow: 0 0 0 2px var(--il-grafite);
}

.il-atencao-icone {
  margin-top: 1px;
  color: var(--il-texto-3);
  display: inline-flex;
}

.il-atencao-texto {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.il-atencao-titulo {
  font-weight: 600;
}

.il-atencao-detalhe {
  font-size: 14px;
  color: var(--il-texto-2);
}

.il-atencao-cadastro {
  background-color: #FFF6EC;
}

.il-atencao-cadastro .il-atencao-icone {
  color: #A35700;
}

.il-atencao-bloqueio {
  background-color: #FDEEEB;
}

.il-atencao-bloqueio .il-atencao-icone {
  color: #C2412E;
}

.il-atencao-prazo,
.il-atencao-sem_contato,
.il-atencao-perdidos {
  background-color: #FFF8DB;
}

.il-atencao-prazo .il-atencao-icone,
.il-atencao-sem_contato .il-atencao-icone,
.il-atencao-perdidos .il-atencao-icone {
  color: #8A6A00;
}

.il-tudo-certo {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px;
  border-radius: 10px;
  background-color: #E3F4EC;
  color: #125E40;
  font-weight: 600;
  margin: 0;
}

/* ---------- Etiquetas ---------- */

.il-etiqueta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.3;
  border-radius: 999px;
  padding: 4px 10px;
  background-color: #EEF2F5;
  color: #3D4C57;
}

.il-etiqueta-vermelha {
  background-color: #FDEEEB;
  color: #A8331F;
}

.il-etiqueta-ambar {
  background-color: #FFF3C7;
  color: #6E5200;
}

.il-etiqueta-verde {
  background-color: #E3F4EC;
  color: #17845A;
}

.il-etiqueta-azul {
  background-color: #E6EEF7;
  color: #245A91;
}

.il-etiqueta-laranja {
  background-color: #FFEBD6;
  color: #8A4A00;
}

.il-motivo {
  font-size: 14px;
  padding: 4px 12px;
}

.il-etiquetas {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.il-ok {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: #17845A;
  font-weight: 500;
}

.il-nao {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--il-texto-2);
}

.il-com-icone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.il-tipo-desbloqueio {
  color: #245A91;
}

.il-tipo-negado {
  color: #B5332A;
}

.il-metodo {
  color: var(--il-texto-3);
}

.il-chip-frota {
  font-family: var(--il-condensada);
  font-weight: 600;
  font-size: 17px;
  background-color: #EEF2F5;
  color: var(--il-grafite);
  border-radius: 6px;
  padding: 2px 8px;
  white-space: nowrap;
  text-decoration: none;
}

a.il-chip-frota:hover {
  background-color: #E0E7EC;
  color: var(--il-grafite);
  text-decoration: underline;
}

/* ---------- Lista de máquinas ---------- */

.il-barra-filtros {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
}

.il-pilulas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.il-pilula {
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid #C5CFD7;
  background-color: #FFFFFF;
  color: var(--il-grafite);
  font-size: 15px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.il-pilula:hover {
  color: var(--il-grafite);
  border-color: #8796A1;
}

.il-pilula[aria-current="true"] {
  background-color: var(--il-grafite);
  border-color: var(--il-grafite);
  color: #FFFFFF;
}

.il-pilula strong {
  font-weight: 700;
}

.il-ponto {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex: none;
}

.il-ponto-verde {
  background-color: #1E9E6A;
}

.il-ponto-ambar {
  background-color: #E5A800;
}

.il-busca {
  display: flex;
  align-items: center;
  gap: 8px;
  background-color: #FFFFFF;
  border: 1px solid #C5CFD7;
  border-radius: 8px;
  padding: 0 4px 0 12px;
  min-height: 44px;
  flex: 0 1 340px;
  margin: 0;
  color: var(--il-texto-2);
}

.il-busca:focus-within {
  outline: 3px solid var(--il-laranja);
  outline-offset: 1px;
}

.il-busca input {
  border: 0;
  outline: none;
  font-size: 15px;
  flex: 1;
  min-width: 0;
  background: transparent;
  color: var(--il-grafite);
  min-height: 42px;
}

.il-busca .btn {
  min-height: 36px;
  padding: 0 12px;
}

.il-linhas {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.il-linha-maquina {
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 12px;
  display: grid;
  grid-template-columns: minmax(200px, 1.3fr) minmax(150px, 1fr) minmax(170px, 1fr) minmax(90px, 0.6fr) minmax(180px, 1.3fr);
  gap: 18px;
  padding: 18px 22px;
  align-items: center;
  color: inherit;
  text-decoration: none;
}

a.il-linha-maquina:hover {
  color: inherit;
  box-shadow: 0 0 0 2px var(--il-grafite);
}

.il-linha-nome {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.il-linha-nome > div {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.il-linha-maquina .il-frota {
  font-size: 28px;
}

.il-campo {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.il-campo-rotulo {
  font-size: 13px;
  color: var(--il-texto-2);
}

.il-campo-valor {
  font-size: 15px;
}

.il-linha-maquina .il-situacao {
  font-size: 15px;
}

.il-linha-maquina .il-etiquetas {
  justify-content: flex-end;
}

@media (max-width: 1199.98px) {
  .il-linha-maquina {
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }

  .il-linha-maquina .il-etiquetas {
    justify-content: flex-start;
  }
}

/* ---------- Comparação do cadastro (dois painéis) ---------- */

.il-comparacao {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.il-comparacao-cabeca {
  display: flex;
  align-items: center;
  gap: 10px;
}

.il-comparacao .il-dados dd.il-difere {
  background-color: #FFF8DB;
  border-radius: 6px;
  padding: 0 6px;
  margin-left: -6px;
  font-weight: 600;
}

.il-legenda-difere {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--il-texto-2);
}

.il-legenda-difere::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background-color: #FFF8DB;
  border: 1px solid #F1DC8E;
}

/* ---------- Telas sem o menu (erros) ---------- */

.il-barra {
  background-color: var(--il-grafite);
  border-bottom: 3px solid var(--il-laranja);
}

.il-logo {
  height: 32px;
  width: auto;
  display: block;
}

.il-erro {
  max-width: 32rem;
  margin: 3rem auto;
  text-align: center;
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 14px;
  padding: 32px 28px;
}

.il-erro h1 {
  font-family: var(--il-condensada);
  font-weight: 700;
  font-size: 34px;
}

/* ---------- Telas de conta (login, senha, convite, 2FA) ---------- */

body.il-conta {
  background-color: var(--il-fundo);
}

.il-conta-pagina {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 64px 16px 40px;
}

.il-conta-cartao {
  width: 100%;
  max-width: 440px;
  background-color: var(--il-superficie);
  border: 1px solid var(--il-borda);
  border-radius: 14px;
  overflow: hidden;
}

.il-conta-faixa {
  height: 8px;
  background-color: var(--il-laranja);
}

.il-conta-corpo {
  padding: 28px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.il-logo-conta {
  height: 56px;
  width: auto;
  display: block;
  margin: 0 auto 20px;
}

.il-conta-titulo {
  font-family: var(--il-condensada);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.1;
  text-align: center;
  margin: 0 0 12px;
}

.il-conta-corpo .text-secondary {
  color: var(--il-texto-2) !important;
}

@media (max-width: 575.98px) {
  .il-conta-pagina {
    padding-top: 24px;
  }

  .il-conta-corpo {
    padding: 24px 20px 24px;
  }
}

.il-avatar-claro {
  width: 32px;
  height: 32px;
  font-size: 13px;
  background-color: #E4E9ED;
  color: var(--il-grafite);
}

/* O Bootstrap pinta os campos com a cor do fundo da página; aqui eles ficam brancos. */
.form-control,
.form-select {
  background-color: #FFFFFF;
}

/* Busca dentro de um painel (coluna): não estica na altura. */
.il-painel > .il-busca,
.il-painel .il-busca {
  flex: none;
}

.il-painel > .il-busca {
  max-width: 460px;
}

/* O grafite do menu desce até o fim da página, mesmo em páginas longas. */
@media (min-width: 992px) {
  .il-app {
    background: linear-gradient(to right, var(--il-grafite) 248px, var(--il-fundo) 248px);
  }
}

.form-control:focus,
.form-select:focus {
  background-color: #FFFFFF;
  color: var(--il-grafite);
}