/* IBM Plex Sans e Mono (SIL Open Font License 1.1), servidas pelo próprio site */
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/IBMPlexMono-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/IBMPlexMono-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/IBMPlexSans-400-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../assets/fonts/IBMPlexSans-400-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/IBMPlexSans-500-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../assets/fonts/IBMPlexSans-500-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/IBMPlexSans-600-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../assets/fonts/IBMPlexSans-600-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/IBMPlexSans-700-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'IBM Plex Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../assets/fonts/IBMPlexSans-700-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* =====================================================================
   Injeta Service — padrão visual "Executivo"
   Tema por tokens: para trocar o visual (ex.: proposta Industrial), troque
   só este bloco :root. Os componentes abaixo usam apenas as variáveis.
   ===================================================================== */
:root {
  /* marca */
  --marca: #141936;            /* azul-marinho Injeta */
  --marca-escura: #0b0f24;
  --marca-media: #2b3270;
  --marca-clara: #eceef6;
  --acento: #cba449;           /* dourado Injeta */
  --acento-escuro: #a8852f;
  --acento-texto: #8a6a1f;     /* dourado legível sobre branco */

  /* superfícies e texto */
  --fundo: #f3f4f6;
  --superficie: #ffffff;
  --superficie-2: #fafbfc;
  --texto: #0e1328;
  --texto-suave: #5b6275;
  --texto-fraco: #8a90a0;
  --borda: #e3e5ea;
  --borda-forte: #d5d8df;
  --borda-fraca: #eef0f3;

  /* estados (fundo / texto) */
  --ok: #1f6b45;        --ok-fundo: #e7f3ec;
  --atencao: #7a5600;   --atencao-fundo: #fbf1d9;  --atencao-forte: #d9a21b;
  --critico: #9b1c12;   --critico-fundo: #fbeae8;  --critico-forte: #c0392b;
  --info: #2b3270;      --info-fundo: #eceef6;
  --neutro: #4b5368;    --neutro-fundo: #f0f1f4;

  /* áreas de orçamento */
  --area-corretiva: #3a52c4;
  --area-usinagem: #a8780f;
  --area-caldeiraria: #0e8f86;

  /* forma */
  --raio: 12px;
  --raio-p: 8px;
  --raio-m: 10px;
  --raio-g: 16px;
  --sombra: 0 1px 2px rgba(14, 19, 40, .05);
  --sombra-media: 0 2px 8px rgba(14, 19, 40, .06), 0 1px 2px rgba(14, 19, 40, .04);
  --sombra-alta: 0 16px 40px rgba(14, 19, 40, .18);
  --fonte: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --fonte-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --toque: 48px;
  --lateral: 248px;
  --topbar: 64px;
  --foco: 0 0 0 3px rgba(203, 164, 73, .45);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--fonte);
  font-size: 14px;
  line-height: 1.45;
  color: var(--texto);
  background: var(--fundo);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 600; letter-spacing: -.005em; }
h1 { font-size: 28px; letter-spacing: -.015em; }
h2 { font-size: 16px; }
h3 { font-size: .98rem; }
p { margin: 0 0 .75em; }
a { color: var(--marca-media); text-underline-offset: 2px; }
img { max-width: 100%; }
code, .mono { font-family: var(--fonte-mono); font-size: .92em; }
[hidden] { display: none !important; }
.ic { flex: none; vertical-align: -.2em; }
.suave { color: var(--texto-suave); }
.pequeno { font-size: .85rem; }
.centro { text-align: center; }
.direita { text-align: right; }
.nowrap { white-space: nowrap; }
.mt { margin-top: 1.25rem; }
.mb { margin-bottom: 1.25rem; }
.linha { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.linha.entre { justify-content: space-between; }
.cresce { flex: 1; min-width: 0; }
.pilha > * + * { margin-top: .75rem; }
.grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 1rem; }
.grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 1rem; }
.sobretitulo { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--acento-texto); }
.mono, .tabela td.mono { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.mut { color: var(--texto-suave); }
.numero { font-variant-numeric: tabular-nums; }

/* ---------- Botões ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px; box-sizing: border-box;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--texto);
  font: 500 14px var(--fonte); text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { background: var(--superficie-2); border-color: #b9bfcb; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-primario { background: var(--marca); border-color: var(--marca); color: #fff; font-weight: 600; }
.btn-primario:hover { background: var(--marca-escura); border-color: var(--marca-escura); }
.btn-acento { background: var(--acento); border-color: var(--acento); color: var(--marca); font-weight: 600; }
.btn-acento:hover { background: #d4b05c; border-color: #d4b05c; color: var(--marca); }
.btn-perigo { color: var(--critico); border-color: #ecc4bf; }
.btn-perigo:hover { background: var(--critico-fundo); border-color: var(--critico); }
.btn-fantasma { border-color: transparent; background: transparent; }
.btn-fantasma:hover { background: var(--neutro-fundo); border-color: transparent; }
.btn-p { height: 34px; padding: 0 12px; font-size: 13px; }
.btn-grande { height: 50px; padding: 0 20px; font-size: 15px; border-radius: var(--raio-m); font-weight: 600; }
.btn-bloco { display: flex; width: 100%; }
.btn-icone { width: 40px; padding: 0; }
.btn-p.btn-icone { width: 34px; }

/* ---------- Formulários ---------- */
label { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 6px; color: #3a4156; }
.campo { margin-bottom: .95rem; }
.campo .dica, .dica { font-weight: 400; color: var(--texto-suave); font-size: .8rem; }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=date],
input[type=tel], input[type=search], input[type=datetime-local], input[type=time], select, textarea {
  width: 100%; min-height: 40px; padding: .5rem 12px;
  border: 1px solid var(--borda-forte); border-radius: var(--raio-p);
  background: var(--superficie); color: var(--texto); font: inherit;
  transition: border-color .12s, box-shadow .12s;
}
select { appearance: none; padding-right: 2rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235B6275' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
textarea { min-height: 80px; resize: vertical; }
input::placeholder, textarea::placeholder { color: var(--texto-fraco); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--marca); box-shadow: var(--foco); }
.btn:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible { outline: none; box-shadow: var(--foco); }
input:disabled, select:disabled, textarea:disabled { background: var(--superficie-2); color: var(--texto-suave); }
.check { display: inline-flex; align-items: center; gap: .45rem; font-weight: 400; cursor: pointer; margin: 0; }
.check input { width: 18px; height: 18px; accent-color: var(--marca); }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 0 1rem; }
.form-grid .inteiro { grid-column: 1 / -1; }

/* Interruptor */
.switch { position: relative; display: inline-flex; align-items: center; gap: .5rem; cursor: pointer; font-weight: 400; margin: 0; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch .trilho { width: 38px; height: 22px; border-radius: 11px; background: var(--borda-forte); position: relative; transition: background .15s; flex: none; }
.switch .trilho::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); }
.switch input:checked + .trilho { background: var(--marca); }
.switch input:checked + .trilho::after { transform: translateX(16px); }
.switch input:focus-visible + .trilho { box-shadow: var(--foco); }

