:root {
  --azul: #1b3550; --azul-2: #1f6f8b; --fundo: #f4f6f9; --papel: #fff; --borda: #d8dee6; --texto: #1c2733; --suave: #5b6b7c;
  --verde: #1e7d4f; --verde-bg: #e3f4ea; --verm: #b3261e; --verm-bg: #fdeceb; --amar: #8a5a00; --amar-bg: #fff3d6; --azul-bg: #e4eefa;
  --raio: 8px; --sombra: 0 1px 3px rgba(20, 40, 60, .12);
}
* { box-sizing: border-box; }
html { font-size: 16px; }
body { margin: 0; font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; color: var(--texto); background: var(--fundo); line-height: 1.45; }
h1, h2, h3 { color: var(--azul); line-height: 1.2; }
h1 { font-size: 1.5rem; margin: 0 0 .75rem; } h2 { font-size: 1.15rem; margin: 0 0 .5rem; } h3 { font-size: 1rem; margin: 1rem 0 .4rem; }
a { color: var(--azul-2); } a:hover { text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; padding: .5rem .9rem; border: 1px solid var(--borda); background: var(--papel); border-radius: var(--raio); min-height: 38px; }
button:hover { background: #eef2f6; } button:disabled { opacity: .55; cursor: not-allowed; }
button.primario { background: var(--azul); border-color: var(--azul); color: #fff; } button.primario:hover { background: #12263a; }
button.perigo { background: var(--verm); border-color: var(--verm); color: #fff; }
button.link { border: 0; background: none; color: #bcd3e6; padding: .15rem 0; min-height: 0; text-decoration: underline; }
button.icone { border: 0; background: none; font-size: 1.6rem; line-height: 1; padding: 0 .4rem; }
button.pequeno { padding: .2rem .55rem; min-height: 30px; font-size: .85rem; }
:focus-visible { outline: 3px solid #4d9de0; outline-offset: 1px; }
input, select, textarea { width: 100%; padding: .5rem .6rem; border: 1px solid #aeb9c5; border-radius: 6px; background: #fff; min-height: 38px; }
input[type=checkbox] { width: auto; min-height: 0; }
textarea { resize: vertical; }

/* layout */
.shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; }
.lateral { background: var(--azul); color: #fff; padding: 1rem .75rem; display: flex; flex-direction: column; gap: 1rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.marca { font-weight: 700; font-size: 1.1rem; padding: .25rem .5rem; }
.menu { display: flex; flex-direction: column; gap: 2px; }
.menu a { color: #dce8f3; text-decoration: none; padding: .55rem .7rem; border-radius: 6px; }
.menu a:hover { background: rgba(255, 255, 255, .1); } .menu a.ativo { background: #fff; color: var(--azul); font-weight: 600; }
.usuario { margin-top: auto; font-size: .9rem; padding: .5rem; border-top: 1px solid rgba(255, 255, 255, .2); display: flex; flex-direction: column; gap: .15rem; }
.usuario small { color: #bcd3e6; } .usuario .linha { display: flex; gap: .9rem; margin-top: .3rem; }
#conteudo { padding: 1.25rem 1.5rem 3rem; min-width: 0; outline: none; max-width: 1400px; width: 100%; }
.topo { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; justify-content: space-between; margin-bottom: 1rem; }
.topo h1 { margin: 0; } .topo .acoes { display: flex; flex-wrap: wrap; gap: .5rem; }
.cartao { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: 1rem; box-shadow: var(--sombra); margin-bottom: 1rem; }
.grade { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.grade-2 { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.kpi { background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); padding: .8rem 1rem; box-shadow: var(--sombra); }
.kpi .n { font-size: 1.7rem; font-weight: 700; color: var(--azul); } .kpi .r { color: var(--suave); font-size: .9rem; } .kpi.alerta .n { color: var(--verm); }
.vazio { color: var(--suave); padding: .5rem 0; } .aviso { color: var(--verm); font-weight: 600; } .ajuda { color: var(--suave); font-size: .9rem; }
.erro-form { background: var(--verm-bg); color: var(--verm); border: 1px solid #f1b8b4; border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; white-space: pre-line; }
.erro-form ul { margin: .3rem 0 0 1rem; padding: 0; }

/* filtros e tabela */
.filtros { display: flex; flex-wrap: wrap; gap: .6rem; align-items: end; margin-bottom: 1rem; }
.filtros .campo { min-width: 150px; flex: 1 1 150px; max-width: 260px; }
.campo { display: flex; flex-direction: column; gap: .2rem; } .campo label { font-size: .85rem; color: var(--suave); font-weight: 600; } .campo small { color: var(--suave); }
.campo.check { flex-direction: row; align-items: center; gap: .5rem; } .obrig { color: var(--verm); }
.tabela-wrap { overflow-x: auto; background: var(--papel); border: 1px solid var(--borda); border-radius: var(--raio); }
table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th { background: var(--azul); color: #fff; text-align: left; padding: .55rem .7rem; white-space: nowrap; font-weight: 600; }
td { padding: .5rem .7rem; border-top: 1px solid var(--borda); vertical-align: top; }
tbody tr:nth-child(even) { background: #f6f9fc; } tbody tr:hover { background: #eaf2fa; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.paginacao { display: flex; gap: .5rem; align-items: center; justify-content: flex-end; margin-top: .6rem; }
.badge { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .78rem; font-weight: 600; background: #e8edf2; color: #3a4a5a; white-space: nowrap; }
.badge.verde { background: var(--verde-bg); color: var(--verde); } .badge.vermelho { background: var(--verm-bg); color: var(--verm); }
.badge.amarelo { background: var(--amar-bg); color: var(--amar); } .badge.azul { background: var(--azul-bg); color: #1b4f8a; }

/* modal */
.overlay { position: fixed; inset: 0; background: rgba(15, 25, 40, .55); display: flex; align-items: flex-start; justify-content: center; padding: 4vh 1rem; overflow-y: auto; z-index: 50; }
.modal { background: var(--papel); border-radius: 10px; width: 100%; max-width: 560px; box-shadow: 0 10px 40px rgba(0, 0, 0, .3); }
.modal.largo { max-width: 860px; }
.modal header { display: flex; justify-content: space-between; align-items: center; padding: .8rem 1rem; border-bottom: 1px solid var(--borda); } .modal header h2 { margin: 0; }
.modal .corpo { padding: 1rem; }
.grade-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem 1rem; } .grade-form .cheio { grid-column: 1 / -1; }
.grade-form h3 { margin: .6rem 0 0; border-bottom: 1px solid var(--borda); padding-bottom: .2rem; }
.acoes { display: flex; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; margin-top: .8rem; }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; } .dl dt { color: var(--suave); font-weight: 600; } .dl dd { margin: 0; }
#toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 100; }
.toast { background: var(--azul); color: #fff; padding: .6rem 1rem; border-radius: 8px; box-shadow: var(--sombra); max-width: 360px; } .toast.erro { background: var(--verm); }

/* login */
.login-wrap { min-height: 100vh; display: grid; place-items: center; padding: 1rem; background: linear-gradient(160deg, var(--azul), #2c5a7a); }
.login { background: #fff; padding: 2rem; border-radius: 12px; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .9rem; }
.login h1 { margin: 0; } .login .sub { margin: 0; color: var(--suave); }

/* abas */
.abas { display: flex; flex-wrap: wrap; gap: 2px; border-bottom: 2px solid var(--borda); margin-bottom: 1rem; }
.abas button { border: 0; border-radius: 6px 6px 0 0; background: none; } .abas button[aria-selected=true] { background: var(--azul); color: #fff; }

/* sugestões */
.seletor { position: relative; } .sugestoes { position: absolute; z-index: 10; left: 0; right: 0; background: #fff; border: 1px solid var(--borda); border-radius: 6px; list-style: none; margin: 2px 0 0; padding: 0; max-height: 240px; overflow: auto; box-shadow: var(--sombra); }
.sugestoes button { width: 100%; text-align: left; border: 0; border-radius: 0; } .sugestoes .vazio { padding: .5rem; }

/* próxima ligação */
.ficha-lig { display: grid; gap: 1rem; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.ficha-lig .titulo { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; } .ficha-lig h2 { font-size: 1.35rem; margin: 0; }
.contato-lig { border: 1px solid var(--borda); border-radius: 8px; padding: .7rem; margin-bottom: .6rem; } .contato-lig.sel { border-color: var(--azul-2); background: #f1f8fb; }
.btn-tel { display: inline-block; background: var(--verde); color: #fff; text-decoration: none; padding: .55rem 1rem; border-radius: 8px; font-weight: 600; margin: .2rem .3rem .2rem 0; min-height: 40px; }
.btn-tel.zap { background: #128c7e; }
.resultados { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .5rem; }
.resultados button { min-height: 48px; font-weight: 600; }
.resumo-cat { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; } .resumo-cat .badge { font-size: .85rem; padding: .25rem .7rem; }

/* agenda */
.cal-mes { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--borda); border: 1px solid var(--borda); }
.cal-mes .cab { background: var(--azul); color: #fff; text-align: center; padding: .3rem; font-size: .85rem; }
.cal-dia { background: #fff; min-height: 96px; padding: .25rem; font-size: .8rem; overflow: hidden; } .cal-dia.fora { background: #f1f4f7; color: #8a97a5; } .cal-dia.hoje { outline: 2px solid var(--azul-2); outline-offset: -2px; }
.cal-dia .d { font-weight: 700; } .evento { display: block; width: 100%; text-align: left; font-size: .75rem; padding: 1px 4px; margin-top: 2px; border-radius: 4px; border: 0; background: var(--azul-bg); color: #123; min-height: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evento.ligacao, .evento.tarefa { background: #eef0f3; } .evento.cancelada { text-decoration: line-through; opacity: .6; } .evento.realizada { background: var(--verde-bg); } .evento.confirmada { background: #d8f0e0; }
.cal-semana { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .5rem; } .cal-semana .col { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: .4rem; min-height: 140px; } .cal-semana h3 { margin: 0 0 .3rem; font-size: .85rem; }

/* kanban */
.kanban { display: flex; gap: .75rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; }
.coluna { flex: 0 0 270px; background: #e9eef3; border-radius: 8px; padding: .5rem; min-height: 200px; } .coluna.sobre { outline: 3px dashed var(--azul-2); }
.coluna header { padding: .2rem .3rem .5rem; } .coluna header strong { display: block; color: var(--azul); } .coluna header small { color: var(--suave); }
.cartao-opp { background: #fff; border: 1px solid var(--borda); border-radius: 6px; padding: .5rem .6rem; margin-bottom: .5rem; cursor: grab; box-shadow: var(--sombra); font-size: .88rem; }
.cartao-opp.sem { border-color: var(--verm); } .cartao-opp strong { display: block; } .cartao-opp small { color: var(--suave); display: block; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 1rem; border-left: 3px solid var(--borda); } .timeline li { position: relative; margin-bottom: .8rem; padding-left: .6rem; } .timeline li::before { content: ''; position: absolute; left: -1.45rem; top: .35rem; width: 10px; height: 10px; border-radius: 50%; background: var(--azul-2); }
.timeline .meta { color: var(--suave); font-size: .82rem; }
details { margin: .4rem 0; } summary { cursor: pointer; }

@media (max-width: 900px) {
  .shell { grid-template-columns: 1fr; }
  .lateral { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; padding: .5rem; gap: .5rem; }
  .menu { flex-direction: row; overflow-x: auto; flex: 1 1 100%; order: 3; } .menu a { white-space: nowrap; }
  .usuario { margin: 0 0 0 auto; border: 0; padding: 0; text-align: right; } .marca { padding: 0 .5rem; }
  #conteudo { padding: 1rem .75rem 3rem; }
  .ficha-lig { grid-template-columns: 1fr; }
  .grade-form { grid-template-columns: 1fr; }
  .cal-mes .cal-dia { min-height: 64px; } .cal-semana { grid-template-columns: 1fr; }
  table.cartoes thead { display: none; } table.cartoes tr { display: block; border-top: 2px solid var(--borda); } table.cartoes td { display: flex; gap: .5rem; border: 0; padding: .25rem .7rem; } table.cartoes td::before { content: attr(data-rotulo); font-weight: 600; color: var(--suave); min-width: 7rem; }
}
@media print { .lateral, .filtros, .acoes, button { display: none !important; } .shell { display: block; } body { background: #fff; } .cartao, .kpi { box-shadow: none; } }