* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 var(--fonte); -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--acento); }
.carregando { padding: 64px 16px; text-align: center; color: var(--texto-3); }
.carregando::before { content: ""; display: block; width: 28px; height: 28px; margin: 0 auto 12px; border-radius: 50%; border: 3px solid var(--borda); border-top-color: var(--marca); animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }

/* ---------- barra superior ---------- */
.topo {
  position: sticky; top: 0; z-index: 30; height: 60px;
  display: flex; align-items: center; gap: 20px; padding: 0 24px;
  background: var(--marca); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.06), 0 2px 10px rgba(13, 18, 38, .2);
}
.marca { display: flex; align-items: center; gap: 12px; color: #fff; text-decoration: none; }
.marca .logo { width: 36px; height: 36px; border-radius: 9px; background: #fff; display: grid; place-items: center; }
.marca .logo img { width: 26px; height: 29px; object-fit: contain; }
.marca b { display: block; font-size: 15px; letter-spacing: .01em; }
.marca small { display: block; font-size: 11.5px; opacity: .65; font-weight: 500; }
.nav { display: flex; gap: 4px; margin-left: 12px; }
.nav a {
  display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px; border-radius: 9px;
  color: rgba(255,255,255,.75); text-decoration: none; font-weight: 600; font-size: 14px;
}
.nav a:hover { color: #fff; background: rgba(255,255,255,.08); }
.nav a.ativo { color: #fff; background: rgba(255,255,255,.14); }
.conta { margin-left: auto; position: relative; }
.conta > button {
  display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 8px 0 4px; border-radius: 999px;
  border: 0; background: transparent; color: #fff; cursor: pointer;
}
.conta > button:hover { background: rgba(255,255,255,.08); }
.avatar { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; font-weight: 700; background: #3b4bb5; color: #fff; flex: none; }
.avatar.p { width: 28px; height: 28px; font-size: 11px; }
.conta .quem { text-align: left; line-height: 1.15; }
.conta .quem b { display: block; font-size: 13.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.conta .quem small { font-size: 11.5px; opacity: .7; }
.menu {
  position: absolute; right: 0; top: 50px; width: 220px; padding: 6px; background: #fff; color: var(--texto);
  border-radius: 12px; box-shadow: var(--sombra-3); border: 1px solid var(--borda); animation: sobe .12s ease-out;
}
.menu button { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 0; background: none; border-radius: 8px; cursor: pointer; font-weight: 500; text-align: left; }
.menu button:hover { background: var(--superficie-2); }
.menu button.perigo { color: var(--erro); }

/* ---------- página ---------- */
.pagina { max-width: 1120px; margin: 0 auto; padding: 28px 24px 120px; }
.cab-pagina { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.cab-pagina .titulos { margin-right: auto; min-width: 0; }
.cab-pagina h1 { margin: 0; font-size: 24px; font-weight: 750; letter-spacing: -.015em; }
.cab-pagina p { margin: 4px 0 0; color: var(--texto-2); }
.voltar { display: inline-flex; align-items: center; gap: 4px; color: var(--texto-2); text-decoration: none; font-weight: 600; font-size: 13.5px; margin-bottom: 8px; }
.voltar:hover { color: var(--texto); }
.voltar .ic { width: 16px; height: 16px; }

/* ---------- indicadores ---------- */
.stats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin-bottom: 18px; }
.stat {
  text-align: left; padding: 14px 16px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda);
  box-shadow: var(--sombra-1); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.stat:hover { border-color: var(--borda-forte); }
.stat.ativo { border-color: var(--marca); box-shadow: 0 0 0 3px rgba(29, 39, 102, .1); }
.stat .n { display: block; font-size: 24px; font-weight: 750; letter-spacing: -.02em; }
.stat .r { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); font-weight: 500; }
.stat .r::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--cor, var(--texto-3)); }

.ferramentas { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.busca { position: relative; flex: 1 1 260px; }
.busca .ic { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--texto-3); }
.busca input { width: 100%; height: 42px; padding: 0 12px 0 38px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: #fff; }
.ferramentas select { height: 42px; padding: 0 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: #fff; max-width: 100%; }
.busca input:focus, .ferramentas select:focus { outline: 3px solid rgba(31, 111, 229, .25); border-color: var(--acento); }

/* ---------- lista de relatórios ---------- */
.lista { display: grid; gap: 10px; }
.rt {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; align-items: center;
  padding: 16px 18px; border-radius: var(--raio); background: var(--superficie); border: 1px solid var(--borda);
  box-shadow: var(--sombra-1); cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.rt:hover { border-color: var(--borda-forte); box-shadow: var(--sombra-2); }
.rt .linha1 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.rt .num { font: 700 12px/1 ui-monospace, "SF Mono", Consolas, monospace; padding: 5px 8px; border-radius: 6px; background: var(--acento-claro); color: var(--marca-2); letter-spacing: .03em; }
.rt .cliente { font-weight: 700; font-size: 15.5px; }
.rt .desc { color: var(--texto-2); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt .metas { display: flex; flex-wrap: wrap; gap: 4px 16px; color: var(--texto-2); font-size: 13px; }
.rt .metas span { display: inline-flex; align-items: center; gap: 6px; }
.rt .metas .ic { width: 15px; height: 15px; color: var(--texto-3); }
.rt .lado { grid-column: 2; grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.rt .acoes { display: flex; gap: 6px; }
.audit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.audit .ic { width: 14px; height: 14px; }
.audit.lido { color: var(--ok); }
.audit.nao-lido { color: var(--aviso); font-weight: 600; }

.pill { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: 999px; font-size: 12px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
.pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pill.aberto { background: var(--aviso-claro); color: var(--aviso); }
.pill.finalizado { background: var(--ok-claro); color: var(--ok); }
.pill.sem { background: #eef0f4; color: var(--texto-2); }
.pill.trava { background: #eef0f4; color: var(--texto-2); }
.pill.trava::before { display: none; }

.vazio { text-align: center; padding: 56px 20px; background: var(--superficie); border: 1px dashed var(--borda-forte); border-radius: var(--raio); color: var(--texto-2); }
.vazio .ic { width: 40px; height: 40px; color: var(--texto-3); stroke-width: 1.5; margin-bottom: 8px; }
.vazio b { display: block; color: var(--texto); font-size: 16px; margin-bottom: 4px; }

/* ---------- cartões e campos ---------- */
.card { background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: var(--sombra-1); padding: 22px; margin-bottom: 16px; }
.secao { scroll-margin-top: 80px; }
.secao-topo { display: flex; align-items: center; gap: 12px; margin: -2px 0 18px; }
.secao-topo h2 { margin: 0; font-size: 17px; font-weight: 700; }
.secao-topo .pill { margin-left: auto; }
.numero { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; flex: none; font-size: 13px; font-weight: 700; background: var(--acento-claro); color: var(--marca-2); }
.numero.feito { background: var(--ok); color: #fff; }
.numero .ic { width: 16px; height: 16px; stroke-width: 3; }
.dica { color: var(--texto-2); font-size: 13.5px; margin: -10px 0 16px; }

.campo { margin-bottom: 18px; }
.campo:last-child { margin-bottom: 0; }
.campo > label, .campo > .rotulo { display: block; font-weight: 600; font-size: 13.5px; margin-bottom: 7px; color: var(--texto); }
.campo .opc { font-weight: 400; color: var(--texto-3); }
.campo .ajuda { display: block; font-weight: 400; font-size: 12.5px; color: var(--texto-2); margin-top: 2px; }
.entrada, .campo input:not([type=file]), .campo select, .campo textarea {
  width: 100%; min-height: 44px; padding: 10px 12px; border: 1px solid var(--borda-forte); border-radius: var(--raio-p); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.campo textarea { min-height: 92px; resize: vertical; line-height: 1.45; }
.campo input:focus, .campo select:focus, .campo textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(31, 111, 229, .18); }
.campo input::placeholder, .campo textarea::placeholder { color: var(--texto-3); }
.msg-erro { display: none; color: var(--erro); font-size: 12.5px; font-weight: 500; margin-top: 6px; }
.erro > .msg-erro { display: flex; align-items: center; gap: 6px; }
.campo.erro input, .campo.erro textarea, .campo.erro select { border-color: var(--erro); }
.campo.erro .chips { box-shadow: 0 0 0 1px var(--erro); border-radius: 10px; padding: 6px; }

.grade { display: grid; gap: 0 16px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  display: inline-flex; align-items: center; gap: 9px; min-height: 40px; padding: 7px 14px 7px 11px;
  border: 1px solid var(--borda-forte); border-radius: 10px; background: #fff; cursor: pointer; font-size: 13.5px; font-weight: 500; text-align: left;
  transition: border-color .12s, background .12s;
}
.chip:hover { border-color: #aab3c5; }
.chip::before { content: ""; width: 17px; height: 17px; flex: none; border: 2px solid #a5adbe; border-radius: 5px; background: #fff; transition: .12s; }
.chip.radio::before { border-radius: 50%; }
.chip.sel { border-color: var(--marca-2); background: #eef1fd; color: var(--marca); font-weight: 600; }
.chip.sel::before { border-color: var(--marca-2); background: var(--marca-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' fill='none' stroke='%23fff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/13px no-repeat; }
.chip.radio.sel::before { background: #fff; box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 9px var(--marca-2); }
.chip:disabled { opacity: .45; cursor: default; }

.bloco { border: 1px solid var(--borda); background: var(--superficie-2); border-radius: 12px; padding: 18px; margin-bottom: 16px; }
.bloco > h3 { margin: 0 0 14px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--marca-2); }
.extra { margin-top: 10px; }

.leitura { display: grid; gap: 14px 24px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.leitura > div b { display: block; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-3); font-weight: 650; margin-bottom: 3px; }
.leitura > div span { font-weight: 500; }
.leitura .largo { grid-column: 1 / -1; }

.aviso { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; margin-bottom: 16px; font-size: 14px; border: 1px solid transparent; }
.aviso > .ic { margin-top: 1px; }
.aviso.erro { background: var(--erro-claro); color: #8f1f19; border-color: #f6c9c5; }
.aviso.ok { background: var(--ok-claro); color: #0b5a3e; }
.aviso.info { background: #eef3fe; color: #213a85; border-color: #d6e2fb; }
.aviso ul { margin: 6px 0 0; padding-left: 18px; }
.aviso li { margin: 3px 0; }
.aviso li a { color: inherit; }

/* ---------- editor ---------- */
.editor { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 24px; align-items: start; }
.etapas { position: sticky; top: 84px; background: var(--superficie); border: 1px solid var(--borda); border-radius: var(--raio); padding: 16px; box-shadow: var(--sombra-1); }
.etapas .prog-txt { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--texto-2); font-weight: 600; margin-bottom: 8px; }
.barra-prog { height: 6px; border-radius: 3px; background: #e9ecf2; overflow: hidden; margin-bottom: 14px; }
.barra-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--acento), var(--ok)); border-radius: 3px; transition: width .3s; }
.etapas a { display: flex; align-items: center; gap: 10px; padding: 7px 8px; border-radius: 8px; color: var(--texto-2); text-decoration: none; font-size: 13.5px; font-weight: 500; }
.etapas a:hover { background: var(--superficie-2); color: var(--texto); }
.etapas a .bolinha { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: #eef0f4; color: var(--texto-2); flex: none; }
.etapas a.feito .bolinha { background: var(--ok); color: #fff; }
.etapas a.feito .bolinha .ic { width: 13px; height: 13px; stroke-width: 3; }
.etapas a.pendente .bolinha { background: var(--erro-claro); color: var(--erro); }

.fotos { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); margin-bottom: 14px; }
.foto { border: 1px solid var(--borda); border-radius: 12px; overflow: hidden; background: #fff; }
.foto .img { aspect-ratio: 4 / 3; background: #eef0f4; display: grid; place-items: center; color: var(--texto-2); font-size: 13px; position: relative; }
.foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto .n { position: absolute; left: 8px; top: 8px; background: rgba(13, 18, 38, .7); color: #fff; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 6px; }
.foto .corpo { padding: 10px; }
.foto textarea { width: 100%; min-height: 62px; padding: 8px 10px; border: 1px solid var(--borda-forte); border-radius: 8px; resize: vertical; font-size: 13.5px; }
.foto textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px rgba(31, 111, 229, .18); }
.foto.sem-desc textarea { border-color: var(--erro); background: #fffafa; }
.foto .ferr { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.foto .ferr .btn-icone { width: 32px; height: 32px; }
.foto .ferr .btn-icone.perigo { color: var(--erro); }
.carregando-foto::before { content: ""; width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d5dae4; border-top-color: var(--marca); animation: gira .8s linear infinite; margin-bottom: 6px; }
.carregando-foto { display: grid; justify-items: center; }

.itens { display: grid; gap: 12px; margin: 14px 0; }
.item-din { border: 1px solid var(--borda); border-radius: 12px; padding: 14px; background: var(--superficie-2); }
.item-din .topo-item { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 10px; }
.item-din .campo { margin-bottom: 12px; }

.assin { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.assin-box { border: 1.5px dashed var(--borda-forte); border-radius: 12px; min-height: 120px; display: grid; place-items: center; background: var(--superficie-2); cursor: pointer; padding: 8px; transition: border-color .15s; }
.assin-box:hover { border-color: var(--acento); }
.assin-box img { max-width: 100%; max-height: 120px; }
.assin-box span { display: flex; align-items: center; gap: 8px; color: var(--texto-2); font-size: 14px; font-weight: 500; }
.salvar-assin { display: flex; gap: 10px; align-items: flex-start; margin-top: 12px; padding: 12px; border-radius: 10px; background: var(--acento-claro); cursor: pointer; }
.salvar-assin input { width: 18px; height: 18px; margin-top: 2px; accent-color: var(--marca-2); flex: none; }
.salvar-assin b { display: block; font-size: 14px; }
.salvar-assin small { color: var(--texto-2); font-size: 12.5px; }
.canvas-assin { width: 100%; height: 220px; border: 1px solid var(--borda-forte); border-radius: 12px; touch-action: none; background: #fff; display: block; }

.barra {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 25; background: rgba(255,255,255,.96); backdrop-filter: blur(6px);
  border-top: 1px solid var(--borda); padding: 12px 24px; padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.barra .dentro { max-width: 1120px; margin: 0 auto; display: flex; gap: 10px; align-items: center; }
.estado { display: inline-flex; align-items: center; gap: 7px; margin-right: auto; font-size: 13px; color: var(--texto-2); font-weight: 500; }
.estado .ic { width: 16px; height: 16px; }
.estado.ok { color: var(--ok); }
.estado.falha { color: var(--erro); font-weight: 600; }

/* histórico (auditoria) */
.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding-bottom: 16px; position: relative; }
.linha-tempo li:not(:last-child)::before { content: ""; position: absolute; left: 13.5px; top: 30px; bottom: 2px; width: 1px; background: var(--borda); }
.linha-tempo .ic-ev { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: #eef0f4; color: var(--texto-2); }
.linha-tempo .ic-ev .ic { width: 14px; height: 14px; }
.linha-tempo .ic-ev.ok { background: var(--ok-claro); color: var(--ok); }
.linha-tempo .ic-ev.azul { background: var(--acento-claro); color: var(--acento); }
.linha-tempo .ic-ev.aviso { background: var(--aviso-claro); color: var(--aviso); }
.linha-tempo b { font-weight: 650; }
.linha-tempo .det { color: var(--texto-2); font-size: 13.5px; }
.linha-tempo time { display: block; color: var(--texto-3); font-size: 12px; margin-top: 2px; }

/* ---------- escolher cliente / projetos / técnicos ---------- */
.grade-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.cartao {
  display: flex; flex-direction: column; gap: 4px; text-align: left; padding: 16px; border-radius: var(--raio);
  background: var(--superficie); border: 1px solid var(--borda); box-shadow: var(--sombra-1); cursor: pointer; transition: .15s;
}
.cartao:hover { border-color: var(--marca-2); box-shadow: var(--sombra-2); transform: translateY(-1px); }
.cartao b { font-size: 15px; }
.cartao span { color: var(--texto-2); font-size: 13px; }
.cartao .pill { align-self: flex-start; margin-top: 6px; }
.pessoa { display: flex; align-items: center; gap: 12px; }
.pessoa .avatar { background: var(--acento-claro); color: var(--marca-2); }

/* ---------- login ---------- */
.login { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; }
.login .lado-marca {
  background: radial-gradient(1200px 600px at -10% -20%, #3446b8 0%, transparent 60%), linear-gradient(160deg, #1d2766, #0f1440);
  color: #fff; padding: 48px; display: flex; flex-direction: column; justify-content: space-between;
}
.login .lado-marca .logo-g { width: 64px; height: 64px; border-radius: 16px; background: #fff; display: grid; place-items: center; }
.login .lado-marca .logo-g img { width: 46px; }
.login .lado-marca h2 { font-size: 34px; line-height: 1.15; margin: 0 0 12px; letter-spacing: -.02em; }
.login .lado-marca p { opacity: .75; max-width: 420px; margin: 0; }
.login .lado-marca small { opacity: .55; }
.login .lado-form { display: grid; place-items: center; padding: 32px 20px; background: #fff; }
.login form { width: min(380px, 100%); }
.login .logos { display: flex; align-items: center; gap: 18px; margin-bottom: 28px; }
.login .logos img:first-child { height: 64px; }
.login .logos img:last-child { height: 44px; }
.login h1 { font-size: 24px; margin: 0 0 6px; letter-spacing: -.015em; }
.login .sub { color: var(--texto-2); margin: 0 0 24px; }
.login .btn { width: 100%; min-height: 46px; margin-top: 6px; }

/* ---------- celular ---------- */
@media (max-width: 1000px) {
  .editor { grid-template-columns: 1fr; }
  .etapas { position: static; display: none; }
  .stats { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .topo { padding: 0 14px; gap: 10px; }
  .marca small, .conta .quem { display: none; }
  .nav { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; height: 62px; background: #fff; border-top: 1px solid var(--borda); justify-content: space-around; padding-bottom: env(safe-area-inset-bottom); z-index: 26; }
  .nav a { flex-direction: column; gap: 3px; height: auto; padding: 8px 6px; color: var(--texto-2); font-size: 11.5px; }
  .nav a.ativo { color: var(--marca); background: none; }
  .nav a:hover { background: none; color: var(--texto); }
  body.com-nav .barra { bottom: 62px; }
  body.com-nav .pagina { padding-bottom: 150px; }
  .pagina { padding: 18px 14px 110px; }
  .cab-pagina h1 { font-size: 21px; }
  .card { padding: 16px; }
  .stats { display: flex; gap: 8px; overflow-x: auto; margin: 0 -14px 14px; padding: 2px 14px 4px; scrollbar-width: none; }
  .stat { flex: 0 0 auto; min-width: 112px; padding: 10px 12px; }
  .stat .n { font-size: 20px; }
  .rt { grid-template-columns: 1fr; padding: 14px; }
  .rt .lado { grid-column: 1; grid-row: auto; flex-direction: row; justify-content: space-between; align-items: center; flex-wrap: wrap; margin-top: 4px; }
  .rt .desc { white-space: normal; }
  .barra { padding: 10px 14px; }
  .barra .btn { padding: 0 12px; }
  .login { grid-template-columns: 1fr; }
  .login .lado-marca { display: none; }
  .toasts { bottom: 140px; }
}