/* ========================================================================== PAINEL: CONFIGURACAO DO PORTAL DE CHAMADOS (SO ADMIN) Os tokens de cor e o tema escuro vem de portal.css — o leva as duas classes (portal-pagina + painel-pagina) de proposito, porque o modal de detalhe do chamado e o MESMO componente das duas telas e precisa deles. Aqui fica so o que e desta tela: menu lateral, tabelas e o editor de pessoa. Sem quadro, sem zoom e sem fundo respirante: esta e uma tela de trabalho administrativo, o conteudo e que tem que aparecer. ========================================================================== */ /*ESCONDER/REVELAR POR ABA DEPENDE DISSO: sem o !important uma classe com display explicito (.painel-aba) vence o atributo [hidden] na mesma especificidade, e a aba escondida continua na tela.*/ [hidden] { display: none !important; } /*BOX-SIZING: NENHUM ARQUIVO CSS DESTE PROJETO TINHA UM RESET GLOBAL — cada selector que precisa de border-box declara na mao, e é fácil esquecer. Foi o que aconteceu aqui: `.pessoa__entrada { width: 100%; padding: ... }` sem border-box somava a largura da borda/padding por cima dos 100%, e o campo ficava mais largo que o dialog — foi isso que criou a barra de rolagem horizontal cortando o formulário de "Nova pessoa" ao meio. Corrigido na raiz (todo elemento desta pagina), não so no seletor que vazou — assim a proxima entrada/botao que alguem escrever aqui já nasce protegida contra o mesmo erro. Escopo: só afeta painel.html (é o único que carrega este arquivo) — o Portal e as outras telas continuam com seu padrão atual de content-box + box-sizing manual por seletor.*/ * { box-sizing: border-box; } /*A PAGINA TOMA A TELA E NAO ROLA: quem rola e a area de conteudo. Mesma ideia do Portal, mas sem o overflow travado — aqui a tabela e longa.*/ body.painel-pagina { height: 100dvh; overflow: hidden; } .painel { flex: 1; display: grid; grid-template-columns: 232px 1fr; min-height: 0; background: var(--superficie-2); } /* ========================================================================== CABECALHO (.barra-portal): BRANCO SOLIDO NO TEMA CLARO, ESCURO NO TEMA ESCURO — acompanha o tema do Portal, como o resto do site (pedido do usuario: "no modo escuro tem que ficar tudo escuro"). Antes esse cabecalho ficava branco fixo nos dois temas (pra bater com a Base de Solucoes) — revertido aqui so pro tema escuro; no tema claro nada muda. Sobrescreve so a COR, nunca a estrutura: .barra-portal em portal.css é vidro escuro translúcido sobre o degrade do quadro (faz sentido lá, sobre foto/gradiente); aqui o fundo por baixo não é mais laranja no topo, então a barra translúcida sobre fundo cinza claro não fazia mais sentido no tema claro — mas no tema escuro ela pode simplesmente assumir a MESMA cor solida que o resto da tela usa (--superficie), sem precisar do efeito vidro nem de cor fixa nenhuma. Especificidade: no tema escuro, portal.css tem a regra [data-tema="escuro"] .portal-pagina .topo { background-color: ... } que e MAIS especifica que body.painel-pagina .barra-portal sozinha (3 classes/atributos contra 2) e venceria mesmo painel.css carregando depois — por isso a regra do tema escuro abaixo repete [data-tema="escuro"] body.painel-pagina pra igualar/superar essa especificidade. ========================================================================== */ body.painel-pagina .barra-portal { background-color: #fff; /*Mesmo tom da borda do cabeçalho da Base de Soluções (.header em base.css) — #ececec, não #e3e3e3.*/ border-bottom: 1px solid #ececec; color: #1a1a1a; text-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } body.painel-pagina .barra-portal .portal__titulo, body.painel-pagina .barra-portal .portal__subtitulo, body.painel-pagina .barra-portal .topo__produto { color: #1a1a1a; } body.painel-pagina .barra-portal .topo__divisor { background-color: #ececec; } body.painel-pagina .painel-voltar { color: #555; } body.painel-pagina .painel-voltar:hover { background: #f2f2f2; color: #1a1a1a; } /*TEMA ESCURO: mesma cor solida do resto da tela (--superficie, o mesmo tom que .painel__conteudo e os cards ja usam), texto claro via var(--texto) — aqui SIM os tokens de tema servem, porque o fundo tambem passou a ser escuro (no bloco claro acima os literais existem justamente porque o fundo era branco fixo, incompativel com o --texto quase-branco do tema escuro).*/ [data-tema="escuro"] body.painel-pagina .barra-portal { background-color: var(--superficie); border-bottom: 1px solid var(--borda); color: var(--texto); } [data-tema="escuro"] body.painel-pagina .barra-portal .portal__titulo, [data-tema="escuro"] body.painel-pagina .barra-portal .portal__subtitulo, [data-tema="escuro"] body.painel-pagina .barra-portal .topo__produto { color: var(--texto); } [data-tema="escuro"] body.painel-pagina .barra-portal .topo__divisor { background-color: var(--borda); } [data-tema="escuro"] body.painel-pagina .painel-voltar { color: var(--texto-2); } [data-tema="escuro"] body.painel-pagina .painel-voltar:hover { background: var(--superficie-2); color: var(--texto); } /* ========================================================================== MENU LATERAL — MESMO PADRAO DA BASE DE SOLUCOES: degrade laranja respirando (o mesmo dos cartoes de login/Portal), texto claro translucido, item atual em laranja solido. So a cor muda aqui — a estrutura (grupos, itens, divisor) continua a mesma de antes. ========================================================================== */ /*O @keyframes so existia em login.css/base.css; sem ele aqui o fundo fica parado (a animacao referencia um nome que nao existiria neste arquivo).*/ @keyframes painel-sidebar-respira { 0%, 100% { background-position: 0% 0%; } 50% { background-position: 100% 60%; } } .painel-nav { display: flex; flex-direction: column; gap: 0.15rem; padding: 1rem 0.75rem; border-right: 0; background: radial-gradient(circle at top left, #5e141d 0%, #dd5b12 100%); background-size: 160% 160%; animation: painel-sidebar-respira 16s ease-in-out infinite; overflow-y: auto; } .painel-nav__item { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.6rem 0.75rem; border: 0; border-radius: 9px; background: none; color: rgba(255, 255, 255, 0.82); font: 500 0.875rem/1.2 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .painel-nav__item svg { flex-shrink: 0; color: rgba(255, 255, 255, 0.7); transition: color 0.15s ease; } .painel-nav__item:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .painel-nav__item:hover svg { color: #fff; } .painel-nav__item:active { background: rgba(255, 255, 255, 0.18); } /*ABA ATUAL: laranja solido, igual ao link ativo da Base — um so destaque por vez, aqui ele nao pode ser claro-sobre-claro porque o fundo inteiro ja e laranja.*/ .painel-nav__item--atual, .painel-nav__item--atual:hover { background: #c77240; color: #fff; } .painel-nav__item--atual svg, .painel-nav__item--atual:hover svg { color: #fff; } /*RODULO DO GRUPO ("Portal" / "Configurações"): nao e clicavel, so agrupa visualmente — mesma ideia dos titulos de secao do menu de 3 pontinhos do Portal, letra pequena e espacada.*/ .painel-nav__grupo-titulo { margin: 0.9rem 0.75rem 0.35rem; color: rgba(255, 255, 255, 0.55); font: 600 0.6875rem/1.2 "Poppins", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; } .painel-nav__grupo-titulo:first-child { margin-top: 0.15rem; } .painel-nav__divisor { display: block; height: 1px; margin: 0.6rem 0.5rem 0; background: rgba(255, 255, 255, 0.22); } /*EMPURRA O BOTAO DE RECOLHER PRO RODAPE DA COLUNA, mesmo com poucos itens acima — .painel-nav ja e flex-direction: column.*/ .painel-nav__espaco { flex: 1; } .painel-nav__colapsar { display: flex; align-items: center; gap: 0.65rem; width: 100%; padding: 0.6rem 0.75rem; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.16); border-radius: 0; background: none; color: rgba(255, 255, 255, 0.7); font: 500 0.8125rem/1.2 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .painel-nav__colapsar:hover { background: rgba(255, 255, 255, 0.12); color: #fff; } .painel-nav__colapsar svg { flex-shrink: 0; transition: transform 0.2s ease; } /*RECOLHIDO: SETA GIRA, TEXTOS SOMEM — a coluna vira so uma faixa de icones, mesma ideia da Base de Solucoes.*/ html[data-painel-sidebar="colapsada"] .painel-nav__colapsar svg { transform: rotate(180deg); } html[data-painel-sidebar="colapsada"] .painel-nav { width: 72px; } html[data-painel-sidebar="colapsada"] .painel-nav__item, html[data-painel-sidebar="colapsada"] .painel-nav__colapsar { justify-content: center; padding-left: 0; padding-right: 0; } html[data-painel-sidebar="colapsada"] .painel-nav__item span, html[data-painel-sidebar="colapsada"] .painel-nav__grupo-titulo, html[data-painel-sidebar="colapsada"] .painel-nav__colapsar-texto { display: none; } /*A LARGURA DA COLUNA E FIXA NO GRID (.painel), NAO NO PROPRIO .painel-nav — recolher precisa apertar a coluna do grid tambem, senao a faixa laranja encolhe mas deixa um vao cinza do lado.*/ html[data-painel-sidebar="colapsada"] .painel { grid-template-columns: 72px 1fr; } /* ========================================================================== MENU LATERAL NO TEMA ESCURO: troca o degrade laranja por uma superficie escura solida (--superficie-2, um tom acima do fundo da pagina) — sem a respiracao de gradiente, que so faz sentido sobre o laranja. Texto e icones passam a usar --texto/--texto-2 em vez dos brancos translucidos fixos, que foram pensados pra contrastar com laranja, nao com escuro. Item atual continua com destaque solido, so que com --laranja-forte (o unico dos dois tokens de laranja que o proprio tema escuro redefine pra um tom mais vivo, em portal.css) em vez do laranja fixo #c77240. ========================================================================== */ [data-tema="escuro"] .painel-nav { background: var(--superficie-2); animation: none; border-right: 1px solid var(--borda); } [data-tema="escuro"] .painel-nav__item { color: var(--texto-2); } [data-tema="escuro"] .painel-nav__item svg { color: var(--texto-2); } [data-tema="escuro"] .painel-nav__item:hover { background: var(--superficie-3); color: var(--texto); } [data-tema="escuro"] .painel-nav__item:hover svg { color: var(--texto); } [data-tema="escuro"] .painel-nav__item:active { background: var(--borda); } [data-tema="escuro"] .painel-nav__item--atual, [data-tema="escuro"] .painel-nav__item--atual:hover { background: var(--laranja-forte); color: #fff; } [data-tema="escuro"] .painel-nav__item--atual svg, [data-tema="escuro"] .painel-nav__item--atual:hover svg { color: #fff; } [data-tema="escuro"] .painel-nav__grupo-titulo { color: var(--texto-2); } [data-tema="escuro"] .painel-nav__divisor { background: var(--borda); } [data-tema="escuro"] .painel-nav__colapsar { border-top: 1px solid var(--borda); color: var(--texto-2); } [data-tema="escuro"] .painel-nav__colapsar:hover { background: var(--superficie-3); color: var(--texto); } /* ========================================================================== AREA DE CONTEUDO ========================================================================== */ .painel__conteudo { display: flex; flex-direction: column; min-height: 0; padding: 1.5rem 1.75rem; overflow-y: auto; } .painel__erro { margin: 0 0 1rem; padding: 0.85rem 1rem; border: 1px solid var(--erro-borda); border-radius: 10px; background: var(--erro-fundo); color: var(--erro-texto); font: 500 0.875rem/1.4 "Poppins", sans-serif; } .painel-aba { display: flex; flex-direction: column; min-height: 0; /*A troca de aba so alterna [hidden] (ligarAbas, painel.js) — display: none volta a none->flex a cada troca, o que reinicia a animation sozinho, sem precisar de JS pra "rearmar" nada.*/ animation: painel-aba-entra 0.18s ease both; } @keyframes painel-aba-entra { from { opacity: 0; transform: translateY(0.375rem); } } @media (prefers-reduced-motion: reduce) { .painel-aba { animation: none; } } .painel-aba__topo { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.25rem; } .painel-aba__titulo { margin: 0; color: var(--texto); font: 600 1.375rem/1.2 "Sora", sans-serif; } .painel-aba__resumo { margin: 0.35rem 0 0; max-width: 62ch; color: var(--texto-3); font: 400 0.8125rem/1.5 "Poppins", sans-serif; } /*BOTAO "NOVO": mesmo botao principal usado no editor de pessoa (.pessoa__botao--principal), mas com icone — canto superior direito da aba, ao lado do titulo.*/ .painel-botao-novo { display: flex; flex-shrink: 0; align-items: center; gap: 0.4rem; padding: 0.6rem 1.05rem; border: 1px solid var(--laranja); border-radius: 9px; background: var(--laranja); color: #fff; font: 600 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .painel-botao-novo:hover { border-color: var(--laranja-forte); background: var(--laranja-forte); } .painel-botao-novo:active { transform: translateY(1px); } /* ========================================================================== BUSCA E FILTROS ========================================================================== */ /*BARRA: BUSCA -------- EXPORTAR - FILTRAR. Os dois botoes da direita nao crescem (flex-shrink: 0); a busca ocupa o resto.*/ .painel-ferramentas { display: flex; align-items: flex-start; gap: 0.6rem; margin-bottom: 0.85rem; } .painel-busca { position: relative; flex: 1; min-width: 0; } .painel-busca__lupa { position: absolute; top: 50%; left: 0.85rem; color: var(--texto-3); transform: translateY(-50%); pointer-events: none; } .painel-busca__campo { width: 100%; padding: 0.65rem 0.9rem 0.65rem 2.5rem; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto); font: 400 0.875rem/1.3 "Poppins", sans-serif; } .painel-busca__campo::placeholder { color: var(--texto-4); } .painel-busca__campo:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; } .painel-filtros { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .painel-filtro { padding: 0.4rem 0.8rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); font: 500 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-filtro:hover { border-color: var(--realce-borda); color: var(--texto); } .painel-filtro:active { transform: translateY(1px); } .painel-filtro--ativo { border-color: var(--laranja); background: var(--realce); color: var(--laranja-forte); } /* ========================================================================== BOTOES DE ICONE (Exportar, Filtrar) E OS PAINEIS QUE ABREM DELES Mesma ideia do menu de 3 pontinhos e do filtro do quadro no Portal, mas numa superficie clara/escura normal em vez do degrade laranja do topo — por isso classes proprias do Painel, e nao as .quadro-filtro__* do Portal. ========================================================================== */ .painel-dropdown { position: relative; flex-shrink: 0; } .painel-icone-botao { display: flex; align-items: center; justify-content: center; gap: 0.375rem; min-width: 2.75rem; height: 2.75rem; box-sizing: border-box; padding: 0 0.75rem; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto-2); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-icone-botao:hover { border-color: var(--realce-borda); background: var(--realce); color: var(--laranja-forte); } .painel-icone-botao[aria-expanded="true"] { border-color: var(--laranja); background: var(--realce); color: var(--laranja-forte); } /*COM FILTRO LIGADO: fundo laranja cheio, igual ao mesmo estado no Portal — da para ver de longe que a tabela nao esta mostrando tudo.*/ .painel-icone-botao--ativo, .painel-icone-botao--ativo:hover { border-color: var(--laranja); background: var(--laranja); color: #fff; } .painel-icone-botao__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; box-sizing: border-box; padding: 0 0.3rem; border-radius: 999px; background: #fff; color: var(--laranja-forte); font: 600 0.6875rem/1 "Poppins", sans-serif; font-variant-numeric: tabular-nums; } .painel-dropdown__painel { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 5; width: 23rem; max-width: calc(100vw - 2rem); max-height: min(32rem, 70dvh); box-sizing: border-box; padding: 0.9rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: 0 14px 34px rgba(26, 26, 26, 0.16); overflow-y: auto; } .painel-dropdown__painel--estreito { width: 18rem; } .painel-dropdown__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.7rem; color: var(--texto); font: 600 0.8125rem/1.2 "Sora", sans-serif; } .painel-dropdown__limpar { padding: 0; border: 0; background: none; color: var(--laranja); font: 500 0.75rem/1.2 "Poppins", sans-serif; cursor: pointer; } .painel-dropdown__limpar:hover:not(:disabled) { text-decoration: underline; } .painel-dropdown__limpar:disabled { color: var(--texto-4); cursor: default; } .painel-dropdown__dica { margin: 0 0 0.75rem; color: var(--texto-3); font: 400 0.75rem/1.5 "Poppins", sans-serif; } /* ----- GRUPOS DE FILTRO: status, lista, prioridade (chips) ----- */ .painel-filtro-grupo + .painel-filtro-grupo { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--borda-suave); } .painel-filtro-grupo__titulo { margin: 0 0 0.45rem; color: var(--texto-3); font: 600 0.625rem/1.2 "Poppins", sans-serif; letter-spacing: 0.06em; text-transform: uppercase; } .painel-filtro-grupo__opcoes { display: flex; flex-wrap: wrap; gap: 0.35rem; } .painel-filtro-chip { display: inline-flex; align-items: center; gap: 0.35rem; max-width: 100%; padding: 0.28rem 0.6rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); font: 500 0.75rem/1.2 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-filtro-chip:hover { border-color: var(--realce-borda); background: var(--realce); } .painel-filtro-chip--marcado { border-color: var(--laranja); background: var(--realce); color: var(--laranja-forte); } /* ----- BUSCA DENTRO DE UM GRUPO (solicitante, atendente) ----- */ .painel-filtro-grupo__busca { width: 100%; box-sizing: border-box; margin-bottom: 0.4rem; padding: 0.4rem 0.6rem; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie-3); color: var(--texto); font: 400 0.75rem/1.3 "Poppins", sans-serif; } .painel-filtro-grupo__lista { display: flex; flex-direction: column; gap: 0.05rem; max-height: 9.5rem; overflow-y: auto; } .painel-filtro-grupo__item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.3rem; border-radius: 6px; color: var(--texto-2); font: 400 0.8125rem/1.3 "Poppins", sans-serif; cursor: pointer; } .painel-filtro-grupo__item:hover { background: var(--superficie-3); } .painel-filtro-grupo__item input { width: 15px; height: 15px; accent-color: var(--laranja); } .painel-filtro-grupo__vazio { margin: 0.3rem 0; color: var(--texto-4); font: 400 0.75rem/1.3 "Poppins", sans-serif; } /* ----- PERIODO (data de abertura, range de-ate) ----- */ .painel-filtro-datas { display: flex; gap: 0.5rem; } .painel-filtro-data { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .painel-filtro-data span { color: var(--texto-3); font: 500 0.6875rem/1.2 "Poppins", sans-serif; } .painel-filtro-data input { width: 100%; box-sizing: border-box; padding: 0.4rem 0.5rem; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); color: var(--texto); font: 400 0.75rem/1.3 "Poppins", sans-serif; color-scheme: light; } [data-tema="escuro"] .painel-filtro-data input { color-scheme: dark; } /* ----- EXPORTAR: OS TRES FORMATOS ----- */ .painel-dropdown__acoes-formato { display: flex; flex-direction: column; gap: 0.4rem; } .painel-formato { display: flex; flex-direction: column; align-items: flex-start; gap: 0.1rem; padding: 0.6rem 0.75rem; border: 1px solid var(--borda); border-radius: 9px; background: var(--superficie); text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .painel-formato:hover { border-color: var(--laranja); background: var(--realce); } .painel-formato:active { transform: translateY(1px); } .painel-formato__nome { color: var(--texto); font: 600 0.8125rem/1.2 "Sora", sans-serif; } .painel-formato__dica { color: var(--texto-3); font: 400 0.71875rem/1.3 "Poppins", sans-serif; } /* ========================================================================== TABELA Card no padrao shadcn: superficie branca, borda de 1px, canto generoso. A linha inteira e clicavel; o hover mostra qual esta sob o mouse. ========================================================================== */ .painel-tabela__caixa { border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-card); overflow-x: auto; } .painel-tabela { width: 100%; border-collapse: collapse; font: 400 0.8125rem/1.4 "Poppins", sans-serif; } .painel-tabela th { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--borda); color: var(--texto-3); font-weight: 500; text-align: left; white-space: nowrap; } .painel-tabela td { padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--borda-suave); color: var(--texto); vertical-align: middle; } .painel-tabela tbody tr:last-child td { border-bottom: 0; } .painel-tabela tbody tr { cursor: pointer; transition: background-color 0.12s ease; } .painel-tabela tbody tr:hover { background: var(--superficie-3); } .painel-tabela tbody tr:active { background: var(--realce); } .painel-tabela tbody tr:focus-visible { outline: 2px solid var(--laranja); outline-offset: -2px; } .painel-tabela__numero { color: var(--texto-2); font-variant-numeric: tabular-nums; white-space: nowrap; } .painel-tabela__titulo { display: block; max-width: 34ch; overflow: hidden; color: var(--texto); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; } /*COLUNA DA LIXEIRA: so o icone, sem cabecalho — encostada na borda direita, largura minima para nao empurrar a coluna de nome.*/ .painel-tabela__coluna-acao { width: 2.75rem; } .painel-tabela__excluir { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--texto-4); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .painel-tabela__excluir:hover { background: var(--erro-fundo); color: var(--erro-texto); } /*REATIVAR: botao de texto (nao icone) na aba Listas, so aparece na linha de uma lista arquivada.*/ .painel-tabela__reativar { padding: 0.35rem 0.7rem; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); color: var(--texto-2); font: 500 0.75rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-tabela__reativar:hover { border-color: var(--laranja); background: var(--realce); color: var(--laranja-forte); } /*A PREVIA DO TEXTO RAPIDO NA LISTA: uma linha, corta com reticencias.*/ .painel-tabela__previa { display: block; max-width: 46ch; overflow: hidden; color: var(--texto-3); text-overflow: ellipsis; white-space: nowrap; } /*PESSOA NA TABELA: FOTO + NOME, a mesma foto que aparece no chat.*/ .painel-pessoa { display: flex; align-items: center; gap: 0.55rem; } .painel-pessoa__avatar { display: grid; flex-shrink: 0; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--avatar-fundo); color: var(--avatar-texto); font: 600 0.6875rem/1 "Poppins", sans-serif; overflow: hidden; } .painel-pessoa__avatar img { width: 100%; height: 100%; object-fit: cover; } /*SELO DE STATUS: mesmas cores do card do quadro — quem ve o Portal reconhece o significado sem reaprender.*/ .painel-selo { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); font: 500 0.75rem/1.3 "Poppins", sans-serif; white-space: nowrap; } .painel-selo--aberto { background: color-mix(in srgb, var(--status-aberto) 12%, transparent); color: var(--status-aberto); } .painel-selo--aguardando { background: color-mix(in srgb, var(--status-aguardando) 14%, transparent); color: var(--status-aguardando); } .painel-selo--respondeu { background: color-mix(in srgb, var(--status-respondeu) 16%, transparent); color: var(--status-respondeu); } .painel-selo--fechado { background: var(--superficie-2); color: var(--texto-3); } .painel-vazio { margin: 1.5rem 0; color: var(--texto-4); font: 400 0.875rem/1.4 "Poppins", sans-serif; text-align: center; } /* ========================================================================== PAGINACAO: 15 por pagina, igual ao "‹ 1 2 3 4 5 … 500 ›" do Hipporello. ========================================================================== */ .painel-paginacao { display: flex; align-items: center; justify-content: center; gap: 0.3rem; margin-top: 1rem; } .painel-paginacao__seta { display: grid; place-items: center; width: 2rem; height: 2rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-paginacao__seta:hover:not(:disabled) { border-color: var(--realce-borda); background: var(--realce); color: var(--laranja-forte); } .painel-paginacao__seta:disabled { color: var(--texto-4); cursor: default; opacity: 0.5; } .painel-paginacao__numeros { display: flex; align-items: center; gap: 0.3rem; } .painel-paginacao__pagina { display: grid; place-items: center; min-width: 2rem; height: 2rem; padding: 0 0.4rem; border: 1px solid transparent; border-radius: 8px; background: none; color: var(--texto-2); font: 500 0.8125rem/1 "Poppins", sans-serif; font-variant-numeric: tabular-nums; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .painel-paginacao__pagina:hover { border-color: var(--borda); background: var(--superficie); } .painel-paginacao__pagina--atual, .painel-paginacao__pagina--atual:hover { border-color: var(--laranja); background: var(--laranja); color: #fff; cursor: default; } .painel-paginacao__reticencias { display: grid; place-items: center; min-width: 1.5rem; height: 2rem; color: var(--texto-4); font: 500 0.8125rem/1 "Poppins", sans-serif; } /* ========================================================================== CONFIGURACOES: UMA LISTA POR TABELA DO BANCO ========================================================================== */ .painel-config { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); align-items: start; } .painel-grupo { border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); box-shadow: var(--sombra-card); overflow: hidden; } .painel-grupo__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding: 0.9rem 1rem; border-bottom: 1px solid var(--borda-suave); } .painel-grupo__titulo { margin: 0; color: var(--texto); font: 600 0.9375rem/1.2 "Sora", sans-serif; } .painel-grupo__contador { color: var(--texto-4); font: 400 0.75rem/1 "Poppins", sans-serif; font-variant-numeric: tabular-nums; } .painel-grupo__lista { margin: 0; padding: 0; max-height: 280px; list-style: none; overflow-y: auto; } .painel-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.65rem 0.5rem 1rem; border-bottom: 1px solid var(--borda-suave); } .painel-item:last-child { border-bottom: 0; } .painel-item__nome { flex: 1; padding: 0.3rem 0.45rem; border: 1px solid transparent; border-radius: 7px; background: none; color: var(--texto); font: 400 0.8125rem/1.3 "Poppins", sans-serif; } .painel-item__nome:hover { border-color: var(--borda); } .painel-item__nome:focus-visible { outline: none; border-color: var(--laranja); background: var(--superficie); } .painel-item__acao { display: grid; flex-shrink: 0; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: var(--texto-3); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .painel-item__acao:hover { background: var(--erro-fundo); color: var(--erro-texto); } .painel-grupo__rodape { display: flex; gap: 0.5rem; padding: 0.7rem 1rem 0.85rem; border-top: 1px solid var(--borda-suave); background: var(--superficie-3); } .painel-grupo__campo { flex: 1; min-width: 0; padding: 0.5rem 0.7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: 400 0.8125rem/1.3 "Poppins", sans-serif; } .painel-grupo__campo:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; } .painel-grupo__adicionar { flex-shrink: 0; padding: 0.5rem 0.9rem; border: 0; border-radius: 8px; background: var(--laranja); color: #fff; font: 500 0.8125rem/1.3 "Poppins", sans-serif; cursor: pointer; transition: background-color 0.15s ease; } .painel-grupo__adicionar:hover { background: var(--laranja-forte); } .painel-grupo__adicionar:active { transform: translateY(1px); } .painel-grupo__adicionar:disabled { background: #d4d4d8; color: #71717a; cursor: not-allowed; transform: none; } .painel-grupo__aviso { margin: 0; padding: 0 1rem 0.7rem; color: var(--texto-3); font: 400 0.75rem/1.4 "Poppins", sans-serif; } .painel-grupo__aviso--erro { color: var(--erro-texto); } /*TEXTOS RAPIDOS: item mais alto, com o corpo da resposta embaixo do titulo.*/ .painel-item--texto { flex-direction: column; align-items: stretch; gap: 0.35rem; padding: 0.7rem 1rem; } .painel-item__corpo { width: 100%; min-height: 3.2rem; padding: 0.45rem 0.55rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie-3); color: var(--texto-2); font: 400 0.78125rem/1.45 "Poppins", sans-serif; resize: vertical; } .painel-item__linha { display: flex; align-items: center; gap: 0.5rem; } /* ========================================================================== EDITAR PESSOA ========================================================================== */ .pessoa { width: min(620px, 94vw); padding: 0; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); color: var(--texto); /*Mesmo padrao do .detalhe em portal.css: chega com leve escala, nao so um fade seco. allow-discrete da tempo da transicao rodar antes do display:none sumir o dialog (senao a saida nao anima).*/ transition: opacity 0.18s ease, transform 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; opacity: 1; transform: scale(1); } .pessoa::backdrop { background: rgba(20, 20, 22, 0.45); transition: background-color 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; } @starting-style { .pessoa[open] { opacity: 0; transform: scale(0.96); } .pessoa[open]::backdrop { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .pessoa { transition: none; } } .pessoa__conteudo { position: relative; display: flex; flex-direction: column; max-height: 88dvh; } /*CONFIRMACAO DE EXCLUSAO DE CONTA: o mesmo desenho da janela de confirmacao do site inteiro (.confirmacao, portal.css) — fundo escurecido por tras, caixa branca sem borda colorida, titulo em Sora, texto pequeno e o vermelho so no botao que exclui (os botoes usam .confirmacao__botao). Antes era um estilo proprio: fundo branco borrado, borda e titulo vermelhos e letras maiores que as das outras confirmacoes.*/ .pessoa__confirmacao { position: absolute; z-index: 2; inset: 0; display: grid; place-items: center; padding: 1.25rem; border-radius: inherit; background-color: rgba(16, 10, 8, 0.62); } .pessoa__confirmacao-caixa { width: min(24rem, 100%); max-height: 100%; padding: 1.125rem 1.125rem 1rem; box-sizing: border-box; border-radius: 12px; background-color: var(--superficie); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow-y: auto; } .pessoa__confirmacao-titulo { margin: 0 0 0.375rem; font-family: "Sora", system-ui, sans-serif; font-size: 0.9375rem; font-weight: 600; color: var(--texto); } .pessoa__confirmacao-texto { margin: 0 0 0.875rem; font-size: 0.75rem; line-height: 1.55; color: var(--texto-2); } /*Os campos de dentro seguem o tamanho da janela, menores que os do formulario de contato por tras.*/ .pessoa__confirmacao .pessoa__caixa { font-size: 0.75rem; } .pessoa__confirmacao .pessoa__campo { margin-top: 0.75rem; } .pessoa__confirmacao .pessoa__rotulo { font-size: 0.6875rem; } .pessoa__confirmacao .pessoa__entrada { padding: 0.4375rem 0.625rem; font-size: 0.75rem; } .pessoa__confirmacao-destinos { display: grid; gap: 0.25rem; max-height: 9rem; margin-top: 0.5rem; overflow-y: auto; } .pessoa__confirmacao-destino { width: 100%; padding: 0.4375rem 0.625rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); color: var(--texto); font: 400 0.75rem/1.3 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .pessoa__confirmacao-destino:hover, .pessoa__confirmacao-destino[aria-selected="true"] { border-color: var(--laranja); background-color: var(--realce); } .pessoa__confirmacao-destino-email, .pessoa__confirmacao-selecao, .pessoa__confirmacao-vazio { display: block; margin-top: 0.125rem; color: var(--texto-3); font: 400 0.6875rem/1.4 "Poppins", sans-serif; } .pessoa__confirmacao-selecao { min-height: 1rem; margin: 0.5rem 0 0; } /*Botao de excluir so libera depois de digitar EXCLUIR: apagado ate la. O .confirmacao__botao do portal.css nao tem estado desabilitado — nas outras confirmacoes o botao esta sempre liberado.*/ .pessoa__confirmacao .confirmacao__botao:disabled { opacity: 0.5; cursor: default; } .pessoa__confirmacao .confirmacao__botao--perigo:disabled:hover { border-color: #b02a2a; background-color: #b02a2a; } .pessoa__topo { display: flex; align-items: center; gap: 0.85rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--borda-suave); } /*FOTO + BOTOES DE TROCAR/REMOVER, lado a lado — o avatar cresce um pouco em relacao ao antigo (44px) porque agora carrega acao, nao so identidade.*/ .pessoa__foto { display: flex; flex-shrink: 0; align-items: center; gap: 0.65rem; } .pessoa__avatar { display: grid; flex-shrink: 0; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--avatar-fundo); color: var(--avatar-texto); font: 600 1.0625rem/1 "Poppins", sans-serif; overflow: hidden; } .pessoa__avatar img { width: 100%; height: 100%; object-fit: cover; } .pessoa__foto-acoes { display: flex; flex-direction: column; gap: 0.3rem; } .pessoa__foto-botao { padding: 0.3rem 0.6rem; border: 1px solid var(--borda); border-radius: 7px; background: var(--superficie); color: var(--texto-2); font: 500 0.71875rem/1.2 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .pessoa__foto-botao:hover { border-color: var(--realce-borda); background: var(--realce); color: var(--laranja-forte); } .pessoa__foto-botao:disabled { opacity: 0.55; cursor: default; } .pessoa__foto-botao--remover { color: var(--erro-texto); } .pessoa__foto-botao--remover:hover { border-color: var(--erro-borda); background: var(--erro-fundo); color: var(--erro-texto); } .pessoa__identidade { flex: 1; min-width: 0; } .pessoa__nome { margin: 0; color: var(--texto); font: 600 1.0625rem/1.25 "Sora", sans-serif; } .pessoa__email { margin: 0.1rem 0 0; overflow: hidden; color: var(--texto-3); font: 400 0.8125rem/1.3 "Poppins", sans-serif; text-overflow: ellipsis; white-space: nowrap; } .pessoa__campos { display: grid; gap: 0.9rem; grid-template-columns: 1fr 1fr; padding: 1.25rem; overflow-y: auto; } .pessoa__campo { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; } .pessoa__campo--largo { grid-column: 1 / -1; } .pessoa__rotulo { color: var(--texto-2); font: 500 0.8125rem/1.2 "Poppins", sans-serif; } .pessoa__entrada { width: 100%; padding: 0.55rem 0.7rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto); font: 400 0.875rem/1.3 "Poppins", sans-serif; } .pessoa__entrada:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; } .pessoa__dica { color: var(--texto-4); font: 400 0.75rem/1.4 "Poppins", sans-serif; } .pessoa__caixa { display: flex; align-items: center; gap: 0.5rem; grid-column: 1 / -1; color: var(--texto-2); font: 400 0.875rem/1.3 "Poppins", sans-serif; cursor: pointer; } .pessoa__caixa input { width: 16px; height: 16px; accent-color: var(--laranja); } .pessoa__rodape { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1.25rem 1.1rem; border-top: 1px solid var(--borda-suave); } .pessoa__aviso { margin: 0; color: var(--texto-3); font: 400 0.8125rem/1.3 "Poppins", sans-serif; } .pessoa__aviso--erro { color: var(--erro-texto); } .pessoa__acoes { display: flex; flex-shrink: 0; gap: 0.5rem; } .pessoa__botao { padding: 0.55rem 1.05rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); font: 500 0.875rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .pessoa__botao:hover { border-color: var(--texto-3); color: var(--texto); } .pessoa__botao--principal { border-color: var(--laranja); background: var(--laranja); color: #fff; } .pessoa__botao--principal:hover { border-color: var(--laranja-forte); background: var(--laranja-forte); color: #fff; } .pessoa__botao--perigo { border-color: var(--erro-texto); color: var(--erro-texto); } .pessoa__botao--perigo:hover { border-color: var(--erro-texto); background: var(--erro-fundo); color: var(--erro-texto); } .pessoa__botao:active { transform: translateY(1px); } .pessoa__botao:disabled { border-color: #d4d4d8; background: #d4d4d8; color: #71717a; cursor: not-allowed; transform: none; } /*VOLTAR AO QUADRO: no topo, ao lado do perfil.*/ .painel-voltar { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; border-radius: 8px; color: #fff; font: 500 0.8125rem/1.2 "Poppins", sans-serif; text-decoration: none; transition: background-color 0.15s ease; } .painel-voltar:hover { background: rgba(255, 255, 255, 0.16); } /* ========================================================================== EDITAR/CRIAR ITEM SIMPLES (unidade, setor, categoria, texto rápido) Mesmo vocabulario visual do dialog de pessoa (.pessoa__campo, .pessoa__entrada, .pessoa__rodape, .pessoa__botao) — so o cabecalho e o tamanho mudam, por ser um formulario bem menor (1-2 campos). ========================================================================== */ .item-simples { width: min(420px, 94vw); padding: 0; border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); color: var(--texto); /*Mesmo padrao do .pessoa/.detalhe: leve escala na entrada, allow-discrete pra animar a saida antes do display:none tirar o dialog da tela.*/ transition: opacity 0.18s ease, transform 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; opacity: 1; transform: scale(1); } .item-simples::backdrop { background: rgba(20, 20, 22, 0.45); transition: background-color 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; } @starting-style { .item-simples[open] { opacity: 0; transform: scale(0.96); } .item-simples[open]::backdrop { background-color: transparent; } } @media (prefers-reduced-motion: reduce) { .item-simples { transition: none; } } .item-simples__conteudo { display: flex; flex-direction: column; max-height: 88dvh; } .item-simples__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1.1rem 1.25rem; border-bottom: 1px solid var(--borda-suave); } .item-simples__titulo { margin: 0; color: var(--texto); font: 600 1.0625rem/1.25 "Sora", sans-serif; } .item-simples__campos { display: flex; flex-direction: column; gap: 0.9rem; padding: 1.25rem; overflow-y: auto; } .item-simples__textarea { min-height: 6.5rem; resize: vertical; line-height: 1.5; } /* ========================================================================== ABA ANALISE: FILTRO DE PERIODO, CARDS DE NUMERO, GRAFICOS ========================================================================== */ /*AGRUPA O SELETOR DE PERIODO E O BOTAO DE FILTRO no topo da secao — os dois ficam lado a lado, afetando a mesma consulta compartilhada por todas as sub-abas.*/ .analise-topo-acoes { display: flex; flex-shrink: 0; gap: 0.5rem; } /*SELETOR DE PERIODO: botao + popover (atalhos + calendario), padrao shadcn/ui do projeto (ver docs/preferencias.md) — superficie clara, borda 1px discreta, radius generoso, sombra que aparece so no popover aberto (o botao fechado fica quieto).*/ .periodo-seletor { position: relative; flex-shrink: 0; } .periodo-seletor__botao { display: flex; align-items: center; gap: 0.5rem; /*MESMA ALTURA DO BOTAO DE FILTRO (.painel-icone-botao, 2.75rem) — os dois ficam lado a lado no topo da Analise; sem essa altura fixa o botao de periodo (padding + linha de texto) ficava uns 10px mais baixo, dando a impressao de desalinhado/desconfigurado.*/ height: 2.75rem; box-sizing: border-box; padding: 0 0.85rem; border: 1px solid var(--borda); border-radius: 10px; background: var(--superficie); color: var(--texto); font: 500 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .periodo-seletor__botao:hover { border-color: var(--realce-borda); background: var(--realce); } .periodo-seletor__botao[aria-expanded="true"] { border-color: var(--laranja); background: var(--realce); } .periodo-seletor__seta { color: var(--texto-3); transition: transform 0.15s ease; } .periodo-seletor__botao[aria-expanded="true"] .periodo-seletor__seta { transform: rotate(180deg); } .periodo-painel { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 5; display: flex; width: 30rem; max-width: calc(100vw - 2rem); border: 1px solid var(--borda); border-radius: 14px; background: var(--superficie); box-shadow: 0 14px 34px rgba(26, 26, 26, 0.16); overflow: hidden; } .periodo-painel__atalhos { display: flex; flex-direction: column; flex-shrink: 0; gap: 0.15rem; width: 9.5rem; padding: 0.75rem; border-right: 1px solid var(--borda); } .periodo-atalho { padding: 0.5rem 0.65rem; border: 0; border-radius: 8px; background: none; color: var(--texto-2); font: 500 0.8125rem/1.2 "Poppins", sans-serif; text-align: left; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .periodo-atalho:hover { background: var(--realce); color: var(--laranja-forte); } .periodo-atalho--marcado { background: var(--realce); color: var(--laranja-forte); font-weight: 600; } .periodo-painel__calendario { display: flex; flex-direction: column; flex: 1; min-width: 0; padding: 0.9rem 1rem 1rem; } .periodo-calendario__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; } .periodo-calendario__titulo { color: var(--texto); font: 600 0.8125rem/1.2 "Sora", sans-serif; text-transform: capitalize; } .periodo-calendario__seta { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .periodo-calendario__seta:hover { border-color: var(--realce-borda); color: var(--laranja-forte); } .periodo-calendario__semana { display: grid; grid-template-columns: repeat(7, 1fr); margin-bottom: 0.3rem; color: var(--texto-4); font: 500 0.6875rem/1.2 "Poppins", sans-serif; text-align: center; text-transform: uppercase; } .periodo-calendario__dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.15rem; } .periodo-dia { display: flex; align-items: center; justify-content: center; aspect-ratio: 1; border: 0; border-radius: 8px; background: none; color: var(--texto); font: 500 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .periodo-dia:hover { background: var(--realce); } /*FORA DO MES ATUAL: ainda clicavel (pertence a semana visivel), so mais apagado — mesma ideia de qualquer calendario de referencia.*/ .periodo-dia--fora { color: var(--texto-4); } /*HOJE: so um contorno discreto, pra nao competir visualmente com o inicio/fim do range escolhido (esses usam fundo solido).*/ .periodo-dia--hoje { box-shadow: inset 0 0 0 1px var(--laranja); } /*DENTRO DO RANGE ESCOLHIDO: fundo laranja claro continuo, sem separar um dia do outro — e o que faz o range parecer uma faixa, nao uma lista de dias soltos marcados.*/ .periodo-dia--no-range { border-radius: 0; background: var(--realce); } .periodo-dia--inicio, .periodo-dia--fim { background: var(--laranja); color: #fff; font-weight: 600; } .periodo-dia--inicio { border-radius: 8px 0 0 8px; } .periodo-dia--fim { border-radius: 0 8px 8px 0; } /*RANGE DE UM DIA SO: inicio e fim sao o mesmo dia, os dois cantos arredondam.*/ .periodo-dia--inicio.periodo-dia--fim { border-radius: 8px; } .periodo-painel__acoes { display: flex; justify-content: flex-end; gap: 0.5rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--borda); } .periodo-botao { padding: 0.5rem 1rem; border: 1px solid var(--borda); border-radius: 8px; background: var(--superficie); color: var(--texto-2); font: 500 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .periodo-botao:hover { border-color: var(--realce-borda); color: var(--texto); } .periodo-botao--principal { border-color: var(--laranja); background: var(--laranja); color: #fff; } .periodo-botao--principal:hover { border-color: var(--laranja-forte); background: var(--laranja-forte); color: #fff; } .periodo-botao--principal:disabled { border-color: var(--borda); background: var(--borda); color: var(--texto-4); cursor: not-allowed; } .analise-cards { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.75rem; margin-bottom: 1.5rem; } .analise-card { display: flex; flex-direction: column; gap: 0.5rem; padding: 1rem 1.1rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); } .analise-card__rotulo { color: var(--texto-3); font: 500 0.75rem/1.3 "Poppins", sans-serif; } .analise-card__valor { color: var(--texto); font: 700 1.625rem/1.1 "Sora", sans-serif; } /*CARDS DE VARIACAO (Acompanhamento): sobem/descem sao BONS ou RUINS dependendo do que esta sendo medido (mais chamados = neutro/ruim, SLA menor = bom), entao a cor vem de uma classe que o JS decide caso a caso, nao so da direcao da seta. Vermelho/verde aqui sao SEMANTICOS (bom/ruim), diferentes do vermelho/cinza normal-x-urgente usado nos graficos das outras sub-abas — nunca confundir os dois significados.*/ .analise-card__valor--alta { color: #b02a2a; } .analise-card__valor--baixa { color: #1a7a4a; } .analise-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } /*ACOMPANHAMENTO: os 2 graficos de linha ficam EMPILHADOS, nao lado a lado como as outras sub-abas — cada um e uma serie de 12 meses, larga o suficiente pra precisar da largura toda (mesmo layout do print de referencia do Power BI).*/ .analise-graficos--linha { grid-template-columns: 1fr; } .analise-grafico { display: flex; flex-direction: column; min-width: 0; padding: 1.25rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie); } .analise-grafico__titulo { margin: 0 0 1rem; color: var(--texto); font: 600 0.9375rem/1.3 "Sora", sans-serif; } .analise-grafico__caixa { position: relative; min-width: 0; } /*ALTURA FIXA: O CHART.JS PRECISA DE UM CONTAINER COM TAMANHO DEFINIDO — sem isso o canvas cresce sem limite a cada redesenho (responsive:true mede o pai, entao o pai tem que ter uma altura real, nao so o que o conteudo pede).*/ .analise-grafico__caixa--barra { height: 22rem; } .analise-grafico__caixa--pizza { height: 22rem; } /*GRAFICO DE LINHA (Acompanhamento): um pouco mais alto que os de barra — com 12 pontos e o valor anotado em cima de cada um (ver plugin desenharValoresDaLinha em painel.js), precisa de folga vertical extra pra os numeros nao ficarem colados na borda do card.*/ .analise-grafico__caixa--linha { height: 18rem; } /*3 CARDS EM VEZ DE 5: a sub-aba Unidades tem um card por destaque (mais chamados / mais urgencia / maior SLA), nao um numero por metrica como o Resumo — a mesma grade de 5 colunas ficaria com espacos vazios.*/ .analise-cards--3 { grid-template-columns: repeat(3, 1fr); } /*O VALOR AQUI E "Nome da unidade (123)" — bem mais comprido que um numero seco como nos cards do Resumo (mesma fonte, mesmo tamanho, so que um quebra em duas linhas e o outro nao). Sem isso o texto do Resumo e o de Unidades pareciam ter TAMANHOS diferentes lado a lado, quando na verdade so a QUANTIDADE de texto diferia. Reduzido aqui pra caber numa linha nos casos comuns e continuar legivel quando quebra.*/ .analise-cards--3 .analise-card__valor { font-size: 1.25rem; line-height: 1.3; } /*4 CARDS: so a sub-aba Atendentes tem esse numero (as outras tem 3 ou 5) — volume, urgencia, SLA e primeira resposta juntos.*/ .analise-cards--4 { grid-template-columns: repeat(4, 1fr); } .analise-cards--4 .analise-card__valor { font-size: 1.25rem; line-height: 1.3; } /*GRAFICO DE COLUNA (em pe): so a sub-aba Atendentes usa esse formato — as outras sub-abas usam barra deitada (indexAxis: "y"). Mesma altura fixa que .analise-grafico__caixa--barra, Chart.js precisa de um container com tamanho definido pra nao crescer sem limite.*/ .analise-grafico__caixa--coluna { height: 22rem; } /*FAIXA DE CONTEXTO NA EXPORTACAO EM PDF: inserida na FRENTE da sub-aba so durante a captura do html2canvas (ver capturarSubaba em painel.js) e removida logo depois — nunca aparece pro usuario na tela normal, so existe pelo tempo de tirar a "foto". Da pra saber ANALISE/qual sub-aba/ qual periodo so olhando o PDF depois, sem precisar reabrir o Painel.*/ .analise-exportar-faixa { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--laranja); } .analise-exportar-faixa h1 { margin: 0 0 0.25rem; color: var(--texto); font: 700 1.25rem/1.3 "Sora", sans-serif; } .analise-exportar-faixa p { margin: 0; color: var(--texto-3); font: 500 0.8125rem/1.3 "Poppins", sans-serif; } /*SUB-ABAS DA ANALISE: navegacao no RODAPE da secao (pedido do usuario), cada uma um pedaco do relatorio de Power BI sendo substituido aos poucos. Visual de "pilulas" — mais leve que .painel-nav__item (que e pensado pra navegacao vertical principal), pra nao competir com ela. Vive dentro de um cartao proprio (fundo + borda + padding nos 4 lados), nao so uma linha fina em cima — sem isso a separacao ficava fraca demais perto dos cards de grafico logo acima, que ja tem sua propria borda visivel (a "linha" some visualmente entre os dois).*/ .analise-subabas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--borda); border-radius: 12px; background: var(--superficie-2); } .analise-subaba { padding: 0.5rem 1rem; border: 1px solid var(--borda); border-radius: 999px; background: var(--superficie); color: var(--texto-2); font: 500 0.8125rem/1.2 "Poppins", sans-serif; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .analise-subaba:hover { border-color: var(--realce-borda); color: var(--texto); } .analise-subaba--atual, .analise-subaba--atual:hover { border-color: var(--laranja); background: var(--laranja); color: #fff; } /* ========================================================================== TELAS ESTREITAS ========================================================================== */ @media (max-width: 860px) { .painel { grid-template-columns: 1fr; /*SEM ISSO O GRID DE UMA COLUNA SO VIRA UMA UNICA LINHA IMPLICITA: os dois itens (nav e conteudo) disputam a MESMA linha e o Grid estica ambos ate a altura do mais alto — foi isso que deixava a faixa de abas gigante (270px) quando o conteudo abaixo era alto. Duas linhas explicitas: a primeira do tamanho da faixa de abas (auto), a segunda pega o resto (1fr) e e quem rola por dentro.*/ grid-template-rows: auto 1fr; } /*O menu vira uma faixa de abas em cima do conteudo.*/ .painel-nav { flex-direction: row; align-items: center; gap: 0.35rem; padding: 0.6rem 0.75rem; border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, 0.22); overflow-x: auto; } .painel-nav__item { width: auto; flex-shrink: 0; white-space: nowrap; } /*RECOLHER SO FAZ SENTIDO NA COLUNA VERTICAL — numa faixa horizontal de abas nao ha "coluna" pra apertar, entao some junto com o espacador.*/ .painel-nav__espaco, .painel-nav__colapsar { display: none; } /*O rotulo do grupo nao cabe numa faixa horizontal de abas; o divisor vertical fininho substitui a linha "---- Portal ----" nesse formato.*/ .painel-nav__grupo-titulo { display: none; } .painel-nav__divisor { width: 1px; height: 1.75rem; margin: 0 0.15rem; flex-shrink: 0; } .painel__conteudo { padding: 1.1rem 1rem; } /*O rotulo do icone some (fica so o icone); o painel do dropdown nao pode encostar na borda da tela.*/ .painel-dropdown__painel { right: -1rem; width: calc(100vw - 2rem); } .pessoa__campos { grid-template-columns: 1fr; } /*TITULO + ACAO DA ABA (botao Novo, filtro de periodo) NAO CABEM LADO A LADO EM TELA ESTREITA: mesma regra pra qualquer aba que use esse topo, nao so a Analise — sem isso o titulo espreme contra o que vier depois.*/ .painel-aba__topo { flex-wrap: wrap; } .analise-topo-acoes { flex-wrap: wrap; width: 100%; } .periodo-seletor { flex: 1; min-width: 0; } .periodo-seletor__botao { width: 100%; justify-content: space-between; } /*O POPOVER LARGO (30rem, atalhos + calendario lado a lado) nao cabe na tela — empilha em vez de encolher, senao o calendario fica espremido demais pra clicar num dia.*/ .periodo-painel { flex-direction: column; width: calc(100vw - 2rem); right: 0; } .periodo-painel__atalhos { flex-direction: row; flex-wrap: wrap; width: 100%; border-right: 0; border-bottom: 1px solid var(--borda); } .analise-cards { grid-template-columns: repeat(2, 1fr); } .analise-graficos { grid-template-columns: 1fr; } } /*MOVIMENTO REDUZIDO: sem deslocamento no clique.*/ @media (prefers-reduced-motion: reduce) { .painel-filtro:active, .painel-grupo__adicionar:active, .pessoa__botao:active { transform: none; } }