/* =====================================================================
   Legacy Soluções Financeiras — folha de estilos principal
   ---------------------------------------------------------------------
   Identidade visual: navy escuro (#1E4571) + amarelo dourado (#F2B824).
   Linguagem visual corporativa, com cards de borda fina, tipografia
   Inter e zero ornamentação. Toda animação é apenas transição de 150ms
   em hover/focus — nada de keyframes nem efeitos chamativos.
   ===================================================================== */

/* ---------- Tokens da marca (variáveis CSS) ---------- */
:root {
    --cor-primaria:         #1E4571;
    --cor-primaria-escura:  #143452;
    --cor-primaria-clara:   #2D5A85;
    --cor-destaque:         #F2B824;
    --cor-destaque-escura:  #D9A41E;
    --cor-preto:            #1A1A1A;
    --cor-branco:           #FFFFFF;
    --cor-cinza-fundo:      #F8F9FB;
    --cor-cinza-card:       #FFFFFF;
    --cor-cinza-borda:      #E5E7EB;
    --cor-cinza-texto:      #6B7280;
    --cor-texto-principal:  #1A1A1A;
    --cor-sucesso:          #16A34A;
    --cor-erro:             #DC2626;
    --cor-alerta:           #D97706;

    --raio-borda:           8px;
    --raio-borda-grande:    12px;

    --sombra-card:          0 1px 3px rgba(0,0,0,0.05), 0 1px 2px rgba(0,0,0,0.03);
    --sombra-card-hover:    0 4px 12px rgba(0,0,0,0.08);

    --fonte-base: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    --altura-topbar:        76px;
    --largura-sidebar:      240px;
}

/* ---------- Reset/base ---------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: var(--fonte-base);
    font-size: 14px;
    line-height: 1.5;
    color: var(--cor-texto-principal);
    background-color: var(--cor-cinza-fundo);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a {
    color: var(--cor-primaria);
    text-decoration: none;
    transition: color 150ms ease;
}
a:hover { color: var(--cor-primaria-escura); }

img { max-width: 100%; display: block; }

/* ---------- Tipografia ---------- */
h1, h2, h3, h4, h5, h6 {
    margin: 0 0 8px;
    color: var(--cor-texto-principal);
    font-weight: 600;
    line-height: 1.25;
}
h1 { font-size: 28px; font-weight: 700; }
h2 { font-size: 22px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }

p { margin: 0 0 12px; }

.texto-secundario { color: var(--cor-cinza-texto); }
.texto-pequeno    { font-size: 12px; }
.texto-monetario  { font-variant-numeric: tabular-nums; }

/* ---------- Layout principal ---------- */
.topbar {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: var(--altura-topbar);
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-bottom: 3px solid var(--cor-destaque);
    z-index: 100;
}
.topbar-inner {
    height: 100%;
    padding: 0 24px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.topbar-menu-toggle {
    display: none;
    background: transparent;
    border: 0;
    color: var(--cor-branco);
    padding: 8px;
    border-radius: var(--raio-borda);
    cursor: pointer;
    transition: background-color 150ms ease;
}
.topbar-menu-toggle:hover { background-color: rgba(255,255,255,0.1); }

.topbar-marca {
    display: flex;
    flex-direction: column;
    color: var(--cor-branco);
    line-height: 1;
}
.topbar-marca:hover { color: var(--cor-branco); }
.topbar-marca-titulo {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: 0.05em;
}
.topbar-marca-sub {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    color: rgba(255,255,255,0.75);
    margin-top: 4px;
}
/* Logo do tenant no header (substitui o texto quando logo_path está setado).
   Limita altura pra caber na topbar (64px) com folga. Auto width preserva
   aspect ratio. background branco quando logo tem fundo transparente fica
   ruim sobre o navy — então NÃO setamos fundo; espera-se que o logo tenha
   contraste com a cor primária. */
.topbar-marca-logo {
    max-height: 64px;       /* topbar = 76px, deixa ~6px de margem em cima/baixo */
    max-width: 380px;
    object-fit: contain;
    display: block;
}

/* Bloco do usuário no canto direito do header (nome + badge + sair). */
.header-usuario {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cor-branco);
    font-size: 14px;
}
.header-usuario-nome {
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-branco);
}
.header-link-sair {
    color: var(--cor-branco);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    padding: 6px 14px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--raio-borda);
    transition: background-color 150ms ease, border-color 150ms ease;
}
.header-link-sair:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.sidebar {
    position: fixed;
    top: var(--altura-topbar);
    left: 0;
    bottom: 0;
    width: var(--largura-sidebar);
    background-color: var(--cor-branco);
    border-right: 1px solid var(--cor-cinza-borda);
    overflow: hidden;
    z-index: 90;
    transition: transform 200ms ease;
    /* flex column garante que .sidebar-perfil (mobile) fica fixo no fim */
    display: flex;
    flex-direction: column;
}
.sidebar-nav {
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1 1 auto;
    min-height: 0;        /* permite overflow funcionar dentro do flex */
    overflow-y: auto;
}

/* Rodapé da sidebar — perfil + Sair. Visível em TODOS os tamanhos
   (desktop e mobile). Header fica limpo, só com badge admin/vendedor. */
.sidebar-perfil {
    display: block;
    flex-shrink: 0;
    padding: 12px;
    background-color: var(--cor-cinza-fundo);
    border-top: 1px solid var(--cor-cinza-borda);
}
.sidebar-perfil-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--raio-borda);
    color: var(--cor-texto-principal);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: background-color 150ms ease;
}
.sidebar-perfil-item:hover {
    background-color: var(--cor-branco);
}
.sidebar-perfil-item.ativo {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
}
.sidebar-perfil-avatar {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sidebar-perfil-item.ativo .sidebar-perfil-avatar {
    background-color: var(--cor-destaque);
    color: var(--cor-primaria);
}
.sidebar-perfil-nome {
    display: flex;
    flex-direction: column;
    min-width: 0;     /* deixa flex truncar texto longo */
    flex: 1;
}
.sidebar-perfil-label {
    font-weight: 600;
    color: inherit;
}
.sidebar-perfil-meta {
    font-size: 12px;
    color: var(--cor-cinza-texto);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sidebar-perfil-item.ativo .sidebar-perfil-meta {
    color: rgba(255,255,255,0.75);
}
.sidebar-perfil-divisor {
    height: 2px;
    background-color: var(--cor-destaque);
    margin: 12px 0;
    border-radius: 1px;
}
.sidebar-perfil-sair {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    background-color: var(--cor-branco);
    color: var(--cor-erro);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 150ms ease, border-color 150ms ease;
}
.sidebar-perfil-sair:hover {
    background-color: #FEF2F2;
    border-color: var(--cor-erro);
    color: var(--cor-erro);
}
.sidebar-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: var(--raio-borda);
    color: var(--cor-cinza-texto);
    font-size: 14px;
    font-weight: 500;
    transition: all 150ms ease;
}
.sidebar-item:hover {
    background-color: var(--cor-cinza-fundo);
    color: var(--cor-texto-principal);
}
.sidebar-item.ativo {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
}
.sidebar-item.ativo:hover {
    background-color: var(--cor-primaria-escura);
    color: var(--cor-branco);
}
.sidebar-item-icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.sidebar-item-rotulo { flex: 1; min-width: 0; }
.sidebar-item-em-breve { opacity: .65; }
.sidebar-item-em-breve:hover { opacity: .9; }
.sidebar-item-badge {
    background: #FEF3C7;
    color: #92400E;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 999px;
    letter-spacing: .3px;
    text-transform: uppercase;
}
.sidebar-item.ativo .sidebar-item-badge {
    background: var(--cor-destaque);
    color: var(--cor-primaria);
}

.sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background-color: rgba(0,0,0,0.35);
    z-index: 85;
}
.sidebar-overlay.aberto { display: block; }

