/* =============================================================================
   Cotação em etapas
   Meio Norte Express

   POR QUE ESTE ARQUIVO EXISTE
   ----------------------------
   Isto eram 1.098 linhas de <style> dentro de cotacao.php, com uma paleta
   paralela à do site:

       --cotacao-primary: #1a5f7a;   (= --primary-color, redeclarado)
       --cotacao-accent:  #57c5b6;   (= --accent-color, redeclarado)
       --cotacao-success: #10b981;   (≠ --success-color: outro verde)
       --cotacao-danger:  #ef4444;   (≠ --danger-color: outro vermelho)

   Três das nove variáveis eram cópias dos tokens; as outras seis eram cores
   NOVAS, que não existiam em lugar nenhum do site. Somadas a nove classes de
   botão próprias (.btn-primary-lg, .btn-secondary, .btn-cnpj, .btn-cep,
   .btn-add-item, .btn-remove-item, .btn-save, .btn-new, .btn-home) e a um
   terceiro sistema de notificação (.toast, além do mneAviso do site e do
   showToast da área do cliente), a página era outro produto.

   Aqui tudo consome os tokens, e os botões são os do site — a família
   `.botao`, definida em base.css. O que sobrou de classe própria é só o que
   é mesmo específico desta tela: as etapas, o cartão de item de carga e o
   envio de fotos.
   ============================================================================= */

/* =============================================================================
   1. ESTRUTURA DA PÁGINA
   ============================================================================= */

.cotacao-page { background: var(--gray-50); }

.cotacao-form-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 var(--space-5) var(--gap-secao);
}

.cotacao-form {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: var(--space-8);
}

@media (max-width: 640px) {
    .cotacao-form { padding: var(--space-5); border-radius: var(--radius-md); }
    .cotacao-form-container { padding-inline: var(--space-4); }
}

/* =============================================================================
   2. TRILHA DE ETAPAS

   Vive em cotacao-etapas.css, sob `.etapas`/`.etapa`. A folha embutida
   antiga ainda trazia um segundo conjunto — `.cotacao-progress`,
   `.progress-step`, `.step-number`, `.step-label` — para marcação que
   deixou de existir quando o formulário virou quatro etapas. Estilo sem
   marcação não some sozinho: ele espera alguém reusar o nome e se
   perguntar por que a regra não bate.
   ============================================================================= */

/* =============================================================================
   3. SEÇÃO DO FORMULÁRIO
   ============================================================================= */

/* QUEM ESCONDE A SEÇÃO É O ATRIBUTO `hidden`, E NÃO UMA CLASSE
   -------------------------------------------------------------
   `cotacao-etapas.js` faz `secao.hidden = (etapa !== atual)`. Uma regra
   `.form-section { display: none }` com `.form-section.active { display:
   block }` — que é o par mais comum — some com o formulário INTEIRO aqui,
   porque nada nunca adiciona `.active`. Foi exatamente o que aconteceu.

   O `[hidden] { display: none }` do próprio navegador já faz o trabalho;
   a seção visível não precisa de regra nenhuma. */
.form-section[hidden] { display: none; }

.form-section > h3,
.section-title {
    display: flex; align-items: center; gap: var(--space-3);
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
}
.section-title i { color: var(--primary-color); }
.section-subtitle { font-size: var(--font-size-sm); color: var(--gray-600); margin-bottom: var(--gap-bloco); }

/* =============================================================================
   4. CAMPOS

   16px de corpo, e não 0.9rem. Abaixo de 16px o Safari do iPhone dá ZOOM ao
   focar o campo e não desfaz sozinho — a pessoa preenche o formulário
   inteiro pinçando a tela de volta a cada campo.
   ============================================================================= */

.form-group { margin-bottom: var(--space-5); }

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--peso-enfase);
    color: var(--gray-800);
    margin-bottom: var(--space-2);
}
.form-group label .required { color: var(--danger-color); margin-left: 2px; }

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 16px;
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-md);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--gray-500); }

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 122, .14);
}
.form-group input[aria-invalid="true"] { border-color: var(--danger-color); }

.form-group textarea { resize: vertical; min-height: 96px; }

.form-group select[disabled],
.form-group input[disabled] {
    background: var(--gray-100);
    color: var(--gray-600);
    cursor: not-allowed;
}