/* ---------- Cartões, selos e tabelas ---------- */
.card {
  background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio);
  padding: 20px;
}
.card + .card { margin-top: 1rem; }
.card > h2:first-child, .card > h3:first-child { margin-bottom: .8rem; }
.card-titulo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .85rem; }
.card-titulo h2, .card-titulo h3 { margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  height: 24px; padding: 0 10px; border-radius: 12px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
  background: var(--neutro-fundo); color: var(--neutro); --ponto: #8a90a2;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--ponto); flex: none; }
.badge.ok, .badge.concluido, .badge.resolvida, .badge.dentro, .badge.bom, .badge.adequado, .badge.aprovado { background: var(--ok-fundo); color: var(--ok); --ponto: #1f7a4d; }
.badge.atencao, .badge.aguardando_revisao, .badge.media, .badge.em_andamento, .badge.admissivel, .badge.hoje { background: var(--atencao-fundo); color: var(--atencao); --ponto: #b98300; }
.badge.critico, .badge.nao_ok, .badge.alta, .badge.critica, .badge.aberta, .badge.acima, .badge.inadmissivel, .badge.recusado { background: var(--critico-fundo); color: var(--critico); --ponto: #c4321f; }
.badge.em_campo, .badge.enviado, .badge.info { background: var(--info-fundo); color: var(--info); --ponto: #3a52c4; }
.badge.rascunho, .badge.na, .badge.baixa, .badge.cancelada, .badge.cancelado, .badge.neutro { background: var(--neutro-fundo); color: var(--neutro); --ponto: #8a90a2; }
.badge.sem-ponto::before { display: none; }
.tag { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 8px; border-radius: 6px; border: 1px solid #e1e3e8; color: #3a4156; background: #f7f8fa; white-space: nowrap; }
.ponto-area { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 8px; vertical-align: 1px; }
.ponto-area.corretiva { background: var(--area-corretiva); } .ponto-area.usinagem { background: var(--area-usinagem); } .ponto-area.caldeiraria { background: var(--area-caldeiraria); }

.tabela-wrap { overflow-x: auto; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th, .tabela td { padding: 14px 18px; border-bottom: 1px solid var(--borda-fraca); text-align: left; vertical-align: middle; }
.tabela td.nowrap, .tabela td.mono { white-space: nowrap; }
.tabela.compacta th, .tabela.compacta td { padding-left: 14px; padding-right: 14px; }
.tabela.compacta td { padding-top: 12px; padding-bottom: 12px; }
.tabela th { background: var(--superficie-2); padding-top: 12px; padding-bottom: 12px; font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-suave); white-space: nowrap; border-bottom-color: var(--borda); }
.tabela tfoot td { background: var(--superficie-2); font-weight: 600; border-top: 1px solid var(--borda); border-bottom: 0; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela tr.clicavel { cursor: pointer; }
.tabela tbody tr:hover td { background: #f8f9fb; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela .faixa-ok td { background: #f3faf6; }
.tabela .faixa-atencao td { background: #fffaf0; }
.tabela .faixa-critico td { background: #fdf3f2; }
.card > .tabela-wrap { box-shadow: none; }

.vazio { padding: 2.25rem 1rem; text-align: center; color: var(--texto-suave); }
.alerta { display: flex; gap: .6rem; align-items: flex-start; padding: .8rem 1rem; border-radius: var(--raio-p); border: 1px solid; margin-bottom: 1rem; font-size: .92rem; }
.alerta.info { background: var(--info-fundo); border-color: #d3d7ea; color: var(--info); }
.alerta.aviso { background: var(--atencao-fundo); border-color: #f0dca6; color: var(--atencao); }
.alerta.erro { background: var(--critico-fundo); border-color: #f0c6c1; color: var(--critico); }
.alerta.sucesso { background: var(--ok-fundo); border-color: #bfe0cc; color: var(--ok); }

.carregando { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: 2.5rem; color: var(--texto-suave); }
.spinner { width: 18px; height: 18px; border: 2px solid var(--borda); border-top-color: var(--marca); border-radius: 50%; animation: gira .8s linear infinite; flex: none; }
@keyframes gira { to { transform: rotate(360deg); } }

/* Barra de progresso */
.progresso { height: 6px; background: var(--neutro-fundo); border-radius: 3px; overflow: hidden; }
.progresso > span { display: block; height: 100%; background: var(--marca); transition: width .2s; }

/* Abas (segmentos) */
.abas { display: flex; gap: 28px; border-bottom: 1px solid var(--borda); margin-bottom: 20px; overflow-x: auto; }
.abas button { border: 0; background: none; padding: 10px 0 12px; font: inherit; font-weight: 500; color: var(--texto-suave); cursor: pointer; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; }
.abas button:hover { color: var(--texto); }
.abas button[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--acento); font-weight: 600; }
/* Segmentos com contagem (Relatórios: Todos, Agendados, Em campo…) */
.segmentos { display: flex; gap: 4px; padding: 4px; background: #e9ebef; border-radius: var(--raio-m); flex-wrap: wrap; margin-bottom: 20px; }
.segmentos button { height: 34px; padding: 0 14px; border-radius: 7px; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; font: 500 14px var(--fonte); color: #3a4156; cursor: pointer; }
.segmentos button b { font-weight: 600; font-size: 12px; color: var(--texto-suave); font-family: var(--fonte-mono); }
.segmentos button[aria-selected="true"] { background: #fff; color: var(--texto); box-shadow: 0 1px 2px rgba(14, 19, 40, .08); }
/* Interruptor compacto (Aprovado na lista de orçamentos) */
.sw { position: relative; display: inline-flex; width: 40px; height: 22px; margin: 0; vertical-align: middle; }
.sw input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.sw span { width: 40px; height: 22px; border-radius: 11px; background: var(--borda-forte); position: relative; transition: background .15s; }
.sw span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 8px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: left .15s; }
.sw input:checked + span { background: #1f7a4d; }
.sw input:checked + span::after { left: 21px; }
.sw input:disabled { cursor: default; }
.sw input:focus-visible + span { box-shadow: var(--foco); }
input.data-inline { height: 34px; min-height: 34px; width: auto; padding: 0 8px; border-radius: 7px; font: 500 13px var(--fonte-mono); }

/* ---------- Toast e modal ---------- */
#toasts { position: fixed; left: 50%; bottom: 1.25rem; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: .5rem; width: min(92vw, 440px); pointer-events: none; }
.toast { pointer-events: auto; padding: .8rem 1rem; border-radius: var(--raio-p); background: var(--marca); color: #fff; box-shadow: var(--sombra-alta); font-weight: 500; animation: sobe .18s ease-out; border-left: 3px solid var(--acento); }
.toast.erro { background: #5c130c; border-left-color: #f08a7e; }
.toast.sucesso { background: #123f29; border-left-color: #6fcf97; }
@keyframes sobe { from { transform: translateY(8px); opacity: 0; } }
body:has(.barra-abas) #toasts, body:has(.tabbar) #toasts { bottom: calc(84px + env(safe-area-inset-bottom)); }

.modal-fundo { position: fixed; inset: 0; background: rgba(11, 15, 36, .5); z-index: 900; display: flex; align-items: flex-end; justify-content: center; padding: 0; }
.modal { background: var(--superficie); width: 100%; max-width: 640px; max-height: 92vh; display: flex; flex-direction: column; border-radius: var(--raio-g) var(--raio-g) 0 0; box-shadow: var(--sombra-alta); }
.modal.largo { max-width: 980px; }
.modal-cab { padding: 1.1rem 1.25rem .6rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.modal-cab h2 { margin: 0; font-size: 1.12rem; }
.modal-corpo { padding: .5rem 1.25rem 1.1rem; overflow-y: auto; }
.modal-rodape { padding: .85rem 1.25rem; border-top: 1px solid var(--borda); display: flex; gap: .5rem; justify-content: flex-end; flex-wrap: wrap; background: var(--superficie-2); border-radius: 0 0 var(--raio-g) var(--raio-g); }
@media (min-width: 700px) {
  .modal-fundo { align-items: center; padding: 1rem; }
  .modal { border-radius: var(--raio-g); }
}

/* Escolha do checklist (Injetoras, Engel, Visita) — cartões de opção */
.opcoes-modelo { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: .6rem; }
.opcoes-modelo label { margin: 0; position: relative; display: flex; align-items: center; gap: .8rem; min-height: 64px; padding: .7rem .85rem; border: 1.5px solid var(--borda-forte); border-radius: var(--raio); background: var(--superficie); cursor: pointer; font-weight: 600; text-align: left; transition: border-color .12s, background .12s; }
.opcoes-modelo label:hover { border-color: var(--texto-fraco); }
.opcoes-modelo label .op-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--fundo); color: var(--marca); display: flex; align-items: center; justify-content: center; flex: none; }
.opcoes-modelo label .op-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.opcoes-modelo label small { font-weight: 400; color: var(--texto-suave); font-size: .78rem; }
.opcoes-modelo label::after { content: ""; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--borda-forte); flex: none; box-sizing: border-box; }
.opcoes-modelo input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opcoes-modelo label:has(input:checked) { border-color: var(--marca); background: #f6f7fb; }
.opcoes-modelo label:has(input:checked)::after { border: 6px solid var(--marca); }
.opcoes-modelo label:has(input:checked) .op-ic { background: var(--marca); color: var(--acento); }
.opcoes-modelo label:has(input:focus-visible) { box-shadow: var(--foco); }

/* =====================================================================
   Login — painel da marca + formulário
   ===================================================================== */
.pg-login { background: var(--fundo); }
.login { display: flex; flex-wrap: wrap; min-height: 100vh; }
.login-marca { flex: 1 1 480px; background: var(--marca); color: #fff; padding: 56px clamp(24px, 6vw, 88px); display: flex; flex-direction: column; justify-content: space-between; gap: 48px; position: relative; overflow: hidden; box-sizing: border-box; }
.login-marca .seta-fundo { position: absolute; right: -120px; bottom: -140px; width: 520px; height: 620px; }
.login-logo { width: 200px; height: auto; position: relative; }
.login-chamada { display: flex; flex-direction: column; gap: 20px; max-width: 460px; position: relative; }
.login-chamada .traco { width: 48px; height: 2px; background: var(--acento); }
.login-chamada h1 { margin: 0; font-size: 40px; line-height: 1.12; font-weight: 600; letter-spacing: -.02em; color: #fff; }
.login-chamada p { margin: 0; font-size: 16px; line-height: 1.6; color: #c9cde0; }
.login-dados { display: flex; gap: 32px; flex-wrap: wrap; font-size: 13px; color: #a9afc9; position: relative; }
.login-painel { flex: 1 1 480px; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 24px; background: var(--fundo); box-sizing: border-box; }
.login-logo-movel { display: none; }
.login-caixa { width: 100%; max-width: 400px; }
.login-caixa form { display: flex; flex-direction: column; gap: 22px; }
.login-caixa .campo { margin: 0; }
.login-caixa .campo label { font-size: 13px; font-weight: 600; color: var(--texto); }
.login-caixa input:not([type=checkbox]) { height: 48px; border-radius: var(--raio-m); padding: 0 14px; font-size: 15px; }
.login-caixa .btn-grande { height: 50px; border-radius: var(--raio-m); }
.login-cab .sobretitulo { letter-spacing: .12em; }
.login-titulo { margin: 6px 0 0; font-size: 30px; font-weight: 600; letter-spacing: -.015em; }
.login-sub { margin: 8px 0 0; color: var(--texto-suave); }
.login-linha { display: flex; justify-content: space-between; align-items: center; font-size: 13.5px; gap: 12px; }
.login-linha .check { color: #3a4156; font-weight: 400; gap: 8px; }
.login-linha .check input { width: 16px; height: 16px; }
.login-selo { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border: 1px solid #e1e3e8; border-radius: var(--raio-m); background: #fff; font-size: 13px; color: var(--neutro); }
.login-selo .ic { color: #1f7a4d; }
.login-rodape { text-align: center; font-size: 13.5px; color: var(--texto-suave); }
.login-caixa .alerta { margin: 0; }
@media (max-width: 820px) {
  .login-marca { display: none; }
  .login-painel { justify-content: flex-start; padding: 40px 16px 32px; border-top: 6px solid var(--marca); }
  .login-logo-movel { display: block; width: 190px; margin: 8px 0 32px; }
}

/* =====================================================================
   App de campo — desenhado para o polegar
   ===================================================================== */
.campo-app { max-width: 720px; margin: 0 auto; min-height: 100vh; padding-bottom: 88px; }
.topo { position: sticky; top: 0; z-index: 50; background: var(--marca); color: #fff; padding: 8px 8px 12px; display: flex; flex-direction: column; gap: 10px; }
.topo-linha { display: flex; align-items: center; gap: 6px; min-height: 44px; }
.topo .titulo-topo { min-width: 0; padding-left: 6px; }
.topo h1 { font-size: 16px; font-weight: 600; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.topo .sub { font-size: 12px; color: #c9cde0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topo .btn { background: transparent; border-color: rgba(255, 255, 255, .25); color: #fff; }
.topo .btn-icone { border-color: transparent; width: 44px; height: 44px; }
.topo .contador-topo { font-size: 13px; color: var(--acento); padding-right: 10px; white-space: nowrap; }
.topo .barra-topo { height: 4px; margin: 0 10px; border-radius: 2px; background: rgba(255, 255, 255, .15); overflow: hidden; }
.topo .barra-topo span { display: block; height: 100%; background: var(--acento); transition: width .2s; }
.topo.saudacao-campo { padding: 16px 18px 18px; }
.topo.saudacao-campo .titulo-topo { padding-left: 0; }
.topo.saudacao-campo .sobretitulo { color: var(--acento); font-size: 11.5px; }
.topo.saudacao-campo h1 { font-size: 21px; margin-top: 2px; }
.topo.claro { background: #fff; color: var(--texto); border-bottom: 1px solid var(--borda); padding: 8px; }
.topo.claro h1 { font-size: 18px; }
.topo.claro .btn-icone { color: var(--texto); }
.avatar-botao { width: 40px; height: 40px; border-radius: 20px; border: 0; cursor: pointer; }
.topo .pop-menu { color: var(--texto); }
.conteudo { padding: 16px; }
.conteudo > h2 { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); margin: 18px 0 10px; }
.barra-abas { position: fixed; bottom: 0; left: 0; right: 0; z-index: 60; display: flex; height: calc(72px + env(safe-area-inset-bottom)); background: var(--superficie); border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); }
.barra-abas a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 8px; font-size: 11px; font-weight: 600; color: var(--texto-suave); text-decoration: none; }
.barra-abas a.ativo { color: var(--marca); }
body.em-secao .barra-abas { display: none; }
.lista-cards { display: flex; flex-direction: column; gap: 12px; }
.lista-cards > * + *, .lista-cards > .card + .card { margin-top: 0; }
.card-toque { display: block; text-decoration: none; color: inherit; cursor: pointer; }
.card-toque:active { transform: scale(.995); }
.card-toque .seta { color: var(--texto-fraco); display: inline-flex; }
.cartao-andamento { padding: 16px; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: var(--texto); border: 1.5px solid var(--marca); border-radius: 14px; }
.cartao-andamento .nome, .cartao-agenda .nome { font-weight: 600; }
.cartao-andamento .nome { font-size: 16px; }
.cartao-andamento .relogio-grande { font-size: 20px; font-weight: 600; }
.cartao-andamento .continuar { color: var(--marca); font-weight: 600; }
.cartao-agenda { padding: 14px 16px; display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--texto); border-radius: 14px; }
.cartao-agenda .data-bloco { width: 48px; text-align: center; flex: none; }
.cartao-agenda .dia { font-size: 20px; font-weight: 600; line-height: 1; }
.cartao-agenda .mes { font-size: 11px; font-weight: 600; letter-spacing: .06em; color: var(--texto-suave); margin-top: 3px; }
.btn-tracejado { margin-top: 12px; height: 52px; border-radius: 12px; border: 1.5px dashed #9ba2b4; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--marca); font-weight: 600; text-decoration: none; background: #fff; }
.form-campo { display: flex; flex-direction: column; gap: 16px; }
.form-campo .campo { margin: 0; }
.form-campo select, .form-campo textarea, .form-campo input:not([type=radio]) { min-height: 50px; border-radius: 12px; padding: 0 14px; font-size: 15px; border-color: #cdd1d9; }
.form-campo textarea { padding: 12px 14px; min-height: 76px; }
.form-campo .btn-grande { height: 56px; border-radius: 14px; font-size: 16px; }
.form-campo .opcoes-modelo { grid-template-columns: minmax(0, 1fr); gap: 10px; }
.form-campo .opcoes-modelo label { min-width: 0; }
.form-campo .opcoes-modelo label { min-height: 72px; padding: 14px; border-radius: 14px; border-width: 1px; }
.form-campo .opcoes-modelo label:has(input:checked) { border-width: 1.5px; }
.form-campo .opcoes-modelo .op-ic { width: 40px; height: 40px; }
.form-campo .opcoes-modelo .op-txt { font-size: 15.5px; color: var(--texto); }
.form-campo .opcoes-modelo small { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.form-campo .rodape-secao { border-top: 0; background: transparent; padding-top: 0; }
.form-campo .rodape-secao .btn { height: 56px; border-radius: 14px; font-size: 16px; }
body.em-secao .campo-app { padding-bottom: 100px; }

.cabecalho-atend { background: var(--superficie); border-bottom: 1px solid var(--borda); padding: 16px; }
.cabecalho-atend .titulo { font-weight: 600; font-size: 16px; }
.relogio { font-family: var(--fonte-mono); font-variant-numeric: tabular-nums; font-weight: 500; }
.secao-card { display: flex; align-items: center; gap: 12px; }
.secao-card .info { flex: 1; min-width: 0; }
.secao-card .contador { font-family: var(--fonte-mono); font-weight: 500; font-variant-numeric: tabular-nums; color: var(--texto-suave); font-size: 13px; }
.ponto-amarelo { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--atencao-forte); vertical-align: middle; }

/* Item do checklist */
.item { background: var(--superficie); border: 1px solid var(--borda); border-radius: 14px; padding: 14px; display: flex; flex-direction: column; gap: 12px; scroll-margin-top: 90px; }
.item + .item { margin-top: 12px; }
.item.preenchido { border-left: 4px solid #1f7a4d; }
.item.pendente { border-left: 4px solid #d9a400; }
.item.desligado { opacity: .55; background: var(--superficie-2); }
.item-cab { display: flex; gap: 8px; align-items: flex-start; justify-content: space-between; }
.item-titulo { font-weight: 600; font-size: 15px; }
.item-orient { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }
.item-meta { font-size: 12px; color: var(--texto-fraco); }
.item .mt { margin-top: 0; }
.obrig { color: #b42318; font-weight: 600; }
.obs-item { margin: 0; }
.obs-item label { font-size: 12.5px; font-weight: 400; color: var(--texto-suave); }
.obs-item textarea { min-height: 56px; border-radius: 10px; border-color: #cdd1d9; resize: none; }

.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.seg button { height: 48px; border-radius: 10px; border: 1.5px solid #cdd1d9; background: #fff; font: 600 14px var(--fonte); color: var(--texto); cursor: pointer; }
.seg button[aria-pressed="true"][data-valor="ok"] { background: #1f7a4d; border-color: #1f7a4d; color: #fff; }
.seg button[aria-pressed="true"][data-valor="nao_ok"] { background: var(--critico); border-color: var(--critico); color: #fff; }
.seg button[aria-pressed="true"][data-valor="na"] { background: var(--neutro); border-color: var(--neutro); color: #fff; }
.seg button:disabled { cursor: default; }

/* Fotos */
.fotos-grupo { margin: 0; }
.fotos-grupo .rotulo { font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); margin-bottom: 6px; }
.fotos-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.fotos-linha { display: flex; gap: 6px; flex-wrap: wrap; }
.fotos-linha .thumb { width: 72px; height: 72px; aspect-ratio: auto; border-radius: 10px; }
.grade-antes-depois { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.espaco-foto { width: 72px; height: 72px; border-radius: 10px; border: 1.5px dashed #9ba2b4; background: #f7f8fa; display: flex; align-items: center; justify-content: center; color: var(--marca); cursor: pointer; margin: 0; flex: none; }
.espaco-foto.galeria { width: 44px; border-style: solid; border-color: var(--borda); background: #fff; color: var(--texto-suave); }
.espaco-foto input, .botoes-foto input { display: none; }
.botoes-foto { display: flex; gap: 8px; }
.botoes-foto .btn-grande { height: 48px; border-radius: 10px; font-size: 14px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: var(--raio-p); overflow: hidden; background: #dfe2e8; border: 1px solid var(--borda); }
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; cursor: zoom-in; }
.thumb .sobre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, .6); }
.thumb.erro .sobre { background: rgba(155, 28, 18, .82); color: #fff; flex-direction: column; gap: .25rem; font-size: .75rem; font-weight: 600; }
.thumb .acoes { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 3px; background: linear-gradient(transparent, rgba(0, 0, 0, .55)); }
.thumb .acoes button { border: 0; background: rgba(255, 255, 255, .94); border-radius: 5px; min-width: 24px; height: 24px; cursor: pointer; font-weight: 600; font-size: .75rem; padding: 0 .25rem; display: inline-flex; align-items: center; justify-content: center; color: var(--texto); }
.thumb .num { position: absolute; top: 4px; left: 4px; background: rgba(11, 15, 36, .7); color: #fff; font-size: .68rem; padding: 0 .35rem; border-radius: 4px; font-family: var(--fonte-mono); display: inline-flex; align-items: center; gap: 2px; }
.add-foto { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .55rem; }
.add-foto label { margin: 0; }
.add-foto input[type=file] { display: none; }

.visor { position: fixed; inset: 0; z-index: 1100; background: rgba(5, 7, 18, .94); display: flex; align-items: center; justify-content: center; }
.visor img { max-width: 100%; max-height: 100%; object-fit: contain; }
.visor button { position: absolute; top: .75rem; right: .75rem; }

.rodape-fixo { position: sticky; bottom: 78px; padding: .75rem 0 0; background: linear-gradient(transparent, var(--fundo) 30%); }
.rodape-secao { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; background: #fff; border-top: 1px solid var(--borda); padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); display: flex; gap: 10px; }
.rodape-secao .btn { flex: 1; height: 50px; border-radius: 12px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.rodape-secao .rotulo-btn { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rodape-secao .btn:not(.btn-primario) { border: 1.5px solid #cdd1d9; }
@media (min-width: 721px) { .rodape-secao { left: 50%; transform: translateX(-50%); max-width: 720px; } }

/* Medições */
.tabela-medicao { width: 100%; border-collapse: collapse; font-size: .88rem; }
.tabela-medicao th, .tabela-medicao td { border: 1px solid var(--borda); padding: .35rem .4rem; text-align: center; }
.tabela-medicao th { background: var(--superficie-2); font-size: .74rem; font-weight: 600; color: var(--texto-suave); }
.tabela-medicao input { min-height: 34px; padding: .25rem .35rem; text-align: right; font-variant-numeric: tabular-nums; }
.tabela-medicao td.faixa-ok { background: var(--ok-fundo); }
.tabela-medicao td.faixa-atencao { background: var(--atencao-fundo); }
.tabela-medicao td.faixa-critico { background: var(--critico-fundo); }
.resultado-medicao { border-radius: var(--raio); padding: .85rem 1rem; border: 1px solid var(--borda); background: var(--superficie-2); }
.resultado-medicao.ok { background: var(--ok-fundo); border-color: #bfe0cc; }
.resultado-medicao.atencao { background: var(--atencao-fundo); border-color: #f0dca6; }
.resultado-medicao.critico { background: var(--critico-fundo); border-color: #f0c6c1; }

/* =====================================================================
   Painel administrativo
   ===================================================================== */
.admin-app { display: grid; grid-template-columns: var(--lateral) minmax(0, 1fr); min-height: 100vh; background: linear-gradient(to right, var(--marca) var(--lateral), transparent var(--lateral)); }

/* Menu lateral */
.lateral { background: var(--marca); color: #c9cde0; position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 24px 14px; box-sizing: border-box; z-index: 800; }
.lateral-marca { padding: 4px 12px 18px; }
.lateral-marca img { width: 148px; display: block; }
.lateral nav { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.lateral .grupo { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: #8c93b3; padding: 18px 12px 6px; }
.lateral .grupo:first-child { padding-top: 0; }
.lateral nav a { display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 12px; border-radius: var(--raio-p); color: #c9cde0; text-decoration: none; font-weight: 500; }
.lateral nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.lateral nav a.ativo { background: rgba(203, 164, 73, .14); color: #fff; box-shadow: inset 2px 0 0 var(--acento); }
.lateral nav a .cnt { margin-left: auto; font-size: 12px; background: rgba(255, 255, 255, .1); border-radius: 10px; padding: 1px 8px; color: #fff; font-family: var(--fonte-mono); }
.lateral .usuario { margin-top: auto; padding: 16px 12px 0; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; align-items: center; gap: 10px; }
.avatar { width: 36px; height: 36px; border-radius: 18px; background: var(--acento); color: var(--marca); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex: none; }
.lateral .usuario .quem { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.lateral .usuario .quem strong { color: #fff; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lateral .usuario .quem span { font-size: 12px; }
.lateral .usuario .btn { color: #c9cde0; border-color: transparent; background: transparent; width: 34px; height: 34px; }
.lateral .usuario .btn:hover { background: rgba(255, 255, 255, .08); color: #fff; }

/* Barra superior: caminho (ou busca no Início) e ações da página */
.area-principal { min-width: 0; display: flex; flex-direction: column; }
.topbar { position: sticky; top: 0; z-index: 600; min-height: 64px; background: #fff; border-bottom: 1px solid var(--borda); display: flex; align-items: center; gap: 12px; padding: 10px 32px; box-sizing: border-box; }
.topbar-menu, .topbar-logo { display: none; }
.trilha { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--texto-suave); white-space: nowrap; overflow: hidden; }
.trilha a { color: var(--texto-suave); text-decoration: none; }
.trilha a:hover { color: var(--marca); }
.trilha strong { color: var(--texto); font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.busca-topo { flex: 1 1 280px; max-width: 420px; height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); color: var(--texto-suave); background: #fff; margin: 0; font-weight: 400; }
.busca-topo input { border: 0; outline: 0; box-shadow: none; padding: 0; min-height: 0; height: 100%; flex: 1; min-width: 0; background: transparent; font: 400 14px var(--fonte); }
.busca-topo:focus-within { border-color: var(--marca); box-shadow: var(--foco); }
.topbar-acoes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pop { position: relative; }
.pop-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 260px; background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-alta); padding: 6px; z-index: 700; display: none; }
.pop.aberto .pop-menu { display: block; }
.pop-menu a, .pop-menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; border: 0; background: none; border-radius: 7px; font: 500 14px var(--fonte); color: var(--texto); text-decoration: none; cursor: pointer; text-align: left; }
.pop-menu a:hover, .pop-menu button:hover { background: var(--fundo); }
.pop-menu .sep { height: 1px; background: var(--borda-fraca); margin: 4px 6px; }
.pop-menu .rot { font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-fraco); padding: 8px 10px 4px; }
.pop-menu .qtd { margin-left: auto; font-family: var(--fonte-mono); font-size: 13px; color: var(--texto-suave); }
.sino-ponto { position: absolute; top: 8px; right: 9px; width: 7px; height: 7px; border-radius: 4px; background: var(--acento); }

/* Página */
.principal { padding: 28px 32px 48px; min-width: 0; max-width: 1320px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.principal > * + * { margin-top: 0; }
.cab-pagina { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.cab-pagina h1 { margin: 6px 0 0; }
.cab-pagina .sub { color: var(--texto-suave); margin-top: 4px; }
.cab-pagina .linha-status { display: flex; gap: 10px; align-items: center; margin-bottom: 4px; }
.cab-pagina .linha-status + h1 { margin-top: 6px; }
.cab-pagina .pequeno a, .cab-pagina a.pequeno, .voltar { display: none; }
/* Ações da página aparecem na barra superior (no computador) */
@media (min-width: 901px) {
  .acoes-topo { position: fixed; top: 12px; right: 32px; z-index: 610; display: flex; gap: 8px; align-items: center; }
  body.modal-aberto .acoes-topo { z-index: 1; }
}
.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 20px; }
.filtros .campo { margin: 0; min-width: 150px; }
.filtros .campo.cresce { flex: 1 1 280px; }
.filtros label { font-size: 12px; color: var(--texto-suave); }
.campo-busca { position: relative; }
.campo-busca .ic { position: absolute; left: 14px; bottom: 12px; color: var(--texto-suave); pointer-events: none; }
.campo-busca input { padding-left: 40px; }
.indicador { padding: 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.indicador .valor { font-family: var(--fonte-mono); font-size: 32px; font-weight: 500; line-height: 1.1; font-variant-numeric: tabular-nums; letter-spacing: -.02em; }
.indicador .rotulo { color: var(--texto-suave); font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 8px; }
.indicador .rotulo i { width: 10px; height: 10px; border-radius: 2px; }
.indicador .detalhe { font-size: 13px; color: var(--texto-suave); }
.indicador.escuro { background: var(--marca); border-color: var(--marca); color: #fff; }
.indicador.escuro .rotulo, .indicador.escuro .detalhe { color: #c9cde0; }
.paginacao { display: flex; justify-content: space-between; align-items: center; padding: 12px 18px; border-top: 1px solid var(--borda); flex-wrap: wrap; gap: 12px; font-size: 13px; color: var(--texto-suave); }
.secao-titulo { display: flex; justify-content: space-between; align-items: center; padding: 18px 20px 6px; }
.secao-titulo h2 { margin: 0; }
.card.sem-padding { padding: 0; overflow: hidden; }
.card.sem-padding .tabela-wrap { border: 0; border-radius: 0; }
.menu-movel { display: none; }
.tabbar { display: none; }
.lateral-fundo { display: none; }
.so-movel { display: none !important; }

/* Revisão: editor de um lado, relatório do outro */
.revisao { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.revisao .editor { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.revisao .editor > .card + .card { margin-top: 0; }
.revisao .previa { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 12px; position: sticky; top: 84px; }
.moldura-previa { background: #e3e6eb; border-radius: var(--raio); padding: 20px; height: calc(100vh - 150px); box-sizing: border-box; display: flex; }
.moldura-previa iframe { flex: 1; width: 100%; border: 0; background: transparent; }
.lbl { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
label.lbl { display: block; margin-bottom: 6px; }
.btn-link { border: 0; background: none; padding: 0; font: 400 13px var(--fonte); color: var(--marca-media); text-decoration: underline; cursor: pointer; }
.numeros-rev { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 18px; }
.numeros-rev .val { margin-top: 6px; font-size: 18px; }
.numeros-rev .val-txt { margin-top: 6px; font-weight: 600; }
.progresso.verde { height: 6px; margin-top: 8px; background: #e9ebef; }
.progresso.verde > span { background: #1f7a4d; }
.aviso-justificativa { display: flex; gap: 12px; padding: 14px 16px; border-radius: var(--raio-m); background: var(--atencao-fundo); border: 1px solid #f0dfae; color: #5c4300; }
.aviso-justificativa .ic { flex: none; margin-top: 1px; }
details.faltas summary { cursor: pointer; }
.textos-rev textarea { min-height: 84px; line-height: 1.5; }
.textos-rev h2 { margin-bottom: 16px; }
.pilha-secoes { display: flex; flex-direction: column; gap: 10px; }
details.secao-rev { border: 1px solid var(--borda); border-radius: var(--raio-m); background: var(--superficie); }
details.secao-rev + details.secao-rev { margin-top: 0; }
details.secao-rev > summary { padding: 14px 16px; cursor: pointer; font-weight: 600; list-style: none; display: flex; align-items: center; gap: 12px; }
details.secao-rev > summary::-webkit-details-marker { display: none; }
details.secao-rev > summary .contagem { font-weight: 500; }
details.secao-rev .corpo { padding: 0; }
.item-rev { border-top: 1px solid var(--borda-fraca); padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.item-rev .linha.mt { margin-top: 0; }
.item-rev textarea.mt { margin-top: 0; min-height: 60px; }
.item-rev.desligado { opacity: .5; }
.item-rev .fotos-grid { grid-template-columns: repeat(auto-fill, 96px); }
.item-rev .thumb { aspect-ratio: 4 / 3; border-radius: 6px; }
.linha-med { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--borda-fraca); }
.card-titulo + .linha-med { border-top: 0; padding-top: 0; }

/* Editor de modelos */
.modelo-secao { border: 1px solid var(--borda); border-radius: var(--raio); background: var(--superficie); margin-bottom: 1rem; box-shadow: var(--sombra); }
.modelo-secao .cab { display: flex; gap: .5rem; align-items: center; padding: .75rem; border-bottom: 1px solid var(--borda); background: var(--superficie-2); border-radius: var(--raio) var(--raio) 0 0; }
.modelo-secao .cab input { font-weight: 600; }
.tabela-itens td { vertical-align: middle; }
.tabela-itens input[type=number] { width: 64px; }
.tabela-itens input[type=text] { min-width: 200px; }

/* Início */
.saudacao { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.saudacao h1 { margin: 6px 0 0; font-size: 30px; letter-spacing: -.02em; }
.saudacao .resumo { color: var(--texto-suave); }
.saudacao .topo-movel { display: none; }
.grade-inicio { display: flex; flex-direction: column; gap: 24px; }
.grid-areas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 16px; }
.grid-kpi { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px; }
.grid-duas { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 16px; align-items: start; }
.grid-2 > .card + .card, .grid-4 > .card + .card, .grid-areas > .card + .card, .grid-kpi > .card + .card, .grid-duas > .card + .card { margin-top: 0; }
.area-card { padding: 22px; display: flex; flex-direction: column; gap: 16px; }
.area-cab { display: flex; gap: 14px; align-items: center; }
.area-cab .ic-caixa { width: 44px; height: 44px; border-radius: 10px; border: 1px solid var(--borda); display: flex; align-items: center; justify-content: center; color: var(--marca); background: #f7f8fa; flex: none; }
.area-cab a.titulo { font-size: 17px; font-weight: 600; color: var(--texto); text-decoration: none; }
.area-cab a.titulo:hover { color: var(--marca-media); }
.area-cab .sub { color: var(--texto-suave); font-size: 13px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; padding: 0 14px; border-radius: var(--raio-p); border: 1px solid var(--borda-forte); background: #fff; font: 500 13.5px var(--fonte); color: var(--texto); display: inline-flex; align-items: center; gap: 6px; text-decoration: none; cursor: pointer; }
.chip:hover { border-color: var(--marca); }
.chip.on { background: var(--marca); border-color: var(--marca); color: #fff; }
.barra-empilhada { display: flex; gap: 2px; height: 14px; }
.barra-empilhada span { min-width: 0; }
.barra-empilhada span:first-child { border-radius: 4px 0 0 4px; }
.barra-empilhada span:last-child { border-radius: 0 4px 4px 0; }
.barra-empilhada.vazia { background: var(--neutro-fundo); border-radius: 4px; }
.legenda-areas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.legenda-areas .rot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--texto-suave); }
.legenda-areas .rot i { width: 10px; height: 10px; border-radius: 2px; }
.legenda-areas .val { font-family: var(--fonte-mono); font-size: 18px; margin-top: 4px; }
.feed-hoje { border-top: 1px solid var(--borda-fraca); padding-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.feed-hoje .rot { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.feed-hoje .ev { display: flex; gap: 12px; align-items: baseline; }
.feed-hoje .ev .hora { font-family: var(--fonte-mono); font-size: 12.5px; color: var(--texto-suave); width: 44px; flex: none; }
.lista-areas-movel { display: none; }

/* Gráfico de colunas empilhadas (aprovados por mês) */
.grafico-colunas { display: flex; gap: 16px; align-items: stretch; }
.grafico-colunas .eixo { display: flex; flex-direction: column; justify-content: space-between; font: 500 11.5px var(--fonte-mono); color: var(--texto-suave); text-align: right; height: 240px; }
.grafico-colunas .area-graf { flex: 1; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.grafico-colunas .barras-graf { height: 240px; display: flex; align-items: flex-end; justify-content: space-around; border-bottom: 1px solid var(--borda-forte); background: linear-gradient(var(--borda-fraca), var(--borda-fraca)) 0 0 / 100% 1px no-repeat, linear-gradient(var(--borda-fraca), var(--borda-fraca)) 0 50% / 100% 1px no-repeat; }
.grafico-colunas .grupo-col { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.grafico-colunas .grupo-col .total { font: 600 12.5px var(--fonte-mono); }
.grafico-colunas .col { display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; width: 72px; }
.grafico-colunas .col span { display: block; }
.grafico-colunas .col span:first-child { border-radius: 4px 4px 0 0; }
.grafico-colunas .rotulos { display: flex; justify-content: space-around; font-size: 13px; font-weight: 500; }
.legenda-inline { display: flex; gap: 16px; font-size: 13px; color: var(--texto-suave); flex-wrap: wrap; }
.legenda-inline span { display: flex; align-items: center; gap: 6px; }
.legenda-inline i { width: 10px; height: 10px; border-radius: 2px; }

/* Orçamentos: celular */
.extra-movel { margin: -12px -16px 12px; padding: 0 16px 12px; background: #fff; border-bottom: 1px solid var(--borda); flex-direction: column; gap: 12px; }
.busca-movel { height: 44px; border: 1px solid var(--borda-forte); border-radius: var(--raio-m); display: flex; align-items: center; gap: 8px; padding: 0 12px; color: var(--texto-suave); margin: 0; font-weight: 400; }
.busca-movel input { border: 0; outline: 0; box-shadow: none; padding: 0; min-height: 0; height: 100%; flex: 1; min-width: 0; font: 400 15px var(--fonte); }
.chips-movel { display: flex; gap: 8px; overflow-x: auto; }
.chip-redondo { height: 34px; padding: 0 14px; border-radius: 17px; border: 1px solid var(--borda-forte); background: #fff; font: 500 13px var(--fonte); color: #3a4156; white-space: nowrap; cursor: pointer; flex: none; }
.chip-redondo.on { background: var(--marca); border-color: var(--marca); color: #fff; }
.resumo-movel { display: flex; justify-content: space-between; padding: 0 0 8px; font-size: 12.5px; color: var(--texto-suave); }
.cartoes-orc { display: flex; flex-direction: column; gap: 10px; }
.cartao-orc { padding: 14px; display: flex; flex-direction: column; gap: 10px; cursor: pointer; }
.cartao-orc .nome { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cartao-orc .valor { font-size: 17px; font-weight: 600; white-space: nowrap; }
.cartao-orc .rodape-orc { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--borda-fraca); padding-top: 10px; }
.cartao-orc .sw, .cartao-orc .sw span { width: 48px; height: 28px; border-radius: 14px; }
.cartao-orc .sw span::after { width: 22px; height: 22px; border-radius: 11px; }
.cartao-orc .sw input:checked + span::after { left: 23px; }

/* Editor de orçamento */
.camera-ponto { position: fixed; inset: 0; z-index: 200; background: #0e1328; color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; }
.camera-ponto video { width: min(100%, 420px); aspect-ratio: 3 / 4; object-fit: cover; border-radius: 16px; background: #000; transform: scaleX(-1); }
.camera-ponto .contador { font-size: 64px; font-weight: 700; color: var(--acento); line-height: 1; min-height: 64px; font-variant-numeric: tabular-nums; }
.camera-ponto p { max-width: 320px; margin: 0; color: #d7dbe8; }
.camera-ponto.tirada video { outline: 6px solid #fff; }
.instalar-app { margin-top: 12px; }
.passos-instalar { padding-left: 1.2rem; line-height: 1.7; }
.pg-offline { background: var(--marca); color: #fff; }
.offline { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px; text-align: center; }
.offline h1 { margin: 12px 0 0; color: #fff; }
.offline p { max-width: 360px; color: #d7dbe8; margin: 0 0 8px; }
.lista-anexos { display: flex; flex-direction: column; gap: 10px; }
.anexo { display: flex; align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--borda); border-radius: 10px; }
.anexo .thumb { width: 88px; height: 66px; flex: none; border-radius: 6px; overflow: hidden; background: var(--fundo); }
.anexo .thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.anexo label { margin-bottom: 4px; }
.editor-orc { display: flex; flex-wrap: wrap; gap: 20px; align-items: flex-start; }
.editor-orc .col-principal { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.editor-orc .col-lateral { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; position: sticky; top: 84px; }
.editor-orc .card + .card { margin-top: 0; }
.editor-orc h2 { margin-bottom: 14px; }
.editor-orc .card-titulo h2 { margin: 0; }
.grade-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px 16px; }
.grade-campos .campo, .grade-ref .campo { margin: 0; }
.grade-campos .span2, .grade-ref .span2 { grid-column: span 2; }
.grade-campos .largo { grid-column: span 2; }
.grade-campos input, .grade-campos select, .grade-ref input { height: 42px; }
.campo-check { display: flex; align-items: flex-end; }
.campo-check .check { height: 42px; font-size: 13.5px; font-weight: 500; color: #3a4156; }
.secao-itens { display: flex; flex-direction: column; gap: 14px; }
.secao-itens .card-titulo { margin-bottom: 0; }
.visita { border: 1px solid var(--borda); border-radius: var(--raio-m); padding: 16px; display: flex; flex-direction: column; gap: 14px; background: #fcfcfd; }
.calc { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 13px; color: #3a4156; background: var(--fundo); border-radius: var(--raio-p); padding: 10px 12px; }
.calc .calc-esq { flex: 1; min-width: 0; }
.calc .calc-total { font-size: 14px; color: var(--texto); }
.orc-ocorrencia { border-left: 2px solid var(--acento); padding-left: 14px; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.orc-ocorrencia .campo { margin: 0; }
.orc-ocorrencia textarea { min-height: 64px; }
.rot-oc { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--texto-suave); }
.linha-peca { display: grid; grid-template-columns: minmax(180px, 2.2fr) 90px 130px 130px 36px; gap: 8px 12px; align-items: end; }
.linha-peca .campo { margin: 0; }
.linha-peca .detalhe-linha, .linha-peca .fotos-linha { grid-column: 1 / -1; }
.linha-peca .detalhe-linha input { height: 34px; min-height: 34px; font-size: 13px; }
.linha-peca + .linha-peca { padding-top: 10px; border-top: 1px solid var(--borda-fraca); }
.linha-peca .total-linha { height: 42px; display: flex; align-items: center; justify-content: flex-end; font-weight: 600; }
.linha-peca .acao-linha { padding-bottom: 4px; }
.num-dir { text-align: right; font-family: var(--fonte-mono); }
.vazio-tracejado { padding: 18px; border: 1px dashed var(--borda-forte); border-radius: var(--raio-m); text-align: center; color: var(--texto-suave); }
.tot { width: 100%; border-collapse: collapse; }
.tot td { padding: 9px 0; border-bottom: 1px solid var(--borda-fraca); }
.tot td:last-child { text-align: right; font-family: var(--fonte-mono); white-space: nowrap; }
.tot input.desconto { width: 110px; height: 32px; min-height: 32px; display: inline-block; padding: 0 8px; }
.liquido { display: flex; justify-content: space-between; align-items: baseline; padding-top: 12px; gap: 12px; }
.liquido span:first-child { font-weight: 600; }
.liquido .mono { font-size: 28px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; }
.grade-ref { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.salvo { font-size: 12.5px; display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.salvo .ic { color: var(--ok); }
.tabela input[type=date].inline { min-height: 32px; padding: .2rem .4rem; width: auto; }
.fotos-grupo .fotos-grid { grid-template-columns: repeat(auto-fill, 88px); }
.fotos-grupo .thumb { aspect-ratio: 4 / 3; }

@media (max-width: 1100px) {
  .revisao .previa { position: static; }
  .moldura-previa { height: 80vh; }
}

/* Celular e tablet: sem barra superior; cada página tem o próprio cabeçalho; barra de abas e menu em gaveta */
@media (max-width: 900px) {
  .admin-app { grid-template-columns: 1fr; background: none; }
  .lateral { position: fixed; inset: 0 auto 0 0; width: min(86vw, 300px); transform: translateX(-105%); transition: transform .2s ease; height: 100%; }
  .lateral.aberta { transform: none; box-shadow: var(--sombra-alta); }
  .lateral-fundo { position: fixed; inset: 0; background: rgba(11, 15, 36, .45); z-index: 790; }
  .lateral-fundo.aberto { display: block; }
  .topbar { display: none; }
  .principal { padding: 0 16px calc(96px + env(safe-area-inset-bottom)); }
  h1 { font-size: 22px; }
  .so-movel { display: revert !important; }
  .so-desktop { display: none !important; }
  /* cabeçalho branco da página (título + ação principal) */
  .cab-pagina { margin: 0 -16px 12px; padding: 14px 16px 12px; background: #fff; border-bottom: 1px solid var(--borda); align-items: center; flex-wrap: nowrap; }
  .cab-pagina > div:first-child { min-width: 0; flex: 1; }
  .cab-pagina .sobretitulo { display: none; }
  .cab-pagina h1 { margin: 0; overflow: hidden; text-overflow: ellipsis; }
  .cab-pagina .pequeno a, .cab-pagina a.pequeno, .voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-suave); text-decoration: none; font-size: 13px; margin-bottom: 2px; }
  .acoes-topo { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
  .acoes-topo .btn:not(.principal-movel) { display: none; }
  .acoes-topo .btn.principal-movel { width: 44px; height: 44px; padding: 0; border-radius: 12px; }
  .acoes-topo .btn.principal-movel .rot { display: none; }
  .extra-movel { display: flex !important; }
  .cab-pagina:has(+ .abas) { border-bottom: 0; }
  .cab-pagina + .abas { margin: -12px -16px 0; padding: 0 16px; background: #fff; gap: 24px; }
  .abas + #conteudo > .extra-movel { margin-top: 0; padding-top: 12px; }
  .acoes-movel { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
  .acoes-movel .btn { flex: 1 1 auto; }
  /* Início no celular */
  .saudacao { margin: 0 -16px; padding: 18px 18px 22px; background: var(--marca); color: #fff; flex-direction: column; align-items: stretch; gap: 18px; }
  .saudacao .topo-movel { display: flex; align-items: center; justify-content: space-between; }
  .saudacao .topo-movel img { height: 28px; }
  .saudacao .topo-movel .btn { width: 44px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .2); background: transparent; color: #fff; padding: 0; }
  .saudacao .sobretitulo { color: var(--acento); font-size: 11.5px; }
  .saudacao h1 { font-size: 24px; margin-top: 4px; color: #fff; }
  .saudacao .resumo { display: none; }
  .grade-inicio { gap: 14px; margin-top: 10px; }
  .grid-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; order: -1; }
  .grid-kpi .indicador { padding: 14px; gap: 4px; }
  .grid-kpi .indicador .rotulo { font-size: 11px; }
  .grid-kpi .indicador .valor { font-size: 26px; }
  .grid-kpi .indicador .valor.moeda { font-size: 20px; margin-top: 2px; }
  .grid-kpi .indicador .detalhe { display: none; }
  .grid-areas { display: none; }
  .lista-areas-movel { display: block; padding: 0; }
  .lista-areas-movel a { display: flex; align-items: center; gap: 14px; padding: 14px; text-decoration: none; color: var(--texto); }
  .lista-areas-movel a + a { border-top: 1px solid var(--borda-fraca); margin: 0 14px; padding-left: 0; padding-right: 0; }
  .lista-areas-movel .ic-caixa { width: 40px; height: 40px; border-radius: 10px; background: var(--fundo); display: flex; align-items: center; justify-content: center; color: var(--marca); flex: none; }
  .lista-areas-movel strong { font-weight: 600; display: block; }
  .lista-areas-movel .sub { color: var(--texto-suave); font-size: 12.5px; }
  .rotulo-secao-movel { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-suave); }
  .cartoes-movel { display: flex; flex-direction: column; gap: 10px; }
  .cartoes-movel .card { padding: 14px; display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--texto); }
  .tabbar { display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 700; height: calc(72px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--borda); padding-bottom: env(safe-area-inset-bottom); }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding-top: 8px; font: 600 11px var(--fonte); color: var(--texto-suave); text-decoration: none; background: none; border: 0; cursor: pointer; }
  .tabbar .ativo { color: var(--marca); }
  .filtros { gap: 10px; }
  .filtros .campo { min-width: calc(50% - 5px); flex: 1; }
  .filtros .campo.cresce { flex-basis: 100%; }
  .tabela th, .tabela td { padding: 12px 14px; }
  .segmentos { flex-wrap: nowrap; overflow-x: auto; }
  .segmentos button { flex: none; }
  .grafico-colunas .col { width: 44px; }
  .editor-orc .col-lateral { position: static; }
  .linha-peca { grid-template-columns: 1fr 70px 100px; }
  .linha-peca .campo:nth-child(4) { grid-column: 1 / 3; }
  .grade-campos .span2, .grade-campos .largo { grid-column: 1 / -1; }
  .legenda-areas .val { font-size: 15px; }
}
@media print {
  .lateral, .topbar, .tabbar { display: none !important; }
  .admin-app { display: block; }
}