:root {
  --navy: #1A3A6B; --navy-2: #24497f; --ambar: #F4A800; --ambar-claro: #FFD978;
  --fundo: #f3f5f9; --card: #fff; --texto: #1f2733; --suave: #667085; --borda: #e2e6ee;
  --verde: #1e8e5a; --vermelho: #c0392b; --roxo: #7a4fbf; --azul: #2f6fd6;
  --raio: 10px;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
       background: var(--fundo); color: var(--texto); font-size: 15px; line-height: 1.45; }
a { color: var(--navy-2); }
h1 { font-size: 1.45rem; margin: 0; color: var(--navy); }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; color: var(--navy); }

/* topo */
.topo { background: var(--navy); color: #fff; position: sticky; top: 0; z-index: 10;
        box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.topo-in { max-width: 1400px; margin: auto; display: flex; align-items: center; gap: 1rem; padding: .6rem 1rem; }
.marca { font-weight: 800; font-size: 1.2rem; letter-spacing: .5px; color: #fff; text-decoration: none; white-space: nowrap; }
.marca b { color: var(--ambar); }
.menu { display: flex; flex-wrap: wrap; gap: .15rem; flex: 1; min-width: 0; }
.menu::-webkit-scrollbar { display: none; }
.menu a { color: #dbe4f3; text-decoration: none; padding: .4rem .6rem; border-radius: 8px; white-space: nowrap; font-size: .95rem; }
.menu a:hover, .menu a.ativo { background: rgba(255,255,255,.12); color: #fff; }
.menu a.ativo { box-shadow: inset 0 -3px 0 var(--ambar); }
.sair { color: #dbe4f3; font-size: .9rem; background: none; border: 0; cursor: pointer; white-space: nowrap; }

main { max-width: 1200px; margin: 1.25rem auto 3rem; padding: 0 1rem; }
.cab { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1rem; }
.cab p { margin: .2rem 0 0; color: var(--suave); }

.card { background: var(--card); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.grade { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.kpi { border-left: 4px solid var(--ambar); }
.kpi .rot { color: var(--suave); font-size: .85rem; }
.kpi .val { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.kpi small { color: var(--suave); }

/* botões */
.btn { display: inline-flex; align-items: center; gap: .35rem; padding: .5rem .9rem; border-radius: 8px; border: 1px solid var(--borda);
       background: #fff; color: var(--navy); text-decoration: none; font-weight: 600; font-size: .92rem; cursor: pointer; }
.btn:hover { border-color: var(--navy-2); }
.btn-p { background: var(--ambar); border-color: var(--ambar); color: #1b1b1b; }
.btn-p:hover { background: #ffb81f; }
.btn-n { background: var(--navy); border-color: var(--navy); color: #fff; }
.btn-z { background: #25D366; border-color: #25D366; color: #fff; }
.btn-x { color: var(--vermelho); }
.btn-sm { padding: .3rem .6rem; font-size: .82rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; }

/* tabelas */
.tab-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-size: .8rem; text-transform: uppercase; letter-spacing: .3px; color: var(--suave);
     border-bottom: 2px solid var(--borda); padding: .5rem .6rem; white-space: nowrap; }
td { border-bottom: 1px solid var(--borda); padding: .55rem .6rem; vertical-align: top; }
tr.link { cursor: pointer; }
tr.link:hover td { background: #f7f9fd; }
.dir { text-align: right; white-space: nowrap; }
.suave { color: var(--suave); font-size: .88rem; }
.forte { font-weight: 700; }

/* etiquetas */
.tag { display: inline-block; padding: .12rem .55rem; border-radius: 999px; font-size: .78rem; font-weight: 600; white-space: nowrap; }
.tag.roxo { background: #efe7fb; color: var(--roxo); }
.tag.azul { background: #e5eefc; color: var(--azul); }
.tag.ambar { background: #fff3d6; color: #9a6a00; }
.tag.verde { background: #e1f4ea; color: var(--verde); }
.tag.vermelho { background: #fbe6e3; color: var(--vermelho); }

/* abas */
.abas { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; }
.abas a { padding: .4rem .8rem; border-radius: 999px; background: #fff; border: 1px solid var(--borda); text-decoration: none;
          color: var(--texto); font-size: .9rem; }
.abas a.ativo { background: var(--navy); color: #fff; border-color: var(--navy); }
.abas a span { opacity: .7; margin-left: .25rem; }

/* formulários */
.busca { display: flex; gap: .5rem; margin-bottom: .75rem; }
.busca input { flex: 1; }
button { font-family: inherit; }
input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #cfd6e2; border-radius: 8px; font: inherit; background: #fff; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--ambar-claro); border-color: var(--ambar); }
input[type=checkbox] { width: auto; }
input[type=color] { height: 2.5rem; padding: .2rem; cursor: pointer; }
.campo:has(select[name=nivel]) { grid-column: 1 / -1; }
.campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: .8rem 1rem; }
.campo label { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .25rem; color: #3a4556; }
.campo .ajuda { font-size: .78rem; color: var(--suave); }
.campo.largo { grid-column: 1 / -1; }
.erro, .errorlist { color: var(--vermelho); font-size: .85rem; margin: .2rem 0; padding: 0; list-style: none; }

.itens td { padding: .35rem .3rem; }
.itens input, .itens select { padding: .4rem .45rem; }
.itens .c-tipo { width: 115px; } .itens .c-un { width: 70px; } .itens .c-n { width: 105px; } .itens .c-del { width: 40px; text-align: center; }
.totais { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.5rem; max-width: 360px; margin-left: auto; }
.totais .t-total { font-size: 1.25rem; font-weight: 800; color: var(--navy); border-top: 2px solid var(--borda); padding-top: .4rem; }

.msgs { list-style: none; padding: 0; margin: 0 0 1rem; }
.msgs li { padding: .6rem .9rem; border-radius: 8px; background: #e1f4ea; color: #145c3b; margin-bottom: .4rem; }
.msgs li.error { background: #fbe6e3; color: var(--vermelho); }

/* gráfico de barras simples */
.barras { display: flex; align-items: flex-end; gap: 6px; height: 160px; padding-top: .5rem; }
.barras .b { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; }
.barras .b i { display: block; width: 100%; background: linear-gradient(180deg, var(--ambar-claro), var(--ambar)); border-radius: 4px 4px 0 0; min-height: 2px; }
.barras .b small { font-size: .7rem; color: var(--suave); margin-top: 4px; }
.vazio { color: var(--suave); text-align: center; padding: 1.5rem; }

.pag { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; }

@media (max-width: 700px) {
  .topo-in { flex-wrap: wrap; gap: .4rem; }
  .menu { order: 3; width: 100%; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .esconde-cel { display: none; }
  h1 { font-size: 1.2rem; }
}

/* ---------- Fase 2: campo (celular), fotos, assinatura, agenda ---------- */
.cartao-os { display: block; text-decoration: none; color: inherit; border-left: 4px solid var(--navy-2); }
.cartao-os:active { background: #f2f5fb; }
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: .5rem; }
.cartao-titulo { font-weight: 700; font-size: 1.05rem; color: var(--navy); margin: .25rem 0; }
.passo summary { cursor: pointer; font-weight: 700; color: var(--navy); font-size: 1.05rem; list-style: none; display: flex; align-items: center; gap: .5rem; }
.passo summary::-webkit-details-marker { display: none; }
.passo[open] summary { margin-bottom: .8rem; }
.num { display: inline-grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--navy); color: #fff; font-size: .9rem; }
.chk { padding: .55rem 0; border-bottom: 1px solid var(--borda); }
.chk label { display: inline-flex; align-items: center; gap: .3rem; margin: .35rem 1rem 0 0; font-size: .95rem; }
.chk input, .tarefa input { width: 1.25rem; height: 1.25rem; }
.tarefa { display: flex; gap: .6rem; align-items: flex-start; padding: .55rem 0; border-bottom: 1px solid var(--borda); font-size: 1rem; }
.grande { width: 100%; justify-content: center; padding: .85rem; font-size: 1.05rem; margin-top: .6rem; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .6rem; margin-bottom: .6rem; }
.fotos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 8px; display: block; }
.fotos span { font-size: .75rem; color: var(--suave); }
.fotos a { text-decoration: none; }
canvas.assinatura { width: 100%; height: 190px; border: 2px dashed #b9c3d3; border-radius: 10px; background: #fff; touch-action: none; display: block; margin-bottom: .4rem; }
.campo + .campo { margin-top: .6rem; }
.checks ul { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem 1rem; }

.semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; }
.dia { background: #fff; border: 1px solid var(--borda); border-radius: var(--raio); padding: .5rem; min-height: 140px; }
.dia.hoje { border: 2px solid var(--ambar); }
.dia h3 { margin: 0 0 .4rem; font-size: .85rem; color: var(--navy); display: flex; justify-content: space-between; }
.ev { display: block; font-size: .8rem; padding: .3rem .4rem; border-radius: 6px; margin-bottom: .3rem; text-decoration: none; color: #1b2430;
      background: #eef2f8; border-left: 3px solid var(--cor, var(--navy-2)); line-height: 1.25; }
.ev.feito { opacity: .5; text-decoration: line-through; }
.ev small { display: block; color: var(--suave); }
@media (max-width: 900px) { .semana { grid-template-columns: 1fr; } .dia { min-height: 0; } }

/* relatórios: barras com dica ao passar o mouse e barras horizontais (série única, cor da marca) */
.barras.alta { height: 220px; gap: 3px; }
.barras .b { min-width: 0; }
.barras .b small { white-space: nowrap; overflow: visible; }
.barras .b { position: relative; cursor: default; }
.barras .b i { border-radius: 4px 4px 0 0; }
.barras .b:hover i { filter: brightness(.92); }
.barras .dica { display: none; position: absolute; bottom: calc(100% - 1.4rem); left: 50%; transform: translateX(-50%); z-index: 3;
                background: var(--navy); color: #fff; font-size: .75rem; padding: .35rem .5rem; border-radius: 6px; white-space: nowrap; pointer-events: none; }
.barras .b:hover .dica { display: block; }
.hbar { margin-bottom: .55rem; }
.hbar-rot { display: flex; justify-content: space-between; gap: .8rem; font-size: .88rem; }
.hbar-rot b { white-space: nowrap; color: var(--texto); }
.hbar-trilho { height: 8px; background: #eef1f6; border-radius: 4px; overflow: hidden; margin-top: .2rem; }
.hbar-trilho i { display: block; height: 100%; background: var(--ambar); border-radius: 0 4px 4px 0; }

/* pagamentos no banco */
.linha-banco { display: grid; grid-template-columns: 1fr 1.6fr auto; gap: .8rem; align-items: center; padding: .7rem 0; border-bottom: 1px solid var(--borda); }
@media (max-width: 700px) { .linha-banco { grid-template-columns: 1fr; } }
.alerta { border-left: 5px solid var(--ambar); background: #fffaf0; }
.alerta a { font-weight: 700; }