/* Histórico do pedido e dos itens — modal único (javascript/historico_modal.js).
 *
 * Paleta: só tokens --nav-* (completos nos dois temas). O que não existe lá (âmbar de
 * pendência, verde de "ok") é definido aqui para claro e escuro.
 *
 * Blindagem: o modal mora no <body> e carrega em TODAS as telas, cujos CSS têm
 * seletores de elemento soltos (`button {...}`, `span {...}`, `.dark-screen button`).
 * O reset abaixo tem especificidade (0,2,0) — vence `button` (0,0,1) e
 * `.dark-screen button` (0,1,1) — e as regras do modal, com a mesma (0,2,0), vêm
 * DEPOIS dele no arquivo, então ganham pela ordem.
 */
.hm-fundo {
    --hm-surface: var(--nav-surface, #ffffff);
    --hm-surface-2: var(--nav-surface-2, #f5f8f9);
    --hm-border: var(--nav-border, #dde4e6);
    --hm-border-soft: var(--nav-border-soft, #e8eef0);
    --hm-fg: var(--nav-fg, #0f1719);
    --hm-muted: var(--nav-fg-muted, #5c6c70);
    --hm-dim: var(--nav-fg-dim, #8a9a9e);
    --hm-accent: var(--nav-accent, #099ba5);
    --hm-accent-fg: var(--nav-accent-fg, #067a82);
    --hm-accent-soft: var(--nav-accent-soft, #099ba516);
    --hm-accent-line: var(--nav-accent-line, #099ba533);
    --hm-track: color-mix(in srgb, var(--hm-border) 55%, var(--hm-surface));
    --hm-warn: #8a6a00;
    --hm-ok: #1a7a43;
    --hm-ruim: #b0372a;
    --hm-sombra: var(--nav-shadow-pop, 0 16px 40px -12px #0f171926);
    --hm-scrim: var(--nav-scrim, #0b101259);
}
.dark-screen .hm-fundo {
    --hm-warn: #e8c547;
    --hm-ok: #5fd18f;
    --hm-ruim: #f08a7e;
}

.hm-fundo.hm-fundo :where(div, span, b, small, i, h2, label, button, input, p, ul, li) {
    margin: 0; padding: 0; border: 0; background: none; box-shadow: none; outline: 0;
    font: inherit; color: inherit; line-height: inherit; letter-spacing: inherit; text-transform: inherit;
    text-align: inherit; text-decoration: none; float: none; position: static; transform: none;
    width: auto; height: auto; min-width: 0; max-width: none; min-height: 0; border-radius: 0;
    transition: none; opacity: 1; vertical-align: baseline;
}
.hm-fundo.hm-fundo, .hm-fundo.hm-fundo * { box-sizing: border-box; }
.hm-fundo[hidden] { display: none !important; }
body.hm-sem-scroll { overflow: hidden !important; }

.hm-fundo.hm-fundo {
    position: fixed; inset: 0; z-index: 10050;
    background: var(--hm-scrim);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
    font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 14px; line-height: 1.45; color: var(--hm-fg); text-align: left;
    letter-spacing: normal; text-transform: none;
}
/* O modal inteiro rola: título e abas ficam (.hm-topo, sticky); resumo e faixas sobem
   com a rolagem e a lista ganha a altura toda. Antes só a lista rolava, espremida
   embaixo de um cabeçalho fixo que crescia a cada item do pedido. */
.hm-fundo .hm-modal {
    background: var(--hm-surface); color: var(--hm-fg);
    border: 1px solid var(--hm-border); border-radius: 14px; box-shadow: var(--hm-sombra);
    width: min(1000px, 100%); max-height: min(92vh, 960px);
    display: block; overflow-y: auto; overscroll-behavior: contain;
}
.hm-fundo .hm-ms {
    font-family: "Material Symbols Outlined"; font-weight: normal; font-style: normal;
    font-size: 18px; line-height: 1; display: inline-block; white-space: nowrap;
    font-feature-settings: "liga"; -webkit-font-feature-settings: "liga"; -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}
.hm-fundo button { cursor: pointer; }
.hm-fundo .hm-modal:focus { outline: 0; }
.hm-fundo button:focus-visible, .hm-fundo .hm-alterna:focus-within { outline: 2px solid var(--hm-accent); outline-offset: 2px; }

/* Cabeça */
.hm-fundo .hm-topo { position: sticky; top: 0; z-index: 5; background: var(--hm-surface); padding: 18px 20px 0; border-radius: 14px 14px 0 0; }
.hm-fundo .hm-cabeca { padding: 14px 20px 14px; border-bottom: 1px solid var(--hm-border-soft); display: grid; gap: 14px; }
.hm-fundo .hm-titulo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.hm-fundo .hm-olho { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-dim); font-weight: 600; }
.hm-fundo .hm-titulo h2 { display: block; margin-top: 2px; font-size: 18px; font-weight: 600; line-height: 1.3; color: var(--hm-fg); }
.hm-fundo .hm-sub { color: var(--hm-muted); font-size: 12.5px; margin-top: 2px; font-variant-numeric: tabular-nums; }
.hm-fundo .hm-titulo-acoes { display: flex; align-items: center; gap: 6px; flex: none; }
.hm-fundo .hm-fechar { width: 34px; height: 34px; border-radius: 8px; color: var(--hm-muted); display: inline-flex; align-items: center; justify-content: center; }
.hm-fundo .hm-fechar .hm-ms { font-size: 22px; }
.hm-fundo .hm-fechar:hover { background: var(--hm-surface-2); color: var(--hm-fg); }
.hm-fundo .hm-botao-pdf { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--hm-muted); border: 1px solid var(--hm-border); border-radius: 8px; padding: 6px 10px; }
.hm-fundo .hm-botao-pdf:hover { background: var(--hm-surface-2); color: var(--hm-fg); }
.hm-fundo .hm-botao-pdf[disabled] { opacity: .55; cursor: progress; }

.hm-fundo .hm-abas { display: flex; gap: 22px; border-bottom: 1px solid var(--hm-border-soft); margin: 10px -20px 0; padding: 0 20px; }
.hm-fundo .hm-aba { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var(--hm-muted); border-bottom: 2px solid transparent; padding: 6px 2px 9px; margin-bottom: -1px; }
.hm-fundo .hm-aba .hm-ms { font-size: 17px; }
.hm-fundo .hm-aba small { font-size: 11.5px; color: var(--hm-dim); font-weight: 500; }
.hm-fundo .hm-aba[aria-selected="true"] { color: var(--hm-fg); font-weight: 600; border-bottom-color: var(--hm-accent); }
.hm-fundo .hm-aba[aria-selected="true"] .hm-ms { color: var(--hm-accent-fg); }

.hm-fundo .hm-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.hm-fundo .hm-ver-removidos { display: block; justify-self: start; text-align: left; font-size: 12.5px; color: var(--hm-muted); border-radius: 6px; padding: 2px 4px; margin-left: -4px; }
.hm-fundo .hm-ver-removidos .hm-ms { font-size: 16px; color: var(--hm-dim); vertical-align: -3px; margin-right: 6px; }
.hm-fundo .hm-ver-removidos b { font-weight: 500; color: var(--hm-accent-fg); }
.hm-fundo .hm-ver-removidos:hover b { text-decoration: underline; }
.hm-fundo .hm-chip { font-size: 12px; border: 1px solid var(--hm-border); background: var(--hm-surface); color: var(--hm-muted); border-radius: 999px; padding: 3px 10px; }
.hm-fundo .hm-chip b { font-weight: 600; color: var(--hm-fg); }
.hm-fundo .hm-chip[aria-pressed="true"] { background: var(--hm-accent-soft); border-color: var(--hm-accent-line); color: var(--hm-accent-fg); }
.hm-fundo .hm-chip[aria-pressed="true"] b { color: var(--hm-accent-fg); }
.hm-fundo .hm-item-cab { display: grid; gap: 1px; }
.hm-fundo .hm-item-cab b { font-size: 15px; font-weight: 600; line-height: 1.35; }
.hm-fundo .hm-item-cab span { font-size: 12.5px; color: var(--hm-muted); font-variant-numeric: tabular-nums; }

/* Resumo: 4 fatos numa linha */
.hm-fundo .hm-resumo { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.hm-fundo .hm-fato { padding: 2px 14px; border-left: 1px solid var(--hm-border-soft); min-width: 0; }
.hm-fundo .hm-fato:first-child { padding-left: 0; border-left: 0; }
.hm-fundo .hm-v { font-size: 14.5px; font-weight: 600; margin-top: 3px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-variant-numeric: tabular-nums; }
.hm-fundo .hm-v small { font-size: 12px; font-weight: 400; color: var(--hm-muted); }
.hm-fundo .hm-fato-alerta .hm-v { color: var(--hm-warn); }
.hm-fundo .hm-selo { display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; }
.hm-fundo .hm-selo-neutro { background: var(--hm-surface-2); color: var(--hm-muted); border: 1px dashed var(--hm-border); }

/* Faixas de tempo */
.hm-fundo .hm-faixa-rot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.hm-fundo .hm-faixa-rot > span:last-child { font-size: 12px; color: var(--hm-dim); font-variant-numeric: tabular-nums; }
.hm-fundo .hm-raia { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 10px; align-items: center; }
.hm-fundo .hm-raia + .hm-raia { margin-top: 5px; }
.hm-fundo .hm-raia-nome { font-size: 12px; color: var(--hm-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-fundo .hm-raia-nome b { color: var(--hm-fg); font-weight: 500; }
.hm-fundo .hm-trilha { position: relative; display: block; height: 22px; background: var(--hm-track); border-radius: 5px; overflow: hidden; }
.hm-fundo .hm-seg { position: absolute; top: 0; bottom: 0; display: block; border-right: 1px solid var(--hm-surface); font-size: 10.5px; font-weight: 600; line-height: 22px; padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 2px; }
.hm-fundo .hm-seg-agora { background-image: repeating-linear-gradient(135deg, transparent 0 5px, #ffffff38 5px 9px) !important; }
.hm-fundo .hm-quebra { position: absolute; top: -2px; bottom: -2px; width: 6px; transform: translateX(-50%) skewX(-20deg); background: var(--hm-surface); border-left: 1.5px solid var(--hm-dim); border-right: 1.5px solid var(--hm-dim); pointer-events: none; z-index: 1; }
.hm-fundo .hm-seg-fora { background: repeating-linear-gradient(135deg, var(--hm-track) 0 5px, var(--hm-border) 5px 9px); color: var(--hm-muted); font-weight: 500; }
.hm-fundo .hm-eixo { position: relative; height: 16px; margin-top: 3px; font-size: 10.5px; color: var(--hm-dim); font-variant-numeric: tabular-nums; }
.hm-fundo .hm-eixo span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
.hm-fundo .hm-eixo span.hm-eixo-ini { transform: none; }
.hm-fundo .hm-eixo span.hm-eixo-fim { transform: translateX(-100%); }
.hm-fundo .hm-com-raias .hm-eixo { margin-left: 190px; }

/* Faixa sob o mouse: a linha do item ganha fundo e o nome acende; o trecho apontado
   ganha contorno. O padding/margem negativos se anulam — o trilho não sai do lugar
   e o eixo (margin-left: 190px) continua alinhado. */
.hm-fundo .hm-raia { padding: 3px 6px; margin-left: -6px; margin-right: -6px; border-radius: 7px; transition: background-color .12s; }
.hm-fundo .hm-raia + .hm-raia { margin-top: 2px; }
.hm-fundo .hm-raia:hover { background: var(--hm-surface-2); }
.hm-fundo .hm-raia:hover .hm-raia-nome b { color: var(--hm-accent-fg); }
.hm-fundo .hm-seg { cursor: default; transition: filter .12s, box-shadow .12s; }
.hm-fundo .hm-seg:hover, .hm-fundo .hm-seg.hm-seg-ativo {
    filter: brightness(1.12) saturate(1.05);
    box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--hm-fg) 75%, transparent);
    z-index: 1;
}

/* Tooltip dos trechos: cores invertidas do modal, legível nos dois temas. */
.hm-fundo .hm-dica {
    position: fixed; z-index: 10060; pointer-events: none;
    display: grid; gap: 1px; max-width: 300px; padding: 7px 10px; border-radius: 8px;
    background: var(--hm-fg); color: var(--hm-surface); box-shadow: var(--hm-sombra);
    font-size: 12px; line-height: 1.35; text-align: left;
}
.hm-fundo .hm-dica[hidden] { display: none; }
.hm-fundo .hm-dica b { display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; }
.hm-fundo .hm-dica b i { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--hm-surface) 70%, transparent); }
.hm-fundo .hm-dica span { display: block; opacity: .85; font-variant-numeric: tabular-nums; }

/* Corpo */
.hm-fundo .hm-corpo { overflow: visible; }
.hm-fundo .hm-lista-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 20px 4px; flex-wrap: wrap; }
.hm-fundo .hm-conta { font-size: 12px; color: var(--hm-dim); }
.hm-fundo .hm-alterna { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--hm-muted); cursor: pointer; border-radius: 6px; }
.hm-fundo .hm-alterna input { -webkit-appearance: checkbox; appearance: checkbox; width: 15px; height: 15px; accent-color: var(--hm-accent); }
.hm-fundo .hm-aviso { display: flex; gap: 8px; align-items: flex-start; margin: 12px 20px 2px; padding: 10px 12px; border-radius: 10px; background: var(--hm-surface-2); border: 1px dashed var(--hm-border); font-size: 12.5px; color: var(--hm-muted); }
.hm-fundo .hm-aviso .hm-ms { color: var(--hm-dim); }
.hm-fundo .hm-aviso b { color: var(--hm-fg); font-weight: 600; }
.hm-fundo .hm-vazio-msg { display: block; padding: 40px 20px; text-align: center; color: var(--hm-muted); font-size: 13.5px; }

/* Linhas: comuns */
.hm-fundo .hm-lista { display: block; padding: 0 12px 12px; }
.hm-fundo .hm-bloco { --hm-row: var(--hm-surface); display: block; background: var(--hm-row); border-top: 1px solid var(--hm-border-soft); }
.hm-fundo .hm-bloco:hover { --hm-row: var(--hm-surface-2); }
.hm-fundo .hm-bloco.hm-pend { --hm-row: color-mix(in srgb, #d9bb12 13%, var(--hm-surface)); }
.hm-fundo .hm-bloco.hm-pend:hover { --hm-row: color-mix(in srgb, #d9bb12 19%, var(--hm-surface)); }
.hm-fundo .hm-bloco.hm-alerta { --hm-row: color-mix(in srgb, #d9bb12 9%, var(--hm-surface)); }
.hm-fundo .hm-bloco.hm-alerta:hover { --hm-row: color-mix(in srgb, #d9bb12 15%, var(--hm-surface)); }
.hm-fundo .hm-cab2, .hm-fundo .hm-cab3 { font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--hm-dim); font-weight: 600; padding-top: 8px; padding-bottom: 6px; position: sticky; top: var(--hm-topo-h, 0px); z-index: 2; background: var(--hm-surface); }
.hm-fundo .hm-cab2 > div, .hm-fundo .hm-cab3 > div { white-space: nowrap; }
.hm-fundo .hm-c-qd { text-align: right; }
.hm-fundo .hm-ponto { display: block; width: 11px; height: 11px; border-radius: 50%; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--hm-row); }
.hm-fundo .hm-st { font-weight: 600; font-size: 13.5px; }
.hm-fundo .hm-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: 1px; }
.hm-fundo .hm-tag { font-size: 10.5px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--hm-surface-2); color: var(--hm-muted); border: 1px solid var(--hm-border-soft); white-space: nowrap; }
.hm-fundo .hm-tag-agora { background: var(--hm-accent-soft); color: var(--hm-accent-fg); border-color: var(--hm-accent-line); }
.hm-fundo .hm-tag-conc { background: color-mix(in srgb, #219552 14%, var(--hm-surface)); color: var(--hm-ok); border-color: transparent; }
.hm-fundo .hm-tag-rep { color: var(--hm-fg); }
.hm-fundo .hm-barra { display: block; height: 8px; background: var(--hm-track); border-radius: 4px; overflow: hidden; max-width: 180px; }
.hm-fundo .hm-barra i { display: block; height: 100%; border-radius: 4px; min-width: 2px; }
.hm-fundo .hm-pend-mot { display: flex; gap: 6px; align-items: flex-start; font-size: 12.5px; color: var(--hm-warn); font-weight: 600; margin-top: 2px; }
.hm-fundo .hm-pend-mot .hm-ms { font-size: 16px; }
.hm-fundo .hm-qd { text-align: right; line-height: 1.25; font-variant-numeric: tabular-nums; }
.hm-fundo .hm-qd b { display: block; font-size: 12.5px; font-weight: 600; color: var(--hm-fg); }
.hm-fundo .hm-qd b.hm-repete { display: none; }
.hm-fundo .hm-qd span { font-size: 12px; color: var(--hm-muted); }
.hm-fundo .hm-agora-txt { font-size: 12px; font-weight: 600; color: var(--hm-accent-fg) !important; }
.hm-fundo .hm-p { align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; }
.hm-fundo .hm-p::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--hm-border); }
.hm-fundo .hm-bloco.hm-primeiro > div > .hm-p::before { top: 50%; }
.hm-fundo .hm-fim-trilho > .hm-p::before { bottom: 50%; }
.hm-fundo .hm-bloco.hm-primeiro > .hm-fim-trilho > .hm-p::before { display: none; }
.hm-fundo .hm-n { min-width: 0; }
.hm-fundo .hm-w { min-width: 0; font-size: 12.5px; color: var(--hm-fg); }
.hm-fundo .hm-quem, .hm-fundo .hm-via { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-fundo .hm-via { font-size: 12px; color: var(--hm-dim); }

/* Fases do item */
.hm-fundo .hm-l2, .hm-fundo .hm-cab2 { display: grid; grid-template-columns: 62px 22px minmax(0, 1.4fr) 84px minmax(0, 0.8fr) minmax(0, 1.15fr); column-gap: 12px; align-items: center; padding-right: 10px; }
.hm-fundo .hm-l2 { grid-template-areas: "qd p n dur bar w"; }
.hm-fundo .hm-l2 > * { padding-top: 10px; padding-bottom: 10px; }
.hm-fundo .hm-cab2 .hm-c-qd { grid-column: 1; } .hm-fundo .hm-cab2 .hm-c-n { grid-column: 3; }
.hm-fundo .hm-cab2 .hm-c-t { grid-column: 4 / 6; } .hm-fundo .hm-cab2 .hm-c-w { grid-column: 6; }
.hm-fundo .hm-l2 > .hm-qd { grid-area: qd; } .hm-fundo .hm-l2 > .hm-p { grid-area: p; } .hm-fundo .hm-l2 > .hm-n { grid-area: n; }
.hm-fundo .hm-l2 > .hm-d2 { grid-area: dur; font-size: 12.5px; color: var(--hm-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hm-fundo .hm-l2 > .hm-b2 { grid-area: bar; min-width: 0; }
.hm-fundo .hm-l2 > .hm-w { grid-area: w; }
.hm-fundo .hm-d2.hm-longa { color: var(--hm-fg); font-weight: 600; }
.hm-fundo .hm-bloco.hm-atual .hm-l2 .hm-ponto { width: 13px; height: 13px; box-shadow: 0 0 0 3px var(--hm-row), 0 0 0 5px var(--hm-anel); }
.hm-fundo .hm-l2.hm-inst > * { padding-top: 4px; padding-bottom: 4px; }
.hm-fundo .hm-l2.hm-inst .hm-ponto { width: 7px; height: 7px; }
.hm-fundo .hm-l2.hm-inst .hm-st { font-weight: 500; font-size: 12.5px; color: var(--hm-muted); }
.hm-fundo .hm-l2.hm-inst .hm-d2, .hm-fundo .hm-l2.hm-inst .hm-qd span, .hm-fundo .hm-l2.hm-inst .hm-w, .hm-fundo .hm-l2.hm-inst .hm-via { font-size: 11.5px; color: var(--hm-dim); }
.hm-fundo .hm-l2.hm-saida .hm-ponto { background: var(--hm-row) !important; border: 2px solid var(--hm-dim); width: 13px; height: 13px; }
.hm-fundo .hm-l2.hm-saida .hm-st { color: var(--hm-muted); }
.hm-fundo .hm-ev2 { display: grid; grid-template-columns: 62px 22px minmax(0, 1fr); column-gap: 12px; padding-right: 10px; font-size: 12px; color: var(--hm-muted); }
.hm-fundo .hm-ev2 > * { padding-top: 2px; padding-bottom: 2px; }
.hm-fundo .hm-ev2 .hm-p i { display: block; width: 5px; height: 5px; border-radius: 50%; background: var(--hm-dim); box-shadow: 0 0 0 3px var(--hm-row); position: relative; z-index: 1; }
.hm-fundo .hm-tx { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; min-width: 0; }
.hm-fundo .hm-tx .hm-ms { font-size: 16px; color: var(--hm-dim); }
.hm-fundo .hm-meta { color: var(--hm-dim); font-variant-numeric: tabular-nums; }
.hm-fundo .hm-bloco.hm-tem-ev > .hm-l2 > * { padding-bottom: 4px; }
.hm-fundo .hm-bloco > .hm-ev2:last-child > * { padding-bottom: 10px; }
.hm-fundo .hm-eventos-off .hm-ev2 { display: none; }
.hm-fundo .hm-eventos-off .hm-bloco.hm-tem-ev > .hm-l2 > * { padding-bottom: 10px; }
.hm-fundo .hm-eventos-off .hm-bloco.hm-ultimo > .hm-l2 > .hm-p::before { bottom: 50%; }

/* Acontecimentos do pedido: ícone no trilho em vez de ponto colorido */
.hm-fundo .hm-l3, .hm-fundo .hm-cab3 { display: grid; grid-template-columns: 62px 26px minmax(0, 1fr) minmax(0, 0.42fr); column-gap: 12px; align-items: center; padding-right: 10px; }
.hm-fundo .hm-l3 { grid-template-areas: "qd p n w"; }
.hm-fundo .hm-l3 > * { padding-top: 10px; padding-bottom: 10px; }
.hm-fundo .hm-cab3 .hm-c-qd { grid-column: 1; } .hm-fundo .hm-cab3 .hm-c-n { grid-column: 3; } .hm-fundo .hm-cab3 .hm-c-w { grid-column: 4; }
.hm-fundo .hm-l3 > .hm-qd { grid-area: qd; } .hm-fundo .hm-l3 > .hm-p { grid-area: p; } .hm-fundo .hm-l3 > .hm-n { grid-area: n; } .hm-fundo .hm-l3 > .hm-w { grid-area: w; }
.hm-fundo .hm-ico { width: 26px; height: 26px; border-radius: 50%; background: var(--hm-accent-soft); color: var(--hm-accent-fg); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--hm-row); }
.hm-fundo .hm-ico .hm-ms { font-size: 15px; }
.hm-fundo .hm-ico-alerta { background: color-mix(in srgb, #d9bb12 22%, var(--hm-surface)); color: var(--hm-warn); }
.hm-fundo .hm-ico-ok { background: color-mix(in srgb, #219552 18%, var(--hm-surface)); color: var(--hm-ok); }
.hm-fundo .hm-ico-ruim { background: color-mix(in srgb, #c0392b 16%, var(--hm-surface)); color: var(--hm-ruim); }
.hm-fundo .hm-ico-neutro { background: var(--hm-surface-2); color: var(--hm-muted); border: 1px solid var(--hm-border); }
.hm-fundo .hm-tit { font-weight: 600; font-size: 13.5px; }
.hm-fundo .hm-det { display: block; font-size: 12px; color: var(--hm-muted); overflow-wrap: anywhere; }
.hm-fundo .hm-det b { color: var(--hm-fg); font-weight: 500; }
.hm-fundo .hm-det-alerta { color: var(--hm-warn); font-weight: 600; }

@media (max-width: 760px) {
    .hm-fundo .hm-resumo { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
    .hm-fundo .hm-fato:nth-child(3) { padding-left: 0; border-left: 0; }
}
/* Celular: tela cheia; o modal inteiro rola */
@media (max-width: 640px) {
    .hm-fundo.hm-fundo { padding: 0; align-items: stretch; }
    .hm-fundo .hm-modal { width: 100%; max-height: none; height: 100%; border-radius: 0; border: 0; overflow: auto; }
    .hm-fundo .hm-topo { padding: 14px 14px 0; border-radius: 0; }
    .hm-fundo .hm-cabeca { padding: 12px 14px; }
    .hm-fundo .hm-abas { margin-left: -14px; margin-right: -14px; padding: 0 14px; }
    .hm-fundo .hm-aviso { margin-left: 12px; margin-right: 12px; }
    .hm-fundo .hm-lista { padding: 0 6px 10px; }
    .hm-fundo .hm-cab2, .hm-fundo .hm-cab3 { display: none; }
    .hm-fundo .hm-raia { grid-template-columns: 1fr; gap: 3px; }
    .hm-fundo .hm-com-raias .hm-eixo { margin-left: 0; }
    .hm-fundo .hm-botao-pdf span:not(.hm-ms) { display: none; }
    .hm-fundo .hm-chip-quando { display: none; }

    /* fase do item: fase + tempo / barra / data · quem */
    .hm-fundo .hm-l2 { grid-template-columns: 18px auto minmax(0, 1fr) auto; grid-template-areas: "p n n dur" "p bar bar bar" "p qd w w"; column-gap: 10px; row-gap: 4px; padding-top: 10px; padding-bottom: 10px; padding-right: 6px; }
    .hm-fundo .hm-l2 > *, .hm-fundo .hm-l3 > * { padding-top: 0; padding-bottom: 0; }
    .hm-fundo .hm-bloco.hm-tem-ev > .hm-l2 > * { padding-bottom: 0; }
    .hm-fundo .hm-bloco.hm-tem-ev > .hm-l2 { padding-bottom: 4px; }
    .hm-fundo .hm-eventos-off .hm-bloco.hm-tem-ev > .hm-l2 { padding-bottom: 10px; }
    .hm-fundo .hm-l2 > .hm-p, .hm-fundo .hm-l3 > .hm-p { align-items: flex-start; }
    .hm-fundo .hm-l2 .hm-ponto { margin-top: 6px; }
    .hm-fundo .hm-l2 > .hm-p::before, .hm-fundo .hm-l3 > .hm-p::before { top: -10px; bottom: -10px; }
    .hm-fundo .hm-bloco.hm-primeiro > .hm-l2 > .hm-p::before { top: 8px; }
    .hm-fundo .hm-bloco.hm-primeiro > .hm-l3 > .hm-p::before { top: 12px; }
    .hm-fundo .hm-l2.hm-fim-trilho > .hm-p::before, .hm-fundo .hm-l3.hm-fim-trilho > .hm-p::before,
    .hm-fundo .hm-eventos-off .hm-bloco.hm-ultimo > .hm-l2 > .hm-p::before { bottom: auto; height: 22px; }
    .hm-fundo .hm-l2.hm-inst > .hm-b2 { display: none; }
    .hm-fundo .hm-l2.hm-inst { padding-top: 6px; padding-bottom: 6px; }
    .hm-fundo .hm-l2 > .hm-d2 { text-align: right; }
    .hm-fundo .hm-barra { max-width: none; height: 6px; }
    .hm-fundo .hm-qd { text-align: left; white-space: nowrap; }
    .hm-fundo .hm-qd b, .hm-fundo .hm-qd b.hm-repete { display: inline; font-size: 12px; font-weight: 500; color: var(--hm-muted); margin-right: 4px; }
    .hm-fundo .hm-l2 > .hm-w, .hm-fundo .hm-l3 > .hm-w { display: flex; gap: 4px; font-size: 12px; color: var(--hm-muted); }
    .hm-fundo .hm-quem { flex: 0 0 auto; max-width: 70%; }
    .hm-fundo .hm-w .hm-quem::before { content: "· "; color: var(--hm-dim); }
    .hm-fundo .hm-via { flex: 1 1 0; min-width: 0; }
    .hm-fundo .hm-via::before { content: "· "; }
    .hm-fundo .hm-ev2 { grid-template-columns: 18px minmax(0, 1fr); column-gap: 10px; padding-right: 6px; }
    .hm-fundo .hm-ev2 > .hm-vazio { display: none; }
    .hm-fundo .hm-bloco > .hm-ev2:last-child > * { padding-bottom: 8px; }

    /* acontecimento do pedido: título e detalhe / data · quem */
    .hm-fundo .hm-l3 { grid-template-columns: 26px auto minmax(0, 1fr); grid-template-areas: "p n n" "p qd w"; column-gap: 10px; row-gap: 3px; padding-top: 10px; padding-bottom: 10px; padding-right: 6px; }
}
@media (prefers-reduced-motion: reduce) { .hm-fundo * { transition: none !important; } }