:root {
  --bg: #f3f5f9;
  --card: #ffffff;
  --txt: #16213a;
  --sub: #5a6478;
  --linha: #e2e6ee;
  --acento: #ea6c00;
  --acento-2: #c95c00;
  --tinta: #14315f;
  --acento-txt: #c25a00;  /* laranja Aiko escurecido para texto pequeno (contraste) */
  --s1: #2d5d9b;
  --s2: #cf8a24;
  --verde: #15803d;   --verde-bg: #e8f5ec;
  --laranja: #a16207; --laranja-bg: #fdf5d9;
  --vermelho: #b91c1c; --vermelho-bg: #fdecec;
  --azul: #1d4ed8;    --azul-bg: #e8eefc;
  --cinza: #4f5b6e;   --cinza-bg: #eceff4;
  --raio: 12px;
  --sombra: 0 1px 2px rgba(20, 49, 95, .06), 0 2px 8px rgba(20, 49, 95, .04);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--txt); font: 15px/1.45 Inter, system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
a { color: inherit; }
h1 { font-size: 24px; margin: 4px 0 16px; letter-spacing: -.01em; }
h2 { font-size: 17px; margin: 22px 0 10px; }
h3 { font-size: 15px; margin: 0 0 12px; }
h4 { margin: 16px 0 8px; font-size: 14px; }
small { font-weight: 400; }
h2 small, h3 small { color: var(--sub); font-size: 13px; }
code { background: var(--cinza-bg); padding: 1px 5px; border-radius: 4px; }
.oculto { display: none !important; }
.sub { color: var(--sub); font-size: 13px; }
.carregando, .vazio { color: var(--sub); text-align: center; padding: 40px 16px; }
.vazio.pequeno { padding: 18px; }

