/* Barra lateral no estilo do Book: faixa azul-marinho com ícones + painel que abre para o lado, dourado nos destaques. */
.sidebar-lf { display: flex; flex-direction: row; width: var(--trilha-largura); background: transparent; border-right: 0; overflow: visible; }
.sidebar-lf.tem-painel { width: calc(var(--trilha-largura) + var(--painel-largura)); }
.sidebar-lf .sidebar-resize { display: none; }

.trilha-lateral { width: var(--trilha-largura); flex: none; display: flex; flex-direction: column; align-items: stretch; padding: 14px 6px 6px; background: var(--marinho); overflow-y: auto; }
.trilha-logo { align-self: center; display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin-bottom: 12px; flex: none;
  border: 2px solid var(--dourado); border-radius: 12px; color: var(--dourado); font-family: var(--font-titulo); font-weight: 700; font-size: 17px; }
.trilha-logo:hover { color: #fff; }
.trilha-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0; overflow: visible; }
.trilha-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border: 0; border-left: 0; border-radius: 12px; background: transparent;
  color: var(--sidebar-texto); font: inherit; font-size: 12.5px; font-weight: 500; text-align: left; cursor: pointer; }
.trilha-item .ph { font-size: 19px; flex: none; opacity: 1; }
.trilha-item span { flex: 1; min-width: 0; }
.trilha-item:hover { background: var(--marinho-claro); color: #fff; }
.trilha-item.ativo { background: var(--marinho-claro); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--dourado); }
.trilha-item:focus-visible, .painel-lateral .nav-item:focus-visible, .painel-fixar:focus-visible { outline: 2px solid var(--dourado); outline-offset: 2px; }

.tamanho-letra { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 3px; padding: 6px 2px 4px; border-top: 1px solid var(--marinho-claro); }
.tamanho-letra button { padding: 0 6px; font-size: 10px; line-height: 17px; border-radius: 5px; border: 1px solid #2a5a91; background: transparent; color: var(--sidebar-texto); cursor: pointer; }
.tamanho-letra button:hover { background: var(--marinho-claro); color: #fff; }
.tamanho-letra span { font-size: 9.5px; color: var(--sidebar-texto); min-width: 0; }

.trilha-rodape { padding: 6px 0 0; border-top: 1px solid var(--marinho-claro); }
.trilha-rodape .usuario-box { justify-content: center; padding: 4px 2px; gap: 6px; }
.trilha-rodape .btn-icone { color: var(--sidebar-texto); }
.trilha-rodape .btn-icone:hover { background: var(--marinho-claro); color: #fff; }
.trilha-rodape .btn-icone.desabilitado { opacity: .45; }
.trilha-rodape .avatar { background: var(--marinho-claro); color: var(--dourado); border: 1.5px solid var(--dourado); }

/* Painel que abre para o lado (fixo ao lado ou flutuante sobre a tela) */
.painel-lateral { display: none; flex: none; width: var(--painel-largura); background: var(--marinho-claro); border-right: 1px solid #1d4468; padding: 16px 12px; overflow-y: auto; }
.sidebar-lf.tem-painel .painel-lateral { display: block; }
.painel-bloco { display: none; }
.sidebar-lf.tem-painel .painel-bloco.ativo { display: block; }
.painel-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.painel-cab h3 { margin: 0; font-size: 17px; color: #fff; }
.painel-fixar { padding: 2px 10px; border-radius: var(--raio-full); border: 1px solid #2a5a91; background: transparent; color: #c9d3e2; font-size: 11px; cursor: pointer; }
.painel-fixar::before { content: "Fixo"; }
.painel-fixar:hover { background: var(--marinho-ativo); color: #fff; }
.painel-lateral .nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; margin-bottom: 2px; border-radius: 8px; color: #e6ebf2; font-size: 13px; font-weight: 500; }
.painel-lateral .nav-item i { opacity: .85; }
.painel-lateral .nav-item:hover { background: #1b4373; color: #fff; }
.painel-lateral .nav-item.ativo { background: var(--marinho-ativo); color: #fff; font-weight: 700; box-shadow: inset 3px 0 0 var(--dourado); }
.painel-lateral .nav-item.esmaecido { color: #9fb1c9; opacity: .7; }
.painel-lateral .tag-em-breve { background: var(--marinho); color: #c9d3e2; }

/* Modo flutuante: só a faixa fica; o painel aparece por cima ao clicar no ícone */
body.painel-flutuante .sidebar-lf.tem-painel { width: var(--trilha-largura); }
body.painel-flutuante .sidebar-lf .painel-lateral { position: absolute; top: 0; bottom: 0; left: var(--trilha-largura); box-shadow: 14px 0 28px rgba(12, 35, 64, .25); z-index: 2; }
body.painel-flutuante .sidebar-lf.tem-painel .painel-lateral { display: none; }
body.painel-flutuante.painel-aberto .sidebar-lf .painel-lateral { display: block; }
body.painel-flutuante .painel-fixar::before { content: "Fixar painel"; }
body.painel-flutuante .sidebar-lf .painel-bloco { display: none; }
body.painel-flutuante .sidebar-lf .painel-bloco.visivel { display: block; }

/* A página acompanha: a largura do conteúdo é a da faixa mais a do painel fixo */
.app-shell .conteudo { margin-left: var(--trilha-largura); }
body.tem-painel-fixo:not(.painel-flutuante) .conteudo { margin-left: calc(var(--trilha-largura) + var(--painel-largura)); }

@media (max-width: 900px) {
  .app-shell .conteudo, body.tem-painel-fixo:not(.painel-flutuante) .conteudo { margin-left: 0; }
  .sidebar-lf { width: auto; max-width: 92vw; }
  .sidebar-lf.tem-painel { width: auto; }
  body.painel-flutuante .sidebar-lf .painel-lateral { position: static; box-shadow: none; }
}

/* Espaço do cliente (2026-11-14): rótulo CLIENTE na trilha, grupos e descrição no painel, cliente no topo */
.trilha-secao { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #9fb1c9; text-align: center; margin: 8px 6px 2px; padding-top: 8px; border-top: 1px solid #1d4468; }
.painel-desc { font-size: 12px; color: #9fb1c9; margin: -4px 10px 8px; }
.painel-grupo { font-size: 10.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--dourado); margin: 14px 10px 4px; }

/* Faixa do cliente no topo (igual ao Book): marinho, rótulo dourado, documento e regime, Novo cliente */
.faixa-cliente { display: flex; align-items: center; gap: 12px; padding: 8px 24px; background: var(--marinho); color: #e6ebf2; flex-wrap: nowrap; min-width: 0; }
.faixa-cliente label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--dourado); }
.faixa-cliente select { min-width: 260px; max-width: 420px; }
.faixa-doc { font-size: 12.5px; color: #c9d3e2; white-space: nowrap; }
.faixa-novo { background: var(--branco); white-space: nowrap; flex: none; }
.faixa-aviso { margin-left: auto; font-size: 12px; color: #9fb1c9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
@media (max-width: 900px) { .faixa-aviso, .faixa-doc { display: none; } .faixa-cliente select { min-width: 0; flex: 1; } }
.faixa-cliente select { max-width: 100%; }
@media (max-width: 640px) { .faixa-cliente { flex-wrap: wrap; padding: 8px 16px; } }