:root {
  --fundo: #f3f5f8; --cartao: #fff; --texto: #13203a; --suave: #6b7689; --linha: #e2e6ec; --pendente: #c9d0db;
  --marca: #002664; --marca-2: #1f5bd8;
  --ok: #178a4c; --ok-f: #e3f4ea; --aviso: #a86400; --aviso-f: #fdf1dc;
  --mau: #c62f2f; --mau-f: #fbe5e5; --info: #3c5a8a; --info-f: #e7edf7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0d1320; --cartao: #151d2e; --texto: #e6ebf3; --suave: #8c97aa; --linha: #263149; --pendente: #36425b;
    --marca: #9dbbff; --marca-2: #6f9bff;
    --ok: #4cc987; --ok-f: #143324; --aviso: #f0b04a; --aviso-f: #3a2c10;
    --mau: #ff7b7b; --mau-f: #3d1a1d; --info: #9db4dc; --info-f: #1c2840;
  }
}
:root[data-theme="dark"] {
  --fundo: #0d1320; --cartao: #151d2e; --texto: #e6ebf3; --suave: #8c97aa; --linha: #263149; --pendente: #36425b;
  --marca: #9dbbff; --marca-2: #6f9bff;
  --ok: #4cc987; --ok-f: #143324; --aviso: #f0b04a; --aviso-f: #3a2c10;
  --mau: #ff7b7b; --mau-f: #3d1a1d; --info: #9db4dc; --info-f: #1c2840;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fundo); color: var(--texto);
  font: 14px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
[hidden] { display: none !important; }
code, .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }

main { max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px; }
.marca { font-weight: 700; letter-spacing: .2px; color: var(--marca); font-size: 16px; }
.marca span { color: var(--suave); font-weight: 400; margin: 0 2px; }
.cartao { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; }

/* entrada */
#entrada { min-height: 100vh; display: grid; place-items: center; }
.entrar { width: min(340px, 100%); padding: 26px 22px 18px; display: grid; gap: 12px; }
.entrar .marca { text-align: center; margin-bottom: 6px; }
input[type=password] {
  font: inherit; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--linha);
  background: var(--fundo); color: var(--texto); width: 100%; height: 42px;
}
button {
  font: inherit; font-weight: 600; padding: 10px 12px; border: 0; border-radius: 8px;
  background: var(--marca-2); color: #fff; cursor: pointer;
}
button.link { background: none; color: var(--suave); padding: 4px 6px; font-weight: 400; }
button.link:hover { color: var(--texto); }
#erro-entrar { color: var(--mau); min-height: 1.2em; font-size: 13px; text-align: center; }

/* topo */
header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
header .link { margin-left: auto; }
.modo { font-size: 11px; font-weight: 700; letter-spacing: .6px; padding: 3px 8px; border-radius: 999px; }
.modo.simulado { background: var(--aviso-f); color: var(--aviso); }
.modo.real { background: var(--ok-f); color: var(--ok); }
.vivo { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--suave); }
.vivo i { width: 8px; height: 8px; border-radius: 50%; background: var(--pendente); }
.vivo.on i { background: var(--ok); box-shadow: 0 0 0 0 var(--ok); animation: pulso 2s infinite; }
@keyframes pulso { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--ok) 60%, transparent); } 100% { box-shadow: 0 0 0 7px transparent; } }

/* números do dia */
.kpis { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: var(--cartao); border: 1px solid var(--linha); border-radius: 12px; padding: 12px 14px; }
.kpi .n { font-size: 26px; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .r { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 600; }
.kpi.ok .n { color: var(--ok); } .kpi.aviso .n { color: var(--aviso); } .kpi.mau .n { color: var(--mau); } .kpi.info .n { color: var(--info); }

.grelha { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 16px; align-items: start; }
aside { display: grid; gap: 12px; position: sticky; top: 16px; }

/* zona de largar */
.zona {
  display: grid; justify-items: center; gap: 6px; padding: 28px 16px;
  border: 2px dashed var(--linha); border-radius: 14px; background: var(--cartao);
  color: var(--suave); cursor: pointer; text-align: center; transition: border-color .15s, background .15s;
}
.zona b { color: var(--texto); font-size: 15px; }
.zona:hover, .zona.por-cima { border-color: var(--marca-2); color: var(--marca-2); }
.zona.por-cima { background: var(--info-f); }
.progresso { width: 100%; height: 4px; border-radius: 4px; background: var(--linha); overflow: hidden; margin-top: 6px; }
.progresso div { height: 100%; width: 0; background: var(--marca-2); transition: width .2s; }

.fluxo { padding: 6px 14px; }
.fl { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 2px 8px; padding: 8px 0; border-bottom: 1px solid var(--linha); }
.fl:last-child { border-bottom: 0; }
.fl code { grid-column: 2; overflow-wrap: anywhere; }
.rot { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--suave); font-weight: 600; padding-top: 1px; }

