/* ===================================================================
   CoreGuard BackOffice — Design System
   Replica os tokens visuais do app CoreGuard (mobile) adaptados para
   desktop admin (sidebar + topbar + área de conteúdo).
   =================================================================== */

/* Fonte da marca (palavra COREGUARD), a mesma do texto da logo. Hospedada aqui. */
@font-face { font-family: "Krona One"; font-style: normal; font-weight: 400; font-display: swap; src: url("krona-one-latin.woff2") format("woff2"); }

:root {
  /* ===== Cores primárias ===== */
  --azul-coreguard: #1B6FA8;
  --azul-coreguard-escuro: #145A8A;
  --azul-coreguard-claro: #2B8CC4;
  --azul-coreguard-palido: rgba(27, 111, 168, 0.08);

  --verde: #16A34A;
  --verde-forte: #15803D;
  --verde-palido: rgba(22, 163, 74, 0.08);

  --vermelho: #DC2626;
  --vermelho-forte: #B91C1C;
  --vermelho-palido: rgba(220, 38, 38, 0.07);

  --amarelo: #D97706;
  --amarelo-forte: #92400E;
  --amarelo-palido: rgba(217, 119, 6, 0.08);

  --roxo: #7C3AED;
  --roxo-forte: #6D28D9;
  --roxo-palido: rgba(124, 58, 237, 0.07);

  --rosa: #DB2777;
  --rosa-forte: #BE185D;
  --rosa-palido: rgba(219, 39, 119, 0.07);

  /* ===== Neutras ===== */
  --fundo-principal: #F4F6F9;
  --fundo-card: #FFFFFF;
  --fundo-input: #F0F2F5;
  --fundo-secao: #EDF0F4;
  --fundo-hover: #F7F9FC;

  --texto-primario: #1A202C;
  --texto-secundario: #5A6577;
  --texto-terciario: #8896AA;

  --menu-escuro: #101828;
  --menu-escuro-2: #1D2939;
  --menu-escuro-hover: #1A2330;
  --menu-texto: #B8C2D0;
  --menu-texto-ativo: #FFFFFF;
  --menu-divisor: rgba(255,255,255,0.06);

  /* ===== Bordas e sombras ===== */
  --borda-sutil: 1px solid #E5E8ED;
  --borda-input: 1px solid #D5DAE1;
  --raio: 16px;
  --raio-pequeno: 12px;
  --raio-botao: 10px;
  --raio-min: 6px;

  --sombra-card: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --sombra-elevada: 0 4px 12px rgba(0,0,0,0.08);
  --sombra-modal: 0 20px 60px rgba(0,0,0,0.18);
  --sombra-botao: 0 2px 8px rgba(27, 111, 168, 0.18);

  /* ===== Gradientes ===== */
  --grad-coreguard: linear-gradient(135deg, #1B6FA8 0%, #2B8CC4 100%);
  --grad-hero-escuro: linear-gradient(135deg, #1D2939 0%, #253548 100%);
  --grad-credito: linear-gradient(135deg, #0B0B0B 0%, #3A3A3A 100%);
  --grad-prime: linear-gradient(135deg, #D4AF37 0%, #F4DB7A 100%);
  --grad-investimento: linear-gradient(160deg, #0B1B2E 0%, #13314D 55%, #0A4A5E 100%);

  /* ===== Espaçamento ===== */
  --esp-1: 2px;
  --esp-2: 4px;
  --esp-3: 8px;
  --esp-4: 12px;
  --esp-5: 16px;
  --esp-6: 20px;
  --esp-7: 24px;
  --esp-8: 32px;
  --esp-9: 40px;
  --esp-10: 56px;

  /* ===== Layout ===== */
  --largura-sidebar: 256px;
  --altura-topbar: 60px;
  --largura-conteudo-max: 1600px;
}

/* Tema escuro */
body.tema-escuro {
  --fundo-principal: #0F141B;
  --fundo-card: #1A222C;
  --fundo-input: #202A36;
  --fundo-secao: #161D26;
  --fundo-hover: #202A36;
  --texto-primario: #F1F4F8;
  --texto-secundario: #B6C0CC;
  --texto-terciario: #8A95A3;
  --azul-coreguard: #5AA9DE;
  --azul-coreguard-escuro: #3D8DC4;
  --azul-coreguard-claro: #7BC0EE;
  --azul-coreguard-palido: rgba(90, 169, 222, 0.12);
  --verde: #34D399;
  --vermelho: #F87171;
  --amarelo: #FBBF24;
  --roxo: #A78BFA;
  --rosa: #F472B6;
  --borda-sutil: 1px solid #2A3441;
  --borda-input: 1px solid #384454;
  --sombra-card: 0 1px 3px rgba(0,0,0,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

/* ===== Reset ===== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
  font-size: 14px;
  background: var(--fundo-principal);
  color: var(--texto-primario);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
img { display: block; max-width: 100%; }

/* Scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.22); }

/* ===================================================================
   LAYOUT SHELL
   =================================================================== */

.app-shell {
  display: grid;
  grid-template-columns: var(--largura-sidebar) 1fr;
  grid-template-rows: var(--altura-topbar) 1fr;
  grid-template-areas:
    "sidebar topbar"
    "sidebar conteudo";
  height: 100vh;
}

/* ===== Sidebar ===== */
.sidebar {
  grid-area: sidebar;
  background: var(--menu-escuro);
  color: var(--menu-texto);
  overflow-y: auto;
  border-right: 1px solid var(--menu-divisor);
}

.sidebar::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); }
.sidebar::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.18); }

.sidebar-marca {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px; /* 12+44+12: mesma altura de antes */
  border-bottom: 1px solid var(--menu-divisor);
  position: sticky;
  top: 0;
  background: var(--menu-escuro);
  z-index: 5;
}

.sidebar-marca img {
  width: 44px;
  height: 44px;
  object-fit: contain;
}

.sidebar-marca-nome {
  font-family: "Krona One", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: 1.2px;
  color: var(--menu-texto-ativo);
  text-align: center;
}

/* Nome do módulo na mesma fonte e tamanho de COREGUARD (só a cor continua secundária),
   centralizado embaixo de COREGUARD */
.sidebar-marca-sub {
  font-family: "Krona One", "Segoe UI", sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  color: #6B7A90;
  margin-top: 1px;
  text-align: center;
}

.sidebar-grupo {
  margin-top: 18px;
  padding: 0 12px;
}

.sidebar-grupo-titulo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #6B7A90;
  padding: 0 12px 6px;
}

.sidebar-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--menu-texto);
  cursor: pointer;
  transition: background .15s, color .15s;
  margin-bottom: 1px;
  position: relative;
}

