/* ==========================================================================
   Sistema de Chamados de TI — folha de estilo única
   ========================================================================== */

:root {
    --azul:        #2563eb;
    --azul-escuro: #1d4ed8;
    --azul-claro:  #eff6ff;
    --tinta:       #0f172a;
    --texto:       #334155;
    --suave:       #64748b;
    --borda:       #e2e8f0;
    --fundo:       #f1f5f9;
    --branco:      #ffffff;
    --verde:       #059669;
    --verde-claro: #ecfdf5;
    --ambar:       #d97706;
    --ambar-claro: #fffbeb;
    --vermelho:    #dc2626;
    --vermelho-claro: #fef2f2;
    --raio:        10px;
    --sombra:      0 1px 2px rgba(15, 23, 42, .06), 0 4px 12px rgba(15, 23, 42, .04);
    --lateral:     248px;
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.55;
    color: var(--texto);
    background: var(--fundo);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--tinta); margin: 0 0 .5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; }
h2 { font-size: 1.15rem; }
h3 { font-size: 1rem; }
a  { color: var(--azul); text-decoration: none; }
a:hover { text-decoration: underline; }
p  { margin: 0 0 .75rem; }

/* ---------------------------------------------------------------- estrutura */
.app { display: flex; min-height: 100vh; }

.lateral {
    width: var(--lateral);
    flex: 0 0 var(--lateral);
    background: var(--tinta);
    color: #cbd5e1;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
}

