/* =========================================================
   1) Tokens & Variáveis - Paleta de Cores EcoFrota
========================================================= */
:root {
  /* ===== PRIMÁRIA (Verde Institucional) ===== */
  --primary: #267061;           /* Verde oficial EcoFrota */
  --primary-dark: #1a5045;      /* Verde mais escuro (hover, active) */
  --primary-light: #2e8976;     /* Verde mais claro (destaque) */
  --primary-lighter: #e6f4f1;   /* Verde muito claro (backgrounds) */
  
  /* ===== SECUNDÁRIA ===== */
  --secondary: #6c757d;         /* Cinza neutro */
  --secondary-dark: #545b62;    /* Cinza escuro */
  --secondary-light: #d6d8db;   /* Cinza claro */
  
  /* ===== STATUS (Semáforo) ===== */
  --success: #28a745;           /* Verde (aprovado, ativo) */
  --success-dark: #1e7e34;      /* Verde escuro (hover) */
  --success-light: #d4edda;     /* Verde claro (background) */
  
  --warning: #f6c23e;           /* Amarelo (pendente, atenção) */
  --warning-dark: #dda20a;      /* Amarelo escuro (hover) */
  --warning-light: #fff3cd;     /* Amarelo claro (background) */
  
  --danger: #dc3545;            /* Vermelho (erro, recusado) */
  --danger-dark: #bd2130;       /* Vermelho escuro (hover) */
  --danger-light: #f8d7da;      /* Vermelho claro (background) */
  
  --info: #36b9cc;              /* Azul claro (informação) */
  --info-dark: #258391;         /* Azul claro escuro (hover) */
  --info-light: #d1ecf1;        /* Azul claro (background) */
  
  /* ===== NEUTRAS (Escalas de Cinza) ===== */
  --gray-100: #f8f9fc;          /* Quase branco */
  --gray-200: #e3e6f0;          /* Cinza muito claro */
  --gray-300: #dddfeb;          /* Cinza claro */
  --gray-400: #d1d3e2;          /* Cinza médio claro */
  --gray-500: #b7b9cc;          /* Cinza médio */
  --gray-600: #858796;          /* Cinza médio escuro */
  --gray-700: #6e707e;          /* Cinza escuro */
  --gray-800: #5a5c69;          /* Cinza muito escuro */
  --gray-900: #3a3b45;          /* Quase preto */
  
  /* ===== TEXTO ===== */
  --text-primary: #267061;      /* Verde para títulos */
  --text-dark: #5a5c69;         /* Cinza escuro para textos */
  --text-muted: #858796;        /* Cinza para textos secundários */
  --text-white: #ffffff;        /* Branco */
  
  /* ===== FUNDOS ===== */
  --bg-body: #f8f9fc;           /* Fundo geral da página */
  --bg-card: #ffffff;           /* Fundo de cards */
  --bg-hover: #eaecf4;          /* Hover em listas */
  
  /* ===== BORDAS ===== */
  --border-color: #e3e6f0;      /* Borda padrão */
  --border-radius: 0.35rem;     /* Arredondamento padrão */
  
  /* ===== SOMBRAS ===== */
  --shadow-sm: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --shadow: 0 0.15rem 1.75rem rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 1rem 3rem rgba(0, 0, 0, 0.175);
}


#content-wrapper,
#content,
.container-fluid  {
  background-color: #f5f5f5 !important;
}


/* =========================================================
   2) Utilitários & Base
========================================================= */

/* ===== Classes de Cor de Texto ===== */
.text-primary-custom { color: var(--primary) !important; }
.text-success-custom { color: var(--success) !important; }
.text-warning-custom { color: var(--warning) !important; }
.text-danger-custom { color: var(--danger) !important; }
.text-muted-custom { color: var(--text-muted) !important; }