/* --- Grades de campo ------------------------------------------------------

   COLUNAS EXPLÍCITAS, E NÃO `auto-fit`
   -------------------------------------
   A tentação é `repeat(auto-fit, minmax(220px, 1fr))`: uma linha e some com
   as media queries. Não funciona AQUI, e o motivo é a combinação de três
   coisas que esta tela tem todas:

     - o contêiner tem 11 filhos, e não 3;
     - um deles usa `grid-column: 1 / -1` (o campo de largura inteira), e o
       `-1` conta trilhas da grade EXPLÍCITA — com auto-fit isso deixa de ser
       previsível;
     - alguns campos precisavam de piso próprio (`min-width`), e um item de
       grade com mínimo maior que a trilha empurra a trilha.

   Medido num contêiner de 286px, o resultado foi `220px 52px 104px`: três
   colunas somando 376px dentro de 286px, com o campo de nome estourando a
   tela em 71px. Colunas explícitas por faixa não têm essa surpresa.

   O TAMANHO DO CAMPO VEM DE `span`, E NÃO DE `min-width`
   -------------------------------------------------------
   Piso em item de grade briga com a trilha. Dizer quantas colunas o campo
   ocupa resolve o mesmo problema — o CNPJ precisa de ~190px de texto mais o
   botão de busca — sem que o item possa empurrar a grade. */

.form-grid,
.form-grid-2,
.form-grid-3,
.form-grid-4 {
    display: grid;
    gap: var(--space-4);
    grid-template-columns: 1fr;          /* base: celular, uma coluna */
}

@media (min-width: 640px) {
    .form-grid,
    .form-grid-2,
    .form-grid-3,
    .form-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* Documento ocupa a linha inteira nesta faixa: com duas colunas de
       ~250px, o campo mais o botão de busca ficariam apertados. */
    .form-group--documento { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
    .form-grid,
    .form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .form-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    /* Com três colunas o documento cabe em duas: ~2/3 da linha. */
    .form-group--documento { grid-column: span 2; }
    .form-group--cep       { grid-column: span 1; }
}

/* `1 / -1` só é seguro porque a grade agora é explícita. */
.form-group.full-width { grid-column: 1 / -1; }

/* --- Campo com botão de busca (CNPJ, CEP) ---------------------------------
   O input tinha `flex: 1`, que é `flex: 1 1 0%` — base ZERO. Com base zero o
   campo aceita encolher abaixo do próprio conteúdo, e foi assim que ele
   chegou a 28px. A base agora é a largura de que o dado precisa. */

.cnpj-input-group,
.cep-input-group {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}
.cnpj-input-group input { flex: 1 1 190px; min-width: 0; }
.cep-input-group  input { flex: 1 1 130px; min-width: 0; }

/* O botão de busca é do sistema, na variante compacta: era .btn-cnpj e
   .btn-cep, dois botões idênticos com nomes diferentes. */
.campo-acao {
    flex: 0 0 auto;
    display: inline-flex; align-items: center; justify-content: center;
    width: 46px;
    font-size: 1rem;
    color: #fff;
    background: var(--primary-color);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background var(--transition-fast);
}
.campo-acao:hover:not(:disabled) { background: var(--primary-dark); }
.campo-acao:disabled { background: var(--gray-400); cursor: not-allowed; }

/* =============================================================================
   5. AVISO DE CONTEXTO (quem envia / quem recebe)
   ============================================================================= */

.cliente-info-alert {
    display: flex; gap: var(--space-4); align-items: flex-start;
    padding: var(--space-5);
    margin-bottom: var(--gap-bloco);
    background: var(--info-light);
    border: 1px solid var(--info-color);
    border-left-width: 4px;
    border-radius: var(--radius-md);
}
.cliente-info-alert i { font-size: 1.4rem; color: var(--info-color); flex: 0 0 auto; }
.cliente-info-alert .alert-title { font-weight: var(--peso-enfase); color: var(--gray-900); margin-bottom: 2px; }
.cliente-info-alert .alert-desc  { font-size: var(--font-size-sm); color: var(--gray-700); margin: 0; }

.cliente-info-alert.tipo-receber {
    background: var(--success-light);
    border-color: var(--success-color);
}
.cliente-info-alert.tipo-receber i { color: var(--success-color); }

.info-extra {
    display: flex; gap: var(--space-2); align-items: flex-start;
    font-size: var(--font-size-xs);
    color: var(--gray-600);
    margin-top: var(--space-2);
}
.info-extra i { color: var(--primary-color); margin-top: 2px; }

.rota-arrow {
    display: flex; align-items: center; justify-content: center;
    color: var(--marca-laranja-forte);
    font-size: 1.3rem;
}

/* =============================================================================
   6. ITENS DA CARGA

   Isto era uma <table> de nove colunas com `min-width: 900px` dentro de um
   `overflow-x: auto`: num celular de 375px, 2,4 telas de rolagem lateral
   para preencher UM volume. Rolagem horizontal em formulário é sempre erro
   de layout — os campos não têm relação de coluna entre si, eles descrevem
   um item só.
   ============================================================================= */

.mercadorias-container {
    background: var(--gray-50);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-5);
    margin-top: var(--space-4);
}
.mercadorias-container > h4 {
    display: flex; align-items: center; gap: var(--space-2);
    font-size: var(--font-size-base);
    margin-bottom: var(--space-4);
}

