/* Painel Imper — celular primeiro. Sem fontes nem bibliotecas externas. */
:root {
  --fundo: #f1f4f8; --cartao: #fff; --texto: #1a202c; --suave: #5a6577; --linha: #dde3ec;
  --azul: #2b6cb0; --azul-esc: #1e4e82; --verde: #2e9e5b; --vermelho: #d9534f; --amarelo: #d69e2e;
  --raio: 10px; --sombra: 0 1px 3px rgba(20,30,50,.08);
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--fundo); color: var(--texto); line-height: 1.45; }
a { color: var(--azul); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 1.4rem; margin: .2rem 0 .8rem; } h2 { font-size: 1.05rem; margin: .2rem 0 .6rem; } h3 { font-size: .95rem; margin: .6rem 0 .3rem; color: var(--suave); }
small, .dica { color: var(--suave); }
code { background: #edf1f7; padding: .1rem .35rem; border-radius: 4px; word-break: break-all; }

.topo { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; padding: .6rem 1rem; background: var(--azul-esc); color: #fff; }
.topo .marca { color: #fff; font-weight: 700; font-size: 1.05rem; }
.topo .busca { flex: 1 1 200px; margin: 0; }
.topo .busca input { width: 100%; padding: .45rem .7rem; border-radius: 999px; border: 0; }
.topo .sair { margin: 0; }
.botao-link { background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.cartao .botao-link, .lista .botao-link { color: var(--azul); }
.menu { display: flex; gap: .25rem; overflow-x: auto; padding: .4rem .6rem; background: #fff; border-bottom: 1px solid var(--linha); position: sticky; top: 0; z-index: 5; }
.menu a { padding: .5rem .9rem; border-radius: 999px; color: var(--texto); white-space: nowrap; }
.menu a.ativo { background: var(--azul); color: #fff; }
.conteudo { max-width: 1200px; margin: 0 auto; padding: 1rem; }
.cabecalho { display: flex; justify-content: space-between; align-items: center; gap: .6rem; flex-wrap: wrap; }

.cartao { background: var(--cartao); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.estreito { max-width: 460px; margin: 1.5rem auto; }
.grade { display: grid; gap: 1rem; margin-bottom: 1rem; grid-template-columns: 1fr; }
.grade > .cartao { margin-bottom: 0; }
.kpi { background: var(--cartao); border-radius: var(--raio); padding: .8rem 1rem; box-shadow: var(--sombra); border-left: 5px solid var(--linha); display: flex; flex-direction: column; }
.kpi span { color: var(--suave); font-size: .85rem; } .kpi strong { font-size: 1.45rem; } .kpi small { font-size: .8rem; }
.kpi.verde { border-left-color: var(--verde); } .kpi.verde strong { color: var(--verde); }
.kpi.vermelho { border-left-color: var(--vermelho); } .kpi.vermelho strong { color: var(--vermelho); }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(2, 1fr); } .duas { grid-template-columns: repeat(2, 1fr); } .tres { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kpis { grid-template-columns: repeat(4, 1fr); } .tres { grid-template-columns: repeat(3, 1fr); } }

label { display: block; margin: .6rem 0; font-size: .9rem; color: var(--suave); }
input, select, textarea { width: 100%; padding: .6rem .7rem; margin-top: .2rem; border: 1px solid var(--linha); border-radius: 8px; font: inherit; background: #fff; color: var(--texto); }
fieldset { border: 1px solid var(--linha); border-radius: 8px; margin: .8rem 0; }
.filtros { display: flex; gap: .6rem; flex-wrap: wrap; align-items: end; margin-bottom: 1rem; }
.filtros label { margin: 0; flex: 1 1 180px; } .filtros input[type=search] { flex: 1 1 220px; margin: 0; }
.botao { display: inline-block; background: var(--azul); color: #fff; border: 0; border-radius: 8px; padding: .65rem 1.1rem; font: inherit; cursor: pointer; text-decoration: none; }
.botao:hover { background: var(--azul-esc); text-decoration: none; } .botao.secundario { background: #fff; color: var(--azul); border: 1px solid var(--azul); }
.erro { color: var(--vermelho); } .vazio { color: var(--suave); font-style: italic; }
form.inline { display: inline; margin: 0; }

.tabela { width: 100%; border-collapse: collapse; background: var(--cartao); border-radius: var(--raio); overflow: hidden; box-shadow: var(--sombra); }
.tabela th, .tabela td { padding: .55rem .7rem; text-align: left; border-bottom: 1px solid var(--linha); font-size: .92rem; }
.tabela th { background: #f7f9fc; color: var(--suave); font-weight: 600; } .tabela .num { text-align: right; }
.lista { list-style: none; padding: 0; margin: 0 0 .8rem; } .lista li { padding: .45rem 0; border-bottom: 1px solid var(--linha); display: flex; justify-content: space-between; gap: .6rem; flex-wrap: wrap; }
.lista li.atraso { color: var(--vermelho); } .conversas li { display: block; }
.dados { display: grid; grid-template-columns: 8rem 1fr; gap: .3rem .8rem; margin: 0; } .dados dt { color: var(--suave); } .dados dd { margin: 0; }
.etiqueta { display: inline-block; background: #e8eef7; color: var(--azul-esc); border-radius: 999px; padding: .05rem .6rem; font-size: .78rem; }
.etiqueta.vermelha { background: #fbe4e3; color: #9b2c2c; }
.paginacao { display: flex; gap: 1rem; justify-content: center; margin: 1rem 0; }
.qr { background: #fff; padding: .5rem; display: inline-block; border: 1px solid var(--linha); border-radius: 8px; } .qr svg { width: 220px; height: 220px; display: block; }
.nota textarea { margin-bottom: .5rem; }
.linha-tempo { list-style: none; padding: 0; margin: 1rem 0 0; } .linha-tempo li { padding: .5rem 0 .5rem .8rem; border-left: 3px solid var(--linha); margin-left: .3rem; }
.linha-tempo time { color: var(--suave); font-size: .8rem; }

.chat { display: flex; flex-direction: column; gap: .5rem; max-width: 720px; }
.msg { padding: .5rem .8rem; border-radius: 12px; max-width: 85%; background: #fff; box-shadow: var(--sombra); }
.msg p { margin: .2rem 0 0; white-space: pre-wrap; word-break: break-word; }
.msg.minha { align-self: flex-end; background: #dcf2e3; } .msg.nota { align-self: center; background: #fff7e0; font-size: .9rem; }

.kanban { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; -webkit-overflow-scrolling: touch; }
.coluna { flex: 0 0 250px; background: #e6ebf3; border-radius: var(--raio); padding: .6rem; }
.coluna h2 { font-size: .9rem; display: flex; justify-content: space-between; } .contador { background: #fff; border-radius: 999px; padding: 0 .55rem; }
.cartoes { min-height: 60px; display: flex; flex-direction: column; gap: .5rem; }
.card { background: #fff; border-radius: 8px; padding: .55rem .65rem; box-shadow: var(--sombra); display: flex; flex-direction: column; gap: .15rem; cursor: grab; font-size: .9rem; }
.card .valor { color: var(--verde); font-weight: 600; }
.sortable-ghost { opacity: .4; }

@media (prefers-color-scheme: dark) {
  :root { --fundo: #11161d; --cartao: #1a212b; --texto: #e6ebf2; --suave: #9aa6b8; --linha: #2b3544; }
  .menu, .tabela th { background: #1a212b; } .coluna { background: #151b23; } .card, .msg { background: #222b37; }
  input, select, textarea { background: #11161d; } .etiqueta { background: #26324a; color: #b8cdf0; } .botao.secundario { background: transparent; }
}