/* ===== Classes de Fundo ===== */
.bg-primary-custom { background-color: var(--primary) !important; }
.bg-primary-light { background-color: var(--primary-lighter) !important; }
.bg-success-light { background-color: var(--success-light) !important; }
.bg-warning-light { background-color: var(--warning-light) !important; }
.bg-danger-light { background-color: var(--danger-light) !important; }

/* ===== Classes de Borda ===== */
.border-primary-custom { border-color: var(--primary) !important; }
.border-success-custom { border-color: var(--success) !important; }
.border-warning-custom { border-color: var(--warning) !important; }
.border-danger-custom { border-color: var(--danger) !important; }

.min-h-100vh {
  min-height: 100vh !important;
}

.invalid-form,
.invalid-image {
  border: 1px solid #ff0000;
}

.btn .spinner-border {
  width: 1.2rem;
  height: 1.2rem;
}

.card-header {
  background-color: rgba(228, 228, 228, 0.3);

}

/* .card-body {
  padding: 0;
} */

.text-blue {
  color: #008ED3 !important;
}

input {
  border-radius: 5px;
}

/* ✅ Remover setinhas dos inputs numéricos */
/* Chrome, Safari, Edge, Opera */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.teste {
  border-color: #424242;
  color: #424242;
}

.shadow-sm {
  box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.25);
}

.table {
  margin-bottom: 0;
}

/* base dos inputs */

::placeholder {
  color: #424242;
}

/* tabela em geral */
/* #lista-usuarios { */
  /* border-radius: 8px ; */
  /* overflow: hidden; 
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  background: #fff;
  font-size: 14px;
  border-radius: 0.35rem;

} */

/* header */
/* #lista-usuarios thead td,
#lista-usuarios thead th {
  color: #424242;       
  font-weight: 600;
  padding: 12px;
  border: none;
}
#lista-usuarios thead tr {
  background-color: transparent;
} */
/* #lista-usuarios thead tr {
  background-color: #f4f5f7;
  color: black;
}

#lista-usuarios thead td {
  color: #fff; 
  font-weight: 600;
  padding: 12px;
  border: none;
} */

/* linhas do corpo */
/* #lista-usuarios tbody tr:nth-child(odd) {
  background-color: #e4e4e4;
}

#lista-usuarios tbody tr:nth-child(even) {
  background-color: #ffffff; 
} */
/* hover */
/* #lista-usuarios tbody tr:hover {
  background-color: #cce5ff; 
  transition: background 0.2s ease-in-out;
} */

/* células */
/* #lista-usuarios tbody td {
  padding: 12px;
  color: #333;
} */

/* botões da coluna ação */
/* #lista-usuarios .btn {
  border-radius: 5px;
  padding: 4px 12px;
  font-weight: 500;
  background: #091524;
  color: #fff;
  border: none;
  transition: all 0.2s ease;
} */

/* #lista-usuarios .btn:hover {
  background: linear-gradient(90deg, #005bb5, #008ae6);
  transform: scale(1.05);
} */



/* ------------------------------------------------------------------ */

/* Tabs */
.nav-tabs {
  border-bottom: 0;
}

/* Datepicker (webkit) */
::-webkit-calendar-picker-indicator {
  border-radius: 50%;
  margin-left: .1rem;
  width: 14px;
  height: 14px;
  cursor: pointer;
}

::-webkit-calendar-picker-indicator:hover {
  box-shadow: 0 0 0 4px rgba(0, 0, 0, .04);
}

/* =========================================================
   3) Componentes
========================================================= */
/* Pager */
#pager {
  display: flex;
  width: 100%;
  justify-content: flex-end;
  gap: 4px;
}

#pager .stepper-before,
#pager .stepper-next,
#pager .stepper {
  display: inline-block;
  font-weight: 400;
  text-align: center;
  user-select: none;
  padding: .25rem .5rem;
  font-size: .875rem;
  line-height: 1.5;
  border-radius: .2rem;
  transition: color .15s, background-color .15s, border-color .15s, box-shadow .15s;
  color: var(--primary);
  border: 1px solid var(--primary);
  cursor: pointer;
}

