/* ========================================================================== PORTAL DE CHAMADOS: QUADRO KANBAN O topo, o menu de perfil e o avatar vem de index.css. Aqui fica so o quadro, as colunas e os cards. ========================================================================== */ /*ESCONDER DE VERDADE O QUE NASCE COM [hidden]. Sem esta regra, uma classe com display explicito (.quadro-menu__item { display: flex }) vence o atributo nativo na mesma especificidade, e o item continua na tela. Vale para o item "Painel" do menu de 3 pontinhos, que so o admin pode ver: o main.js tira o hidden de quem pode — sem isso, aparecia para todo mundo. (index.css ja traz a regra, mas este arquivo carrega depois e as classes daqui venceriam.)*/ [hidden] { display: none !important; } /* ========================================================================== TEMA O escuro e so desta tela: o toggle do topo grava [data-tema] no , e aqui tudo que muda de cor le uma variavel em vez de um hex fixo. Assim o tema escuro redefine ~20 tokens em vez de repetir ~80 seletores. ========================================================================== */ body.portal-pagina { --superficie: #fff; /*CARD, MODAL: O QUE FICA POR CIMA*/ --superficie-2: #f4f4f5; /*FILA, SELO, CAMPO: O FUNDO DE APOIO*/ --superficie-3: #fafafa; /*LATERAL DE ANEXOS, CAIXA DE ESCRITA*/ --borda: #e5e5e5; --borda-suave: #ececec; --texto: #1a1a1a; --texto-2: #5a5a5a; /*APOIO: NUMERO DO TICKET, CONTADOR*/ --texto-3: #8a8a8a; /*ROTULO, ICONE APAGADO*/ --texto-4: #a1a1aa; /*VAZIO, CARIMBO DE HORA*/ --laranja: #dd5b12; --realce: #fdf3ec; /*ALVO DE SOLTURA, CARD SOB O MOUSE*/ --realce-borda: #f0c3a3; --avatar-fundo: #f0dcce; --avatar-texto: #a8794f; --balao-deles: #e4e4e5; /*SOLICITANTE*/ --balao-nosso: #facfc0; /*EQUIPE*/ --balao-texto: #1a1a1a; /*OS DOIS BALOES SAO CLAROS NOS DOIS TEMAS*/ --sombra-card: 0 1px 2px rgba(26, 26, 26, 0.05); --sombra-card-alta: 0 6px 16px rgba(26, 26, 26, 0.09); /*ETIQUETAS, STATUS E ERRO: CORES COM SIGNIFICADO. NO ESCURO O FUNDO FICA ESCURO E O TEXTO CLARO, SENAO O CONTRASTE SOME.*/ --etiqueta-urgente-fundo: #fdeceb; --etiqueta-urgente-borda: #f3bcbc; --etiqueta-urgente-texto: #b02a2a; --etiqueta-prioridade-fundo: #fff4e0; --etiqueta-prioridade-borda: #f0d199; --etiqueta-prioridade-texto: #9a5b00; --etiqueta-normal-fundo: #f0f0f1; --etiqueta-normal-texto: #6b6b70; /*ABERTO cinza (neutro, ainda sem urgencia), AGUARDANDO RETORNO amarelo (atencao, bola com o usuario), USUARIO RESPONDEU vermelho (bola com a equipe, precisa de acao), FECHADO verde (resolvido).*/ --status-aberto: #6b6b70; --status-aguardando: #9a5b00; --status-respondeu: #b02a2a; --status-fechado: #2f9e44; --erro-fundo: #fdeceb; --erro-borda: #f3bcbc; --erro-texto: #b02a2a; --selo-sim-fundo: #fde8dc; --selo-sim-texto: #b8460c; --laranja-forte: #c24f00; } /*ESCURO: AS DUAS CORES QUE O USUARIO PEDIU SAO --superficie-2 (fila) E --superficie (card). O degrade laranja do quadro fica como esta.*/ [data-tema="escuro"] body.portal-pagina { /*AVISA O NAVEGADOR: BARRA DE ROLAGEM E CONTROLES NATIVOS NO ESCURO. Sem isto a barra do modal fica branca e brilha no meio do escuro.*/ color-scheme: dark; --superficie: #242529; --superficie-2: #101204; --superficie-3: #1a1b1f; --borda: #34353a; --borda-suave: #2c2d31; --texto: #ededed; --texto-2: #a8a8ad; --texto-3: #8f8f96; --texto-4: #76767d; --realce: #2f3036; --realce-borda: #7a4a2a; --avatar-fundo: #4a3527; --avatar-texto: #e0b894; /*NO ESCURO A SOMBRA NAO APARECE; QUEM SEPARA O CARD DO FUNDO E A BORDA*/ --sombra-card: none; --sombra-card-alta: 0 6px 16px rgba(0, 0, 0, 0.45); /*MESMOS SIGNIFICADOS, INVERTIDOS: FUNDO ESCURO DESSATURADO E TEXTO CLARO*/ --etiqueta-urgente-fundo: #3d1f1f; --etiqueta-urgente-borda: #6b3232; --etiqueta-urgente-texto: #f1a3a3; --etiqueta-prioridade-fundo: #3a2c14; --etiqueta-prioridade-borda: #6b5323; --etiqueta-prioridade-texto: #e8bd73; --etiqueta-normal-fundo: #2f3036; --etiqueta-normal-texto: #a8a8ad; --status-aberto: #a8a8ad; --status-aguardando: #e8bd73; --status-respondeu: #f1a3a3; --status-fechado: #5fc77c; --erro-fundo: #3d1f1f; --erro-borda: #6b3232; --erro-texto: #f1a3a3; --selo-sim-fundo: #4a2a18; --selo-sim-texto: #f0a877; --laranja-forte: #e86a20; } /*A PAGINA TOMA A TELA INTEIRA E NAO ROLA: QUEM ROLA E O QUADRO (na horizontal) E CADA COLUNA (na vertical). index.css so poe min-height no body, e sem altura fechada o flex: 1 do .portal nao tem de onde esticar.*/ body.portal-pagina { height: 100dvh; overflow: hidden; } /*MESMO FUNDO DA FAIXA DA HOME, INCLUSIVE A RESPIRACAO LENTA*/ .portal { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 1.25rem 1.25rem 0; background: radial-gradient( circle at top left, #5e141d 0%, #dd5b12 100% ); background-size: 250% 500%; animation: destaque-fundo-respira 20s ease-in-out infinite; /*ZOOM DO QUADRO: SO O QUE ESTA ABAIXO DO TOPO. O VALOR VEM DOS BOTOES DO TOPO (portal.js); O flex: 1 CONTINUA INDO ATE O RODAPE EM QUALQUER ZOOM — conferido no navegador.*/ zoom: var(--zoom-portal, 1); } /*FUNDO PROPRIO: O JS poe backgroundImage inline quando ha fundo_path. O tamanho/animacao do degrade (feitos para um gradiente, nao para uma foto) tem que sair, senao a imagem do usuario fica zunindo e distorcida.*/ /*PLANO DE FUNDO PROPRIO: CAMADA FIXA ATRAS DO QUADRO, FORA DO .portal. Assim o zoom do quadro nao mexe nela, e a imagem cobre toda a area abaixo do topo (84px) na resolucao em que foi enviada — cover preenche sem distorcer, cortando so o que sobra. Entra com fade depois de carregada inteira, para nunca aparecer desenhando em pedacos.*/ .portal-fundo { position: fixed; inset: 84px 0 0 0; z-index: 0; background-color: #1a1a1a; background-position: center; background-repeat: no-repeat; background-size: cover; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } .portal-fundo--visivel { opacity: 1; } /*COM FUNDO PROPRIO O QUADRO FICA TRANSPARENTE E POR CIMA DA CAMADA*/ .portal--fundo-proprio { position: relative; z-index: 1; background: transparent; animation: none; } @media (prefers-reduced-motion: reduce) { .portal-fundo { transition: none; } } /*BARRA DO QUADRO (titulo, busca, filtros, menu): FAIXA ESCURA TRANSLUCIDA DE PONTA A PONTA, COMO NO TRELLO. O plano de fundo pode ser qualquer foto, clara ou escura; o texto e os botoes sao brancos, entao a faixa garante contraste sem esconder o fundo. As margens negativas anulam o padding do .portal para a faixa encostar nas bordas.*/ .portal__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-shrink: 0; /*backdrop-filter cria uma camada propria: sem position + z-index, a busca, os filtros e o menu que abrem daqui poderiam ficar atras de um card do quadro (o card sobe com transform no hover).*/ position: relative; z-index: 6; margin: -1.25rem -1.25rem 0.875rem; padding: 0.625rem 1.25rem; background-color: rgba(0, 0, 0, 0.28); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); /*O texto branco ganha uma sombra leve: em foto muito clara, ainda le.*/ text-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .portal__identificacao { min-width: 0; } /*A SOMBRA DO TEXTO E SO PARA O BRANCO SOBRE O FUNDO: os paineis que abrem do cabecalho sao claros, com texto escuro, e herdariam a sombra.*/ .busca__resultados, .quadro-filtro__painel, .quadro-menu__painel { text-shadow: none; } /*BUSCA E MENU ENCOSTADOS, O PAR INTEIRO NA BORDA DIREITA*/ .portal__ferramentas { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; } .portal__titulo { margin: 0 0 0.125rem; font-family: "Sora", system-ui, sans-serif; font-size: 1.125rem; font-weight: 600; /*SOBRE O DEGRADE LARANJA: BRANCO NOS DOIS TEMAS*/ color: #fff; } .portal__subtitulo { margin: 0; font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); } /* ========================================================================== BUSCA ========================================================================== */ .busca { position: relative; flex-shrink: 0; width: 20rem; } .busca__icone { position: absolute; top: 50%; left: 0.625rem; transform: translateY(-50%); color: rgba(255, 255, 255, 0.65); pointer-events: none; } .busca__campo { width: 100%; box-sizing: border-box; padding: 0.4375rem 0.625rem 0.4375rem 2rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background-color: rgba(255, 255, 255, 0.12); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; /*SOBRE O DEGRADE LARANJA: BRANCO NOS DOIS TEMAS*/ color: #fff; transition: background-color 0.2s ease, border-color 0.2s ease; } .busca__campo::placeholder { color: rgba(255, 255, 255, 0.6); } .busca__campo:focus { outline: none; border-color: rgba(255, 255, 255, 0.5); background-color: rgba(255, 255, 255, 0.18); } /*O X NATIVO DO type=search NAO COMBINA COM O CAMPO ESCURO*/ .busca__campo::-webkit-search-cancel-button { appearance: none; } /*RESULTADOS: LISTA SUSPENSA SOBRE O QUADRO*/ .busca__resultados { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 5; width: 24rem; max-height: 22rem; padding: 0.3125rem; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); box-shadow: 0 12px 32px rgba(26, 26, 26, 0.22); overflow-y: auto; } .busca__titulo { margin: 0.25rem 0.4375rem 0.375rem; font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--texto-4); } .busca__item { display: flex; align-items: flex-start; gap: 0.5rem; width: 100%; padding: 0.4375rem; border: 0; border-radius: 5px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: background-color 0.15s ease; } .busca__item:hover, .busca__item:focus-visible { outline: none; background-color: var(--superficie-2); } .busca__item-icone { flex-shrink: 0; margin-top: 0.125rem; color: var(--texto-4); } .busca__item-texto { min-width: 0; } .busca__item-titulo { display: block; font-size: 0.75rem; color: var(--texto); } .busca__item-contexto { display: block; margin-top: 0.0625rem; font-size: 0.625rem; color: var(--texto-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*TITULO E SELO "FINALIZADO" NA MESMA LINHA*/ .busca__item-linha { display: flex; align-items: center; gap: 0.375rem; min-width: 0; } .busca__item-linha .busca__item-titulo { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /*CHAMADO FECHADO NA BUSCA: CINZA, COM SELO. Continua clicavel — abre o detalhe, de onde da para reabrir.*/ .busca__item--fechado { background-color: var(--superficie-2); } .busca__item--fechado .busca__item-titulo { color: var(--texto-3); } .busca__item--fechado .busca__item-icone { color: var(--status-fechado); } .busca__item--fechado:hover, .busca__item--fechado:focus-visible { background-color: var(--borda-suave); } .busca__item-selo { flex-shrink: 0; padding: 0.0625rem 0.3125rem; border-radius: 3px; background-color: var(--status-fechado); font-size: 0.5625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #fff; } /*ENTRE OS DOIS GRUPOS UM RESPIRO, PARA O PRIMEIRO FECHADO NAO GRUDAR*/ .busca__item:not(.busca__item--fechado) + .busca__item--fechado { margin-top: 0.25rem; } .busca__vazio { padding: 0.75rem 0.4375rem; font-size: 0.75rem; text-align: center; color: var(--texto-3); } /*CARD QUE VEIO DA BUSCA: PISCA PARA O OLHO ACHAR ONDE ELE ESTA*/ .card--destacado { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.28); } /*ERRO DE CARGA: OCUPA O LUGAR DO QUADRO*/ .portal__erro { display: none; margin: 0 0 1.25rem; padding: 0.875rem 1rem; border: 1px solid var(--erro-borda); border-radius: 8px; background-color: var(--erro-fundo); font-size: 0.875rem; color: var(--erro-texto); } .portal__erro--visivel { display: block; } /* ========================================================================== QUADRO E COLUNAS ========================================================================== */ /*O QUADRO ROLA NA HORIZONTAL; CADA COLUNA ROLA NA VERTICAL POR DENTRO. align-items: flex-start faz a coluna ter a altura do conteudo, em vez de esticar ate o fim da tela mesmo quase vazia. flex: 1 faz a area de rolagem ir ate o rodape da tela, e nao parar onde as colunas terminam — assim a barra (desenhada por nos, la embaixo) fica de fora a fora em vez de flutuar no meio.*/ .portal__quadro { flex: 1; display: flex; align-items: flex-start; gap: 0.625rem; min-height: 0; padding-bottom: 0.75rem; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; cursor: grab; } /*SEGURANDO O FUNDO PARA PUXAR O QUADRO*/ .portal__quadro--puxando { cursor: grabbing; user-select: none; } /*BARRA NATIVA ESCONDIDA: a nossa e desenhada em .portal__barra*/ .portal__quadro::-webkit-scrollbar { display: none; } /*BARRA DE ROLAGEM PROPRIA: COLADA NO RODAPE, DE FORA A FORA, DISCRETA*/ .portal__barra { display: none; flex-shrink: 0; height: 0.375rem; margin: 0 -1.25rem; padding: 0 1.25rem 0.5rem; box-sizing: content-box; cursor: pointer; } .portal__barra--visivel { display: block; } /*TRILHO ESCURO TRANSLUCIDO: branco sumia em plano de fundo claro*/ .portal__barra-trilho { position: relative; height: 100%; border-radius: 999px; background-color: rgba(0, 0, 0, 0.24); } .portal__barra-alca { position: absolute; top: 0; left: 0; height: 100%; min-width: 2.5rem; border-radius: 999px; background-color: rgba(255, 255, 255, 0.6); transition: background-color 0.2s ease; } .portal__barra:hover .portal__barra-alca, .portal__barra-alca--arrastando { background-color: rgba(255, 255, 255, 0.85); } .fila { display: flex; flex-direction: column; flex-shrink: 0; /*Mais larga desde que a letra do quadro cresceu (titulo 12 -> 14px): na largura antiga o titulo quebrava em tres linhas e cortava cedo.*/ width: 15.5rem; /*A COLUNA VAI ATE O FIM DO QUADRO, EM QUALQUER ZOOM. Antes a altura era calculada a partir da tela (100dvh / zoom - 11rem), e os 11rem de reserva escalavam junto com o zoom: em 130% a coluna terminava bem acima do rodape, deixando um vao; em 70% passava do ponto. 100% do quadro nao depende do zoom — o quadro ja e exatamente a area disponivel.*/ max-height: 100%; border: 1px solid var(--borda); border-radius: 9px; background-color: var(--superficie-2); /*O grab e do fundo do quadro; dentro da coluna o cursor volta ao normal*/ cursor: default; /*transform aqui e o recuo do FLIP (comAnimacaoFlip, portal.js) depois de trocar de lugar no drop — sem essa transition o navegador so aplicaria o transform:none final na hora, sem o recuo suave.*/ transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } /*COLUNA SOB O CARD ARRASTADO: FICA CLARO ONDE VAI SOLTAR*/ .fila--alvo { border-color: var(--laranja); background-color: var(--realce); } .fila__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-shrink: 0; padding: 0.5rem 0.5rem 0.375rem; } .fila__nome { margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 0.8125rem; font-weight: 600; line-height: 1.3; color: var(--texto); } .fila__contador { flex-shrink: 0; min-width: 1.375rem; padding: 0.0625rem 0.375rem; border-radius: 999px; background-color: var(--borda); font-size: 0.75rem; text-align: center; color: var(--texto-2); } /*CONTADOR + MENU DE 3 PONTINHOS, AGRUPADOS NA PONTA DIREITA DO TOPO — .fila__topo ja e space-between, entao so precisa desse wrapper pra virar um grupo em vez de dois itens soltos.*/ .fila__topo-acoes { display: flex; flex-shrink: 0; align-items: center; gap: 0.375rem; } /*O NOME DA LISTA E O "PEGADOR" DO ARRASTAR — draggable fica no
inteiro, entao o cursor muda so ali, nunca sobre os cards. O grab (mao aberta) da a mesma dica visual que o Trello usa pra "isto se arrasta".*/ .fila__topo { cursor: grab; } .fila__topo:active { cursor: grabbing; } /*DURANTE O ARRASTO: a coluna original fica soft, e um traco laranja marca onde ela vai cair quando soltar — mesma ideia visual do card--arrastando, mas na largura toda da coluna em vez do card.*/ .fila--arrastando { opacity: 0.4; } .fila--alvo-lista { outline: 2px dashed var(--laranja); outline-offset: 2px; } .fila__menu { position: relative; flex-shrink: 0; } .fila__menu-botao { display: flex; align-items: center; justify-content: center; width: 1.375rem; height: 1.375rem; border: 0; border-radius: 5px; background: none; color: var(--texto-3); cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } .fila__menu-botao:hover, .fila__menu-botao[aria-expanded="true"] { background-color: var(--borda); color: var(--texto); } .fila__menu-painel { position: absolute; top: calc(100% + 0.25rem); left: 0; z-index: 6; width: 13.5rem; padding: 0.3125rem; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); box-shadow: 0 12px 32px rgba(26, 26, 26, 0.22); /*A COLUNA TEM cursor:grab; O MENU E CONTEUDO NORMAL POR CIMA*/ cursor: default; } .fila__menu-titulo { margin: 0.125rem 0.5rem 0.375rem; font-family: "Sora", system-ui, sans-serif; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); } .fila__menu-item { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; padding: 0.5rem 0.5625rem; border: 0; border-radius: 6px; background: none; font-family: inherit; font-size: 0.75rem; color: var(--texto); text-align: left; cursor: pointer; } .fila__menu-item:hover { background-color: var(--superficie-2); } /*A MARCA DE SELECIONADO (ORDENACAO ATUAL): so aparece na opcao ativa*/ .fila__menu-item svg { flex-shrink: 0; color: var(--laranja); visibility: hidden; } .fila__menu-item--marcado svg { visibility: visible; } .fila__menu-divisor { display: block; height: 1px; margin: 0.3125rem 0.25rem; background-color: var(--borda-suave); } .fila__menu-item--perigo { color: var(--erro-texto); } .fila__menu-item--perigo:hover { background-color: var(--erro-fundo); } /* ========================================================================== ADICIONAR NOVA LISTA — botao/formulario no fim do quadro ========================================================================== */ .fila-nova { flex-shrink: 0; /*Mesma largura das colunas: o botao de nova lista e a coluna que ainda nao existe.*/ width: 15.5rem; } .fila-nova__botao { display: flex; align-items: center; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.625rem 0.75rem; border: 0; border-radius: 9px; background-color: rgba(255, 255, 255, 0.12); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; font-weight: 500; color: #fff; cursor: pointer; transition: background-color 0.15s ease; } .fila-nova__botao:hover { background-color: rgba(255, 255, 255, 0.2); } .fila-nova__form { box-sizing: border-box; padding: 0.625rem; border: 1px solid var(--borda); border-radius: 9px; background-color: var(--superficie-2); } .fila-nova__campo { width: 100%; box-sizing: border-box; padding: 0.5rem 0.625rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); font-family: inherit; font-size: 0.75rem; color: var(--texto); } .fila-nova__campo:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; } .fila-nova__acoes { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.5rem; } .fila-nova__salvar { padding: 0.4375rem 0.75rem; border: 0; border-radius: 6px; background-color: var(--laranja); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; color: #fff; cursor: pointer; } .fila-nova__salvar:hover { background-color: var(--laranja-forte); } .fila-nova__cancelar { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 0; border-radius: 6px; background: none; color: var(--texto-3); cursor: pointer; } .fila-nova__cancelar:hover { background-color: var(--superficie); color: var(--texto); } /*min-height GARANTE AREA DE SOLTURA MESMO NA FILA VAZIA*/ .fila__cards { display: flex; flex-direction: column; gap: 0.375rem; min-height: 3rem; margin: 0; padding: 0 0.375rem 0.5rem; list-style: none; overflow-y: auto; /*BARRA NATIVA ESCONDIDA: sem isso, o transform temporario do FLIP (comAnimacaoFlip, portal.js) no card solto faz a barra de rolagem do navegador aparecer e sumir num piscar durante os ~0.2s da animacao — o card recua de uma posicao que pode passar da borda do container antes de assentar. A rolagem continua funcionando (overflow-y:auto), so a barra visual nativa que some, mesmo padrao ja usado em .portal__quadro (linhas acima).*/ scrollbar-width: none; } .fila__cards::-webkit-scrollbar { display: none; } /*FILA SEM CHAMADO: O ESPACO CONTINUA ALI, SO QUE MUDO*/ .fila__vazia { padding: 0.375rem 0.25rem 0.5rem; font-size: 0.625rem; text-align: center; color: var(--texto-4); } /* ========================================================================== CARD DO CHAMADO ========================================================================== */ /*CARD ESTILO SHADCN, DENSIDADE TRELLO: o quadro real vai acumular dezenas de chamados por coluna, entao altura de card importa mais que respiro generoso. Borda fina, cantos moderados, badges compactos — e o status virou uma faixa full-width embaixo (nao um badge numa linha propria) pra economizar altura, no mesmo espirito do Trello.*/ .card { position: relative; display: flex; flex-direction: column; /*NAO ENCOLHE. Dentro da lista (flex em coluna) o card podia encolher, e com overflow: hidden o navegador preferia espremer todos os cards a rolar a lista: sobrava so a etiqueta, sem titulo, membro nem status. Acontecia sempre que a coluna tinha mais cards do que cabiam — e com zoom maior cabem menos, entao piorava ao dar zoom.*/ flex-shrink: 0; gap: 0.25rem; padding: 0.5rem 0.5625rem 0 0.6875rem; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); box-shadow: var(--sombra-card); cursor: grab; overflow: hidden; /*transform entra na lista para os cards DESLIZAREM ao abrir espaco no arrastar (comAnimacaoFlip, portal.js). Sem ele o FLIP deslocava o card e o devolvia na hora, sem transicao: o card pulava de lugar — era a "falta de animacao" ao mudar de coluna. Mesma curva do FLIP das colunas.*/ transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); } .card:hover { border-color: var(--realce-borda); box-shadow: var(--sombra-card-alta); } /*CARD SENDO ARRASTADO: VIRA O "LUGAR RESERVADO". Ele anda pela coluna junto com o mouse, entao e ele que mostra onde o card vai cair: apagado e com borda tracejada, le como um espaco vazio, nao como um card de verdade.*/ .card--arrastando { border-style: dashed; border-color: var(--laranja); box-shadow: none; opacity: 0.45; cursor: grabbing; } .card__etiquetas { display: flex; flex-wrap: wrap; gap: 0.25rem; } /*ETIQUETA COMO ERA ANTES DO REDESIGN SHADCN: so fundo solido, sem borda, cantos discretos — usuario preferiu esse aspecto ao pill com borda.*/ .card__etiqueta { padding: 0.125rem 0.375rem; border-radius: 3px; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .card__etiqueta--urgente { background-color: var(--etiqueta-urgente-fundo); color: var(--etiqueta-urgente-texto); } .card__etiqueta--prioridade { background-color: var(--etiqueta-prioridade-fundo); color: var(--etiqueta-prioridade-texto); } .card__etiqueta--normal { background-color: var(--etiqueta-normal-fundo); color: var(--etiqueta-normal-texto); } /*TITULO: O ELEMENTO DE MAIOR PESO DO CARD. O numero do ticket vem junto (tituloDoChamado ja formata "Categoria | Ticket-NNN" quando nao ha titulo proprio), entao nao tem span separado pro numero. Duas linhas no maximo — titulo maior que isso corta com reticencias, o resto do texto esta disponivel no detalhe.*/ .card__titulo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; margin: 0; font-size: 0.875rem; font-weight: 500; line-height: 1.35; color: var(--texto); } /*MEMBROS: FOTO + NOME DE QUEM ESTA ATENDENDO. SO OCUPA ESPACO QUANDO TEM ALGUEM NO CHAMADO — sem linha divisoria propria, o espacamento do card ja separa visualmente.*/ .card__membros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; } .card__membros:empty { display: none; margin: 0; } /*STATUS: FAIXA FULL-WIDTH NA BASE DO CARD, como o rotulo colorido do Trello — fundo solido (nao so 12% de opacidade: precisa ler bem numa faixa fina, nao so num badge) com `margin` negativa vazando ate a borda do card (compensa o padding do .card) e cantos inferiores arredondados acompanhando o card.*/ .card__status { display: flex; align-items: center; gap: 0.25rem; margin: 0.375rem -0.5625rem 0 -0.6875rem; padding: 0.25rem 0.6875rem; border-radius: 0 0 7px 7px; font-size: 0.6875rem; font-weight: 600; } .card__status::before { content: ""; width: 0.375rem; height: 0.375rem; border-radius: 50%; background-color: currentColor; } .card__status--aberto { background-color: color-mix(in srgb, var(--status-aberto) 14%, var(--superficie)); color: var(--status-aberto); } .card__status--aguardando { background-color: color-mix(in srgb, var(--status-aguardando) 14%, var(--superficie)); color: var(--status-aguardando); } .card__status--respondeu { background-color: color-mix(in srgb, var(--status-respondeu) 14%, var(--superficie)); color: var(--status-respondeu); } .card__status--fechado { background-color: var(--superficie-2); color: var(--status-fechado); } .card__membro-chip { display: inline-flex; align-items: center; gap: 0.375rem; min-width: 0; } /*COR DE DESTAQUE: FUNDO CLARO NA COR DA PESSOA (usuarios.cor_destaque), DO COMECO DA FOTO ATE O FIM DO NOME, NO CARD E NO DETALHE. color-mix clareia a cor misturando com o fundo do card — nao precisa salvar uma segunda cor, e no tema escuro o fundo escurece junto. O texto puxa um pouco da cor.*/ .membro--destaque { border-radius: 999px; background-color: color-mix(in srgb, var(--cor-destaque) 18%, var(--superficie)); color: color-mix(in srgb, var(--cor-destaque) 60%, var(--texto)); } /*NO CARD E NO PAINEL O ELEMENTO NAO TINHA RECHEIO: COM FUNDO, A FOTO ENCOSTA NA PONTA ESQUERDA E O NOME GANHA FOLGA NA DIREITA*/ .card__membro-chip.membro--destaque, .detalhe__config-pessoa.membro--destaque { padding: 0.125rem 0.625rem 0.125rem 0.125rem; } .membro--destaque .card__membro-nome, .membro--destaque .detalhe__config-nome { color: inherit; } .card__membro { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 2rem; height: 2rem; border-radius: 50%; background-color: var(--avatar-fundo); font-family: "Sora", system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--avatar-texto); overflow: hidden; } .card__membro-nome { font-size: 0.8125rem; font-weight: 500; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /*TERCEIRO NO CARD: mesmo circulo do avatar, icone de empresa em vez de foto — igual ao chip do detalhe, so no tamanho do card.*/ /*--superficie-2 e quase preto no escuro (pensada pra fundo de pagina, nao pra avatar dentro de um card ja escuro) — sem contraste com --superficie do card, o avatar do terceiro sumia. color-mix clareia so aqui.*/ .card__membro--terceiro { background-color: color-mix(in srgb, var(--texto-3) 20%, var(--superficie)); color: var(--texto-2); } /*A FOTO E A MESMA DE "Dados pessoais", SEJA NO CARD, NO CHIP DE MEMBRO OU NO BALAO DO CHAT — SO O TAMANHO MUDA POR CONTEXTO*/ .card__membro img, .detalhe__membro-avatar img { width: 100%; height: 100%; object-fit: cover; } /* ========================================================================== RESPONSIVO ========================================================================== */ /* ========================================================================== DETALHE DO CHAMADO ========================================================================== */ /* ja traz o fundo esmaecido, o Esc e o foco preso de graça*/ .detalhe { /*Mais larga desde que a letra da janela cresceu um degrau: na largura antiga a conversa e a coluna de dados ficavam apertadas.*/ width: min(68rem, 94vw); /*O ZOOM DO QUADRO (var(--zoom-portal)) ESCALA ESTE DIALOG JUNTO — mesmo o estando fora da arvore de renderizacao normal (showModal() o promove ao "top layer"), o zoom do ancestral .portal ainda se propaga visualmente nele. NAO declarar zoom aqui de novo: duplicaria o fator (visto no navegador — 1.5 do pai x 1.5 daqui = escala de facto 2.16). dvh mede a tela real, nao o quadro — sem dividir, 88dvh vira maior que a tela quando o zoom passa de 100% e o topo do modal e cortado.*/ max-height: calc(88dvh / var(--zoom-portal, 1)); padding: 0; border: 0; border-radius: 12px; background-color: var(--superficie); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; /*CHEGA COMO MATERIAL, NAO SO UM FADE: opacidade + leve escala junto. allow-discrete deixa a transicao rodar antes do display:none sumir o elemento (senao nao haveria tempo de anima-lo saindo).*/ transition: opacity 0.18s ease, transform 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; opacity: 1; transform: scale(1); } .detalhe::backdrop { background-color: rgba(16, 10, 8, 0.62); transition: background-color 0.18s ease, overlay 0.18s allow-discrete, display 0.18s allow-discrete; } /*ESTADO INICIAL NO MOMENTO DE ABRIR (fecha some direto — @starting-style so se aplica a entrada, entao a saida fica no navegador).*/ @starting-style { .detalhe[open] { opacity: 0; transform: scale(0.96); } .detalhe[open]::backdrop { background-color: transparent; } } .detalhe__conteudo { display: flex; flex-direction: column; /*Mesma conta do .detalhe: zoom nao herda, dvh mede a tela real — sem dividir aqui, o conteudo interno estoura o container pai (que ja esta dividido) e o dialog cresce alem do que o max-height dele permite.*/ max-height: calc(88dvh / var(--zoom-portal, 1)); } .detalhe__topo { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-shrink: 0; padding: 0.75rem 0.875rem; border-bottom: 1px solid var(--borda-suave); } /*FILA ATUAL: O MESMO "INBOX" QUE APARECE NO TOPO DO CARTAO DO TRELLO*/ .detalhe__fila { padding: 0.1875rem 0.5rem; border-radius: 4px; background-color: var(--superficie-2); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-2); } .detalhe__fechar { display: flex; padding: 0.25rem; border: 0; border-radius: 5px; background: none; color: var(--texto-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .detalhe__fechar:hover { background-color: var(--superficie-2); color: var(--texto); } .detalhe__corpo { display: grid; grid-template-columns: 1fr 22rem; min-height: 0; overflow: hidden; } .detalhe__principal { padding: 1.125rem 1.25rem 1.5rem; overflow-y: auto; } .detalhe__titulo { margin: 0 0 1.25rem; padding: 0.25rem 0.4375rem; border: 1px solid transparent; border-radius: 5px; font-family: "Sora", system-ui, sans-serif; font-size: 1.3125rem; font-weight: 600; line-height: 1.35; color: var(--texto); } /*CAMPOS EDITAVEIS SO MOSTRAM QUE SAO EDITAVEIS QUANDO O MOUSE CHEGA PERTO*/ .detalhe__titulo:hover, .detalhe__descricao:hover { border-color: var(--borda); } .detalhe__titulo:focus, .detalhe__descricao:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.15); } /*DADOS DO CHAMADO: GRADE DE ROTULO EM CIMA, VALOR EMBAIXO*/ /*DUAS COLUNAS FIXAS: COM auto-fit A ULTIMA LINHA SOBRAVA CELULA VAZIA, QUE APARECIA COMO UM BURACO CINZA NO MEIO DA FICHA*/ .dados { display: grid; grid-template-columns: 1fr 1fr; gap: 0.0625rem; margin: 0 0 1.125rem; border: 1px solid var(--borda-suave); border-radius: 8px; background-color: var(--borda-suave); overflow: hidden; } .dados__item { padding: 0.5rem 0.6875rem; background-color: var(--superficie); } /*ITEM LARGO: E-MAIL E ACESSO REMOTO NAO CABEM EM UMA COLUNA SO*/ .dados__item--largo { grid-column: 1 / -1; } .dados__rotulo { margin: 0 0 0.125rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); } .dados__valor { margin: 0; font-size: 0.875rem; line-height: 1.45; color: var(--texto); overflow-wrap: anywhere; } /*VAZIO: FICA APAGADO PARA O OLHO PULAR DIRETO NO QUE TEM CONTEUDO*/ .dados__valor--vazio { color: var(--texto-4); } /*SIM/NAO QUE MUDA O ATENDIMENTO: CLIENTE ESPERANDO, SISTEMA FORA*/ .dados__marca { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.0625rem 0.375rem; border-radius: 4px; background-color: var(--superficie-2); font-size: 0.8125rem; font-weight: 600; color: var(--texto-2); } .dados__marca--sim { background-color: var(--selo-sim-fundo); color: var(--selo-sim-texto); } /* ========================================================================== APROVACAO DE ACESSO — ficha enxuta no lugar do card padrao ========================================================================== */ .aprovacao { max-width: 26rem; } .aprovacao__aviso { margin: 0 0 0.75rem; font-size: 0.875rem; color: var(--texto-3); } .aprovacao__aviso:empty { display: none; } .aprovacao__aviso--feito { font-weight: 600; color: var(--texto); } .aprovacao__aviso--erro { color: var(--erro-texto); } .aprovacao__campo { margin: 0 0 1.25rem; } .aprovacao__rotulo { display: block; margin: 0 0 0.3125rem; font-size: 0.8125rem; font-weight: 600; color: var(--texto-2); } .aprovacao__select { width: 100%; box-sizing: border-box; padding: 0.5rem 0.625rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); font-family: inherit; font-size: 0.9375rem; color: var(--texto); cursor: pointer; } .aprovacao__select:focus-visible { outline: 2px solid var(--laranja); outline-offset: 1px; } /*O select fica apagado para quem nao pode decidir (so admin aprova): o campo continua visivel como conferencia, mas nao aceita troca.*/ .aprovacao__select:disabled { background-color: var(--superficie-2); color: var(--texto-3); cursor: not-allowed; } /*DICA DO PERFIL SUGERIDO: so aparece quando ha texto, entao nao ocupa espaco no caso comum (sugestao "solicitante", que dispensa explicacao).*/ .aprovacao__dica:not(:empty) { display: block; margin: 0.375rem 0 0; font-size: 0.8125rem; line-height: 1.4; color: var(--texto-3); } .aprovacao__acoes { display: flex; gap: 0.625rem; } .aprovacao__aprovar, .aprovacao__rejeitar { flex: 1; padding: 0.5625rem 1rem; border: 1px solid var(--borda); border-radius: 6px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease; } .aprovacao__aprovar { border-color: var(--laranja); background-color: var(--laranja); color: #fff; } .aprovacao__aprovar:hover:not(:disabled) { border-color: #c24f00; background-color: #c24f00; } /*REJEITAR: VERMELHO FIXO NOS DOIS TEMAS, MESMA RAZAO DO BOTAO DE EXCLUIR (o --erro-texto do escuro e rosa claro, ilegivel com fundo solido).*/ .aprovacao__rejeitar { border-color: #d64545; background-color: var(--superficie); color: #d64545; } .aprovacao__rejeitar:hover:not(:disabled) { background-color: rgba(214, 69, 69, 0.1); } .aprovacao__aprovar:disabled, .aprovacao__rejeitar:disabled { cursor: not-allowed; opacity: 0.5; } .aprovacao__aprovar:active:not(:disabled), .aprovacao__rejeitar:active:not(:disabled) { transform: scale(0.97); } @media (prefers-reduced-motion: reduce) { .aprovacao__aprovar, .aprovacao__rejeitar, .aprovacao__aprovar:active:not(:disabled), .aprovacao__rejeitar:active:not(:disabled) { transition: none; transform: none; } } /*PRIORIDADE E MEMBROS DIVIDEM A LINHA: ECONOMIZA ALTURA PARA O CHAT*/ .detalhe__lado-a-lado { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .detalhe__bloco { margin-bottom: 1.125rem; } .detalhe__rotulo { margin: 0 0 0.4375rem; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); } .detalhe__etiquetas, .detalhe__membros { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; } /*ETIQUETA COMO BOTAO: CLICAR LIGA E DESLIGA A PRIORIDADE*/ .detalhe__etiqueta { padding: 0.25rem 0.5rem; border: 1px solid transparent; border-radius: 4px; background-color: var(--superficie-2); font-family: inherit; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texto-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .detalhe__etiqueta:hover { border-color: var(--borda); } .detalhe__etiqueta--ativa.detalhe__etiqueta--urgente { background-color: var(--etiqueta-urgente-fundo); color: var(--etiqueta-urgente-texto); } .detalhe__etiqueta--ativa.detalhe__etiqueta--prioridade { background-color: var(--etiqueta-prioridade-fundo); color: var(--etiqueta-prioridade-texto); } /*MEMBRO: CLICAR TIRA DO CHAMADO; O + ABRE A LISTA DE QUEM PODE ENTRAR*/ .detalhe__membro { display: flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.5rem 0.25rem 0.25rem; border: 1px solid var(--borda); border-radius: 999px; background-color: var(--superficie); font-family: inherit; font-size: 0.8125rem; color: var(--texto); cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .detalhe__membro:hover, .detalhe__membro--ativo { border-color: var(--realce-borda); background-color: var(--realce); } /*NO DETALHE O CHIP JA TEM BORDA E FUNDO PROPRIOS: A COR TROCA OS DOIS. O :hover do chip fixo esta aqui para ele nao voltar ao cinza ao passar o mouse.*/ .detalhe__membro.membro--destaque, .detalhe__membro--fixo.membro--destaque:hover { border-color: color-mix(in srgb, var(--cor-destaque) 35%, var(--superficie)); background-color: color-mix(in srgb, var(--cor-destaque) 18%, var(--superficie)); } /*NA LISTA DO +, O HOVER ESCURECE UM POUCO A MESMA COR*/ .detalhe__membro.membro--destaque:not(.detalhe__membro--fixo):hover { background-color: color-mix(in srgb, var(--cor-destaque) 28%, var(--superficie)); } .detalhe__membro-avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: var(--avatar-fundo); font-family: "Sora", system-ui, sans-serif; font-size: 0.75rem; font-weight: 600; color: var(--avatar-texto); overflow: hidden; } /*TERCEIRO: MESMO CIRCULO DO AVATAR, SO QUE COM ICONE DE EMPRESA EM VEZ DE FOTO/INICIAIS — nao tem conta, entao nao ha foto nem cor de destaque possivel. Cinza neutro pra nao competir com as cores de pessoa.*/ .detalhe__membro-avatar--terceiro { background-color: var(--superficie-2); color: var(--texto-3); } .detalhe__adicionar { display: flex; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; border: 1px dashed var(--borda); border-radius: 50%; background: none; color: var(--texto-3); cursor: pointer; transition: border-color 0.2s ease, color 0.2s ease; } .detalhe__adicionar:hover:not(:disabled), .detalhe__adicionar--ativo { border-style: solid; border-color: var(--laranja); color: var(--laranja); } /*ENGRENAGEM: GIRA UM POUCO QUANDO O PAINEL ESTA ABERTO*/ .detalhe__adicionar--ativo svg { transform: rotate(60deg); } .detalhe__adicionar svg { transition: transform 0.25s ease; } /*CHIP SO DE EXIBICAO: CONFIGURAR E PELA ENGRENAGEM, ENTAO SEM CARA DE BOTAO*/ .detalhe__membro--fixo { padding-right: 0.25rem; cursor: default; } .detalhe__membro--fixo:hover { border-color: var(--borda); background-color: var(--superficie); } /*x NO CHIP: TIRA A PESSOA DO CHAMADO. DISCRETO ATE PASSAR O MOUSE*/ .detalhe__membro-remover { display: flex; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin-left: 0.125rem; padding: 0; border: 0; border-radius: 50%; background: none; font-family: inherit; font-size: 1rem; line-height: 1; color: var(--texto-4); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .detalhe__membro-remover:hover { background-color: var(--erro-fundo); color: var(--erro-texto); } /*A ENGRENAGEM FICA COLADA NO + */ .detalhe__adicionar--cor { margin-left: -0.125rem; } /*UMA LINHA POR MEMBRO NO PAINEL: PESSOA / CORES / REMOVER*/ .detalhe__config-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; padding: 0.375rem 0; border-bottom: 1px solid var(--borda-suave); } .detalhe__config-pessoa { display: inline-flex; align-items: center; gap: 0.5rem; min-width: 8.5rem; flex: 1 1 8.5rem; } .detalhe__config-nome { font-size: 0.875rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .detalhe__config-linha .detalhe__remover-membro { margin-left: auto; } /*"ADICIONAR AO CHAMADO" SEPARADO DO QUE VEM ACIMA*/ .detalhe__escolher-titulo--secao { margin-top: 0.25rem; } .detalhe__adicionar:disabled { opacity: 0.45; cursor: default; } /*PAINEL ABAIXO DOS MEMBROS: LISTA DE QUEM PODE ENTRAR, OU COR E REMOVER DE UM MEMBRO. OCUPA A LINHA INTEIRA DO BLOCO.*/ .detalhe__escolher { display: flex; flex-direction: column; gap: 0.5rem; width: 100%; box-sizing: border-box; margin-top: 0.25rem; padding: 0.625rem; border: 1px solid var(--borda); border-radius: 7px; background-color: var(--superficie-3); } .detalhe__escolher-titulo { margin: 0; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--texto-3); } .detalhe__escolher-opcoes { display: flex; flex-wrap: wrap; gap: 0.375rem; } .detalhe__escolher-nota { margin: 0; font-size: 0.75rem; color: var(--texto-3); } /*AMOSTRAS DE COR: A ATUAL GANHA O MESMO ANEL DUPLO DO AVATAR*/ .detalhe__cores { display: flex; flex-wrap: wrap; gap: 0.5rem; } .detalhe__cor { width: 1.375rem; height: 1.375rem; padding: 0; border: 0; border-radius: 50%; background-color: var(--cor); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .detalhe__cor:hover { transform: scale(1.12); } .detalhe__cor--atual { box-shadow: 0 0 0 2px var(--superficie-3), 0 0 0 4px var(--cor, var(--texto-3)); } /*"SEM COR": CIRCULO VAZIO CORTADO POR UM TRACO*/ .detalhe__cor--sem { border: 1px solid var(--borda); background: linear-gradient( 135deg, transparent calc(50% - 1px), var(--texto-4) calc(50% - 1px), var(--texto-4) calc(50% + 1px), transparent calc(50% + 1px) ), var(--superficie); } .detalhe__remover-membro { align-self: flex-start; padding: 0.3125rem 0.625rem; border: 1px solid var(--erro-borda); border-radius: 5px; background-color: transparent; font-family: inherit; font-size: 0.8125rem; color: var(--erro-texto); cursor: pointer; transition: background-color 0.2s ease; } .detalhe__remover-membro:hover { background-color: var(--erro-fundo); } @media (prefers-reduced-motion: reduce) { .detalhe__adicionar svg, .detalhe__cor { transition: none; } .detalhe__cor:hover { transform: none; } /*SEM ESCALA, SO CROSS-FADE: quem pede menos movimento ainda ve o modal chegar, mas sem o leve zoom.*/ .detalhe { transition: opacity 0.15s ease, overlay 0.15s allow-discrete, display 0.15s allow-discrete; } .detalhe, .detalhe[open] { transform: none; } } .detalhe__descricao { padding: 0.5rem 0.625rem; border: 1px solid transparent; border-radius: 6px; font-size: 0.9375rem; line-height: 1.6; color: var(--texto); white-space: pre-wrap; } /*CONFIRMACAO DE QUE GRAVOU (OU DE QUE FALHOU)*/ .detalhe__aviso { min-height: 1rem; margin: 0.75rem 0 0; font-size: 0.8125rem; color: var(--texto-3); } .detalhe__aviso--erro { color: var(--etiqueta-urgente-texto); } /* ========================================================================== CORRESPONDENCIA (abaixo da descricao) ========================================================================== */ .conversa { margin-top: 1.5rem; padding-top: 1.125rem; border-top: 1px solid var(--borda-suave); } .conversa__mensagens { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; max-height: 20rem; margin-bottom: 0.75rem; padding-right: 0.25rem; overflow-y: auto; } /*position: relative ANCORA O PAINEL DE TEXTOS RAPIDOS, QUE SOBE POR CIMA*/ .conversa__escrever { position: relative; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .conversa__escrever:focus-within { border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.15); } .conversa__campo { display: block; width: 100%; box-sizing: border-box; padding: 0.625rem 0.75rem 0.375rem; border: 0; border-radius: 8px 8px 0 0; background: none; font-family: "Poppins", system-ui, sans-serif; font-size: 0.9375rem; line-height: 1.55; color: var(--texto); resize: vertical; } .conversa__campo:focus { outline: none; } .conversa__acoes { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.375rem 0.5rem 0.5rem 0.75rem; } .conversa__anexar { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.4375rem; border-radius: 5px; font-size: 0.8125rem; color: var(--texto-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .conversa__anexar:hover { background-color: var(--superficie-2); color: var(--texto); } /*QUANDO UM ARQUIVO ESTA ESCOLHIDO, O ROTULO MOSTRA O NOME DELE*/ .conversa__anexar--escolhido { color: var(--laranja-forte); } /*ANEXOS PENDENTES: MINIATURAS DO QUE VAI COM A PROXIMA RESPOSTA, ENTRE O CAMPO DE TEXTO E OS BOTOES. Quebra de linha quando sao muitas.*/ .conversa__pendentes { display: flex; flex-wrap: wrap; gap: 0.4375rem; max-height: 9rem; padding: 0.25rem 0.75rem 0.375rem; overflow-y: auto; } .conversa__pendentes[hidden] { display: none; } .conversa__pendente { position: relative; flex-shrink: 0; width: 3.75rem; height: 3.75rem; box-sizing: border-box; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie-2); overflow: hidden; } .conversa__pendente img { display: block; width: 100%; height: 100%; object-fit: cover; } /*PDF E AFINS: SEM MINIATURA, O NOME DO ARQUIVO NO LUGAR*/ .conversa__pendente--arquivo { display: flex; align-items: center; width: auto; max-width: 10rem; padding: 0 1.625rem 0 0.5rem; } .conversa__pendente-nome { font-size: 0.75rem; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .conversa__pendente-remover { position: absolute; top: 0.1875rem; right: 0.1875rem; display: flex; align-items: center; justify-content: center; width: 1.125rem; height: 1.125rem; padding: 0; border: 0; border-radius: 50%; background-color: rgba(16, 10, 8, 0.72); font-family: inherit; font-size: 0.9375rem; line-height: 1; color: #fff; cursor: pointer; transition: background-color 0.15s ease; } .conversa__pendente-remover:hover { background-color: #b02a2a; } /*IMAGENS DENTRO DO BALAO DO CHAT. Tamanho fixo: a conversa nao pula quando a imagem termina de carregar. O balao e claro nos dois temas, entao as bordas aqui sao escuras fixas, e nao tokens.*/ .comentario__imagens { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.4375rem; } .comentario__imagem { display: block; width: 9rem; height: 6.75rem; padding: 0; border: 1px solid rgba(26, 26, 26, 0.1); border-radius: 6px; background-color: rgba(26, 26, 26, 0.06); overflow: hidden; cursor: zoom-in; transition: border-color 0.15s ease, transform 0.15s ease; } .comentario__imagem:hover { border-color: rgba(26, 26, 26, 0.28); transform: scale(1.02); } .comentario__imagem img { display: block; width: 100%; height: 100%; object-fit: cover; } /*SEM URL AINDA (carregando) A IMAGEM FICA INVISIVEL, SO O FUNDO CINZA*/ .comentario__imagem img:not([src]) { visibility: hidden; } /*IMAGEM QUE NAO CARREGOU: SO O FUNDO, AINDA CLICAVEL PARA TENTAR ABRIR*/ .comentario__imagem--falhou img { visibility: hidden; } @media (prefers-reduced-motion: reduce) { .comentario__imagem:hover { transform: none; } } /*VISUALIZADOR DE IMAGEM: TELA INTEIRA, FUNDO ESCURO, IMAGEM NO MEIO. O em si e transparente e ocupa a tela toda: assim qualquer clique fora da imagem cai nele e fecha. Cores fixas — fundo escuro nos dois temas.*/ .visualizador { /*Mesma conta dos outros dialogs: zoom do .portal se propaga visualmente ate aqui, mas vw/dvh medem a tela real — dividir devolve a tela cheia de verdade em qualquer zoom (sem isso, 100vw em zoom 150% vira 150% da tela real e o visualizador sai cortado pelas bordas).*/ width: calc(100vw / var(--zoom-portal, 1)); height: calc(100dvh / var(--zoom-portal, 1)); max-width: none; max-height: none; box-sizing: border-box; margin: 0; padding: 3.5rem 2rem 2.5rem; border: 0; background: transparent; cursor: zoom-out; } .visualizador[open] { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; animation: visualizador-entra 0.18s ease-out; } .visualizador::backdrop { background-color: rgba(10, 8, 7, 0.88); } @keyframes visualizador-entra { from { opacity: 0; transform: scale(0.98); } } /*A IMAGEM CABE INTEIRA NA TELA, SEM CORTAR NEM DISTORCER*/ .visualizador__imagem { max-width: 100%; /*Mesma conta do .visualizador (que ja divide a largura/altura pelo zoom): o 8rem de respiro tambem escala sozinho, so o dvh precisa dividir.*/ max-height: calc((100dvh / var(--zoom-portal, 1)) - 8rem); object-fit: contain; border-radius: 6px; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5); cursor: default; } .visualizador__nome { max-width: 100%; margin: 0; font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; color: rgba(255, 255, 255, 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .visualizador__fechar { position: fixed; top: 1rem; right: 1rem; display: flex; padding: 0.5rem; border: 0; border-radius: 50%; background-color: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background-color 0.15s ease; } .visualizador__fechar:hover { background-color: rgba(255, 255, 255, 0.26); } @media (prefers-reduced-motion: reduce) { .visualizador[open] { animation: none; } } .conversa__enviar { flex-shrink: 0; /*EMPURRA O "Responder" PARA A DIREITA — Anexar/Textos rapidos/Solucoes ficam colados a esquerda entre si.*/ margin-left: auto; padding: 0.4375rem 0.875rem; border: 0; border-radius: 6px; background-color: var(--laranja); font-family: "Sora", system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--superficie); cursor: pointer; transition: background-color 0.2s ease; } .conversa__enviar:hover:not(:disabled) { background-color: var(--laranja-forte); } .conversa__enviar:disabled { opacity: 0.55; cursor: default; } /* ========================================================================== ANEXOS (coluna da direita) ========================================================================== */ .detalhe__lateral { display: flex; flex-direction: column; min-height: 0; padding: 1.125rem 1rem 1.25rem; border-left: 1px solid var(--borda-suave); background-color: var(--superficie-3); } .anexos { display: flex; flex-direction: column; gap: 0.375rem; min-height: 0; overflow-y: auto; } .anexo { display: flex; align-items: center; gap: 0.5rem; padding: 0.4375rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .anexo:hover { border-color: var(--realce-borda); background-color: var(--realce); } .anexo__icone { flex-shrink: 0; color: var(--texto-4); } .anexo__texto { min-width: 0; } .anexo__nome { display: block; font-size: 0.8125rem; color: var(--texto); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .anexo__quando { display: block; font-size: 0.6875rem; color: var(--texto-4); } /*ANEXO QUE E IMAGEM: CARD VERTICAL COM A PREVIA EM CIMA — diferente do card horizontal de arquivo generico, porque aqui a miniatura ja diz o que e, o nome vira legenda.*/ .anexo--imagem { flex-direction: column; align-items: stretch; gap: 0.375rem; padding: 0.375rem; } .anexo__previa { width: 100%; height: 6.5rem; border-radius: 4px; background-color: var(--superficie-2); object-fit: cover; /*Enquanto a URL assinada nao chega (preencherImagens e em lote, depois do card jah estar na tela) ou se falhar, o quadrado cinza do proprio background-color segura o lugar sem pular o layout.*/ } .anexo--imagem .anexo__texto { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .anexo--imagem .anexo__nome { flex: 1; } /*PREVIA QUE FALHOU: sem imagem quebrada — o quadrado cinza fica, so ganha um "sem prévia" para explicar o vazio.*/ .anexo--imagem-falhou .anexo__previa { display: none; } .anexo--imagem-falhou::before { content: "Sem prévia"; display: flex; align-items: center; justify-content: center; height: 6.5rem; border-radius: 4px; background-color: var(--superficie-2); font-size: 0.75rem; color: var(--texto-4); } .anexos__vazio { margin: 0; padding: 0.75rem 0; font-size: 0.8125rem; text-align: center; color: var(--texto-4); } /*CONVERSA EM BALOES, COMO UM SMS: O SOLICITANTE DE UM LADO, A EQUIPE DO OUTRO, CADA UM COM SEU AVATAR.*/ .comentario { display: flex; align-items: flex-end; gap: 0.4375rem; max-width: 85%; } /*MENSAGEM DA EQUIPE: ENCOSTA NA DIREITA, AVATAR DEPOIS DO BALAO*/ .comentario--equipe { align-self: flex-end; flex-direction: row-reverse; } .comentario__avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.875rem; height: 1.875rem; border-radius: 50%; background-color: var(--avatar-fundo); font-family: "Sora", system-ui, sans-serif; font-size: 0.6875rem; font-weight: 600; color: var(--avatar-texto); overflow: hidden; } .comentario__avatar img { width: 100%; height: 100%; object-fit: cover; } .comentario__balao { min-width: 0; padding: 0.4375rem 0.625rem 0.5rem; border-radius: 10px; background-color: var(--balao-deles); } .comentario--equipe .comentario__balao { background-color: var(--balao-nosso); } /*MENSAGEM AUTOMATICA: E DO SISTEMA, NAO DE UMA PESSOA. ESTE BALAO USA SUPERFICIE DO TEMA, ENTAO O TEXTO DELE VOLTA A SEGUIR O TEMA.*/ .comentario--sistema .comentario__balao { background-color: var(--superficie-2); border: 1px dashed var(--borda); } .comentario--sistema .comentario__autor, .comentario--sistema .comentario__texto { color: var(--texto); } .comentario--sistema .comentario__quando { color: var(--texto-2); } .comentario__topo { display: flex; align-items: baseline; justify-content: space-between; gap: 0.625rem; margin-bottom: 0.1875rem; } /*OS BALOES SAO CLAROS NOS DOIS TEMAS (SAO A COR DO SMS), ENTAO O TEXTO DENTRO DELES TEM DE FICAR ESCURO SEMPRE — var(--texto) VIRARIA BRANCO NO ESCURO E SUMIRIA DENTRO DO BALAO.*/ .comentario__autor { font-size: 0.75rem; font-weight: 600; color: var(--balao-texto); } .comentario__quando { flex-shrink: 0; font-size: 0.6875rem; color: rgba(26, 26, 26, 0.55); } .comentario__texto { margin: 0; font-size: 0.875rem; line-height: 1.55; color: var(--balao-texto); white-space: pre-wrap; } /*CARD DE SOLUCAO: um link de artigo mandado no chat, dentro do balao — fundo levemente mais escuro que o balao (que e sempre claro), pra destacar sem competir com a cor de quem mandou.*/ .comentario__solucao { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5625rem; border-radius: 8px; background-color: rgba(26, 26, 26, 0.06); } .comentario__solucao-icone { display: flex; flex-shrink: 0; color: var(--laranja); } .comentario__solucao-titulo { flex: 1; min-width: 0; font-size: 0.875rem; font-weight: 600; line-height: 1.4; color: var(--balao-texto); } .comentario__solucao-botao { flex-shrink: 0; padding: 0.3125rem 0.6875rem; border-radius: 6px; background-color: var(--laranja); font-size: 0.8125rem; font-weight: 600; color: var(--superficie); text-decoration: none; white-space: nowrap; } .comentario__solucao-botao:hover { filter: brightness(1.08); } .conversa__vazia { margin: 0; padding: 0.75rem 0; font-size: 0.875rem; text-align: center; color: var(--texto-4); } @media (max-width: 860px) { .detalhe__corpo { grid-template-columns: 1fr; } /*ANEXOS SOBEM PARA ANTES DO CONTEUDO PRINCIPAL NAO FICAR ESCONDIDO NO FIM*/ .detalhe__lateral { order: -1; border-left: 0; border-bottom: 1px solid var(--borda-suave); max-height: 12rem; } } @media (max-width: 720px) { .portal { padding: 1rem 0.875rem 0; } .fila { width: 14rem; } } /*QUEM PEDE MENOS MOVIMENTO NAO VE AS TRANSICOES*/ @media (prefers-reduced-motion: reduce) { .portal { animation: none; } .card, .fila { transition: none; } .card:hover { transform: none; } } /* ========================================================================== TEXTOS RAPIDOS Respostas prontas da equipe. O botao fica junto do Anexar e o painel sobe por cima do campo de escrita, como no Hipporello. ========================================================================== */ .conversa__rapidos { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.4375rem; border: 0; border-radius: 5px; background: none; font-family: inherit; font-size: 0.8125rem; color: var(--texto-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .conversa__rapidos:hover, .conversa__rapidos[aria-expanded="true"] { background-color: var(--superficie-2); color: var(--texto); } /*O PAINEL ABRE PARA CIMA: o campo de escrita fica no pe do modal, e para baixo a lista sairia da tela.*/ .rapidos { position: absolute; bottom: calc(100% + 0.375rem); left: 0; z-index: 6; width: min(22rem, 100%); padding: 0.625rem; border: 1px solid var(--borda); border-radius: 10px; background-color: var(--superficie); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18); } .rapidos__topo { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.5rem; } .rapidos__titulo { margin: 0; font-family: "Sora", system-ui, sans-serif; font-size: 0.875rem; font-weight: 600; color: var(--texto); } .rapidos__fechar { display: flex; padding: 0.1875rem; border: 0; border-radius: 4px; background: none; color: var(--texto-3); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .rapidos__fechar:hover { background-color: var(--superficie-2); color: var(--texto); } .rapidos__novo { display: block; box-sizing: border-box; width: 100%; margin-bottom: 0.5rem; padding: 0.4375rem; border: 1px dashed var(--borda); border-radius: 6px; background: none; font-family: inherit; font-size: 0.8125rem; font-weight: 600; color: var(--laranja); text-align: center; text-decoration: none; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .rapidos__novo:hover { border-color: var(--laranja); background-color: var(--realce); } .rapidos__form { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: 0.5rem; padding: 0.5rem; border-radius: 6px; background-color: var(--superficie-2); } /*DEPOIS DO display: flex ACIMA, SENAO ELE VENCE O hidden DO HTML E O FORMULARIO DE CRIAR APARECE ABERTO DE SAIDA.*/ .rapidos__form[hidden] { display: none; } .rapidos__campo { width: 100%; box-sizing: border-box; padding: 0.375rem 0.5rem; border: 1px solid var(--borda); border-radius: 5px; background-color: var(--superficie); font-family: "Poppins", system-ui, sans-serif; font-size: 0.875rem; color: var(--texto); } .rapidos__campo:focus { outline: none; border-color: var(--laranja); box-shadow: 0 0 0 3px rgba(221, 91, 18, 0.15); } .rapidos__campo--corpo { resize: vertical; line-height: 1.5; } .rapidos__form-acoes { display: flex; justify-content: flex-end; gap: 0.375rem; } .rapidos__cancelar, .rapidos__salvar { padding: 0.3125rem 0.625rem; border: 0; border-radius: 5px; font-family: inherit; font-size: 0.8125rem; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .rapidos__cancelar { background: none; color: var(--texto-3); } .rapidos__cancelar:hover { background-color: var(--superficie); color: var(--texto); } .rapidos__salvar { background-color: var(--laranja); color: #fff; } .rapidos__salvar:hover { background-color: var(--laranja-forte); } .rapidos__busca { margin-bottom: 0.5rem; } .rapidos__busca::-webkit-search-cancel-button { appearance: none; } .rapidos__lista { display: flex; flex-direction: column; gap: 0.3125rem; max-height: 15rem; overflow-y: auto; } /*O ITEM INTEIRO INSERE O TEXTO; editar e excluir ficam dentro dele, e o position: relative e o que prende os dois no canto.*/ .rapidos__item { position: relative; padding: 0.4375rem 3.25rem 0.4375rem 0.5rem; border: 1px solid var(--borda); border-radius: 6px; background: none; font-family: inherit; text-align: left; cursor: pointer; transition: border-color 0.2s ease, background-color 0.2s ease; } .rapidos__item:hover { border-color: var(--realce-borda); background-color: var(--realce); } .rapidos__item-titulo { display: block; margin-bottom: 0.0625rem; font-size: 0.8125rem; font-weight: 600; color: var(--texto); } /*DUAS LINHAS DO CORPO BASTAM PARA RECONHECER O TEXTO NA LISTA*/ .rapidos__item-corpo { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; font-size: 0.75rem; line-height: 1.45; color: var(--texto-3); } .rapidos__acoes { position: absolute; top: 0.375rem; right: 0.375rem; display: flex; gap: 0.125rem; opacity: 0; transition: opacity 0.15s ease; } /*:focus-within MANTEM OS BOTOES VISIVEIS PARA QUEM NAVEGA POR TECLADO*/ .rapidos__item:hover .rapidos__acoes, .rapidos__item:focus-within .rapidos__acoes { opacity: 1; } .rapidos__acao { display: flex; padding: 0.1875rem; border: 0; border-radius: 4px; background-color: var(--superficie); color: var(--texto-3); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease; } .rapidos__acao:hover { background-color: var(--superficie-2); color: var(--texto); } .rapidos__acao--excluir:hover { color: var(--erro-texto); } .rapidos__vazio { margin: 0; padding: 0.75rem 0.25rem; font-size: 0.8125rem; text-align: center; color: var(--texto-4); } /* ========================================================================== TOPO NO TEMA ESCURO O topo vem de index.css e e compartilhado com as outras telas; como o escuro e so do Portal, os ajustes ficam aqui, presos a .portal-pagina. ========================================================================== */ /*BOTAO DE TEMA: UM SO, ALTERNANDO. O ICONE MOSTRA PARA ONDE VAI, NAO ONDE ESTA — NO CLARO APARECE A LUA (clique para escurecer).*/ .topo__tema { display: flex; padding: 0.4375rem; border: 1px solid #e5e5e5; border-radius: 4px; background-color: #fff; color: #8a8a8a; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease; } .topo__tema:hover { color: #1a1a1a; transform: scale(1.08); } .topo__tema:active { transform: scale(0.94); } /*ZOOM: BOTAO NA MESMA MOLDURA DO TEMA, MOSTRANDO O VALOR; CLICAR ABRE O PAINEL COM O SLIDER (ancorado no botao, como o menu do perfil)*/ .zoom { position: relative; } .topo__zoom { display: flex; align-items: center; gap: 0.375rem; height: 2.0625rem; padding: 0 0.5rem; border: 1px solid #e5e5e5; border-radius: 4px; background-color: #fff; font-family: inherit; font-size: 0.75rem; color: #8a8a8a; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease; } .topo__zoom:hover { color: #1a1a1a; transform: scale(1.04); } .topo__zoom:active { transform: scale(0.97); } .topo__zoom[aria-expanded="true"] { border-color: #dd5b12; color: #dd5b12; } .topo__zoom-valor { min-width: 2.25rem; text-align: right; /*NUMEROS DE LARGURA FIXA: 95% E 100% NAO FAZEM O BOTAO MUDAR DE TAMANHO*/ font-variant-numeric: tabular-nums; color: #1a1a1a; } .zoom__painel { position: absolute; top: calc(100% + 0.5rem); right: 0; z-index: 20; width: 15.5rem; box-sizing: border-box; padding: 0.75rem; border: 1px solid #e5e5e5; border-radius: 8px; background-color: #fff; box-shadow: 0 12px 32px rgba(26, 26, 26, 0.14); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease; } .zoom__painel--aberto { opacity: 1; visibility: visible; transform: none; } .zoom__cabecalho { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.75rem; font-size: 0.75rem; font-weight: 500; color: #1a1a1a; } .zoom__redefinir { padding: 0; border: 0; background: none; font-family: inherit; font-size: 0.6875rem; color: #c24f00; cursor: pointer; } .zoom__redefinir:hover:not(:disabled) { text-decoration: underline; } .zoom__redefinir:disabled { color: #b5b5b5; cursor: default; } .zoom__controle { display: flex; align-items: center; gap: 0.5rem; } .zoom__passo { display: flex; flex-shrink: 0; align-items: center; justify-content: center; width: 1.75rem; height: 1.75rem; padding: 0; border: 1px solid #e5e5e5; border-radius: 4px; background-color: #fff; color: #5a5a5a; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .zoom__passo:hover:not(:disabled) { background-color: #f5f5f5; color: #1a1a1a; } .zoom__passo:disabled { opacity: 0.4; cursor: default; } /*SLIDER: TRILHO FINO QUE PREENCHE DE LARANJA ATE A BOLINHA. --preenchido VEM DO JS (no Firefox quem pinta e o ::-moz-range-progress)*/ .zoom__slider { flex: 1; min-width: 0; height: 1.25rem; margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; } .zoom__slider:focus-visible { outline: none; } .zoom__slider::-webkit-slider-runnable-track { height: 4px; border-radius: 999px; background: linear-gradient( to right, #dd5b12 var(--preenchido, 50%), #e5e5e5 var(--preenchido, 50%) ); } .zoom__slider::-moz-range-track { height: 4px; border-radius: 999px; background-color: #e5e5e5; } .zoom__slider::-moz-range-progress { height: 4px; border-radius: 999px; background-color: #dd5b12; } .zoom__slider::-webkit-slider-thumb { width: 14px; height: 14px; margin-top: -5px; border: 2px solid #fff; border-radius: 50%; background-color: #dd5b12; box-shadow: 0 1px 4px rgba(26, 26, 26, 0.3); -webkit-appearance: none; appearance: none; transition: transform 0.15s ease, box-shadow 0.15s ease; } .zoom__slider::-moz-range-thumb { width: 14px; height: 14px; box-sizing: border-box; border: 2px solid #fff; border-radius: 50%; background-color: #dd5b12; box-shadow: 0 1px 4px rgba(26, 26, 26, 0.3); transition: transform 0.15s ease, box-shadow 0.15s ease; } .zoom__slider:hover::-webkit-slider-thumb, .zoom__slider:active::-webkit-slider-thumb { transform: scale(1.2); } .zoom__slider:hover::-moz-range-thumb, .zoom__slider:active::-moz-range-thumb { transform: scale(1.2); } .zoom__slider:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(221, 91, 18, 0.28); } .zoom__slider:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(221, 91, 18, 0.28); } /*MARCAS 50 / 100 / 150: A MARGEM LATERAL E A LARGURA DO BOTAO + O GAP, PARA AS PONTAS CAIREM EMBAIXO DAS PONTAS DO SLIDER*/ .zoom__marcas { display: flex; justify-content: space-between; margin: 0.25rem 2.25rem 0; font-size: 0.625rem; font-variant-numeric: tabular-nums; color: #8a8a8a; } .zoom__dica { margin: 0.75rem 0 0; padding-top: 0.625rem; border-top: 1px solid #f0f0f0; font-size: 0.6875rem; line-height: 1.5; color: #8a8a8a; } .zoom__dica kbd { padding: 0 0.3125rem; border: 1px solid #e5e5e5; border-bottom-width: 2px; border-radius: 3px; background-color: #fafafa; font-family: inherit; font-size: 0.625rem; color: #5a5a5a; } @media (prefers-reduced-motion: reduce) { .topo__zoom, .zoom__painel, .zoom__slider::-webkit-slider-thumb { transition: none; } .topo__zoom:hover, .topo__zoom:active { transform: none; } } .topo__tema-icone--sol { display: none; } [data-tema="escuro"] .topo__tema-icone--sol { display: block; } [data-tema="escuro"] .topo__tema-icone--lua { display: none; } /*LOGO: A VERSAO BRANCA SO APARECE NO ESCURO*/ .portal-pagina .topo__logo--escuro { display: none; } [data-tema="escuro"] .portal-pagina .topo__logo--claro { display: none; } [data-tema="escuro"] .portal-pagina .topo__logo--escuro { display: block; } [data-tema="escuro"] .portal-pagina .topo { border-bottom-color: var(--borda-suave); background-color: var(--superficie-2); } [data-tema="escuro"] .portal-pagina .topo__produto, [data-tema="escuro"] .portal-pagina .topo__usuario-nome, [data-tema="escuro"] .portal-pagina .topo__sair { color: var(--texto); } [data-tema="escuro"] .portal-pagina .topo__divisor { background-color: var(--borda); } [data-tema="escuro"] .portal-pagina .topo__tema { border-color: var(--borda); background-color: var(--superficie); color: var(--texto-3); } [data-tema="escuro"] .portal-pagina .topo__tema:hover { color: var(--texto); } [data-tema="escuro"] .portal-pagina .topo__zoom { border-color: var(--borda); background-color: var(--superficie); color: var(--texto-3); } [data-tema="escuro"] .portal-pagina .topo__zoom:hover { color: var(--texto); } [data-tema="escuro"] .portal-pagina .topo__zoom[aria-expanded="true"] { border-color: var(--laranja-forte); color: var(--laranja-forte); } [data-tema="escuro"] .portal-pagina .topo__zoom-valor, [data-tema="escuro"] .portal-pagina .zoom__cabecalho { color: var(--texto); } [data-tema="escuro"] .portal-pagina .zoom__painel { border-color: var(--borda); background-color: var(--superficie); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } [data-tema="escuro"] .portal-pagina .zoom__passo { border-color: var(--borda); background-color: var(--superficie); color: var(--texto-3); } [data-tema="escuro"] .portal-pagina .zoom__passo:hover:not(:disabled) { background-color: var(--superficie-2); color: var(--texto); } [data-tema="escuro"] .portal-pagina .zoom__slider::-webkit-slider-runnable-track { background: linear-gradient( to right, #dd5b12 var(--preenchido, 50%), var(--borda) var(--preenchido, 50%) ); } [data-tema="escuro"] .portal-pagina .zoom__slider::-moz-range-track { background-color: var(--borda); } /*SEPARADOS DE PROPOSITO: NUMA LISTA SO, O NAVEGADOR QUE NAO CONHECE UM DOS PSEUDO-ELEMENTOS DESCARTA A REGRA INTEIRA*/ [data-tema="escuro"] .portal-pagina .zoom__slider::-webkit-slider-thumb { border-color: var(--superficie); } [data-tema="escuro"] .portal-pagina .zoom__slider::-moz-range-thumb { border-color: var(--superficie); } [data-tema="escuro"] .portal-pagina .zoom__marcas, [data-tema="escuro"] .portal-pagina .zoom__dica { color: var(--texto-3); } [data-tema="escuro"] .portal-pagina .zoom__dica { border-top-color: var(--borda-suave); } [data-tema="escuro"] .portal-pagina .zoom__dica kbd { border-color: var(--borda); background-color: var(--superficie-2); color: var(--texto); } [data-tema="escuro"] .portal-pagina .topo__usuario:hover, [data-tema="escuro"] .portal-pagina .topo__sair:hover { background-color: var(--superficie); } /*MENU DO PERFIL*/ [data-tema="escuro"] .portal-pagina .topo__menu { border-color: var(--borda); background-color: var(--superficie); } [data-tema="escuro"] .portal-pagina .topo__menu-item { color: var(--texto); } [data-tema="escuro"] .portal-pagina .topo__menu-item:hover { background-color: var(--realce); } /* ========================================================================== MENU DO QUADRO: BOTAO DE 3 PONTINHOS AO LADO DA BUSCA Exportar, alterar fundo, tickets finalizados — as opcoes de "board" que no Trello ficam atras do menu do quadro. ========================================================================== */ /* ========================================================================== FILTROS DO QUADRO: MEMBROS, PRIORIDADE, UNIDADE E CATEGORIA ========================================================================== */ /*CARD QUE NAO PASSA NO FILTRO: SAI DA TELA, CONTINUA NO QUADRO*/ .card--filtrado { display: none; } .quadro-filtro { position: relative; flex-shrink: 0; } /*BOTAO: MESMO VIDRO BRANCO DA BUSCA E DOS 3 PONTINHOS, SOBRE O DEGRADE*/ .quadro-filtro__botao { display: flex; align-items: center; gap: 0.375rem; height: 2.125rem; box-sizing: border-box; padding: 0 0.625rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background-color: rgba(255, 255, 255, 0.12); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; } .quadro-filtro__botao:hover, .quadro-filtro__botao[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); } /*COM FILTRO LIGADO O BOTAO FICA BRANCO CHEIO: DA PARA VER DE LONGE QUE O QUADRO NAO ESTA MOSTRANDO TUDO. Cores fixas — fica sobre o degrade nos dois temas.*/ .quadro-filtro__botao--ativo, .quadro-filtro__botao--ativo:hover, .quadro-filtro__botao--ativo[aria-expanded="true"] { border-color: #fff; background-color: #fff; color: #c24f00; } .quadro-filtro__contador { display: inline-flex; align-items: center; justify-content: center; min-width: 1.125rem; height: 1.125rem; box-sizing: border-box; padding: 0 0.25rem; border-radius: 999px; background-color: #dd5b12; font-size: 0.625rem; font-weight: 600; font-variant-numeric: tabular-nums; color: #fff; } .quadro-filtro__contador[hidden] { display: none; } .quadro-filtro__painel { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 5; width: 22rem; max-height: min(34rem, calc(70dvh / var(--zoom-portal, 1))); box-sizing: border-box; padding: 0.75rem; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); box-shadow: 0 12px 32px rgba(26, 26, 26, 0.22); overflow-y: auto; } .quadro-filtro__cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.625rem; font-family: "Sora", system-ui, sans-serif; font-size: 0.8125rem; font-weight: 600; color: var(--texto); } .quadro-filtro__limpar { padding: 0; border: 0; background: none; font-family: "Poppins", system-ui, sans-serif; font-size: 0.6875rem; font-weight: 500; color: var(--laranja); cursor: pointer; } .quadro-filtro__limpar:hover:not(:disabled) { text-decoration: underline; } .quadro-filtro__limpar:disabled { color: var(--texto-4); cursor: default; } .quadro-filtro__grupo + .quadro-filtro__grupo { margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid var(--borda-suave); } .quadro-filtro__titulo { margin: 0 0 0.4375rem; font-size: 0.625rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; color: var(--texto-3); } .quadro-filtro__opcoes { display: flex; flex-wrap: wrap; gap: 0.3125rem; } .quadro-filtro__opcao { display: inline-flex; align-items: center; gap: 0.375rem; max-width: 100%; box-sizing: border-box; padding: 0.25rem 0.5625rem; border: 1px solid var(--borda); border-radius: 999px; background-color: var(--superficie); font-family: "Poppins", system-ui, sans-serif; font-size: 0.6875rem; text-align: left; color: var(--texto-2); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .quadro-filtro__opcao:hover { border-color: var(--realce-borda); background-color: var(--realce); color: var(--texto); } .quadro-filtro__opcao--marcada, .quadro-filtro__opcao--marcada:hover { border-color: var(--laranja); background-color: var(--realce); font-weight: 600; color: var(--texto); } /*PRIORIDADE MARCADA: A MESMA COR DA ETIQUETA DO CARD*/ .quadro-filtro__opcao--urgente.quadro-filtro__opcao--marcada { border-color: var(--etiqueta-urgente-texto); background-color: var(--etiqueta-urgente-fundo); color: var(--etiqueta-urgente-texto); } .quadro-filtro__opcao--prioridade.quadro-filtro__opcao--marcada { border-color: var(--etiqueta-prioridade-texto); background-color: var(--etiqueta-prioridade-fundo); color: var(--etiqueta-prioridade-texto); } .quadro-filtro__opcao--normal.quadro-filtro__opcao--marcada { border-color: var(--etiqueta-normal-texto); background-color: var(--etiqueta-normal-fundo); color: var(--etiqueta-normal-texto); } /*FOTO DO MEMBRO DENTRO DA OPCAO*/ .quadro-filtro__avatar { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 1.25rem; height: 1.25rem; margin-left: -0.3125rem; border-radius: 50%; background-color: var(--avatar-fundo); font-family: "Sora", system-ui, sans-serif; font-size: 0.5rem; font-weight: 600; color: var(--avatar-texto); overflow: hidden; } .quadro-filtro__avatar img { width: 100%; height: 100%; object-fit: cover; } /*UNIDADE: DROPDOWN COM BUSCA E CAIXAS DE MARCAR*/ .quadro-filtro__dropdown-botao { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; box-sizing: border-box; padding: 0.4375rem 0.625rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; text-align: left; color: var(--texto-2); cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease; } .quadro-filtro__dropdown-botao:hover { border-color: var(--realce-borda); } .quadro-filtro__dropdown-botao[aria-expanded="true"] { border-color: var(--laranja); } /*COM UNIDADE MARCADA: MESMO DESTAQUE DAS OUTRAS OPCOES MARCADAS*/ .quadro-filtro__dropdown-botao--marcado { border-color: var(--laranja); background-color: var(--realce); font-weight: 600; color: var(--texto); } .quadro-filtro__dropdown-texto { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .quadro-filtro__dropdown-seta { flex-shrink: 0; color: var(--texto-3); transition: transform 0.2s ease; } .quadro-filtro__dropdown-botao[aria-expanded="true"] .quadro-filtro__dropdown-seta { transform: rotate(180deg); } .quadro-filtro__dropdown-painel { margin-top: 0.375rem; border: 1px solid var(--borda); border-radius: 6px; background-color: var(--superficie); overflow: hidden; } .quadro-filtro__dropdown-painel[hidden] { display: none; } .quadro-filtro__dropdown-busca { display: block; width: 100%; box-sizing: border-box; padding: 0.4375rem 0.625rem; border: 0; border-bottom: 1px solid var(--borda-suave); background-color: var(--superficie-3); font-family: "Poppins", system-ui, sans-serif; font-size: 0.75rem; color: var(--texto); } .quadro-filtro__dropdown-busca:focus { outline: none; background-color: var(--superficie); } .quadro-filtro__dropdown-lista { max-height: 12rem; padding: 0.25rem; overflow-y: auto; } .quadro-filtro__dropdown-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.375rem 0.4375rem; border-radius: 5px; font-size: 0.75rem; color: var(--texto); cursor: pointer; } .quadro-filtro__dropdown-item:hover { background-color: var(--superficie-2); } /*display: flex acima venceria o hidden da busca*/ .quadro-filtro__dropdown-item[hidden] { display: none; } .quadro-filtro__dropdown-item input { flex-shrink: 0; margin: 0; accent-color: var(--laranja); cursor: pointer; } .quadro-filtro__dropdown-vazio { margin: 0; padding: 0.625rem; font-size: 0.6875rem; text-align: center; color: var(--texto-4); } @media (prefers-reduced-motion: reduce) { .quadro-filtro__dropdown-seta { transition: none; } } .quadro-menu { position: relative; flex-shrink: 0; } .quadro-menu__botao { display: flex; align-items: center; justify-content: center; width: 2.125rem; height: 2.125rem; border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 6px; background-color: rgba(255, 255, 255, 0.12); color: #fff; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; } .quadro-menu__botao:hover, .quadro-menu__botao[aria-expanded="true"] { background-color: rgba(255, 255, 255, 0.22); border-color: rgba(255, 255, 255, 0.4); } .quadro-menu__painel { position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 5; width: 14rem; padding: 0.3125rem; border: 1px solid var(--borda); border-radius: 8px; background-color: var(--superficie); box-shadow: 0 12px 32px rgba(26, 26, 26, 0.22); } .quadro-menu__item { display: flex; align-items: center; gap: 0.625rem; width: 100%; /*O "Painel" e um , os outros cinco sao