/* ═══ Engefy UI — camada de refinamento (HIG Apple adaptada à marca Engefy) ═══
   Carregada DEPOIS do CSS de cada página. Só toca no que é sistêmico:
   raios, sombras, transições, foco, resposta ao toque, cores de texto/superfície.
   Identidade mantida: Barlow + preto + dourado #FFDA44 (só como ACENTO). */

:root {
  --e-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --e-fast: 150ms;
  --e-base: 250ms;
  --e-shadow-sm: 0 1px 4px rgba(0,0,0,0.06);
  --e-shadow-md: 0 4px 24px rgba(0,0,0,0.08);
  --e-shadow-lg: 0 12px 48px rgba(0,0,0,0.12);
  --e-r-sm: 10px; --e-r-md: 12px; --e-r-lg: 16px; --e-r-xl: 24px;
}
/* superfícies e texto (light): nunca preto puro, cinza-gelo de fundo, separadores suaves */
html[data-theme="light"] {
  --bg: #F5F5F7; --panel: #FFFFFF; --panel2: #F5F5F7;
  --txt: #1D1D1F; --dim: #6E6E73; --border: #E3E3E8;
}
html[data-theme="dark"] {
  --bg: #0A0A0A; --panel: #161618; --panel2: #1F1F22;
  --txt: #F2F2F2; --dim: rgba(255,255,255,0.58); --border: rgba(255,255,255,0.10);
  --e-shadow-sm: 0 1px 4px rgba(0,0,0,0.5); --e-shadow-md: 0 4px 24px rgba(0,0,0,0.5); --e-shadow-lg: 0 12px 48px rgba(0,0,0,0.6);
}

/* tipografia: hierarquia por peso/tamanho; números tabulares */
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
input[type=number], .pct, .badge, .cnt, .kpi, td.num, .v { font-variant-numeric: tabular-nums; }

/* header/barras como "material": translúcido com blur, sem peso */
header {
  background: rgba(20,20,20,0.86) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  border-bottom-width: 1px !important; border-bottom-color: rgba(255,218,68,0.75) !important;
}
#save-bar, #rs-bar {
  -webkit-backdrop-filter: blur(20px) saturate(180%); backdrop-filter: blur(20px) saturate(180%);
  box-shadow: 0 -4px 24px rgba(0,0,0,0.06);
}
html[data-theme="dark"] #save-bar, html[data-theme="dark"] #rs-bar { background: rgba(22,22,24,0.86) !important; }
html[data-theme="light"] #save-bar, html[data-theme="light"] #rs-bar { background: rgba(255,255,255,0.82) !important; }

/* cards: separação por espaço/sombra sutil, borda quase invisível, cantos contínuos */
.card, .ped, .grp, .item, .rs-sec, .obra-card, .mod, .clima-box, .chk, .tv, .fin-grp, .diario-chip, .rg-box, .nf-box {
  border-radius: var(--e-r-lg) !important;
  box-shadow: var(--e-shadow-sm);
  transition: box-shadow var(--e-base) var(--e-ease), transform var(--e-base) var(--e-ease);
}
html[data-theme="light"] .card, html[data-theme="light"] .ped, html[data-theme="light"] .grp,
html[data-theme="light"] .rs-sec, html[data-theme="light"] .obra-card, html[data-theme="light"] .mod, html[data-theme="light"] .tv, html[data-theme="light"] .rg-box {
  border-color: transparent !important; box-shadow: var(--e-shadow-md);
}
.item, .clima-box, .chk, .diario-chip { border-radius: var(--e-r-md) !important; box-shadow: none; }
.obra-card:hover, .mod.ready:hover, .ped-h:hover { box-shadow: var(--e-shadow-lg); }