.main {
    margin-left: var(--largura-sidebar);
    margin-top: var(--altura-topbar);
    padding: 24px 32px;
    min-height: calc(100vh - var(--altura-topbar));
    display: flex;
    flex-direction: column;
}

.rodape {
    margin-top: auto;
    padding: 32px 0 16px;
    text-align: center;
}
.rodape-texto {
    color: var(--cor-cinza-texto);
    font-size: 12px;
}

/* ---------- Títulos de página ---------- */
.titulo-pagina {
    margin-bottom: 24px;
    min-width: 0;       /* permite encolher abaixo do min-content em flex parents */
}
.titulo-pagina h1 {
    margin-bottom: 4px;
    overflow-wrap: break-word;  /* quebra palavras longas (ex: "Administrador") */
}
.titulo-pagina-subtitulo {
    color: var(--cor-cinza-texto);
    font-size: 14px;
}

/* ---------- Cards ---------- */
.card {
    background-color: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-card);
    padding: 20px;
    transition: box-shadow 150ms ease;
}
.card-hover:hover { box-shadow: var(--sombra-card-hover); }

.card-titulo {
    font-size: 16px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--cor-texto-principal);
}

/* KPI: card pequeno com label em cima e valor grande em baixo. */
.kpi {
    background-color: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    box-shadow: var(--sombra-card);
    padding: 20px;
}
.kpi-label {
    display: block;
    color: var(--cor-cinza-texto);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 10px;
}
.kpi-valor {
    display: block;
    color: var(--cor-primaria);
    font-size: 28px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}
.kpi-rodape {
    margin-top: 8px;
    font-size: 12px;
    color: var(--cor-cinza-texto);
}

/* ---------- Botões ---------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--raio-borda);
    font-family: var(--fonte-base);
    font-size: 14px;
    font-weight: 500;
    line-height: 1;
    border: 1px solid transparent;
    background-color: transparent;
    color: var(--cor-texto-principal);
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    white-space: nowrap;
}
.btn:disabled,
.btn[disabled] {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-primario {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}
.btn-primario:hover {
    background-color: var(--cor-primaria-escura);
    border-color: var(--cor-primaria-escura);
    color: var(--cor-branco);
}

.btn-secundario {
    background-color: transparent;
    color: var(--cor-primaria);
    border-color: var(--cor-primaria);
}
.btn-secundario:hover {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
}

.btn-destaque {
    background-color: var(--cor-destaque);
    color: var(--cor-preto);
    border-color: var(--cor-destaque);
}
.btn-destaque:hover {
    background-color: var(--cor-destaque-escura);
    border-color: var(--cor-destaque-escura);
    color: var(--cor-preto);
}

.btn-perigo {
    background-color: var(--cor-erro);
    color: var(--cor-branco);
    border-color: var(--cor-erro);
}
.btn-perigo:hover {
    background-color: #B91C1C;
    border-color: #B91C1C;
    color: var(--cor-branco);
}

.btn-fantasma {
    background-color: transparent;
    color: var(--cor-cinza-texto);
    border-color: var(--cor-cinza-borda);
}
.btn-fantasma:hover {
    color: var(--cor-texto-principal);
    background-color: var(--cor-cinza-fundo);
}

.btn-pequeno { padding: 6px 12px; font-size: 12px; }
.btn-largo   { width: 100%; }

/* ---------- Formulários ---------- */
.form-grupo {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}
.form-grupo label {
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-texto-principal);
}
.form-grupo .ajuda {
    font-size: 12px;
    color: var(--cor-cinza-texto);
}
.form-grupo .erro-campo {
    font-size: 12px;
    color: var(--cor-erro);
}