.sidebar-item:hover {
  background: var(--menu-escuro-hover);
  color: var(--menu-texto-ativo);
}

.sidebar-item.ativo {
  background: rgba(27, 111, 168, 0.18);
  color: var(--menu-texto-ativo);
  font-weight: 600;
}

.sidebar-item.ativo::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--azul-coreguard-claro);
  border-radius: 0 3px 3px 0;
}

.sidebar-item-icone {
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}

.sidebar-item-badge {
  margin-left: auto;
  background: var(--vermelho);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 8px;
  min-width: 18px;
  text-align: center;
}

.sidebar-item-badge.azul { background: var(--azul-coreguard-claro); }
.sidebar-item-badge.amarelo { background: var(--amarelo); }
.sidebar-item-badge.verde { background: var(--verde); }

/* ===== Topbar ===== */
.topbar {
  grid-area: topbar;
  background: var(--fundo-card);
  border-bottom: var(--borda-sutil);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
}

.topbar-busca {
  flex: 1;
  max-width: 460px;
  position: relative;
}

.topbar-busca input {
  width: 100%;
  background: var(--fundo-input);
  border: var(--borda-input);
  border-radius: 10px;
  padding: 9px 14px 9px 38px;
  font-size: 13px;
  color: var(--texto-primario);
  outline: none;
  transition: all .15s;
}

.topbar-busca input:focus {
  border-color: var(--azul-coreguard);
  box-shadow: 0 0 0 3px rgba(27, 111, 168, 0.10);
}

.topbar-busca::before {
  content: '🔍';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 13px;
  opacity: .6;
}

.topbar-acoes {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.topbar-icone {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--texto-secundario);
  font-size: 16px;
  position: relative;
  transition: background .15s;
}

.topbar-icone:hover { background: var(--fundo-input); color: var(--texto-primario); }

.topbar-icone-badge {
  position: absolute;
  top: 4px;
  right: 4px;
  background: var(--vermelho);
  color: white;
  font-size: 9px;
  font-weight: 700;
  border-radius: 9px;
  min-width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
}

.topbar-perfil {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 10px 4px 4px;
  border-radius: 24px;
  cursor: pointer;
  transition: background .15s;
  margin-left: 6px;
}

.topbar-perfil:hover { background: var(--fundo-input); }

.topbar-perfil-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad-coreguard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 700;
  font-size: 12px;
}

.topbar-perfil-info {
  line-height: 1.15;
}

.topbar-perfil-nome { font-size: 12px; font-weight: 600; }
.topbar-perfil-papel { font-size: 10px; color: var(--texto-terciario); }

/* ===== Conteúdo ===== */
.conteudo {
  grid-area: conteudo;
  overflow-y: auto;
  padding: 24px 28px 60px;
}

