/* =====================================================================
   Central de Clientes — estilos próprios (sobre o Bootstrap 5.3).
   Mesma paleta do NetivERP: marinho, azul de ação, azul claro de destaque.
   Sem estilos "inline" nas páginas: a política de segurança (CSP) bloqueia.
   ===================================================================== */
:root {
    --cor-primaria: #0B1B33;
    --cor-destaque: #1570EF;
    --cor-destaque-viva: #2EA8FF;
    --cor-sucesso: #079455;
    --cor-erro: #D92D20;
    --cor-fundo: #F4F6FA;
    --cor-borda: #E3E8EF;
    --cor-texto: #101828;
    --cor-texto-secundario: #667085;
    --bs-primary: #1570EF;
    --bs-primary-rgb: 21, 112, 239;
    --bs-link-color: #1570EF;
    --bs-link-color-rgb: 21, 112, 239;
}
body { background: var(--cor-fundo); color: var(--cor-texto); }
.btn-primary { --bs-btn-bg: var(--cor-destaque); --bs-btn-border-color: var(--cor-destaque); --bs-btn-hover-bg: #0F5BD0; --bs-btn-hover-border-color: #0F5BD0; }
.btn-outline-primary { --bs-btn-color: var(--cor-destaque); --bs-btn-border-color: var(--cor-destaque); --bs-btn-hover-bg: var(--cor-destaque); --bs-btn-hover-border-color: var(--cor-destaque); }
.texto-ajuda { font-size: 0.85rem; color: var(--cor-texto-secundario); }
.cartao { background: #fff; border: 1px solid var(--cor-borda); border-radius: 12px; padding: 1.25rem; }
.cartao-estreito { max-width: 560px; }
.cartao.destaque { border: 2px solid var(--cor-destaque); }

/* ---------- Telas de acesso (login, código, QR) ---------- */
.tela-acesso { min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: radial-gradient(circle at 20% 0%, #163463 0%, var(--cor-primaria) 60%); }
.caixa-acesso { width: 100%; max-width: 440px; padding: 24px 16px; }
.caixa-acesso:has(.largo) { max-width: 560px; }
.marca-acesso { color: #fff; font-size: 1.5rem; font-weight: 700; text-align: center; margin-bottom: 1rem; letter-spacing: 0.02em; }
.marca-acesso span, .marca span { color: var(--cor-destaque-viva); }
.cartao-acesso { background: #fff; border-radius: 14px; padding: 1.75rem; box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25); }
.cartao-acesso h1 { font-size: 1.35rem; font-weight: 700; margin-bottom: 0.75rem; }
.campo-codigo { letter-spacing: 0.25em; font-variant-numeric: tabular-nums; }
.campo-codigo.grande { font-size: 1.6rem; text-align: center; font-weight: 600; }
.link-voltar { display: inline-block; margin-top: 1rem; font-size: 0.9rem; }
.passos { padding-left: 1.2rem; }
.passos li { margin-bottom: 0.6rem; }
.qr { display: flex; justify-content: center; margin: 0.75rem 0; }
.qr img { width: 200px; height: 200px; image-rendering: pixelated; border: 8px solid #fff; outline: 1px solid var(--cor-borda); }
.chave-manual { font-size: 0.95rem; word-break: break-all; }
.lista-codigos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.lista-codigos code { display: block; text-align: center; font-size: 1.05rem; padding: 0.45rem; background: var(--cor-fundo);
    border: 1px dashed #B8C2D3; border-radius: 6px; color: var(--cor-texto); }
.senha-temporaria { font-size: 1.05rem; padding: 0.15rem 0.4rem; background: #fff; border-radius: 4px; color: var(--cor-texto); }

/* ---------- Área logada ---------- */
.barra-topo { background: var(--cor-primaria); color: #fff; display: flex; align-items: center; flex-wrap: wrap;
    gap: 0.5rem 1.25rem; padding: 0.7rem 1.25rem; }
.marca { color: #fff; font-weight: 700; font-size: 1.15rem; text-decoration: none; }
.marca:hover { color: #fff; }
.itens-menu { display: flex; align-items: center; gap: 0.25rem; flex: 1; }
.itens-menu a { color: rgba(255, 255, 255, 0.78); text-decoration: none; padding: 0.4rem 0.7rem; border-radius: 6px; }
.itens-menu a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.itens-menu a.ativo { color: #fff; background: rgba(46, 168, 255, 0.18); }
.itens-menu .separador { flex: 1; }
.botao-sair { background: none; border: 1px solid rgba(255, 255, 255, 0.4); color: #fff; border-radius: 6px; padding: 0.3rem 0.8rem; margin-left: 0.25rem; }
.botao-sair:hover { background: rgba(255, 255, 255, 0.1); }
.abrir-menu, .botao-menu { display: none; }
.conteudo { max-width: 1180px; margin: 0 auto; padding: 1.5rem 16px 3rem; }

.grade-indicadores { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; }
.indicador { display: flex; flex-direction: column; gap: 0.15rem; }
.indicador span { font-size: 0.85rem; color: var(--cor-texto-secundario); }
.indicador strong { font-size: 1.8rem; }
.indicador small { font-size: 0.8rem; color: var(--cor-texto-secundario); }
.indicador.alerta { border-color: #F5B5AE; background: #FEF3F2; }
.grade-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; }

.linha-inativa td { color: var(--cor-texto-secundario); }
.linha-falha td:first-child { box-shadow: inset 3px 0 0 var(--cor-erro); }
.filtros-trilha { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; padding: 0.9rem 1.1rem; }
.filtros-trilha .form-label { font-size: 0.8rem; margin-bottom: 0.2rem; }
.tabela-trilha code { white-space: pre-wrap; word-break: break-all; font-size: 0.78rem; }

/* Celular: menu recolhido atrás do botão ☰ (sem JavaScript) */
@media (max-width: 768px) {
    .botao-menu { display: block; margin-left: auto; font-size: 1.4rem; cursor: pointer; padding: 0 0.3rem; }
    .itens-menu { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; }
    .abrir-menu:checked ~ .itens-menu { display: flex; }
    .itens-menu .separador { display: none; }
    .botao-sair { width: 100%; margin: 0.25rem 0 0; }
    .lista-codigos { grid-template-columns: 1fr; }
}

/* Impressão dos códigos de recuperação: só a lista */
@media print {
    .tela-acesso { background: #fff; display: block; }
    .marca-acesso { color: #000; }
    .cartao-acesso { box-shadow: none; }
    .btn, .form-check, .alert { display: none !important; }
}

/* ---------- Clientes ---------- */
.link-cliente { font-weight: 600; text-decoration: none; }
.selo-sistema { display: inline-block; font-size: 0.8rem; padding: 0.15rem 0.55rem; margin: 0.1rem 0.25rem 0.1rem 0;
    border-radius: 999px; background: #EAF2FE; color: #0B4AA2; }
.selo-sistema.suspenso { background: #FEE4E2; color: #B42318; }
.lista-dados { display: grid; grid-template-columns: max-content 1fr; gap: 0.35rem 1rem; margin-bottom: 1rem; font-size: 0.92rem; }
.lista-dados dt { font-weight: 500; color: var(--cor-texto-secundario); }
.lista-dados dd { margin: 0; }
.linha-limite { border-top: 1px solid var(--cor-borda); padding-top: 0.9rem; }
.campo-limite { max-width: 160px; }
.grade-duas-campos { display: grid; grid-template-columns: 1fr 1fr; gap: 0 0.75rem; }
.quebra-linhas { white-space: pre-line; }
details summary { cursor: pointer; }
@media (max-width: 576px) {
    .grade-duas-campos { grid-template-columns: 1fr; }
    .lista-dados { grid-template-columns: 1fr; gap: 0 0; }
    .lista-dados dd { margin-bottom: 0.4rem; }
}