.input,
.select,
.textarea {
    width: 100%;
    padding: 10px 12px;
    font-family: var(--fonte-base);
    font-size: 14px;
    color: var(--cor-texto-principal);
    background-color: var(--cor-branco);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
.input:focus,
.select:focus,
.textarea:focus {
    outline: 0;
    border-color: var(--cor-primaria);
    box-shadow: 0 0 0 3px rgba(30, 69, 113, 0.18);
}
.textarea { min-height: 96px; resize: vertical; }

.input[readonly],
.input:disabled {
    background-color: var(--cor-cinza-fundo);
    color: var(--cor-cinza-texto);
}

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

.form-acoes {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 8px;
}

/* ---------- Tabelas ----------
   Wrapper com scroll horizontal + sombra lateral nas bordas indicando
   que há conteúdo pra rolar. A sombra usa background-attachment local +
   scroll: as 2 primeiras camadas (brancas) "comem" o gradient quando o
   scroll está nos extremos; as 2 últimas (sombra) ficam fixas e
   aparecem só quando o scroll permite ver. */
.tabela-wrapper {
    overflow-x: auto;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    background-color: var(--cor-branco);
    background-image:
        linear-gradient(to right, #fff 30%, rgba(255,255,255,0)),
        linear-gradient(to right, rgba(255,255,255,0), #fff 70%),
        radial-gradient(farthest-side at 0 50%, rgba(15,23,42,.10), rgba(15,23,42,0)),
        radial-gradient(farthest-side at 100% 50%, rgba(15,23,42,.10), rgba(15,23,42,0));
    background-position: left center, right center, left center, right center;
    background-repeat: no-repeat;
    background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
    background-attachment: local, local, scroll, scroll;
}
.tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}
.tabela thead th {
    text-align: left;
    padding: 12px 16px;
    background-color: var(--cor-cinza-fundo);
    color: var(--cor-cinza-texto);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--cor-cinza-borda);
    white-space: nowrap;
}
.tabela tbody td {
    padding: 12px 16px;
    border-bottom: 1px solid var(--cor-cinza-borda);
    color: var(--cor-texto-principal);
    vertical-align: middle;
}
.tabela tbody tr:nth-child(even) td {
    background-color: rgba(248, 249, 251, 0.5);
}
.tabela tbody tr:hover td {
    background-color: var(--cor-cinza-fundo);
}
.tabela tbody tr:last-child td { border-bottom: 0; }

.tabela .col-acoes {
    text-align: right;
    white-space: nowrap;
}
.tabela .col-numero {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

/* ---------- Badges ---------- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1;
}
.badge-sucesso  { background-color: #DCFCE7; color: #15803D; }
.badge-erro     { background-color: #FEE2E2; color: #B91C1C; }
.badge-alerta   { background-color: #FEF3C7; color: #92400E; }
.badge-info     { background-color: #DBEAFE; color: #1E40AF; }
.badge-neutro   { background-color: #F3F4F6; color: #4B5563; }
.badge-destaque { background-color: var(--cor-destaque); color: var(--cor-preto); }

/* ---------- Alertas ---------- */
.alertas-area {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}
.alerta {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    border-radius: var(--raio-borda);
    border: 1px solid;
    font-size: 14px;
}
.alerta-icone {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
}
.alerta-sucesso { background-color: #F0FDF4; border-color: #BBF7D0; color: #14532D; }
.alerta-erro    { background-color: #FEF2F2; border-color: #FECACA; color: #7F1D1D; }
.alerta-alerta  { background-color: #FFFBEB; border-color: #FDE68A; color: #78350F; }
.alerta-info    { background-color: #EFF6FF; border-color: #BFDBFE; color: #1E3A8A; }

/* Botão × pra fechar alertas persistentes (erro/alerta — não auto-fecham).
   Adicionado via JS pra evitar mexer em todo template existente. */
.alerta-fechar {
    margin-left: auto;
    background: transparent;
    border: 0;
    color: inherit;
    font-size: 22px;
    line-height: 1;
    padding: 0 4px;
    cursor: pointer;
    opacity: .6;
    transition: opacity .12s ease;
    font-family: inherit;
}
.alerta-fechar:hover { opacity: 1; }

/* ---------- Grid de KPIs ---------- */
.grid-kpi {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}

/* ---------- Utilitários ---------- */
.flex { display: flex; }
.flex-coluna { display: flex; flex-direction: column; }
.flex-align-center { align-items: center; }
.flex-entre { justify-content: space-between; }
.flex-fim { justify-content: flex-end; }
.gap-8  { gap: 8px;  }
.gap-12 { gap: 12px; }
.gap-16 { gap: 16px; }
.gap-24 { gap: 24px; }

.mt-0 { margin-top: 0;  }
.mt-8 { margin-top: 8px;  }
.mt-16 { margin-top: 16px; }
.mt-24 { margin-top: 24px; }
.mb-0 { margin-bottom: 0;  }
.mb-8 { margin-bottom: 8px;  }
.mb-16 { margin-bottom: 16px; }
.mb-24 { margin-bottom: 24px; }

.oculto { display: none !important; }

/* ---------- Responsivo ----------
   Breakpoint em 1024px: sistema corporativo B2B usado o dia inteiro precisa
   da sidebar fixa em desktop e tablet horizontal. Abaixo de 1024 (tablet
   retrato e celular), a sidebar vira drawer com hambúrguer. */
@media (max-width: 1024px) {
    .topbar-inner { padding: 0 16px; }
    .topbar-menu-toggle { display: inline-flex; }
    .topbar-marca-sub { display: none; }

    .sidebar {
        transform: translateX(-100%);
        box-shadow: 4px 0 16px rgba(0,0,0,0.08);
    }
    .sidebar.aberto { transform: translateX(0); }

    .main {
        margin-left: 0;
        padding: 16px;
    }

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

    /* (Perfil/Sair já estão escondidos em tamanho desktop pela regra global
       abaixo; mantemos a regra ali pra evitar duplicação. .sidebar-perfil
       também é visível em todos os tamanhos.) */
}

/* Header limpo: nome + 'Meu perfil' + 'Sair' não aparecem em NENHUM
   tamanho — esses controles vivem no rodapé da sidebar.
   No header fica só: marca à esquerda + badge do papel (Admin/Vendedor). */
.header-usuario-nome,
.header-usuario .header-link-sair {
    display: none;
}

/* =====================================================================
   Tela de login (página isolada, pré-autenticação)
   ---------------------------------------------------------------------
   Estilo "portal corporativo de banco/financeira": navy + amarelo dourado,
   tipografia limpa e centralizada. Não compartilha layout com app-shell.
   ===================================================================== */

.tela-login {
    background-color: var(--cor-cinza-fundo);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    /* Reset do layout do app — login não usa sidebar nem header fixo. */
    margin: 0;
}

.login-tela {
    width: 100%;
    max-width: 420px;
}

.login-card {
    padding: 40px 36px;
    background-color: var(--cor-branco);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda-grande);
    box-shadow: var(--sombra-card);
}

.login-brand {
    text-align: center;
    margin-bottom: 32px;
}

.login-brand h1 {
    font-size: 36px;
    font-weight: 800;
    color: var(--cor-primaria);
    letter-spacing: 2px;
    margin: 0;
}

.login-subtitulo {
    font-size: 11px;
    font-weight: 500;
    color: var(--cor-cinza-texto);
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 4px 0 0;
}

.login-divisor {
    width: 32px;
    height: 3px;
    background-color: var(--cor-destaque);
    margin: 20px auto 12px;
    border-radius: 2px;
}

.login-tagline {
    font-size: 13px;
    color: var(--cor-cinza-texto);
    font-style: italic;
    margin: 0;
}

.login-footer {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--cor-cinza-borda);
    text-align: center;
    font-size: 11px;
    color: var(--cor-cinza-texto);
    line-height: 1.5;
}

/* Botão que ocupa a largura inteira do container (usado no submit do login
   e em modais/forms onde o CTA precisa ser o foco visual). */
.btn-full {
    width: 100%;
    justify-content: center;
}

/* =====================================================================
   Anti-autofill do Chrome
   ---------------------------------------------------------------------
   Chrome/Edge aplicam um fundo amarelo-azulado nos inputs preenchidos
   automaticamente pelo gerenciador de senhas, que destoa do card branco
   do login. A box-shadow inset com 30px reescreve o fundo, e a transition
   gigante segura o estilo pra não voltar enquanto o usuário interage.
   ===================================================================== */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px var(--cor-branco) inset !important;
    -webkit-text-fill-color: var(--cor-texto-principal) !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* =====================================================================
   Dashboard real (admin + vendedor)
   ---------------------------------------------------------------------
   Componentes específicos do dashboard: gráfico, listas de ranking e
   vendas, mini-cards de aniversariantes, barra de progresso da meta.
   ===================================================================== */

.card-grafico {
    margin-bottom: 24px;
}
.card-grafico canvas {
    max-height: 320px;
}

/* Grid de 2 colunas pra cards lado a lado. Vira 1 coluna no mesmo
   breakpoint do app-shell (1024px), pra alinhar com a sidebar virar drawer. */
.grid-2-colunas {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 24px;
}

@media (max-width: 1024px) {
    .grid-2-colunas {
        grid-template-columns: 1fr;
    }
}

/* ---------- Lista de ranking (top 5) ---------- */
.lista-ranking {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.lista-ranking li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.lista-ranking li:last-child {
    border-bottom: none;
}

.ranking-posicao {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--cor-cinza-fundo);
    color: var(--cor-cinza-texto);
    font-weight: 700;
    font-size: 13px;
    border-radius: 50%;
    flex-shrink: 0;
}
/* Pódio: 1º amarelo, 2º e 3º navy. Demais ficam neutros. */
.lista-ranking li:nth-child(1) .ranking-posicao {
    background-color: var(--cor-destaque);
    color: var(--cor-preto);
}
.lista-ranking li:nth-child(2) .ranking-posicao,
.lista-ranking li:nth-child(3) .ranking-posicao {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
}

.ranking-nome {
    flex: 1;
    font-weight: 500;
    color: var(--cor-texto-principal);
}
.ranking-valor {
    font-weight: 600;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}

/* ---------- Pódio moderno (página de ranking) ----------
   Três cards lado a lado: 2º à esquerda, 1º centro (maior, dourado),
   3º direita. Foto circular grande + nome + qtd de vendas. Sem valores
   monetários (a pedido do proprietário). Design com gradient sutil,
   sombras e medalha emoji destacada. */
.podio-moderno {
    display: grid;
    grid-template-columns: 1fr 1.3fr 1fr;
    gap: 20px;
    align-items: end;
    margin: 28px 0;
}
.podio-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: 18px;
    padding: 28px 18px 22px;
    text-align: center;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
    transition: transform .2s ease, box-shadow .2s ease;
}
.podio-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(15, 23, 42, 0.10);
}
.podio-medalha-emoji {
    position: absolute;
    top: -22px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 44px;
    line-height: 1;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.15));
}
.podio-avatar-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 8px auto 14px;
}
.podio-avatar-img {
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(15,23,42,.15);
}
.podio-avatar-fallback {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    letter-spacing: 1px;
    border: 4px solid #fff;
    box-shadow: 0 4px 14px rgba(15,23,42,.15);
}
.podio-posicao-numero {
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    color: var(--cor-cinza-texto);
    background: var(--cor-cinza-card);
    padding: 3px 10px;
    border-radius: 999px;
    letter-spacing: .5px;
    margin-bottom: 8px;
}
.podio-nome-grande {
    font-weight: 700;
    font-size: 16px;
    color: var(--cor-texto-principal);
    margin: 4px 0 6px;
    line-height: 1.25;
}
.podio-qtd-vendas {
    font-size: 13px;
    color: var(--cor-cinza-texto);
    font-weight: 500;
}
.podio-tag-voce {
    display: inline-block;
    background: var(--cor-destaque);
    color: var(--cor-primaria);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: 999px;
    letter-spacing: .5px;
    text-transform: uppercase;
    vertical-align: middle;
}