.lateral .marca {
    padding: 1.25rem 1.25rem 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.lateral .marca strong { color: #fff; display: block; font-size: 1rem; letter-spacing: -.01em; }
.lateral .marca span   { font-size: .75rem; color: #94a3b8; }

.menu { padding: .75rem .75rem; flex: 1; overflow-y: auto; }
.menu .grupo {
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #64748b;
    padding: 1rem .75rem .35rem;
}
.menu a {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .75rem;
    border-radius: 8px;
    color: #cbd5e1;
    font-weight: 500;
}
.menu a:hover { background: rgba(255, 255, 255, .06); color: #fff; text-decoration: none; }
.menu a.ativo { background: var(--azul); color: #fff; }
.menu a .ic { width: 18px; text-align: center; opacity: .9; }
.menu a .contador {
    margin-left: auto;
    background: rgba(255, 255, 255, .12);
    border-radius: 999px;
    padding: 0 .45rem;
    font-size: .72rem;
}

.rodape-lateral { padding: .9rem 1rem; border-top: 1px solid rgba(255, 255, 255, .08); }
.rodape-lateral .usuario { display: flex; align-items: center; gap: .6rem; margin-bottom: .6rem; }
.rodape-lateral .nome { color: #fff; font-weight: 600; font-size: .85rem; }
.rodape-lateral .cargo { font-size: .72rem; color: #94a3b8; }

.conteudo { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topo {
    background: var(--branco);
    border-bottom: 1px solid var(--borda);
    padding: .9rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 20;
}
.topo h1 { margin: 0; font-size: 1.15rem; }
.topo .acoes { margin-left: auto; display: flex; gap: .5rem; align-items: center; }

.area { padding: 1.5rem; max-width: 1400px; width: 100%; }

/* ---------------------------------------------------------------- avatar */
.avatar {
    width: 34px; height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--azul);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .02em;
}
.avatar.pequeno { width: 28px; height: 28px; flex-basis: 28px; font-size: .68rem; }

/* ---------------------------------------------------------------- cartões */
.cartao {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-radius: var(--raio);
    box-shadow: var(--sombra);
    margin-bottom: 1.25rem;
}
.cartao > .cabecalho {
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--borda);
    display: flex;
    align-items: center;
    gap: .75rem;
}
.cartao > .cabecalho h2, .cartao > .cabecalho h3 { margin: 0; }
.cartao > .cabecalho .direita { margin-left: auto; }
.cartao > .corpo { padding: 1.1rem; }
.cartao > .corpo.sem-espaco { padding: 0; }

/* ---------------------------------------------------------------- métricas */
.metricas {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}
.metrica {
    background: var(--branco);
    border: 1px solid var(--borda);
    border-left: 3px solid var(--azul);
    border-radius: var(--raio);
    padding: .95rem 1.1rem;
    box-shadow: var(--sombra);
}
.metrica .rotulo { font-size: .75rem; color: var(--suave); text-transform: uppercase; letter-spacing: .05em; }
.metrica .valor  { font-size: 1.8rem; font-weight: 700; color: var(--tinta); line-height: 1.2; }
.metrica .nota   { font-size: .75rem; color: var(--suave); }
.metrica.verde    { border-left-color: var(--verde); }
.metrica.ambar    { border-left-color: var(--ambar); }
.metrica.vermelha { border-left-color: var(--vermelho); }
.metrica.vermelha .valor { color: var(--vermelho); }

/* ---------------------------------------------------------------- tabelas */
.tabela-rolagem { overflow-x: auto; }
table.tabela { width: 100%; border-collapse: collapse; font-size: .875rem; }
table.tabela th {
    text-align: left;
    padding: .7rem 1rem;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--suave);
    background: #f8fafc;
    border-bottom: 1px solid var(--borda);
    white-space: nowrap;
}
table.tabela td { padding: .75rem 1rem; border-bottom: 1px solid var(--borda); vertical-align: middle; }
table.tabela tr:last-child td { border-bottom: 0; }
table.tabela tbody tr:hover { background: #f8fafc; }
table.tabela .codigo { font-family: "Consolas", "SF Mono", monospace; font-size: .8rem; color: var(--suave); }
table.tabela .titulo-linha { color: var(--tinta); font-weight: 600; }

/* ---------------------------------------------------------------- etiquetas */
.etiqueta {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .15rem .55rem;
    border-radius: 999px;
    font-size: .72rem;
    font-weight: 600;
    white-space: nowrap;
}
.etiqueta .ponto { width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.etiqueta.cinza    { background: #f1f5f9; color: #475569; }
.etiqueta.atrasado { background: var(--vermelho-claro); color: var(--vermelho); }
.etiqueta.no-prazo { background: var(--verde-claro); color: var(--verde); }

/* ---------------------------------------------------------------- botões */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    padding: .5rem .9rem;
    border-radius: 8px;
    border: 1px solid transparent;
    font-size: .85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    background: var(--branco);
    color: var(--texto);
    border-color: var(--borda);
    transition: background .12s, border-color .12s;
}
.btn:hover { background: #f8fafc; text-decoration: none; }
.btn.primario  { background: var(--azul); border-color: var(--azul); color: #fff; }
.btn.primario:hover { background: var(--azul-escuro); }
.btn.perigo    { background: var(--vermelho); border-color: var(--vermelho); color: #fff; }
.btn.perigo:hover { background: #b91c1c; }
.btn.sucesso   { background: var(--verde); border-color: var(--verde); color: #fff; }
.btn.sucesso:hover { background: #047857; }
.btn.pequeno   { padding: .3rem .6rem; font-size: .78rem; }
.btn.bloco     { width: 100%; }
.btn:disabled  { opacity: .55; cursor: not-allowed; }

/* ---------------------------------------------------------------- formulários */
.campo { margin-bottom: 1rem; }
.campo label {
    display: block;
    font-size: .8rem;
    font-weight: 600;
    color: var(--tinta);
    margin-bottom: .35rem;
}
.campo .dica { font-size: .75rem; color: var(--suave); font-weight: 400; }

/* input:not([type]) e [type=date] cobrem os campos das telas v1.4 (Flash,
   categorias, projetos) que são escritos sem type= ou com type=date. */
input[type=text], input[type=email], input[type=password], input[type=number],
input[type=search], input[type=file], input[type=date], input:not([type]),
select, textarea {
    width: 100%;
    padding: .55rem .7rem;
    border: 1px solid var(--borda);
    border-radius: 8px;
    font-family: inherit;
    font-size: .875rem;
    color: var(--tinta);
    background: var(--branco);
}
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--azul);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, .12);
}
textarea { min-height: 130px; resize: vertical; }
input.erro, select.erro, textarea.erro { border-color: var(--vermelho); }
.msg-erro { color: var(--vermelho); font-size: .78rem; margin-top: .25rem; }

.linha { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 1rem; }
.checkbox { display: flex; align-items: center; gap: .5rem; font-size: .85rem; }
.checkbox input { width: auto; }

/* ---------------------------------------------------------------- filtros */
.filtros {
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
    align-items: flex-end;
}
.filtros .campo { margin-bottom: 0; min-width: 150px; }
.filtros .campo.crescer { flex: 1; min-width: 220px; }

.abas { display: flex; gap: .35rem; flex-wrap: wrap; margin-bottom: 1rem; }
.abas a {
    padding: .4rem .8rem;
    border-radius: 999px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--suave);
    background: var(--branco);
    border: 1px solid var(--borda);
}
.abas a:hover { text-decoration: none; color: var(--tinta); }
.abas a.ativo { background: var(--azul); border-color: var(--azul); color: #fff; }

/* ---------------------------------------------------------------- avisos */
.aviso {
    padding: .8rem 1rem;
    border-radius: var(--raio);
    margin-bottom: 1rem;
    font-size: .875rem;
    border: 1px solid transparent;
    display: flex;
    gap: .6rem;
    align-items: flex-start;
}
.aviso.sucesso { background: var(--verde-claro);    border-color: #a7f3d0; color: #065f46; }
.aviso.erro    { background: var(--vermelho-claro); border-color: #fecaca; color: #991b1b; }
.aviso.atencao { background: var(--ambar-claro);    border-color: #fde68a; color: #92400e; }
.aviso.info    { background: var(--azul-claro);     border-color: #bfdbfe; color: #1e40af; }

.vazio { padding: 2.5rem 1rem; text-align: center; color: var(--suave); }
.vazio .icone { font-size: 2rem; display: block; margin-bottom: .5rem; opacity: .5; }

/* ---------------------------------------------------------------- chamado */
.chamado-grade { display: grid; grid-template-columns: 1fr 320px; gap: 1.25rem; align-items: start; }

.linha-tempo { list-style: none; margin: 0; padding: 0; }
.linha-tempo li { display: flex; gap: .75rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--borda); }
.linha-tempo li:last-child { border-bottom: 0; }
.linha-tempo .balao { flex: 1; min-width: 0; }
.linha-tempo .meta { font-size: .78rem; color: var(--suave); margin-bottom: .25rem; }
.linha-tempo .meta strong { color: var(--tinta); }
.linha-tempo .texto { white-space: pre-wrap; word-wrap: break-word; }
.linha-tempo li.interna { background: var(--ambar-claro); }
.linha-tempo li.interna .balao::after {
    content: "nota interna — não visível para o solicitante";
    display: block;
    font-size: .72rem;
    color: #92400e;
    margin-top: .35rem;
}

.historico { list-style: none; margin: 0; padding: 0; font-size: .82rem; }
.historico li { padding: .45rem 0; border-bottom: 1px dashed var(--borda); color: var(--suave); }
.historico li:last-child { border-bottom: 0; }
.historico strong { color: var(--tinta); }

.dados dt { font-size: .72rem; text-transform: uppercase; letter-spacing: .05em; color: var(--suave); margin-top: .85rem; }
.dados dd { margin: .15rem 0 0; color: var(--tinta); font-weight: 500; }
.dados dt:first-child { margin-top: 0; }

.anexos { list-style: none; margin: 0; padding: 0; }
.anexos li { display: flex; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 1px solid var(--borda); font-size: .82rem; }
.anexos li:last-child { border-bottom: 0; }
.anexos .tamanho { margin-left: auto; color: var(--suave); font-size: .75rem; }

.barra-sla { height: 6px; background: var(--borda); border-radius: 999px; overflow: hidden; margin-top: .4rem; }
.barra-sla span { display: block; height: 100%; background: var(--verde); }
.barra-sla.atencao span { background: var(--ambar); }
.barra-sla.estourado span { background: var(--vermelho); }

/* ---------------------------------------------------------------- paginação */
.paginacao { display: flex; gap: .3rem; align-items: center; justify-content: center; padding: 1rem; }
.paginacao a, .paginacao span {
    min-width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    border: 1px solid var(--borda);
    background: var(--branco);
    font-size: .82rem;
    color: var(--texto);
}
.paginacao a:hover { background: #f8fafc; text-decoration: none; }
.paginacao .atual { background: var(--azul); border-color: var(--azul); color: #fff; font-weight: 600; }
.paginacao .reticencias { border: 0; background: transparent; }

/* ---------------------------------------------------------------- barras (relatório) */
.barra-dados { display: flex; align-items: center; gap: .6rem; }
.barra-dados .trilho { flex: 1; height: 8px; background: var(--borda); border-radius: 999px; overflow: hidden; min-width: 60px; }
.barra-dados .trilho span { display: block; height: 100%; background: var(--azul); }
.barra-dados .numero { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--tinta); min-width: 32px; text-align: right; }

/* ---------------------------------------------------------------- telas simples */
.tela-centro {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: linear-gradient(160deg, #0f172a 0%, #1e3a8a 100%);
}
.caixa-login {
    width: 100%;
    max-width: 420px;
    background: var(--branco);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(2, 6, 23, .35);
    padding: 2rem;
}
.caixa-login .marca { text-align: center; margin-bottom: 1.5rem; }
.caixa-login .marca .logo {
    width: 52px; height: 52px;
    border-radius: 14px;
    background: var(--azul);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .6rem;
}
.caixa-login h1 { font-size: 1.25rem; margin-bottom: .2rem; }
.caixa-login .subtitulo { color: var(--suave); font-size: .85rem; }

/* ---------------------------------------------------------------- erros */
.pagina-erro { max-width: 640px; margin: 4rem auto; padding: 2rem; text-align: center; }
.pagina-erro .codigo { font-size: 4rem; font-weight: 800; color: var(--azul); line-height: 1; }
.pagina-erro pre {
    text-align: left;
    background: var(--tinta);
    color: #e2e8f0;
    padding: 1rem;
    border-radius: var(--raio);
    overflow-x: auto;
    font-size: .78rem;
}

/* ---------------------------------------------------------------- responsivo */
@media (max-width: 1024px) {
    .chamado-grade { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
    .app { flex-direction: column; }
    .lateral { width: 100%; flex-basis: auto; height: auto; position: static; }
    .lateral .menu { display: flex; flex-wrap: wrap; gap: .25rem; }
    .lateral .menu .grupo { display: none; }
    .lateral .menu a { flex: 1 1 auto; justify-content: center; }
    .area { padding: 1rem; }
    .topo { padding: .8rem 1rem; }
}

@media print {
    .lateral, .topo .acoes, .btn, .filtros, .paginacao { display: none !important; }
    body { background: #fff; }
    .cartao { box-shadow: none; }
}

/* ==========================================================================
   Combrasil v1.4 — abertura amigável, Flash e Projetos
   ========================================================================== */
.eyebrow{display:inline-block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:800;color:var(--azul);margin-bottom:.25rem}
.abertura-shell{max-width:980px;margin:0 auto}.abertura-intro{background:linear-gradient(135deg,#fff,#f8fbff);border:1px solid var(--borda);border-radius:16px;padding:1.4rem 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem;box-shadow:var(--sombra);margin-bottom:1rem}.abertura-intro h2{font-size:1.65rem;margin-bottom:.25rem}.abertura-intro p{color:var(--suave);margin:0}.passos{display:flex;align-items:center}.passos span{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:#e2e8f0;color:#64748b;font-weight:700}.passos span.ativo{background:var(--azul);color:#fff}.passos i{display:block;width:32px;height:2px;background:#e2e8f0}
.form-chamado-modern{display:grid;gap:1rem}.secao-form{background:#fff;border:1px solid var(--borda);border-radius:16px;padding:1.25rem 1.35rem;box-shadow:var(--sombra)}.secao-titulo{display:flex;gap:.8rem;align-items:flex-start;margin-bottom:1rem}.secao-titulo .numero{width:30px;height:30px;border-radius:9px;background:var(--azul-claro);color:var(--azul);font-weight:800;display:grid;place-items:center}.secao-titulo h3{margin:0;font-size:1.05rem}.secao-titulo p{margin:.15rem 0 0;color:var(--suave);font-size:.8rem}
.opcoes-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:.75rem}.opcoes-cards.duas-colunas{grid-template-columns:repeat(2,1fr)}.opcao-card{border:1px solid var(--borda);border-radius:12px;padding:.9rem;display:flex;align-items:center;gap:.75rem;cursor:pointer;transition:.15s;background:#fff}.opcao-card:hover{border-color:#93c5fd;box-shadow:0 4px 16px rgba(37,99,235,.08)}.opcao-card:has(input:checked){border-color:var(--azul);background:var(--azul-claro);box-shadow:0 0 0 2px rgba(37,99,235,.08)}.opcao-card input{position:absolute;opacity:0;pointer-events:none}.opcao-icone{width:38px;height:38px;flex:0 0 38px;border-radius:10px;background:#f1f5f9;color:var(--tinta);display:grid;place-items:center;font-size:1.1rem;font-weight:900}.opcao-card:has(input:checked) .opcao-icone{background:var(--azul);color:#fff}.opcao-card strong,.opcao-card small{display:block}.opcao-card small{color:var(--suave);font-size:.72rem;margin-top:.1rem}.opcao-card.projeto .opcao-icone{background:#f3e8ff;color:#7c3aed}
.upload-box{border:1px dashed #cbd5e1;border-radius:12px;padding:1rem;background:#f8fafc;display:grid;gap:.5rem}.upload-box>div{display:flex;justify-content:space-between;gap:1rem}.upload-box span,.upload-box small{color:var(--suave);font-size:.75rem}.acoes-form{display:flex;justify-content:flex-end;gap:.6rem;align-items:center}.btn.grande{padding:.7rem 1.1rem}
.menu-flash{width:100%;border:0;background:transparent;color:#fcd34d;display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:8px;font:inherit;font-weight:600;cursor:pointer;text-align:left}.menu-flash:hover{background:rgba(255,255,255,.06)}
.modal-fundo[hidden]{display:none}.modal-fundo{position:fixed;inset:0;background:rgba(15,23,42,.6);z-index:100;display:grid;place-items:center;padding:1rem}.modal-flash{width:min(480px,100%);background:#fff;border-radius:18px;padding:1.5rem;box-shadow:0 24px 70px rgba(15,23,42,.3);position:relative}.modal-flash h2{text-align:center;margin:.3rem 0}.modal-flash>p{text-align:center;color:var(--suave);margin-bottom:1.2rem}.flash-icone{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff7ed;margin:0 auto;font-size:1.5rem}.modal-fechar{position:absolute;right:.8rem;top:.7rem;border:0;background:transparent;font-size:1.5rem;color:var(--suave);cursor:pointer}
.kanban-portfolio,.kanban-projeto{display:grid;grid-template-columns:repeat(5,minmax(230px,1fr));gap:1rem;align-items:start;overflow-x:auto;padding-bottom:.6rem}.kanban-coluna{background:#eaf0f6;border:1px solid #dbe4ee;border-radius:14px;min-height:320px}.kanban-coluna>header{padding:.8rem .9rem;display:flex;align-items:center;justify-content:space-between;color:var(--tinta)}.kanban-coluna>header span{background:#fff;border-radius:999px;min-width:24px;height:24px;display:grid;place-items:center;font-size:.72rem}.kanban-lista{padding:.15rem .65rem .75rem;min-height:260px}.projeto-card,.kanban-card{display:block;background:#fff;border:1px solid var(--borda);border-radius:10px;padding:.8rem;margin-bottom:.65rem;box-shadow:0 1px 2px rgba(15,23,42,.05);color:var(--texto)}.projeto-card:hover{text-decoration:none;border-color:#93c5fd}.projeto-card strong,.projeto-card span,.projeto-card small{display:block}.projeto-card strong{color:var(--tinta);margin:.2rem 0 .45rem}.projeto-card span,.projeto-card small,.kanban-card small{font-size:.72rem;color:var(--suave)}.progresso{height:5px;background:#e2e8f0;border-radius:999px;overflow:hidden;margin:.65rem 0 .25rem}.progresso i{display:block;height:100%;background:var(--azul)}.kanban-card[draggable=true]{cursor:grab}.kanban-card.arrastando{opacity:.45}.kanban-lista.sobre{outline:2px dashed #60a5fa;outline-offset:-5px;border-radius:8px}.kanban-card p{font-size:.78rem;color:var(--suave);margin:.35rem 0}.projeto-resumo{background:#fff;border:1px solid var(--borda);border-radius:14px;padding:1.2rem 1.3rem;display:grid;grid-template-columns:2fr 1fr;gap:1.5rem;margin-bottom:1rem;box-shadow:var(--sombra)}.projeto-resumo p{color:var(--suave)}.projeto-meta{display:grid;grid-template-columns:repeat(2,1fr);gap:.8rem}.projeto-meta span{background:#f8fafc;border-radius:9px;padding:.7rem;font-size:.78rem}.projeto-meta b{display:block;color:var(--suave);font-size:.68rem;text-transform:uppercase;margin-bottom:.2rem}.status-projeto{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}.status-projeto select{width:auto;min-width:180px}.info-box{padding:.8rem 1rem;background:var(--azul-claro);border:1px solid #bfdbfe;border-radius:10px;color:#1e40af;margin-bottom:1rem}.adicionar-card{margin-top:1rem}.acao-campo{display:flex;align-items:flex-end}.acao-campo .btn{margin-top:auto}
@media(max-width:900px){.opcoes-cards{grid-template-columns:repeat(2,1fr)}.projeto-resumo{grid-template-columns:1fr}.kanban-portfolio,.kanban-projeto{grid-template-columns:repeat(5,260px)}}
@media(max-width:600px){.abertura-intro{align-items:flex-start}.passos{display:none}.opcoes-cards,.opcoes-cards.duas-colunas{grid-template-columns:1fr}.secao-form{padding:1rem}.upload-box>div{display:block}.area{padding:1rem}}

/* ---- BI / gráficos e logs (v1.4) ---- */
.exportar-grafico { display: inline-flex; gap: .35rem; }
.grafico-vazio { padding: 2rem; text-align: center; color: var(--suave, #64748b); font-size: .9rem; }
figure[data-grafico] svg { display: block; height: auto; }
.lista-simples { list-style: none; margin: 0; padding: 0; }
.lista-simples li { padding: .35rem 0; border-bottom: 1px solid var(--borda, #e2e8f0); }
.lista-simples li:last-child { border-bottom: 0; }
.filtros-bi label { font-size: .82rem; display: flex; flex-direction: column; gap: .25rem; }