#pager .stepper-before:hover,
#pager .stepper-next:hover,
#pager .stepper:hover,
#pager .stepper-active {
  color: #fff;
  background-color: var(--primary);
  border-color: var(--primary);
}

/* Botões */
.btn-user {
  height: 44px;
  border-radius: 8px;
  font-weight: 600;
}

/* ✅ Sobrescrever TODOS os estados do botão primário */
.btn-primary {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
}

.btn-primary:hover {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}

.btn-primary:focus,
.btn-primary.focus {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(38, 112, 97, 0.5) !important;
  color: #fff !important;
}

.btn-primary:active,
.btn-primary.active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--primary-dark) !important;
  border-color: var(--primary-dark) !important;
  color: #fff !important;
}

.btn-primary:not(:disabled):not(.disabled):active:focus,
.btn-primary:not(:disabled):not(.disabled).active:focus,
.show > .btn-primary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(38, 112, 97, 0.5) !important;
}

.btn-primary.disabled,
.btn-primary:disabled {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
  color: #fff !important;
  opacity: 0.65;
}

.btn-secondary {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
}

.btn-secondary:hover {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
  color: #fff !important;
}

.btn-secondary:focus,
.btn-secondary.focus {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
  color: #fff !important;
}

.btn-secondary:active,
.btn-secondary.active,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle {
  background-color: var(--secondary-dark) !important;
  border-color: var(--secondary-dark) !important;
  color: #fff !important;
}

.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.show > .btn-secondary.dropdown-toggle:focus {
  box-shadow: 0 0 0 0.2rem rgba(108, 117, 125, 0.5) !important;
}

.btn-secondary.disabled,
.btn-secondary:disabled {
  background-color: var(--secondary) !important;
  border-color: var(--secondary) !important;
  color: #fff !important;
  opacity: 0.65;
}

/* ✅ Sobrescrever backgrounds e borders primários do Bootstrap */
.bg-primary {
  background-color: var(--primary) !important;
}

a.bg-primary:hover,
a.bg-primary:focus,
button.bg-primary:hover,
button.bg-primary:focus {
  background-color: var(--primary-dark) !important;
}

.border-primary {
  border-color: var(--primary) !important;
}

.badge-primary {
  background-color: var(--primary) !important;
  color: #fff !important;
}

a.badge-primary:hover,
a.badge-primary:focus {
  background-color: var(--primary-dark) !important;
  color: #fff !important;
}

/* ✅ Links e elementos ativos com cor primária */
/* a {
  color: var(--primary) !important;
}

a:hover {
  color: var(--primary-dark) !important;
} */

/* ✅ Paginação */
.page-link {
  color: var(--primary) !important;
}

.page-link:hover {
  color: var(--primary-dark) !important;
}

.page-item.active .page-link {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ✅ Gradientes primários */
.bg-gradient-primary {
  background-color: var(--primary) !important;
  background-image: linear-gradient(180deg, var(--primary) 10%, var(--primary-dark) 100%) !important;
}

/* ✅ Border-left colorido (cards) */
.border-left-primary {
  border-left-color: var(--primary) !important;
}

.border-bottom-primary {
  border-bottom-color: var(--primary) !important;
}

/* ✅ Dropdowns e menus */
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--primary) !important;
  color: #fff !important;
}

/* ✅ Nav pills */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--primary) !important;
}