.pagina { display: none; }
.pagina.ativa { display: block; animation: aparecer .2s ease-out; }

@keyframes aparecer {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

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

.pagina-titulo {
  font-size: 22px;
  font-weight: 800;
  color: var(--texto-primario);
  letter-spacing: -0.3px;
}

.pagina-subtitulo {
  font-size: 13px;
  color: var(--texto-secundario);
  margin-top: 4px;
}

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

.breadcrumb {
  font-size: 12px;
  color: var(--texto-terciario);
  margin-bottom: 4px;
}

.breadcrumb span + span::before {
  content: '/';
  margin: 0 6px;
  color: var(--texto-terciario);
}

.breadcrumb .atual { color: var(--azul-coreguard); font-weight: 600; }

/* ===================================================================
   COMPONENTES — CARDS
   =================================================================== */

.card {
  background: var(--fundo-card);
  border: var(--borda-sutil);
  border-radius: var(--raio);
  padding: 20px;
  box-shadow: var(--sombra-card);
}

.card-titulo {
  font-size: 15px;
  font-weight: 700;
  color: var(--texto-primario);
  margin-bottom: 4px;
}

.card-subtitulo {
  font-size: 12px;
  color: var(--texto-terciario);
  margin-bottom: 14px;
}

.card-secao {
  margin-bottom: 16px;
}

.card-secao + .card-secao { border-top: var(--borda-sutil); padding-top: 16px; }

/* Grid de cards */
.grid-cards {
  display: grid;
  gap: 16px;
}
.grid-cards.col-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cards.col-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cards.col-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1100px) {
  .grid-cards.col-3, .grid-cards.col-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 700px) {
  .grid-cards.col-2, .grid-cards.col-3, .grid-cards.col-4 { grid-template-columns: 1fr; }
}

/* KPI Cards */
.kpi {
  background: var(--fundo-card);
  border: var(--borda-sutil);
  border-radius: var(--raio);
  padding: 18px 20px;
  box-shadow: var(--sombra-card);
  position: relative;
  overflow: hidden;
}

.kpi-rotulo {
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.7px;
  margin-bottom: 8px;
}

.kpi-valor {
  font-size: 26px;
  font-weight: 800;
  color: var(--texto-primario);
  letter-spacing: -0.5px;
  line-height: 1.1;
}

.kpi-rodape {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--texto-secundario);
}

.kpi-delta { font-weight: 700; }
.kpi-delta.positivo { color: var(--verde); }
.kpi-delta.negativo { color: var(--vermelho); }

.kpi-icone {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  background: var(--azul-coreguard-palido);
  color: var(--azul-coreguard);
}

.kpi-icone.verde { background: var(--verde-palido); color: var(--verde); }
.kpi-icone.vermelho { background: var(--vermelho-palido); color: var(--vermelho); }
.kpi-icone.amarelo { background: var(--amarelo-palido); color: var(--amarelo); }
.kpi-icone.roxo { background: var(--roxo-palido); color: var(--roxo); }
.kpi-icone.rosa { background: var(--rosa-palido); color: var(--rosa); }

/* ===================================================================
   COMPONENTES — BOTÕES
   =================================================================== */

.botao {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 16px;
  border-radius: var(--raio-botao);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  white-space: nowrap;
  min-height: 36px;
}

.botao-primario {
  background: var(--azul-coreguard);
  color: white;
  box-shadow: var(--sombra-botao);
}
.botao-primario:hover { background: var(--azul-coreguard-escuro); transform: translateY(-1px); }

.botao-secundario {
  background: var(--azul-coreguard-palido);
  color: var(--azul-coreguard);
  border: 1px solid rgba(27, 111, 168, 0.15);
}
.botao-secundario:hover { background: rgba(27, 111, 168, 0.14); }

.botao-outline {
  background: var(--fundo-card);
  color: var(--texto-primario);
  border: var(--borda-input);
}
.botao-outline:hover { background: var(--fundo-input); }

.botao-perigo { background: var(--vermelho); color: white; }
.botao-perigo:hover { background: var(--vermelho-forte); }

.botao-sucesso { background: var(--verde); color: white; }
.botao-sucesso:hover { background: var(--verde-forte); }

.botao-icone {
  padding: 8px;
  min-height: 36px;
  min-width: 36px;
}

.botao-pequeno { padding: 6px 12px; font-size: 12px; min-height: 30px; }

.botao-grande { padding: 12px 22px; font-size: 14px; min-height: 44px; }

.botao:disabled { opacity: 0.5; cursor: not-allowed; }

/* ===================================================================
   COMPONENTES — TABELAS
   =================================================================== */

.tabela-container {
  background: var(--fundo-card);
  border: var(--borda-sutil);
  border-radius: var(--raio);
  overflow: hidden;
  box-shadow: var(--sombra-card);
}