/* 1º lugar — destaque máximo */
.podio-card.podio-pos-1 {
    background: linear-gradient(180deg, #FFFDF4 0%, #FFFFFF 60%);
    border: 2px solid var(--cor-destaque);
    padding-top: 34px;
    padding-bottom: 28px;
    box-shadow: 0 12px 30px rgba(242, 184, 36, 0.20);
}
.podio-card.podio-pos-1 .podio-medalha-emoji { font-size: 56px; top: -28px; }
.podio-card.podio-pos-1 .podio-nome-grande { font-size: 19px; }
.podio-card.podio-pos-1 .podio-posicao-numero {
    background: var(--cor-destaque);
    color: var(--cor-primaria);
}

/* 2º e 3º — sutilmente diferentes */
.podio-card.podio-pos-2 { border-color: #CBD5E1; }
.podio-card.podio-pos-3 { border-color: #CD7F32; opacity: .98; }

/* "Você": realce dourado sutil sem quebrar a hierarquia visual */
.podio-card.podio-voce {
    border-color: var(--cor-destaque);
    background: linear-gradient(180deg, #FFF8E6 0%, #FFFFFF 100%);
}

@media (max-width: 768px) {
    .podio-moderno {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    .podio-card.podio-pos-1 { order: -1; }
}

/* ---------- Lista do 4º colocado em diante (versão moderna) ---------- */
.lista-ranking-moderna {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
}
.lista-ranking-moderna li {
    display: grid;
    grid-template-columns: 32px 44px 1fr;
    align-items: center;
    gap: 14px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.lista-ranking-moderna li:last-child { border-bottom: none; }
.ranking-posicao-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cor-cinza-card);
    color: var(--cor-cinza-texto);
    font-weight: 700;
    font-size: 13px;
    display: flex; align-items: center; justify-content: center;
}
.ranking-avatar-mini img.podio-avatar-img,
.ranking-avatar-mini .podio-avatar-fallback {
    border-width: 2px;
}
.ranking-nome-info { display: flex; flex-direction: column; gap: 2px; }
.ranking-nome-principal { font-weight: 600; color: var(--cor-texto-principal); }
.ranking-meta-info { font-size: 12px; color: var(--cor-cinza-texto); }
.ranking-voce-moderno {
    background: #FFF8E6;
    margin: 0 -16px;
    padding: 12px 16px !important;
    border-radius: 8px;
}

/* ---------- Lista de vendas (últimas N) ---------- */
.lista-vendas {
    list-style: none;
    margin: 16px 0 0;
    padding: 0;
}
.lista-vendas li {
    padding: 12px 0;
    border-bottom: 1px solid var(--cor-cinza-borda);
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 4px 16px;
    align-items: center;
}
.lista-vendas li:last-child {
    border-bottom: none;
}

.lista-vendas .venda-cliente {
    font-weight: 500;
    color: var(--cor-texto-principal);
    grid-row: 1;
    grid-column: 1;
}
.lista-vendas .venda-meta {
    font-size: 12px;
    color: var(--cor-cinza-texto);
    grid-row: 2;
    grid-column: 1;
}
.lista-vendas .venda-meta em {
    font-style: italic;
    color: var(--cor-cinza-texto);
}
.lista-vendas .venda-valor {
    font-weight: 600;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
    grid-row: 1;
    grid-column: 2;
    text-align: right;
}
.lista-vendas .venda-status {
    grid-row: 2;
    grid-column: 2;
    justify-self: end;
}

/* ---------- Mensagem de lista vazia ---------- */
.lista-vazia {
    color: var(--cor-cinza-texto);
    font-size: 14px;
    margin: 16px 0 0;
    font-style: italic;
}

/* Texto de ajuda abaixo de um input — explica intenção do campo. Distinto
   de .ajuda do form-grupo: aqui o uso é inline em qualquer contexto. */
.texto-ajuda {
    font-size: 12px;
    color: var(--cor-cinza-texto);
    margin-top: 4px;
    line-height: 1.4;
}

/* ---------- Grid de aniversariantes ---------- */
.grid-aniversariantes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.mini-card-aniversariante {
    padding: 14px;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    background-color: var(--cor-cinza-fundo);
}
.mini-card-aniversariante .ani-nome {
    font-weight: 600;
    font-size: 14px;
    color: var(--cor-texto-principal);
    margin-bottom: 4px;
}
.mini-card-aniversariante .ani-data {
    font-size: 12px;
    color: var(--cor-primaria);
    font-weight: 500;
    margin-bottom: 6px;
}
.mini-card-aniversariante .ani-meta {
    font-size: 12px;
    color: var(--cor-cinza-texto);
    line-height: 1.5;
}

/* ---------- Página dedicada de aniversariantes ----------
   Link de WhatsApp ao lado do telefone na tabela e badge amarelo suave
   pra destacar a idade que o cliente vai fazer. */
.link-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cor-primaria);
    text-decoration: none;
    font-size: 13px;
    font-weight: 500;
    margin-left: 8px;
}
.link-whatsapp:hover { text-decoration: underline; }

.badge-aniversario {
    display: inline-block;
    padding: 2px 10px;
    background: #FFF8E6;
    color: #8A6D00;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

/* ---------- Barra de progresso (atingimento de meta) ---------- */
.progresso-info {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: var(--cor-cinza-texto);
    margin-bottom: 8px;
    margin-top: 16px;
}
.progresso-info strong {
    color: var(--cor-texto-principal);
}

.progresso {
    position: relative;
    width: 100%;
    height: 28px;
    background-color: var(--cor-cinza-borda);
    border-radius: 14px;
    overflow: hidden;
    margin: 4px 0 12px;
}
.progresso-barra {
    height: 100%;
    background-color: var(--cor-primaria);
    border-radius: 14px;
    transition: width 400ms ease-out;
}
.progresso-barra.meta-batida {
    background-color: var(--cor-destaque);
}
.progresso-texto {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--cor-branco);
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
}
/* Quando meta foi batida, barra amarela exige texto escuro. */
.progresso:has(.meta-batida) .progresso-texto {
    color: var(--cor-preto);
    text-shadow: none;
}

/* Variante compacta: barra fina pra usar dentro de células de tabela
   (histórico de metas do vendedor). Some o texto interno — quem mostra o
   percentual é o badge ao lado. */
.progresso.progresso-mini {
    height: 8px;
    margin: 6px 0 0;
}
.progresso-mini .progresso-texto {
    display: none;
}

/* Coluna de input de meta na grade do admin — fica alinhada à direita e
   estreita pra emparelhar com as outras colunas numéricas. */
.tabela-metas input.input {
    max-width: 160px;
    text-align: right;
}

/* ---------- Card explicativo discreto (rodapé do dashboard vendedor) ---------- */
.card-explicativo {
    background-color: var(--cor-cinza-fundo);
    border: 1px dashed var(--cor-cinza-borda);
    padding: 14px 18px;
    border-radius: var(--raio-borda);
    font-size: 13px;
    color: var(--cor-cinza-texto);
    line-height: 1.5;
    margin-top: 24px;
}
.card-explicativo strong {
    color: var(--cor-texto-principal);
}

/* =====================================================================
   Cadastros (bancos, clientes) — listagens, formulários e detalhe
   ===================================================================== */

/* Cabeçalho de página com botão de ação à direita. */
.titulo-pagina-flex {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.titulo-pagina-flex .titulo-pagina {
    margin-bottom: 0;
}

/* Barra de busca acima de tabelas. */
.barra-busca {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.barra-busca .input {
    flex: 1 1 0%;
    max-width: 360px;
    min-width: 0;       /* permite encolher; flex-basis controla largura inicial */
}

/* ============================================================
   Sino do header (notificações do sistema) + dropdown
   ============================================================ */
.sino-wrapper {
    position: relative;
    display: inline-flex;
    margin-right: 6px;
}
.sino-btn {
    position: relative;
    background: transparent;
    border: 0;
    padding: 8px;
    cursor: pointer;
    color: var(--cor-destaque);
    border-radius: 50%;
    transition: background-color .15s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.sino-btn:hover { background: rgba(255,255,255,.08); }
.sino-btn:focus-visible { outline: 2px solid var(--cor-destaque); outline-offset: 2px; }
.sino-badge {
    position: absolute;
    top: 2px; right: 0;
    background: #DC2626;
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    padding: 1px 5px;
    border-radius: 999px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
    border: 2px solid var(--cor-primaria);
    letter-spacing: .2px;
}

.sino-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 92vw;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 16px 48px rgba(15,23,42,.18), 0 4px 12px rgba(15,23,42,.08);
    z-index: 8500;
    overflow: hidden;
    animation: sino-pop .15s ease-out;
}
@keyframes sino-pop {
    from { opacity: 0; transform: translateY(-6px) scale(.98); }
    to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
.sino-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--cor-cinza-card);
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.sino-titulo {
    font-weight: 700;
    color: var(--cor-texto-principal);
    font-size: 14px;
}
.sino-marcar-todas {
    background: transparent; border: 0; padding: 0;
    color: var(--cor-primaria); font-size: 12px; font-weight: 600;
    cursor: pointer; font-family: var(--fonte-base);
}
.sino-marcar-todas:hover { text-decoration: underline; }

.sino-lista {
    max-height: 420px;
    overflow-y: auto;
}
.sino-vazio {
    padding: 32px 16px;
    text-align: center;
    color: var(--cor-cinza-texto);
}
.sino-vazio p { margin: 0; font-size: 13px; }

.sino-item {
    display: flex;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid #F1F5F9;
    text-decoration: none;
    color: inherit;
    transition: background-color .12s ease;
}
.sino-item:hover { background: #F8FAFC; }
.sino-item:last-child { border-bottom: 0; }
.sino-item-nao-lida {
    background: #FFFBEB;
    border-left: 3px solid var(--cor-destaque);
    padding-left: 13px;
}
.sino-item-icone {
    font-size: 22px;
    line-height: 1;
    flex-shrink: 0;
}
.sino-item-corpo { flex: 1; min-width: 0; }
.sino-item-titulo {
    font-weight: 700;
    font-size: 13px;
    color: var(--cor-texto-principal);
    margin-bottom: 2px;
}
.sino-item-msg {
    font-size: 12px;
    color: #475569;
    line-height: 1.4;
    margin-bottom: 4px;
    word-break: break-word;
}
.sino-item-tempo {
    font-size: 11px;
    color: var(--cor-cinza-texto);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 768px) {
    .sino-dropdown {
        position: fixed;
        top: auto;
        bottom: 70px;
        right: 8px;
        left: 8px;
        width: auto;
        max-height: 70vh;
    }
}

/* ============================================================
   Chat estilo WhatsApp — /avisos.php (mural de mensagens)
   ============================================================ */
.chat-container {
    background: #ECE5DD;  /* fundo característico WhatsApp claro */
    background-image:
        radial-gradient(rgba(0,0,0,.04) 1px, transparent 1px);
    background-size: 24px 24px;
    border-radius: var(--raio-borda);
    padding: 20px 16px 28px;
    min-height: 200px;
}
.chat-vazio {
    text-align: center;
    padding: 60px 20px;
    color: var(--cor-cinza-texto);
}
.chat-vazio p { margin: 0; font-size: 14px; }

.chat-dia-separador {
    text-align: center;
    margin: 12px 0 16px;
}
.chat-dia-separador span {
    display: inline-block;
    background: rgba(255,255,255,.7);
    color: #475569;
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.05);
}

.chat-mensagem {
    display: flex;
    margin-bottom: 8px;
}
.chat-bolha {
    background: #fff;
    padding: 8px 12px 6px;
    border-radius: 8px;
    box-shadow: 0 1px 1px rgba(0,0,0,.08);
    max-width: 78%;
    min-width: 0;       /* sem min-width: era 180px e estourava em mobile estreito */
    position: relative;
}
@media (max-width: 768px) {
    .chat-bolha { max-width: 90%; }
}
/* Pontinha estilo bubble */
.chat-bolha::before {
    content: '';
    position: absolute;
    left: -8px;
    top: 0;
    width: 0; height: 0;
    border-top: 8px solid #fff;
    border-left: 8px solid transparent;
    filter: drop-shadow(-1px 0 0 rgba(0,0,0,.04));
}
.chat-mensagem-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.chat-autor {
    font-weight: 700;
    font-size: 12px;
    color: #00A884;  /* verde WhatsApp */
}
.chat-tag {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 999px;
    letter-spacing: .2px;
}
.chat-tag-broadcast {
    background: #E0F2FE;
    color: #075985;
}
.chat-tag-direto {
    background: #FEF3C7;
    color: #92400E;
}
.chat-titulo {
    font-weight: 700;
    color: var(--cor-texto-principal);
    font-size: 14px;
    margin-bottom: 4px;
}
.chat-corpo {
    color: #1F2937;
    font-size: 14px;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}
.chat-rodape {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 6px;
}
.chat-hora {
    font-size: 11px;
    color: #94A3B8;
    font-variant-numeric: tabular-nums;
}
.chat-acoes {
    display: inline-flex;
    gap: 4px;
}
.acao-pill-mini {
    padding: 4px 6px;
}
.acao-pill-mini svg {
    width: 13px;
    height: 13px;
}

/* Abas de status de pagamento (/comissoes-banco.php) — Todas/Pendentes/Pagas */
.comissoes-abas {
    display: flex;
    gap: 4px;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--cor-cinza-borda);
    overflow-x: auto;
}
.comissao-aba {
    padding: 10px 18px;
    color: var(--cor-cinza-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    border-bottom: 3px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
    transition: color .12s ease, border-color .12s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.comissao-aba:hover { color: var(--cor-texto-principal); }
.comissao-aba-ativa {
    color: var(--cor-primaria);
    border-bottom-color: var(--cor-destaque);
}
.comissao-aba-ativa.comissao-aba-pendente {
    color: #92400E;
    border-bottom-color: #F59E0B;
}
.comissao-aba-ativa.comissao-aba-pago {
    color: #166534;
    border-bottom-color: #10B981;
}
.comissao-aba-badge {
    background: #FEF3C7;
    color: #92400E;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 999px;
    font-weight: 700;
}

/* Tags CRM-style do filtro */
.avisos-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--cor-cinza-borda);
    color: var(--cor-cinza-texto);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: all .12s ease;
}
.avisos-tag:hover {
    border-color: var(--cor-primaria);
    color: var(--cor-primaria);
}
.avisos-tag-ativa {
    background: var(--cor-primaria);
    color: #fff;
    border-color: var(--cor-primaria);
}
.avisos-tag-ativa:hover {
    background: var(--cor-primaria);
    color: #fff;
}

/* /notificacoes.php — histórico do sino */
.notif-lista {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notif-item {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.notif-item:last-child { border-bottom: 0; }
.notif-item-nao-lida {
    background: #FFFBEB;
    border-left: 3px solid var(--cor-destaque);
    padding-left: 17px;
}
.notif-icone { font-size: 28px; line-height: 1; flex-shrink: 0; }
.notif-corpo { flex: 1; min-width: 0; }
.notif-titulo { font-weight: 700; color: var(--cor-texto-principal); font-size: 15px; margin-bottom: 4px; }
.notif-msg { color: #374151; font-size: 13px; line-height: 1.5; margin-bottom: 6px; }
.notif-meta { font-size: 12px; color: var(--cor-cinza-texto); }

/* ============================================================
   Coluna de ações em tabelas — pills coloridas alinhadas à direita.
   Cada ação tem variante semântica (.acao-ver, .acao-editar, etc) com
   cor de fundo sutil + ícone SVG inline. Hover eleva levemente.
   Mobile: padding maior pra tap-target, sem mudar layout. */
.tabela-acoes {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    flex-wrap: nowrap;
    justify-content: flex-end;
    font-family: var(--fonte-base);
}
.acao-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 10px;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease, color .12s ease;
    cursor: pointer;
    background: #F1F5F9;
    color: #475569;
    line-height: 1;
    white-space: nowrap;
    font-family: inherit;
}
.acao-pill:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(15,23,42,.08);
    text-decoration: none;
}
.acao-pill svg {
    flex-shrink: 0;
    width: 13px;
    height: 13px;
    stroke-width: 2.2;
}
.acao-pill.acao-ver       { color: #475569; background: #F1F5F9; }
.acao-pill.acao-ver:hover { background: #E2E8F0; }

.acao-pill.acao-editar    { color: #1E4571; background: #EFF6FF; }
.acao-pill.acao-editar:hover { background: #DBEAFE; }

.acao-pill.acao-whatsapp  { color: #fff; background: #25D366; }
.acao-pill.acao-whatsapp:hover { background: #1FAE54; color: #fff; }

.acao-pill.acao-processar { color: #7C2D12; background: var(--cor-destaque); }
.acao-pill.acao-processar:hover { background: #E0A91A; color: #7C2D12; }

.acao-pill.acao-pago      { color: #166534; background: #DCFCE7; }
.acao-pill.acao-pago:hover { background: #BBF7D0; color: #14532D; }

.acao-pill.acao-chamar    { color: #fff; background: var(--cor-primaria); }
.acao-pill.acao-chamar:hover { background: #163556; color: #fff; }

.acao-pill.acao-perigo    { color: #B91C1C; background: #FEF2F2; border-color: #FECACA; }
.acao-pill.acao-perigo:hover { background: #DC2626; color: #fff; border-color: #DC2626; }

.acao-pill.acao-neutro    { color: #1E4571; background: #E0E7FF; }
.acao-pill.acao-neutro:hover { background: #C7D2FE; }

/* Pill desabilitada (state badge — não é botão clicável). Usado por
   ex em "Já chamado" no /lista.php pra manter mesmo grid visual. */
.acao-pill.acao-static {
    background: #DCFCE7;
    color: #166534;
    cursor: default;
}
.acao-pill.acao-static:hover {
    transform: none;
    box-shadow: none;
}

/* Form inline dentro de .tabela-acoes não quebra alinhamento */
.tabela-acoes form { display: inline-flex; margin: 0; }

/* Pills dentro de tabelas: padrão é só ícone (resolve overflow horizontal
   universalmente, em qualquer viewport). O texto vai como tooltip via
   atributo title=. Em telas MUITO largas (≥1600px) volta com texto pra
   leitura mais confortável — aí já há espaço sobrando. */
.tabela-acoes .acao-pill .acao-label {
    display: none;
}
.tabela-acoes .acao-pill {
    padding: 8px 10px;
}
@media (min-width: 1600px) {
    .tabela-acoes .acao-pill .acao-label {
        display: inline;
    }
    .tabela-acoes .acao-pill {
        padding: 6px 10px;
    }
}
@media (max-width: 768px) {
    .acao-pill {
        padding: 9px 12px;
        font-size: 12px;
    }
    .acao-pill svg { width: 14px; height: 14px; }
}

/* Formulários em grid de 2 e 3 colunas. Vira 1 coluna no mesmo breakpoint
   da sidebar (1024px) pra consistência com o resto do layout. */
.form-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.form-grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px;
}
@media (max-width: 1024px) {
    .form-grid-2,
    .form-grid-3 {
        grid-template-columns: 1fr;
    }
}

/* Tela de detalhe (label em cima, valor embaixo, em grid auto-responsivo). */
.detalhe-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px 32px;
    margin-top: 16px;
}
.detalhe-item .detalhe-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cor-cinza-texto);
    font-weight: 600;
    margin-bottom: 4px;
}
.detalhe-item .detalhe-valor {
    font-size: 15px;
    color: var(--cor-texto-principal);
    font-weight: 500;
    word-break: break-word;
}
.detalhe-item .detalhe-valor.vazio {
    color: var(--cor-cinza-texto);
    font-style: italic;
    font-weight: 400;
}

/* Paginação simples de listas. */
.paginacao {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-top: 24px;
    font-size: 14px;
    flex-wrap: wrap;
}
.paginacao a,
.paginacao span {
    padding: 8px 14px;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    text-decoration: none;
    color: var(--cor-texto-principal);
    background-color: var(--cor-branco);
    transition: background-color 150ms ease;
}
.paginacao a:hover {
    background-color: var(--cor-cinza-fundo);
}
.paginacao .ativa {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
}
.paginacao .desabilitada {
    color: var(--cor-cinza-texto);
    cursor: not-allowed;
    pointer-events: none;
}

/* Contador "Mostrando X de Y" abaixo da tabela. */
.contador-resultados {
    margin-top: 12px;
    font-size: 13px;
    color: var(--cor-cinza-texto);
}

/* =====================================================================
   Vendas — filtros, mini-KPIs, resumo de cálculo e status badge grande
   ===================================================================== */

/* Card que agrupa controles de filtro acima da listagem. */
.card-filtros {
    background-color: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    padding: 16px 20px;
    margin-bottom: 20px;
}
.filtros-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}
.filtros-acoes {
    display: flex;
    gap: 12px;
    align-items: center;
}

/* Mini KPIs (linha de totais acima da tabela de vendas). */
.mini-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}
.mini-kpi {
    background-color: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    padding: 12px 16px;
}
.mini-kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--cor-cinza-texto);
    font-weight: 600;
}
.mini-kpi-valor {
    font-size: 18px;
    font-weight: 700;
    color: var(--cor-primaria);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

/* Card de resumo do cálculo (no form de venda). Atualizado em tempo real
   pelo JS conforme o vendedor digita contrato/comissão. */
.card-resumo-calculo {
    background-color: var(--cor-cinza-fundo);
    border: 1px solid var(--cor-cinza-borda);
    border-left: 3px solid var(--cor-destaque);
    border-radius: var(--raio-borda);
    padding: 16px 20px;
    margin: 16px 0;
}
.card-resumo-calculo h3 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cor-cinza-texto);
    margin: 0 0 12px;
    font-weight: 600;
}
.resumo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
}
.resumo-label {
    display: block;
    font-size: 12px;
    color: var(--cor-cinza-texto);
    margin-bottom: 4px;
}
.resumo-valor {
    display: block;
    font-size: 18px;
    font-weight: 600;
    color: var(--cor-texto-principal);
    font-variant-numeric: tabular-nums;
}
.resumo-valor.resumo-destaque {
    color: var(--cor-primaria);
    font-size: 22px;
    font-weight: 700;
}

/* Status badge ampliado, usado na tela de detalhe da venda. */
.status-badge-grande {
    display: inline-block;
    padding: 8px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

/* =====================================================================
   Comissões do banco — view tipo planilha (substitui o Excel do José).
   Layout densamente tabular, com abas de mês como ele já está acostumado,
   cards de totais grandes pra leitura imediata e linha cancelada riscada.
   ===================================================================== */

/* Abas de mês: emulam as abas inferiores de uma planilha Excel. */
.tabs-meses {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.tab-mes {
    padding: 10px 16px;
    background-color: var(--cor-cinza-fundo);
    border: 1px solid var(--cor-cinza-borda);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    font-size: 13px;
    font-weight: 500;
    color: var(--cor-cinza-texto);
    text-decoration: none;
    transition: all 150ms ease;
}
.tab-mes:hover {
    background-color: var(--cor-branco);
    color: var(--cor-texto-principal);
}
.tab-mes.ativa {
    background-color: var(--cor-primaria);
    color: var(--cor-branco);
    border-color: var(--cor-primaria);
    font-weight: 600;
}

/* Cards de totais grandes — 4 colunas, com destaque na comissão do banco. */
.totais-planilha {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.card-total {
    background-color: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.card-total-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--cor-cinza-texto);
    font-weight: 600;
}
.card-total-valor {
    font-size: 24px;
    font-weight: 700;
    color: var(--cor-primaria);
    font-variant-numeric: tabular-nums;
}
.card-total-meta {
    font-size: 12px;
    color: var(--cor-cinza-texto);
    margin-top: -2px;
}
.card-total.card-total-destaque {
    background-color: var(--cor-primaria);
    border-color: var(--cor-primaria-escura);
}
.card-total.card-total-destaque .card-total-label,
.card-total.card-total-destaque .card-total-meta {
    color: rgba(255, 255, 255, 0.8);
}
.card-total.card-total-destaque .card-total-valor {
    color: var(--cor-destaque);
}
.card-total.card-total-escritorio {
    border-left: 4px solid var(--cor-destaque);
}

/* Aviso sutil de vendas canceladas no período. */
.aviso-canceladas {
    padding: 10px 14px;
    background-color: var(--cor-cinza-fundo);
    border: 1px dashed var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    font-size: 13px;
    color: var(--cor-cinza-texto);
    margin-bottom: 20px;
}

/* Tabela em modo planilha — densidade alta, scroll horizontal em mobile,
   cabeçalho sticky pra navegação em listas longas. */
.card-tabela-planilha {
    background-color: var(--cor-branco);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    padding: 0;
    overflow-x: auto;
    margin-bottom: 24px;
}
.tabela-planilha {
    margin: 0;
    font-size: 13px;
}
.tabela-planilha th {
    white-space: nowrap;
    position: sticky;
    top: 0;
    background-color: var(--cor-cinza-fundo);
    z-index: 1;
}
.tabela-planilha td.num,
.tabela-planilha th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.tabela-planilha td.mono {
    font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
    font-size: 12px;
}
.tabela-planilha td.destaque {
    font-weight: 600;
    color: var(--cor-primaria);
}
.tabela-planilha td.observacao {
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    color: var(--cor-cinza-texto);
}
.tabela-planilha tr.linha-cancelada td {
    opacity: 0.55;
    text-decoration: line-through;
    text-decoration-color: var(--cor-erro);
}
.tabela-planilha tfoot {
    font-weight: 600;
    background-color: var(--cor-cinza-fundo);
    border-top: 2px solid var(--cor-primaria);
}
.tabela-planilha tfoot td {
    padding-top: 14px;
    padding-bottom: 14px;
}
.totalizador-label {
    text-align: right;
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.12em;
    color: var(--cor-cinza-texto);
}
.celula-vazia {
    text-align: center;
    color: var(--cor-cinza-texto);
    font-style: italic;
    padding: 32px !important;
}

/* ---------- Sugestões (canal vendedor → admin) ----------
   Cards individuais (não tabela) pra preservar quebras de linha do que o
   vendedor digitou. Não-lida ganha borda esquerda dourada + fundo
   levemente amarelado pra puxar o olho do admin. */
.card-sugestao {
    background: var(--cor-cinza-card);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    padding: 16px 18px;
    margin-bottom: 12px;
}
.card-sugestao.nao-lida {
    border-left: 3px solid var(--cor-destaque);
    background: #FFFDF5;
}
.card-sugestao .sugestao-cabecalho {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}
.card-sugestao .sugestao-autor {
    font-weight: 600;
    font-size: 14px;
    color: var(--cor-texto-principal);
}
.card-sugestao .sugestao-data {
    font-size: 12px;
    color: var(--cor-cinza-texto);
}
.card-sugestao .sugestao-texto {
    font-size: 14px;
    color: var(--cor-texto-principal);
    line-height: 1.55;
    white-space: pre-wrap;
    word-break: break-word;
}
.card-sugestao .sugestao-rodape {
    margin-top: 12px;
    display: flex;
    justify-content: flex-end;
}

/* Selo "Lida pelo admin" / "Aguardando leitura" mostrado pro vendedor.
   Verde quando lida (status final positivo), neutro quando aguardando. */
.selo-lida {
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    display: inline-block;
}
.selo-lida.sim { background: #E6F4EA; color: #1E7B34; }
.selo-lida.nao { background: var(--cor-cinza-fundo); color: var(--cor-cinza-texto); }


/* =====================================================================
   PWA / Touch / iOS safe areas / Mobile UX (Fase A da auditoria)
   ---------------------------------------------------------------------
   Aplicado quando viewport ≤ 1024px (mobile/tablet retrato).
   ===================================================================== */
@media (max-width: 1024px) {
    /* iOS notch / Dynamic Island: empurra topbar pra baixo da safe area.
       env() retorna 0 em devices sem notch — seguro como default. */
    .topbar {
        padding-top: env(safe-area-inset-top);
        height: calc(var(--altura-topbar) + env(safe-area-inset-top));
    }
    .topbar-inner {
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
    }
    .main {
        margin-top: calc(var(--altura-topbar) + env(safe-area-inset-top));
        padding-left: max(16px, env(safe-area-inset-left));
        padding-right: max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
    .sidebar {
        padding-top: env(safe-area-inset-top);
    }
    .sidebar-perfil {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }

    /* Touch targets — mínimo 44x44px (Apple HIG / WCAG 2.5.5).
       Aumenta padding sem mexer em font-size pra preservar densidade visual. */
    .btn,
    .btn-pequeno {
        min-height: 44px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    /* Pills das ações já têm padding mobile próprio em .acao-pill — sem override aqui */
    .sidebar-item {
        min-height: 44px;       /* nav principal merece tap-target cheio */
        padding: 11px 12px;
    }
    .topbar-menu-toggle {
        min-width: 44px;
        min-height: 44px;
    }

    /* Inputs em mobile: font ≥16px evita zoom automático no iOS Safari
       ao focar campo. Trocamos só onde input fica em form (input/select/textarea). */
    .input,
    .select,
    .textarea,
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="number"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px;
    }

    /* Tap highlight discreto (default azul do iOS fica feio em UI corporativa) */
    a, button, [role="button"] {
        -webkit-tap-highlight-color: rgba(30, 69, 113, 0.12);
    }

    /* Scroll smoother em containers de tabela */
    .tabela-wrapper {
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
    }
}

/* Permite "Add to Home Screen" rodar em standalone sem espaço estranho.
   Detecta via JS modo standalone via env(safe-area). */
@media (display-mode: standalone) {
    body {
        /* No iOS instalado, o overscroll bounce mostra fundo cinza claro.
           Bate com cor de fundo do shell pra não destoar. */
        background-color: var(--cor-cinza-fundo);
    }
}

/* =====================================================================
   Avisos — lista de notificações recebidas (dashboard vendedor)
   ===================================================================== */
.lista-avisos {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.aviso-item {
    padding: 12px 14px;
    background-color: var(--cor-cinza-fundo);
    border: 1px solid var(--cor-cinza-borda);
    border-radius: var(--raio-borda);
    transition: background-color 150ms ease;
}
.aviso-item.aviso-nao-lido {
    background-color: #FFFBEB;             /* amarelo bem claro */
    border-left: 3px solid var(--cor-destaque);
}
.aviso-cabecalho {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}
.aviso-titulo {
    font-size: 14px;
    color: var(--cor-texto-principal);
}
.aviso-mensagem {
    font-size: 13px;
    color: var(--cor-texto-principal);
    line-height: 1.5;
    margin: 4px 0 8px;
    white-space: pre-wrap;
}
.aviso-meta {
    font-size: 11px;
    color: var(--cor-cinza-texto);
}

/* =====================================================================
   Responsividade — fixes adicionais (auditoria 02/jun/26)
   ===================================================================== */

/* BUG 1: topbar mobile — logo/sino/header não devem extrapolar viewport.
   Em ≤1024 a sidebar some e a topbar abriga: hambúrguer + logo + sino +
   nome + Sair. Sem min-width: 0 + flex-shrink, o logo (max-width 380)
   empurra o resto pra fora. Tamanhos diferenciados pra tablet vs phone
   pra logo ficar legível sem comer espaço de outros controles. */
@media (max-width: 1024px) {
    .topbar-inner { gap: 6px; padding: 0 12px; }
    /* flex: 0 1 auto = encolhe se precisar mas NÃO cresce — logo gruda no
       hambúrguer à esquerda; .header-usuario margin-left:auto empurra pra direita */
    .topbar-marca { flex: 0 1 auto; min-width: 0; overflow: hidden; }
    .topbar-marca-logo {
        max-height: 64px;       /* quase preenche a topbar (76px - 12px de margem) */
        max-width: 320px;
    }
    .header-usuario { flex-shrink: 0; }
}
@media (max-width: 480px) {
    .topbar-marca-logo {
        max-height: 60px;
        max-width: 240px;
    }
}

/* BUG 4: grids com minmax(220px) quebram em telas estreitas.
   Em ≤480 força 1 coluna. */
@media (max-width: 480px) {
    .grid-kpi,
    .totais-planilha {
        grid-template-columns: 1fr;
    }
}

/* BUG 5 + C: input[type=file] tem largura nativa enorme (botão "Escolher
   arquivo" + texto). Limita o input + o form pai dentro de cards (que
   normalmente tem flex:1 sem min-width:0, deixando o filho estourar). */
input[type="file"] {
    max-width: 100%;
    box-sizing: border-box;
}
.card form,
form[enctype*="multipart"] {
    max-width: 100%;
    min-width: 0;
}

/* BUG A: barra-busca com 3+ elementos (input + select + button) fica
   ilegível em mobile (campos com 33px cada). Stack vertical abaixo de 600px. */
@media (max-width: 600px) {
    .barra-busca {
        flex-direction: column;
        align-items: stretch;
    }
    .barra-busca .input,
    .barra-busca .btn,
    .barra-busca select {
        width: 100%;
        max-width: 100%;
    }
}

/* BUG B: h1 28px + palavras longas ("Administrador", "Comissões")
   forçavam min-content > viewport. Reduz em mobile pequeno. */
@media (max-width: 480px) {
    h1 { font-size: 22px; }
    .titulo-pagina h1 { font-size: 22px; }
}

/* =====================================================================
   Simulador de propostas (vertical Consórcio)
   ===================================================================== */
.simulador-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
}
.simulador-card {
    background: #fff;
    border: 1px solid var(--cor-cinza-borda);
    border-radius: 12px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transition: box-shadow .15s ease, transform .15s ease;
}
.simulador-card:hover {
    box-shadow: 0 8px 20px rgba(15,23,42,.08);
    transform: translateY(-2px);
}
.simulador-card-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cor-cinza-borda);
}
.simulador-card-adm {
    font-weight: 700;
    font-size: 12px;
    color: var(--cor-cinza-texto);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.simulador-card-cod {
    font-size: 13px;
    color: var(--cor-primaria);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.simulador-card-valor {
    text-align: center;
    padding: 6px 0;
}
.simulador-card-valor-label {
    font-size: 11px;
    color: var(--cor-cinza-texto);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.simulador-card-valor-num {
    font-size: 22px;
    font-weight: 800;
    color: var(--cor-destaque);
    font-variant-numeric: tabular-nums;
    margin-top: 2px;
}
.simulador-card-prob {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #FFFBEB;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid #FDE68A;
}
.simulador-card-prob-circle {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--cor-destaque);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.simulador-card-prob-num {
    font-weight: 800;
    font-size: 13px;
}
.simulador-card-prob-label {
    font-size: 11px;
    color: #92400E;
    text-transform: uppercase;
    letter-spacing: .4px;
    font-weight: 600;
}
.simulador-card-detalhes {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 14px;
    font-size: 12px;
}
.simulador-card-detalhes li {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    padding: 4px 0;
    border-bottom: 1px dashed #F1F5F9;
}
.simulador-card-detalhes li span {
    color: var(--cor-cinza-texto);
}
.simulador-card-detalhes li strong {
    color: var(--cor-texto-principal);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.simulador-card-cta {
    margin-top: auto;
}

/* =====================================================================
   Proposta — versão PDF/print (página /propostas-pdf e /p)
   ===================================================================== */
.proposta-pdf {
    max-width: 800px;
    margin: 30px auto;
    background: #fff;
    padding: 40px;
    color: #1F2937;
    font-family: var(--fonte-base);
}
.proposta-pdf-header {
    border-bottom: 3px solid var(--cor-primaria);
    padding-bottom: 16px;
    margin-bottom: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}
.proposta-pdf-logo img { max-height: 60px; max-width: 220px; }
.proposta-pdf-titulo { text-align: right; }
.proposta-pdf-titulo h1 {
    margin: 0;
    font-size: 22px;
    color: var(--cor-primaria);
    text-transform: uppercase;
    letter-spacing: 1px;
}
.proposta-pdf-titulo small { color: #6B7280; font-size: 12px; }
.proposta-pdf-secao { margin-bottom: 22px; }
.proposta-pdf-secao h2 {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--cor-primaria);
    border-bottom: 1px solid var(--cor-cinza-borda);
    padding-bottom: 4px;
    margin: 0 0 10px;
}
.proposta-pdf-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    font-size: 14px;
}
.proposta-pdf-grid > div { padding: 4px 0; }
.proposta-pdf-grid strong { color: #6B7280; font-weight: 500; display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .3px; margin-bottom: 2px; }
.proposta-pdf-destaque {
    background: linear-gradient(135deg, var(--cor-primaria), #163556);
    color: #fff;
    padding: 20px 24px;
    border-radius: 10px;
    margin: 18px 0;
    text-align: center;
}
.proposta-pdf-destaque .val {
    font-size: 32px;
    font-weight: 800;
    color: var(--cor-destaque);
    font-variant-numeric: tabular-nums;
}
.proposta-pdf-destaque .lbl {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    opacity: .85;
}
.proposta-pdf-footer {
    margin-top: 32px;
    border-top: 1px solid var(--cor-cinza-borda);
    padding-top: 16px;
    font-size: 11px;
    color: #6B7280;
    text-align: center;
}
.proposta-pdf-acoes {
    max-width: 800px;
    margin: 12px auto;
    text-align: right;
}
@media print {
    body { background: #fff; }
    .topbar, .sidebar, .proposta-pdf-acoes, .alerta { display: none !important; }
    .main { margin: 0 !important; padding: 0 !important; }
    .proposta-pdf { box-shadow: none; padding: 0; margin: 0; }
}