/* ✅ List group */
.list-group-item.active {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ✅ Progress bar */
.progress-bar {
  background-color: var(--primary) !important;
}

/* ✅ Custom controls (checkboxes, radios) */
.custom-control-input:checked ~ .custom-control-label::before {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
  box-shadow: 0 0 0 0.2rem rgba(38, 112, 97, 0.25) !important;
}

.custom-control-input:focus:not(:checked) ~ .custom-control-label::before {
  border-color: var(--primary-light) !important;
}

/* ✅ Alerts primários */
.alert-primary {
  color: #0f3a31;
  background-color: #d4ece8;
  border-color: #c2e5df;
}

.alert-primary hr {
  border-top-color: #b0ddd4;
}

.alert-primary .alert-link {
  color: #061611;
}

/* ✅ Sidebar itens ativos */
.sidebar .nav-item .collapse .collapse-inner .collapse-item.active {
  color: var(--primary) !important;
}

/* ✅ Topbar dropdown header */
.topbar .dropdown-list .dropdown-header {
  background-color: var(--primary) !important;
  border-color: var(--primary) !important;
}

/* ✅ Asteriscos vermelhos para campos obrigatórios */
label .text-danger,
label.required::after {
  color: var(--danger) !important;
}

/* =========================================================
   4) Fundo / Planos de fundo
========================================================= */
.bg-filtrando {
  background-color: rgba(28, 200, 138, .4);
  background-image: linear-gradient(180deg, rgba(28, 200, 138, .3) 10%, rgba(19, 133, 92, .3) 100%);
  background-size: cover;
}

/* Tela de login com overlay e imagem ancorada à direita/baixo */
.bg-onboard {
  background:
    linear-gradient(rgba(0, 20, 47, .55), rgba(0, 20, 47, .55)),
    url('/img/background-predio.png') right bottom / cover no-repeat;
}

.bg-login-image {
  background-image: url('./img/alphacode_quadrado.jpg');
}

.bg-password-image {
  background-image: url('./img/alphacode_quadrado.jpg');
}

/* Rodapé login */
.footer-login p {
  color: #fff;
  font-size: small;
}

.footer-login img {
  height: 23px;
}

/* =========================================================
   5) Página: Login
========================================================= */
/* Layout do painel central */
.login-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.login-panel {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

#form-login {
  padding: 0 30px;
}

/* Logotipo responsivo */
.logotipo {
  width: clamp(220px, 40vw, 420px);
  /* min, preferido, max */
  height: auto;
  display: block;
  margin: 0 auto 70px;
}

/* Campos do formulário */
.form-control-user {
  height: 44px;
  border-radius: 8px;
  border: 0;
  padding: 0 14px;
  font-size: 16px;
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .12);
}

/* Campo senha (cinza levinho) + olho */
#login-password {
  position: relative;
}

#senha {
  padding-right: 44px;
  /* background: rgba(230, 233, 236, .95); */
}

#olho-senha {
  position: absolute;
  right: 14px;
  top: 0;
  bottom: 0;
  margin: auto 0;
  width: 22px;
  height: 22px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

/* Link "Esqueceu a senha?" */
.forgot-link {
  color: rgba(255, 255, 255, .85);
  text-decoration: none;
  font-size: 14px;
}

.forgot-link:hover {
  text-decoration: underline;
  color: #fff;
}

/* Botão de Login - Cor específica para combinar com fundo escuro */
#btn-login,
.login-panel .btn-primary {
  background-color: #2a8fa0 !important;
  border-color: #2a8fa0 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(42, 143, 160, 0.4);
  transition: all 0.3s ease;
}

#btn-login:hover,
.login-panel .btn-primary:hover {
  background-color: #1e6b7a !important;
  border-color: #1e6b7a !important;
  color: #fff !important;
  box-shadow: 0 6px 16px rgba(42, 143, 160, 0.5);
  transform: translateY(-1px);
}

#btn-login:focus,
.login-panel .btn-primary:focus {
  background-color: #1e6b7a !important;
  border-color: #1e6b7a !important;
  box-shadow: 0 0 0 0.2rem rgba(42, 143, 160, 0.5) !important;
  color: #fff !important;
}

#btn-login:active,
.login-panel .btn-primary:active {
  background-color: #155a68 !important;
  border-color: #155a68 !important;
  color: #fff !important;
  transform: translateY(0);
}