.tabela-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: var(--borda-sutil);
  flex-wrap: wrap;
}

.tabela-toolbar .filtros {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
}

.tabela-busca {
  position: relative;
  flex: 1;
  max-width: 320px;
}

.tabela-busca input {
  width: 100%;
  background: var(--fundo-input);
  border: var(--borda-input);
  border-radius: 8px;
  padding: 7px 12px 7px 32px;
  font-size: 12px;
  color: var(--texto-primario);
  outline: none;
}

.tabela-busca input:focus {
  border-color: var(--azul-coreguard);
}

.tabela-busca::before {
  content: '🔍';
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  opacity: .55;
}

.tabela-rolagem { overflow-x: auto; }

.tabela {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.tabela thead {
  background: var(--fundo-secao);
}

.tabela th {
  text-align: left;
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  color: var(--texto-terciario);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  border-bottom: var(--borda-sutil);
}

.tabela th.num, .tabela td.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela th.centro, .tabela td.centro { text-align: center; }

.tabela td {
  padding: 12px 16px;
  border-bottom: var(--borda-sutil);
  vertical-align: middle;
  color: var(--texto-primario);
}

.tabela tbody tr { transition: background .12s; cursor: pointer; }
.tabela tbody tr:hover { background: var(--fundo-hover); }
.tabela tbody tr:last-child td { border-bottom: none; }

.tabela .ident {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tabela .avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--azul-coreguard-palido);
  color: var(--azul-coreguard);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 11px;
  flex-shrink: 0;
}

.tabela .ident-nome { font-weight: 600; font-size: 13px; }
.tabela .ident-sub { font-size: 11px; color: var(--texto-terciario); margin-top: 1px; }

.tabela-paginacao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 18px;
  border-top: var(--borda-sutil);
  font-size: 12px;
  color: var(--texto-secundario);
}

.tabela-paginacao .pag-controles {
  display: flex;
  gap: 4px;
  align-items: center;
}

.tabela-paginacao button {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  font-size: 12px;
  color: var(--texto-secundario);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tabela-paginacao button:hover { background: var(--fundo-input); color: var(--texto-primario); }
.tabela-paginacao button.atual {
  background: var(--azul-coreguard);
  color: white;
}

/* ===================================================================
   COMPONENTES — BADGES & CHIPS
   =================================================================== */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--azul-coreguard-palido);
  color: var(--azul-coreguard);
  white-space: nowrap;
}

.badge.verde { background: var(--verde-palido); color: var(--verde-forte); }
.badge.vermelho { background: var(--vermelho-palido); color: var(--vermelho-forte); }
.badge.amarelo { background: var(--amarelo-palido); color: var(--amarelo-forte); }
.badge.roxo { background: var(--roxo-palido); color: var(--roxo-forte); }
.badge.rosa { background: var(--rosa-palido); color: var(--rosa-forte); }
.badge.cinza { background: #EEF1F5; color: #5A6577; }

.badge-ponto::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  display: inline-block;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 600;
  background: var(--fundo-input);
  color: var(--texto-secundario);
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}

.chip:hover { background: #E2E7EE; color: var(--texto-primario); }
.chip.ativo { background: var(--azul-coreguard); color: white; }
.chip.ativo:hover { background: var(--azul-coreguard-escuro); }

/* ===================================================================
   COMPONENTES — FORMULÁRIOS
   =================================================================== */

.form-grupo { margin-bottom: 14px; }

.form-rotulo {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--texto-secundario);
  margin-bottom: 5px;
}

.form-campo {
  width: 100%;
  background: var(--fundo-input);
  border: var(--borda-input);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  color: var(--texto-primario);
  outline: none;
  transition: all .15s;
  min-height: 40px;
}

.form-campo:focus {
  border-color: var(--azul-coreguard);
  box-shadow: 0 0 0 3px rgba(27, 111, 168, 0.10);
  background: var(--fundo-card);
}

select.form-campo {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%235A6577' d='M6 8L0 0h12z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
}

textarea.form-campo { resize: vertical; min-height: 90px; }

.form-linha {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(2, 1fr);
}

.form-linha.col-3 { grid-template-columns: repeat(3, 1fr); }
.form-linha.col-4 { grid-template-columns: repeat(4, 1fr); }

.form-ajuda {
  font-size: 11px;
  color: var(--texto-terciario);
  margin-top: 4px;
}

/* Toggle switch */
.toggle {
  position: relative;
  display: inline-block;
  width: 40px;
  height: 22px;
  flex-shrink: 0;
}

.toggle input { opacity: 0; width: 0; height: 0; }

.toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0; left: 0; right: 0; bottom: 0;
  background-color: #C9D0DA;
  border-radius: 22px;
  transition: .2s;
}