/* filtros */
.filtros { max-width: 100%; overflow-x: auto; scrollbar-width: none; display: inline-flex; gap: 2px; padding: 3px; background: var(--cartao); border: 1px solid var(--linha); border-radius: 10px; margin-bottom: 12px; }
.filtros button { flex: none; background: none; color: var(--suave); font-weight: 500; padding: 5px 12px; border-radius: 7px; font-size: 13px; }
.filtros button.ativo { background: var(--info-f); color: var(--texto); font-weight: 600; }

/* processos */
.feed { display: grid; gap: 10px; }
.vazio { color: var(--suave); text-align: center; padding: 40px; }
.proc { padding: 14px 16px 16px; }
.proc.novo { animation: entra .35s ease-out; }
@keyframes entra { from { opacity: 0; transform: translateY(-6px); } }
.p-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.p-nome { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.chip { font-size: 12px; color: var(--suave); background: var(--fundo); border: 1px solid var(--linha); border-radius: 999px; padding: 1px 8px; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.p-hora { margin-left: auto; color: var(--suave); }

.estado { font-size: 11px; font-weight: 700; letter-spacing: .4px; padding: 2px 7px; border-radius: 6px; white-space: nowrap; }
.estado.ENVIADO { background: var(--ok-f); color: var(--ok); }
.estado.SIMULADO { background: var(--info-f); color: var(--info); }
.estado.REPETIDO { background: var(--aviso-f); color: var(--aviso); }
.estado.REJEITADO, .estado.ERRO { background: var(--mau-f); color: var(--mau); }
.estado[data-e="A DECORRER"] { background: var(--info-f); color: var(--marca-2); }

/* os 5 passos */
.passos { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .7fr) minmax(0, 1.05fr) minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.25fr) minmax(0, .9fr) minmax(0, .8fr); }
.passo { position: relative; padding-right: 10px; min-width: 0; }
.passo::before { /* linha até ao passo seguinte */
  content: ""; position: absolute; top: 8px; left: 18px; right: 0; height: 2px; background: var(--pendente);
}
.passo:last-child::before { display: none; }
.passo.ok::before, .passo.aviso::before, .passo.simulado::before { background: var(--ok); }
.bola {
  position: relative; width: 18px; height: 18px; border-radius: 50%; background: var(--cartao);
  border: 2px solid var(--pendente); display: grid; place-items: center; z-index: 1;
}
.bola svg { width: 10px; height: 10px; opacity: 0; }
.passo.ok .bola { background: var(--ok); border-color: var(--ok); }
.passo.simulado .bola { background: var(--info); border-color: var(--info); }
.passo.aviso .bola { background: var(--aviso); border-color: var(--aviso); }
.passo.erro .bola { background: var(--mau); border-color: var(--mau); }
.passo.ok .bola svg, .passo.simulado .bola svg, .passo.aviso .bola svg, .passo.erro .bola svg { opacity: 1; }
.passo.atual .bola { border-color: var(--marca-2); animation: atual 1s ease-in-out infinite alternate; }
@keyframes atual { to { box-shadow: 0 0 0 5px color-mix(in srgb, var(--marca-2) 25%, transparent); } }
.p-rot { margin-top: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 700; color: var(--suave); }
.passo.pendente .p-rot { opacity: .6; }
.p-det { margin-top: 3px; font-size: 12.5px; display: grid; gap: 1px; min-width: 0; }
.p-det > * { overflow-wrap: anywhere; }
.p-det .s { color: var(--suave); }
.p-det .m, .p-det .a { white-space: normal; font-weight: 600; }
.p-det .m { color: var(--mau); }
.p-det .a { color: var(--aviso); }
.p-det .seta { color: var(--suave); }
.p-det b { font-weight: 700; }

