/* Telas de pagamento (Baixar Pagamento): portado de godi-php views/contaspagar/_estilo.php. */
/* ---------- Tokens (mesma família da Confirmar Ordem e da Home: Newsreader + Figtree + Plex Mono) */
.godi-bx, .bx-painel{
    --c-tinta: #141d29;
    --c-texto: #354152;
    --c-suave: #5b6676;
    --c-linha: #e1e5ea;
    --c-linha-forte: #c9d0d9;
    --c-cartao: #ffffff;
    --c-sutil: #f5f7f9;
    --c-base: var(--godi-base, #004080);
    --c-base-hover: var(--godi-base-hover, #002767);
    --c-base-suave: color-mix(in srgb, var(--c-base) 8%, transparent);
    --c-base-texto: var(--c-base);
    --c-ok: #067647;      --c-ok-fundo: #ecfdf3;      --c-ok-barra: #17b26a;
    --c-alerta: #93370d;  --c-alerta-fundo: #fffaeb;  --c-alerta-barra: #f79009;
    --c-erro: #b42318;    --c-erro-fundo: #fef3f2;    --c-erro-barra: #d92d20;
    --c-serif: 'Newsreader', Georgia, serif;
    --c-sans: 'Figtree', 'Source Sans Pro', system-ui, sans-serif;
    --c-mono: 'IBM Plex Mono', ui-monospace, Consolas, monospace;
    --c-raio: 14px;
    --c-ease: cubic-bezier(.2, .7, .2, 1);
    --c-topo: calc(var(--godi-header-altura, 57px) + 16px);
    font-family: var(--c-sans); color: var(--c-texto); font-size: .9375rem;
}
.godi-bx{ padding: 24px 4px 48px; }
.dark-mode .godi-bx, .dark-mode .bx-painel{
    --c-tinta: #f1f3f6; --c-texto: #d5dae1; --c-suave: #a9b2bd;
    --c-linha: #4b535c; --c-linha-forte: #5d6670; --c-cartao: #343a40; --c-sutil: #3c434a;
    --c-base-suave: color-mix(in srgb, var(--c-base) 26%, transparent);
    --c-base-texto: color-mix(in srgb, var(--c-base) 40%, #ffffff);
    --c-ok: #75e0a7;     --c-ok-fundo: rgba(23,178,106,.16);
    --c-alerta: #fec84b; --c-alerta-fundo: rgba(247,144,9,.16);
    --c-erro: #fda29b;   --c-erro-fundo: rgba(217,45,32,.18);
}
.godi-bx *, .godi-bx *::before, .godi-bx *::after, .bx-painel *{ box-sizing: border-box; }
.godi-bx :focus-visible, .bx-painel :focus-visible{ outline: 2px solid var(--c-base-texto); outline-offset: 2px; }
.godi-bx .num, .bx-painel .num{ font-variant-numeric: tabular-nums; }
.bx-sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); white-space:nowrap; }
.bx-vazio{ color: var(--c-suave); font-style: italic; font-weight: 400; }

/* ---------- Cabeçalho: o valor a pagar é o título ---------- */
.bx-voltar{ display:inline-flex; align-items:center; gap:6px; min-height:44px; color: var(--c-suave); font-weight:500; text-decoration:none; border-radius:8px; padding: 0 6px; margin-left:-6px; transition: color .2s var(--c-ease); }
.bx-voltar:hover{ color: var(--c-base-texto); text-decoration:none; }
.bx-voltar svg{ transition: transform .2s var(--c-ease); }
.bx-voltar:hover svg{ transform: translateX(-3px); }
.bx-cabeca{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap: 16px 24px; }
.bx-eyebrow{ font-size:.75rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color: var(--c-base-texto); margin: 6px 0 4px; }
.bx-titulo{ font-family: var(--c-serif); font-weight:500; font-size: clamp(2.4rem, 1.7rem + 2.4vw, 3.6rem); line-height:1; letter-spacing:-.025em; color: var(--c-tinta); margin:0; }
.bx-titulo small{ font-size: .45em; letter-spacing: 0; color: var(--c-suave); margin-right: .2em; vertical-align: .55em; }
.bx-para{ display:flex; flex-wrap:wrap; align-items:center; gap: 8px 14px; margin: 10px 0 0; font-family: var(--c-serif); font-style: italic; font-size: 1.25rem; color: var(--c-suave); }
.bx-para strong{ font-style: normal; font-weight: 600; color: var(--c-tinta); }
.bx-desconto{ font-family: var(--c-sans); font-style: normal; font-size: .85rem; }
.bx-selo{ display:inline-flex; align-items:center; gap:6px; padding: 4px 10px; border-radius: 999px; font-family: var(--c-sans); font-style: normal; font-size:.8rem; font-weight:700; }
.bx-selo.neutro{ background: var(--c-sutil); color: var(--c-suave); border: 1px solid var(--c-linha); }
.bx-selo.alerta{ background: var(--c-alerta-fundo); color: var(--c-alerta); }
.bx-selo.erro{ background: var(--c-erro-fundo); color: var(--c-erro); }
.bx-selo.ok{ background: var(--c-ok-fundo); color: var(--c-ok); }
.bx-meta{ display:flex; flex-wrap:wrap; gap: 10px 32px; margin: 22px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-linha); }
.bx-meta div{ min-width: 0; }
.bx-meta dt{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--c-suave); margin:0; }
.bx-meta dd{ margin: 2px 0 0; font-weight:600; color: var(--c-tinta); }
.bx-meta dd.mono{ font-family: var(--c-mono); font-weight: 500; }

