/* Jacomini — visual no padrão do Retaguarda Alvorada (Bootstrap/AdminLTE: lateral escura, azul de ação). */
:root {
  --fundo: #f4f6f9; --cartao: #fff; --texto: #1f2937; --suave: #6b7280; --linha: #dee2e6;
  --lateral: #132D44; --lateral-txt: #c2c7d0; --azul: #0d6efd; --verde: #198754; --ambar: #ffc107;
  --laranja: #fd7e14; --vermelho: #dc3545; --ciano: #0dcaf0; --roxo: #6f42c1; --teal: #20c997; --cinza: #6c757d;
  --raio: 8px; --sombra: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { font: 15px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto);
       display: flex; min-height: 100vh; }
a { color: var(--azul); text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h2 { font-size: 1.05rem; margin-bottom: .75rem; }

/* lateral */
.lateral { width: 230px; background: var(--lateral); color: var(--lateral-txt); display: flex; flex-direction: column;
           position: sticky; top: 0; height: 100vh; flex-shrink: 0; }
.marca { display: flex; flex-direction: column; gap: .6rem; align-items: flex-start; padding: 1.1rem 1rem 1rem; color: #fff; border-bottom: 1px solid rgba(255,255,255,.12); }
.marca img { width: 150px; height: auto; display: block; }
.marca .cliente { font-weight: 700; letter-spacing: .04em; font-size: .9rem; background: rgba(255,255,255,.08); border-radius: 6px; padding: .35rem .6rem; width: 100%; }
.marca small { display: block; color: var(--lateral-txt); font-size: .7rem; font-weight: 400; letter-spacing: 0; }
.logo-cel { display: none; width: 30px; height: 30px; border-radius: 7px; vertical-align: middle; margin-right: .5rem; }
.lateral nav { flex: 1; padding: .5rem; }
.lateral nav a { display: flex; gap: .7rem; align-items: center; padding: .6rem .75rem; border-radius: 6px; color: var(--lateral-txt); margin-bottom: 2px; }
.lateral nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.lateral nav a.ativo { background: var(--azul); color: #fff; }
.lateral svg, .barra-baixo svg { width: 20px; height: 20px; flex-shrink: 0; }
.selo-agente { display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-size: .8rem; color: var(--lateral-txt);
               border-top: 1px solid rgba(255,255,255,.12); flex-wrap: wrap; }
.selo-agente i { width: 9px; height: 9px; border-radius: 50%; background: var(--vermelho); }
.selo-agente.on i { background: #28d17c; box-shadow: 0 0 0 3px rgba(40,209,124,.25); }
.selo-agente em { font-style: normal; background: var(--ambar); color: #000; border-radius: 10px; padding: 0 .45rem; font-size: .72rem; }
.selo-agente.mini { border: 0; padding: .25rem .6rem; background: #eef1f5; border-radius: 20px; color: var(--texto); display: none; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topo { background: #fff; border-bottom: 1px solid var(--linha); padding: .75rem 1.25rem; display: flex; align-items: center;
        justify-content: space-between; gap: 1rem; position: sticky; top: 0; z-index: 5; }
.topo h1 { font-size: 1.15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-dir { display: flex; align-items: center; gap: .75rem; font-size: .85rem; color: var(--suave); }
.sair { color: var(--suave); }
main { padding: 1.25rem; max-width: 1280px; width: 100%; }
.barra-baixo { display: none; }

/* blocos */
.cartao { background: var(--cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1rem 1.1rem; margin-bottom: 1rem; }
.cartao.sem-pad { padding: 0; overflow: hidden; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.grade > .cartao { margin-bottom: 0; }
.grade { margin-bottom: 1rem; }
.kpi { border-left: 4px solid var(--azul); }
.kpi b { display: block; font-size: 1.5rem; }
.kpi span { color: var(--suave); font-size: .85rem; }
.kpi.verde { border-color: var(--verde); } .kpi.ambar { border-color: var(--ambar); } .kpi.roxo { border-color: var(--roxo); }

.aviso { padding: .75rem 1rem; border-radius: var(--raio); margin-bottom: 1rem; border: 1px solid; }
.aviso.ok { background: #d1e7dd; border-color: #badbcc; color: #0f5132; }
.aviso.erro { background: #f8d7da; border-color: #f5c2c7; color: #842029; }
.aviso.info { background: #cff4fc; border-color: #b6effb; color: #055160; }

/* barra de ferramentas / filtros */
.ferramentas { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }
.ferramentas form { display: flex; gap: .5rem; flex: 1; min-width: 240px; flex-wrap: wrap; }
.ferramentas input[type=search] { flex: 1; min-width: 160px; }

/* botões (cor pelo verbo, como no Alvorada) */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .5rem .95rem; border-radius: 6px;
       border: 1px solid transparent; font: inherit; font-weight: 500; cursor: pointer; background: var(--azul); color: #fff;
       white-space: nowrap; line-height: 1.2; }
.btn:hover { filter: brightness(.93); }
.btn:disabled { opacity: .55; cursor: wait; }
.btn.verde { background: var(--verde); } .btn.vermelho { background: var(--vermelho); } .btn.laranja { background: var(--laranja); }
.btn.ciano { background: var(--ciano); color: #000; } .btn.roxo { background: var(--roxo); } .btn.cinza { background: var(--cinza); }
.btn.teal { background: var(--teal); color: #000; } .btn.ambar { background: var(--ambar); color: #000; }
.btn.contorno { background: #fff; color: var(--texto); border-color: var(--linha); }
.btn.peq { padding: .3rem .6rem; font-size: .85rem; }
.acoes { display: flex; gap: .5rem; flex-wrap: wrap; }
.rodape-acoes { position: sticky; bottom: 0; background: rgba(244,246,249,.96); backdrop-filter: blur(4px); padding: .75rem 0;
                display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; border-top: 1px solid var(--linha); margin-top: 1rem; z-index: 4; }

/* formulários */
label { display: block; font-size: .8rem; color: var(--suave); margin-bottom: .2rem; font-weight: 500; }
input, select, textarea { width: 100%; padding: .5rem .65rem; border: 1px solid #ced4da; border-radius: 6px; font: inherit; background: #fff; color: var(--texto); }
input:focus, select:focus, textarea:focus { outline: 2px solid rgba(13,110,253,.25); border-color: #86b7fe; }
textarea { min-height: 70px; resize: vertical; }
.campos { display: grid; gap: .75rem; grid-template-columns: repeat(12, 1fr); }
.campos > div { grid-column: span 12; }
.c2 { grid-column: span 2 !important; } .c3 { grid-column: span 3 !important; } .c4 { grid-column: span 4 !important; }
.c5 { grid-column: span 5 !important; } .c6 { grid-column: span 6 !important; } .c8 { grid-column: span 8 !important; } .c9 { grid-column: span 9 !important; }
.check { display: flex; align-items: center; gap: .4rem; font-size: .9rem; color: var(--texto); cursor: pointer; margin: 0; }
.check input { width: auto; }
.linha-checks { display: flex; gap: 1.2rem; flex-wrap: wrap; padding-top: .3rem; }
.dica { font-size: .78rem; color: var(--suave); margin-top: .2rem; }
.junto { display: flex; gap: .35rem; } .junto input { flex: 1; }

/* tabelas */
table { width: 100%; border-collapse: collapse; }
th, td { padding: .55rem .7rem; border-bottom: 1px solid #eef0f3; text-align: left; vertical-align: middle; }
th { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; color: var(--suave); background: #f8f9fa; font-weight: 600; }
tr.link { cursor: pointer; } tr.link:hover td { background: #f6f9ff; }
.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mudo { color: var(--suave); font-size: .85rem; }
.tag { display: inline-block; padding: .1rem .5rem; border-radius: 20px; font-size: .74rem; font-weight: 600; background: #e9ecef; color: #495057; white-space: nowrap; }
.tag.autorizada, .tag.A { background: #d1e7dd; color: #0f5132; }
.tag.cancelada, .tag.C { background: #f8d7da; color: #842029; }
.tag.rejeitada, .tag.erro { background: #fff3cd; color: #664d03; }
.tag.rascunho, .tag.digitacao { background: #e2e3e5; color: #41464b; }
.tag.F { background: #cfe2ff; color: #084298; }
.tag.pend { background: #fff3cd; color: #664d03; }
.tag.web { background: #e0cffc; color: #3d0a91; }

/* itens (orçamento / nota) */
.itens td input, .itens td select { padding: .35rem .45rem; font-size: .9rem; }
.itens .desc { min-width: 220px; }
.itens .w-qtd { width: 90px; } .itens .w-preco { width: 120px; } .itens .w-cod { width: 90px; }
.itens .w-pq { width: 70px; }
.totais { display: flex; gap: 1.5rem; justify-content: flex-end; flex-wrap: wrap; padding: .75rem 1rem; font-size: .95rem; }
.totais b { font-size: 1.25rem; }
.tabela-rola { overflow-x: auto; }

/* autocomplete */
.auto { position: relative; }
.auto-lista { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: #fff; border: 1px solid var(--linha);
              border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.12); max-height: 320px; overflow: auto; display: none; }
.auto-lista div { padding: .5rem .7rem; cursor: pointer; border-bottom: 1px solid #f1f3f5; font-size: .9rem; }
.auto-lista div:hover, .auto-lista div.sel { background: #e7f1ff; }
.auto-lista small { color: var(--suave); display: block; }

.dest-box { background: #f8f9fa; border: 1px solid var(--linha); border-radius: 6px; padding: .6rem .8rem; font-size: .9rem; }
.chave { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .85rem; word-break: break-all; }
dialog { border: 0; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 1.25rem; width: min(480px, 92vw); }
dialog::backdrop { background: rgba(0,0,0,.4); }

/* login */
.login-pg { display: grid; place-items: center; width: 100%; background: linear-gradient(135deg, #1d4466, #132D44 60%, #0b1c2c); }
.login-logo { display: block; width: 200px; max-width: 70%; margin: 0 auto 1rem; }
.login-box h1 small { display: block; font-size: .8rem; font-weight: 400; color: var(--suave); margin-top: .2rem; }
.login-box { background: #fff; padding: 2rem; border-radius: 12px; width: min(380px, 92vw); box-shadow: 0 20px 60px rgba(0,0,0,.35); }
.login-box .logo { width: 56px; height: 56px; border-radius: 12px; background: var(--azul); color: #fff; display: grid; place-items: center;
                   font-weight: 800; font-size: 1.6rem; margin: 0 auto .75rem; }
.login-box h1 { text-align: center; font-size: 1.25rem; margin-bottom: 1.25rem; }
.login-box .btn { width: 100%; margin-top: 1rem; padding: .7rem; }
.login-box div + div { margin-top: .75rem; }

/* celular */
@media (max-width: 860px) {
  .lateral { display: none; }
  .selo-agente.mini { display: inline-flex; }
  .logo-cel { display: inline-block; }
  .quem { display: none; }
  main { padding: .75rem .75rem 5.5rem; }
  .topo { padding: .6rem .9rem; padding-top: max(.6rem, env(safe-area-inset-top)); }
  .barra-baixo { display: flex; position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid var(--linha);
                 z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
  .barra-baixo a { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: .45rem 0; font-size: .68rem; color: var(--suave); }
  .barra-baixo a.ativo { color: var(--azul); }
  .c2, .c3, .c4, .c5, .c6, .c8, .c9 { grid-column: span 12 !important; }
  .c2.m6, .c3.m6, .c4.m6 { grid-column: span 6 !important; }
  .esconde-cel { display: none; }
  .rodape-acoes { bottom: calc(56px + env(safe-area-inset-bottom)); }
  .cartao { padding: .85rem; }
  th, td { padding: .5rem; }
}
@media print {
  .lateral, .topo, .barra-baixo, .rodape-acoes, .ferramentas { display: none !important; }
}

/* convite para instalar o PWA */
.instalar { position: fixed; left: 12px; right: 12px; bottom: calc(68px + env(safe-area-inset-bottom)); z-index: 50; background: #fff;
            border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); padding: .75rem; display: flex; align-items: center; gap: .65rem;
            max-width: 480px; margin: 0 auto; border-top: 4px solid #132D44; }
.instalar img { border-radius: 9px; flex-shrink: 0; }
.instalar div { flex: 1; min-width: 0; font-size: .9rem; }
.instalar small { display: block; color: var(--suave); font-size: .78rem; }
.instalar .fechar { background: none; border: 0; font-size: 1rem; color: var(--suave); cursor: pointer; padding: .3rem; }
@media (min-width: 861px) { .instalar { bottom: 16px; left: auto; right: 16px; } }
.login-pg .instalar { bottom: 16px; }

.pt-check { padding-top: 1.4rem; }
.totais .t-campo { display: flex; gap: .4rem; align-items: center; }

/* ===== celular: itens em cartões, totais em lista, botões no fim ===== */
@media (max-width: 860px) {
  .pt-check { padding-top: 0; }
  .rodape-acoes { position: static; background: none; backdrop-filter: none; border: 0; padding: .25rem 0 0; display: grid;
                  grid-template-columns: 1fr 1fr; gap: .5rem; }
  .rodape-acoes .btn { width: 100%; padding: .7rem .5rem; white-space: normal; }
  .rodape-acoes .btn.roxo, .rodape-acoes .btn.verde:last-child { grid-column: span 2; order: -1; padding: .85rem; font-size: 1rem; }
  .itens thead { display: none; }
  .itens, .itens tbody { display: block; }
  .itens tr { display: grid; grid-template-columns: repeat(6, 1fr); gap: .45rem .5rem; padding: .8rem .8rem .7rem; border-bottom: 6px solid var(--fundo);
              position: relative; }
  .itens td { display: block; padding: 0; border: 0; min-width: 0; width: auto !important; }
  .itens td[data-l]::before { content: attr(data-l); display: block; font-size: .7rem; color: var(--suave); margin-bottom: .15rem; font-weight: 600; text-transform: uppercase; }
  .itens .c-desc { grid-column: 1 / -1; padding-right: 2.6rem; }
  .itens .c-del { position: absolute; top: .8rem; right: .8rem; }
  .itens .c-cod { grid-column: span 2; } .itens .c-un { grid-column: span 2; } .itens .c-csosn { grid-column: span 2; }
  .itens .c-ncm { grid-column: span 3; } .itens .c-cfop { grid-column: span 3; }
  .itens .c-qtd { grid-column: span 2; } .itens .c-preco { grid-column: span 2; }
  .itens .c-tot { grid-column: span 2; text-align: right; font-weight: 700; font-size: 1rem; padding-top: .1rem; }
  .itens td input { font-size: 16px; padding: .5rem .55rem; }
  .itens .desc { min-width: 0; }
  .totais { flex-direction: column; align-items: stretch; gap: .5rem; }
  .totais > span { display: flex !important; justify-content: space-between; align-items: center; }
  .totais input { width: 130px !important; text-align: right; }
  input, select, textarea { font-size: 16px; }
}
@media (max-width: 860px) {
  .itens .c-desc { order: 0; } .itens .c-cod { order: 1; } .itens .c-un { order: 2; } .itens .c-csosn { order: 3; }
  .itens .c-ncm { order: 4; } .itens .c-cfop { order: 5; } .itens .c-qtd { order: 6; } .itens .c-preco { order: 7; } .itens .c-tot { order: 8; }
  .itens .c-del { order: 9; }
}
@media (max-width: 860px) {
  .itens .c-tot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: baseline; border-top: 1px dashed var(--linha); padding-top: .4rem; }
  .itens .c-tot::before { margin: 0; }
}

/* ===== celular: listas viram cartões (nome em cima, valor à direita, nº/data/situação embaixo) ===== */
@media (max-width: 860px) {
  .topo h1 { font-size: 1.02rem; }
  .selo-agente.mini span { display: none; }
  .selo-agente.mini { padding: .45rem; }
  .lista thead { display: none; }
  .lista, .lista tbody { display: block; }
  .lista tr { display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "nome nome total" "num data sit";
              gap: .15rem .6rem; padding: .7rem .9rem; border-bottom: 1px solid #eef0f3; align-items: center; }
  .lista td { display: block; padding: 0; border: 0; min-width: 0; }
  .lista .l-nome { grid-area: nome; font-weight: 600; line-height: 1.25; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .lista .l-nome .mudo { font-weight: 400; }
  .lista .l-total { grid-area: total; font-weight: 700; align-self: start; }
  .lista .l-num { grid-area: num; font-size: .85rem; }
  .lista .l-data { grid-area: data; font-size: .82rem; color: var(--suave); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lista .l-sit { grid-area: sit; justify-self: end; }
  .lista .l-extra, .lista .l-serie, .lista .l-origem { display: none; }
  .lista tr:not(:has(.l-num)) { grid-template-areas: "nome nome total" "data data sit"; }
  .ferramentas form { min-width: 0; width: 100%; }
  .ferramentas form > * { flex: 1 1 auto; }
  .ferramentas input[type=month] { width: 100% !important; }
  .ferramentas > .btn { width: 100%; }
}

/* carregamento entre telas */
.carregando-barra { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, #0d6efd, #20c997);
                    z-index: 200; opacity: 0; transition: opacity .2s; pointer-events: none; }
.carregando-barra.on { opacity: 1; animation: carrega 2.5s ease-out forwards; }
@keyframes carrega { 0% { width: 0; } 30% { width: 45%; } 70% { width: 75%; } 100% { width: 92%; } }
.carregando-capa { position: fixed; inset: 0; background: rgba(244,246,249,.55); z-index: 190; display: none; place-items: center; }
.carregando-capa.on { display: grid; }
.carregando-caixa { background: #fff; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.18); padding: 1rem 1.3rem;
                    display: flex; align-items: center; gap: .75rem; font-weight: 600; color: #132D44; }
.roda { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #d6e4ff; border-top-color: #0d6efd; animation: gira .8s linear infinite; }
@keyframes gira { to { transform: rotate(360deg); } }