/* Avisos da Mais Envios (mais-envios-avisos.js): selo de status, ⓘ Como ler e pendência no card.
 * Substituem as faixas amarelas/azuis no meio das telas. Só apresentação. */
.me-cab-acoes{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.me-pop-host{position:relative;display:inline-block}
.me-pop-host>summary{list-style:none;cursor:pointer;user-select:none}
.me-pop-host>summary::-webkit-details-marker{display:none}
.me-pop-host>summary:focus-visible{outline:2px solid var(--me-link,#006bc7);outline-offset:2px}

.me-selo,.me-selo>summary{display:inline-flex;align-items:center;gap:7px;font-size:12px;line-height:1;color:var(--me-muted,#626978);white-space:nowrap}
.me-selo>summary,span.me-selo{padding:7px 11px;border:1px solid var(--me-line,#e6e6e6);border-radius:999px;background:var(--me-panel,#fff)}
details.me-selo{padding:0;border:0;background:none}
.me-selo>summary:hover{border-color:var(--border-strong,#b4bbc5);color:var(--me-text,#3d4465)}
.me-selo i{width:7px;height:7px;border-radius:50%;background:var(--me-success,#167344);flex:none}
.me-selo--andamento i{background:var(--me-link,#006bc7);animation:me-pulsa 1.4s ease-in-out infinite}
.me-selo--atencao i{background:var(--me-warning-line,#c98515)}
.me-selo--erro i{background:var(--me-danger,#c62828)}
.me-selo--erro>summary,span.me-selo--erro{color:var(--me-danger,#c62828);border-color:color-mix(in srgb,var(--me-danger,#c62828) 35%,transparent)}
.me-selo--neutro i{background:var(--me-muted,#626978)}
@keyframes me-pulsa{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.me-selo--andamento i{animation:none}}

.me-info>summary{display:inline-flex;align-items:center;gap:6px;padding:7px 11px;border:1px solid var(--me-line,#e6e6e6);border-radius:999px;background:var(--me-panel,#fff);font-size:12px;line-height:1;color:var(--me-muted,#626978)}
.me-info>summary:hover,.me-info[open]>summary{color:var(--me-text,#3d4465);border-color:var(--border-strong,#b4bbc5)}
.me-info>summary b{display:inline-grid;place-items:center;width:15px;height:15px;border-radius:50%;border:1.4px solid currentColor;font:700 10px/1 Georgia,serif;font-style:italic}

.me-pop{position:absolute;right:0;top:calc(100% + 8px);z-index:60;width:min(360px,calc(100vw - 32px));padding:14px 16px;border:1px solid var(--me-line,#e6e6e6);border-radius:10px;
 background:var(--me-panel,#fff);color:var(--me-text,#3d4465);box-shadow:0 10px 30px rgba(20,30,50,.14);font-size:13px;line-height:1.55;white-space:normal;text-align:left}
.me-pop strong{display:block;font-size:13px;margin:0 0 8px}
.me-pop p{margin:0 0 8px}.me-pop p:last-child{margin-bottom:0}
.me-pop ul{margin:0;padding-left:18px;display:grid;gap:7px}
.me-pop li::marker{color:var(--me-muted,#626978)}
.me-pop b{font-weight:650}
.me-pop-acao{margin-top:12px;display:flex;gap:8px;flex-wrap:wrap}

.me-pend{display:inline-flex;align-items:center;gap:6px;padding:3px 9px;border-radius:999px;font-size:11.5px;line-height:1.4;font-weight:600;
 background:var(--me-warning-bg,#fff5df);color:var(--me-warning,#855500);white-space:nowrap}
.me-pend::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.8}
.me-pend--erro{background:var(--me-danger-bg,#fcebec);color:var(--me-danger,#c62828)}
.me-pend--ok{background:var(--me-success-bg,#e7f6ed);color:var(--me-success,#167344)}
.me-pend--neutro{background:var(--me-soft,#f0f1f5);color:var(--me-muted,#626978)}

@media (max-width:650px){
 .me-cab-acoes{justify-content:flex-start}
 .me-pop{position:fixed;left:16px;right:16px;top:auto;bottom:16px;width:auto;max-height:60vh;overflow:auto}
}

/* ── Faixa de origem dos dados no topo das telas da 220 (Enviados, Clientes que enviam, Envios a cobrar, Clientes,
 * Agências, Portal, Faturas, Tabelas): vira uma linha discreta, sem caixa, com o botão pequeno à direita.
 * Só CSS, no contexto Mais Envios; o markup continua o das telas (classe df-faixa com o prefixo e2-). ── */
html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e220 .e2-df-faixa,.e2-df-faixa,.df-faixa){
 display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:nowrap;background:none;border:0;border-radius:0;box-shadow:none;
 padding:0 2px;margin:0 0 10px;min-height:28px;font-size:12px;line-height:1.4;color:var(--me-muted)}
html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa-texto,.df-faixa-texto){
 display:inline-flex;align-items:center;gap:6px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--me-muted)}
html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa-texto,.df-faixa-texto) svg{width:13px;height:13px;flex:none;color:var(--me-muted);opacity:.8}
html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa,.df-faixa)>:is(a,label,button,span:last-child:not(:first-child)){
 flex:none;font-size:12px;white-space:nowrap}
html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa,.df-faixa)>:is(a,label,button):is(.e2-btn,.btn){
 padding:5px 10px;min-height:0;border-radius:7px}
@media (max-width:650px){
 html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa,.df-faixa){flex-wrap:wrap}
 html:is(:has(#app[data-contexto="mais"]),[data-mais-envios-visual]):not(.app-move):not([data-produto="agf"]) :is(.e2-df-faixa-texto,.df-faixa-texto){white-space:normal}
}

/* Fora da Mais Envios (ex.: financeiro da AGF usando o mesmo selo/pendência): cores dos tokens gerais da casca. */
html:not(:has(#app[data-contexto="mais"])):not([data-mais-envios-visual]) :is(.me-selo>summary,span.me-selo,.me-info>summary,.me-pop){
 background:var(--panel,var(--surface-card,#fff));color:var(--txt,var(--text-strong,#3d4465));border-color:var(--line,var(--border-subtle,#e6e6e6))}
html:not(:has(#app[data-contexto="mais"])):not([data-mais-envios-visual]) .me-pend{background:var(--warning-bg,#fff5df);color:var(--warning,#855500)}
html:not(:has(#app[data-contexto="mais"])):not([data-mais-envios-visual]) .me-pend--erro{background:var(--danger-bg,#fcebec);color:var(--danger,#c62828)}
html:not(:has(#app[data-contexto="mais"])):not([data-mais-envios-visual]) .me-pend--neutro{background:var(--panel2,#f0f1f5);color:var(--muted,#626978)}