/* ---------- Grade ---------- */
.bx-grade{ display:grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 28px; margin-top: 28px; align-items:start; }
@media (max-width: 1199.98px){ .bx-grade{ grid-template-columns: minmax(0, 1fr); } }

.bx-bloco{ position:relative; background: var(--c-cartao); border: 1px solid var(--c-linha); border-radius: var(--c-raio); padding: 26px 28px 28px; margin-bottom: 20px; }
.bx-bloco-topo{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom: 18px; flex-wrap: wrap; }
.bx-bloco h2{ font-family: var(--c-serif); font-weight:600; font-size:1.4rem; letter-spacing:-.01em; color: var(--c-tinta); margin:0; }
.bx-dica{ color: var(--c-suave); font-size:.875rem; margin: 4px 0 0; }

/* Botões */
.bx-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; min-height:44px; padding: 0 18px; border-radius: 10px; font: inherit; font-weight:600; font-size: .95rem; cursor:pointer; text-decoration:none; border:1px solid transparent;
    transition: background-color .2s var(--c-ease), border-color .2s var(--c-ease), color .2s var(--c-ease), transform .12s var(--c-ease), box-shadow .2s var(--c-ease); }
.bx-btn:active{ transform: translateY(1px); }
.bx-btn:hover{ text-decoration:none; }
.bx-btn-primario{ background: var(--c-base); color:#fff; box-shadow: 0 1px 2px rgba(16,24,40,.1); }
.bx-btn-primario:hover{ background: var(--c-base-hover); color:#fff; box-shadow: 0 6px 16px color-mix(in srgb, var(--c-base) 30%, transparent); }
.bx-btn-secundario{ background: var(--c-cartao); color: var(--c-tinta); border-color: var(--c-linha-forte); }
.bx-btn-secundario:hover{ border-color: var(--c-suave); color: var(--c-tinta); }
.bx-btn-fantasma{ background: transparent; color: var(--c-base-texto); padding: 0 12px; }
.bx-btn-fantasma:hover{ background: var(--c-base-suave); color: var(--c-base-texto); }
.bx-btn[aria-busy="true"]{ pointer-events:none; opacity:.9; }
.bx-btn[disabled]{ opacity:.55; cursor:not-allowed; box-shadow:none; }
.bx-giro{ width:16px; height:16px; border:2px solid currentColor; border-right-color: transparent; border-radius:50%; animation: bx-giro .7s linear infinite; display:none; flex: none; }
.bx-btn[aria-busy="true"] .bx-giro{ display:inline-block; }
@keyframes bx-giro{ to{ transform: rotate(360deg); } }

/* ---------- Para quem pagar: o "canhoto" de transferência (assinatura da tela) ---------- */
.bx-canhoto{ padding-left: 58px; overflow: hidden; }
/* Picote vertical à esquerda (furos + faixa), como o canhoto de um documento de transporte. Os furos
   usam cores do próprio cartão, então funcionam com qualquer fundo de página (preferências visuais). */
.bx-canhoto::before{ content:''; position:absolute; left: 0; top: 0; bottom: 0; width: 30px; background: var(--c-sutil); border-right: 1px solid var(--c-linha); border-radius: var(--c-raio) 0 0 var(--c-raio); }
.bx-canhoto::after{ content:''; position:absolute; left: 9px; top: 14px; bottom: 14px; width: 12px; background: radial-gradient(circle, var(--c-cartao) 0 4px, var(--c-linha-forte) 4.5px 5.5px, transparent 6px) 0 0 / 12px 22px; background-repeat: no-repeat space; }
.bx-pix{ background: var(--c-sutil); border: 1px solid var(--c-linha); border-radius: 12px; padding: 16px 18px; margin-bottom: 18px; }
.bx-pix-topo{ display:flex; flex-wrap:wrap; gap: 6px 16px; justify-content:space-between; font-size:.75rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--c-suave); }
.bx-pix-topo b{ color: var(--c-tinta); font-weight:700; letter-spacing:.02em; text-transform:none; font-size: .85rem; }
.bx-pix .bx-dado{ border:0; padding: 0; margin-top: 8px; }
.bx-pix .bx-dado dt{ position:absolute; width:1px; height:1px; overflow:hidden; clip: rect(0 0 0 0); }
.bx-pix .bx-dado-valor{ font-family: var(--c-mono); font-size: clamp(1.1rem, .95rem + .6vw, 1.45rem); font-weight: 500; color: var(--c-tinta); letter-spacing: .01em; word-break: break-all; }
.bx-pix .bx-dado-valor.bx-vazio{ font-family: var(--c-sans); font-size: 1rem; }
.bx-dados{ display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0 20px; margin:0; }
.bx-dados .largo{ grid-column: 1 / -1; }
.bx-linha-guia .bx-dado-valor{ font-family: var(--c-mono); font-size: clamp(1rem, .9rem + .5vw, 1.25rem); font-weight: 500; letter-spacing: .02em; }
@media (max-width: 767.98px){ .bx-dados{ grid-template-columns: minmax(0,1fr); } }
.bx-dado{ min-width:0; padding: 12px 0; border-bottom: 1px solid var(--c-linha); }
.bx-dado dt{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--c-suave); margin:0 0 2px; }
.bx-dado dd{ display:flex; align-items:center; gap: 6px; margin:0; min-height: 36px; }
.bx-dado-valor{ flex:1; min-width:0; font-weight:600; color: var(--c-tinta); overflow-wrap:anywhere; transition: background-color .6s var(--c-ease); border-radius: 4px; }
.bx-copiar{ flex:none; width:36px; height:36px; border-radius: 9px; border: 1px solid transparent; background: transparent; color: var(--c-suave); display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
    transition: background-color .2s var(--c-ease), color .2s var(--c-ease), border-color .2s var(--c-ease); }
