:root {
    --azul-marinho: #12294b;
    --azul-marinho-escuro: #0c1c36;
    --laranja: #c65a1e;
    --laranja-escuro: #a84a17;
    --azul-medio: #2f6690;
    --cinza-claro: #f4f5f7;
    --cinza-borda: #e1e4e9;
    --cinza-texto: #6b7280;
    --texto: #1f2530;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    background: var(--cinza-claro);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ---------- Cabeçalho ---------- */
.topbar {
    background: linear-gradient(135deg, var(--azul-marinho) 0%, var(--azul-medio) 70%, #2b4d7e 100%);
    border-bottom: 5px solid var(--laranja);
}
.topbar-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.brand { display: flex; align-items: center; gap: 0.9rem; flex-shrink: 0; }
.brand-logo {
    background: #fff;
    padding: 0.4rem 0.7rem;
    border-radius: 9px;
    display: flex;
    align-items: center;
}
.brand-logo img { height: 30px; display: block; }
.brand-title { color: #fff; font-weight: 700; font-size: 1.05rem; white-space: nowrap; }

.topnav { display: flex; gap: 0.4rem; flex-wrap: wrap; align-items: center; flex: 1; }
.topnav a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    white-space: nowrap;
}
.topnav a:hover, .topnav a.ativo { background: rgba(255, 255, 255, 0.15); color: #fff; }

.btn-sair {
    background: var(--laranja);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 0.5rem 0.9rem;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    white-space: nowrap;
}
.btn-sair:hover { background: var(--laranja-escuro); }

/* ---------- Layout geral ---------- */
.container { max-width: 1200px; margin: 0 auto; padding: 1.75rem 1.5rem; flex: 1; width: 100%; }
.rodape { text-align: center; color: var(--cinza-texto); font-size: 0.82rem; padding: 1.25rem; }

/* ---------- Login ---------- */
.login-box {
    max-width: 380px;
    margin: 4rem auto;
    background: #fff;
    border: 1px solid var(--cinza-borda);
    border-radius: 10px;
    padding: 2.25rem 2rem;
    text-align: center;
    box-shadow: 0 2px 10px rgba(18, 41, 75, 0.08);
}
.login-logo { max-width: 220px; margin-bottom: 1.25rem; }
.login-box h1 { color: var(--azul-marinho); margin-bottom: 0.25rem; font-size: 1.4rem; }
.login-box .subtitle { color: var(--cinza-texto); margin-top: 0; margin-bottom: 1.5rem; font-size: 0.85rem; }

/* ---------- Formulários ---------- */
.form { display: flex; flex-direction: column; gap: 0.9rem; max-width: 480px; }
.form.form-inline { flex-direction: row; align-items: center; flex-wrap: wrap; max-width: none; }
.form label { display: flex; flex-direction: column; font-weight: 600; font-size: 0.9rem; gap: 0.3rem; color: var(--texto); }
.form input, .form select, .form textarea {
    font: inherit;
    padding: 0.55rem 0.65rem;
    border: 1px solid var(--cinza-borda);
    border-radius: 6px;
    background: #fff;
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: var(--azul-medio); }

/* Formulário largo em grade — telas com muitos campos (ex.: nova/editar
   proposta) onde o layout de coluna única do .form padrão obriga a
   rolar a tela demais. Usar junto de "form": class="form form-grade". */
.form-grade { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0.9rem 1.25rem; max-width: 1100px; align-items: start; }
.form-grade > .full { grid-column: 1 / -1; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0.7rem 1rem; }
.grade-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 0.7rem 1rem; }

.grupo-checkbox { border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 0.75rem 1rem; }
.grupo-checkbox legend { font-weight: 700; color: var(--azul-marinho); padding: 0 0.4rem; }
.grupo-checkbox .modulo-titulo { font-weight: 600; margin: 0.6rem 0 0.3rem; }
.grupo-checkbox label { flex-direction: row; align-items: center; font-weight: 400; gap: 0.5rem; }

/* Fieldset de dados só-leitura (ex.: endereço do cadastro do cliente) —
   mesmo visual do grupo-checkbox (borda + legenda), mas os rótulos ficam
   em cima do campo como no resto do formulário, não lado a lado (isso
   é só pra grupo de checkbox, aqui embaralhava tudo numa grade estreita). */
.grupo-info { border: 1px solid var(--cinza-borda); border-radius: 6px; padding: 1rem 1.1rem; background: var(--cinza-claro); }
.grupo-info legend { font-weight: 700; color: var(--azul-marinho); padding: 0 0.4rem; }
.grupo-info input[readonly] { background: #fff; color: var(--cinza-texto); }

/* Grade de 4 colunas com largura pensada por campo (endereço/cidade/
   e-mail mais largos que número/CEP/telefone) — usar com .col-2 nos
   campos que precisam do dobro do espaço. */
.grade-endereco { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.8rem 1.1rem; }
.grade-endereco .col-2 { grid-column: span 2; }

.btn { display: inline-block; border: none; border-radius: 6px; padding: 0.55rem 1.1rem; font-weight: 600; cursor: pointer; text-decoration: none; text-align: center; }
.btn-primary { background: var(--laranja); color: #fff; }
.btn-primary:hover { background: var(--laranja-escuro); }
.btn-secundario { background: var(--azul-marinho); color: #fff; }
.btn-perigo { background: #b3261e; color: #fff; }
.btn-perigo:hover { background: #8f1e17; }
.btn-aviso { background: #b8860b; color: #fff; }
.btn-aviso:hover { background: #966f09; }

.link-button { background: none; border: none; color: var(--laranja); text-decoration: underline; cursor: pointer; font: inherit; padding: 0; }

.alert { padding: 0.6rem 0.9rem; border-radius: 6px; margin-bottom: 1rem; }
.alert-erro { background: #fdecea; color: #b3261e; border: 1px solid #f5c2c0; }
.alert-sucesso { background: #e6f4ea; color: #1e7a4c; border: 1px solid #b7dfc4; }
.alert-info { background: #eaf2fb; color: #12294b; border: 1px solid #c7dcf3; }

.titulo-boas-vindas { color: var(--azul-marinho); text-transform: uppercase; font-size: 1.15rem; letter-spacing: 0.02em; margin: 0 0 1.5rem; }

/* ---------- Cards de módulo ---------- */
.grid-modulos { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 1rem; margin-bottom: 2.25rem; }
.card-modulo {
    background: #fff;
    border: 1.5px solid var(--cinza-borda);
    border-top: 5px solid var(--laranja);
    border-radius: 14px;
    padding: 1.25rem;
    text-decoration: none;
    color: inherit;
    display: block;
    box-shadow: 0 3px 12px rgba(18, 41, 75, 0.08);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.card-modulo:hover { box-shadow: 0 9px 22px rgba(18, 41, 75, 0.15); transform: translateY(-3px); }
.card-modulo .icone-modulo { font-size: 1.9rem; margin-bottom: 0.5rem; line-height: 1; }
.card-modulo h3 { margin: 0 0 0.35rem; color: var(--azul-marinho); font-size: 1rem; }
.card-modulo p { margin: 0 0 0.7rem; color: var(--cinza-texto); font-size: 0.8rem; line-height: 1.4; }

.tags-modulo { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.tag { display: inline-block; background: var(--cinza-claro); border: 1px solid var(--cinza-borda); color: var(--azul-marinho); font-size: 0.68rem; font-weight: 700; letter-spacing: 0.03em; padding: 0.2rem 0.55rem; border-radius: 999px; }

/* ---------- Seções e tabelas ---------- */
.secao { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 1.25rem 1.4rem; }
.secao-cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; flex-wrap: wrap; gap: 0.75rem; }
.secao-cabecalho h2 { margin: 0; color: var(--azul-marinho); font-size: 1rem; }

.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabela { width: 100%; border-collapse: collapse; }
.tabela th, .tabela td { text-align: left; padding: 0.6rem 0.7rem; border-bottom: 1px solid var(--cinza-borda); font-size: 0.9rem; }
.tabela th { background: var(--cinza-claro); color: var(--azul-marinho); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.03em; }
.tabela tbody tr:hover { background: #fafbfc; }
.tabela a { color: var(--azul-medio); font-weight: 600; text-decoration: none; }
.tabela a:hover { text-decoration: underline; }

.badge { display: inline-block; padding: 0.15rem 0.6rem; border-radius: 999px; font-size: 0.74rem; font-weight: 600; color: #fff; background: #888; text-transform: capitalize; }
.badge-rascunho { background: #6c757d; }
.badge-aguardando_aceite_cliente { background: #b8860b; }
.badge-aceita_pelo_cliente { background: #0f7b6c; }
.badge-desconto_aprovado { background: #0f7b6c; }
.badge-recusada_pelo_cliente { background: #a13d63; }
.badge-enviada { background: var(--azul-medio); }
.badge-aprovada { background: #1e7a4c; }
.badge-rejeitada { background: #b3261e; }
.badge-cancelada { background: #495057; }
.badge-convertida { background: #14532d; }
.badge-nao_lancado { background: #6c757d; }
.badge-ok { background: #1e7a4c; }
.badge-divergente { background: #b8860b; }
.badge-nao_encontrado { background: #b3261e; }

.celula-minerion { display: flex; align-items: center; gap: 0.4rem; flex-wrap: nowrap; }
.btn-icone {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.6rem; height: 1.6rem; padding: 0; flex-shrink: 0;
    border: 1px solid var(--cinza-borda); border-radius: 6px;
    background: #fff; color: var(--azul-marinho);
    font-size: 0.82rem; line-height: 1; cursor: pointer;
}
.btn-icone:hover { background: var(--cinza-claro); border-color: var(--azul-medio); }

.card { background: #fff; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 1rem 1.25rem; margin-bottom: 1rem; }

.actions { margin: 1rem 0; display: flex; gap: 0.75rem; flex-wrap: wrap; }
.inline { display: inline-flex; gap: 0.5rem; align-items: center; }

.autocomplete-resultado { border: 1px solid var(--cinza-borda); border-radius: 6px; background: #fff; max-width: 480px; }
.autocomplete-item { padding: 0.4rem 0.6rem; cursor: pointer; font-size: 0.9rem; }
.autocomplete-item:hover { background: var(--cinza-claro); }
.autocomplete-item.autocomplete-erro { color: #b3261e; cursor: default; }
.autocomplete-item.autocomplete-erro:hover { background: transparent; }
.autocomplete-item.autocomplete-vazio { color: var(--cinza-texto); cursor: default; }
.autocomplete-item.autocomplete-vazio:hover { background: transparent; }

.detalhe { display: grid; grid-template-columns: 160px 1fr; row-gap: 0.5rem; margin-bottom: 1.5rem; }
.detalhe dt { font-weight: 600; color: var(--azul-marinho); }
.detalhe dd { margin: 0; }

.ajuda { color: var(--cinza-texto); font-size: 0.85rem; }

h1, h2 { color: var(--azul-marinho); }

/* ---------- Celular ---------- */
@media (max-width: 640px) {
    .topbar-inner { padding: 0.75rem 1rem; gap: 0.75rem; }
    .brand { flex: 1 1 100%; justify-content: space-between; }
    .brand-title { display: none; } /* sobra pouco espaço — o logo já identifica o sistema */
    .topnav { flex: 1 1 100%; gap: 0.3rem; }
    .topnav a { padding: 0.45rem 0.6rem; font-size: 0.8rem; }
    .btn-sair { flex: 1 1 100%; padding: 0.6rem; }

    .container { padding: 1.1rem 0.85rem; }
    .secao { padding: 1rem; }

    .grid-modulos { grid-template-columns: 1fr; }

    .form.form-inline { flex-direction: column; align-items: stretch; }
    .form.form-inline > * { width: 100%; }

    .grade-endereco { grid-template-columns: repeat(2, 1fr); }
    .grade-endereco .col-2 { grid-column: span 2; }

    .detalhe { grid-template-columns: 1fr; row-gap: 0.15rem; }
    .detalhe dt { margin-top: 0.5rem; }

    .secao-cabecalho { flex-direction: column; align-items: stretch; }
    .secao-cabecalho .btn { text-align: center; }
}

.topnav-conta { color: #fff; text-decoration: none; font-size: 1.05rem; padding: 0.2rem 0.5rem; border-radius: 6px; opacity: 0.85; }
.topnav-conta:hover { opacity: 1; background: rgba(255,255,255,.15); }