/* inputs e botões: raio 10–12, foco visível dourado suave, resposta ao toque <100ms */
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], textarea, select {
  border-radius: var(--e-r-sm) !important;
  transition: border-color var(--e-fast) var(--e-ease), box-shadow var(--e-fast) var(--e-ease);
}
input:focus, textarea:focus, select:focus { border-color: rgba(255,218,68,0.9) !important; box-shadow: 0 0 0 3px rgba(255,218,68,0.22) !important; outline: none; }
.btn, .btn-novo, .add-btn, .loc-btn, .btn-mini, .btn-del, .seg button, .st-row button, .opts button, .fq .opts button, .lin .ib, .photo-add, .filtro, .dia-chip {
  border-radius: var(--e-r-sm) !important;
  transition: transform var(--e-fast) var(--e-ease), opacity var(--e-fast) var(--e-ease), background-color var(--e-fast) var(--e-ease), border-color var(--e-fast) var(--e-ease), box-shadow var(--e-fast) var(--e-ease);
  min-height: 40px;
}
.btn:active, .btn-novo:active, .add-btn:active, .loc-btn:active, .btn-mini:active, .seg button:active, .st-row button:active, .opts button:active, .lin .ib:active, .obra-card:active, .mod.ready:active, .filtro:active, .dia-chip:active { transform: scale(0.97); }
.btn:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid rgba(255,218,68,0.5); outline-offset: 2px; }
.btn { box-shadow: var(--e-shadow-sm); }
.btn:disabled { opacity: 0.45; transform: none; }
.badge, .pfx, .tag { border-radius: 999px !important; }
/* dourado só como acento: fundo do botão primário mantém, mas com texto quase-preto e sem gradientes */
.btn:not(.btn-ghost):not(.btn-dark):not(.btn-ok):not(.btn-div) { color: #1D1D1F; }

/* modais/sheets: raio maior + sombra de elevação */
#resumo .rs-wrap, .modal, .sheet { border-radius: var(--e-r-xl); }
#resumo { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }

/* listas: linhas separadas por espaço, não por régua pesada */
.rs-sec .li { border-bottom-color: var(--border); }

/* estados vazio/carregando com respiro */
.loading-note { padding: 48px 16px !important; }

/* movimento: só transform/opacity; respeita quem desativa animação */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }

/* ═══ v2 — refinamentos HIG (hierarquia, agrupamento, toque, controles) ═══ */

/* títulos de página: maiores, peso 700, tracking levemente negativo; meta em cinza secundário */
.obra-tit, .mod-tit, .obra-head h2, .rs-h h2 { font-size: 1.3rem !important; font-weight: 700 !important; letter-spacing: -0.01em; line-height: 1.2; }
.saudacao { font-size: 1.45rem !important; letter-spacing: -0.015em; }
.obra-meta, .obra-head .meta { color: var(--dim) !important; font-size: 0.8rem !important; line-height: 1.45; margin-bottom: 16px !important; }
@media (max-width:640px){ .obra-tit, .mod-tit, .obra-head h2, .rs-h h2 { font-size: 1.15rem !important; } .saudacao { font-size: 1.25rem !important; } }

/* cabeçalhos de seção: rótulo pequeno em caixa alta cinza (dourado deixa de ser cor de texto) */
.card h3, .rs-sec h4, .sec, .rg-box .rg-tit, .cat-h, .grp-h, .ped-h {
  color: var(--txt) !important; font-weight: 600 !important;
}
.card h3, .rs-sec h4, .sec, .rg-box .rg-tit {
  font-size: 0.74rem !important; text-transform: uppercase; letter-spacing: 0.07em; color: var(--dim) !important; margin-bottom: 10px !important;
}
.card h3 .fonte-tag { text-transform: none; letter-spacing: 0; }
.card { padding: 16px !important; margin-bottom: 14px !important; }
@media (max-width:640px){ .card { padding: 12px !important; margin-bottom: 10px !important; } }

/* controles segmentados: trilho cinza + segmento ativo "flutuando" (sem borda) */
.seg, .modo-tog, .filtros { background: var(--panel2) !important; border: none !important; border-radius: 10px !important; padding: 3px !important; gap: 3px !important; overflow: visible !important; }
.seg button, .modo-tog button, .filtros .filtro { border-radius: 8px !important; border: none !important; min-height: 32px !important; font-weight: 500; transition: background-color var(--e-fast) var(--e-ease), color var(--e-fast) var(--e-ease), box-shadow var(--e-fast) var(--e-ease); }
.seg button.on, .modo-tog button.on, .filtros .filtro.on { background: var(--panel) !important; color: var(--txt) !important; font-weight: 600 !important; box-shadow: var(--e-shadow-sm); }
html[data-theme="dark"] .seg button.on, html[data-theme="dark"] .modo-tog button.on, html[data-theme="dark"] .filtros .filtro.on { background: rgba(255,255,255,0.12) !important; }