.bx-copiar:hover:not([disabled]){ background: var(--c-cartao); border-color: var(--c-linha-forte); color: var(--c-base-texto); }
.bx-copiar[disabled]{ opacity:.35; cursor: default; }
.bx-copiar .i-ok{ display:none; }
.bx-copiar.copiado{ color: var(--c-ok); background: var(--c-ok-fundo); }
.bx-copiar.copiado .i-ok{ display:block; animation: bx-pop .3s var(--c-ease); }
.bx-copiar.copiado .i-copiar{ display:none; }
@keyframes bx-pop{ from{ transform: scale(.5); } to{ transform: none; } }
.bx-flash{ animation: bx-flash 1.6s var(--c-ease); }
@keyframes bx-flash{ 0%, 30%{ background: color-mix(in srgb, var(--c-alerta-barra) 28%, transparent); } 100%{ background: transparent; } }

/* Carimbo "PAGO" que cai sobre o canhoto quando a baixa é gravada. */
.bx-carimbo{ position:absolute; right: 28px; top: 22px; display:none; padding: 8px 18px 6px; border: 3px double var(--c-ok-barra); border-radius: 10px; color: var(--c-ok); text-align:center;
    font-family: var(--c-sans); font-weight: 800; font-size: 1.9rem; letter-spacing: .18em; line-height: 1; transform: rotate(-9deg); background: color-mix(in srgb, var(--c-cartao) 70%, transparent); pointer-events:none; }
.bx-carimbo small{ display:block; font-size:.72rem; letter-spacing:.08em; font-weight:700; margin-top: 4px; }
.bx-carimbo.visivel{ display:block; animation: bx-carimbo .45s cubic-bezier(.3,1.6,.5,1) both; }
@keyframes bx-carimbo{ from{ opacity:0; transform: rotate(-9deg) scale(2.2); } to{ opacity:1; transform: rotate(-9deg) scale(1); } }

