/* ===========================================================================
   Central de Atendimento — CSS do sistema.
   Carregado DEPOIS de via3-ui.css. Nenhuma cor escrita à mão: só tokens.
   Mesmo desenho do Relatório de Chamados e do Planner.
   =========================================================================== */

/* nomes antigos usados nos templates -> tokens do via3-ui */
:root { --borda: var(--linha); --tinta-suave: var(--tinta-2); --info: var(--serie-1); --acao-hover: var(--acao); }

[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--acao); outline-offset: 2px; border-radius: 6px; }
a { text-decoration: none; }
h1 { font-size: 26px; } h2 { font-size: 23px; } h3 { font-size: 14.5px; }
.n, .num { font-variant-numeric: tabular-nums; }
.num { font-size: 13px; color: var(--tinta-2); }
svg { flex-shrink: 0; }

/* ------------------------------- campos --------------------------------- */
input, select, textarea { width: 100%; }
input[type="checkbox"], input[type="radio"] { width: auto; accent-color: var(--acao); }
select:focus, textarea:focus { outline: none; border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); }
textarea { resize: vertical; line-height: 1.55; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 12.5px; color: var(--tinta-2); font-weight: 500; }

/* ------------------------------- botões ---------------------------------- */
.botao {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 9px 15px; border-radius: var(--raio-sm); border: 1px solid var(--linha);
  background: var(--superficie); color: var(--tinta); font: inherit; font-size: 13.5px; font-weight: 500;
  cursor: pointer; white-space: nowrap; transition: background var(--transicao), border-color var(--transicao), filter var(--transicao);
}
.botao:hover { border-color: var(--linha-forte); color: var(--tinta); }
.botao svg { width: 16px; height: 16px; }
.botao.acao { background: var(--acao-forte); border-color: transparent; color: var(--acao-tinta); font-weight: 700; }
.botao.acao:hover { filter: brightness(1.07); color: var(--acao-tinta); }
.botao.suave { background: transparent; }
.botao.pequeno { padding: 6px 11px; font-size: 12.5px; }
.botao:disabled { opacity: .45; cursor: default; }

/* ------------------------------ etiquetas -------------------------------- */
.etiqueta {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 600; white-space: nowrap;
  background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--linha);
}
.etiqueta::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.etiqueta.acao   { background: var(--acao-suave); color: var(--acao); border-color: transparent; }
.etiqueta.ok     { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); border-color: transparent; }
.etiqueta.alerta { background: color-mix(in srgb, var(--atencao) 16%, transparent); color: var(--atencao); border-color: transparent; }
.etiqueta.erro   { background: color-mix(in srgb, var(--erro) 14%, transparent); color: var(--erro); border-color: transparent; }
.etiqueta.info   { background: color-mix(in srgb, var(--serie-1) 16%, transparent); color: var(--serie-1); border-color: transparent; }

.aviso { border: 1px solid var(--linha); background: var(--superficie-2); color: var(--tinta-2); margin-bottom: 0; }
.aviso.alerta {
  background: color-mix(in srgb, var(--atencao) 13%, transparent);
  border-color: color-mix(in srgb, var(--atencao) 42%, transparent); color: var(--atencao);
}

/* ===========================================================================
   Casca interna: lateral + conteúdo (padrão do Relatório de Chamados)
   =========================================================================== */
.app { display: flex; min-height: 100vh; }

.lateral {
  width: 248px; flex: 0 0 248px; background: var(--superficie); border-right: 1px solid var(--linha);
  padding: 22px 14px; position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px;
}
.logo { display: flex; flex-direction: column; gap: 10px; padding: 0 6px; }
.logo .produto {
  font-size: 12px; font-weight: 600; letter-spacing: .02em; color: var(--tinta-2);
  padding-top: 10px; border-top: 1px solid var(--linha);
}
.menu { display: flex; flex-direction: column; gap: 3px; }
.menu-rot { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 0 8px 6px; }
.menu .item + .menu-rot { margin-top: 14px; }
.item {
  display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: var(--raio-sm);
  color: var(--tinta-2); font-size: 13.5px; font-weight: 500; transition: background var(--transicao), color var(--transicao);
}
.item svg { width: 17px; height: 17px; opacity: .8; }
.item:hover { background: var(--superficie-2); color: var(--tinta); }
.item.on { background: var(--acao-suave); color: var(--acao); font-weight: 600; }
.item.on svg { opacity: 1; }

.lateral-rodape { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.conta { border-top: 1px solid var(--linha); padding-top: 12px; }
.quem { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.quem > div { min-width: 0; }
.quem .nome-u { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.quem .perfil-u { font-size: 11.5px; color: var(--tinta-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acoes-conta { display: flex; gap: 6px; }
.acoes-conta .botao { flex: 1; font-size: 12px; padding: 7px 8px; }

.avatar {
  width: 32px; height: 32px; border-radius: 50%; flex: 0 0 32px; display: grid; place-items: center;
  background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--linha);
  font-weight: 700; font-size: 12px; text-transform: uppercase;
}
.avatar.interno { background: var(--acao-suave); color: var(--acao); border-color: transparent; }

.principal { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.cabecalho {
  padding: 26px 30px 0; display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; justify-content: space-between;
}
.cabecalho h2 { font-size: 23px; }
.cabecalho .rotulo { margin-bottom: 4px; }
.conteudo { padding: 22px 30px 46px; display: flex; flex-direction: column; gap: 20px; flex: 1; width: 100%; max-width: 1320px; }
.rodape {
  display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 16px 30px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-fraca);
}
.rodape i { font-style: normal; color: var(--acao); }

/* ===========================================================================
   Casca do cliente: barra superior (padrão do Planner)
   =========================================================================== */
.topbar {
  position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 0 30px; height: 68px; background: color-mix(in srgb, var(--superficie) 92%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--linha);
}
.topbar .esq { display: flex; align-items: center; gap: 30px; min-width: 0; }
.topbar .marca-via3 .nome { font-size: 20px; }
.topbar .marca-via3 .sub { font-size: 9px; }
.topbar nav { display: flex; gap: 4px; }
.topbar nav a { display: flex; align-items: center; gap: 8px; padding: 8px 13px; border-radius: var(--raio-sm); color: var(--tinta-2); font-size: 13.5px; font-weight: 500; }
.topbar nav a svg { width: 16px; height: 16px; }
.topbar nav a:hover { background: var(--superficie-2); color: var(--tinta); }
.topbar nav a.on { background: var(--acao-suave); color: var(--acao); font-weight: 600; }
.topbar .dir { display: flex; align-items: center; gap: 12px; }
.topbar .quem { margin: 0; text-align: right; }
.topbar .sair { color: var(--tinta-2); display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--linha); }
.topbar .sair:hover { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 42%, transparent); }
.topbar .sair svg { width: 16px; height: 16px; }
.cliente .conteudo { margin: 0 auto; max-width: 1180px; padding-top: 30px; }

/* ===========================================================================
   Componentes
   =========================================================================== */
.cartao { overflow: hidden; }

/* KPIs com ícone (Relatório de Chamados) */
.kpis, .grade4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.kpi {
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio);
  box-shadow: var(--sombra-sutil); padding: 16px 18px; display: flex; flex-direction: column;
}
.kpi .icone { width: 38px; height: 38px; border-radius: var(--raio-sm); display: grid; place-items: center; margin-bottom: 12px; }
.kpi .icone svg { width: 18px; height: 18px; }
.kpi .val { font-family: var(--fonte-titulo); font-size: 27px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kpi .rot { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; margin-top: 5px; }
.kpi .sub { font-size: 12px; color: var(--tinta-2); margin-top: 4px; line-height: 1.45; }
.kpi.destaque-erro { border-color: color-mix(in srgb, var(--erro) 50%, transparent); }
.kpi.destaque-alerta { border-color: color-mix(in srgb, var(--atencao) 50%, transparent); }
.t-azul    { background: color-mix(in srgb, var(--serie-1) 16%, transparent); color: var(--serie-1); }
.t-laranja { background: var(--acao-suave); color: var(--acao); }
.t-verde   { background: color-mix(in srgb, var(--ok) 16%, transparent); color: var(--ok); }
.t-ambar   { background: color-mix(in srgb, var(--atencao) 18%, transparent); color: var(--atencao); }
.t-erro    { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); }
/* versão antiga do bloco de número, mantida por compatibilidade */
.estat { padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.estat .n { font-family: var(--fonte-titulo); font-size: 27px; font-weight: 700; line-height: 1.1; }

/* abas segmentadas */
.abas { display: inline-flex; gap: 2px; padding: 3px; background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio-sm); align-self: flex-start; }
.abas a { padding: 6px 13px; border-radius: 6px; color: var(--tinta-2); font-size: 12.5px; font-weight: 500; }
.abas a:hover { color: var(--tinta); }
.abas a.on { background: var(--superficie); color: var(--tinta); font-weight: 600; box-shadow: var(--sombra-sutil); }

.barra-ferr { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); }
.barra-ferr input { width: 260px; padding: 7px 12px; }
.ferramentas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* lista de chamados */
.linha {
  display: grid; grid-template-columns: 76px minmax(0, 1fr) 170px 190px 120px; align-items: center; gap: 14px;
  padding: 13px 18px; border-top: 1px solid var(--linha); color: var(--tinta); font-size: 13.5px;
  transition: background var(--transicao);
}
.linha:hover { background: var(--superficie-2); color: var(--tinta); }
.linha.cabeca { padding: 10px 18px; border-top: 0; font-size: 10.5px; }
.linha.cabeca:hover { background: transparent; }

/* tabelas */
table.tab { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.tab th {
  text-align: left; font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca);
  font-weight: 600; padding: 12px 18px; border-bottom: 1px solid var(--linha); background: var(--superficie-2);
}
table.tab td { padding: 12px 18px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
table.tab tr:last-child td { border-bottom: 0; }
table.tab tbody tr:hover td { background: var(--superficie-2); }

/* duas colunas (conteúdo + lateral) */
.duas { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 24px; align-items: start; }
.duas > form.cartao, .lado .cartao { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.lado { display: flex; flex-direction: column; gap: 14px; }
.lado .cartao h3 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); }
.kv { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 6px 0; border-bottom: 1px dashed var(--linha); }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--tinta-2); }
.kv span:last-child { text-align: right; font-weight: 500; }

/* escolha de categoria */
.escolha { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.escolha label {
  display: flex; flex-direction: column; gap: 3px; padding: 14px 16px; border-radius: var(--raio);
  border: 1px solid var(--linha); background: var(--superficie); cursor: pointer; transition: border-color var(--transicao), background var(--transicao);
}
.escolha label:hover { border-color: var(--linha-forte); }
.escolha label:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); box-shadow: 0 0 0 3px var(--acao-suave); }
.escolha input { display: none; }
.escolha b { font-weight: 600; font-size: 13.5px; }
.escolha span { font-size: 12px; color: var(--tinta-2); }