/* chips e badges: pílula, altura mínima de toque, seleção com dourado só na borda/fundo leve */
.dia-chip, .pt-chip { border-radius: 999px !important; min-height: 32px; display: inline-flex; align-items: center; padding: 4px 13px !important; }
.dia-chip.on, .pt-chip.on { background: rgba(255,218,68,0.18) !important; border-color: rgba(255,218,68,0.9) !important; color: var(--txt) !important; }

/* botões: 44px de altura, peso 600, primário dourado com texto quase-preto */
.btn, .btn-novo, .add-btn { min-height: 44px; font-weight: 600 !important; letter-spacing: 0.01em; }
.btn-ghost { border-color: var(--border) !important; color: var(--txt) !important; }
.add-btn { border-style: dashed; }
#theme-btn { min-width: 36px; min-height: 36px; border-radius: 10px !important; }
.btn-del, .photo-del, .lin .ib { transition: transform var(--e-fast) var(--e-ease), background-color var(--e-fast) var(--e-ease); }

/* campos: 44px, fundo cinza-gelo dentro do card branco, rótulo pequeno acima */
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], select { min-height: 42px; }
label.small { color: var(--dim) !important; font-weight: 500; letter-spacing: 0.06em; }
.lin select, .lin input[type=text], .lin .pct input { min-height: 38px; }

/* itens de lista: cartões leves separados por espaço; toque com resposta */
.item, .obra-card, .ped, .grp, .tv { transition: transform var(--e-fast) var(--e-ease), box-shadow var(--e-base) var(--e-ease); }
.item:active, .obra-card:active { transform: scale(0.985); }
.grp-h, .ped-h, .cat-h, .fin-h { min-height: 48px; }

/* alertas e avisos: fundo tingido, sem borda dura */
.alerta, .rs-warn, .rg-item.urgente, .loc-warn { border-color: transparent !important; border-radius: var(--e-r-md) !important; }
.alerta.atraso, .rs-warn { background: rgba(220,38,38,0.10) !important; }
.alerta.prazo { background: rgba(217,119,6,0.12) !important; }
.diario-chip, .fonte-tag { font-weight: 400; }

/* progresso: trilho fino arredondado, preenchimento dourado */
#prog-bar, .prog-bar { height: 6px !important; border-radius: 999px !important; overflow: hidden; background: var(--panel2) !important; border: none !important; }
#prog-fill, .prog-fill { border-radius: 999px !important; background: var(--gold, #FFDA44) !important; transition: width var(--e-base) var(--e-ease); }

/* fotos: cantos 10px, botão de excluir com contraste */
.photo-thumb, .photo-add { border-radius: 10px !important; }
.photo-add { border-width: 1.5px; }
.photo-del { background: rgba(0,0,0,0.6) !important; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }

/* barras fixas inferiores: safe-area + respiro */
#save-bar, #rs-bar { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)) !important; border-top: 1px solid var(--border) !important; }

/* separadores em listas de resumo: hairline contínua (não tracejada) */
.rs-sec .li { border-bottom-style: solid !important; padding: 8px 0 !important; }

/* header: logo respirando, itens alinhados verticalmente */
header { min-height: 52px; }
header a.menu { display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; border-radius: 8px; }
header a.menu:active { background: rgba(255,255,255,0.08); }

/* ═══ v3 — tipografia Apple (SF Pro / system-ui) com a escala do HIG + refinamentos de tela ═══
   Escala: Large Title 34 · Title1 28 · Title2 22 · Title3 20 · Headline 17/600 · Body 17 · Callout 16 · Subhead 15 · Footnote 13 · Caption 12 */