/* ---------- Composição do frete (extrato) ---------- */
.bx-extrato{ list-style:none; margin:0; padding:0; max-width: 560px; }
.bx-extrato li{ display:flex; align-items:baseline; gap: 8px; padding: 9px 0; }
.bx-extrato .rot{ color: var(--c-texto); display:inline-flex; align-items:baseline; gap: 8px; }
.bx-extrato .sinal{ display:inline-block; width: 14px; color: var(--c-suave); font-family: var(--c-mono); }
.bx-extrato .pontos{ flex:1; border-bottom: 1px dotted var(--c-linha-forte); transform: translateY(-4px); min-width: 12px; }
.bx-extrato .val{ font-variant-numeric: tabular-nums; color: var(--c-tinta); font-weight:500; white-space:nowrap; padding: 0 4px; border-radius: 4px; }
.bx-extrato .total{ border-top: 1px solid var(--c-linha-forte); margin-top: 4px; padding-top: 12px; }
.bx-extrato .total .rot, .bx-extrato .total .val{ color: var(--c-tinta); font-weight:700; }
.bx-extrato .separa{ margin-top: 14px; }
.bx-extrato li.esta .rot, .bx-extrato li.esta .val{ font-weight:700; color: var(--c-tinta); }
.bx-tag{ display:inline-flex; align-items:center; padding: 2px 8px; border-radius: 999px; font-size: .7rem; font-weight:700; letter-spacing:.04em; text-transform: uppercase; background: var(--c-base-suave); color: var(--c-base-texto); }
.bx-rodape{ font-size:.8rem; color: var(--c-suave); margin: 14px 0 0; }

/* ---------- Motorista e proprietários / anotações ---------- */
.bx-pessoas{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 0 24px; margin: 0; }
.bx-pessoas .bx-dado dd{ min-height: 0; }
.bx-notas{ display:grid; gap: 16px; }
.bx-nota h3{ font-size:.72rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color: var(--c-suave); margin:0 0 6px; font-family: var(--c-sans); }
.bx-nota p{ margin:0; line-height:1.55; color: var(--c-tinta); white-space: pre-line; overflow-wrap:anywhere; border-radius: 6px; }
.bx-nota.historico p{ font-family: var(--c-mono); font-size: .85rem; color: var(--c-texto); background: var(--c-sutil); padding: 12px 14px; max-height: 220px; overflow:auto; }

/* ---------- Lateral: Registrar a baixa ---------- */
/* Fixa ao rolar, mas nunca mais alta que a tela: com vários comprovantes rola por dentro e o botão
   Efetuar baixa nunca fica escondido. */
.bx-lateral{ position: sticky; top: var(--c-topo); max-height: calc(100vh - var(--c-topo) - 16px); overflow-y: auto; overscroll-behavior: contain; border-radius: var(--c-raio); scrollbar-width: thin; }
@media (max-width: 1199.98px){ .bx-lateral{ position: static; max-height: none; overflow: visible; } }
.bx-baixa{ background: var(--c-cartao); border: 1px solid var(--c-linha); border-radius: var(--c-raio); box-shadow: 0 12px 32px -18px rgba(16,24,40,.25); overflow:hidden; }
.bx-baixa-cabeca{ padding: 22px 24px 0; }
.bx-baixa-cabeca h2{ font-family: var(--c-serif); font-weight:600; font-size: 1.5rem; letter-spacing:-.01em; color: var(--c-tinta); margin:0; }
.bx-baixa-corpo{ padding: 18px 24px 24px; display:grid; gap: 20px; }
/* Itens da grade não alargam a lateral (nome de arquivo comprido, linhas do extrato). */
.bx-baixa-corpo > *{ min-width: 0; }
.bx-campo{ display:flex; flex-direction:column; min-width:0; }
.bx-campo label, .bx-rotulo{ font-weight:600; font-size:.875rem; color: var(--c-tinta); margin: 0 0 6px; }
.bx-obrig{ color: var(--c-erro); margin-left: 2px; }
.bx-input{ height: 44px; width:100%; border: 1px solid var(--c-linha-forte); border-radius: 10px; padding: 0 14px; background: var(--c-cartao); color: var(--c-tinta); font: inherit; font-size: 1rem;
    transition: border-color .2s var(--c-ease), box-shadow .2s var(--c-ease), background-color .2s var(--c-ease); }
.bx-input:hover{ border-color: var(--c-suave); }
.bx-input:focus{ outline: none; border-color: var(--c-base); box-shadow: 0 0 0 4px var(--c-base-suave); }
.bx-input[readonly]{ background: var(--c-sutil); }
.bx-prefixo{ position:relative; }
.bx-prefixo .bx-input{ padding-left: 42px; }
.bx-prefixo > span{ position:absolute; left:14px; top:50%; transform:translateY(-50%); color: var(--c-suave); font-weight:600; pointer-events:none; }
.bx-input.grande{ height: 54px; font-family: var(--c-serif); font-size: 1.6rem; font-weight: 500; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.bx-atalhos{ display:flex; flex-wrap:wrap; gap: 6px; margin-top: 8px; }
.bx-chip{ min-height: 32px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--c-linha-forte); background: var(--c-cartao); color: var(--c-texto); font: inherit; font-size: .8rem; font-weight:600; cursor:pointer;
    transition: background-color .2s var(--c-ease), border-color .2s var(--c-ease), color .2s var(--c-ease); }
