:root {
  --navy: #14213d; --navy2: #1f3158; --ouro: #c9a96e; --ouro2: #e6d3ab; --fundo: #f6f3ee; --card: #ffffff;
  --texto: #1b2333; --suave: #6b7385; --linha: #e5e0d6; --verde: #2e7d4f; --vermelho: #b3392f; --amarelo: #b7791f;
  --raio: 14px; --sombra: 0 1px 2px rgba(20,33,61,.06), 0 4px 14px rgba(20,33,61,.06);
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--fundo); color: var(--texto); font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
a { color: var(--navy2); }
button { font: inherit; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
.carregando { padding: 40px; text-align: center; color: var(--suave); }

/* layout */
.topo { position: sticky; top: 0; z-index: 20; background: var(--navy); color: #fff; display: flex; align-items: center; gap: 12px;
  padding: calc(10px + env(safe-area-inset-top, 0px)) max(16px, env(safe-area-inset-right)) 10px max(16px, env(safe-area-inset-left)); }
.topo .marca { font-weight: 700; letter-spacing: .2px; display: flex; align-items: center; gap: 10px; }
.topo .marca img { width: 30px; height: 30px; border-radius: 8px; }
.topo .marca small { color: var(--ouro2); font-weight: 500; }
.topo .esp { flex: 1; }
.topo .usuario { font-size: 13px; color: var(--ouro2); }
.topo button.sair { background: transparent; border: 1px solid rgba(255,255,255,.25); color: #fff; border-radius: 10px; padding: 6px 10px; font-size: 13px; }
.corpo { display: flex; min-height: calc(100vh - 54px); }
.lateral { width: 220px; flex: 0 0 220px; background: #fff; border-right: 1px solid var(--linha); padding: 14px 10px; position: sticky; top: 54px; height: calc(100vh - 54px); overflow: auto; }
.lateral a { display: block; padding: 9px 12px; border-radius: 10px; text-decoration: none; color: var(--texto); margin-bottom: 2px; }
.lateral a.ativo { background: var(--navy); color: #fff; }
.lateral a:hover:not(.ativo) { background: #f1ece3; }
.conteudo { flex: 1; min-width: 0; padding: 18px max(16px, env(safe-area-inset-right)) 90px max(16px, env(safe-area-inset-left)); max-width: 1100px; }
.rodape-nav { display: none; }
@media (max-width: 820px) {
  .lateral { display: none; }
  .topo .usuario { display: none; }
  .rodape-nav { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: #fff; border-top: 1px solid var(--linha);
    padding: 6px max(8px, env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom, 0px)) max(8px, env(safe-area-inset-left)); justify-content: space-around; }
  .rodape-nav a, .rodape-nav button { flex: 1; text-align: center; text-decoration: none; color: var(--suave); font-size: 11px; padding: 4px 2px; background: none; border: 0; }
  .rodape-nav .ic { display: block; font-size: 20px; line-height: 1.1; }
  .rodape-nav .ativo { color: var(--navy); font-weight: 600; }
}
.menu-mais { position: fixed; inset: 0; background: rgba(20,33,61,.45); z-index: 40; display: flex; align-items: flex-end; }
.menu-mais .folha { background: #fff; width: 100%; border-radius: 18px 18px 0 0; padding: 14px 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
.menu-mais a { display: block; padding: 13px 8px; border-bottom: 1px solid var(--linha); text-decoration: none; color: var(--texto); }

/* títulos e controles */
h1 { font-size: 22px; margin: 4px 0 14px; color: var(--navy); }
h2 { font-size: 16px; margin: 0 0 10px; color: var(--navy); }
.barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.barra .esp { flex: 1; }
.busca { flex: 1 1 220px; min-width: 0; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.bt { border: 0; background: var(--navy); color: #fff; border-radius: 12px; padding: 10px 14px; font-weight: 600; }
.bt.ouro { background: var(--ouro); color: var(--navy); }
.bt.leve { background: #fff; color: var(--navy); border: 1px solid var(--linha); font-weight: 500; }
.bt.peq { padding: 6px 10px; font-size: 13px; border-radius: 10px; }
.bt:disabled { opacity: .55; }
.abas { display: flex; gap: 6px; overflow-x: auto; margin-bottom: 12px; padding-bottom: 2px; }
.abas a { white-space: nowrap; text-decoration: none; padding: 7px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--linha); color: var(--texto); font-size: 14px; }
.abas a.ativo { background: var(--navy); color: #fff; border-color: var(--navy); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.chip { border: 1px solid var(--linha); background: #fff; border-radius: 999px; padding: 5px 11px; font-size: 13px; color: var(--texto); }
.chip.ativo { background: var(--ouro2); border-color: var(--ouro); color: var(--navy); font-weight: 600; }
.chip b { margin-left: 4px; }

/* cartões */
.grupo { margin: 18px 0 8px; display: flex; align-items: center; gap: 8px; color: var(--suave); font-size: 13px; text-transform: uppercase; letter-spacing: .6px; font-weight: 600; }
.grupo .n { background: var(--linha); color: var(--texto); border-radius: 999px; padding: 1px 8px; font-size: 12px; }
.lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 10px; }
@media (max-width: 520px) { .lista { grid-template-columns: 1fr; } }
.card { background: var(--card); border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; border: 1px solid transparent; min-width: 0; }
.card:hover { border-color: var(--ouro2); }
.card .mini { width: 54px; height: 54px; border-radius: 10px; object-fit: cover; flex: 0 0 54px; background: #eee; }
.card .info { flex: 1; min-width: 0; }
.card .t { font-weight: 650; color: var(--navy); overflow-wrap: anywhere; }
.card .s { color: var(--suave); font-size: 13.5px; margin-top: 2px; overflow-wrap: anywhere; }
.card .acoes { display: flex; gap: 6px; flex-direction: column; align-items: flex-end; }
.etq { display: inline-block; font-size: 12px; border-radius: 999px; padding: 1px 8px; background: #efe9dd; color: var(--navy); margin: 3px 4px 0 0; }
.etq.vermelho { background: #f6dcd9; color: var(--vermelho); }
.etq.verde { background: #dcefe3; color: var(--verde); }
.vazio { color: var(--suave); padding: 24px; text-align: center; background: #fff; border-radius: var(--raio); }

/* dashboard */
.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; margin-bottom: 16px; }
.kpi { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 12px 14px; text-decoration: none; color: inherit; display: block; min-width: 0; }
.kpi .r { font-size: 12.5px; color: var(--suave); }
.kpi .v { font-size: 22px; font-weight: 700; color: var(--navy); margin-top: 2px; overflow-wrap: anywhere; }
.kpi .d { font-size: 12.5px; color: var(--suave); margin-top: 2px; }
.kpi.destaque { background: var(--navy); }
.kpi.destaque .r, .kpi.destaque .d { color: var(--ouro2); }
.kpi.destaque .v { color: #fff; }
.blocos { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
@media (max-width: 520px) { .blocos { grid-template-columns: 1fr; } }
.bloco { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra); padding: 14px; min-width: 0; }
.bloco .linha { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px solid #f0ebe1; font-size: 14px; }
.bloco .linha:last-child { border-bottom: 0; }
.bloco .linha span:first-child { min-width: 0; overflow-wrap: anywhere; }
.bloco .ver { display: inline-block; margin-top: 8px; font-size: 13px; }

/* painel de detalhe */
.cortina { position: fixed; inset: 0; background: rgba(20,33,61,.45); z-index: 50; display: flex; justify-content: flex-end; }
.gaveta { background: var(--fundo); width: min(560px, 100%); height: 100%; overflow: auto; padding: calc(16px + env(safe-area-inset-top, 0px)) 18px calc(24px + env(safe-area-inset-bottom, 0px)); }
@media (max-width: 620px) { .cortina { align-items: flex-end; } .gaveta { height: 92vh; border-radius: 18px 18px 0 0; } }
.gaveta .cab { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 12px; }
.gaveta .cab h2 { flex: 1; font-size: 19px; margin: 0; overflow-wrap: anywhere; }
.fechar { background: #fff; border: 1px solid var(--linha); border-radius: 10px; width: 36px; height: 36px; font-size: 18px; }
.sec { background: #fff; border-radius: var(--raio); padding: 12px 14px; margin-bottom: 12px; box-shadow: var(--sombra); }
.sec h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--suave); margin: 0 0 8px; }
.par { display: flex; gap: 12px; padding: 6px 0; border-bottom: 1px solid #f2ede4; font-size: 14px; }
.par:last-child { border-bottom: 0; }
.par .k { color: var(--suave); flex: 0 0 38%; }
.par .v { flex: 1; min-width: 0; overflow-wrap: anywhere; white-space: pre-wrap; }
.campo { margin-bottom: 12px; }
.campo label { display: block; font-size: 13px; color: var(--suave); margin-bottom: 4px; }
.campo input[type=text], .campo input[type=number], .campo input[type=date], .campo input[type=datetime-local], .campo select, .campo textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 12px; background: #fff; }
.campo textarea { min-height: 84px; resize: vertical; }
.campo .ajuda { font-size: 12.5px; color: var(--suave); margin-top: 4px; }
.campo .opcoes-multi { display: flex; flex-wrap: wrap; gap: 6px; }
.campo .opcoes-multi label { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--linha); background: #fff; padding: 6px 10px; border-radius: 999px; font-size: 13.5px; color: var(--texto); margin: 0; }
.check { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: #fff; border: 1px solid var(--linha); border-radius: 12px; }
.check input { width: 20px; height: 20px; accent-color: var(--navy); }
.fotos { display: flex; gap: 8px; flex-wrap: wrap; }
.fotos .f { position: relative; }
.fotos img { width: 84px; height: 84px; object-fit: cover; border-radius: 10px; display: block; }
.fotos .arq { display: inline-flex; align-items: center; gap: 6px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; background: #fff; font-size: 13px; text-decoration: none; }
.fotos .x { position: absolute; top: -6px; right: -6px; width: 22px; height: 22px; border-radius: 50%; border: 0; background: var(--vermelho); color: #fff; font-size: 13px; line-height: 22px; padding: 0; }
.rodape-gaveta { position: sticky; bottom: calc(-24px - env(safe-area-inset-bottom, 0px)); background: var(--fundo); padding: 12px 0 4px; display: flex; gap: 10px; }
.rodape-gaveta .bt { flex: 1; }
.aviso { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(84px + env(safe-area-inset-bottom, 0px)); background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 12px; z-index: 80; box-shadow: var(--sombra); max-width: calc(100% - 32px); }
.aviso.erro { background: var(--vermelho); }

/* login */
.login { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px max(16px, env(safe-area-inset-right)) 24px max(16px, env(safe-area-inset-left)); background: var(--navy); }
.login .caixa { background: #fff; border-radius: 20px; padding: 26px 22px; width: min(400px, 100%); box-shadow: 0 10px 40px rgba(0,0,0,.25); }
.login img { width: 64px; height: 64px; border-radius: 14px; display: block; margin: 0 auto 10px; }
.login h1 { text-align: center; margin: 0 0 4px; }
.login p { color: var(--suave); text-align: center; margin: 0 0 18px; font-size: 14px; }
.login .passo { display: flex; gap: 10px; align-items: flex-start; margin: 14px 0; font-size: 14px; }
.login .num { flex: 0 0 24px; height: 24px; border-radius: 50%; background: var(--ouro); color: var(--navy); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.login input { width: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: 12px; font-size: 16px; }
.login .codigo { letter-spacing: 6px; text-align: center; font-size: 22px; font-weight: 700; }
.login .bt { width: 100%; padding: 13px; margin-top: 6px; }
.login .zap { display: block; text-align: center; background: #25d366; color: #fff; text-decoration: none; border-radius: 12px; padding: 12px; font-weight: 600; margin-top: 6px; }
.login .erro { color: var(--vermelho); font-size: 14px; text-align: center; min-height: 20px; margin-top: 8px; }
.login .num-zap { text-align: center; font-size: 13px; color: var(--suave); margin-top: 6px; user-select: all; }

.card-app{border:1px solid var(--ouro,#c9a96e);margin-bottom:16px}
.card-app .passo{display:flex;flex-direction:column;gap:6px;padding:10px 0;border-top:1px solid rgba(0,0,0,.06)}
.card-app .passo:first-of-type{border-top:0}
.card-app .passo span{font-size:14px;line-height:1.4;opacity:.85}
.card-app .passo .bt{align-self:flex-start;margin-top:4px}
.rodape-app{margin:18px 0 8px;text-align:center}