/* =========================================================
   6) Avatar (módulo usuários)
========================================================= */
.img-avatar {
  position: relative;
  left: 10px;
  width: 180px !important;
  height: 180px !important;
  border-radius: 50%;
  margin: 0 0 30px 0 !important;
  cursor: pointer;
  object-fit: cover;
}

#accordionSidebar {
  background-color: var(--primary);
}

/* =========================================================
   7) Responsividade
========================================================= */
@media (max-width: 383px) {
  /* ajuste fino em devices muito estreitos */
}

/* ✅ Checkbox Usuário Master - Estilo customizado */
#usuario_master {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  position: relative;
  cursor: pointer;
}

#usuario_master:checked {
  background-color: #F1C40F !important;
  border-color: #E67E22 !important;
  box-shadow: 0 3px 8px rgba(241, 196, 15, 0.4) !important;
}

#usuario_master:checked::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 14px;
  font-weight: bold;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

/* #usuario_master:hover {
  border-color: #E67E22 !important;
  box-shadow: 0 2px 6px rgba(241, 196, 15, 0.3) !important;
  transform: scale(1.45) !important;
} */

#usuario_master:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(241, 196, 15, 0.3) !important;
}

/* =========================================================
   8) Botões de Ação em Tabelas (Padronização Global)
========================================================= */
/* Container de botões de ação - manter sempre na horizontal */
table td:last-child .btn-group-acoes {
  white-space: nowrap;
  min-width: 150px;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  flex-wrap: nowrap;
  justify-content: flex-start;
}

table th:last-child {
  min-width: 150px;
}

/* Botões de ação - altura padrão */
table td:last-child .btn-group-acoes .btn,
table td:last-child .btn-group-acoes a.btn {
  flex-shrink: 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.25rem 0.5rem;
  line-height: 1.5;
  height: 2rem;
  min-width: 2rem;
}

/* Botões quadrados (só com ícone) - aprovar/cancelar */
table td:last-child .btn-group-acoes button.btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  min-width: 2rem;
}

/* Botão "Ver" com texto - mesma altura dos botões quadrados */
table td:last-child .btn-group-acoes a.btn {
  height: 2rem;
  padding: 0 0.5rem;
  min-width: auto;
}

/* Alinhamento de ícones */
table td:last-child .btn-group-acoes .btn i,
table td:last-child .btn-group-acoes a.btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  vertical-align: middle;
  margin: 0;
}

/* Remover margem dos ícones nos botões quadrados */
table td:last-child .btn-group-acoes button.btn i.fas {
  margin-right: 0;
  font-size: 0.875rem;
}

/* Espaçamento entre ícone e texto no botão "Ver" (se houver ícone) */
table td:last-child .btn-group-acoes a.btn i.fas {
  margin-right: 0.25rem;
}

/* =========================================================
   9) Tabelas - Prevenir Quebra de Linha e Scroll Horizontal
========================================================= */
/* ✅ Container table-responsive - garantir scroll horizontal */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

/* ✅ Tabelas - evitar quebra de linha nas células */
table.table {
  width: 100%;
  table-layout: auto;
  border-collapse: collapse;
}

/* ✅ Células da tabela - não quebrar linha */
table.table td,
table.table th {
  white-space: nowrap;
  padding: 0.75rem;
  vertical-align: middle;
}

/* ✅ Larguras mínimas para colunas importantes (ajustar conforme necessário) */
table.table th:nth-child(1),
table.table td:nth-child(1) {
  min-width: 100px; /* Data */
}

table.table th:nth-child(2),
table.table td:nth-child(2) {
  min-width: 150px; /* Veículo */
}

table.table th:nth-child(3),
table.table td:nth-child(3) {
  min-width: 180px; /* Motorista/Responsável */
}

table.table th:nth-child(4),
table.table td:nth-child(4) {
  min-width: 80px; /* KM */
}

table.table th:nth-child(5),
table.table td:nth-child(5) {
  min-width: 80px; /* Litros */
}

table.table th:nth-child(6),
table.table td:nth-child(6) {
  min-width: 100px; /* Litros (R$) */
}