.bx-chip:hover{ border-color: var(--c-base); color: var(--c-base-texto); }
.bx-chip[aria-pressed="true"]{ background: var(--c-base-suave); border-color: var(--c-base); color: var(--c-base-texto); }
.bx-ajuda{ font-size:.8rem; color: var(--c-suave); margin-top: 6px; }
.bx-dif{ display:flex; align-items:flex-start; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 10px; font-size:.85rem; line-height:1.4; background: var(--c-sutil); color: var(--c-suave); transition: background-color .25s, color .25s; }
.bx-dif svg{ flex:none; margin-top: 1px; }
.bx-dif.ok{ background: var(--c-ok-fundo); color: var(--c-ok); }
.bx-dif.alerta{ background: var(--c-alerta-fundo); color: var(--c-alerta); }
.bx-dif .bx-link{ background:none; border:0; padding: 0; font: inherit; font-weight:700; color: inherit; text-decoration: underline; text-underline-offset: 3px; cursor:pointer; }
.bx-erro-campo{ display:none; font-size:.8rem; font-weight:600; color: var(--c-erro); margin-top:6px; gap:6px; align-items:center; }
.bx-campo.tem-erro .bx-input{ border-color: var(--c-erro-barra); }
.bx-campo.tem-erro .bx-erro-campo{ display:flex; }
.bx-campo.tem-erro .bx-soltar{ border-color: var(--c-erro-barra); background: var(--c-erro-fundo); }

/* Comprovantes: arrastar, escolher ou colar */
.bx-soltar{ position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 6px; min-height: 128px; padding: 18px; text-align:center; border: 2px dashed var(--c-linha-forte); border-radius: 12px; background: var(--c-sutil); cursor:pointer;
    transition: border-color .2s var(--c-ease), background-color .2s var(--c-ease), transform .2s var(--c-ease); }
