@import url('lorica-fonts.css');

/*
 * ARX . Design System da Lorica Uniformes
 * Extraido da proposta de tela aprovada (Proposta-Tela-Dashboard-Arx.html).
 *
 * Como usar: carregue este arquivo DEPOIS do tailwind-standalone.css em cada tela.
 *   <link rel="stylesheet" href="/css/arx.css">
 *
 * Estrutura:
 *   1. Tokens          - a paleta, tipografia e medidas da marca
 *   2. Remapeamento    - as variaveis --brand-* antigas (azuis) apontam para o navy
 *   3. Base            - fundo, texto e titulos
 *   4. Componentes Arx - classes .arx-* para markup novo ou refatorado
 *   5. Camada de adocao- harmoniza as classes Tailwind que as telas ja usam
 *
 * Regra de ouro da camada 5: SO propriedades visuais (cor, borda, raio, sombra,
 * fonte). Nunca layout (display, flex, grid, width), para nao quebrar as telas.
 */

/* ── 1. Tokens ─────────────────────────────────────────────────────────────── */
:root {
  --arx-navy:      #193B4F;
  --arx-navy-ink:  #1D2F3A;
  --arx-navy-deep: #12303F;
  --arx-amber:     #D07E1F;
  --arx-terracotta:#BB4731;
  --arx-green:     #288C46;
  --arx-beige:     #EACFA5;
  --arx-cream:     #F0EADF;
  --arx-offwhite:  #F5F2EC;
  --arx-white:     #FFFFFF;
  --arx-soft:      #606E78;
  --arx-line:      #ece4d6;

  --arx-font-display: "Playfair Display", Georgia, serif;
  --arx-font-ui: "Foco", "Hanken Grotesk", "Figtree", "Mulish", system-ui, sans-serif;

  --arx-radius: 10px;
  --arx-ctrl: 8px;
  --arx-shadow: 0 1px 3px rgba(25, 59, 79, .08);
  --arx-shadow-lift: 0 6px 20px rgba(25, 59, 79, .12);
}

/* ── 2. Remapeamento das variaveis antigas (azul -> navy da marca) ─────────── */
:root {
  --brand-50:  #F5F2EC;
  --brand-100: #F0EADF;
  --brand-500: #2C5468;
  --brand-600: #193B4F;
  --brand-700: #12303F;
  --brand-900: #0C2532;
  --brand: #193B4F;
  --brand-light: #F0EADF;
  --danger:  #BB4731;
  --warning: #D07E1F;
  --success: #288C46;
}

/* ── 3. Base ───────────────────────────────────────────────────────────────── */
body {
  background: var(--arx-offwhite);
  color: var(--arx-navy-ink);
  font-family: var(--arx-font-ui);
  line-height: 1.45;
}
h1, h2, h3 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; }

/* ── 4. Componentes Arx ────────────────────────────────────────────────────── */
.arx-kicker {
  text-transform: uppercase; color: var(--arx-amber); font-weight: 700;
  font-size: 11px; letter-spacing: .2em; margin: 0;
}
.arx-h1 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; font-size: 29px; margin: 0; }
.arx-h2 { font-family: var(--arx-font-display); color: var(--arx-navy); font-weight: 600; font-size: 21px; margin: 0; }
.arx-sub { color: var(--arx-soft); margin: 4px 0 0; font-size: 15px; }
.arx-filete { height: 3px; width: 54px; background: var(--arx-amber); border-radius: 2px; margin: 8px 0 18px; }

/* Barra superior da marca */
.arx-appbar {
  background: var(--arx-navy); color: var(--arx-offwhite);
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 28px; position: sticky; top: 0; z-index: 30;
}
.arx-logo {
  width: 38px; height: 38px; background: var(--arx-offwhite); color: var(--arx-navy);
  border-radius: var(--arx-ctrl); display: flex; align-items: center; justify-content: center;
  font-family: var(--arx-font-display); font-weight: 600; font-size: 22px;
}
.arx-avatar {
  width: 32px; height: 32px; border-radius: 50%; background: var(--arx-amber); color: var(--arx-white);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px;
}