.toggle-slider::before {
  position: absolute;
  content: '';
  height: 16px;
  width: 16px;
  left: 3px;
  top: 3px;
  background-color: white;
  border-radius: 50%;
  transition: .2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle input:checked + .toggle-slider { background: var(--azul-coreguard); }
.toggle input:checked + .toggle-slider::before { transform: translateX(18px); }

.linha-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: var(--borda-sutil);
}
.linha-toggle:last-child { border-bottom: none; }
.linha-toggle-info { flex: 1; }
.linha-toggle-titulo { font-size: 13px; font-weight: 600; }
.linha-toggle-sub { font-size: 12px; color: var(--texto-terciario); margin-top: 2px; }

/* ===================================================================
   COMPONENTES — ABAS (TABS)
   =================================================================== */

.abas {
  display: flex;
  gap: 4px;
  border-bottom: var(--borda-sutil);
  margin-bottom: 18px;
  overflow-x: auto;
}

.aba {
  padding: 10px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-secundario);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  white-space: nowrap;
  transition: all .15s;
}

.aba:hover { color: var(--texto-primario); }

.aba.ativa {
  color: var(--azul-coreguard);
  border-bottom-color: var(--azul-coreguard);
}

.aba-conteudo { display: none; }
.aba-conteudo.ativa { display: block; animation: aparecer .15s; }

/* ===================================================================
   COMPONENTES — MODAL
   =================================================================== */

.modal-fundo {
  position: fixed;
  inset: 0;
  background: rgba(15, 22, 33, 0.55);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 200;
  padding: 20px;
  animation: fadeIn .15s;
}

.modal-fundo.ativo { display: flex; }

@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.modal {
  background: var(--fundo-card);
  border-radius: var(--raio);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--sombra-modal);
  animation: slideUp .2s ease-out;
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(20px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.modal.grande { max-width: 760px; }
.modal.gigante { max-width: 1040px; }

.modal-cabecalho {
  display: flex;
  align-items: center;
  padding: 18px 22px;
  border-bottom: var(--borda-sutil);
  gap: 12px;
}

.modal-titulo { font-size: 16px; font-weight: 700; flex: 1; }

.modal-fechar {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 18px;
  color: var(--texto-secundario);
}

.modal-fechar:hover { background: var(--fundo-input); }

.modal-corpo {
  padding: 22px;
  overflow-y: auto;
  flex: 1;
}

.modal-rodape {
  padding: 14px 22px;
  border-top: var(--borda-sutil);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--fundo-secao);
}

/* ===================================================================
   COMPONENTES — TOAST
   =================================================================== */

#toast-container {
  position: fixed;
  top: 80px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  z-index: 300;
  pointer-events: none;
}

.toast {
  background: var(--fundo-card);
  border-left: 4px solid var(--azul-coreguard);
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-primario);
  min-width: 280px;
  max-width: 380px;
  pointer-events: auto;
  animation: slideInToast .25s ease-out;
}

.toast.sucesso { border-left-color: var(--verde); }
.toast.erro { border-left-color: var(--vermelho); }
.toast.aviso { border-left-color: var(--amarelo); }

.toast-icone { font-size: 16px; }

@keyframes slideInToast {
  from { opacity: 0; transform: translateX(20px); }
  to { opacity: 1; transform: translateX(0); }
}

.toast.saindo { animation: slideOutToast .25s forwards; }
@keyframes slideOutToast {
  to { opacity: 0; transform: translateX(20px); }
}

/* ===================================================================
   COMPONENTES — ALERTAS
   =================================================================== */

.alerta {
  display: flex;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 13px;
  background: var(--azul-coreguard-palido);
  color: var(--texto-primario);
  border: 1px solid rgba(27, 111, 168, 0.15);
  margin-bottom: 12px;
}

.alerta-icone {
  font-size: 18px;
  flex-shrink: 0;
}

.alerta-info { background: var(--azul-coreguard-palido); border-color: rgba(27, 111, 168, 0.18); }
.alerta-info .alerta-icone { color: var(--azul-coreguard); }

.alerta-aviso { background: var(--amarelo-palido); border-color: rgba(217, 119, 6, 0.18); }
.alerta-aviso .alerta-icone { color: var(--amarelo); }

.alerta-perigo { background: var(--vermelho-palido); border-color: rgba(220, 38, 38, 0.18); }
.alerta-perigo .alerta-icone { color: var(--vermelho); }

.alerta-sucesso { background: var(--verde-palido); border-color: rgba(22, 163, 74, 0.18); }
.alerta-sucesso .alerta-icone { color: var(--verde); }

.alerta-titulo { font-weight: 700; margin-bottom: 2px; }
.alerta-mensagem { color: var(--texto-secundario); font-size: 12px; line-height: 1.4; }