/* passos a aparecer um a um quando o processo chega ao vivo */
.proc.novo .passo:not(.pendente) .bola,
.proc.novo .passo:not(.pendente) .p-det { animation: aparece .3s ease-out both; animation-delay: calc(var(--i) * 220ms); }
.proc.novo .passo:not(.pendente)::before { animation: linha .3s ease-out both; animation-delay: calc(var(--i) * 220ms + 120ms); transform-origin: left; }
@keyframes aparece { from { opacity: 0; transform: scale(.6); } }
@keyframes linha { from { transform: scaleX(0); } }

@media (max-width: 960px) {
  .grelha { grid-template-columns: minmax(0, 1fr); }
  aside { position: static; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi.disco { grid-column: span 2; }
  .kpi .n { font-size: 22px; }
  .passos { grid-template-columns: 1fr; gap: 0; }
  .passo { display: grid; grid-template-columns: 18px minmax(0, 1fr); column-gap: 12px; padding: 0 0 12px; }
  .passo::before { top: 18px; bottom: 0; left: 8px; right: auto; width: 2px; height: auto; }
  .proc.novo .passo:not(.pendente)::before { transform-origin: top; }
  .p-rot { margin-top: 1px; grid-column: 2; grid-row: 1; }
  .p-det { grid-column: 2; }
  .passo:last-child { padding-bottom: 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before { animation: none !important; transition: none !important; } }

/* fatura já enviada */
.proc.repetido { border-color: color-mix(in srgb, var(--aviso) 45%, var(--linha)); box-shadow: inset 3px 0 0 var(--aviso); }
.alertas { position: fixed; top: 16px; right: 16px; z-index: 10; display: grid; gap: 8px; width: min(380px, calc(100vw - 32px)); }
.alerta {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; align-items: start;
  padding: 12px 12px 12px 14px; border-radius: 12px; background: var(--aviso-f); color: var(--aviso);
  border: 1px solid color-mix(in srgb, var(--aviso) 40%, transparent); box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
  animation: entra .25s ease-out;
}
.alerta div { display: grid; gap: 2px; color: var(--texto); }
.alerta b { color: var(--aviso); }
.alerta .mono { color: var(--suave); overflow-wrap: anywhere; }
.alerta .link { padding: 0 4px; color: var(--aviso); }

/* PDFs no disco: 0 = nada guardado; mais de 0 só enquanto uma fatura está a ser tratada */
.kpi.disco .n { color: var(--ok); }
.kpi.disco.com .n { color: var(--marca-2); }
.fl .s { grid-column: 2; font-size: 12px; color: var(--suave); }
.p-det .t { margin-top: 3px; font-size: 11.5px; color: var(--texto); }
.p-det .t .s { font-size: 11px; }

/* abrir a linha do tempo */
.p-cab { cursor: pointer; }
.abrir { background: none; color: var(--suave); padding: 2px 4px; border-radius: 6px; display: grid; place-items: center; }
.abrir:hover { background: var(--fundo); color: var(--texto); }
.abrir svg { transition: transform .15s; }
.proc.aberto .abrir svg { transform: rotate(180deg); }
.tempo { width: 100%; border-collapse: collapse; margin-top: 16px; border-top: 1px solid var(--linha); font-size: 12.5px; }
.tempo td { padding: 7px 10px 7px 0; border-bottom: 1px solid var(--linha); vertical-align: top; overflow-wrap: anywhere; }
.tempo tr:last-child td { border-bottom: 0; }
.tempo td:nth-child(1) { white-space: nowrap; width: 1%; }
.tempo td:nth-child(2) { white-space: nowrap; width: 1%; }
.tempo td:nth-child(3) { white-space: nowrap; width: 1%; text-transform: uppercase; font-size: 11px; letter-spacing: .4px; }
.tempo td:nth-child(3) b { border-left: 3px solid var(--pendente); padding-left: 7px; }
.tempo tr.ok td:nth-child(3) b { border-color: var(--ok); }
.tempo tr.simulado td:nth-child(3) b { border-color: var(--info); }
.tempo tr.aviso td:nth-child(3) b { border-color: var(--aviso); }
.tempo tr.erro td:nth-child(3) b { border-color: var(--mau); }
.tempo .s { color: var(--suave); }
.tempo .m { color: var(--mau); } .tempo .a { color: var(--aviso); }
@media (max-width: 640px) {
  .tempo tr { display: grid; grid-template-columns: auto auto 1fr; gap: 0 8px; padding: 7px 0; border-bottom: 1px solid var(--linha); }
  .tempo td { border: 0; padding: 0; width: auto !important; }
  .tempo td:nth-child(4) { grid-column: 1 / -1; margin-top: 3px; }
}

/* mapa dos caminhos */
.mapa { margin-bottom: 16px; padding: 12px 14px 8px; }
.cab-mapa { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cab-mapa .s { font-size: 12.5px; color: var(--suave); }
.cab-mapa .m { color: var(--mau); font-weight: 600; }
.cab-mapa .okt { color: var(--ok); font-weight: 600; }
.mapa-rolo { overflow-x: auto; }
.mapa-svg { display: block; width: 100%; min-width: 900px; height: auto; }
.mapa-rolo.mini { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--linha); }
.mapa-rolo.mini .mapa-svg { min-width: 760px; }
.ar { fill: none; stroke: var(--pendente); stroke-width: 2; }
.ar.rej { stroke-dasharray: 5 5; }
.ar.usada { stroke: var(--ok); stroke-width: 2.5; }
.ar.usada.rej { stroke: var(--suave); }
.ar.erro { stroke: var(--mau); }
.conta rect { fill: var(--cartao); stroke: var(--linha); }
.conta text { font: 700 11px ui-monospace, Menlo, monospace; fill: var(--texto); text-anchor: middle; }
.conta.zero text { fill: var(--suave); font-weight: 400; }
.rot-rej { font-size: 10.5px; fill: var(--suave); }
.no rect { fill: var(--cartao); stroke: var(--linha); stroke-width: 1.5; }
.no .t { font-size: 13px; font-weight: 700; fill: var(--texto); }
.no .s { font: 10.5px ui-monospace, Menlo, monospace; fill: var(--suave); }
.no .luz { fill: var(--pendente); }
.no.ok rect { stroke: color-mix(in srgb, var(--ok) 55%, var(--linha)); }
.no.ok .luz { fill: var(--ok); }
.no.simulado rect { stroke: color-mix(in srgb, var(--info) 60%, var(--linha)); }
.no.simulado .luz { fill: var(--info); }
.no.aviso rect { fill: var(--aviso-f); stroke: var(--aviso); }
.no.aviso .luz { fill: var(--aviso); }
.no.aviso .s { fill: var(--aviso); }
.no.erro rect { fill: var(--mau-f); stroke: var(--mau); stroke-width: 2.5; }
.no.erro .luz { fill: var(--mau); animation: pisca 1s steps(2) infinite; }
.no.erro .t, .no.erro .s { fill: var(--mau); }
.no.fora { opacity: .35; }
@keyframes pisca { 50% { opacity: .25; } }
.bolinha { fill: var(--marca-2); filter: drop-shadow(0 0 4px var(--marca-2)); }
.bolinha.erro { fill: var(--mau); filter: drop-shadow(0 0 4px var(--mau)); }

/* caminho de cada ação */
.p-det .via { font-size: 11px; color: var(--marca-2); }
.rota { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; margin-top: 5px; }
.salto { font-size: 11.5px; background: var(--fundo); border: 1px solid var(--linha); border-radius: 6px; padding: 1px 6px; overflow-wrap: anywhere; }
.rota .seta { color: var(--suave); font-size: 12px; }
.tempo tr.erro .salto:last-of-type { border-color: var(--mau); color: var(--mau); background: var(--mau-f); }
.p-det .anexo { font-size: 12px; overflow-wrap: anywhere; }

/* modo de envio, botões, envio em massa */
.chip.auto { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, var(--linha)); }
.chip.man { color: var(--marca-2); border-color: color-mix(in srgb, var(--marca-2) 35%, var(--linha)); }
.zona-s { font-size: 12px; }
.estado[data-e="À ESPERA"], .estado[data-e="A ENVIAR"] { background: var(--info-f); color: var(--marca-2); }
.estado[data-e="DESCARTADO"] { background: var(--fundo); color: var(--suave); border: 1px solid var(--linha); }
.bts { display: inline-flex; gap: 6px; }
.bts button, .m-bts button { font-size: 12.5px; padding: 5px 12px; border-radius: 7px; }
.bt-desc { background: var(--fundo); color: var(--texto); border: 1px solid var(--linha); }
.bt-desc:hover { border-color: var(--mau); color: var(--mau); }
button.confirma { background: var(--aviso); color: #fff; border-color: var(--aviso); }
button:disabled { opacity: .5; cursor: default; }
.espera { color: var(--marca-2); font-size: 12.5px; font-weight: 600; }
.massa {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: space-between;
  padding: 10px 12px 10px 14px; margin-bottom: 12px; border-radius: 12px;
  background: var(--info-f); border: 1px solid color-mix(in srgb, var(--marca-2) 30%, var(--linha));
}
.m-txt { font-size: 13.5px; } .m-txt .a { color: var(--aviso); font-weight: 600; } .m-txt .i { color: var(--marca-2); font-weight: 600; }
.m-bts { display: flex; gap: 8px; flex-wrap: wrap; }

/* consola (sempre escura, como um terminal) */
.consola { margin-bottom: 16px; border-radius: 12px; overflow: hidden; background: #0b0f17; border: 1px solid #1c2433; color: #c9d4e5; }
.c-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; background: #111827; border-bottom: 1px solid #1c2433; }
.c-cab b { font: 700 12.5px ui-monospace, Menlo, monospace; color: #7ee2a8; }
.c-sub { font: 11.5px ui-monospace, Menlo, monospace; color: #6b7a93; }
.c-tags { display: flex; gap: 4px; flex-wrap: wrap; margin-left: auto; }
.c-tag, .c-bt { font: 600 10.5px ui-monospace, Menlo, monospace; padding: 2px 6px; border-radius: 4px; background: #182131; border: 1px solid #243047; }
.c-tag.off { opacity: .3; }
.c-bt { color: #c9d4e5; font-weight: 400; }
.c-corpo { height: 260px; overflow: auto; padding: 6px 0; font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.consola.fechada .c-corpo { display: none; }
.cl { display: grid; grid-template-columns: 96px 52px minmax(0, 1fr); gap: 10px; padding: 0 12px; }
.cl:hover { background: #121a28; }
.ct { color: #56637a; }
.cx { overflow-wrap: anywhere; white-space: pre-wrap; }
.cl.ok .cx { color: #7ee2a8; } .cl.erro .cx { color: #ff8080; } .cl.aviso .cx { color: #f3c262; }
.cl.erro { background: rgba(255, 90, 90, .07); }
.cg { font-weight: 700; }
.g-HTTP { color: #7aa2ff; } .g-SSE { color: #5f7fb8; } .g-SMTP { color: #e39bff; } .g-BOTAO { color: #ffd166; }
.g-FILA { color: #9ad0ff; } .g-FS { color: #b8c4d6; } .g-EXEC { color: #6fe3e3; } .g-REGEX { color: #6fe3e3; }
.g-NET { color: #ff9f6b; } .g-ENVIO { color: #7ee2a8; } .g-FIM { color: #ffffff; } .g-SAUDE { color: #8a9ab5; } .g-SIS { color: #ff8080; }
@media (max-width: 640px) {
  .cl { grid-template-columns: 1fr; gap: 0; padding: 3px 12px; border-bottom: 1px solid #141c2a; }
  .cl .ct { font-size: 11px; } .cl .cg { font-size: 11px; }
  .c-tags { margin-left: 0; }
}

/* teste / real */
.bt-teste { background: var(--cartao); color: var(--marca-2); border: 1px solid color-mix(in srgb, var(--marca-2) 45%, var(--linha)); }
.bt-teste:hover { background: var(--info-f); }
.tipo { font-size: 10.5px; font-weight: 700; letter-spacing: .4px; padding: 1px 6px; border-radius: 5px; }
.tipo.teste { background: var(--info-f); color: var(--marca-2); }
.tipo.real { background: var(--ok-f); color: var(--ok); }

/* seletor "Envio para" e demonstração */
.seletor { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--suave); margin-left: 8px; }
.seletor select {
  font: inherit; font-weight: 600; color: var(--texto); background: var(--cartao);
  border: 1px solid var(--linha); border-radius: 8px; padding: 5px 28px 5px 10px; height: 32px; width: auto;
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7689' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}
.seletor select.demo { border-color: var(--aviso); background-color: var(--aviso-f); color: var(--aviso); }
.confirma-cw1 { font-size: 12.5px; padding: 6px 12px; background: var(--ok); }
.faixa-demo {
  margin: -4px 0 14px; padding: 10px 14px; border-radius: 10px; font-size: 13.5px;
  background: var(--aviso-f); color: var(--texto); border: 1px solid var(--aviso);
}
.faixa-demo b { color: var(--aviso); letter-spacing: .4px; }
#f-real-estado { grid-column: 2; font-size: 12px; font-weight: 600; }
#f-real-estado.lig { color: var(--ok); } #f-real-estado.desl { color: var(--aviso); }
@media (max-width: 640px) { .seletor { margin-left: 0; width: 100%; } .seletor select { flex: 1; } }

/* congelada: falhou o envio, PDF guardado */
.estado[data-e="CONGELADO"] { background: var(--mau); color: #fff; }
.proc.congelado { border-color: var(--mau); box-shadow: inset 3px 0 0 var(--mau); }
.bt-reenviar { background: var(--mau); color: #fff; }
.massa.com-congeladas { background: var(--mau-f); border-color: var(--mau); }
.m-txt .m { color: var(--mau); font-weight: 600; }
.alerta.mau { background: var(--mau-f); color: var(--mau); border-color: color-mix(in srgb, var(--mau) 45%, transparent); }
.alerta.mau b, .alerta.mau .link { color: var(--mau); }
.m-dest { font-size: 12px; color: var(--suave); margin-top: 2px; }

/* assunto com as cores do manual (Wo? · Was? · Shipment · Company) */
.assunto { font-size: 12px; line-height: 1.7; }
.assunto b { font-weight: 700; padding: 0 3px; border-radius: 3px; border: 1.5px solid; }
.a-onde { color: #d63a3a; border-color: #d63a3a; }
.a-tipo { color: #2f5bd8; border-color: #2f5bd8; }
.a-id { color: #1f9b6b; border-color: #1f9b6b; }
.a-comp { color: #d9901a; border-color: #d9901a; }
.cong-motivo { margin: -4px 0 12px; padding: 8px 12px; border-radius: 8px; background: var(--mau-f); color: var(--texto); font-size: 13px; overflow-wrap: anywhere; }
.cong-motivo b { color: var(--mau); }
.g-CONG { color: #ff6b6b; } .g-ASSUNTO { color: #f3c262; }

/* 8.º passo: entregue (a confirmar = azul a pulsar) */
.passo.espera .bola { border-color: var(--marca-2); animation: atual 1s ease-in-out infinite alternate; }
.passo.espera::before { background: var(--pendente); }
.p-det .a { color: var(--aviso); }
.estado[data-e="A CONFIRMAR"] { background: var(--info-f); color: var(--marca-2); }
.g-ENTREGA { color: #7ee2a8; } .g-AVISO { color: #ffd166; }
@media (min-width: 641px) and (max-width: 1180px) {
  .passos { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 14px; }
  .passo:nth-child(4)::before { display: none; }
}

/* os filhos da grelha não podem crescer além da coluna (iPhone) */
.grelha > *, .feed, .proc, .passos, .passo { min-width: 0; }
.p-cab > * { min-width: 0; }