:root { --f-lt:34px; --f-t1:28px; --f-t2:22px; --f-t3:20px; --f-hl:17px; --f-body:17px; --f-callout:16px; --f-sub:15px; --f-fn:13px; --f-cap:12px; }
body, input, select, textarea, button { font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', 'Helvetica Neue', 'Segoe UI', Roboto, system-ui, sans-serif; }
body { font-size: var(--f-sub); line-height: 1.4; letter-spacing: -0.01em; -webkit-font-smoothing: antialiased; }
/* títulos: Title2 (22) bold, tracking apertado como o SF Display; saudação = Title1 (28) */
.obra-tit, .mod-tit, .obra-head h2, .rs-h h2, .login h2 { font-size: var(--f-t2) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; line-height: 1.2; }
.saudacao { font-size: var(--f-t1) !important; font-weight: 700 !important; letter-spacing: -0.022em !important; line-height: 1.15; }
@media (max-width:640px){ .obra-tit, .mod-tit, .obra-head h2, .rs-h h2 { font-size: var(--f-t3) !important; } .saudacao { font-size: var(--f-t2) !important; } }
/* cabeçalhos de seção: Footnote 13 caixa alta, secundário (padrão de grouped list do iOS) */
.card h3, .rs-sec h4, .sec, .rg-box .rg-tit { font-size: var(--f-fn) !important; font-weight: 400 !important; letter-spacing: 0.04em; text-transform: uppercase; color: var(--dim) !important; }
label.small { font-size: var(--f-cap) !important; font-weight: 400; letter-spacing: 0.03em; }
/* headline (17/600) nos títulos de item; body/subhead no conteúdo; footnote/caption no meta */
.obra-card .tit, .item .tit, .rg-obra, .grp-h, .ped-h, .cat-h, .tv .nm, .clima-box .per { font-size: var(--f-hl) !important; font-weight: 600 !important; letter-spacing: -0.015em; }
.mod .nm { font-size: var(--f-sub) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.obra-card .meta, .item .meta, .obra-meta, .obra-head .meta, .legenda, .diario-chip, .rs-note, .loading-note, .fonte-tag, .item.compact .sub, .tv .meta { font-size: var(--f-fn) !important; font-weight: 400; letter-spacing: -0.005em; }
.mod .st, .badge, .obra-card .papel, .item .go, .dia-chip, .pt-chip { font-size: var(--f-cap) !important; font-weight: 600 !important; letter-spacing: 0; }
.rg-item, .rs-sec .li, .resumo-ficha, .it, .chk-row, .li-item { font-size: var(--f-sub) !important; }
/* controles: Body 17 em campos (evita zoom no iOS), Subhead 15 nos compactos; botão = Headline 17/600 */
input[type=text], input[type=number], input[type=date], input[type=time], input[type=email], input[type=password], textarea, select { font-size: var(--f-body) !important; }
.lin select, .lin input[type=text], .lin .pct input, .item input, .item select, .row .mini input, .topo-grid input { font-size: var(--f-sub) !important; }
.btn, .btn-novo { font-size: var(--f-hl) !important; font-weight: 600 !important; letter-spacing: -0.01em; }
.add-btn, .btn-mini, .loc-btn { font-size: var(--f-sub) !important; font-weight: 500 !important; }
.seg button, .modo-tog button, .filtros .filtro { font-size: var(--f-fn) !important; font-weight: 500 !important; }
.seg button.on, .modo-tog button.on, .filtros .filtro.on { font-weight: 600 !important; }
header a.menu, header .sub, header .user { font-size: var(--f-sub) !important; }
header a.menu { font-weight: 500 !important; }

/* menu de módulos: ícone maior, respiro, "em breve" bem discreto */
.mods { gap: 12px !important; }
.mod { padding: 18px 16px !important; min-height: 118px !important; gap: 8px !important; }
.mod .ic { margin-bottom: 2px; }
.mod.soon { opacity: 0.45 !important; box-shadow: none !important; }
.mod.ready .st { color: var(--goldtx, #9c7a00) !important; }
html[data-theme="dark"] .mod.ready .st { color: #FFDA44 !important; }

/* "Seu dia" / "Hoje nesta obra": linhas com 40px e separadores hairline */
.rg-item { min-height: 40px; display: flex; align-items: center; gap: 8px; padding: 6px 0 6px 12px !important; border-bottom: 1px solid var(--border); }
.rg-item:last-child { border-bottom: none; }
.rg-obra { margin-top: 12px !important; padding-bottom: 4px; }

/* aviso do App Diário (RDO): vira nota de rodapé, não bloco */
.diario-chip { background: transparent !important; border: none !important; padding: 0 2px !important; }

/* barra de ação: secundário preenchido cinza, primário dourado — um só primário por tela */
#save-bar .btn-ghost, #rs-bar .btn-ghost { background: var(--panel2) !important; border-color: transparent !important; }

/* header: botão de tema circular 36px */
#theme-btn { border-radius: 999px !important; width: 36px; padding: 0 !important; display: inline-flex; align-items: center; justify-content: center; }

/* ═══ v5 — mobile: escala Dynamic Type "Small" da Apple (telas operacionais densas) ═══
   Body 15 · Headline 15/600 · Subhead 13 · Footnote 12 · Caption 11 · Title2 20 · Title1 24. Campos ficam em 16px (abaixo o iOS dá zoom ao focar). */
@media (max-width:640px){
  :root { --f-lt:30px; --f-t1:24px; --f-t2:20px; --f-t3:18px; --f-hl:15px; --f-body:16px; --f-callout:15px; --f-sub:13px; --f-fn:12px; --f-cap:11px; }
  body { font-size: var(--f-sub); }
  .obra-tit, .mod-tit, .obra-head h2, .rs-h h2 { font-size: var(--f-t2) !important; }
  .saudacao { font-size: var(--f-t1) !important; }
  .btn, .btn-novo { font-size: var(--f-hl) !important; min-height: 44px; }
  .mod .nm { font-size: 14px !important; }
  .mod { min-height: 104px !important; padding: 14px 12px !important; }
  .card { padding: 12px !important; }
  .card h3, .rs-sec h4, .sec, .rg-box .rg-tit { font-size: 11px !important; letter-spacing: 0.06em; }
  .lin select, .lin input[type=text], .lin .pct input, .item input, .item select, .topo-grid input { font-size: 16px !important; min-height: 36px; padding-top: 6px; padding-bottom: 6px; }
  .rg-item { min-height: 36px; }
  header a.menu, header .sub, header .user { font-size: var(--f-sub) !important; }
  /* clima: dois segmentados por período cabem na largura (quebram linha se precisar) */
  .clima-box { flex-wrap: wrap; row-gap: 6px; }
  .clima-box .seg { flex: 1 1 140px; min-width: 0; }
  .clima-box .seg button, .seg button, .modo-tog button, .filtros .filtro { font-size: 11.5px !important; min-height: 30px !important; padding: 5px 2px !important; }
  .dia-chip, .pt-chip { min-height: 30px; padding: 3px 11px !important; }
}

@media (max-width:480px){ header .sub { display:none !important; } header .user { max-width:38%; } }

/* ═══ v8 — skeleton nos estados de carregamento (classe .skel marcada pelo engefy-icons.js) ═══ */
@keyframes eshimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
.loading-note.skel { color: transparent !important; position: relative; min-height: 140px; }
.loading-note.skel::before, .loading-note.skel::after { content:""; display:block; max-width:560px; margin:0 auto 12px; border-radius:14px; height:64px; background:linear-gradient(90deg, var(--panel2) 25%, var(--panel) 50%, var(--panel2) 75%); background-size:200% 100%; animation:eshimmer 1.4s linear infinite; }
.loading-note.skel::after { height:44px; opacity:.7; }
@media (prefers-reduced-motion: reduce){ .loading-note.skel::before, .loading-note.skel::after { animation:none; } }

/* um só botão primário por barra: PDF/WhatsApp/secundários ficam neutros (cinza), dourado só na ação principal */
.btn-dark, #btn-pdf.btn, .btn-pdf, .btn.sec { background: var(--panel2) !important; color: var(--txt) !important; border: 1px solid var(--border) !important; }
html[data-theme="dark"] .btn-dark, html[data-theme="dark"] #btn-pdf.btn, html[data-theme="dark"] .btn-pdf { background: #1F1F22 !important; color: #F2F2F2 !important; }