/* ===================================================================
   COMPONENTES — DETALHE / CLIENTE / PRODUTO
   =================================================================== */

.detalhe-cabecalho {
  display: flex;
  gap: 18px;
  align-items: center;
  background: var(--fundo-card);
  border: var(--borda-sutil);
  border-radius: var(--raio);
  padding: 22px;
  margin-bottom: 18px;
  box-shadow: var(--sombra-card);
}

.detalhe-avatar {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--grad-coreguard);
  color: white;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 22px;
  flex-shrink: 0;
}

.detalhe-info { flex: 1; }
.detalhe-nome { font-size: 20px; font-weight: 800; }
.detalhe-meta {
  display: flex;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--texto-secundario);
  flex-wrap: wrap;
}
.detalhe-meta-item { display: flex; align-items: center; gap: 5px; }
.detalhe-meta-item-rotulo { color: var(--texto-terciario); }
.detalhe-acoes { display: flex; gap: 8px; flex-wrap: wrap; }

/* Linha chave-valor */
.lkv {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 10px 14px;
  font-size: 13px;
}
.lkv dt { color: var(--texto-terciario); font-weight: 600; }
.lkv dd { color: var(--texto-primario); font-weight: 600; }

/* Lista de itens (timeline-ish) */
.lista-eventos {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.evento-item {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  background: var(--fundo-card);
  border: var(--borda-sutil);
}

.evento-icone {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  flex-shrink: 0;
  background: var(--azul-coreguard-palido);
  color: var(--azul-coreguard);
}

.evento-icone.verde { background: var(--verde-palido); color: var(--verde); }
.evento-icone.vermelho { background: var(--vermelho-palido); color: var(--vermelho); }
.evento-icone.amarelo { background: var(--amarelo-palido); color: var(--amarelo); }

.evento-corpo { flex: 1; }
.evento-titulo { font-size: 13px; font-weight: 600; }
.evento-sub { font-size: 12px; color: var(--texto-terciario); margin-top: 2px; }
.evento-direita { font-size: 12px; color: var(--texto-secundario); text-align: right; }

/* ===================================================================
   COMPONENTES — GRÁFICOS (CSS-only sparklines, barras, donuts)
   =================================================================== */

.spark {
  display: block;
  width: 100%;
  height: 60px;
}

.barras {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  height: 140px;
  padding: 8px 0;
}

.barra {
  flex: 1;
  background: var(--azul-coreguard);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  position: relative;
  cursor: pointer;
  transition: opacity .15s;
}

.barra:hover { opacity: 0.85; }
.barra::after {
  content: attr(data-rotulo);
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--texto-terciario);
  white-space: nowrap;
}

.barra.verde { background: var(--verde); }
.barra.vermelho { background: var(--vermelho); }
.barra.amarelo { background: var(--amarelo); }

/* Donut */
.donut {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  margin: 0 auto;
}

