/* Diário de Obra — app de campo. Visual dos mockups do hugo (17/09/2026): cabeçalho azul-marinho,
   fundo claro, cartões brancos arredondados, atalhos coloridos, barra de abas inferior. Celular e tablet. */
:root {
  --navy: #0f2f5c; --navy-2: #1a3f7a; --blue: #1d5fd1; --blue-d: #174cab; --blue-l: #e8f0fd;
  --bg: #f3f5f9; --card: #fff; --line: #e3e8f0; --text: #1b2540; --muted: #6b7a90;
  --ok: #16a34a; --ok-l: #dcfce7; --warn: #d97706; --warn-l: #fef3c7; --err: #dc2626; --err-l: #fee2e2;
  --green: #1e9e5a; --amber: #f2a20c;
  --r: 14px; --tab-h: 72px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }   /* o atributo hidden vence display:flex das classes */
/* Comportamento de aplicativo, não de página: sem zoom por pinça/toque duplo, sem "quicar" ao rolar,
   sem seleção de texto acidental na interface (campos e descrições continuam selecionáveis). */
html { touch-action: pan-x pan-y; -webkit-text-size-adjust: 100%; overscroll-behavior: none; }
html, body { margin: 0; min-height: 100%; }
body { touch-action: manipulation; overscroll-behavior-y: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
input, textarea, select, .pre, .item .d, p { -webkit-user-select: text; user-select: text; }
button, .btn, .tab, .pill, .item, .fab, .tile, .ritem, .sel-card { touch-action: manipulation; }
body { font: 16px/1.45 -apple-system, "Segoe UI", Roboto, Inter, Helvetica, Arial, sans-serif; color: var(--text); background: var(--bg); padding-bottom: calc(var(--tab-h) + env(safe-area-inset-bottom)); }
body.no-tabs { padding-bottom: 0; }
body.drawer-open { overflow: hidden; }
a { color: var(--blue); text-decoration: none; }
h2 { font-size: 17px; font-weight: 700; margin: 18px 0 10px; display: flex; justify-content: space-between; align-items: center; }
h2 .link { font-size: 14px; font-weight: 500; }
h2.sec { display: block; margin: 14px 0 8px; }
.muted { color: var(--muted); } .small { font-size: 14px; } .pre { white-space: pre-wrap; }
svg { flex-shrink: 0; }

/* cabeçalho */
.top { position: sticky; top: 0; z-index: 5; background: var(--navy); color: #fff; padding: calc(env(safe-area-inset-top) + 8px) 12px 10px; }
.top-row { display: flex; align-items: center; gap: 8px; min-height: 44px; }
.top-title { flex: 1; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-sub { color: #b8c4da; font-size: 13.5px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-mid { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; font-weight: 700; }
.brand-mid svg { width: 30px; height: 30px; }
.icon-btn { position: relative; width: 44px; height: 44px; border: 0; border-radius: 12px; background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.icon-btn svg { width: 26px; height: 26px; }
.icon-btn.primary { background: var(--blue); }
.icon-btn.ghost { pointer-events: none; }
.bell-badge { position: absolute; top: 4px; right: 4px; min-width: 18px; height: 18px; border-radius: 9px; background: var(--err); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; padding: 0 5px; text-align: center; }
.top-search { margin-top: 10px; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.12); border-radius: 12px; padding: 11px 14px; color: #dbe3f2; }
.top-search svg { width: 20px; height: 20px; }
.top-search input { background: none; border: 0; color: #fff; padding: 0; font: inherit; font-size: 16px; flex: 1; }
.top-search input::placeholder { color: #b8c4da; }
.netbar { margin: 8px -12px -10px; padding: 7px 14px; background: var(--warn); color: #fff; font-size: 13px; font-weight: 600; text-align: center; }

/* menu lateral */
.drawer { position: fixed; inset: 0; z-index: 40; }
.drawer-bg { position: absolute; inset: 0; background: rgba(15,34,68,.55); }
.drawer-panel { position: absolute; top: 0; bottom: 0; left: 0; width: min(84vw, 340px); background: var(--card); display: flex; flex-direction: column; box-shadow: 8px 0 30px rgba(0,0,0,.25); animation: slide .2s ease-out; }
@keyframes slide { from { transform: translateX(-100%); } to { transform: none; } }
.drawer-head { background: var(--navy); color: #fff; padding: calc(env(safe-area-inset-top) + 18px) 16px 18px; display: flex; align-items: center; gap: 12px; }
.drawer-head .n { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-head .e { color: #b8c4da; font-size: 13.5px; }
.drawer-head .icon-btn { margin-left: auto; }
.drawer-list { flex: 1; overflow-y: auto; padding: 8px 0; }
.drawer-item { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 18px; border: 0; background: none; font: inherit; font-size: 16px; font-weight: 600; color: var(--text); text-align: left; }
.drawer-item svg { width: 24px; height: 24px; color: var(--navy); } .drawer-item span { flex: 1; } .drawer-item svg:last-child { color: #b0bacb; width: 20px; }
.drawer-item.logout { color: var(--err); border-top: 1px solid var(--line); } .drawer-item.logout svg { color: var(--err); }
.drawer-ver { color: var(--muted); font-size: 12px; text-align: center; padding: 6px 0 calc(env(safe-area-inset-bottom) + 10px); }

/* conteúdo */
.view { padding: 14px 16px 24px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; margin-bottom: 12px; }
.card.sel { border-color: var(--blue); background: var(--blue-l); }

/* login (tela 1) — CSS do HTML do hugo (login-app-diario-obra.html), com prefixo lg- para não colidir com o app */
.login { margin: -14px -16px 0; min-height: 100vh; min-height: 100dvh; background: #fff; position: relative; overflow: hidden; --lgblue: #0756a0; }
.lg-hero { height: 310px; position: relative; overflow: hidden; background: linear-gradient(180deg, rgba(2,27,50,.15), rgba(2,27,50,.85)), url(/app/img/obra-login.jpg) center/cover no-repeat; }
.lg-hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(3,55,101,.55), transparent 60%); }
.lg-brand { position: relative; z-index: 2; padding: calc(env(safe-area-inset-top) + 53px) 24px 0; display: flex; align-items: center; gap: 12px; color: #fff; }
.lg-logo { width: 48px; height: 48px; border-radius: 13px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.3); display: grid; place-items: center; backdrop-filter: blur(8px); }
.lg-logo svg { width: 29px; height: 29px; }
.lg-brand strong { font-size: 20px; letter-spacing: -.4px; }
.lg-copy { position: absolute; z-index: 2; left: 24px; right: 24px; bottom: 32px; color: #fff; }
.lg-copy h1 { font-size: 31px; line-height: 1.08; letter-spacing: -1px; margin: 0 0 8px; font-weight: 700; }
.lg-copy p { font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.84); margin: 0; }
.lg-card { position: relative; margin-top: -25px; min-height: calc(100vh - 285px); background: #fff; border-radius: 24px 24px 0 0; padding: 30px 22px calc(env(safe-area-inset-bottom) + 25px); z-index: 4; box-shadow: 0 -8px 30px rgba(0,0,0,.10); }
.lg-title { margin-bottom: 25px; }
.lg-title h2 { font-size: 24px; color: #172033; letter-spacing: -.5px; margin: 0 0 6px; font-weight: 700; }
.lg-title p { font-size: 13px; color: #718096; line-height: 1.45; margin: 0; }
.lg-field { margin-bottom: 17px; }
.lg-field label { display: block; font-size: 12px; font-weight: 700; color: #334155; margin: 0 0 7px; }
.lg-input { height: 51px; border: 1px solid #dfe7ef; border-radius: 11px; display: flex; align-items: center; background: #fff; transition: .2s; }
.lg-input:focus-within { border-color: var(--lgblue); box-shadow: 0 0 0 3px rgba(7,86,160,.09); }
.lg-input > svg { width: 19px; height: 19px; margin: 0 12px; color: #9aa8b8; flex: none; }
.lg-input input { width: 100%; height: 100%; border: 0; outline: 0; background: transparent; font: inherit; font-size: 14px; color: #172033; padding: 0 12px 0 0; border-radius: 0; }
.lg-input input:focus { outline: 0; border: 0; }
.lg-input input::placeholder { color: #a5b1bf; }
.lg-eye { border: 0; background: none; width: 43px; height: 100%; display: grid; place-items: center; color: #8fa0b1; flex: none; padding: 0; }
.lg-eye svg { width: 18px; height: 18px; }
.lg-options { display: flex; align-items: center; justify-content: space-between; margin: 5px 0 22px; font-size: 12px; }
.lg-remember { display: flex; align-items: center; gap: 7px; color: #64748b; margin: 0; font-weight: 400; font-size: 12px; }
.lg-remember input { width: 16px; height: 16px; accent-color: var(--lgblue); margin: 0; }
.lg-forgot { color: var(--lgblue); font-weight: 700; text-decoration: none; }
.lg-submit { width: 100%; height: 52px; border: 0; border-radius: 11px; background: linear-gradient(135deg, #0756a0, #0875cf); color: #fff; font: inherit; font-size: 14px; font-weight: 750; box-shadow: 0 7px 16px rgba(7,86,160,.22); }
.lg-submit:active { transform: scale(.99); } .lg-submit[disabled] { opacity: .6; }
.lg-secure { margin: 19px 0 0; display: flex; justify-content: center; align-items: center; gap: 6px; color: #9aa6b5; font-size: 11px; }
.lg-secure svg { width: 14px; height: 14px; }
.lg-footer { text-align: center; margin-top: 27px; color: #a0acba; font-size: 10px; line-height: 1.6; }
.login-install { font-size: 11px; } .login-install a { color: var(--lgblue); font-weight: 700; }
.desktop-warn { position: fixed; left: 0; right: 0; top: 0; z-index: 70; background: var(--err); color: #fff; padding: 12px 16px; font-size: 15px; text-align: center; font-weight: 600; }

/* tela inicial (3) */
.hello { display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.avatar-ic { width: 56px; height: 56px; border-radius: 50%; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.avatar-ic svg { width: 34px; height: 34px; }
.hello .n { font-size: 20px; font-weight: 700; } .hello .r { color: var(--muted); font-size: 14px; }
.info-card { display: flex; align-items: center; gap: 12px; background: var(--blue-l); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; color: inherit; }
.info-card > svg { width: 30px; height: 30px; color: var(--navy); } .info-card > svg:last-child { width: 22px; height: 22px; color: var(--muted); }
.info-card div { flex: 1; min-width: 0; } .info-card span { display: block; font-size: 12.5px; color: var(--muted); } .info-card b { display: block; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.info-card em, .trocar { font-style: normal; color: var(--blue); font-weight: 600; font-size: 14px; }
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 14px 0 6px; }
.tile { border: 0; border-radius: 16px; padding: 18px 12px 16px; color: #fff; text-align: center; font: inherit; display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 140px; justify-content: center; }
.tile svg { width: 40px; height: 40px; } .tile b { font-size: 16px; font-weight: 700; } .tile span { font-size: 13px; opacity: .9; line-height: 1.3; }
.tile.navy { background: var(--navy); } .tile.blue { background: var(--blue); } .tile.green { background: var(--green); } .tile.amber { background: var(--amber); }
.tile:active { filter: brightness(.92); }

/* lista de registros com miniatura (3, 8) */
.rlist { display: flex; flex-direction: column; gap: 10px; }
.ritem { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px 10px 10px; color: inherit; }
.ritem > svg { width: 22px; height: 22px; color: #b0bacb; }
.rthumb { width: 64px; height: 64px; border-radius: 10px; background: var(--blue-l); color: var(--blue); display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; }
.rthumb svg { width: 28px; height: 28px; } .rthumb img { width: 100%; height: 100%; object-fit: cover; }
.ritem .bd { flex: 1; min-width: 0; }
.ritem .t { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritem .d { display: flex; align-items: center; gap: 5px; color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.ritem .d svg { width: 15px; height: 15px; } .ritem .d span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ritem .d.time { color: var(--navy); font-weight: 600; }
.ritem .st svg { width: 24px; height: 24px; } .ritem .st.ok { color: var(--ok); } .ritem .st.wait { color: var(--warn); } .ritem .st.err { color: var(--err); }

/* seleção de empresa/obra (2, 12) */
.sel-card { display: flex; align-items: center; gap: 12px; background: var(--card); border: 1.5px solid var(--line); border-radius: 12px; padding: 12px; margin-bottom: 10px; }
.sel-card.on { border-color: var(--blue); background: var(--blue-l); }
.sel-card .ic { width: 52px; height: 52px; border-radius: 10px; background: var(--blue-l); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; overflow: hidden; }
.sel-card.on .ic { background: var(--navy); color: #fff; } .sel-card .ic svg { width: 28px; height: 28px; }
.sel-card .bd { flex: 1; min-width: 0; } .sel-card b { display: block; font-size: 15.5px; } .sel-card span { display: block; color: var(--muted); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sel-card .chk { color: var(--blue); } .sel-card .chk svg { width: 26px; height: 26px; }
.sel-card .badge { flex-shrink: 0; }

/* novo registro em passos (4–7) */
.stepper { display: flex; justify-content: space-between; margin: 0 4px 16px; position: relative; }
.stepper::before { content: ""; position: absolute; left: 12%; right: 12%; top: 16px; height: 2px; background: var(--line); }
.stepper.s3::before { left: 16%; right: 16%; }
.stepper.s2::before { left: 25%; right: 25%; }
.stp { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; color: #b0bacb; font-size: 12.5px; font-weight: 600; }
.stp i { width: 32px; height: 32px; border-radius: 50%; background: var(--card); border: 2px solid var(--line); display: flex; align-items: center; justify-content: center; font-style: normal; font-weight: 800; font-size: 14px; }
.stp.on { color: var(--navy); } .stp.on i { background: var(--navy); border-color: var(--navy); color: #fff; }
.stp.done { color: var(--blue); } .stp.done i { background: var(--blue); border-color: var(--blue); color: #fff; }
.dt { display: flex; gap: 10px; }
.dt-box { flex: 1; display: flex; align-items: center; gap: 8px; border: 1px solid #d6dbe6; border-radius: 12px; padding: 13px 14px; font-size: 15.5px; background: var(--card); }
.dt-box svg { width: 20px; height: 20px; color: var(--navy); } .dt-box input { border: 0; padding: 0; font-size: 15px; flex: 1; min-width: 0; }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pth { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e6e9f0; }
.pth img { width: 100%; height: 100%; object-fit: cover; }
.pth .rm { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: 0; background: rgba(15,34,68,.85); color: #fff; display: flex; align-items: center; justify-content: center; } .pth .rm svg { width: 16px; height: 16px; }
.padd { position: relative; aspect-ratio: 1; border: 2px dashed var(--blue); border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--blue); font-weight: 600; font-size: 14px; background: var(--card); overflow: hidden; }
.padd svg { width: 34px; height: 34px; } .padd input { position: absolute; inset: 0; opacity: 0; font-size: 0; width: 100%; height: 100%; }
.map-box { height: 240px; background: #dfe6ee; position: relative; }
.map-off { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--muted); font-size: 14px; padding: 20px; }
.loc-box { display: flex; gap: 12px; padding: 14px 16px; font-size: 15px; line-height: 1.6; }
.loc-box > svg { width: 26px; height: 26px; color: var(--green); margin-top: 4px; }
.gps-ok { color: var(--ok); font-weight: 600; } .gps-low { color: var(--warn); font-weight: 600; } .gps-none { color: var(--err); font-weight: 600; }
.sum-row { display: flex; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); }
.sum-row:last-child { border: 0; }
.sum-row .ic { width: 36px; height: 36px; border-radius: 10px; background: var(--blue-l); color: var(--navy); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .sum-row .ic svg { width: 20px; height: 20px; }
.sum-row span { display: block; color: var(--muted); font-size: 13px; } .sum-row b { font-weight: 600; font-size: 15px; } .sum-row small { color: var(--muted); font-weight: 400; }

/* navegação de data (8, 13) */
.datenav { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 6px; margin-bottom: 12px; }
.datenav button { width: 40px; height: 40px; border: 0; background: none; color: var(--navy); display: flex; align-items: center; justify-content: center; border-radius: 10px; } .datenav button svg { width: 22px; height: 22px; } .datenav button[disabled] { opacity: .3; }
.datenav .cur { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; font-weight: 700; font-size: 15px; } .datenav .cur svg { width: 18px; height: 18px; color: var(--navy); }

/* detalhe do registro (15) */
.detail-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.dhero { height: 200px; background: var(--blue-l); color: var(--blue); display: flex; align-items: center; justify-content: center; } .dhero svg { width: 48px; height: 48px; } .dhero img { width: 100%; height: 100%; object-fit: cover; }
.dbody { padding: 14px 16px 16px; }
.dtitle { font-size: 19px; font-weight: 800; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.meta-line { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; padding: 3px 0; } .meta-line svg { width: 17px; height: 17px; color: var(--navy); }
.strip { display: flex; gap: 8px; overflow-x: auto; margin: 12px 0 4px; scrollbar-width: none; } .strip::-webkit-scrollbar { display: none; }
.strip .th { width: 64px; height: 64px; flex: 0 0 auto; border-radius: 10px; overflow: hidden; background: #e6e9f0; } .strip img { width: 100%; height: 100%; object-fit: cover; }
.sec-lbl { font-weight: 700; margin: 12px 0 4px; }

/* mapa (9) */
.map-full { position: relative; height: 52vh; min-height: 300px; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); margin-bottom: 12px; }
.map-full #map { width: 100%; height: 100%; }
.map-btn { position: absolute; right: 10px; bottom: 96px; z-index: 500; width: 42px; height: 42px; border-radius: 50%; border: 0; background: var(--card); color: var(--blue); box-shadow: 0 2px 8px rgba(0,0,0,.25); display: flex; align-items: center; justify-content: center; } .map-btn svg { width: 24px; height: 24px; }
.legend .lg { display: flex; align-items: center; gap: 10px; padding: 7px 0; font-size: 15px; } .legend .lg + .lg { border-top: 1px solid var(--line); }
.lg i { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; } .lg span { flex: 1; } .lg b { color: var(--muted); font-weight: 600; }
.leaflet-container { font: inherit; }

/* galeria (10) */
.filters { display: flex; gap: 10px; margin-bottom: 12px; } .filters .dt-box { flex: 1; padding: 9px 12px; } .filters select { flex: 1; padding: 10px 12px; font-size: 15px; border-radius: 12px; }
.gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.g { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: #e6e9f0; display: block; }
.g img { width: 100%; height: 100%; object-fit: cover; }
.g .cap { position: absolute; left: 8px; bottom: 8px; background: rgba(15,34,68,.75); color: #fff; font-size: 12px; padding: 3px 8px; border-radius: 8px; }
.g .gi { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.9); color: var(--navy); display: flex; align-items: center; justify-content: center; } .g .gi svg { width: 16px; height: 16px; }
.g .st { position: absolute; left: 8px; bottom: 8px; }

/* diário (13) */
.period { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* sincronização (11) */
.sync-hero { text-align: center; padding: 18px 0 14px; }
.cloud { width: 96px; height: 96px; margin: 0 auto 12px; border-radius: 50%; background: var(--blue-l); color: var(--blue); display: flex; align-items: center; justify-content: center; } .cloud svg { width: 56px; height: 56px; }
.sync-hero .t { font-size: 20px; font-weight: 700; color: var(--navy); }
.sbar { padding: 8px 0; } .sbar .sl { display: flex; justify-content: space-between; font-weight: 600; font-size: 15px; margin-bottom: 6px; } .sbar .sl span { color: var(--muted); font-weight: 600; }
.bar { height: 8px; background: #e6e9f0; border-radius: 4px; overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--navy); border-radius: 4px; transition: width .3s; } .bar i.blue { background: var(--blue); } .bar i.green { background: var(--green); }
.conn { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 12px; font-size: 14px; color: var(--muted); }
.conn i { width: 10px; height: 10px; border-radius: 50%; background: var(--ok); } .conn i.off { background: var(--warn); }

/* listas genéricas */
.list { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.item { display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px; border-bottom: 1px solid var(--line); color: inherit; }
.item:last-child { border-bottom: 0; }
.item .ic { width: 44px; height: 44px; border-radius: 12px; background: var(--blue-l); color: var(--blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.item .ic svg { width: 24px; height: 24px; }
.item .ic.plain { background: none; color: var(--navy); width: 32px; }
.item .ic.ok { background: var(--ok-l); color: var(--ok); } .item .ic.warn { background: var(--warn-l); color: var(--warn); } .item .ic.err { background: var(--err-l); color: var(--err); } .item .ic.navy { background: var(--navy); color: #fff; }
.item .bd { flex: 1; min-width: 0; }
.item .t { font-weight: 700; font-size: 16px; }
.item .d { color: var(--muted); font-size: 14px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.item .r { text-align: right; font-size: 14px; color: var(--muted); flex-shrink: 0; }
.item .r b { display: block; color: var(--text); font-size: 17px; }
.item .trocar { align-self: center; }
.chev { color: #b0bacb; align-self: center; } .chev svg { width: 22px; height: 22px; }

/* badges */
.badge { display: inline-block; padding: 4px 11px; border-radius: 999px; font-size: 12.5px; font-weight: 700; background: #eef1f6; color: var(--muted); vertical-align: middle; }
.badge-ok, .badge-synced, .badge-server, .badge-em_andamento, .badge-aprovado { background: var(--ok-l); color: var(--ok); }
.badge-pending, .badge-warn, .badge-em_revisao { background: var(--warn-l); color: var(--warn); }
.badge-error, .badge-paralisada, .badge-cancelada { background: var(--err-l); color: var(--err); }
.badge-syncing, .badge-planejada, .badge-rascunho { background: var(--blue-l); color: var(--blue); }
.badge-concluida, .badge-encerrado { background: #e0e7ff; color: #3730a3; }

/* botões */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 15px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); font: inherit; font-size: 16px; font-weight: 700; text-align: center; margin-bottom: 10px; }
.btn svg { width: 20px; height: 20px; }
.btn:active { transform: scale(.99); }
.btn-primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn-primary:active { background: var(--blue-d); }
.btn-navy { background: var(--navy); border-color: var(--navy); color: #fff; } .btn-navy:active { background: var(--navy-2); }
.btn-outline { background: var(--card); border: 1.5px solid var(--navy); color: var(--navy); }
.btn-red { background: var(--err); border-color: var(--err); color: #fff; }
.btn-danger { color: var(--err); }
.btn-sm { padding: 12px 14px; font-size: 15px; font-weight: 600; }
.btn-ghost { background: none; border-color: transparent; color: var(--blue); }
.btn[disabled] { opacity: .5; }
.row { display: flex; gap: 10px; } .row .btn { flex: 1; }
.fab { position: fixed; right: 18px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom)); width: 60px; height: 60px; border-radius: 50%; background: var(--blue); color: #fff; border: 0; box-shadow: 0 8px 20px rgba(29,95,209,.4); z-index: 6; display: flex; align-items: center; justify-content: center; }
.fab svg { width: 30px; height: 30px; } .fab[disabled] { opacity: .5; box-shadow: none; }

/* formulários */
label { display: block; font-weight: 600; font-size: 15px; margin: 14px 0 6px; color: var(--navy); }
label .req { color: var(--err); }
input, select, textarea { width: 100%; padding: 14px 16px; font: inherit; font-size: 16px; border: 1px solid #d6dbe6; border-radius: 12px; background: var(--card); color: var(--text); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(29,95,209,.35); border-color: var(--blue); }
textarea { min-height: 120px; resize: vertical; }
.field { position: relative; }
.field > svg { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); }
.field input { padding-left: 44px; }
.field .eye { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--muted); padding: 6px; display: flex; }
.field .eye svg { width: 22px; height: 22px; }
.meta-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; font-size: 15px; }
.meta-box div span { display: block; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .03em; }
.thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; }
.thumbs .th { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: #e6e9f0; }
.thumbs img { width: 100%; height: 100%; object-fit: cover; }
.thumbs .st { position: absolute; left: 6px; bottom: 6px; }
.alert { padding: 12px 14px; border-radius: 12px; margin: 10px 0; font-size: 14.5px; }
.alert-warn { background: var(--warn-l); color: #92400e; } .alert-err { background: var(--err-l); color: #991b1b; } .alert-ok { background: var(--ok-l); color: #166534; } .alert-info { background: var(--blue-l); color: #1e40af; }

/* barra de abas */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tab-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line); display: flex; z-index: 6; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: 0; background: none; color: var(--muted); font-size: 11.5px; font-weight: 600; font-family: inherit; position: relative; }
.tab svg { width: 26px; height: 26px; }
.tab.on { color: var(--blue); }
.tab.on::after { content: ""; position: absolute; top: 0; width: 40px; height: 3px; border-radius: 0 0 3px 3px; background: var(--blue); }
@media (min-width: 640px) and (pointer: fine) { .view { max-width: 720px; margin: 0 auto; } .tabbar { max-width: 720px; left: 50%; transform: translateX(-50%); border-left: 1px solid var(--line); border-right: 1px solid var(--line); } .fab { right: calc(50% - 360px + 18px); } }

/* splash e sobre */
.splash { position: fixed; inset: 0; z-index: 50; background: var(--navy); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; transition: opacity .35s; }
.splash.out { opacity: 0; pointer-events: none; }
.logo { width: 92px; height: 92px; border-radius: 24px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; color: #fff; }
.logo svg { width: 58px; height: 58px; }
.brand { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.tagline { color: #b8c4da; font-size: 14px; }
.about { text-align: center; padding: 18px 0 14px; } .about .logo { margin: 0 auto 10px; background: var(--navy); } .about .brand { color: var(--navy); font-size: 24px; }

/* toast */
.toast { position: fixed; left: 50%; bottom: calc(var(--tab-h) + 20px + env(safe-area-inset-bottom)); transform: translateX(-50%); background: var(--navy); color: #fff; padding: 13px 20px; border-radius: 12px; font-size: 15px; z-index: 60; max-width: 90%; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.toast.err { background: var(--err); } .toast.ok { background: var(--ok); }

/* tablet */
@media (min-width: 640px) and (pointer: fine) { body { font-size: 17px; } .gallery, .pgrid { grid-template-columns: repeat(3, 1fr); } }