/* linha do tempo do chamado */
.msg { display: flex; gap: 14px; padding: 18px 20px; border-top: 1px solid var(--linha); }
.msg.interno { background: color-mix(in srgb, var(--acao) 5%, transparent); }
.msg.nota { background: color-mix(in srgb, var(--atencao) 8%, transparent); box-shadow: inset 3px 0 0 var(--atencao); }
.msg .corpo { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.msg .meta { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.msg .meta span { color: var(--tinta-2); font-weight: 400; }
.msg .texto { white-space: pre-wrap; word-break: break-word; font-size: 14px; }
.anexo { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 12px; color: var(--tinta-2); background: var(--campo); }
.anexo:hover { border-color: var(--acao); color: var(--tinta); }
.evento { padding: 9px 20px; border-top: 1px solid var(--linha); font-size: 12.5px; color: var(--tinta-fraca); }

/* kanban */
.kanban { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; align-items: start; }
.col { display: flex; flex-direction: column; gap: 10px; background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px; min-height: 140px; }
.col .h { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 600; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); padding: 2px 4px 4px; }
.col .h span { background: var(--superficie); border: 1px solid var(--linha); border-radius: 999px; padding: 0 8px; font-size: 11px; color: var(--tinta-2); }
.tk { padding: 12px 14px; display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--tinta); transition: border-color var(--transicao), transform var(--transicao); }
.tk:hover { border-color: var(--acao); transform: translateY(-1px); color: var(--tinta); }
.tk .topo-tk { display: flex; justify-content: space-between; font-size: 11px; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.tk .t { font-weight: 600; line-height: 1.35; }
.tk .sub { font-size: 12px; color: var(--tinta-2); }
.tk.sla { border-color: color-mix(in srgb, var(--erro) 60%, transparent); box-shadow: inset 3px 0 0 var(--erro); }
.tk.rec { border-style: dashed; }

/* chat e avaliação */
.chat { display: flex; flex-direction: column; gap: 8px; height: 360px; overflow: auto; padding: 4px; }
.bolha { max-width: 80%; padding: 8px 12px; border-radius: 12px; background: var(--superficie-2); font-size: 13.5px; line-height: 1.4; }
.bolha.eu { align-self: flex-end; background: var(--acao-forte); color: var(--acao-tinta); }
.bolha small { display: block; font-size: 11px; opacity: .75; }
.estrelas { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 4px; }
.estrelas label { font-size: 26px; color: var(--tinta-fraca); cursor: pointer; }
.estrelas input { display: none; }
.estrelas label:has(input:checked), .estrelas label:has(input:checked) ~ label, .estrelas label:hover, .estrelas label:hover ~ label { color: var(--atencao); }
.gravando { color: var(--erro) !important; border-color: var(--erro) !important; }

/* ===========================================================================
   Tela de acesso em duas colunas (mesmo modelo do Planner / Relatório / Skills)
   =========================================================================== */
body.tela-acesso {
  background:
    radial-gradient(1100px 520px at 82% -12%, color-mix(in srgb, var(--acao) 16%, transparent), transparent 60%),
    radial-gradient(900px 480px at -10% 8%, color-mix(in srgb, var(--fundo-brilho) 85%, transparent), transparent 55%),
    var(--fundo);
  background-attachment: fixed;
}
.inicio-duplo {
  min-height: 100vh; display: grid; align-items: center; grid-template-columns: minmax(0, 1fr) 500px; column-gap: 100px;
  max-width: 1244px; margin: 0 auto; padding: 40px 32px; /* padrão de login 16/10/2026: conteúdo 1180px, cartão 500px */
}
.inicio-unico { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.inicio-unico .inicio-caixa { max-width: 440px; }
.inicio-apresentacao .marca-via3 { margin-bottom: 64px; }
.inicio-sobrenome { display: block; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--acao); margin-bottom: 14px; }
.inicio-chamada { font-size: clamp(30px, 3.6vw, 52px); font-weight: 700; letter-spacing: -.03em; line-height: 1.04; margin: 0 0 22px; max-width: 20ch; text-wrap: balance; }
.inicio-chamada em { font-style: normal; color: var(--acao); display: block; }
.inicio-subchamada { color: var(--tinta-2); font-size: 16px; line-height: 1.6; max-width: 42ch; margin: 0 0 56px; }
.inicio-pilares { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.inicio-pilar { border-left: 2px solid var(--acao); padding-left: 13px; }
.inicio-pilar .titulo { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; margin-bottom: 3px; }
.inicio-pilar .detalhe { font-size: 13px; color: var(--tinta-fraca); line-height: 1.45; }
.inicio-caixa {
  width: 100%; padding: 34px 34px 26px; background: var(--superficie); border: 1px solid var(--linha);
  border-top: 3px solid var(--acao); border-radius: 16px; box-shadow: var(--sombra);
}
.inicio-caixa .marca-via3 { margin-bottom: 26px; }
.inicio-caixa h1 { font-size: 24px; margin: 0 0 8px; }
.inicio-caixa .inicio-subtitulo { color: var(--tinta-2); font-size: 14px; margin: 0 0 24px; }
.inicio-caixa .campo { margin-bottom: 14px; }
.inicio-caixa .campo label { font-size: 13.5px; }
.inicio-caixa input { height: 44px; padding: 12px 14px; font-size: 14px; border-radius: 10px; }
.inicio-caixa .aviso { margin-bottom: 16px; }
.inicio-caixa .botao.acao { width: 100%; height: 48px; padding: 0 16px; font-size: 15px; font-weight: 700; border-radius: 10px; margin-top: 4px; }
.inicio-caixa .elo { display: block; width: 100%; margin-top: 14px; background: none; border: 0; padding: 6px 0; color: var(--tinta-fraca); font-size: 12.5px; font-weight: 500; cursor: pointer; text-align: center; }
.inicio-caixa .elo:hover { color: var(--tinta-2); text-decoration: underline; }
.inicio-caixa .inicio-nota { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--linha); font-size: 11.5px; color: var(--tinta-fraca); text-align: center; line-height: 1.6; }
.inicio-tema { position: fixed; top: 16px; right: 16px; z-index: 10; }

/* ------------------------------- responsivo ------------------------------ */
@media (max-width: 1100px) {
  .kanban { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .duas { grid-template-columns: 1fr; }
  .lado { margin-top: 0 !important; }
}
@media (max-width: 900px) {
  .inicio-duplo { grid-template-columns: minmax(0, 1fr); gap: 36px; padding: 56px 18px 32px; }
  .inicio-apresentacao .marca-via3 { margin-bottom: 28px; }
  .inicio-chamada { font-size: 30px; }
  .inicio-subchamada { font-size: 15px; margin-bottom: 24px; }
  .inicio-pilares { grid-template-columns: 1fr; gap: 14px; }
  .inicio-caixa { padding: 28px 22px 22px; border-radius: 16px; }
  .inicio-caixa input { height: 46px; font-size: 16px; }
  .inicio-caixa .botao.acao { height: 48px; }
  .app { flex-direction: column; }
  .lateral { position: sticky; top: 0; z-index: 6; width: 100%; flex: none; height: auto; padding: 12px 14px; gap: 10px; flex-direction: row; align-items: center; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--linha); }
  .logo .produto, .menu-rot, .conta .quem { display: none; }
  .menu { flex-direction: row; gap: 4px; overflow-x: auto; order: 3; width: 100%; }
  .item { white-space: nowrap; padding: 8px 10px; }
  .lateral-rodape { margin: 0 0 0 auto; }
  .conta { border: 0; padding: 0; }
  .cabecalho { padding: 18px 16px 0; }
  .conteudo { padding: 16px 16px 32px; }
  .rodape { padding: 14px 16px; }
  .topbar { padding: 0 16px; }
  .topbar .esq { gap: 14px; }
  .topbar .quem { display: none; }
  .topbar nav a span { display: none; }
  .linha { grid-template-columns: 64px minmax(0, 1fr); }
  .linha > :nth-child(n+3) { grid-column: 2; }
  .linha.cabeca > :nth-child(n+3) { display: none; }
  .barra-ferr input, .barra-ferr form { width: 100%; }
}
@media (max-width: 560px) {
  .kanban { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Central 2026-10 — substituto do GLPI
   =========================================================================== */
.mini { font-size: 12px; color: var(--tinta-fraca); line-height: 1.45; }
.txt-ok { color: var(--ok) !important; } .txt-alerta { color: var(--atencao) !important; } .txt-erro { color: var(--erro) !important; }
.vazio { padding: 26px 20px; color: var(--tinta-2); font-size: 13.5px; text-align: center; }
.voltar { font-size: 13px; color: var(--tinta-2); }
.voltar:hover { color: var(--acao); }
.rolagem { overflow-x: auto; }
.bloco { padding: 18px 20px; display: flex; flex-direction: column; gap: 12px; }
.grade2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.coluna { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.largo { width: 100%; }
.opcao { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: var(--tinta-2); cursor: pointer; }
.botao.grande { height: 46px; padding: 0 28px; font-size: 14.5px; }
.botao.perigo { color: var(--erro); border-color: color-mix(in srgb, var(--erro) 42%, transparent); }
.botao.copiado, button.copiado { color: var(--ok) !important; border-color: var(--ok) !important; }
button.fantasma { background: transparent; border: 0; padding: 4px 6px; color: var(--tinta-2); display: inline-flex; align-items: center; }
button.fantasma:hover { color: var(--acao); }
button.fantasma svg { width: 15px; height: 15px; }
a.fantasma { font-size: 12px; color: var(--tinta-2); }
a.fantasma:hover { color: var(--acao); }
code { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 12px; }

/* ------------------------- menu lateral recolhível ------------------------ */
.logo-topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; }
.recolher { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border-radius: var(--raio-sm); background: transparent; border: 1px solid transparent; color: var(--tinta-fraca); }
.recolher:hover { color: var(--tinta); background: var(--superficie-2); border-color: var(--linha); }
.recolher svg { width: 17px; height: 17px; transition: transform var(--transicao); }
.lateral { transition: width var(--transicao), flex-basis var(--transicao); overflow-y: auto; }
.item .rot-item { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bolinha { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--superficie-2); color: var(--tinta-2); border: 1px solid var(--linha); font-variant-numeric: tabular-nums; }
.bolinha.acao { background: var(--acao-forte); color: var(--acao-tinta); border-color: transparent; }
.bolinha.alerta { background: color-mix(in srgb, var(--atencao) 22%, transparent); color: var(--atencao); border-color: transparent; }
.lateral.recolhida { width: 72px; flex-basis: 72px; padding-left: 10px; padding-right: 10px; }
.lateral.recolhida .logo { padding: 0; align-items: center; }
.lateral.recolhida .logo-topo { flex-direction: column; align-items: center; gap: 12px; }
.lateral.recolhida .marca-via3 .nome { font-size: 17px; }
.lateral.recolhida .marca-via3 .sub, .lateral.recolhida .logo .produto, .lateral.recolhida .menu-rot,
.lateral.recolhida .rot-item, .lateral.recolhida .conta .quem > div, .lateral.recolhida .acoes-conta .botao span { display: none; }
.lateral.recolhida .menu-rot + .item, .lateral.recolhida .item + .menu-rot { margin-top: 0; }
.lateral.recolhida .menu .item + .menu-rot { display: block; height: 1px; padding: 0; margin: 8px 6px; background: var(--linha); font-size: 0; }
.lateral.recolhida .recolher svg { transform: scaleX(-1); }
.lateral.recolhida .item { justify-content: center; padding: 10px 0; gap: 0; position: relative; }
.lateral.recolhida .item svg { width: 19px; height: 19px; }
.lateral.recolhida .item .bolinha { position: absolute; top: 2px; right: 4px; min-width: 16px; height: 16px; font-size: 9.5px; padding: 0 4px; }
.lateral.recolhida .quem { justify-content: center; }

/* --------------------------- cabeçalho e tema ----------------------------- */
.cabecalho { align-items: center; padding-top: 22px; }
.cab-esq { min-width: 0; }
.cab-dir { display: flex; align-items: center; gap: 10px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
.cab-dir form { margin: 0; }
.sub-cab { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--tinta-2); margin-top: 4px; }
.ponto { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.busca-topo { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--campo); border: 1px solid var(--linha); color: var(--tinta-fraca); }
.busca-topo:focus-within { border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); }
.busca-topo svg { width: 15px; height: 15px; }
.busca-topo input { border: 0; background: transparent; padding: 0; width: 190px; box-shadow: none !important; }
/* alternador sol / lua com nuvem */
.tema-bt { display: inline-flex; align-items: center; gap: 2px; padding: 3px; height: 38px; border-radius: 999px; background: var(--campo); border: 1px solid var(--linha); cursor: pointer; }
.tema-bt:hover { border-color: var(--linha-forte); }
.tema-op { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; color: var(--tinta-fraca); transition: background var(--transicao), color var(--transicao); }
.tema-op svg { width: 16px; height: 16px; }
html[data-theme="claro"] .tema-claro, html:not([data-theme="claro"]) .tema-escuro { background: var(--superficie); color: var(--acao); box-shadow: var(--sombra-sutil); }
.topbar .tema-bt { margin-left: 4px; }
.inicio-tema.tema-bt { position: fixed; top: 16px; right: 16px; z-index: 10; }

/* ------------------------------ filtros ---------------------------------- */
.filtros { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filtros select, .filtros input { width: auto; min-width: 150px; height: 38px; padding: 0 12px; }
.intervalo { display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 38px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--campo); }
.intervalo input { border: 0; background: transparent; height: 34px; padding: 0 4px; min-width: 0 !important; box-shadow: none !important; }
.intervalo .rot { font-size: 12px; color: var(--tinta-fraca); }
.limpar { font-size: 12.5px; color: var(--tinta-2); }
.barra-topo { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; }

/* -------------------------------- KPIs ----------------------------------- */
.kpis.seis { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
a.kpi { color: var(--tinta); transition: border-color var(--transicao), transform var(--transicao); }
a.kpi:hover { border-color: var(--linha-forte); color: var(--tinta); }
.kpi-aba.on { border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); }
.t-alerta { background: color-mix(in srgb, var(--alerta) 16%, transparent); color: var(--alerta); }
.faixa-servico { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra-sutil); }
.faixa-servico > div { padding: 14px 18px; display: flex; flex-direction: column; gap: 2px; border-left: 1px solid var(--linha); }
.faixa-servico > div:first-child { border-left: 0; }
.faixa-servico .rot { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.faixa-servico b { font-family: var(--fonte-titulo); font-size: 21px; font-variant-numeric: tabular-nums; }
.faixa-servico small { font-size: 11.5px; color: var(--tinta-2); }

/* --------------------------- cartões e tabelas ---------------------------- */
.cartao-topo { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.cartao-topo h3 { font-size: 14px; }
.cartao-topo .nota { font-size: 12px; color: var(--tinta-fraca); }
table.semanas { width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
table.semanas th { font-size: 11px; font-weight: 600; color: var(--tinta-2); padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--linha); white-space: nowrap; background: var(--superficie-2); }
table.semanas th small { display: block; font-weight: 400; color: var(--tinta-fraca); }
table.semanas td { padding: 9px 12px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
table.semanas tr:last-child td { border-bottom: 0; }
table.semanas .ent { font-weight: 600; color: var(--tinta-2); position: sticky; left: 0; background: var(--superficie); }
table.semanas .total { font-weight: 700; border-left: 1px solid var(--linha); }
.cel { position: relative; display: block; min-width: 82px; }
.cel .barra { position: absolute; left: 0; top: -3px; bottom: -3px; border-radius: 5px; background: var(--acao-suave); }
.cel .v { position: relative; padding-left: 6px; }
.grade-rank { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.rank { padding: 10px 18px 16px; display: flex; flex-direction: column; gap: 9px; }
.rank-l { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(60px, 1fr) 92px; gap: 12px; align-items: center; font-size: 13px; }
.rank-n { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rank-b { height: 8px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.rank-b span { display: block; height: 100%; border-radius: 99px; background: var(--acao); }
.rank-v { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.rank-v small { font-weight: 400; color: var(--tinta-fraca); margin-left: 6px; font-size: 11.5px; }

.chamados-tab td { vertical-align: top; }
.chamados-tab .assunto { font-weight: 600; }
tr.clicavel { cursor: pointer; }
tr.sel td { background: var(--acao-suave) !important; }
table.tab td .mini { margin-top: 2px; }
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: currentColor; }
.p-baixa { color: var(--tinta-fraca); } .p-media { color: var(--serie-1); } .p-alta { color: var(--alerta); } .p-critica { color: var(--erro); }
.pessoa { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.avatar.mini-av { width: 24px; height: 24px; flex: 0 0 24px; font-size: 10px; display: inline-grid; }
.tk .rodape-tk { display: flex; justify-content: space-between; align-items: center; }
.sem-tec { font-size: 11px; color: var(--acao); font-weight: 600; }

/* ----------------------------- abrir chamado ------------------------------ */
.form-novo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.passo { display: flex; align-items: center; gap: 10px; }
.passo span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--acao-forte); color: var(--acao-tinta); font-weight: 700; font-size: 12px; }
.escolha.duas-op { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.escolha.duas-op label { flex-direction: column; gap: 4px; padding: 16px 18px; }
.escolha.duas-op b { font-size: 15px; }
.escolha.duas-op em { font-style: normal; font-weight: 600; color: var(--tinta); }
.op-ic { width: 34px; height: 34px; border-radius: var(--raio-sm); display: grid !important; place-items: center; margin-bottom: 6px; }
.op-ic svg { width: 18px; height: 18px; }
.busca-cat { display: flex; align-items: center; gap: 10px; padding: 0 14px; height: 44px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--campo); color: var(--tinta-fraca); }
.busca-cat:focus-within { border-color: var(--acao); box-shadow: 0 0 0 3px var(--acao-suave); }
.busca-cat svg { width: 17px; height: 17px; }
.busca-cat input { border: 0; background: transparent; padding: 0; box-shadow: none !important; height: 40px; }
.servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.servicos button { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; text-align: left; padding: 11px 13px; border-radius: var(--raio-sm); background: var(--superficie); }
.servicos button b { font-size: 13px; font-weight: 600; }
.servicos button span { font-size: 11.5px; color: var(--tinta-fraca); line-height: 1.35; }
.servicos button.on, .itens button.on { border-color: var(--acao); background: var(--acao-suave); box-shadow: 0 0 0 2px var(--acao-suave); }
.itens { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px; border-radius: var(--raio); background: var(--superficie-2); border: 1px dashed var(--linha-forte); }
.itens-tit { width: 100%; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.itens button { padding: 7px 12px; font-size: 13px; border-radius: 999px; display: inline-flex; flex-direction: column; align-items: flex-start; }
.itens button small { font-size: 10.5px; color: var(--tinta-fraca); }
.urgencias { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.urgencias label { padding: 11px 13px; border-radius: var(--raio-sm); border: 1px solid var(--linha); cursor: pointer; font-size: 13px; display: flex; gap: 8px; align-items: center; }
.urgencias label:has(input:checked) { border-color: var(--acao); background: var(--acao-suave); }
.urgencias .u-critica:has(input:checked) { border-color: var(--erro); background: color-mix(in srgb, var(--erro) 12%, transparent); }
.urgencias b { font-weight: 500; }
.check-geo { display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; color: var(--tinta-2); }
.check-geo svg { width: 15px; height: 15px; color: var(--acao); margin-top: 1px; }
.enviar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }

/* ------------------------------- chamado ---------------------------------- */
.cab-chamado { display: flex; flex-direction: column; gap: 6px; }
.cab-chamado h1 { font-size: 25px; line-height: 1.25; }
.selos { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.timeline { position: relative; display: flex; flex-direction: column; gap: 14px; padding-left: 4px; }
.timeline::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: var(--linha); }
.tl { position: relative; display: grid; grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.tl-marca { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; z-index: 1; background: var(--superficie); border: 1px solid var(--linha); color: var(--tinta-2); }
.tl-marca svg { width: 16px; height: 16px; }
.tl-caixa { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra-sutil); min-width: 0; }
.tl-meta { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; font-size: 12.5px; color: var(--tinta-2); }
.tl-meta > span:first-child { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; color: var(--tinta); }
.tl .texto { white-space: pre-wrap; word-break: break-word; font-size: 14px; line-height: 1.6; }
.tl-abertura .tl-caixa { border-top: 3px solid var(--tinta-fraca); }
.tl.via3 .tl-marca { color: var(--acao); border-color: color-mix(in srgb, var(--acao) 40%, transparent); }
.tl.via3 .tl-caixa { border-left: 3px solid var(--acao); }
.tl.cli .tl-caixa { border-left: 3px solid var(--serie-1); }
.tl.privado .tl-caixa { background: color-mix(in srgb, var(--atencao) 7%, var(--superficie)); border-left-color: var(--atencao); border-style: dashed; }
.tl-tarefa .tl-marca { color: var(--serie-1); border-color: color-mix(in srgb, var(--serie-1) 40%, transparent); }
.tl-tarefa .tl-caixa { border-left: 3px solid var(--serie-1); }
.tl-tarefa.afazer .tl-caixa { border-left-style: dashed; }
.tl-solucao .tl-marca { color: var(--ok); border-color: var(--ok); background: color-mix(in srgb, var(--ok) 12%, var(--superficie)); }
.tl-solucao .tl-caixa { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); background: color-mix(in srgb, var(--ok) 7%, var(--superficie)); }
.tl-ev { grid-template-columns: 36px minmax(0, 1fr); font-size: 12px; color: var(--tinta-fraca); align-items: center; }
.tl-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--linha-forte); margin-left: 13.5px; z-index: 1; }
.via3-tag { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--acao); background: var(--acao-suave); padding: 1px 7px; border-radius: 99px; }
.pill-tipo { font-size: 11.5px; font-weight: 600; color: var(--serie-1); background: color-mix(in srgb, var(--serie-1) 14%, transparent); padding: 2px 9px; border-radius: 99px; }
.pill-dur { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; color: var(--tinta-2); }
.pill-dur svg { width: 12px; height: 12px; }
.anexos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.anexo svg { width: 13px; height: 13px; }
.anexos audio { height: 36px; }
.miniatura img { display: block; max-width: 180px; max-height: 120px; border-radius: var(--raio-sm); border: 1px solid var(--linha); }
.aprovacao { border: 1px solid color-mix(in srgb, var(--ok) 45%, transparent); }
.sub-bloco { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--raio-sm); background: var(--superficie-2); }
.compositor { overflow: visible; }
.comp-abas { display: flex; gap: 2px; padding: 6px 6px 0; border-bottom: 1px solid var(--linha); flex-wrap: wrap; }
.comp-abas button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; border-radius: var(--raio-sm) var(--raio-sm) 0 0; background: transparent; color: var(--tinta-2); padding: 10px 14px; font-size: 13px; }
.comp-abas button svg { width: 15px; height: 15px; }
.comp-abas button:hover { color: var(--tinta); background: var(--superficie-2); }
.comp-abas button.on { color: var(--acao); border-bottom-color: var(--acao); font-weight: 600; }
.comp-painel { padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.comp-rodape { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips label { cursor: pointer; }
.chips input { display: none; }
.chips span { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--linha); font-size: 12.5px; color: var(--tinta-2); transition: all var(--transicao); }
.chips input:checked + span { border-color: var(--serie-1); background: color-mix(in srgb, var(--serie-1) 15%, transparent); color: var(--serie-1); font-weight: 600; }
.grade-tarefa { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; align-items: end; }
.hora-agora { display: flex; gap: 6px; align-items: center; }
.hora-agora input { flex: 1; min-width: 0; }
.hora-agora .botao { flex: none; white-space: nowrap; }
.dur { display: flex; align-items: center; gap: 6px; }
.dur input { width: 64px; }
.dur span { font-size: 12px; color: var(--tinta-fraca); }
.ator { display: flex; flex-direction: column; gap: 6px; padding: 8px 0; border-bottom: 1px dashed var(--linha); }
.ator:last-of-type { border-bottom: 0; }
.ator .papel { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.ator .pessoa > span:last-of-type { display: flex; flex-direction: column; min-width: 0; font-size: 13px; }
.ator .pessoa small { font-size: 11.5px; color: var(--tinta-fraca); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ator .x { margin-left: auto; }
.linha-form { display: flex; gap: 6px; }
.col-form { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
details.mais summary { cursor: pointer; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--acao); font-weight: 600; list-style: none; }
details.mais summary::-webkit-details-marker { display: none; }
details.mais summary svg { width: 14px; height: 14px; }
.botoes-status { display: flex; gap: 6px; flex-wrap: wrap; }
.conectar svg { width: 16px; height: 16px; }
.tempo-total { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; }
.estrelas-lidas { font-size: 22px; color: var(--atencao); letter-spacing: 2px; }
.estrelas-lidas span { color: var(--linha-forte); }
.linha-check { display: flex; gap: 10px; align-items: center; font-size: 14px; }

/* ------------------------- inventário e remoto ---------------------------- */
.uso { display: block; height: 7px; border-radius: 99px; background: var(--superficie-2); overflow: hidden; }
.uso span { display: block; height: 100%; background: var(--serie-1); border-radius: 99px; }
.uso span.cheio { background: var(--erro); }
.destaque-remoto { border-top: 3px solid var(--acao); }
.id-remoto { font-family: var(--fonte-titulo); font-size: 26px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.grade-remoto { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; padding: 14px; }
.maq-remota { border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 11px 12px; display: flex; flex-direction: column; gap: 6px; background: var(--superficie); }
.maq-remota.sem-id { opacity: .7; border-style: dashed; }
.maq-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }
.maq-topo a { color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.estado { width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-fraca); flex: 0 0 8px; }
.estado.on { background: var(--ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent); }
.estado.velho { background: var(--erro); }
.maq-acoes { display: flex; gap: 6px; flex-wrap: wrap; }
.copiavel { display: flex; gap: 6px; align-items: flex-start; }
.copiavel code { flex: 1; min-width: 0; padding: 9px 11px; border-radius: var(--raio-sm); background: var(--campo); border: 1px solid var(--linha); word-break: break-all; color: var(--tinta-2); }
.chave { display: inline-flex; align-items: center; gap: 2px; }
.chave code { padding: 3px 8px; border-radius: 6px; background: var(--campo); border: 1px solid var(--linha); }

/* ------------------------------- cadastros -------------------------------- */
.arvore { padding: 8px 10px; }
details.servico { border-bottom: 1px solid var(--linha); padding: 4px 0; }
details.servico:last-child { border-bottom: 0; }
details.servico summary { cursor: pointer; padding: 9px 8px; border-radius: var(--raio-sm); }
details.servico summary:hover { background: var(--superficie-2); }
.no { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 6px; font-size: 13px; }
.no:hover { background: var(--superficie-2); }
.no.n1 { padding-left: 26px; } .no.n2 { padding-left: 48px; } .no.n3 { padding-left: 70px; }
.no.inativo { opacity: .45; text-decoration: line-through; }
.no-nome { display: inline-flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.no-acoes { display: inline-flex; align-items: center; gap: 4px; }
.no-acoes form { margin: 0; }
.ti { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 5px; font-size: 10px; font-weight: 700; }
.ti-incidente { background: color-mix(in srgb, var(--erro) 16%, transparent); color: var(--erro); }
.ti-requisicao { background: color-mix(in srgb, var(--serie-1) 16%, transparent); color: var(--serie-1); }
.lado-fixo { position: sticky; top: 16px; }
.previa-email { width: 100%; height: 760px; border: 0; background: #f2f5f8; display: block; }

/* ------------------------------- responsivo ------------------------------- */
@media (max-width: 1100px) {
  .lado-fixo { position: static; }
}
@media (max-width: 900px) {
  .recolher { display: none; }
  .lateral.recolhida { width: 100%; flex-basis: auto; padding: 12px 14px; }
  .lateral.recolhida .rot-item { display: inline; }
  .lateral.recolhida .item { justify-content: flex-start; padding: 8px 10px; gap: 11px; }
  .lateral.recolhida .logo-topo { flex-direction: row; }
  .item .rot-item { overflow: visible; }
  .busca-topo input { width: 130px; }
  .cab-dir { width: 100%; justify-content: flex-start; }
  .rank-l { grid-template-columns: minmax(0, 1fr) 70px 84px; }
  .timeline::before { left: 17px; }
  .tl { grid-template-columns: 28px minmax(0, 1fr); gap: 8px; }
  .tl-marca { width: 28px; height: 28px; }
  .tl-marca svg { width: 13px; height: 13px; }
  .tl-ponto { margin-left: 9.5px; }
  .faixa-servico > div { border-left: 0; border-top: 1px solid var(--linha); }
}

/* telas internas ocupam a largura toda; rodapé do menu no padrão do Relatório */
.app .conteudo { max-width: none; }
.chip-periodo { background: var(--superficie-2); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 11px 12px; }
.chip-periodo .r { font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; }
.chip-periodo .v { font-size: 13px; font-weight: 700; margin-top: 3px; }
.chip-periodo .s { font-size: 11.5px; color: var(--tinta-2); }
.conta .quem { gap: 9px; margin-bottom: 9px; }
.inicial { width: 28px; height: 28px; border-radius: 50%; flex: 0 0 28px; display: grid; place-items: center;
  background: var(--acao-suave); color: var(--acao); font-weight: 700; font-size: 12.5px; text-transform: uppercase; }
.conta .email { font-size: 11.5px; color: var(--tinta-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acoes-conta .sair-bt { flex: 1; font-size: 11.5px; padding: 6px 8px; gap: 6px; }
.acoes-conta .sair-bt svg { width: 14px; height: 14px; }
.lateral.recolhida .chip-periodo, .lateral.recolhida .conta .email { display: none; }
@media (max-width: 900px) { .chip-periodo { display: none; } }

/* ---------------- lista no padrão GLPI ---------------- */
table.glpi td { padding: 10px 14px; font-size: 13px; }
table.glpi th { padding: 10px 14px; white-space: nowrap; }
table.glpi .id-col { border-left: 4px solid transparent; font-weight: 700; }
table.glpi tr.pr-critica .id-col { border-left-color: var(--erro); }
table.glpi tr.pr-alta .id-col { border-left-color: var(--alerta); }
table.glpi tr.pr-media .id-col { border-left-color: var(--serie-1); }
table.glpi tr.pr-baixa .id-col { border-left-color: var(--linha-forte); }
table.glpi .assunto-col { min-width: 260px; max-width: 420px; }
table.glpi .cat-col { max-width: 260px; font-size: 12px; }
a.abre { color: var(--tinta); }
a.abre:hover { color: var(--acao); }
a.abre.assunto { font-weight: 600; }
a.filtra { color: inherit; border-bottom: 1px dotted transparent; }
a.filtra:hover { color: var(--acao); border-bottom-color: var(--acao); cursor: zoom-in; }
a.ordena { color: inherit; display: inline-flex; gap: 4px; }
a.ordena:hover, a.ordena.on { color: var(--acao); }
a.ordena i { font-style: normal; }
.criterios { padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; overflow: visible; }
.crit-topo { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.crit-topo b { display: inline-flex; gap: 7px; align-items: center; font-size: 13.5px; }
.crit-topo svg { width: 15px; height: 15px; color: var(--acao); }
#linhas { display: flex; flex-direction: column; gap: 6px; }
.crit-linha { display: grid; grid-template-columns: 96px minmax(170px, 230px) minmax(120px, 160px) minmax(180px, 1fr) 30px; gap: 8px; align-items: center; }
.crit-linha select, .crit-linha input { height: 36px; padding: 0 10px; }
.crit-linha .valor select, .crit-linha .valor input { width: 100%; }
.crit-linha .remover { font-size: 18px; }
.crit-acoes { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.crit-acoes .espaco { flex: 1; }
.filtros-ativos { display: flex; gap: 6px; flex-wrap: wrap; }
.chip-filtro { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--acao-suave); color: var(--tinta-2); }
.chip-filtro b { color: var(--tinta); font-weight: 600; }
.chip-filtro i { font-style: normal; color: var(--acao); font-weight: 600; }
.paginacao { display: flex; gap: 6px; align-items: center; justify-content: flex-end; padding: 12px 18px; border-top: 1px solid var(--linha); }

/* ---------------- cartões recolhíveis ---------------- */
details.dobra { padding: 0; display: block; }
details.dobra > summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; }
details.dobra > summary::-webkit-details-marker { display: none; }
details.dobra > summary h3 { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); }
details.dobra > summary .seta svg { width: 15px; height: 15px; color: var(--tinta-fraca); transform: rotate(-90deg); transition: transform var(--transicao); }
details.dobra:not([open]) > summary .seta svg { transform: rotate(180deg); }
details.dobra > summary:hover h3 { color: var(--tinta); }
.dobra-corpo { padding: 0 20px 16px; display: flex; flex-direction: column; gap: 10px; }
.lado .cartao.dobra { padding: 0; gap: 0; }
.respostas .kv span:last-child { max-width: 60%; }
.resp-secao { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--acao); font-weight: 700; margin-top: 8px; }
.comp-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-bottom: 4px; border-bottom: 1px dashed var(--linha); }
.comp-barra select { width: auto; min-width: 230px; height: 32px; padding: 0 10px; font-size: 12.5px; }
.comp-barra label.botao { cursor: pointer; }

/* ---------------- menu GLPI ---------------- */
.menu { gap: 2px; }
.menu-secao + .menu-secao { margin-top: 10px; }
button.menu-rot { width: 100%; display: flex; justify-content: space-between; align-items: center; background: transparent; border: 0; cursor: pointer; padding: 4px 8px 6px; border-radius: 6px; }
button.menu-rot:hover { color: var(--tinta); }
button.menu-rot .seta svg { width: 13px; height: 13px; transform: rotate(-90deg); transition: transform var(--transicao); }
.menu-secao.fechada .menu-rot .seta svg { transform: rotate(180deg); }
.menu-secao.fechada .menu-itens { display: none; }
.menu-itens { display: flex; flex-direction: column; gap: 2px; }
.lateral.recolhida button.menu-rot { display: block; height: 1px; padding: 0; margin: 8px 6px; background: var(--linha); font-size: 0; }
.lateral.recolhida .menu-rot .seta { display: none; }
.lateral.recolhida .menu-secao.fechada .menu-itens { display: flex; }
@media (max-width: 900px) { .menu-itens { flex-direction: row; } .menu-secao.fechada .menu-itens { display: flex; } button.menu-rot { display: none; } .menu { flex-direction: row; } }

/* ---------------- formulários ---------------- */
.grade-forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.form-card { padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; color: var(--tinta); transition: border-color var(--transicao), transform var(--transicao); }
.form-card:hover { border-color: var(--acao); color: var(--tinta); transform: translateY(-1px); }
.form-card.mini-card { border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 11px 13px; background: var(--superficie); }
.opcoes-form { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.form-glpi .campo { padding: 6px 0; }
.editor-perg td { vertical-align: top; padding: 8px 10px; }
.editor-perg input, .editor-perg select, .editor-perg textarea { font-size: 12.5px; padding: 6px 8px; }
.mini-in { margin-top: 4px; font-size: 11.5px !important; }
.lista-check { display: flex; flex-direction: column; gap: 4px; max-height: 260px; overflow: auto; padding: 8px; border: 1px solid var(--linha); border-radius: var(--raio-sm); }
.passo span svg { width: 13px; height: 13px; }

/* ---------------- administração editável ---------------- */
.grade-perm { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; }
table.matriz-perm td:not(:first-child), table.matriz-perm th:not(:first-child) { text-align: center; }
table.matriz-perm th a { color: var(--tinta); }
.cor-in { height: 38px; padding: 3px; width: 80px; }
.sel-mini { height: 30px; padding: 0 6px; font-size: 12px; }
.chips-sel { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.chip-sel { display: inline-flex; align-items: center; gap: 4px; padding: 3px 4px 3px 10px; border-radius: 999px; background: var(--acao-suave); color: var(--tinta); font-size: 12.5px; }
.chip-sel button { border: 0; background: transparent; padding: 0 6px; color: var(--tinta-2); font-size: 14px; }
.grade-clientes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.cliente-card .mini { line-height: 1.4; }
.crit-topo .espaco { flex: 1; }
.sel-buscas { width: auto; min-width: 220px; height: 32px; padding: 0 10px; font-size: 12.5px; }
details.salvar-busca { position: relative; }
details.salvar-busca > summary { list-style: none; cursor: pointer; }
details.salvar-busca > summary::-webkit-details-marker { display: none; }
.salvar-pop { position: absolute; right: 0; top: 40px; z-index: 5; width: 300px; padding: 12px; display: flex; flex-direction: column; gap: 8px;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: var(--sombra); }
.cons { word-break: break-all; }

.cel-perm { display: inline-grid; place-items: center; width: 34px; height: 30px; border-radius: 6px; cursor: pointer; }
.cel-perm:hover { background: var(--acao-suave); }
.cel-perm input { width: 17px; height: 17px; cursor: pointer; }

/* ---------------- catálogo ITIL ---------------- */
.itil-explica { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.itil-cab { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.itil-i { border-top: 3px solid var(--erro); } .itil-r { border-top: 3px solid var(--serie-1); }
.catalogo { display: grid; grid-template-columns: repeat(auto-fill, minmax(520px, 1fr)); gap: 16px; align-items: start; }
.servico-cat.inativa, .cat-item.inativa { opacity: .5; }
.servico-cab { display: flex; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.servico-cab b { font-size: 14.5px; }
.servico-cols { display: grid; grid-template-columns: 1fr 1fr; }
.col-tipo { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.col-incidente { border-right: 1px solid var(--linha); }
.col-tipo-cab { display: flex; align-items: center; gap: 7px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 2px 4px 6px; }
.cat-item { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 6px; align-items: center; padding: 5px 6px; border-radius: 6px; font-size: 13px; }
.cat-item:hover { background: var(--superficie-2); }
.cat-nome { min-width: 0; }
.cat-uso { font-size: 11px; font-weight: 700; color: var(--tinta-2); background: var(--superficie-2); border-radius: 99px; padding: 1px 8px; font-variant-numeric: tabular-nums; }
.cat-acoes { display: inline-flex; align-items: center; gap: 0; }
.cat-acoes form { margin: 0; display: inline; }
.cat-item .cat-acoes { opacity: 0; transition: opacity var(--transicao); }
.cat-item:hover .cat-acoes { opacity: 1; }
.cat-acoes a.fantasma, .cat-acoes button.fantasma { font-size: 13px; padding: 2px 5px; }
.vazio-col { padding: 6px; }
.add-cat { display: flex; gap: 6px; margin-top: 6px; }
.add-cat input, .add-cat select { height: 30px; padding: 0 8px; font-size: 12.5px; }
.add-cat select { width: 40%; }
/* Categorias ITIL (15/10/2026): cartões por serviço e, dentro do serviço, a lista com filtros e ações em massa */
.grade-servicos { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; padding: 14px; }
.cartao-srv { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.cartao-srv.inativa { opacity: .55; }
.cartao-srv .srv-nome { font-weight: 600; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.cartao-srv .srv-desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.srv-numeros { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 4px; font-size: 12.5px; color: var(--tinta-2); }
.srv-numeros > span { display: inline-flex; align-items: center; gap: 5px; }
.destaque-srv { border-color: color-mix(in srgb, var(--atencao) 55%, transparent); }
.srv-resumo { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.barra-massa { padding: 8px 14px; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--linha); }
.pop-massa { position: relative; }
.pop-massa > summary { list-style: none; cursor: pointer; }
.pop-massa > summary::-webkit-details-marker { display: none; }
.pop-massa-caixa { position: absolute; z-index: 20; top: 110%; left: 0; width: 340px; max-width: calc(100vw - 32px); padding: 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: var(--sombra); }
.tab-cats .cat-n3 { padding-left: 30px; }
.tab-cats td:nth-child(2) { min-width: 230px; }
.tab-cats td:nth-child(3), .tab-cats td:nth-child(4), .tab-cats td:nth-child(5) { white-space: nowrap; }
.tab-cats tr.cat-inativa > td { opacity: .55; }
.tab-cats .acoes-cat { white-space: nowrap; text-align: right; }
.tab-cats .acoes-cat .botao { margin: 2px 0; }
.tab-cats tr.grupo-cat > td { background: var(--fundo); font-weight: 600; }
.tab-cats tr.grupo-cat svg { width: 15px; height: 15px; vertical-align: -2px; }
.add-cat-lista { flex-wrap: wrap; margin: 0; padding: 12px 14px; border-top: 1px solid var(--linha); }
.add-cat-lista select { width: auto; max-width: 240px; }
.add-cat-lista input { flex: 1 1 200px; min-width: 0; }
@media (max-width: 640px) {
  .grade-servicos { grid-template-columns: 1fr; padding: 12px; }
  .pop-massa-caixa { position: fixed; left: 16px; right: 16px; top: 22vh; width: auto; max-width: none; }
  .tab-cats .cat-n3 { padding-left: 0; }
  .tab-cats td:nth-child(2) { min-width: 0; }
  .tab-cats .acoes-cat { white-space: normal; }
  .srv-resumo { padding: 12px 16px; }
  .add-cat-lista select { max-width: none; flex: 1 1 45%; }
  .add-cat-lista input { flex: 1 1 100%; }
}
@media (max-width: 700px) { .catalogo { grid-template-columns: 1fr; } .servico-cols { grid-template-columns: 1fr; } .col-incidente { border-right: 0; border-bottom: 1px solid var(--linha); } }

/* menu recolhido: um ícone por seção; ao passar o mouse abre os itens em cascata (estilo GLPI) */
.secao-ic, .cascata-tit { display: none; }
.lateral.recolhida .menu { gap: 4px; }
.lateral.recolhida .menu-secao + .menu-secao { margin-top: 0; }
.lateral.recolhida button.menu-rot { display: none; }
.lateral.recolhida .secao-ic { display: flex; justify-content: center; padding: 11px 0; border-radius: var(--raio-sm); color: var(--tinta-2); cursor: default; }
.lateral.recolhida .secao-ic svg { width: 20px; height: 20px; opacity: .8; }
.lateral.recolhida .menu-secao:has(.item.on) .secao-ic { background: var(--acao-suave); color: var(--acao); }
.lateral.recolhida .menu-secao:hover .secao-ic, .lateral.recolhida .menu-secao:focus-within .secao-ic { background: var(--superficie-2); color: var(--tinta); }
.lateral.recolhida .menu-itens, .lateral.recolhida .menu-secao.fechada .menu-itens {
  display: none; position: fixed; left: 66px; top: var(--cascata-top, 0); z-index: 60; min-width: 220px;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm);
  box-shadow: 0 10px 30px rgba(0,0,0,.28); padding: 6px; flex-direction: column; gap: 2px;
}
.lateral.recolhida .menu-secao:hover .menu-itens, .lateral.recolhida .menu-secao:focus-within .menu-itens { display: flex; }
.lateral.recolhida .menu-itens::before { content: ""; position: absolute; left: -14px; top: 0; bottom: 0; width: 14px; }
.lateral.recolhida .cascata-tit { display: block; font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 6px 10px 6px; }
.lateral.recolhida .menu-itens .item { justify-content: flex-start; padding: 8px 11px; gap: 11px; }
.lateral.recolhida .menu-itens .item svg { width: 17px; height: 17px; }
.lateral.recolhida .menu-itens .rot-item { display: inline; }
.lateral.recolhida .menu-itens .item .bolinha { position: static; margin-left: auto; }
@media (max-width: 900px) { .secao-ic, .cascata-tit, .lateral.recolhida .secao-ic, .lateral.recolhida .cascata-tit { display: none; }
  .lateral.recolhida .menu-itens { display: flex; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; flex-direction: row; background: none; } }

/* ------------------- topo no padrão do GLPI: empresa, ajuda, usuário ------------------- */
.topo-menu { position: relative; }
.topo-menu > summary { list-style: none; }
.topo-menu > summary::-webkit-details-marker { display: none; }
.topo-bt { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 12px; border-radius: 999px; background: var(--campo);
  border: 1px solid var(--linha); color: var(--tinta-2); cursor: pointer; font-size: 13px; max-width: 260px; user-select: none; }
.topo-bt:hover, .topo-menu[open] > .topo-bt { border-color: var(--linha-forte); color: var(--tinta); }
.topo-bt svg { width: 16px; height: 16px; flex: 0 0 auto; }
.topo-bt.ativo { border-color: var(--acao); color: var(--acao); background: var(--acao-suave); }
.topo-rot { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-seta { font-size: 10px; opacity: .7; }
.topo-icone { width: 38px; padding: 0; justify-content: center; }
.topo-icone b { font: 600 15px Poppins, sans-serif; }
.topo-usuario { padding: 0 10px 0 4px; }
.avatar-topo { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--acao); color: #fff; font: 600 12px Poppins, sans-serif; flex: 0 0 auto; }
.topo-quem { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
.topo-quem b { font-size: 12.5px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.topo-quem span { font-size: 11px; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 150px; }
.topo-painel { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 250px; max-width: 320px; background: var(--superficie);
  border: 1px solid var(--linha); border-radius: var(--raio-sm); box-shadow: 0 14px 34px rgba(0,0,0,.28); padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.topo-entidades { width: 300px; }
.topo-tit { font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--tinta-fraca); font-weight: 600; padding: 8px 10px 4px; }
.topo-filtro { margin: 2px 4px 6px; width: calc(100% - 8px); }
.topo-lista { display: flex; flex-direction: column; gap: 2px; max-height: 340px; overflow-y: auto; margin: 0; }
.topo-op { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: 6px; border: 0; background: transparent;
  color: var(--tinta-2); font: inherit; font-size: 13px; text-align: left; cursor: pointer; text-decoration: none; }
.topo-op svg { width: 15px; height: 15px; opacity: .75; flex: 0 0 auto; }
.topo-op:hover { background: var(--superficie-2); color: var(--tinta); }
.topo-op.on { background: var(--acao-suave); color: var(--acao); font-weight: 600; }
.topo-op[hidden] { display: none; }
.topo-conta { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px 10px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; }
.topo-conta b { font-size: 13.5px; }
.topo-conta span { font-size: 12px; color: var(--tinta-fraca); word-break: break-all; }
.topo-sep { height: 1px; background: var(--linha); margin: 4px 6px; }
@media (max-width: 900px) { .topo-quem, .topo-rot { display: none; } .topo-bt { padding: 0 10px; } .topo-usuario { padding: 0 4px; } .topo-painel { right: auto; left: 0; }
  #topoUsuario .topo-painel, #topoAjuda .topo-painel { left: auto; right: 0; } .topo-entidades { width: min(300px, calc(100vw - 32px)); } }

/* Sobre */
dialog.sobre { border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); padding: 22px 24px; width: min(460px, calc(100vw - 32px)); box-shadow: var(--sombra); }
dialog.sobre::backdrop { background: rgba(6,12,18,.6); }
.sobre-topo { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.sobre h2 { font-size: 20px; margin: 0 0 4px; }
.sobre-versao { font-size: 13px; color: var(--tinta-2); margin-bottom: 10px; }
.sobre-novidades { border-top: 1px solid var(--linha); margin: 12px 0; padding-top: 6px; display: flex; flex-direction: column; gap: 8px; }
.sobre-novidades .topo-tit { padding-left: 0; }
.sobre-item { display: grid; grid-template-columns: 82px 1fr; gap: 10px; font-size: 12.5px; color: var(--tinta-2); line-height: 1.5; }
.sobre-item b { color: var(--tinta); font-weight: 600; }

/* guia da plataforma (mesmo modelo do DP) */
.guia-progresso { height: 8px; border-radius: 6px; background: var(--superficie-2); overflow: hidden; }
.guia-progresso span { display: block; height: 100%; width: 0; background: var(--acao); transition: width .3s; }
.guia-passos, .guia-rotina { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.guia-passos a, .guia-rotina a { display: flex; gap: 12px; align-items: flex-start; padding: 11px 12px; border: 1px solid var(--linha); border-radius: 10px; color: var(--tinta-2); }
.guia-passos a:hover, .guia-rotina a:hover { border-color: var(--acao); }
.guia-passos b, .guia-rotina b { display: block; font-weight: 600; color: var(--tinta); font-size: 13.4px; }
.guia-passos .mini, .guia-rotina .mini { display: block; margin-top: 3px; }
.guia-marca { flex: 0 0 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; border: 1px solid var(--linha); color: var(--tinta-fraca); }
.guia-passos li.feito .guia-marca { background: color-mix(in srgb, var(--ok) 18%, transparent); border-color: color-mix(in srgb, var(--ok) 50%, transparent); color: var(--ok); font-size: 0; }
.guia-passos li.feito .guia-marca::before { content: "\2713"; font-size: 13px; }
.guia-passos li.feito b { color: var(--tinta-2); }
.guia-num { flex: 0 0 40px; font: 700 20px Poppins, sans-serif; color: var(--tinta); text-align: center; }
.guia-num.atencao { color: var(--atencao); }
.guia-como details { border-bottom: 1px solid var(--linha); padding: 6px 0; }
.guia-como details:last-child { border-bottom: none; }
.guia-como summary { font-size: 13.6px; color: var(--tinta); padding: 8px 0; cursor: pointer; }
.guia-como ol { margin: 4px 0 10px; padding-left: 20px; color: var(--tinta-2); font-size: 13px; line-height: 1.65; }
.guia-popup { position: fixed; inset: 0; background: rgba(6,12,18,.65); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 80; }
.guia-popup[hidden] { display: none; }
.guia-popup-caixa { max-width: 420px; width: 100%; background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); padding: 24px; box-shadow: var(--sombra); }
.guia-popup-caixa h2 { margin: 0 0 8px; font-size: 19px; }
.guia-popup-caixa p { color: var(--tinta-2); font-size: 13.5px; line-height: 1.6; margin: 0 0 16px; }

/* Minhas configurações e Visão pessoal */
.conta-abas { margin-bottom: 16px; }
.blocos-pessoal { display: grid; grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 16px; align-items: start; }
@media (max-width: 900px) { .blocos-pessoal { grid-template-columns: 1fr; } }
.bloco-pessoal h3 { display: flex; align-items: center; gap: 8px; }
.bloco-pessoal h3 .bolinha { position: static; }
.lista-compacta { display: flex; flex-direction: column; }
.lista-compacta a { display: grid; grid-template-columns: 64px 1fr auto; gap: 10px; align-items: center; padding: 8px 4px; border-top: 1px solid var(--linha); color: var(--tinta-2); font-size: 13px; }
.lista-compacta a:first-child { border-top: 0; }
.lista-compacta a:hover { background: var(--superficie-2); }
.lista-compacta .n { font-weight: 600; color: var(--acao); }
.lista-compacta .t { min-width: 0; }
.lista-compacta .t b { display: block; color: var(--tinta); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ordem-blocos { display: flex; flex-direction: column; gap: 6px; }
.ordem-blocos label { display: grid; grid-template-columns: 22px 1fr 70px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--linha); border-radius: var(--raio-sm); font-size: 13px; }

/* rodapé da lateral: quem está logado, perfil, status e hora do login */
.quem-sessao { display: flex; align-items: center; gap: 10px; padding: 6px; border-radius: var(--raio-sm); color: var(--tinta-2); min-width: 0; }
.quem-sessao:hover { background: var(--superficie-2); }
.avatar-sessao { position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acao); color: #fff; font: 600 12.5px Poppins, sans-serif; }
.status-online { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; background: var(--ok); border: 2px solid var(--superficie); }
.dados-sessao { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.dados-sessao b { font-size: 13px; font-weight: 600; color: var(--tinta); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dados-sessao > span { font-size: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.linha-status { display: flex; align-items: center; gap: 5px; color: var(--tinta-fraca); }
.ponto-on { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: 0 0 auto; }
.lateral.recolhida .dados-sessao { display: none; }
.lateral.recolhida .quem-sessao { justify-content: center; padding: 6px 0; }

/* foto do usuário (Minhas configurações › Principal) */
.foto-usuario { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; display: block; }
.avatar-topo, .avatar-sessao, .avatar-menu, .avatar-grande { overflow: visible; }
.avatar-topo .foto-usuario, .avatar-sessao .foto-usuario { position: absolute; inset: 0; }
.avatar-topo { position: relative; }
.avatar-menu { position: relative; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--acao); color: #fff; font: 600 14px Poppins, sans-serif; }
.avatar-menu .foto-usuario { position: absolute; inset: 0; }
.topo-conta { flex-direction: row !important; align-items: center; gap: 10px !important; }
.topo-conta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.topo-tema { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; border-bottom: 1px solid var(--linha); margin-bottom: 4px; font-size: 13px; color: var(--tinta-2); }
.topo-tema .tema-bt { height: 34px; }
.topo-tema .tema-op { width: 27px; height: 27px; }
.foto-linha { display: flex; align-items: center; gap: 16px; }
.avatar-grande { position: relative; flex: 0 0 88px; width: 88px; height: 88px; border-radius: 50%; display: grid; place-items: center; background: var(--acao); color: #fff; font: 600 28px Poppins, sans-serif; }
.avatar-grande .foto-usuario { position: absolute; inset: 0; }
.foto-campos { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.foto-campos input[type=file] { font-size: 12.5px; max-width: 100%; }
.foto-remover { margin-top: 8px; }
.topbar .avatar { position: relative; overflow: hidden; }

/* menu horizontal no topo (Minhas configurações › Personalização): seções com itens flutuantes */
@media (min-width: 901px) {
  .app.menu-h { flex-direction: column; }
  .app.menu-h .lateral { width: 100%; flex: 0 0 auto; height: auto; position: sticky; top: 0; z-index: 55; flex-direction: row; align-items: center;
    gap: 22px; padding: 8px 22px; border-right: 0; border-bottom: 1px solid var(--linha); }
  .app.menu-h .logo { flex-direction: row; align-items: center; gap: 12px; padding: 0; }
  .app.menu-h .logo .produto { border-top: 0; padding: 0 0 0 12px; border-left: 1px solid var(--linha); white-space: nowrap; }
  .app.menu-h .recolher, .app.menu-h .lateral-rodape, .app.menu-h .secao-ic, .app.menu-h .cascata-tit { display: none; }
  .app.menu-h .menu { flex-direction: row; align-items: center; gap: 4px; flex-wrap: wrap; }
  .app.menu-h .menu-secao, .app.menu-h .menu-secao + .menu-secao { position: relative; margin: 0; }
  .app.menu-h button.menu-rot { display: flex; gap: 6px; width: auto; padding: 9px 12px; border-radius: var(--raio-sm); font-size: 11.5px; }
  .app.menu-h button.menu-rot .seta svg, .app.menu-h .menu-secao.fechada .menu-rot .seta svg { transform: rotate(-90deg); }
  .app.menu-h .menu-secao:hover > .menu-rot, .app.menu-h .menu-secao:focus-within > .menu-rot { background: var(--superficie-2); color: var(--tinta); }
  .app.menu-h .menu-secao:has(.item.on) > .menu-rot { color: var(--acao); background: var(--acao-suave); }
  .app.menu-h .menu-itens, .app.menu-h .menu-secao.fechada .menu-itens {
    display: none; position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 230px; flex-direction: column; gap: 2px;
    background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm); box-shadow: 0 14px 34px rgba(0,0,0,.28); padding: 6px; }
  .app.menu-h .menu-itens::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
  .app.menu-h .menu-secao:hover .menu-itens, .app.menu-h .menu-secao:focus-within .menu-itens { display: flex; }
  .app.menu-h .menu-secao:last-child .menu-itens { left: auto; right: 0; }
  .app.menu-h .menu-itens .item { justify-content: flex-start; padding: 8px 11px; gap: 11px; }
  .app.menu-h .menu-itens .rot-item { display: inline; }
  .app.menu-h .menu-itens .item .bolinha { position: static; margin-left: auto; }
}

/* Administração › Relatório: o painel do Relatório de Chamados dentro da Central */
.quadro-relatorio { width: 100%; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--fundo, var(--superficie)); display: block; }

/* menu horizontal: a barra não pode cortar os submenus; pesquisa, empresa, ajuda e usuário vão para a barra */
.marca-link { color: inherit; text-decoration: none; display: inline-flex; }
.app.menu-h .lateral { overflow: visible; }
.barra-ferr-h { display: none; }
@media (min-width: 901px) {
  .app.menu-h .lateral { z-index: 65; }
  .app.menu-h .barra-ferr-h { display: flex; align-items: center; gap: 8px; margin-left: auto; flex: 0 0 auto; }
  .app.menu-h .barra-ferr-h .busca-topo input { width: 150px; }
  .app.menu-h .barra-ferr-h .topo-bt { max-width: 200px; }
  .app.menu-h .menu { flex: 1 1 auto; min-width: 0; }
}
@media (max-width: 1350px) { .app.menu-h .barra-ferr-h .topo-quem, .app.menu-h .barra-ferr-h .topo-rot { display: none; } }
@media (max-width: 900px) { .app.menu-h .barra-ferr-h { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; order: 4; } }

/* busca padrão de Chamados (Configuração › Regras de busca) */
.padrao-busca { display: flex; align-items: center; gap: 8px; }
.padrao-busca svg, .etiqueta svg { width: 13px; height: 13px; vertical-align: -2px; }
.padrao-sistema { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border-top: 1px solid var(--linha); flex-wrap: wrap; }

/* Configuração › Formulários: menu de clientes, auditoria de envios, pré-visualização e histórico */
.forms-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 900px) { .forms-layout { grid-template-columns: 1fr; } }
.forms-clientes { padding: 8px; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; max-height: calc(100vh - 40px); overflow-y: auto; }
.forms-cli { display: flex; flex-direction: column; gap: 1px; padding: 8px 10px; border-radius: 6px; color: var(--tinta-2); }
.forms-cli .t { font-size: 13px; font-weight: 500; color: var(--tinta); }
.forms-cli:hover { background: var(--superficie-2); }
.forms-cli.on { background: var(--acao-suave); }
.forms-cli.on .t { color: var(--acao); font-weight: 600; }
.forms-cli[hidden] { display: none; }
.forms-conteudo { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.forms-titulo { display: flex; align-items: center; gap: 8px; font-size: 18px; text-transform: none; letter-spacing: 0; }
.forms-titulo svg { width: 18px; height: 18px; color: var(--acao); }
.barras-mes { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 8px; height: 150px; align-items: end; margin: 8px 0 10px; }
.bm { display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; }
.bm-pilha { flex: 1; width: 100%; max-width: 34px; display: flex; flex-direction: column-reverse; justify-content: flex-start; position: relative; }
.bm-pilha i { display: block; width: 100%; }
.bm-pilha i:first-of-type { border-radius: 0 0 3px 3px; }
.bm-n { position: absolute; top: -16px; left: 0; right: 0; text-align: center; font-size: 11px; color: var(--tinta-2); }
.bm-adm { background: var(--ok); } .bm-dem { background: var(--erro); } .bm-out { background: var(--atencao); }
.bm-rot { font-size: 10.5px; color: var(--tinta-fraca); }
i.leg { display: inline-block; width: 9px; height: 9px; border-radius: 2px; vertical-align: -1px; }
.duas-iguais { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 16px; align-items: start; }
.hist-item { padding: 8px 0; border-top: 1px solid var(--linha); font-size: 13px; }
.hist-item:first-of-type { border-top: 0; }
.hist-item summary { cursor: pointer; }
.hist-lista { margin: 6px 0 2px 18px; padding: 0; font-size: 12.5px; color: var(--tinta-2); line-height: 1.6; }
dialog.previa-dialog { width: min(980px, calc(100vw - 32px)); height: min(88vh, 900px); padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); }
dialog.previa-dialog::backdrop { background: rgba(6,12,18,.6); }
.previa-dialog[open] { display: flex; flex-direction: column; }
.previa-topo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
.previa-topo .fantasma { margin-left: auto; }
.previa-dialog iframe { flex: 1; width: 100%; border: 0; }

/* idioma: menu do usuário e tela de entrada */
.topo-idioma { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px 8px; border-bottom: 1px solid var(--linha); margin: 0 0 4px; font-size: 13px; color: var(--tinta-2); }
.idiomas { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: var(--campo); border: 1px solid var(--linha); }
.idiomas button { border: 0; background: transparent; color: var(--tinta-fraca); font: 600 11px Poppins, sans-serif; padding: 5px 9px; border-radius: 999px; cursor: pointer; }
.idiomas button.on { background: var(--superficie); color: var(--acao); box-shadow: var(--sombra-sutil); }
.idioma-acesso { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
.idioma-acesso button { border: 1px solid var(--linha); background: transparent; color: var(--tinta-2); font-size: 12px; padding: 5px 10px; border-radius: 999px; cursor: pointer; }
.idioma-acesso button.on { border-color: var(--acao); color: var(--acao); }

/* fechamento de horas */
.fech-card { display: flex; flex-direction: column; gap: 12px; border-top: 3px solid var(--linha); }
.fech-card.urgente { border-top-color: var(--atencao); }
.fech-card.feito { border-top-color: var(--ok); }
.fech-topo { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.fech-topo h3 { text-transform: none; letter-spacing: 0; font-size: 17px; margin: 2px 0 4px; }
.fech-total { text-align: right; }
.fech-total .val { font: 700 24px Poppins, sans-serif; color: var(--tinta); }
.fech-card .botao.grande svg, .fech-card .aviso svg, #fechTit svg { width: 16px; height: 16px; vertical-align: -3px; }
.fech-lista table { margin-top: 8px; }
.fech-aviso { border-left: 3px solid var(--atencao); padding: 6px 0 6px 12px; margin-bottom: 12px; font-size: 13.5px; }
.fech-aviso p { margin: 6px 0 0; }
.limites-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px 16px; margin-bottom: 10px; }
.limites-grade { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.limites-grade label { white-space: nowrap; }
@media (max-width: 1100px) { .limites-grade { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } }

/* faixa do fechamento de horas: fica em todas as telas nos dias de aviso até o técnico confirmar */
.faixa-fech { display: flex; align-items: center; gap: 10px; margin: 14px 30px 0; padding: 10px 14px; border-radius: var(--raio-sm);
  background: color-mix(in srgb, var(--atencao) 14%, var(--superficie)); border: 1px solid color-mix(in srgb, var(--atencao) 45%, transparent); color: var(--tinta); font-size: 13px; }
.faixa-fech > svg { width: 17px; height: 17px; color: var(--atencao); flex: 0 0 auto; }
.faixa-fech > span { flex: 1; min-width: 0; }
.faixa-fech .botao { flex: 0 0 auto; }
.faixa-fech.limite { background: color-mix(in srgb, var(--erro) 14%, var(--superficie)); border-color: color-mix(in srgb, var(--erro) 50%, transparent); }
.faixa-fech.limite > svg { color: var(--erro); }
.faixa-resta { font-weight: 600; }
@media (max-width: 900px) { .faixa-fech { margin: 12px 16px 0; flex-wrap: wrap; } }
.limites-grade { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.faixa-horas { display: flex; align-items: center; gap: 6px; }
.faixa-horas input { min-width: 0; }
.faixa-horas span { font-size: 12.5px; color: var(--tinta-2); }
.reembolso a { color: var(--acao); }
.limites-grade .campo-largo { grid-column: span 2; }
@media (max-width: 600px) { .limites-grade .campo-largo { grid-column: auto; } }
.faixa-fech > .etiqueta { flex: 0 0 auto; }

/* Notificações: pré-visualização do e-mail abaixo da Caixa do SAC, com tela cheia */
.previa-cartao .cartao-topo { display: flex; align-items: center; gap: 10px; }
.previa-cartao .cartao-topo .botao { margin-left: auto; }
.previa-cartao:fullscreen { display: flex; flex-direction: column; background: var(--superficie); border-radius: 0; padding: 0; }
.previa-cartao:fullscreen .cartao-topo { padding: 12px 18px; border-bottom: 1px solid var(--linha); }
.previa-cartao:fullscreen .previa-email { flex: 1; height: auto; }

/* ------------- Painel (modelo Dashboard Via3), sino, paleta ⌘K — valem nos dois estilos ------------- */
.g-laranja { background: linear-gradient(145deg, #ff8a4c, #e85a24 60%, #c9410f); }
.g-azul { background: linear-gradient(145deg, #6fb2ff, #2f7be5 60%, #1f5fc4); }
.g-ambar { background: linear-gradient(145deg, #ffd36b, #f2a72a 60%, #d9861a); }
.g-verde { background: linear-gradient(145deg, #5fe0a5, #22b07a 60%, #128a5c); }
.g-roxo { background: linear-gradient(145deg, #b79cff, #7a5cf0 60%, #5a3fd0); }
.saudacao h2 { font-size: 26px; }
.relogio-painel { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.relogio-painel span { font-size: 12px; color: var(--tinta-2); }
.relogio-painel b { font: 700 26px Poppins, sans-serif; color: var(--tinta); }
.kpis-painel { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kpi-vidro { display: flex; gap: 14px; align-items: flex-start; }
.kpi-ic { flex: 0 0 44px; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; box-shadow: 0 8px 18px rgba(0,0,0,.22); }
.kpi-ic svg { width: 21px; height: 21px; }
.kpi-dados { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kpi-dados .rot { font-size: 12.5px; color: var(--tinta-2); }
.kpi-dados .val { font: 700 28px Poppins, sans-serif; color: var(--tinta); line-height: 1.15; }
.kpi-dados .sub { font-size: 11.5px; color: var(--tinta-fraca); }
.var { font-weight: 600; } .var.sobe { color: var(--ok); } .var.desce { color: var(--erro); }
.painel-grade { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; margin-top: 18px; align-items: stretch; }
@media (max-width: 1000px) { .painel-grade { grid-template-columns: 1fr; } }
.barras-status { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; height: 240px; align-items: end; padding: 10px 6px 0; border-bottom: 1px solid var(--linha); }
.bs { display: flex; flex-direction: column; align-items: center; height: 100%; gap: 4px; }
.bs-trilho { flex: 1; width: 100%; max-width: 58px; display: flex; align-items: flex-end; }
.bs-barra { width: 100%; border-radius: 10px 10px 4px 4px; box-shadow: 0 10px 22px rgba(0,0,0,.18); transition: height .5s ease; }
.bs b { font: 700 15px Poppins, sans-serif; color: var(--tinta); margin-top: 6px; }
.bs span { font-size: 11.5px; color: var(--tinta-2); text-align: center; padding-bottom: 8px; }
.atividades { display: flex; flex-direction: column; gap: 2px; }
.atv { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 6px; border-radius: 10px; color: var(--tinta-2); }
.atv:hover { background: var(--superficie-2); }
.atv-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; }
.atv-ic svg { width: 15px; height: 15px; }
.atv-txt { display: flex; flex-direction: column; min-width: 0; }
.atv-txt b { font-size: 13px; font-weight: 500; color: var(--tinta); }
.atv-txt span { font-size: 11.5px; color: var(--tinta-fraca); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.atv-ha { font-size: 11px; color: var(--tinta-fraca); white-space: nowrap; }
.topo-sino { width: 360px; }
#topoSino summary { position: relative; }
.sino-ponto { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--acao); box-shadow: 0 0 0 2px var(--campo); }
.sino-ponto[hidden] { display: none; }
kbd.atalho { font: 600 10px Poppins, sans-serif; color: var(--tinta-fraca); border: 1px solid var(--linha); border-radius: 6px; padding: 2px 6px; cursor: pointer; white-space: nowrap; }
.seta-sessao { margin-left: auto; color: var(--tinta-fraca); display: flex; }
.seta-sessao svg { width: 15px; height: 15px; }
.lateral.recolhida .seta-sessao { display: none; }
.paleta { position: fixed; inset: 0; z-index: 90; background: rgba(6,12,18,.45); display: flex; justify-content: center; align-items: flex-start; padding: 12vh 16px 16px; backdrop-filter: blur(3px); }
.paleta[hidden] { display: none; }
.paleta-caixa { width: min(560px, 100%); background: var(--superficie); border: 1px solid var(--linha); border-radius: 16px; box-shadow: 0 30px 70px rgba(0,0,0,.4); overflow: hidden; }
.paleta-busca { display: flex; align-items: center; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--linha); color: var(--tinta-fraca); }
.paleta-busca svg { width: 17px; height: 17px; }
.paleta-busca input { flex: 1; border: 0; background: transparent; font-size: 15px; padding: 2px 0; box-shadow: none !important; color: var(--tinta); }
.paleta kbd { font: 600 10px Poppins, sans-serif; color: var(--tinta-fraca); border: 1px solid var(--linha); border-radius: 6px; padding: 2px 6px; }
.paleta-lista { max-height: 55vh; overflow-y: auto; padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.paleta-op { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; color: var(--tinta-2); font-size: 13.5px; }
.paleta-op svg { width: 16px; height: 16px; opacity: .8; }
.paleta-op kbd { margin-left: auto; opacity: 0; }
.paleta-op.sel, .paleta-op:hover { background: var(--acao-suave); color: var(--acao); }
.paleta-op.sel kbd { opacity: 1; }
.paleta-op[hidden] { display: none; }

/* listas no estilo clássico: opções sempre legíveis, mesmo se algum navegador ignorar o color-scheme */
html[data-theme="escuro"] select option, html[data-theme="escuro"] select optgroup { background-color: #13212c; color: #e9eef2; }
html[data-theme="claro"] select option, html[data-theme="claro"] select optgroup { background-color: #ffffff; color: #12212c; }
/* rodapé da lateral: o horário do login numa linha própria, sem cortar */
.dados-sessao > span.linha-login { font-size: 11.5px; color: var(--tinta-fraca); white-space: nowrap; overflow: visible; }

/* tarefas: editar e excluir (todos os técnicos) */
.tarefa-acoes { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.tarefa-acoes form { margin: 0; }
.tarefa-acoes .botao svg { width: 13px; height: 13px; }
.botao.perigo { color: var(--erro); }
.botao.perigo:hover { border-color: var(--erro); }
.tarefa-editar { margin-top: 10px; padding: 12px; border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--superficie-2); display: flex; flex-direction: column; gap: 8px; }
.tarefa-editar[hidden] { display: none; }

/* visualizador de imagens do chamado */
.miniatura img { cursor: zoom-in; }
.visor { position: fixed; inset: 0; z-index: 95; background: rgba(6, 12, 18, .86); display: flex; align-items: center; justify-content: center; padding: 48px 16px 16px; }
.visor[hidden] { display: none; }
.visor img { max-width: 100%; max-height: 100%; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,.5); background: #fff; }
.visor-barra { position: fixed; top: 10px; left: 16px; right: 16px; display: flex; align-items: center; gap: 10px; color: #fff; font-size: 13px; }
.visor-barra span { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.visor-barra a, .visor-barra button { color: #fff; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.2); border-radius: 8px; padding: 6px 12px; font: inherit; cursor: pointer; }
.visor-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.12); color: #fff; font-size: 22px; cursor: pointer; }
.visor-nav.ant { left: 14px; } .visor-nav.prox { right: 14px; }
.colado-aviso { font-size: 12px; color: var(--ok); }

/* ações em massa, lixeira e rodapé da lista (estilo GLPI) */
.sel-col { width: 34px; text-align: center; }
.sel-col input { width: 16px; height: 16px; cursor: pointer; }
.chamados-tab tr.selecionada td { background: var(--acao-suave) !important; }
.rodape-lista { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-top: 1px solid var(--linha); }
.rodape-lista .paginacao { margin: 0; padding: 0; border: 0; }
.por-pagina { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 12.5px; color: var(--tinta-2); }
.por-pagina select { width: auto; padding: 5px 28px 5px 10px; }
dialog.massa { width: min(620px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: var(--tinta); }
dialog.massa::backdrop { background: rgba(6,12,18,.55); }
html[data-estilo="vidro"] dialog.massa { background: var(--vidro-brilho), var(--superficie-2); -webkit-backdrop-filter: blur(22px); backdrop-filter: blur(22px); }
.massa-topo { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--linha); }
.massa-topo h3 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 16px; }
.massa-topo .fantasma { margin-left: auto; }
.massa-corpo { padding: 14px 18px; display: flex; flex-direction: column; gap: 12px; max-height: 65vh; overflow-y: auto; }
.massa-lista { display: flex; flex-direction: column; gap: 2px; max-height: 220px; overflow-y: auto; border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 4px; }
.massa-op { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 7px; cursor: pointer; font-size: 13px; }
.massa-op input { display: none; }
.massa-op:hover { background: var(--superficie-2); }
.massa-op.on { background: var(--acao-suave); color: var(--acao); font-weight: 600; }
.massa-op.perigo { color: var(--erro); }
.massa-op[hidden], .massa-campos[hidden], .massa-campos [hidden] { display: none; }
.massa-campos { display: flex; flex-direction: column; gap: 10px; }
.massa-rodape { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--linha); }
.botao.acao.perigo { background: var(--erro); border-color: var(--erro); color: #fff; }
.faixa-lixeira { display: flex; align-items: center; gap: 10px; }
.faixa-lixeira form { margin: 0 0 0 auto; }

/* Painel: quadros personalizáveis (Minhas configurações › Painel) */
.g-vermelho { background: linear-gradient(145deg, #ff8a80, #e2574c 60%, #c23b32); }
.painel-quadros { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.painel-quadros > .pq-largo { grid-column: 1 / -1; }
@media (max-width: 1000px) { .painel-quadros { grid-template-columns: 1fr; } }
.painel-quadros .barra-topo { display: flex; align-items: center; gap: 10px; }
.painel-quadros .barra-topo h3 { margin: 0; }
.painel-quadros .barra-topo > form, .painel-quadros .barra-topo > a.mini { margin-left: auto; }
.barras-status.cinco { grid-template-columns: repeat(5, 1fr); gap: 16px; }
a.bs { color: inherit; text-decoration: none; }
a.bs:hover .bs-barra { filter: brightness(1.08); }
.sla-vencido { color: var(--erro); font-weight: 600; }
.sla-vence { color: var(--atencao); font-weight: 600; }
.vazio-painel { display: flex; align-items: center; gap: 10px; padding: 18px 8px; color: var(--tinta-2); font-size: 13px; }
.vazio-painel svg { width: 20px; height: 20px; color: var(--ok); }
.sla-resumo { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 9px 10px; border-radius: 10px; font-size: 12.5px; color: var(--erro);
  background: color-mix(in srgb, var(--erro) 10%, transparent); border: 1px solid color-mix(in srgb, var(--erro) 25%, transparent); }
.sla-resumo svg { width: 15px; height: 15px; }
.painel-rodape { margin-top: 14px; display: flex; justify-content: flex-end; }
.painel-rodape .botao svg, .sla-resumo svg, .vazio-painel svg { width: 15px; height: 15px; flex: 0 0 auto; }
/* nenhum ícone do Painel fica sem tamanho */
.painel-quadros svg:not([width]) { max-width: 22px; max-height: 22px; }

/* =========================== celular e tablet (≤ 900 px) =========================== */
.barra-mobile, .veu-menu { display: none; }
@media (max-width: 900px) {
  html, body { overflow-x: hidden; }
  .app, .app.menu-h { display: block; }
  .barra-mobile { display: flex; align-items: center; gap: 10px; position: sticky; top: 0; z-index: 60; padding: 10px 14px;
    background: var(--superficie); border-bottom: 1px solid var(--linha); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
  .barra-mobile .espaco { flex: 1; }
  .barra-mobile .marca-via3 .nome { font-size: 18px; }
  .barra-mobile .topo-icone { font-size: 18px; }
  .barra-mobile svg { width: 17px; height: 17px; }
  /* menu lateral vira gaveta */
  .lateral, .lateral.recolhida, .app.menu-h .lateral {
    position: fixed; top: 0; bottom: 0; left: 0; width: min(86vw, 320px); height: 100dvh; margin: 0; border-radius: 0 20px 20px 0;
    transform: translateX(-105%); transition: transform .22s ease; z-index: 120; overflow-y: auto;
    flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 18px; padding: 18px 14px; border-right: 1px solid var(--linha); border-bottom: 0;
    display: flex; background: var(--superficie);
  }
  body.menu-aberto .lateral { transform: none; box-shadow: 0 20px 60px rgba(0,0,0,.35); }
  body.menu-aberto .veu-menu { display: block; position: fixed; inset: 0; z-index: 110; background: rgba(6,12,18,.45); }
  .lateral .recolher { display: none; }
  .lateral .logo, .lateral.recolhida .logo { padding: 0 6px; align-items: flex-start; }
  .lateral .logo-topo, .lateral.recolhida .logo-topo { flex-direction: row; }
  .lateral .logo .produto, .lateral.recolhida .logo .produto { display: block; }
  .menu, .app.menu-h .menu { flex-direction: column; overflow: visible; order: initial; width: auto; gap: 3px; }
  .menu-itens, .lateral.recolhida .menu-itens, .app.menu-h .menu-itens { display: flex; flex-direction: column; position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; background: none; }
  .menu-secao.fechada .menu-itens, .lateral.recolhida .menu-secao.fechada .menu-itens { display: none; }
  button.menu-rot, .lateral.recolhida button.menu-rot, .app.menu-h button.menu-rot { display: flex; height: auto; margin: 0; padding: 4px 8px 6px; background: transparent; font-size: 11px; width: 100%; }
  .secao-ic, .cascata-tit, .lateral.recolhida .secao-ic, .lateral.recolhida .cascata-tit { display: none; }
  .lateral.recolhida .rot-item, .lateral .rot-item { display: inline; }
  .lateral .item, .lateral.recolhida .item { justify-content: flex-start; padding: 10px 11px; gap: 11px; }
  .lateral .item .bolinha { position: static; margin-left: auto; }
  .lateral-rodape, .lateral.recolhida .chip-periodo, .lateral.recolhida .dados-sessao, .app.menu-h .lateral-rodape { display: flex; }
  .lateral.recolhida .chip-periodo { display: block; }
  .app.menu-h .barra-ferr-h { display: flex; flex-wrap: wrap; gap: 8px; width: auto; order: 0; margin: 0; }
  /* cabeçalho compacto */
  .cabecalho { padding: 14px 16px 0; gap: 10px; }
  .cabecalho h2 { font-size: 20px; }
  .saudacao h2 { font-size: 22px !important; }
  .cab-dir { width: 100%; justify-content: flex-start; gap: 8px; }
  .cab-dir .busca-topo { display: none; }
  .relogio-painel { flex-direction: row; align-items: baseline; gap: 10px; }
  .relogio-painel b { font-size: 20px !important; }
  .topo-painel, .topo-entidades, .topo-sino { position: fixed; left: 12px; right: 12px; top: 64px; width: auto; max-width: none; max-height: 70vh; overflow-y: auto; }
  .conteudo { padding: 14px 16px 24px; }
  .rodape { flex-direction: column; gap: 4px; text-align: center; }
  /* listas e formulários */
  .crit-linha { grid-template-columns: 74px minmax(0, 1fr) 28px; }
  .crit-linha .lig { grid-column: 1; grid-row: 1; } .crit-linha .campo-sel { grid-column: 2; grid-row: 1; } .crit-linha .remover { grid-column: 3; grid-row: 1; }
  .crit-linha .op-sel { grid-column: 1; grid-row: 2; } .crit-linha .valor { grid-column: 2 / 4; grid-row: 2; }
  .crit-linha select { min-width: 0; width: 100%; }
  .grade2, .duas, .duas-iguais, .forms-layout, .painel-quadros { grid-template-columns: 1fr !important; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px; }
  .kpi { padding: 12px; }
  .rodape-lista { flex-direction: column; align-items: stretch; }
  .padrao-busca { flex-wrap: wrap; }
  .barras-status.cinco { gap: 8px; }
  .bs span { font-size: 10.5px; }
  dialog.massa, dialog.sobre, dialog.previa-dialog { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
  .faixa-fech { margin: 12px 16px 0; }
}
@media (max-width: 420px) { .kpis { grid-template-columns: 1fr !important; } }

/* ---------- Painel como no modelo: indicadores com ícone ao lado, gráfico com eixo e grade ---------- */
.kpi.kpi-vidro { flex-direction: row; align-items: center; }
.kpi-vidro .rot { text-transform: none; letter-spacing: 0; font-size: 13px; }
.barras-status { position: relative; border-left: 1px solid var(--linha); border-bottom: 1px solid var(--linha);
  background-image: repeating-linear-gradient(to top, transparent 0, transparent calc(25% - 1px), var(--linha) calc(25% - 1px), var(--linha) 25%);
  background-size: 100% calc(100% - 46px); background-repeat: no-repeat; padding-left: 14px; }
.bs-trilho { max-width: 46px; }
.bs-barra { border-radius: 12px 12px 4px 4px; }

/* Painel › SLA: "Ver todos" abre a janela à direita */
button.sla-resumo { width: 100%; text-align: left; cursor: pointer; font: inherit; font-size: 12.5px; }
.gaveta-sla { position: fixed; inset: 0; z-index: 100; background: rgba(6, 12, 18, 0); transition: background .22s; }
.gaveta-sla.aberta { background: rgba(6, 12, 18, .4); }
.gaveta-sla[hidden] { display: none; }
.gaveta-sla-caixa { position: absolute; top: 0; right: 0; bottom: 0; width: min(480px, 100vw); background: var(--superficie); border-left: 1px solid var(--linha);
  box-shadow: -20px 0 60px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: 12px; padding: 18px; transform: translateX(100%); transition: transform .22s ease; }
.gaveta-sla.aberta .gaveta-sla-caixa { transform: none; }
html[data-estilo="vidro"] .gaveta-sla-caixa { background: var(--vidro-brilho), var(--superficie-2); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%); border-left-color: var(--vidro-borda); }
.gaveta-topo { display: flex; align-items: center; gap: 10px; }
.gaveta-topo h3 { margin: 0; text-transform: none; letter-spacing: 0; font-size: 16px; }
.gaveta-topo .fantasma { margin-left: auto; }
.gaveta-abas { align-self: flex-start; }
.gaveta-lista { overflow-y: auto; flex: 1; }
.gaveta-lista[hidden] { display: none; }
@media (max-width: 420px) {
  .kpis.kpis-painel { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi.kpi-vidro { flex-direction: column; align-items: flex-start; gap: 10px; }
  .kpi-vidro .kpi-ic { width: 38px; height: 38px; flex-basis: 38px; }
  .kpi-vidro .val { font-size: 24px; }
}

/* menu recolhido: a barra fica numa camada acima do conteúdo e não corta a cascata dos submenus */
@media (min-width: 901px) {
  .lateral.recolhida { z-index: 70; overflow: visible; }
  .lateral.recolhida .menu-itens { z-index: 80; }
}

/* lista com busca (select[data-busca], app.js) */
.sel-busca { position: relative; }
.sel-busca-in { width: 100%; }
.sel-busca-lista { position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); max-height: 320px; overflow-y: auto;
  background: var(--superficie); border: 1px solid var(--linha-forte); border-radius: var(--raio); box-shadow: 0 14px 40px rgba(0,0,0,.28); padding: 4px; }
.sel-busca-grupo { position: sticky; top: -4px; background: var(--superficie); padding: 8px 10px 4px; font-size: 11px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-fraca); }
.sel-busca-op { padding: 7px 10px 7px 16px; border-radius: var(--raio-sm); cursor: pointer; font-size: 13.5px; }
.sel-busca-op:hover, .sel-busca-op.ativo { background: var(--acao-suave); color: var(--acao); }
.sel-busca-op.sel { font-weight: 700; }
.sel-busca-vazio { padding: 10px; color: var(--tinta-fraca); font-size: 13px; }
/* no estilo vidro a superfície é translúcida: a lista precisa de fundo opaco para não misturar com os campos de baixo */
html[data-estilo="vidro"] .sel-busca-lista, html[data-estilo="vidro"] .sel-busca-grupo { background: rgba(17, 30, 42, .97); backdrop-filter: blur(22px) saturate(140%); -webkit-backdrop-filter: blur(22px) saturate(140%); }
html[data-estilo="vidro"][data-theme="claro"] .sel-busca-lista, html[data-estilo="vidro"][data-theme="claro"] .sel-busca-grupo { background: rgba(255, 255, 255, .98); }
/* anexos de qualquer extensão (macro lista_anexos) */
.anexo .ext { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 5px; border-radius: 4px; background: var(--acao); color: #fff; }
.anexo .nm { color: inherit; }
.anexo-midia { display: inline-flex; flex-direction: column; gap: 3px; }
.anexo-midia.video video { max-width: 320px; max-height: 220px; border-radius: var(--raio-sm); border: 1px solid var(--linha); background: #000; }
@media (max-width: 640px) { .anexo-midia.video video { max-width: 100%; } .anexo { max-width: 100%; overflow-wrap: anywhere; } }
.anexo-midia.audio { max-width: 520px; }
.transcricao { display: block; font-size: 13px; line-height: 1.45; color: var(--tinta-2); background: var(--campo); border: 1px solid var(--linha); border-radius: var(--raio-sm); padding: 6px 10px; white-space: pre-wrap; }
.transcricao b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .05em; color: var(--tinta-suave); margin-bottom: 2px; }
.transcricao.pendente { font-style: italic; }
.transcricao.erro, .transcricao.longo { color: var(--tinta-suave); }
.sel-duracao { min-width: 110px; }

/* ===========================================================================
   Celular, 2ª rodada (15/10/2026): campos com 16 px (o iPhone não dá zoom ao focar),
   áreas de toque de ~40 px, tabelas viram cartões e ajustes de gaveta, abas e relatório
   =========================================================================== */
@media (max-width: 900px) {
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]), select, textarea { font-size: 16px !important; }
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]):not([type=file]), select { min-height: 40px; }
  input[type=checkbox], input[type=radio] { width: 20px; height: 20px; }
  .botao { min-height: 40px; }
  .botao.pequeno { padding: 8px 12px; font-size: 13.5px; }
  .abas a { display: inline-flex; align-items: center; min-height: 38px; padding: 8px 13px; font-size: 13.5px; }
  details.mais > summary { display: flex; align-items: center; min-height: 40px; }
  .crit-linha { grid-template-columns: 74px minmax(0, 1fr) 40px; }
  .crit-linha .remover { width: 40px; min-height: 40px; }
  /* gaveta: títulos das seções maiores para o dedo, cartão do usuário na largura toda */
  .lateral button.menu-rot, .lateral.recolhida button.menu-rot { min-height: 36px; align-items: center; padding: 8px; }
  .lateral .lateral-rodape { margin: 0; align-self: stretch; }
  /* chamado: abas Acompanhamento / Tarefa / Solução / Documento em grade 2 × 2 */
  .comp-abas { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }
  .comp-abas button { justify-content: center; min-height: 44px; font-size: 13.5px; }
  /* Meus chamados (cliente): itens do topo com altura de toque */
  .topbar nav a { min-height: 40px; }
  .topbar .sair { width: 40px; height: 40px; }
  /* relatório: o quadro ocupa a largura toda da tela */
  .quadro-relatorio { width: calc(100% + 32px); margin: 0 -16px; border-left: 0; border-right: 0; border-radius: 0; }
}
@media (max-width: 420px) {
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kpi { min-width: 0; overflow-wrap: anywhere; }
  /* Início › Chamados por status: as 5 colunas cabem na tela (Cancelados não é mais cortado) */
  .barras-status.cinco { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 7px; padding-left: 6px; padding-right: 2px; }
  .barras-status.cinco .bs span { font-size: 9px; letter-spacing: -.02em; }
  /* abas (ex.: Em aberto / Solucionados / Todos) sem quebrar o texto */
  .abas { max-width: 100%; overflow-x: auto; }
  .abas a { white-space: nowrap; }
}

/* tabelas em cartões (app.js marca as tabelas com .tab-cartoes e o nome da coluna em data-rot) */
@media (max-width: 640px) {
  table.tab-cartoes, table.tab-cartoes > tbody { display: block; width: 100%; }
  table.tab-cartoes > thead { display: none; }
  table.tab-cartoes > tbody > tr { display: block; padding: 12px 16px; border-bottom: 1px solid var(--linha); }
  table.tab-cartoes > tbody > tr:last-child { border-bottom: 0; }
  table.tab-cartoes > tbody > tr > td { display: block; padding: 3px 0; border: 0; text-align: right; min-width: 0; max-width: none; white-space: normal !important; overflow-wrap: anywhere; }
  table.tab-cartoes > tbody > tr > td::before { content: attr(data-rot); float: left; max-width: 45%; margin-right: 12px; text-align: left;
    font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--tinta-fraca); line-height: 1.9; }
  table.tab-cartoes > tbody > tr > td::after { content: ""; display: table; clear: both; }
  table.tab-cartoes > tbody > tr > td:not([data-rot])::before, table.tab-cartoes > tbody > tr > td[data-rot=""]::before,
  table.tab-cartoes > tbody > tr > td:first-child::before { content: none; }
  table.tab-cartoes > tbody > tr > td:not([data-rot]), table.tab-cartoes > tbody > tr > td[data-rot=""],
  table.tab-cartoes > tbody > tr > td:first-child { text-align: left; }
  table.tab-cartoes > tbody > tr > td:first-child { font-size: 14.5px; padding-bottom: 6px; }
  table.tab-cartoes > tbody > tr > td.vazio, table.tab-cartoes > tbody > tr > td[colspan] { text-align: center; }
  table.tab-cartoes > tbody > tr > td .botao { margin: 2px 6px 2px 0; }
  table.tab-cartoes > tbody > tr > td.num { font-variant-numeric: tabular-nums; }
  /* lista de chamados: cartão com a cor da prioridade na borda e a caixa de seleção no canto */
  table.glpi.tab-cartoes > thead { display: block; }
  table.glpi.tab-cartoes > thead tr { display: block; }
  table.glpi.tab-cartoes > thead th { display: none; }
  table.glpi.tab-cartoes > thead th.sel-col { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border-bottom: 1px solid var(--linha); }
  table.glpi.tab-cartoes > thead th.sel-col::after { content: "Selecionar todos"; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--tinta-2); }
  table.glpi.tab-cartoes > tbody > tr { position: relative; border-left: 4px solid transparent; padding: 12px 16px 12px 14px; }
  table.glpi.tab-cartoes > tbody > tr.pr-critica { border-left-color: var(--erro); }
  table.glpi.tab-cartoes > tbody > tr.pr-alta { border-left-color: var(--alerta); }
  table.glpi.tab-cartoes > tbody > tr.pr-media { border-left-color: var(--serie-1); }
  table.glpi.tab-cartoes > tbody > tr.pr-baixa { border-left-color: var(--linha-forte); }
  table.glpi.tab-cartoes td.id-col { border-left: 0; font-size: 12.5px; padding: 0 40px 2px 0; text-align: left; }
  table.glpi.tab-cartoes td.id-col::before { content: none; }
  table.glpi.tab-cartoes td.id-col a::before { content: "#"; }
  table.glpi.tab-cartoes td.assunto-col { text-align: left; padding-right: 36px; }
  table.glpi.tab-cartoes td.assunto-col::before { content: none; }
  table.glpi.tab-cartoes td.assunto-col .assunto { font-size: 15px; }
  table.glpi.tab-cartoes td.sel-col { position: absolute; top: 10px; right: 10px; padding: 0; }
  table.glpi.tab-cartoes td.sel-col input { width: 22px; height: 22px; margin: 0; }
  table.glpi.tab-cartoes td.cat-col { max-width: none; }
  table.glpi.tab-cartoes .pessoa { display: inline-flex; }
}

/* Busca: critério Empresa com várias empresas (15/10/2026) — escolhidas dentro do campo, demais na lista abaixo */
.multi-emp { position: relative; width: 100%; min-width: 260px; }
.multi-caixa { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-height: 38px; padding: 4px 8px;
  border: 1px solid var(--linha); border-radius: var(--raio-sm); background: var(--campo, var(--superficie)); cursor: text; }
.multi-caixa:focus-within { border-color: var(--acao); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acao) 18%, transparent); }
.multi-chips { display: contents; }
.multi-chip { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; max-width: 100%; }
.multi-chip button { border: 0; background: none; color: inherit; cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.multi-busca { flex: 1 1 120px; min-width: 100px; border: 0 !important; outline: 0; background: transparent !important; box-shadow: none !important; padding: 4px 2px !important; height: auto !important; }
.multi-lista { position: fixed; z-index: 60; max-height: 300px; overflow-y: auto; overscroll-behavior: contain;
  background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio-sm); box-shadow: var(--sombra); padding: 4px; }
.multi-op { display: block; width: 100%; text-align: left; border: 0; background: none; color: var(--tinta); padding: 8px 10px; border-radius: 6px; cursor: pointer; font: inherit; }
.multi-op:hover, .multi-op.on { background: var(--superficie-2); }
.multi-vazio { padding: 8px 10px; color: var(--tinta-fraca); font-size: 13px; }
.multi-chip { min-width: 0; }
.multi-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 640px) {
  .multi-emp { min-width: 0; } .multi-busca { font-size: 16px !important; } .multi-op { min-height: 40px; }
  /* critério Empresa no celular: operador numa linha, o campo de empresas na linha toda abaixo */
  .crit-linha:has(.multi-emp) .op-sel { grid-column: 1 / 4; grid-row: 2; }
  .crit-linha:has(.multi-emp) .valor { grid-column: 1 / 4; grid-row: 3; }
  .multi-chip button { min-width: 28px; min-height: 28px; }
}

/* Status do login no menu do usuário, no topo (15/10/2026: saiu do rodapé do menu lateral) */
.avatar-topo { position: relative; }
.avatar-topo .status-online { width: 10px; height: 10px; }
.topo-quem .ponto-on, .topo-status .ponto-on { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 4px; vertical-align: 1px; }
.topo-conta .topo-status { display: flex; align-items: center; color: var(--tinta-2); word-break: normal; margin-top: 2px; }

/* ===========================================================================
   Padrão mobile "barra inferior" (16/10/2026) — mesmo visual de Ativos, Planner, Relatório, DP e Skills.
   Desktop: os elementos novos ficam escondidos e nada mais muda.
   Celular e tablet (<= 900 px, o mesmo corte da gaveta antiga): navegação numa barra fixa no rodapé,
   o restante do menu na folha "Mais" (o próprio menu lateral, subindo do rodapé), cabeçalho em cartão
   com botões contornados, data por extenso + saudação na tela inicial e indicadores em 2 colunas.
   =========================================================================== */
:root { --bi-fundo: var(--superficie); --bi-h: 73px; }
.topo-celular, .barra-inferior, .folha-cab, .so-celular, .saudacao-celular { display: none; }

@media screen and (max-width: 900px) {
  .so-desktop { display: none !important; }
  .so-celular { display: block; }
  .lateral .menu-secao.so-celular { display: block; }

  /* ----- Cabeçalho: cartão que rola junto (interno e cliente) ----- */
  .topo-celular {
    display: block; position: relative; z-index: 1; margin: 12px 12px 0; padding: 14px 14px 12px;
    background: var(--bi-fundo); border: 1px solid var(--linha); border-top: 3px solid var(--acao);
    border-radius: var(--raio-lg); box-shadow: var(--sombra-sutil);
  }
  .topo-celular .marca-via3 .nome { font-size: 22px; }
  .topo-celular .marca-via3 .sub { font-size: 10px; }
  .tc-botoes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 12px; }
  .tc-tema { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--linha-forte); border-radius: 999px; }
  .tc-tema button {
    width: 38px; height: 38px; min-height: 0; padding: 0; border: 0; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center; background: transparent; color: var(--tinta-2);
  }
  .tc-tema svg { width: 20px; height: 20px; }
  html[data-theme="claro"] .tc-tema [data-tema="claro"], html:not([data-theme="claro"]) .tc-tema [data-tema="escuro"] { background: var(--acao-suave); color: var(--acao); }
  .tc-botao {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 46px; min-width: 46px; padding: 0 13px;
    border: 1px solid var(--linha-forte); border-radius: 12px; background: transparent;
    color: var(--tinta); font-size: 14.5px; font-weight: 500;
  }
  .tc-botao:hover { color: var(--tinta); border-color: var(--tinta-fraca); }
  .tc-botao svg { width: 20px; height: 20px; }
  .tc-ajuda { padding: 0; min-width: 44px; font-size: 17px; }
  .tc-usuario { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-top: 12px; font-size: 14.5px; color: var(--tinta); }
  .tc-conectado {
    display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 999px;
    background: color-mix(in srgb, var(--ok) 15%, transparent); color: var(--ok); font-size: 13px; font-weight: 600;
  }
  .tc-conectado::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
  .tc-acesso { color: var(--tinta-fraca); font-size: 13.5px; }

  /* interno: o menu do usuário e a ajuda do topo saem (estão no cartão e na folha "Mais");
     empresa ativa e atividades recentes continuam na linha de ferramentas da tela */
  .cab-dir #topoAjuda, .cab-dir #topoUsuario, .relogio-painel { display: none !important; }
  /* cliente: a barra do topo vira o cartão */
  .cliente .topbar { position: static; display: block; height: auto; padding: 0; background: none; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .cliente .topbar > .esq, .cliente .topbar > .dir { display: none; }

  /* ----- Título da página ----- */
  .cabecalho h2 { font-size: 24px; line-height: 1.2; }
  .sc-data { display: block; min-height: 1.2em; font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--tinta-fraca); }
  .saudacao h2, html[data-estilo="vidro"] .saudacao h2 { font-size: 29px !important; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 4px; }
  .saudacao .sub-cab { font-size: 15px; display: block; }
  .saudacao-celular { display: block; flex: 1 1 100%; }
  .saudacao-celular h1 { font-size: 29px; line-height: 1.15; letter-spacing: -.02em; margin: 6px 0 6px; }
  .saudacao-celular p { margin: 0; color: var(--tinta-2); font-size: 15px; }
  .cli-titulo .botao.acao { min-height: 48px; padding: 0 18px; border-radius: 10px; font-size: 15px; }

  /* ----- Indicadores: 2 colunas, número grande colorido pelo significado ----- */
  .kpis > .kpi { border-radius: 16px; }
  .kpis-painel .kpi.kpi-vidro { flex-direction: column; align-items: stretch; gap: 0; padding: 16px 15px; }
  .kpis-painel .kpi-vidro .kpi-ic { display: none; }
  .kpis-painel .kpi-dados { display: flex; flex-direction: column; min-width: 0; }
  .kpis-painel .kpi-vidro .val, .cliente .kpis .kpi .val { order: -1; font-size: 40px !important; line-height: 1.05; font-weight: 700; }
  .kpis-painel .kpi-vidro .rot, .cliente .kpis .kpi .rot { margin-top: 8px; font-size: 14px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--tinta-2); line-height: 1.35; }
  .kpis-painel .kpi-vidro .sub { font-size: 12.5px; }
  .kpis-painel .kpi-vidro:has(.g-laranja) .val, .cliente .kpi:has(.t-laranja) .val { color: var(--acao); }
  .kpis-painel .kpi-vidro:has(.g-azul) .val, .cliente .kpi:has(.t-azul) .val { color: var(--serie-1); }
  .kpis-painel .kpi-vidro:has(.g-ambar) .val, .cliente .kpi:has(.t-ambar) .val { color: var(--atencao); }
  .kpis-painel .kpi-vidro:has(.g-verde) .val, .cliente .kpi:has(.t-verde) .val { color: var(--ok); }
  .kpis-painel .kpi-vidro:has(.g-vermelho) .val { color: var(--erro); }
  .cliente .kpis .kpi { padding: 16px 15px; }
  .cliente .kpis .kpi .icone { display: none; }
  .cliente .kpis .kpi:not(:has(.val)) .rot { margin-top: 0; font-weight: 600; color: var(--tinta); }

  /* ----- Barra inferior ----- */
  body.com-barra { padding-bottom: calc(var(--bi-h) + env(safe-area-inset-bottom)); }
  .barra-inferior {
    display: flex; gap: 1px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    background: var(--bi-fundo); border-top: 1px solid var(--linha); box-shadow: 0 -4px 18px rgba(0, 0, 0, .10);
  }
  .barra-inferior > a, .barra-inferior > button {
    flex: 1 1 0; min-width: auto; height: 60px; min-height: 0; padding: 0 3px; margin: 0;   /* min-width auto: o rótulo inteiro cabe (Chamados) */
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    border: 0; border-radius: 12px; background: transparent; color: var(--tinta-2);
    font: inherit; font-size: 12px; letter-spacing: -.01em; font-weight: 500; cursor: pointer; -webkit-tap-highlight-color: transparent;
  }
  .barra-inferior > a:hover { color: var(--tinta); }
  .barra-inferior .bi-ic { position: relative; display: block; width: 23px; height: 23px; font-style: normal; }
  .barra-inferior .bi-ic svg { width: 23px; height: 23px; display: block; }
  .barra-inferior span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.2; }
  .barra-inferior > .ativo, .barra-inferior > .ativo:hover { background: var(--acao-forte); color: var(--acao-tinta); font-weight: 600; }
  .barra-inferior .bi-cont {
    position: absolute; top: -6px; right: -10px; min-width: 18px; height: 18px; padding: 0 5px;
    border-radius: 999px; background: var(--erro); color: #fff; border: 2px solid var(--bi-fundo);
    font-size: 11px; font-weight: 700; line-height: 14px; text-align: center;
  }
  .barra-cliente { justify-content: center; }
  .barra-cliente > a { max-width: 130px; }
  /* some quando há janela por cima */
  body:has(dialog[open]) .barra-inferior, body:has(.paleta:not([hidden])) .barra-inferior, body:has(.visor:not([hidden])) .barra-inferior { display: none; }
  .rodape { padding-bottom: 18px; }

  /* ----- Folha "Mais": o menu lateral sobe do rodapé, acima da barra ----- */
  .lateral, .lateral.recolhida, .app.menu-h .lateral, html[data-estilo="vidro"] .lateral {
    top: auto; bottom: calc(var(--bi-h) + env(safe-area-inset-bottom)); left: 0; right: 0; width: auto; height: auto;
    max-height: calc(100dvh - var(--bi-h) - env(safe-area-inset-bottom) - 56px);
    border-radius: 18px 18px 0 0; border: 1px solid var(--linha); border-bottom: 0;
    padding: 6px 12px 12px; gap: 6px; z-index: 56;
    transform: translateY(calc(100% + var(--bi-h) + 40px)); visibility: hidden; transition: transform .2s ease, visibility 0s .2s;
    box-shadow: 0 -10px 30px rgba(0, 0, 0, .22);
  }
  html[data-estilo][data-theme] body .lateral, html[data-theme] body .lateral { background: var(--bi-fundo); }
  body.menu-aberto .lateral, body.menu-aberto .lateral.recolhida, body.menu-aberto .app.menu-h .lateral, html[data-estilo="vidro"] body.menu-aberto .lateral {
    transform: none; visibility: visible; transition: transform .2s ease; box-shadow: 0 -10px 30px rgba(0, 0, 0, .25); }
  .cab-dir #topoAjuda, .cab-dir #topoUsuario, .barra-ferr-h #topoAjuda, .barra-ferr-h #topoUsuario { display: none !important; }
  .app.menu-h .lateral .barra-ferr-h { padding: 4px 4px 0; }
  body.menu-aberto .veu-menu { z-index: 45; }
  .lateral .logo { display: none; }
  .lateral .folha-cab { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 4px 0 2px 12px; font-size: 16px; color: var(--tinta); }
  .folha-fechar { width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--tinta-2); font-size: 18px; cursor: pointer; border-radius: 12px; }
  /* o que já está na barra não se repete na folha */
  .lateral .item[data-chave="inicio"], .lateral .item[data-chave="chamados"], .lateral .item[data-chave="painel"],
  .lateral .item[data-chave="meus"], .lateral .item[data-chave="novo"] { display: none; }
  .lateral .item, .lateral.recolhida .item { min-height: 48px; font-size: 15px; border-radius: 12px; }
  .lateral button.item { width: 100%; border: 0; background: transparent; font: inherit; font-size: 15px; color: var(--tinta-2); cursor: pointer; text-align: left; }
  .lateral .item svg { width: 20px; height: 20px; }
  .mais-perfis { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 8px 11px; margin: 0; }
  .mais-perfis > span { font-size: 13px; color: var(--tinta-fraca); margin-right: 4px; }
  .mais-perfis button { min-height: 38px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--linha-forte); background: transparent; color: var(--tinta-2); font: inherit; font-size: 13.5px; cursor: pointer; }
  .mais-perfis button.on { background: var(--acao-suave); color: var(--acao); border-color: transparent; font-weight: 600; }
}
@media screen and (max-width: 380px) { .barra-inferior > a, .barra-inferior > button { font-size: 11.5px; } }
@media (prefers-reduced-motion: reduce) { .lateral { transition: none !important; } }