.donut-centro {
  position: absolute;
  inset: 22px;
  background: var(--fundo-card);
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.donut-valor { font-size: 18px; font-weight: 800; }
.donut-rotulo { font-size: 10px; color: var(--texto-terciario); text-transform: uppercase; letter-spacing: 0.5px; }

/* Legenda gráfico */
.legenda {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 12px;
}

.legenda-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.legenda-cor {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.legenda-rotulo { flex: 1; color: var(--texto-secundario); }
.legenda-valor { font-weight: 700; color: var(--texto-primario); }

/* Progresso */
.progresso {
  width: 100%;
  height: 8px;
  background: var(--fundo-input);
  border-radius: 4px;
  overflow: hidden;
}

.progresso-barra {
  height: 100%;
  background: var(--azul-coreguard);
  border-radius: 4px;
  transition: width .4s;
}

.progresso-barra.verde { background: var(--verde); }
.progresso-barra.amarelo { background: var(--amarelo); }
.progresso-barra.vermelho { background: var(--vermelho); }

/* ===================================================================
   UTILITÁRIAS
   =================================================================== */

.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.entre { justify-content: space-between; }
.centro { justify-content: center; align-items: center; }
.itens-centro { align-items: center; }
.gap-2 { gap: 4px; }
.gap-3 { gap: 8px; }
.gap-4 { gap: 12px; }
.gap-5 { gap: 16px; }
.gap-6 { gap: 20px; }
.flex-1 { flex: 1; }

.mt-2 { margin-top: 4px; }
.mt-3 { margin-top: 8px; }
.mt-4 { margin-top: 12px; }
.mt-5 { margin-top: 16px; }
.mt-6 { margin-top: 20px; }
.mb-2 { margin-bottom: 4px; }
.mb-3 { margin-bottom: 8px; }
.mb-4 { margin-bottom: 12px; }
.mb-5 { margin-bottom: 16px; }
.mb-6 { margin-bottom: 20px; }

.txt-pri { color: var(--texto-primario); }
.txt-sec { color: var(--texto-secundario); }
.txt-ter { color: var(--texto-terciario); }
.txt-azul { color: var(--azul-coreguard); }
.txt-verde { color: var(--verde); }
.txt-vermelho { color: var(--vermelho); }
.txt-amarelo { color: var(--amarelo); }

.fs-10 { font-size: 10px; }
.fs-11 { font-size: 11px; }
.fs-12 { font-size: 12px; }
.fs-13 { font-size: 13px; }
.fs-14 { font-size: 14px; }
.fs-16 { font-size: 16px; }
.fs-20 { font-size: 20px; }
.fs-24 { font-size: 24px; }

.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.fw-8 { font-weight: 800; }

.tnum { font-variant-numeric: tabular-nums; }
.dir { text-align: right; }
.cap { text-transform: capitalize; }
.upp { text-transform: uppercase; letter-spacing: 0.5px; }

.divisor { height: 1px; background: var(--borda-sutil); margin: 14px 0; }

.vazio {
  text-align: center;
  padding: 60px 20px;
  color: var(--texto-terciario);
}
.vazio-icone { font-size: 36px; margin-bottom: 8px; }
.vazio-titulo { font-size: 14px; font-weight: 700; color: var(--texto-secundario); margin-bottom: 4px; }
.vazio-sub { font-size: 12px; }

/* ===================================================================
   LOGIN PAGE
   =================================================================== */

.login-fundo {
  min-height: 100vh;
  display: flex;
  background: var(--grad-hero-escuro);
  position: relative;
  overflow: hidden;
}

.login-fundo::before {
  content: '';
  position: absolute;
  top: -200px;
  right: -200px;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(43, 140, 196, 0.15) 0%, transparent 70%);
}

.login-fundo::after {
  content: '';
  position: absolute;
  bottom: -300px;
  left: -150px;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27, 111, 168, 0.18) 0%, transparent 70%);
}

.login-card {
  background: rgba(255,255,255,0.04);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 36px 32px;
  width: 100%;
  max-width: 420px;
  margin: auto;
  position: relative;
  z-index: 1;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.login-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-bottom: 28px;
}

.login-marca img { width: 64px; height: 64px; border-radius: 14px; object-fit: contain; }
.login-marca-nome { font-family: "Krona One", "Segoe UI", sans-serif; font-size: 22px; font-weight: 400; color: white; letter-spacing: 1.5px; }
.login-marca-sub { font-size: 11px; font-weight: 700; color: #8896AA; text-transform: uppercase; letter-spacing: 1.5px; }

.login-titulo {
  font-size: 20px;
  font-weight: 800;
  color: white;
  text-align: center;
  margin-bottom: 6px;
}

.login-sub {
  font-size: 13px;
  color: #8896AA;
  text-align: center;
  margin-bottom: 24px;
}

.login-card .form-rotulo { color: #B6C0CC; }

.login-card .form-campo {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  color: white;
}

.login-card .form-campo::placeholder { color: rgba(255,255,255,0.35); }
.login-card .form-campo:focus {
  background: rgba(255,255,255,0.10);
  border-color: var(--azul-coreguard-claro);
  box-shadow: 0 0 0 3px rgba(43, 140, 196, 0.20);
}

.login-card .botao-primario { width: 100%; padding: 14px; min-height: 48px; font-size: 14px; }

.login-rodape {
  text-align: center;
  margin-top: 24px;
  font-size: 11px;
  color: #6B7A90;
}

.login-rodape a { color: var(--azul-coreguard-claro); font-weight: 600; }

/* ===================================================================
   RESPONSIVO
   =================================================================== */

@media (max-width: 900px) {
  .app-shell {
    grid-template-columns: 0 1fr;
  }
  .sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--largura-sidebar);
    z-index: 100;
    transform: translateX(-100%);
    transition: transform .25s;
  }
  .sidebar.aberta { transform: translateX(0); }
  .sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 99;
    display: none;
  }
  .sidebar.aberta + .sidebar-overlay { display: block; }
  .form-linha, .form-linha.col-3, .form-linha.col-4 { grid-template-columns: 1fr; }
  .lkv { grid-template-columns: 1fr; gap: 4px 0; }
  .lkv dd { margin-bottom: 8px; }
}

/* ===================================================================
   PRINT-FRIENDLY (relatórios)
   =================================================================== */