.bx-soltar:hover{ border-color: var(--c-base); }
.bx-soltar.arrastando{ border-color: var(--c-base); background: var(--c-base-suave); transform: scale(1.01); }
.bx-soltar:focus-within{ border-color: var(--c-base); box-shadow: 0 0 0 4px var(--c-base-suave); }
.bx-soltar input[type=file]{ position:absolute; inset:0; opacity:0; cursor:pointer; width:100%; }
/* Com arquivo anexado a área encolhe para uma linha (o foco passa a ser a lista). */
.bx-soltar.compacto{ min-height: 56px; flex-direction: row; flex-wrap: wrap; gap: 4px 10px; padding: 10px 14px; }
.bx-soltar.compacto .bx-soltar-icone, .bx-soltar.compacto #dicaComprovantes{ display:none; }
.bx-soltar-icone{ width: 40px; height: 40px; border-radius: 12px; background: var(--c-cartao); border: 1px solid var(--c-linha); display:flex; align-items:center; justify-content:center; color: var(--c-base-texto); }
.bx-soltar strong{ color: var(--c-tinta); font-size: .95rem; }
.bx-soltar span{ font-size: .8rem; color: var(--c-suave); }
.bx-soltar kbd{ font-family: var(--c-mono); font-size: .72rem; padding: 1px 5px; border-radius: 4px; border: 1px solid var(--c-linha-forte); background: var(--c-cartao); color: var(--c-texto); box-shadow: none; }
.bx-arquivos{ list-style:none; margin: 10px 0 0; padding: 0; display:grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.bx-arquivos:empty{ display:none; }
.bx-arquivo{ display:flex; align-items:center; gap: 12px; padding: 8px 8px 8px 8px; border: 1px solid var(--c-linha); border-radius: 12px; background: var(--c-cartao); animation: bx-entra .3s var(--c-ease); }
.bx-arquivo.saindo{ opacity: 0; transform: translateX(8px); transition: opacity .2s, transform .2s; }
.bx-miniatura{ flex:none; width: 48px; height: 48px; border-radius: 8px; background: var(--c-sutil) center / cover no-repeat; border: 1px solid var(--c-linha); display:flex; align-items:center; justify-content:center; font-family: var(--c-mono); font-size:.68rem; font-weight:600; color: var(--c-erro); }
.bx-arquivo-info{ flex:1; min-width:0; }
.bx-arquivo-nome{ display:block; font-weight:600; color: var(--c-tinta); font-size:.875rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-arquivo-tam{ display:block; font-size:.75rem; color: var(--c-suave); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-arquivo button{ flex:none; width: 36px; height: 36px; border:0; border-radius: 9px; background: transparent; color: var(--c-suave); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background-color .2s, color .2s; }
.bx-arquivo button:hover{ background: var(--c-erro-fundo); color: var(--c-erro); }
@keyframes bx-entra{ from{ opacity:0; transform: translateY(4px) scale(.98); } to{ opacity:1; transform:none; } }

/* Erro geral do envio */
.bx-falha{ display:none; gap: 10px; align-items:flex-start; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--c-erro-barra); background: var(--c-erro-fundo); color: var(--c-erro); font-size:.875rem; font-weight:600; line-height:1.45; }
.bx-falha.visivel{ display:flex; animation: bx-entra .3s var(--c-ease); }
.bx-falha svg{ flex:none; margin-top: 2px; }

/* Ação: botão + progresso do envio */
.bx-acao{ display:grid; gap: 8px; }
.bx-acao .bx-btn-primario{ width:100%; min-height: 52px; font-size: 1.02rem; }
.bx-progresso{ display:none; height: 6px; border-radius: 99px; background: var(--c-sutil); overflow:hidden; }
.bx-progresso.ativo{ display:block; animation: bx-entra .2s var(--c-ease); }
.bx-progresso i{ display:block; height:100%; width: 0; border-radius: inherit; background: var(--c-base); transition: width .2s linear; }
.bx-progresso.indeterminado i{ width: 35%; animation: bx-vai 1.1s var(--c-ease) infinite; }
@keyframes bx-vai{ from{ transform: translateX(-100%); } to{ transform: translateX(300%); } }
.bx-estado{ margin:0; font-size: .8rem; color: var(--c-suave); text-align:center; }
.bx-cancelar{ text-align:center; }
.bx-cancelar a{ display:inline-flex; align-items:center; min-height: 44px; padding: 0 10px; color: var(--c-suave); font-weight:600; }
.bx-cancelar a:hover{ color: var(--c-tinta); }

/* Sucesso dentro do cartão */
.bx-sucesso{ display:none; padding: 36px 24px 28px; text-align:center; }
.bx-baixa.concluida .bx-baixa-cabeca, .bx-baixa.concluida .bx-baixa-corpo{ display:none; }
.bx-baixa.concluida .bx-sucesso{ display:block; animation: bx-entra .35s var(--c-ease); }
.bx-sucesso svg circle{ stroke: var(--c-ok-barra); stroke-dasharray: 166; stroke-dashoffset: 166; animation: bx-traco .6s var(--c-ease) forwards; }
.bx-sucesso svg path{ stroke: var(--c-ok-barra); stroke-dasharray: 48; stroke-dashoffset: 48; animation: bx-traco .4s .45s var(--c-ease) forwards; }
.bx-sucesso h2{ font-family: var(--c-serif); font-weight:500; font-size: 1.9rem; color: var(--c-tinta); margin: 16px 0 4px; }
.bx-sucesso p{ color: var(--c-suave); margin:0 0 18px; }
@keyframes bx-traco{ to{ stroke-dashoffset: 0; } }

/* ---------- Painéis laterais (dialog nativo: foco preso, Esc fecha) ---------- */
.bx-painel{ position: fixed; inset: 0 0 0 auto; margin: 0; height: 100%; max-height: 100%; width: min(480px, 100vw); max-width: 100vw; padding: 0; border: 0; border-left: 1px solid var(--c-linha); background: var(--c-cartao); color: var(--c-texto); font-family: var(--c-sans); box-shadow: -24px 0 48px -24px rgba(16,24,40,.35); }
.bx-painel[open]{ display:flex; flex-direction:column; animation: bx-desliza .32s var(--c-ease); }
.bx-painel::backdrop{ background: rgba(16,24,40,.42); backdrop-filter: blur(2px); animation: bx-fade .3s var(--c-ease); }
@keyframes bx-desliza{ from{ transform: translateX(32px); opacity:0; } to{ transform:none; opacity:1; } }
@keyframes bx-fade{ from{ opacity:0; } to{ opacity:1; } }
.bx-painel-cabeca{ display:flex; align-items:flex-start; justify-content:space-between; gap: 12px; padding: 24px 24px 16px; border-bottom: 1px solid var(--c-linha); }
.bx-painel-cabeca h2{ font-family: var(--c-serif); font-weight:600; font-size: 1.5rem; color: var(--c-tinta); margin:0; }
.bx-painel-cabeca p{ margin: 4px 0 0; color: var(--c-suave); font-size:.875rem; }
.bx-fechar{ flex:none; width:44px; height:44px; border:0; border-radius: 10px; background: transparent; color: var(--c-suave); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition: background-color .2s, color .2s; }
.bx-fechar:hover{ background: var(--c-sutil); color: var(--c-tinta); }
.bx-painel-corpo{ flex:1; overflow:auto; padding: 22px 24px; display:grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content:start; }
.bx-painel-corpo .duas{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.bx-painel-rodape{ display:flex; gap: 10px; justify-content:flex-end; padding: 16px 24px; border-top: 1px solid var(--c-linha); background: var(--c-sutil); }
.bx-previa{ display:flex; align-items:baseline; justify-content:space-between; padding: 12px 14px; border-radius: 10px; background: var(--c-base-suave); color: var(--c-tinta); font-weight:600; }
.bx-previa strong{ font-family: var(--c-serif); font-size: 1.3rem; font-weight:600; font-variant-numeric: tabular-nums; }

/* Confirmação de valor diferente: caixa central (não painel lateral) */
.bx-painel.bx-confirmar{ inset: 0; margin: auto; height: fit-content; max-height: calc(100vh - 32px); width: min(440px, calc(100vw - 32px)); border: 1px solid var(--c-linha); border-radius: 16px; overflow: hidden; box-shadow: 0 24px 48px -16px rgba(16,24,40,.35); }
.bx-confirmar[open]{ animation: bx-entra .25s var(--c-ease); }
.bx-confirmar .bx-painel-corpo{ gap: 8px; padding: 26px 26px 18px; }
.bx-confirmar h2{ font-family: var(--c-serif); font-weight:600; font-size: 1.45rem; color: var(--c-tinta); margin: 6px 0 0; }
.bx-confirmar p{ margin: 0; color: var(--c-texto); line-height: 1.5; }
.bx-confirmar-icone{ width: 40px; height: 40px; border-radius: 12px; display:flex; align-items:center; justify-content:center; background: var(--c-alerta-fundo); color: var(--c-alerta); }

/* Canhotos */
.bx-canhotos{ list-style:none; margin:0; padding:0; display:grid; gap: 10px; }
.bx-canhotos li{ display:flex; align-items:center; gap: 14px; padding: 12px 14px; border: 1px solid var(--c-linha); border-radius: 12px; animation: bx-entra .3s var(--c-ease) both; }
.bx-canhotos .data{ font-family: var(--c-mono); font-size: .85rem; color: var(--c-suave); min-width: 86px; }
.bx-canhotos .mdfe{ flex:1; min-width:0; font-weight:600; color: var(--c-tinta); }
.bx-canhotos .mdfe small{ display:block; font-weight:500; color: var(--c-suave); font-size:.75rem; }
.bx-canhotos a{ font-weight:600; white-space:nowrap; min-height: 44px; display:inline-flex; align-items:center; }
.bx-esqueleto{ height: 62px; border-radius: 12px; background: linear-gradient(90deg, var(--c-sutil) 0, var(--c-linha) 50%, var(--c-sutil) 100%) 0 0 / 200% 100%; animation: bx-brilho 1.2s linear infinite; }
@keyframes bx-brilho{ to{ background-position: -200% 0; } }
.bx-vazio-painel{ text-align:center; padding: 32px 12px; color: var(--c-suave); }
.bx-vazio-painel strong{ display:block; color: var(--c-tinta); font-size: 1.05rem; margin-bottom: 4px; }

/* Avisos (toasts) */
.bx-avisos{ position: fixed; right: 20px; bottom: 20px; z-index: 2100; display:grid; gap: 10px; width: min(380px, calc(100vw - 32px)); pointer-events:none; }
.bx-aviso{ pointer-events:auto; display:flex; align-items:flex-start; gap: 10px; padding: 14px 16px; border-radius: 12px; background: var(--c-tinta); color: var(--c-cartao); font-family: var(--c-sans); font-weight:600; font-size:.9rem; box-shadow: 0 16px 32px -12px rgba(16,24,40,.45); animation: bx-aviso .35s var(--c-ease); }
.bx-aviso.erro{ background: var(--c-erro-barra); color: #fff; }
.bx-aviso.saindo{ opacity:0; transform: translateY(8px); transition: opacity .25s, transform .25s; }
.bx-aviso svg{ flex:none; margin-top: 1px; }
@keyframes bx-aviso{ from{ opacity:0; transform: translateY(12px); } to{ opacity:1; transform:none; } }
.dark-mode .bx-aviso:not(.erro){ background: #f1f3f6; color: #141d29; }

@media (max-width: 767.98px){
    .godi-bx{ padding-top: 12px; }
    .bx-bloco{ padding: 20px 18px 22px; }
    .bx-canhoto{ padding-left: 48px; }
    .bx-baixa-cabeca{ padding: 20px 18px 0; }
    .bx-baixa-corpo{ padding: 16px 18px 20px; }
    .bx-carimbo{ right: 14px; top: 14px; font-size: 1.4rem; }
    .bx-painel-corpo .duas{ grid-template-columns: minmax(0, 1fr); }
}
/* Guias e CIOT da ordem (baixar / enviar por e-mail) */
.bx-docs{ list-style:none; margin:0 0 16px; padding:0; display:grid; grid-template-columns: minmax(0, 1fr); gap:10px; }
.bx-doc{ display:flex; align-items:center; gap:10px; padding:10px 10px 10px 14px; border:1px solid var(--c-linha); border-radius:12px; background:var(--c-cartao);
    transition: border-color .2s var(--c-ease), background-color .2s var(--c-ease); }
.bx-doc:hover{ border-color: var(--c-linha-forte); }
.bx-doc.marcado{ border-color: color-mix(in srgb, var(--c-base) 45%, transparent); background: var(--c-base-suave); }
.bx-doc-marca{ display:flex; align-items:center; gap:12px; flex:1; min-width:0; margin:0; cursor:pointer; min-height:44px; }
.bx-doc-marca input{ width:20px; height:20px; flex:none; accent-color: var(--c-base); cursor:pointer; }
.bx-doc-tipo{ flex:none; font-size:.68rem; font-weight:800; letter-spacing:.06em; padding:5px 8px; border-radius:7px; background:#e6f6f3; color:#115e59; }
.bx-doc-tipo.ciot{ background:#ede9fe; color:#5b21b6; }
.dark-mode .bx-doc-tipo{ background: rgba(20,184,166,.16); color:#5eead4; }
.dark-mode .bx-doc-tipo.ciot{ background: rgba(139,92,246,.2); color:#c9b6ff; }
.bx-doc-info{ min-width:0; }
.bx-doc-info strong{ display:block; color:var(--c-tinta); font-weight:600; font-size:.9rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bx-doc-info small{ display:block; color:var(--c-suave); font-size:.78rem; }
.bx-doc .bx-btn{ min-height:40px; padding:0 12px; font-size:.86rem; }
.bx-docs-email .bx-docs-linha{ display:flex; gap:10px; }
.bx-docs-email .bx-input{ flex:1; min-width:0; }
.bx-docs-ok{ display:none; gap:10px; align-items:flex-start; margin-top:12px; padding:12px 14px; border-radius:12px; border:1px solid var(--c-ok-barra); background:var(--c-ok-fundo); color:var(--c-ok); font-size:.875rem; font-weight:600; }
.bx-docs-ok.visivel{ display:flex; animation: bx-entra .3s var(--c-ease); }
#docsFalha{ margin-top:12px; }
@media (max-width: 575.98px){ .bx-doc{ flex-wrap:wrap; } .bx-doc-marca{ flex-basis:100%; } .bx-doc .bx-btn{ flex:1; } .bx-docs-email .bx-docs-linha{ flex-direction:column; } .bx-docs-email .bx-input{ flex:none; } }

@media (prefers-reduced-motion: reduce){
    .godi-bx *, .godi-bx *::before, .godi-bx *::after, .bx-painel, .bx-painel *, .bx-aviso{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Só do Ver Pagamento (godi-php views/pagamentos/ver.php): lista de comprovantes com link e o resumo da baixa na lateral. */
.bx-registro{ display:grid; gap: 4px; }
.bx-registro .bx-rotulo{ margin: 0; }
.bx-registro-data{ font-family: var(--c-serif); font-size: 1.6rem; font-weight: 500; color: var(--c-tinta); line-height: 1.1; }
.bx-arquivo a.bx-btn{ min-height: 36px; padding: 0 12px; font-size: .85rem; }
.bx-quem{ font-size: .8rem; color: var(--c-suave); margin: 0; }
.bx-sem-comprovante{ display:flex; gap: 8px; align-items:flex-start; padding: 12px 14px; border-radius: 12px; background: var(--c-alerta-fundo); color: var(--c-alerta); font-size: .875rem; font-weight: 600; }
.bx-sem-comprovante svg{ flex: none; margin-top: 2px; }