/* Cartao e resumo */
.arx-card {
  background: var(--arx-white); border: 1px solid var(--arx-beige);
  border-radius: var(--arx-radius); box-shadow: var(--arx-shadow); padding: 16px 20px;
}
.arx-resumo {
  background: var(--arx-white); border: 1px solid var(--arx-beige); border-radius: var(--arx-radius);
  box-shadow: var(--arx-shadow); padding: 16px 20px; font-size: 16px;
  display: flex; align-items: center; gap: 12px;
}
.arx-badge {
  background: var(--arx-terracotta); color: var(--arx-white); border-radius: 999px;
  padding: 2px 10px; font-size: 13px; font-weight: 700;
}

/* Botao grande de acao (o padrao guiado do Arx) */
.arx-action {
  display: flex; align-items: center; gap: 16px; text-align: left; cursor: pointer; width: 100%;
  background: var(--arx-white); border: 1px solid var(--arx-beige); border-radius: var(--arx-radius);
  box-shadow: var(--arx-shadow); padding: 18px 20px; font-family: inherit;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.arx-action:hover { transform: translateY(-2px); box-shadow: var(--arx-shadow-lift); border-color: var(--arx-amber); }
.arx-action:focus-visible { outline: 3px solid rgba(208, 126, 31, .4); outline-offset: 2px; }
.arx-action .ic {
  width: 46px; height: 46px; border-radius: var(--arx-ctrl); flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
}
.arx-action .ic svg { width: 24px; height: 24px; }
.arx-action.primary .ic { background: var(--arx-navy); color: var(--arx-offwhite); }
.arx-action.accent  .ic { background: var(--arx-amber); color: var(--arx-white); }
.arx-action.warn    .ic { background: var(--arx-terracotta); color: var(--arx-white); }
.arx-action .tx b { display: block; font-size: 17px; color: var(--arx-navy); }
.arx-action .tx span { font-size: 13px; color: var(--arx-soft); }

/* Botoes */
.arx-btn {
  padding: 10px 16px; background: var(--arx-navy); color: var(--arx-white); border: none;
  border-radius: var(--arx-ctrl); font-family: var(--arx-font-ui); font-size: 14px;
  font-weight: 600; cursor: pointer; transition: filter .12s;
}
.arx-btn:hover { filter: brightness(1.1); }
.arx-btn.ok { background: var(--arx-green); }
.arx-btn.alerta { background: var(--arx-terracotta); }
.arx-btn.secundario { background: transparent; color: var(--arx-navy); border: 1px solid var(--arx-beige); }
.arx-btn:disabled { opacity: .6; cursor: default; }

/* Marcadores de estado (substituem emoji, proibidos no design system) */
.arx-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.arx-dot.ok { background: var(--arx-green); }
.arx-dot.atencao { background: var(--arx-amber); }
.arx-dot.alerta { background: var(--arx-terracotta); }
.arx-vazio { color: var(--arx-soft); font-size: 13px; font-style: italic; }

/* ── 5. Camada de adocao (harmoniza o Tailwind que ja existe) ──────────────── */
/* Superficies */
.bg-white { background-color: var(--arx-white) !important; }
.bg-gray-50, .bg-slate-50, .bg-gray-100, .bg-slate-100 { background-color: var(--arx-cream) !important; }
.hover\:bg-gray-50:hover, .hover\:bg-slate-50:hover, .hover\:bg-gray-100:hover { background-color: var(--arx-cream) !important; }
/* O fundo da PAGINA e off-white; o creme fica para paineis e hover. */
body.bg-gray-50, body.bg-gray-100, body.bg-slate-50, body.bg-slate-100 { background-color: var(--arx-offwhite) !important; }

/* Bordas */
.border-gray-100, .border-gray-200, .border-gray-300,
.border-slate-100, .border-slate-200, .border-slate-300 { border-color: var(--arx-beige) !important; }

/* Texto */
.text-gray-900, .text-gray-800, .text-slate-900, .text-slate-800 { color: var(--arx-navy-ink) !important; }
.text-gray-700, .text-slate-700 { color: var(--arx-navy-ink) !important; }
.text-gray-600, .text-gray-500, .text-gray-400,
.text-slate-600, .text-slate-500, .text-slate-400 { color: var(--arx-soft) !important; }

/* Cor de marca antiga (azul) -> navy */
.bg-brand-600, .bg-brand-700, .bg-blue-600, .bg-blue-700, .bg-blue-500 { background-color: var(--arx-navy) !important; }
.text-brand-600, .text-brand-700, .text-blue-600, .text-blue-700 { color: var(--arx-navy) !important; }
.border-brand-600, .border-blue-600, .border-blue-500 { border-color: var(--arx-navy) !important; }
.hover\:bg-brand-700:hover, .hover\:bg-blue-700:hover { background-color: var(--arx-navy-deep) !important; }
.bg-brand-50, .bg-brand-100, .bg-blue-50, .bg-blue-100 { background-color: var(--arx-cream) !important; }

/* Semantica: verde, ambar, vermelho da marca */
.bg-green-600, .bg-green-500, .bg-emerald-600 { background-color: var(--arx-green) !important; }
.text-green-700, .text-green-600, .text-emerald-600 { color: var(--arx-green) !important; }
.bg-red-600, .bg-red-500 { background-color: var(--arx-terracotta) !important; }
.text-red-700, .text-red-600, .text-red-500 { color: var(--arx-terracotta) !important; }
.bg-yellow-500, .bg-amber-500, .bg-orange-500 { background-color: var(--arx-amber) !important; }
.text-yellow-700, .text-amber-700, .text-amber-600 { color: var(--arx-amber) !important; }

/* Raios e sombras */
.rounded-lg, .rounded-xl, .rounded-2xl { border-radius: var(--arx-radius) !important; }
.rounded, .rounded-md { border-radius: var(--arx-ctrl) !important; }
.shadow-sm, .shadow { box-shadow: var(--arx-shadow) !important; }
.shadow-md, .shadow-lg, .shadow-xl { box-shadow: var(--arx-shadow-lift) !important; }

/* Tipografia: titulos das telas ganham a fonte de exibicao e o navy da marca.
   O :not() preserva titulos intencionalmente claros (sobre fundo escuro). */
.text-2xl, .text-3xl, .text-xl { font-family: var(--arx-font-display); }
.text-xl:not(.text-white):not(.text-gray-100):not(.text-gray-200),
.text-2xl:not(.text-white):not(.text-gray-100):not(.text-gray-200),
.text-3xl:not(.text-white):not(.text-gray-100):not(.text-gray-200) { color: var(--arx-navy) !important; }

/* Formularios: campos maiores e mais legiveis (equipe pouco tecnica) */
input[type="text"], input[type="number"], input[type="email"], input[type="password"],
input[type="date"], input[type="search"], input[type="tel"], select, textarea {
  font-family: var(--arx-font-ui);
  border-color: var(--arx-beige);
  border-radius: var(--arx-ctrl);
  color: var(--arx-navy-ink);
  background-color: var(--arx-white);
}
input:focus, select:focus, textarea:focus {
  outline: 2px solid rgba(208, 126, 31, .35);
  outline-offset: 1px;
  border-color: var(--arx-amber);
}
label { color: var(--arx-navy-ink); font-weight: 600; }

/* Tabelas: cabecalho no padrao Arx */
table thead th {
  background: var(--arx-cream);
  color: var(--arx-navy);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: .08em;
  font-weight: 700;
  border-bottom: 1px solid var(--arx-beige);
}
table tbody td { border-bottom: 1px solid var(--arx-line); }

/* ── 6. Complemento da camada de adoção ────────────────────────────────────── */
/* As telas de CRM, Cadastros, Ficha Técnica e Indicadores usam tons que a
   camada 5 não alcançava: as pastilhas de status (bg-*-50/100 com text-*-800),
   os roxos e índigos fora da paleta, as superfícies escuras e os anéis de foco.
   Mesma regra de ouro: só propriedade visual, nunca layout. */

/* Tons suaves das pastilhas de status */
.bg-green-50, .bg-green-100, .bg-emerald-50, .bg-emerald-100,
.bg-teal-50, .bg-teal-100 { background-color: #E7F0EA !important; }
.bg-red-50, .bg-red-100, .bg-rose-50, .bg-rose-100 { background-color: #F3E7E4 !important; }
.bg-amber-50, .bg-amber-100, .bg-yellow-50, .bg-yellow-100,
.bg-yellow-200, .bg-orange-50, .bg-orange-100 { background-color: #F6EBDB !important; }
.bg-purple-50, .bg-purple-100, .bg-violet-50, .bg-violet-100,
.bg-pink-50, .bg-pink-100, .bg-indigo-50, .bg-indigo-100,
.bg-sky-50, .bg-sky-100, .bg-cyan-50, .bg-cyan-100 { background-color: var(--arx-cream) !important; }

/* Texto escuro das pastilhas */
.text-green-800, .text-green-900, .text-emerald-800 { color: #1A5C2E !important; }
.text-red-800, .text-red-900, .text-rose-800 { color: #9F3B29 !important; }
.text-amber-800, .text-amber-900, .text-yellow-800, .text-orange-800 { color: #8A5111 !important; }

/* Roxo, índigo, rosa e ciano estão fora da paleta: viram navy */
.text-purple-600, .text-purple-700, .text-purple-800, .text-purple-900,
.text-violet-600, .text-violet-700, .text-pink-600, .text-pink-700,
.text-indigo-600, .text-indigo-700, .text-indigo-800,
.text-sky-600, .text-sky-700, .text-cyan-600, .text-cyan-700,
.text-blue-800, .text-blue-900 { color: var(--arx-navy) !important; }
.bg-purple-600, .bg-purple-700, .bg-violet-600, .bg-pink-600,
.bg-indigo-600, .bg-indigo-700, .bg-sky-600, .bg-cyan-600,
.bg-blue-800, .bg-blue-900 { background-color: var(--arx-navy) !important; }

/* Laranja é âmbar da marca */
.text-orange-600, .text-orange-700 { color: var(--arx-amber) !important; }

/* Superfícies escuras: navy, nunca cinza-chumbo */
.bg-gray-700, .bg-gray-800, .bg-gray-900,
.bg-slate-700, .bg-slate-800, .bg-slate-900 { background-color: var(--arx-navy-deep) !important; }
.bg-gray-600, .bg-slate-600 { background-color: var(--arx-navy) !important; }
.bg-gray-200, .bg-gray-300, .bg-slate-200, .bg-slate-300 { background-color: #E4DCCC !important; }
.text-gray-300, .text-gray-200, .text-slate-300, .text-slate-200 { color: var(--arx-beige) !important; }
.border-gray-600, .border-gray-700, .border-slate-600, .border-slate-700 { border-color: #2C4B5E !important; }

/* Bordas coloridas e divisórias */
.border-green-200, .border-green-300, .border-emerald-200 { border-color: #B9D6C3 !important; }
.border-red-200, .border-red-300, .border-rose-200 { border-color: #E2C3BC !important; }
.border-amber-200, .border-amber-300, .border-yellow-200,
.border-blue-100, .border-blue-200, .border-blue-300,
.border-purple-200, .border-indigo-200, .border-slate-50 { border-color: var(--arx-beige) !important; }

.divide-gray-100 > :not([hidden]) ~ :not([hidden]),
.divide-slate-100 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-line) !important; }
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.divide-slate-200 > :not([hidden]) ~ :not([hidden]) { border-color: var(--arx-beige) !important; }

/* Anel de foco: sempre âmbar, é a assinatura do foco na marca */
.ring-blue-500, .ring-blue-600, .ring-indigo-500, .ring-purple-500,
.ring-green-500, .ring-red-500, .ring-amber-500 { --tw-ring-color: var(--arx-amber) !important; }
.focus\:ring-blue-500:focus, .focus\:ring-indigo-500:focus,
.focus\:ring-green-500:focus, .focus\:ring-red-500:focus { --tw-ring-color: var(--arx-amber) !important; }
.focus\:border-blue-500:focus, .focus\:border-blue-600:focus { border-color: var(--arx-amber) !important; }

/* Preto puro não existe na paleta da marca */
.text-black { color: var(--arx-navy-ink) !important; }
.bg-black { background-color: var(--arx-navy-deep) !important; }

/* Fundos de modal com opacidade: navy translúcido, nunca preto ou cinza frio */
.bg-slate-900\/70, .bg-slate-900\/50, .bg-gray-900\/70, .bg-gray-900\/50,
.bg-black\/50, .bg-black\/40, .bg-black\/60 {
  background-color: rgba(18, 48, 63, .55) !important;
}

/* A borda padrão do Tailwind é cinza (#e5e7eb) e vale para todo elemento com
   borda sem cor declarada. Sem isto, sobra cinza frio em centenas de lugares. */
*, ::before, ::after { border-color: var(--arx-line); }

/* Tons 200, usados em pastilhas de contagem */
.bg-blue-200, .bg-indigo-200, .bg-sky-200, .bg-purple-200,
.bg-violet-200, .bg-pink-200 { background-color: var(--arx-cream) !important; }
.bg-green-200, .bg-emerald-200, .bg-teal-200 { background-color: #E7F0EA !important; }
.bg-red-200, .bg-rose-200 { background-color: #F3E7E4 !important; }
.bg-amber-200, .bg-orange-200 { background-color: #F6EBDB !important; }
.text-blue-200, .text-blue-300, .text-indigo-200 { color: var(--arx-beige) !important; }

/* Utilities brand-* que a compilação antiga deixou em azul */
.text-brand-100, .text-brand-50 { color: var(--arx-beige) !important; }
.text-brand-500, .text-brand-900 { color: var(--arx-navy) !important; }
.bg-brand-500, .bg-brand-900 { background-color: var(--arx-navy) !important; }
.border-brand-100, .border-brand-200, .border-brand-300 { border-color: var(--arx-beige) !important; }

/* Ciano e sky não existem na paleta */
.bg-cyan-500, .bg-cyan-600, .bg-sky-500 { background-color: var(--arx-navy) !important; }
.from-sky-500, .from-cyan-500 {
  --tw-gradient-from: var(--arx-navy) var(--tw-gradient-from-position);
  --tw-gradient-to: rgba(25, 59, 79, 0) var(--tw-gradient-to-position);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}
.to-cyan-500, .to-sky-500 { --tw-gradient-to: var(--arx-navy-deep) var(--tw-gradient-to-position); }

/* ── 7. Bootstrap (telas de Orçamentos e Admin) ────────────────────────────── */
/* O Bootstrap traz a própria paleta por variáveis. Sem reapontá-las, sobra o
   cinza-chumbo #212529 e a borda #dee2e6 dele em centenas de elementos. */
:root, [data-bs-theme="light"] {
  --bs-body-bg: var(--arx-offwhite);
  --bs-body-color: var(--arx-navy-ink);
  --bs-body-color-rgb: 29, 47, 58;
  --bs-body-font-family: var(--arx-font-ui);
  --bs-border-color: var(--arx-beige);
  --bs-border-color-translucent: var(--arx-line);
  --bs-border-radius: var(--arx-ctrl);
  --bs-border-radius-sm: 6px;
  --bs-border-radius-lg: var(--arx-radius);
  --bs-primary: var(--arx-navy);
  --bs-primary-rgb: 25, 59, 79;
  --bs-secondary-color: var(--arx-soft);
  --bs-secondary-bg: var(--arx-cream);
  --bs-tertiary-bg: var(--arx-offwhite);
  --bs-emphasis-color: var(--arx-navy);
  --bs-heading-color: var(--arx-navy);
  --bs-link-color: var(--arx-navy);
  --bs-link-hover-color: var(--arx-navy-deep);
  --bs-success: var(--arx-green);
  --bs-danger: var(--arx-terracotta);
  --bs-warning: var(--arx-amber);
}
.btn-primary {
  --bs-btn-bg: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy-deep);
  --bs-btn-hover-border-color: var(--arx-navy-deep);
  --bs-btn-active-bg: var(--arx-navy-deep);
  --bs-btn-color: var(--arx-white);
  --bs-btn-hover-color: var(--arx-white);
}
.btn-success { --bs-btn-bg: var(--arx-green); --bs-btn-border-color: var(--arx-green); }
.btn-danger  { --bs-btn-bg: var(--arx-terracotta); --bs-btn-border-color: var(--arx-terracotta); }
.btn-warning { --bs-btn-bg: var(--arx-amber); --bs-btn-border-color: var(--arx-amber); --bs-btn-color: var(--arx-white); }
.btn-secondary {
  --bs-btn-bg: var(--arx-soft);
  --bs-btn-border-color: var(--arx-soft);
  --bs-btn-hover-bg: var(--arx-navy-ink);
  --bs-btn-hover-border-color: var(--arx-navy-ink);
}

/* Botões de contorno: o Bootstrap grava o azul e o cinza dele em valor literal,
   por isso não basta reapontar --bs-primary. */
.btn-outline-primary {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-border-color: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-white);
  --bs-btn-active-bg: var(--arx-navy-deep);
  --bs-btn-active-border-color: var(--arx-navy-deep);
}
.btn-outline-secondary {
  --bs-btn-color: var(--arx-soft);
  --bs-btn-border-color: var(--arx-beige);
  --bs-btn-hover-bg: var(--arx-cream);
  --bs-btn-hover-border-color: var(--arx-beige);
  --bs-btn-hover-color: var(--arx-navy);
  --bs-btn-active-bg: var(--arx-cream);
}
.btn-outline-success {
  --bs-btn-color: var(--arx-green); --bs-btn-border-color: var(--arx-green);
  --bs-btn-hover-bg: var(--arx-green); --bs-btn-hover-color: var(--arx-white);
}
.btn-outline-danger {
  --bs-btn-color: var(--arx-terracotta); --bs-btn-border-color: var(--arx-terracotta);
  --bs-btn-hover-bg: var(--arx-terracotta); --bs-btn-hover-color: var(--arx-white);
}
.btn-outline-warning {
  --bs-btn-color: var(--arx-amber); --bs-btn-border-color: var(--arx-amber);
  --bs-btn-hover-bg: var(--arx-amber); --bs-btn-hover-color: var(--arx-white);
}

/* Caixas de marcar e selecionar */
.form-check-input:checked {
  background-color: var(--arx-navy);
  border-color: var(--arx-navy);
}
.form-check-input:focus {
  border-color: var(--arx-amber);
  box-shadow: 0 0 0 .2rem rgba(208, 126, 31, .25);
}

/* Etiquetas de status do Bootstrap */
.text-bg-primary   { background-color: var(--arx-navy) !important; color: var(--arx-white) !important; }
.text-bg-secondary { background-color: var(--arx-soft) !important; color: var(--arx-white) !important; }
.text-bg-success   { background-color: var(--arx-green) !important; color: var(--arx-white) !important; }
.text-bg-danger    { background-color: var(--arx-terracotta) !important; color: var(--arx-white) !important; }
.text-bg-warning   { background-color: var(--arx-amber) !important; color: var(--arx-white) !important; }
.text-bg-light     { background-color: var(--arx-cream) !important; color: var(--arx-navy) !important; }
.text-secondary    { color: var(--arx-soft) !important; }
.table { --bs-table-color: var(--arx-navy-ink); --bs-table-border-color: var(--arx-line); --bs-table-striped-bg: var(--arx-offwhite); }
.form-control, .form-select {
  border-color: var(--arx-beige);
  color: var(--arx-navy-ink);
  background-color: var(--arx-white);
}
.form-control:focus, .form-select:focus {
  border-color: var(--arx-amber);
  box-shadow: 0 0 0 .2rem rgba(208, 126, 31, .25);
}
.card { --bs-card-border-color: var(--arx-beige); --bs-card-bg: var(--arx-white); }
.modal { --bs-modal-bg: var(--arx-white); --bs-modal-border-color: var(--arx-beige); }
.modal-backdrop { --bs-backdrop-bg: #12303F; }

/* Cabeçalho de tabela: creme com texto navy, no lugar do cinza do Bootstrap */
.table-light {
  --bs-table-bg: var(--arx-cream);
  --bs-table-color: var(--arx-navy);
  --bs-table-border-color: var(--arx-beige);
}
.table-striped > tbody > tr:nth-of-type(odd) > * { --bs-table-accent-bg: var(--arx-offwhite); }

/* Avisos: cada variante na cor de mesmo papel na marca */
.alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-dark {
  --bs-alert-color: var(--arx-navy);
  --bs-alert-bg: var(--arx-cream);
  --bs-alert-border-color: var(--arx-beige);
}
.alert-success { --bs-alert-color: #1A5C2E; --bs-alert-bg: #E7F0EA; --bs-alert-border-color: #B9D6C3; }
.alert-warning { --bs-alert-color: #8A5111; --bs-alert-bg: #F6EBDB; --bs-alert-border-color: var(--arx-beige); }
.alert-danger  { --bs-alert-color: #9F3B29; --bs-alert-bg: #F3E7E4; --bs-alert-border-color: #E2C3BC; }

/* O X de fechar vem preto por imagem; o filtro leva ao navy da marca */
.btn-close { filter: sepia(24%) saturate(180%) hue-rotate(155deg) brightness(.45); }

/* Variante "dark" do Bootstrap: o cinza-chumbo dele vira o navy da marca */
.text-dark { color: var(--arx-navy-ink) !important; }
.border-dark { border-color: var(--arx-navy) !important; }
.btn-outline-dark {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-white);
}
.btn-dark { --bs-btn-bg: var(--arx-navy-deep); --bs-btn-border-color: var(--arx-navy-deep); }
.btn-info { --bs-btn-bg: var(--arx-navy); --bs-btn-border-color: var(--arx-navy); --bs-btn-color: var(--arx-white); }
.btn-outline-info {
  --bs-btn-color: var(--arx-navy);
  --bs-btn-border-color: var(--arx-navy);
  --bs-btn-hover-bg: var(--arx-navy);
  --bs-btn-hover-color: var(--arx-white);
}
/* Botões sólidos: além de reapontar a variável, fixa a cor final. Em alguns
   modais o background do .btn não acompanhava a variável reapontada. */
.btn-primary { background-color: var(--arx-navy) !important; border-color: var(--arx-navy) !important; color: var(--arx-white) !important; }
.btn-primary:hover, .btn-primary:focus { background-color: var(--arx-navy-deep) !important; border-color: var(--arx-navy-deep) !important; }
.btn-success { background-color: var(--arx-green) !important; border-color: var(--arx-green) !important; color: var(--arx-white) !important; }
.btn-success:hover, .btn-success:focus { background-color: #1F7038 !important; border-color: #1F7038 !important; }
.btn-danger { background-color: var(--arx-terracotta) !important; border-color: var(--arx-terracotta) !important; color: var(--arx-white) !important; }
.btn-danger:hover, .btn-danger:focus { background-color: #9F3B29 !important; border-color: #9F3B29 !important; }
.btn-warning { background-color: var(--arx-amber) !important; border-color: var(--arx-amber) !important; color: var(--arx-white) !important; }
.btn-warning:hover, .btn-warning:focus { background-color: #B86D17 !important; border-color: #B86D17 !important; }
.btn-info { background-color: var(--arx-navy) !important; border-color: var(--arx-navy) !important; color: var(--arx-white) !important; }
.btn-secondary { background-color: var(--arx-soft) !important; border-color: var(--arx-soft) !important; color: var(--arx-white) !important; }
.btn-dark { background-color: var(--arx-navy-deep) !important; border-color: var(--arx-navy-deep) !important; color: var(--arx-white) !important; }

.text-info { color: var(--arx-navy) !important; }
.bg-info { background-color: var(--arx-cream) !important; }
.bg-success { background-color: var(--arx-green) !important; }
.bg-danger { background-color: var(--arx-terracotta) !important; }
.bg-warning { background-color: var(--arx-amber) !important; }
.bg-primary { background-color: var(--arx-navy) !important; }
.border-success { border-color: var(--arx-green) !important; }
.border-danger { border-color: var(--arx-terracotta) !important; }
.border-warning { border-color: var(--arx-amber) !important; }
.border-info, .border-primary { border-color: var(--arx-navy) !important; }

/* Textos utilitários do Bootstrap */
.text-muted, .text-body-secondary { color: var(--arx-soft) !important; }
.bg-light { background-color: var(--arx-cream) !important; }
.bg-dark { background-color: var(--arx-navy-deep) !important; }
.text-primary { color: var(--arx-navy) !important; }
.text-success { color: var(--arx-green) !important; }
.text-danger { color: var(--arx-terracotta) !important; }
.text-warning { color: var(--arx-amber) !important; }

/* ── 8. Gráficos (ApexCharts, tela de Indicadores) ─────────────────────────── */
/* A biblioteca desenha rótulos, grade e legenda no cinza dela. */
.apexcharts-text, .apexcharts-title-text, .apexcharts-legend-text,
.apexcharts-xaxis-label, .apexcharts-yaxis-label, .apexcharts-datalabel {
  fill: var(--arx-navy-ink) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-gridline, .apexcharts-grid line { stroke: var(--arx-line) !important; }
.apexcharts-tooltip {
  background: var(--arx-white) !important;
  border: 1px solid var(--arx-beige) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-tooltip-title {
  background: var(--arx-cream) !important;
  border-bottom: 1px solid var(--arx-beige) !important;
}
.apexcharts-xaxistooltip, .apexcharts-yaxistooltip {
  background: var(--arx-cream) !important;
  border-color: var(--arx-beige) !important;
  color: var(--arx-navy-ink) !important;
  font-family: var(--arx-font-ui) !important;
}
.apexcharts-xaxistooltip-text, .apexcharts-yaxistooltip-text { color: var(--arx-navy-ink) !important; }
.apexcharts-xaxistooltip:after, .apexcharts-xaxistooltip:before { border-bottom-color: var(--arx-beige) !important; }
.apexcharts-yaxistooltip:after, .apexcharts-yaxistooltip:before { border-left-color: var(--arx-beige) !important; }
.apexcharts-menu { background: var(--arx-white) !important; border-color: var(--arx-beige) !important; }
.apexcharts-menu-item:hover { background: var(--arx-cream) !important; }

/* Tons 700 que faltavam no mapa semântico */
.text-emerald-700, .text-teal-700 { color: #1A5C2E !important; }