@media print {
  .sidebar, .topbar, .pagina-acoes { display: none !important; }
  .conteudo { padding: 0; }
  .card, .tabela-container { box-shadow: none; border: 1px solid #ddd; }
}

/* ===== Busca global (dropdown da topbar) ===== */
.busca-resultados {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--fundo-card);
  border: var(--borda-sutil);
  border-radius: 12px;
  box-shadow: var(--sombra-modal);
  max-height: 420px;
  overflow-y: auto;
  z-index: 250;
  display: none;
  padding: 6px;
}

.busca-resultados.aberta { display: block; }

.busca-grupo {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--texto-terciario);
  padding: 8px 10px 4px;
}

.busca-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .1s;
}

.busca-item:hover, .busca-item.ativo { background: var(--fundo-hover); }

.busca-item-icone { font-size: 16px; width: 22px; text-align: center; flex-shrink: 0; }

.busca-item-corpo { flex: 1; min-width: 0; }

.busca-item-titulo {
  font-size: 13px;
  font-weight: 600;
  color: var(--texto-primario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.busca-item-titulo mark {
  background: rgba(27, 111, 168, 0.15);
  color: var(--azul-coreguard);
  border-radius: 3px;
  padding: 0 1px;
}

.busca-item-sub {
  font-size: 11px;
  color: var(--texto-terciario);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}

.busca-item-chip {
  font-size: 10px;
  color: var(--texto-terciario);
  border: var(--borda-sutil);
  border-radius: 6px;
  padding: 2px 6px;
  flex-shrink: 0;
}

.busca-vazio {
  padding: 18px 10px;
  text-align: center;
  font-size: 12px;
  color: var(--texto-terciario);
}

/* Login no padrão da suíte: a marca do menu lateral (logo 44px, COREGUARD 12px, sistema 12px) em
   escala 20/12, tudo em em sobre o tamanho de COREGUARD; nome do sistema alinhado à esquerda
   e na mesma fonte/tamanho de COREGUARD (só a cor continua secundária). */
.login-marca img { width: calc(20px * 44 / 12 * 1.56); height: calc(20px * 44 / 12 * 1.56); } /* escudo 56% maior que a proporção do menu (30% + 20%) */
.login-marca-texto { text-align: center; font-size: 20px; }
.login-marca-nome { font-size: 1em; letter-spacing: 0.1em; }
.login-marca-sub { font-family: "Krona One", "Segoe UI", sans-serif; font-size: 1em; font-weight: 400; letter-spacing: 0.1em; margin-top: 0.0833em; }
.login-titulo { font-size: 16px; }
.login-titulo + form { margin-top: 18px; } /* sem subtítulo: o form mantém os 24px de distância */
/* Tela de login: uma linha (20px) acima e abaixo de "Acesso ao painel"; duas acima do "Entrar" */
.login-titulo-acesso { padding-top: 20px; } /* padding: margem aqui colapsaria com a da marca e sumiria */
.login-titulo-acesso + form { margin-top: 38px; } /* as margens colapsam: 18px de antes + 20px */
.login-entrar { margin-top: 40px; } /* duas linhas (2 × 20px) */
/* Tela do 2FA: uma linha (20px) a mais acima do campo do código e duas (40px) abaixo dele.
   padding em cima: margem ali colapsaria com a do subtítulo (24px) e sumiria. */
.login-otp { padding-top: 20px; margin-bottom: 60px; } /* 20px de antes + 40px */

/* ---------- Telas baixas: o login cabe sem rolagem ----------
   Medido: sem isto o cartao pede 725px de viewport, e um 1366x768 oferece
   ~640px (menos ainda com barra de favoritos). O que encolhe aqui e ESPACO
   EM BRANCO e o escudo; texto e campos ficam no tamanho de leitura.
   Media query por ALTURA: o que falta e altura, nao largura.
   Resultado: <=780px o cartao pede 590px; <=600px pede 536px. */
@media (max-height: 780px) {
  .login-card { padding: 20px 32px; }
  .login-marca { gap: 6px; margin-bottom: 14px; }
  .login-marca img { width: 72px; height: 72px; }
  .login-marca-texto { font-size: 17px; }
  .login-titulo-acesso { padding-top: 6px; }
  .login-titulo-acesso + form { margin-top: 20px; }
  .login-entrar { margin-top: 20px; }
  .login-otp { padding-top: 6px; margin-bottom: 26px; }
}
@media (max-height: 600px) {
  .login-card { padding: 14px 26px; }
  .login-marca { gap: 4px; margin-bottom: 10px; }
  .login-marca img { width: 52px; height: 52px; }
  .login-marca-texto { font-size: 15px; }
  .login-titulo-acesso { padding-top: 2px; }
  .login-titulo-acesso + form { margin-top: 12px; }
  .login-entrar { margin-top: 12px; }
  .login-otp { padding-top: 2px; margin-bottom: 14px; }
  .login-card .botao-primario { padding: 11px; min-height: 40px; }
}