.itens-carga { display: flex; flex-direction: column; gap: var(--space-3); }

.item-carga {
    background: #fff;
    border: 1px solid var(--gray-200);
    border-left: 3px solid var(--marca-laranja);
    border-radius: var(--radius-md);
    padding: var(--space-4) var(--space-4) var(--space-3);
}

.item-carga__topo {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}
.item-carga__num {
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--gray-700);
}

.item-carga__campos {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
}
.item-carga__campo--largo { grid-column: 1 / -1; }

.item-carga__campo label {
    display: block;
    font-size: var(--font-size-xs);
    font-weight: var(--peso-enfase);
    color: var(--gray-800);
    margin-bottom: 5px;
}
.item-carga__campo input {
    width: 100%;
    padding: 11px 12px;
    font-family: inherit;
    font-size: 16px;
    color: var(--gray-900);
    background: #fff;
    border: 1px solid var(--gray-300);
    border-radius: var(--radius-sm);
}
.item-carga__campo input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(26, 95, 122, .14);
}

/* Campo que veio do cadastro da empresa (cotação aberta pela área do cliente).
   Fica visivelmente diferente do que ainda falta preencher: sem essa marca,
   a pessoa tenta digitar por cima e acha que o formulário travou. */
.campo-do-cadastro,
.campo-do-cadastro:focus {
    background: var(--gray-100);
    border-color: var(--gray-200);
    color: var(--gray-700);
    cursor: not-allowed;
    box-shadow: none;
}

/* Peso total e volume: TEXTO, com o valor real em campo oculto. Eram
   <input readonly>, que ainda recebe foco e entra na ordem do Tab — a
   pessoa parava num campo que não dá para editar. */