table.table th:nth-child(7),
table.table td:nth-child(7) {
  min-width: 100px; /* Valor (R$) */
}

table.table th:nth-child(8),
table.table td:nth-child(8) {
  min-width: 150px; /* Posto */
}

table.table th:nth-child(9),
table.table td:nth-child(9) {
  min-width: 120px; /* Cidade */
}

table.table th:nth-child(10),
table.table td:nth-child(10) {
  min-width: 120px; /* Autonomia Média */
}

table.table th:nth-child(11),
table.table td:nth-child(11) {
  min-width: 120px; /* Meta Autonomia */
}

table.table th:nth-child(12),
table.table td:nth-child(12) {
  min-width: 100px; /* Custo/Km */
}

table.table th:nth-child(13),
table.table td:nth-child(13) {
  min-width: 120px; /* Status Solicitação */
}

table.table th:nth-child(14),
table.table td:nth-child(14) {
  min-width: 120px; /* Status Hodômetro */
}

/* ✅ Última coluna (Ação) - já tem regras acima, mas garantir */
table.table th:last-child,
table.table td:last-child {
  min-width: 150px;
  white-space: nowrap;
}

/* ✅ Badges e elementos dentro das células - não quebrar */
table.table td .badge {
  white-space: nowrap;
  display: inline-block;
}

/* ✅ Links dentro das células - não quebrar */
table.table td a {
  white-space: nowrap;
  display: inline-block;
}

/* ✅ Garantir que números e valores monetários não quebrem */
table.table td[data-type="number"],
table.table td[data-type="currency"] {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   9) Guia de Uso da Paleta de Cores
========================================================= */

/*
  ===== EXEMPLOS DE USO =====
  
  1. BOTÕES:
  --------------------------------------------------
  <button style="background: var(--primary); color: white;">Botão Primário</button>
  <button style="background: var(--success); color: white;">Aprovado</button>
  <button style="background: var(--danger); color: white;">Recusado</button>
  
  2. BADGES:
  --------------------------------------------------
  <span style="background: var(--success-light); color: var(--success-dark);">Ativo</span>
  <span style="background: var(--warning-light); color: var(--warning-dark);">Pendente</span>
  <span style="background: var(--danger-light); color: var(--danger-dark);">Recusado</span>
  
  3. CARDS:
  --------------------------------------------------
  <div style="background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--border-radius);">
    Card com cores padrão
  </div>
  
  4. TEXTOS:
  --------------------------------------------------
  <h1 style="color: var(--text-primary);">Título Azul</h1>
  <p style="color: var(--text-dark);">Texto normal</p>
  <small style="color: var(--text-muted);">Texto secundário</small>
  
  5. SOMBRAS:
  --------------------------------------------------
  <div style="box-shadow: var(--shadow-sm);">Sombra pequena</div>
  <div style="box-shadow: var(--shadow);">Sombra média</div>
  <div style="box-shadow: var(--shadow-lg);">Sombra grande</div>
  
  ===== CORES DISPONÍVEIS =====
  
  PRIMÁRIA:
  - #267061 (var(--primary))        → Verde oficial EcoFrota
  - #1a5045 (var(--primary-dark))   → Hover/Active
  - #2e8976 (var(--primary-light))  → Destaque
  - #e6f4f1 (var(--primary-lighter))→ Background suave
  
  STATUS:
  - #28a745 (var(--success))        → Verde (Aprovado)
  - #f6c23e (var(--warning))        → Amarelo (Pendente)
  - #dc3545 (var(--danger))         → Vermelho (Recusado)
  - #36b9cc (var(--info))           → Azul claro (Info)

  NEUTRAS:  
  - #f8f9fc (var(--gray-100))       → Quase branco
  - #e3e6f0 (var(--gray-200))       → Bordas
  - #858796 (var(--gray-600))       → Texto secundário
  - #3a3b45 (var(--gray-900))       → Texto escuro
*/