/* ---------- estrutura: menu lateral + área principal ---------- */
.shell { display: grid; grid-template-columns: 248px minmax(0, 1fr); min-height: 100vh; }
.lateral { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 20px; padding: 20px 14px; background: var(--tinta); color: #eef2f8; }
.marca { display: flex; align-items: center; gap: 10px; padding: 0 6px; }
.marca b { display: block; font-size: 16px; letter-spacing: -.01em; }
.marca small { display: block; opacity: .62; font-size: 12px; }
.marca.grande { margin-bottom: 18px; }
.marca.grande b { font-size: 20px; }
.logo { height: 40px; width: auto; flex-shrink: 0; }
.lateral .marca b { font-size: 19px; font-weight: 800; letter-spacing: .12em; line-height: 1.1; }
.marca-linha { display: block; width: 28px; height: 3px; border-radius: 3px; background: var(--acento); margin: 5px 0 4px; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; }
.lateral nav a { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: 9px; text-decoration: none; color: #c7d2e3; font-size: 14px; font-weight: 500; }
.lateral nav a .ic { opacity: .75; flex-shrink: 0; }
.lateral nav a:hover { background: rgba(255,255,255,.06); color: #fff; }
.lateral nav a.ativo { background: rgba(255,255,255,.1); color: #fff; box-shadow: inset 3px 0 0 var(--acento); }
.lateral nav a.ativo .ic { opacity: 1; color: #ffa057; }
.usuario { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 10px; border-radius: 12px; background: rgba(255,255,255,.06); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: #24497f; color: #fff; font-weight: 700; flex-shrink: 0; }
.u-txt { min-width: 0; flex: 1; }
.u-txt b { display: block; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-txt small { display: block; font-size: 11px; opacity: .65; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icone-claro { background: none; border: 0; color: #c7d2e3; cursor: pointer; padding: 6px; border-radius: 8px; }
.icone-claro:hover { background: rgba(255,255,255,.1); color: #fff; }
.principal { min-width: 0; display: flex; flex-direction: column; }
.barra-topo { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 28px; background: rgba(243,245,249,.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha); }
.trilha { font-size: 13px; color: var(--sub); }
.trilha span { margin: 0 8px; opacity: .5; }
.trilha b { color: var(--txt); font-weight: 600; }
.sino { position: relative; background: var(--card); border: 1px solid var(--linha); color: var(--txt); padding: 7px; border-radius: 10px; cursor: pointer; display: grid; place-items: center; }
.sino:hover { background: var(--cinza-bg); }
.sino span:empty { display: none; }
.sino span { position: absolute; top: -6px; right: -6px; background: var(--acento); color: #fff; font-size: 11px; font-weight: 700; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
.ic { display: inline-block; vertical-align: middle; }

main { width: 100%; max-width: 1320px; margin: 0 auto; padding: 22px 28px 110px; }

/* ---------- elementos ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--acento); color: #fff; border: 0; border-radius: 9px; padding: 9px 16px; font: 600 14px Inter, sans-serif; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--acento-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.sec { background: var(--card); color: var(--txt); border: 1px solid var(--linha); }
.btn.sec:hover { background: var(--cinza-bg); }
.btn.perigo { background: var(--vermelho); }
.msg-confirma { font-size: 15px; margin: 4px 0 6px; }
.btn.grande { padding: 13px 22px; font-size: 15px; width: 100%; }
.link { background: none; border: 0; color: var(--acento-txt); cursor: pointer; font: 500 14px Inter, sans-serif; padding: 4px 0; text-decoration: none; }
.voltar { display: inline-block; margin-bottom: 10px; }
.icone { background: none; border: 1px solid transparent; border-radius: 7px; cursor: pointer; padding: 3px 7px; font-size: 14px; color: var(--sub); }
.icone:hover:not(:disabled) { background: var(--cinza-bg); }
.icone:disabled { opacity: .3; cursor: default; }
.icone.perigo:hover { background: var(--vermelho-bg); }
input, select, textarea { font: 14px Inter, sans-serif; color: var(--txt); background: #fff; border: 1px solid var(--linha); border-radius: 8px; padding: 8px 10px; width: 100%; }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(234, 108, 0, .28); border-color: var(--acento-txt); }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--acento-txt); padding: 0; }
input.salvo, select.salvo { border-color: var(--verde); background: var(--verde-bg); transition: background .3s; }
input.erro, select.erro { border-color: var(--vermelho); }
label { display: block; font-size: 13px; color: var(--sub); font-weight: 500; }
label > input, label > select, label > textarea { margin-top: 4px; }
label.check { display: inline-flex; align-items: center; gap: 6px; color: var(--txt); font-weight: 400; }
.form { display: grid; gap: 12px; }
.form h4 { margin: 8px 0 0; }
[hidden] { display: none !important; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-cfg { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; align-items: end; }
.grid-cfg .largo { grid-column: 1 / -1; }
.barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 16px; }
.barra select, .barra input { width: auto; min-width: 140px; }
.acoes { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.acoes.esq { justify-content: flex-start; }
.linha { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.linha.fim { align-items: center; justify-content: flex-start; margin-top: 8px; flex-wrap: wrap; }

.card { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); margin-bottom: 14px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; }
.cards .card { margin: 0; }
a.card { text-decoration: none; display: block; transition: transform .1s, box-shadow .1s; }
a.card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(20,49,95,.08); }
.card.exec { border-left: 4px solid var(--linha); }
.card.s-atrasado { border-left-color: var(--vermelho); }
.card.s-em_andamento { border-left-color: var(--azul); }
.card.s-concluido_prazo { border-left-color: var(--verde); }
.card.s-concluido_atraso { border-left-color: var(--laranja); }
.card .sub { margin-top: 2px; }
.grupo { display: flex; align-items: baseline; gap: 8px; }

.badge { display: inline-block; padding: 2px 8px; border-radius: 99px; font-size: 12px; font-weight: 600; white-space: nowrap; margin-right: 4px; }
.badge.verde { background: var(--verde-bg); color: var(--verde); }
.badge.laranja { background: var(--laranja-bg); color: var(--laranja); }
.badge.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.badge.azul { background: var(--azul-bg); color: var(--azul); }
.badge.cinza { background: var(--cinza-bg); color: var(--cinza); }
b.verde, td.verde, small.verde, span.verde, .verde > b { color: var(--verde); }
b.laranja, td.laranja, small.laranja, span.laranja { color: var(--laranja); }
b.vermelho, td.vermelho, small.vermelho, span.vermelho { color: var(--vermelho); }
.nota-grande { font-size: 22px; font-weight: 700; margin-right: 6px; }
.nota-grande.verde { color: var(--verde); } .nota-grande.laranja { color: var(--laranja); } .nota-grande.vermelho { color: var(--vermelho); }

.progresso { height: 6px; background: var(--cinza-bg); border-radius: 3px; overflow: hidden; margin-top: 10px; }
.progresso > div { height: 100%; background: var(--acento); border-radius: 3px; transition: width .25s; }
.aviso { margin-top: 12px; padding: 9px 12px; border-radius: 8px; background: var(--laranja-bg); color: var(--laranja); font-size: 13px; font-weight: 500; }
.aviso.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }

/* ---------- preenchimento ---------- */
/* o cartão do topo rola junto com a página (no celular o progresso fica no #exec-mini) */
.resumo { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 12px; }
.kpi-mini { background: var(--bg); border-radius: 10px; padding: 10px 12px; }
.kpi-mini span { display: block; font-size: 12px; color: var(--sub); }
.kpi-mini b { font-size: 20px; }
.kpi-mini small { display: block; font-size: 12px; color: var(--sub); }
.kpi-mini .progresso { margin-top: 4px; }
.obs-geral { margin: 12px 0 0; font-size: 14px; }
.secao h2 { display: flex; justify-content: space-between; align-items: baseline; }
.item { background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px; margin-bottom: 10px; transition: border-color .15s, background .15s; }
.item.r-C { border-color: #b7dfc4; }
.item.r-NC { border-color: #f0b8b8; background: #fffafa; }
.item.r-NA { opacity: .75; }
.item.pisca { animation: pisca .5s 3; }
@keyframes pisca { 50% { box-shadow: 0 0 0 3px var(--acento); } }
.item-cab { display: flex; gap: 14px; justify-content: space-between; align-items: flex-start; }
.item-txt { flex: 1; font-weight: 500; }
.tags { margin-top: 6px; }
.orient { font-size: 13px; color: var(--sub); margin-top: 6px; font-weight: 400; }
.opcoes { display: flex; gap: 6px; flex-shrink: 0; }
.op { border: 1px solid var(--linha); background: #fff; border-radius: 8px; padding: 9px 12px; font: 600 13px Inter, sans-serif; cursor: pointer; color: var(--sub); min-width: 58px; }
.op:disabled { cursor: default; }
.op:not(.ativo):disabled { opacity: .45; }
.op-C.ativo { background: var(--verde); border-color: var(--verde); color: #fff; }
.op-NC.ativo { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.op-NA.ativo { background: var(--cinza); border-color: var(--cinza); color: #fff; }
.obs { margin-top: 10px; resize: vertical; }
.obs.falta { border-color: var(--vermelho); background: #fffafa; }
.obs-lida { margin-top: 10px; padding: 8px 10px; background: var(--bg); border-radius: 8px; font-size: 14px; white-space: pre-wrap; }
.fotos { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; align-items: center; }
.fotos:empty { display: none; }
.foto { position: relative; width: 72px; height: 72px; }
.foto img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; cursor: zoom-in; background: var(--cinza-bg); }
.foto .x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--tinta); color: #fff; cursor: pointer; line-height: 1; }
.add-foto { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 14px; border: 1px dashed #c3cbd8; border-radius: 8px; cursor: pointer; color: var(--txt); font-weight: 600; font-size: 13px; }
.add-foto.falta { border-color: var(--vermelho); color: var(--vermelho); background: var(--vermelho-bg); }
.add-foto.enviando { opacity: .6; pointer-events: none; }
.tratativa { margin-top: 10px; padding: 8px 10px; border-radius: 8px; background: var(--laranja-bg); color: var(--laranja); font-size: 13px; }
.tratativa.ok { background: var(--verde-bg); color: var(--verde); }
.tratativa a { color: inherit; font-weight: 600; }
.rodape-exec { position: fixed; left: 248px; right: 0; bottom: 0; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); background: rgba(243,245,249,.92); backdrop-filter: blur(6px); border-top: 1px solid var(--linha); z-index: 15; }
.rodape-exec:empty { display: none; }
/* celular: letra de 16px nos campos evita o zoom automático do iPhone ao digitar,
   e o botão fixo some enquanto o teclado está aberto (senão cobre o campo) */
@media (pointer: coarse) {
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px !important; }
  body.digitando .rodape-exec { display: none; }
}
.rodape-exec > * { max-width: 520px; margin: 0 auto; display: flex; }

/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; margin-bottom: 14px; }
.duas-col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.duas-col > .card { margin-bottom: 14px; min-width: 0; }
.alertas { list-style: none; margin: 0; padding: 0; max-height: 380px; overflow-y: auto; }
.alertas li a { display: flex; gap: 10px; align-items: flex-start; padding: 9px 4px; border-bottom: 1px solid var(--linha); text-decoration: none; font-size: 14px; }
.alertas li:last-child a { border-bottom: 0; }
.alertas li a:hover { background: var(--bg); }
.ponto { width: 9px; height: 9px; border-radius: 50%; margin-top: 6px; flex-shrink: 0; background: var(--cinza); }
.ponto.verde { background: var(--verde); } .ponto.laranja { background: var(--laranja); } .ponto.vermelho { background: var(--vermelho); }
.tabela-wrap { overflow-x: auto; }
.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 12px; color: var(--sub); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 8px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela.clicavel tbody tr { cursor: pointer; }
.tabela.clicavel tbody tr:hover { background: var(--bg); }
.tabela .centro { text-align: center; }
.tabela tr.inativo td { opacity: .5; }
.col-barra { width: 30%; }
.barra-h { height: 8px; background: var(--cinza-bg); border-radius: 4px; overflow: hidden; }
.barra-h > div { height: 100%; border-radius: 4px; background: var(--cinza); }
.barra-h > .verde { background: var(--verde); } .barra-h > .laranja { background: var(--laranja); } .barra-h > .vermelho { background: var(--vermelho); }
.colunas { display: flex; gap: 4px; align-items: flex-end; height: 180px; overflow-x: auto; padding-top: 6px; }
.coluna { flex: 1; min-width: 22px; display: flex; flex-direction: column; align-items: center; height: 100%; }
.coluna small { font-size: 10px; color: var(--sub); margin-top: 4px; }
.col-area { position: relative; flex: 1; width: 100%; background: var(--bg); border-radius: 4px; overflow: hidden; }
.col-nota { position: absolute; bottom: 0; left: 15%; right: 15%; border-radius: 3px 3px 0 0; background: var(--cinza); }
.col-nota.verde { background: var(--verde); } .col-nota.laranja { background: var(--laranja); } .col-nota.vermelho { background: var(--vermelho); }
.col-prazo { position: absolute; left: 0; right: 0; height: 2px; background: var(--azul); }
.legenda { display: flex; gap: 16px; font-size: 12px; color: var(--sub); margin-top: 10px; }
.legenda i { display: inline-block; width: 12px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.leg-nota { background: var(--verde); } .leg-prazo { background: var(--azul); height: 2px !important; }

/* ---------- NC ---------- */
.card.nc { border-left: 4px solid var(--laranja); }
.card.nc.critico { border-left-color: var(--vermelho); }

/* ---------- editor de modelo ---------- */
.titulo-sec { font-weight: 700; font-size: 16px; border-color: transparent; padding-left: 4px; }
.titulo-sec:hover { border-color: var(--linha); }
.mini-acoes { white-space: nowrap; }
.itens-ed td { padding: 5px 4px; }
.itens-ed td:first-child { min-width: 240px; }
.itens-ed td:nth-child(2) { min-width: 180px; }
.peso { width: 74px !important; }
.dias { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.dias label { display: inline-flex; align-items: center; gap: 3px; background: var(--bg); padding: 4px 7px; border-radius: 6px; font-size: 12px; color: var(--txt); cursor: pointer; }
.dias input { width: 14px; height: 14px; }
.lojas-check { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px; background: var(--bg); border-radius: 8px; }
.atr-nova { border-top: 1px solid var(--linha); margin-top: 16px; padding-top: 4px; }
.card.modelo.inativo { opacity: .65; }

/* ---------- modal, toast, login ---------- */
.modal-fundo { position: fixed; inset: 0; background: rgba(20,49,95,.5); display: grid; place-items: center; z-index: 100; padding: 16px; }
.modal { background: var(--card); border-radius: 14px; padding: 20px; width: 100%; max-width: 480px; max-height: 92vh; overflow: auto; }
.modal h3 { font-size: 17px; }
.modal textarea { margin-top: 4px; }
.foto-grande { max-width: 100%; max-height: 75vh; display: block; margin: 0 auto; border-radius: 8px; }
.modal:has(.foto-grande) { max-width: 900px; }
#toasts { position: fixed; bottom: 90px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; width: min(92vw, 420px); }
.toast { background: var(--tinta); color: #fff; padding: 11px 16px; border-radius: 10px; font-size: 14px; box-shadow: 0 6px 20px rgba(0,0,0,.2); transition: opacity .4s, transform .4s; }
.toast.erro { background: var(--vermelho); }
.toast.sai { opacity: 0; transform: translateY(8px); }
.login { min-height: 100vh; display: grid; place-items: center; padding: 20px; }
.login .card { width: 100%; max-width: 380px; padding: 28px; }
.login form { display: grid; gap: 14px; }

/* ---------- tela de entrada (padrão dos sistemas Aiko) ---------- */
.lg-wrap { min-height: 100vh; min-height: 100dvh; display: flex; background: #fff; color: #0f172a; }
.lg-brand { flex: 1.1; position: relative; overflow: hidden; background: linear-gradient(160deg, #173a6c 0%, #12315d 45%, #0c2547 100%); color: #fff; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 42px 52px; }
.lg-brand::before { content: ''; position: absolute; width: 520px; height: 520px; border-radius: 50%; background: radial-gradient(circle, rgba(249,115,22,.32), transparent 65%); top: -160px; right: -140px; filter: blur(10px); }
.lg-brand::after { content: ''; position: absolute; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(circle, rgba(0,180,255,.10), transparent 65%); bottom: -120px; left: -80px; }
.lg-btop { display: flex; align-items: center; gap: 12px; position: relative; z-index: 2; }
.lg-img { height: 50px; width: auto; }
.lg-btop b { display: block; font-size: 24px; font-weight: 900; letter-spacing: .12em; line-height: 1.1; }
.lg-btop small { display: block; font-size: 12px; color: #f97316; font-weight: 600; letter-spacing: .04em; }
.lg-uline { display: block; width: 38px; height: 3px; background: #f97316; border-radius: 3px; margin-top: 6px; }
.lg-mid { position: relative; z-index: 2; max-width: 440px; }
.lg-mid h1 { font-size: 38px; font-weight: 800; line-height: 1.12; letter-spacing: -1px; margin: 0 0 16px; text-wrap: balance; }
.lg-mid h1 span { color: #f97316; }
.lg-mid p { font-size: 15px; color: #94a3b8; line-height: 1.6; margin: 0 0 34px; }
.lg-feat { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.lg-feat .ic { width: 42px; height: 42px; border-radius: 11px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; flex: none; }
.lg-feat .ic svg { width: 20px; height: 20px; stroke: #f97316; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.lg-feat .ft { font-size: 14px; font-weight: 600; }
.lg-feat .fd { font-size: 12.5px; color: #94a3b8; }
.lg-foot { position: relative; z-index: 2; font-size: 12px; color: #64748b; }
.lg-panel { flex: .9; display: flex; align-items: center; justify-content: center; padding: 40px; }
.lg-form { width: 100%; max-width: 380px; }
.lg-form h2 { font-size: 26px; font-weight: 800; letter-spacing: -.5px; margin: 0 0 6px; }
.lg-form .sub { font-size: 14px; color: #64748b; margin-bottom: 30px; }
.lg-fld { margin-bottom: 18px; }
.lg-fld label { display: block; font-size: 12.5px; font-weight: 600; color: #334155; margin-bottom: 7px; }
.lg-inp { position: relative; }
.lg-inp input { width: 100%; height: 48px; margin: 0; border: 1.5px solid #e2e8f0; border-radius: 11px; padding: 0 44px 0 14px; font-size: 15px; font-family: inherit; color: #0f172a; background: #fff; transition: border-color .15s, box-shadow .15s; }
.lg-inp input:focus { outline: none; border-color: #f97316; box-shadow: 0 0 0 4px rgba(249,115,22,.12); }
.lg-inp .ic { position: absolute; right: 14px; top: 14px; color: #94a3b8; background: none; border: none; padding: 0; line-height: 0; }
.lg-inp button.ic { cursor: pointer; }
.lg-inp .ic svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 2; }
.lg-row { display: flex; justify-content: flex-end; margin-bottom: 24px; }
.lg-link { font-size: 13px; color: #ea6c00; font-weight: 600; cursor: pointer; background: none; border: none; font-family: inherit; padding: 0; }
.lg-link:hover { text-decoration: underline; }
.lg-btn { width: 100%; height: 50px; background: #f97316; color: #fff; border: none; border-radius: 11px; font-size: 15px; font-weight: 700; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 8px 20px rgba(249,115,22,.28); transition: background .15s, transform .05s; }
.lg-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.4; }
.lg-btn:hover { background: #ea6a0a; }
.lg-btn:active { transform: translateY(1px); }
.lg-btn:disabled { opacity: .7; cursor: default; }
.lg-btn:focus-visible, .lg-link:focus-visible, .lg-inp button.ic:focus-visible { outline: 2px solid #f97316; outline-offset: 2px; }
.lg-msg { background: #fef2f2; border: 1px solid #fecaca; color: #b91c1c; font-size: 13px; padding: 10px 12px; border-radius: 9px; margin-bottom: 16px; }
.lg-msg.ok { background: #f0fdf4; border-color: #bbf7d0; color: #15803d; }
.lg-marca-movel { display: none; align-items: center; gap: 10px; margin-bottom: 28px; }
.lg-marca-movel img { height: 38px; width: auto; }
.lg-marca-movel b { display: block; font-size: 19px; font-weight: 900; letter-spacing: .12em; line-height: 1.1; }
.lg-marca-movel small { display: block; font-size: 12px; color: #ea6c00; font-weight: 600; }
@media (max-width: 860px) {
  .lg-brand { display: none; }
  .lg-panel { padding: 32px 20px; align-items: flex-start; padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .lg-marca-movel { display: flex; }
}

/* ---------- celular ---------- */
@media (max-width: 760px) {
  main { padding: 14px 12px 110px; }
  h1 { font-size: 20px; }
  .item-cab { flex-direction: column; }
  .opcoes { width: 100%; }
  .op { flex: 1; padding: 11px 6px; }
  .duas-col { grid-template-columns: 1fr; }
  .resumo { gap: 6px; }
  .kpi-mini { padding: 8px; }
  .kpi-mini b { font-size: 17px; }
  .barra select, .barra input { flex: 1; min-width: 0; }
  .col-barra { display: none; }
}


/* ---------- painel ---------- */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; margin-bottom: 14px; }
.kpi { display: flex; gap: 12px; align-items: flex-start; background: var(--card); border: 1px solid var(--linha); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra); text-decoration: none; }
a.kpi:hover { border-color: #c9d2e0; }
.kpi-ic { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; flex-shrink: 0; background: var(--cinza-bg); color: var(--cinza); }
.kpi-ic.verde { background: var(--verde-bg); color: var(--verde); }
.kpi-ic.laranja { background: var(--laranja-bg); color: var(--laranja); }
.kpi-ic.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.kpi-ic.azul { background: var(--azul-bg); color: var(--azul); }
.kpi-l { display: block; font-size: 12px; color: var(--sub); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.kpi b { display: block; font-size: 28px; line-height: 1.15; margin: 2px 0; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi small { font-size: 12px; color: var(--sub); }
.grade-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-bottom: 14px; }
.grade-3 > .card, .grade-2-1 > .card { margin: 0; min-width: 0; }
.grade-2-1 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; margin-bottom: 14px; }
.card h3 { display: flex; align-items: center; gap: 8px; }
.card h3 .ic { color: var(--sub); }

.rosca-box { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.rosca { width: 150px; height: 150px; flex-shrink: 0; }
.rosca .trilho { stroke: var(--cinza-bg); }
.rosca .arco.verde { stroke: var(--verde); } .rosca .arco.laranja { stroke: var(--laranja); }
.rosca .arco.vermelho { stroke: var(--vermelho); } .rosca .arco.cinza { stroke: #c3cad6; }
.r-num { font: 700 17px Inter, sans-serif; fill: var(--txt); text-anchor: middle; }
.r-sub { font: 500 7.5px Inter, sans-serif; fill: var(--sub); text-anchor: middle; }
.legenda-v { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; flex: 1; min-width: 150px; font-size: 13px; }
.legenda-v li { display: flex; align-items: center; gap: 8px; }
.legenda-v span { flex: 1; color: var(--sub); }
.legenda-v b { font-variant-numeric: tabular-nums; }
i.leg { display: inline-block; width: 10px; height: 10px; border-radius: 3px; background: var(--cinza); flex-shrink: 0; }
i.leg.verde { background: var(--verde); } i.leg.laranja { background: var(--laranja); } i.leg.vermelho { background: var(--vermelho); } i.leg.cinza { background: #c3cad6; }
i.leg.s1 { background: var(--s1); } i.leg.s2 { background: var(--s2); }
.rodape-card { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--linha); font-size: 13px; color: var(--sub); }
.rodape-card b { font-size: 18px; }

.aud-topo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.aud-num { font-size: 32px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.aud-num.verde { color: var(--verde); } .aud-num.laranja { color: var(--laranja); } .aud-num.vermelho { color: var(--vermelho); } .aud-num.cinza { color: var(--sub); }
.pill { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; font-size: 12px; font-weight: 600; background: var(--cinza-bg); color: var(--cinza); }
.pill.verde { background: var(--verde-bg); color: var(--verde); } .pill.laranja { background: var(--laranja-bg); color: var(--laranja); } .pill.vermelho { background: var(--vermelho-bg); color: var(--vermelho); }
.auditoria .sub { margin: 6px 0 12px; }
.aud-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.aud-lista li { display: grid; grid-template-columns: 28px minmax(0, 1fr) 70px 48px; align-items: center; gap: 10px; font-size: 13px; }
.aud-ic { width: 28px; height: 28px; border-radius: 8px; background: var(--bg); display: grid; place-items: center; color: var(--sub); }
.aud-txt span { display: block; font-weight: 500; }
.aud-txt small { color: var(--sub); font-size: 12px; }
.aud-lista b { text-align: right; font-variant-numeric: tabular-nums; }

.ranking ol { list-style: none; margin: 0; padding: 0; }
.ranking li { display: grid; grid-template-columns: 24px minmax(0, 1fr) 96px; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--linha); }
.ranking li:last-child { border-bottom: 0; }
.pos { width: 24px; height: 24px; border-radius: 50%; background: var(--bg); display: grid; place-items: center; font-size: 12px; font-weight: 700; color: var(--sub); }
.ranking li:first-child .pos { background: var(--tinta); color: #fff; }
.rk-txt { min-width: 0; }
.rk-txt b { display: block; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-txt small { display: block; font-size: 12px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-val { text-align: right; font-variant-numeric: tabular-nums; }
.rk-val .barra-h { margin-top: 4px; height: 6px; }
.mais { margin: 8px 0 0; }

.legenda { display: flex; gap: 14px; font-size: 12px; color: var(--sub); flex-wrap: wrap; }
.legenda span { display: inline-flex; align-items: center; gap: 6px; }
.linha-graf { position: relative; margin-top: 6px; }
.linha-graf svg { width: 100%; height: auto; display: block; overflow: visible; }
.linha-graf .grade { stroke: var(--linha); stroke-width: 1; }
.linha-graf .eixo { font: 500 11px Inter, sans-serif; fill: var(--sub); }
.linha-graf .serie { fill: none; stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.linha-graf .serie.s1 { stroke: var(--s1); } .linha-graf .serie.s2 { stroke: var(--s2); }
.linha-graf .ponto-s.s1 { fill: var(--s1); } .linha-graf .ponto-s.s2 { fill: var(--s2); }
.linha-graf .ponto-fim { stroke: var(--card); stroke-width: 2; }
.linha-graf .ponto-fim.s1 { fill: var(--s1); } .linha-graf .ponto-fim.s2 { fill: var(--s2); }
.linha-graf .rot-fim { font: 600 12px Inter, sans-serif; fill: var(--txt); }
.linha-graf .cursor-l { stroke: var(--sub); stroke-width: 1; stroke-dasharray: 3 3; }
.linha-graf .alvo { cursor: crosshair; }
.dica-graf { position: absolute; top: 0; z-index: 5; pointer-events: none; background: var(--card); border: 1px solid var(--linha); border-radius: 10px; box-shadow: 0 6px 20px rgba(20,49,95,.12); padding: 8px 10px; font-size: 12px; min-width: 160px; }
.dica-graf div { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.dica-graf div span { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- execução: setor, responsável, comprovação ---------- */
.secao { margin-top: 22px; }
.secao-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.secao-tit h2 { margin: 0 0 4px; }
.secao-tit .sub { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sec-prog { color: var(--sub); }
.resp-sec { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--linha); border-radius: 10px; padding: 4px 4px 4px 10px; color: var(--sub); font-size: 13px; }
.resp-sec select { border: 0; padding: 6px 8px; width: auto; min-width: 170px; font-weight: 600; background: transparent; }
.resp-sec span { color: var(--txt); font-weight: 600; padding: 4px 8px 4px 0; }
.resp-sec.falta { border-color: var(--vermelho); background: var(--vermelho-bg); color: var(--vermelho); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chips:empty { display: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 99px; background: var(--bg); color: var(--sub); font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }
.chip.ok { background: var(--verde-bg); color: var(--verde); }
.item-pe { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex-wrap: wrap; }
.item-pe .fotos { flex: 1; }
.carimbo { display: inline-flex; align-items: center; gap: 4px; margin-top: 10px; font-size: 12px; color: var(--verde); font-weight: 600; background: var(--verde-bg); padding: 3px 9px; border-radius: 99px; white-space: nowrap; }
.item.r-NC .carimbo { color: var(--sub); background: var(--bg); }
.temp { display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.temp-campo { display: flex; align-items: center; border: 1.5px solid var(--linha); border-radius: 10px; background: #fff; padding-right: 10px; }
.temp-campo input { border: 0; width: 84px; font-size: 20px; font-weight: 700; text-align: right; padding: 8px 6px 8px 10px; font-variant-numeric: tabular-nums; background: transparent; }
.temp-campo input:focus { outline: none; }
.temp-campo:focus-within { border-color: var(--acento-txt); }
.temp-campo span { color: var(--sub); font-weight: 600; }
.temp-campo.ok { border-color: var(--verde); background: var(--verde-bg); }
.temp-campo.fora { border-color: var(--vermelho); background: var(--vermelho-bg); }
.temp-info { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.faixa { font-size: 12px; color: var(--sub); }

/* ---------- editor ---------- */
.sec-ed-tit { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
.sec-ed-tit .titulo-sec { width: auto; flex: 1; min-width: 200px; }
.setor-ed { display: inline-flex; align-items: center; gap: 6px; }
.setor-ed select { width: auto; margin: 0; }
.tipo-ed { min-width: 190px; }
.faixa-ed { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 12px; color: var(--sub); }
.faixa-ed label { display: inline-flex; align-items: center; gap: 4px; }
.faixa-ed input { width: 58px; margin: 0; padding: 5px 6px; }
.form .check { margin-top: 6px; }

/* ---------- celular e telas médias ---------- */
@media (max-width: 1000px) {
  .grade-2-1 { grid-template-columns: 1fr; }
}
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .lateral { min-width: 0; }
  .lateral { position: sticky; top: 0; z-index: 25; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px 10px; padding: 10px 12px; }
  .lateral nav { order: 3; flex-basis: 100%; min-width: 0; width: 100%; flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .lateral nav a { white-space: nowrap; padding: 7px 10px; }
  .lateral nav a.ativo { box-shadow: inset 0 -2px 0 var(--acento); }
  .usuario { margin: 0 0 0 auto; padding: 4px; background: none; }
  .u-txt, .avatar { display: none; }
  .barra-topo { position: static; padding: 10px 12px; }
  .rodape-exec { left: 0; }
}
@media (max-width: 760px) {
  .item-cab { flex-direction: column; }
  .temp { width: 100%; justify-content: flex-start; }
  .temp .op-NA { margin-left: auto; flex: 0 0 auto; }
  .secao-cab { align-items: stretch; }
  .resp-sec { width: 100%; }
  .resp-sec select { flex: 1; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi { flex-direction: column; gap: 8px; padding: 12px; }
  .kpi b { font-size: 24px; }
  .grade-3 { grid-template-columns: 1fr; }
  .aud-lista li { grid-template-columns: 28px minmax(0, 1fr) 56px 44px; }
  .rosca { width: 130px; height: 130px; }
}
.secao-ed > .linha { flex-wrap: wrap; }
@media (max-width: 760px) { .sec-ed-tit .titulo-sec { min-width: 0; } .sec-ed-tit { min-width: 0; } }

/* ---------- tela Hoje compacta ---------- */
.titulo-linha { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 14px; }
.titulo-linha h1 { margin: 0; }
.titulo-acoes { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.titulo-acoes select { width: auto; min-width: 170px; }
main { padding-top: 18px; }
.barra-topo { padding-top: 10px; padding-bottom: 10px; }
.abas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 14px; border-bottom: 1px solid var(--linha); }
.abas:empty { display: none; }
.aba { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; border-bottom: 2px solid transparent; margin-bottom: -1px; padding: 8px 12px 10px; font: 600 14px Inter, sans-serif; color: var(--sub); cursor: pointer; }
.aba:hover { color: var(--txt); }
.aba.ativa { color: var(--txt); border-bottom-color: var(--acento-txt); }
.aba-n { min-width: 22px; height: 20px; padding: 0 6px; border-radius: 99px; display: inline-grid; place-items: center; font-size: 12px; background: var(--cinza-bg); color: var(--cinza); font-variant-numeric: tabular-nums; }
.aba-n.vermelho { background: var(--vermelho); color: #fff; }
.aba-n.azul { background: var(--azul-bg); color: var(--azul); }
.aba-n.verde { background: var(--verde-bg); color: var(--verde); }
.card.exec { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; }
.card.exec strong { font-size: 15px; line-height: 1.3; }
.exec-meta { display: flex; gap: 6px 14px; flex-wrap: wrap; margin: 0; }
.exec-meta span { display: inline-flex; align-items: center; gap: 4px; }
.exec-meta .ic { opacity: .7; }
.prog-linha { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.prog-linha .progresso { flex: 1; margin: 0; }
.card.exec .linha.fim { margin: 0; gap: 8px; }
.nota-media { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.nota-media.verde { color: var(--verde); } .nota-media.laranja { color: var(--laranja); } .nota-media.vermelho { color: var(--vermelho); }
.cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
@media (max-width: 760px) {
  .titulo-acoes { width: 100%; }
  .titulo-acoes select { flex: 1; min-width: 0; }
  .abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .aba { white-space: nowrap; padding: 8px 10px 10px; }
}

/* ---------- avaliações ---------- */
.avaliado { font-weight: 500; color: var(--sub); }
.avaliado-cab { display: flex; align-items: center; gap: 6px; font-size: 15px; margin-bottom: 4px; }
.avaliado-cab .ic { color: var(--acento-txt); }
.tend { font-size: 12px; font-weight: 600; white-space: nowrap; }
.tend.sobe { color: var(--verde); } .tend.desce { color: var(--vermelho); } .tend.igual { color: var(--sub); }
.pos.top1 { background: #b8860b; color: #fff; } .pos.top2 { background: #8a8f96; color: #fff; } .pos.top3 { background: #a0623a; color: #fff; }
.ranking-aval td { vertical-align: middle; }
.ranking-aval .col-barra { width: 22%; }
.pessoa-cab { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.pessoa-cab h3 { margin: 0; }
.avatar.grande { width: 44px; height: 44px; font-size: 18px; background: var(--tinta); }
.pessoa-nota { margin-left: auto; text-align: right; }
.pessoa-nota b { display: block; font-size: 24px; font-variant-numeric: tabular-nums; }
.pessoa-nota b.verde { color: var(--verde); } .pessoa-nota b.laranja { color: var(--laranja); } .pessoa-nota b.vermelho { color: var(--vermelho); }
.pessoa-nota small { color: var(--sub); font-size: 12px; }
.aud-lista li.sem-ic { grid-template-columns: minmax(0, 1fr) 90px 52px; }
.melhorar { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.melhorar li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; background: var(--vermelho-bg); border-radius: 8px; font-size: 13px; }
.melhorar b { color: var(--vermelho); white-space: nowrap; font-variant-numeric: tabular-nums; }
.hist-aval { list-style: none; margin: 0; padding: 0; }
.hist-aval li { display: flex; align-items: center; gap: 8px; border-bottom: 1px solid var(--linha); }
.hist-aval li a { flex: 1; border-bottom: 0 !important; }
.pdf-linha { flex-shrink: 0; }
.modal .acoes { flex-wrap: wrap; }
.hist-aval a { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--linha); text-decoration: none; font-size: 14px; font-variant-numeric: tabular-nums; }
.hist-aval a:hover { background: var(--bg); }
.hist-aval b.verde { color: var(--verde); } .hist-aval b.laranja { color: var(--laranja); } .hist-aval b.vermelho { color: var(--vermelho); }
.modal h4 { margin: 16px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--sub); }
.modal:has(.pessoa-cab) { max-width: 560px; }

/* ---------- avaliação: indicadores, numeração, PDF ---------- */
.topo-dir-exec { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.btn.pequeno { padding: 6px 10px; font-size: 13px; }
.indicadores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 12px; }
.indicadores input { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.indicadores input:disabled { background: var(--bg); color: var(--txt); }
.num { color: var(--sub); font-weight: 600; font-variant-numeric: tabular-nums; margin-right: 2px; }
@media (max-width: 760px) {
  .indicadores { grid-template-columns: 1fr 1fr 1fr; gap: 6px; }
  .indicadores label { font-size: 11px; }
  .topo-dir-exec { align-items: flex-end; }
}

/* ---------- ação corretiva ---------- */
.acao-corr { display: grid; grid-template-columns: minmax(0, 1fr) 170px; gap: 10px; margin-top: 10px; padding: 10px; border-radius: 10px; background: var(--bg); }
.acao-corr.falta { background: var(--vermelho-bg); }
.acao-corr label { font-size: 12px; }
.acao-lida { margin-top: 8px; font-size: 13px; padding: 8px 10px; border-radius: 8px; background: var(--azul-bg); color: var(--txt); }
@media (max-width: 760px) { .acao-corr { grid-template-columns: 1fr; } }

/* ---------- celular em primeiro lugar ---------- */
.nav-inferior, .sino-movel, .exec-mini { display: none; }
.btn.perigo-txt { color: var(--vermelho); }
.btn.perigo-txt:hover { background: var(--vermelho-bg); }
.lista-emp { display: grid; }
.emp-linha { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; border-bottom: 1px solid var(--linha); }
.emp-linha:last-child { border-bottom: 0; }
.folha-cab { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.folha-lista { display: grid; gap: 4px; }
.folha-lista a, .folha-lista button { display: flex; align-items: center; gap: 12px; padding: 13px 10px; border-radius: 10px; text-decoration: none; background: none; border: 0; font: 500 15px Inter, sans-serif; color: var(--txt); cursor: pointer; text-align: left; }
.folha-lista a:hover, .folha-lista button:hover, .folha-lista a.ativo { background: var(--bg); }
.folha-lista .ic { color: var(--sub); }

@media (max-width: 900px) {
  .lateral { position: sticky; top: 0; z-index: 25; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; padding: 10px 14px; padding-top: calc(10px + env(safe-area-inset-top, 0px)); gap: 10px; }
  .lateral nav, .lateral .usuario { display: none; }
  .lateral .marca { min-width: 0; }
  .lateral .marca small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sino-movel { display: grid; background: rgba(255,255,255,.1); border-color: transparent; color: #fff; }
  .barra-topo { display: none; }
  main { padding: 16px 14px calc(96px + env(safe-area-inset-bottom, 0px)); }
  .titulo-linha h1 { font-size: 21px; }

  .nav-inferior { display: grid; grid-template-columns: repeat(5, 1fr); position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--card); border-top: 1px solid var(--linha); padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -4px 16px rgba(20,49,95,.06); }
  .nav-inferior a, .nav-inferior button { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 2px; border: 0; background: none;
    text-decoration: none; color: var(--sub); font: 600 11px Inter, sans-serif; cursor: pointer; border-radius: 10px; }
  .nav-inferior a.ativo, .nav-inferior button.ativo { color: var(--acento-txt); }
  .nav-inferior a.ativo .ic, .nav-inferior button.ativo .ic { stroke-width: 2.4; }
  .nav-badge { position: absolute; top: 2px; left: calc(50% + 6px); font-style: normal; background: var(--vermelho); color: #fff; font-size: 10px; font-weight: 700; min-width: 17px; height: 17px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
  .nav-badge:empty { display: none; }

  /* preenchimento: modo foco, sem menus, com progresso fixo no topo */
  body.em-exec .nav-inferior, body.em-exec .lateral { display: none; }
  body.em-exec main { padding-top: 0; padding-bottom: calc(100px + env(safe-area-inset-bottom, 0px)); }
  body.em-exec .titulo-linha, body.em-exec a.voltar { display: none; }
  .exec-mini { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 12px; position: sticky; top: 0; z-index: 20;
    margin: 0 -14px 12px; padding: 10px 14px 0; padding-top: calc(10px + env(safe-area-inset-top, 0px)); background: var(--tinta); color: #fff; }
  .mini-voltar { color: #fff; text-decoration: none; font-size: 22px; line-height: 1; padding: 4px 6px 6px 0; }
  .mini-txt { min-width: 0; display: flex; flex-direction: column; }
  .mini-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .mini-txt span { font-size: 12px; opacity: .75; font-variant-numeric: tabular-nums; }
  .mini-prog { grid-column: 1 / -1; height: 4px; margin: 8px -14px 0; background: rgba(255,255,255,.15); }
  .mini-prog > div { height: 100%; background: var(--acento); transition: width .25s; }
  body.em-exec .rodape-exec { padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }

  /* menus como folha que sobe de baixo */
  .modal-fundo.folha { align-items: end; padding: 0; }
  .modal-fundo.folha .modal { max-width: none; border-radius: 18px 18px 0 0; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
  .modal-fundo { align-items: end; padding: 0; }
  .modal-fundo .modal { max-width: none; border-radius: 18px 18px 0 0; max-height: 90vh; padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }
  .modal-fundo .modal:has(.foto-grande) { border-radius: 0; }
  .item { padding: 14px 12px; }
  .op { min-height: 46px; }
  #toasts { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}