.item-carga__resultado {
    display: flex; flex-wrap: wrap; gap: var(--space-6);
    margin-top: var(--space-3);
    padding-top: var(--space-2);
    border-top: 1px dashed var(--gray-200);
}
.item-carga__resultado div { font-size: var(--font-size-xs); color: var(--gray-600); }
.item-carga__resultado strong {
    display: block;
    font-size: var(--font-size-base);
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

.btn-remove-item {
    width: 32px; height: 32px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .8rem;
    color: var(--danger-color);
    background: var(--danger-light);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}
.btn-remove-item:hover { background: var(--danger-color); color: #fff; }

@media (max-width: 560px) {
    .item-carga__campos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mercadorias-container { padding: var(--space-4) var(--space-3); }
}

/* --- Resumo da carga ------------------------------------------------------ */

.carga-resumo {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px;
    margin-top: var(--space-5);
    background: var(--gray-200);
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.resumo-item { background: #fff; padding: var(--space-4); text-align: center; }
.resumo-label { font-size: var(--font-size-xs); color: var(--gray-600); margin-bottom: 3px; }
.resumo-valor {
    font-size: var(--font-size-lg);
    font-weight: var(--peso-titulo);
    color: var(--gray-900);
    font-variant-numeric: tabular-nums;
}

/* =============================================================================
   7. FOTOS
   ============================================================================= */

.fotos-upload-area {
    padding: var(--space-8) var(--space-5);
    text-align: center;
    background: var(--gray-50);
    border: 2px dashed var(--gray-300);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: border-color var(--transition-fast), background var(--transition-fast);
}
.fotos-upload-area:hover,
.fotos-upload-area.drag-over {
    border-color: var(--marca-laranja);
    background: var(--marca-laranja-veu);
}
.fotos-upload-area i { font-size: 2.2rem; color: var(--marca-laranja-forte); margin-bottom: var(--space-3); display: block; }
.fotos-upload-area h4 { font-size: var(--font-size-base); margin-bottom: var(--space-1); }
.fotos-upload-area p  { font-size: var(--font-size-sm); color: var(--gray-600); margin: 0 auto; }

.fotos-preview {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: var(--space-3);
    margin-top: var(--space-4);
}
.foto-item {
    position: relative;
    border: 1px solid var(--gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.foto-item img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.foto-item .foto-remove {
    position: absolute; top: 6px; right: 6px;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .75rem;
    color: #fff;
    background: rgba(22, 35, 43, .78);
    border: none;
    border-radius: var(--radius-full);
    cursor: pointer;
    /* Sempre visível, e não só no hover: em tela sensível ao toque não
       existe hover, e o botão ficava inalcançável no celular. */
    opacity: 1;
}
.foto-item .foto-remove:hover { background: var(--danger-color); }

/* =============================================================================
   8. AÇÕES DO RODAPÉ DO FORMULÁRIO
   ============================================================================= */

.form-actions {
    display: flex; gap: var(--space-3); flex-wrap: wrap;
    justify-content: space-between;
    margin-top: var(--gap-bloco);
    padding-top: var(--space-5);
    border-top: 1px solid var(--gray-200);
}
.form-actions .botao { flex: 0 1 auto; }

@media (max-width: 560px) {
    /* Empilhado, o botão que avança fica em cima: é o que a pessoa quer em
       nove de cada dez vezes. */
    .form-actions { flex-direction: column-reverse; }
    .form-actions .botao { width: 100%; }
}

/* =============================================================================
   9. CARREGAMENTO E CONCLUSÃO
   ============================================================================= */

.loading-overlay {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: center; justify-content: center;
    background: rgba(15, 35, 43, .62);
    backdrop-filter: blur(3px);
}
.loading-overlay.show { display: flex; }
.loading-content {
    padding: var(--space-8);
    text-align: center;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.loading-content p { color: var(--gray-700); margin: var(--space-4) 0 0; }
.loading-spinner {
    width: 44px; height: 44px;
    margin: 0 auto;
    border: 3px solid var(--gray-200);
    border-top-color: var(--marca-laranja);
    border-radius: 50%;
    animation: cotacao-girar .8s linear infinite;
}
@keyframes cotacao-girar { to { transform: rotate(360deg); } }

.success-modal {
    position: fixed; inset: 0; z-index: var(--z-modal);
    display: none; align-items: center; justify-content: center;
    padding: var(--space-5);
    background: rgba(15, 35, 43, .62);
    backdrop-filter: blur(3px);
    overflow-y: auto;
}
.success-modal.show { display: flex; }
.success-content {
    width: 100%; max-width: 520px;
    padding: var(--space-8);
    text-align: center;
    background: #fff;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}
.success-icon { font-size: 3rem; color: var(--success-color); margin-bottom: var(--space-4); }
.success-content h2 { font-size: var(--font-size-2xl); margin-bottom: var(--space-3); }
.success-content p  { color: var(--gray-700); margin: 0 auto var(--space-5); }

.protocolo-box {
    padding: var(--space-5);
    margin-bottom: var(--space-6);
    background: var(--marca-laranja-veu);
    border: 1px solid var(--marca-laranja-linha);
    border-radius: var(--radius-md);
}
.protocolo-box label {
    display: block;
    font-size: var(--font-size-xs);
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--gray-700);
    margin-bottom: var(--space-2);
}
.protocolo-box .protocolo {
    font-family: var(--font-mono);
    font-size: var(--font-size-xl);
    font-weight: var(--peso-titulo);
    letter-spacing: .04em;
    color: var(--gray-900);
    word-break: break-all;
}

.success-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; justify-content: center; }

@media (max-width: 480px) {
    .success-actions { flex-direction: column; }
    .success-actions .botao { width: 100%; }
    .success-content { padding: var(--space-6) var(--space-5); }
}

/* =============================================================================
   10. AJUSTES DE CONTEXTO

   `.pagina a` e `.capa a` são regras de contexto (0-2-0) e vencem as classes
   de botão (0-1-0) — o mesmo tropeço de especificidade já corrigido na home,
   no menu e no rodapé. Ancorar aqui evita a quarta repetição.
   ============================================================================= */

.cotacao-page .botao--primario,
.cotacao-page .botao--primario:hover { color: #fff; }
.cotacao-page .botao--secundario     { color: var(--primary-color); }
.cotacao-page .botao--secundario:hover { color: #fff; }
.capa .botao--claro,
.capa .botao--claro:hover { color: var(--primary-dark); }