/* ===================================================================== GestELT - estilos Um arquivo so, sem dependencia externa: carrega rapido e funciona mesmo se a internet da clinica estiver ruim. ===================================================================== */ :root { /* --azul e --lateral-fundo sao sobrescritos pelo layout com as cores da clinica ativa. Os valores aqui sao o padrao da plataforma. */ --azul: #2563eb; --lateral-fundo: #111827; --azul-escuro: #1d4ed8; --texto: #1f2937; --texto-fraco: #6b7280; --borda: #e5e7eb; --fundo: #f3f4f6; --branco: #ffffff; --verde: #059669; --vermelho: #dc2626; --amarelo: #d97706; --raio: 8px; /* Verde de botao de acao. Mais fechado que --verde, que e cor de texto e de etiqueta: aqui vai texto branco por cima, e o tom claro nao daria contraste. */ --acao-verde: #15803d; --acao-verde-escuro: #166534; /* Realces e avisos saem daqui para o tema escuro poder trocar todos de uma vez. Cor escrita direto na regra viraria mancha branca no modo noturno. */ --realce: #f9fafb; --realce-azul: #eff6ff; --gengiva: #f7d4d9; --sucesso-fundo: #ecfdf5; --sucesso-borda: #a7f3d0; --sucesso-texto: #065f46; --erro-fundo: #fef2f2; --erro-borda: #fecaca; --erro-texto: #991b1b; --aviso-fundo: #fffbeb; --aviso-borda: #fde68a; --aviso-texto: #92400e; /* Cores dos indicadores do painel. Sao do SISTEMA, nao da clinica: vermelho quer dizer atraso em qualquer lugar. Ficam como variaveis para o tema escuro clarear todas de uma vez. */ --tom-azul: #2563eb; --tom-verde: #059669; --tom-roxo: #7c3aed; --tom-vermelho: #dc2626; --tom-ambar: #d97706; --tom-ciano: #0891b2; --tom-neutro: #64748b; /* Situacoes de atendimento. Cada clinica escolhe as suas em Configuracoes; o layout sobrescreve estas variaveis. Os valores aqui valem para as telas do master e como reserva. */ --status-agendado: #dbeafe; --status-agendado-texto: #1f2937; --status-confirmado: #d1fae5; --status-confirmado-texto: #1f2937; --status-atendido: #e5e7eb; --status-atendido-texto: #1f2937; --status-faltou: #fee2e2; --status-faltou-texto: #1f2937; --status-cancelado: #f3f4f6; --status-cancelado-texto: #1f2937; } /* ------------------------------------------------------------------ */ /* Tema escuro */ /* */ /* Cada usuario escolhe no perfil, e o layout carimba data-tema no */ /* . As cores da CLINICA (--azul, --lateral-fundo) nao mudam: */ /* identidade visual nao e preferencia de quem esta olhando. */ /* */ /* --branco e o nome historico da cor de superficie (painel, tabela, */ /* campo). Redefini-la aqui escurece a interface inteira de uma vez. */ /* ------------------------------------------------------------------ */ html[data-tema="escuro"] { --texto: #e5e7eb; --texto-fraco: #9ca3af; --borda: #374151; --fundo: #0f172a; --branco: #1e293b; --verde: #34d399; --vermelho: #f87171; --amarelo: #fbbf24; --realce: #24324a; --realce-azul: #1e3a5f; --gengiva: #4a2f36; --sucesso-fundo: #064e3b; --sucesso-borda: #065f46; --sucesso-texto: #a7f3d0; --erro-fundo: #4c1d24; --erro-borda: #7f1d1d; --erro-texto: #fecaca; --aviso-fundo: #422f10; --aviso-borda: #78350f; --aviso-texto: #fde68a; /* Sobre fundo escuro as cores fechadas somem: sobem de tom */ --tom-azul: #60a5fa; --tom-verde: #34d399; --tom-roxo: #a78bfa; --tom-vermelho: #f87171; --tom-ambar: #fbbf24; --tom-ciano: #22d3ee; --tom-neutro: #94a3b8; --status-agendado-texto: #111827; --status-confirmado-texto: #111827; --status-atendido-texto: #111827; --status-faltou-texto: #111827; --status-cancelado-texto: #111827; } @media (prefers-color-scheme: dark) { html[data-tema="sistema"] { --texto: #e5e7eb; --texto-fraco: #9ca3af; --borda: #374151; --fundo: #0f172a; --branco: #1e293b; --verde: #34d399; --vermelho: #f87171; --amarelo: #fbbf24; --realce: #24324a; --realce-azul: #1e3a5f; --gengiva: #4a2f36; --sucesso-fundo: #064e3b; --sucesso-borda: #065f46; --sucesso-texto: #a7f3d0; --erro-fundo: #4c1d24; --erro-borda: #7f1d1d; --erro-texto: #fecaca; --aviso-fundo: #422f10; --aviso-borda: #78350f; --aviso-texto: #fde68a; --tom-azul: #60a5fa; --tom-verde: #34d399; --tom-roxo: #a78bfa; --tom-vermelho: #f87171; --tom-ambar: #fbbf24; --tom-ciano: #22d3ee; --tom-neutro: #94a3b8; --status-agendado-texto: #111827; --status-confirmado-texto: #111827; --status-atendido-texto: #111827; --status-faltou-texto: #111827; --status-cancelado-texto: #111827; } } /* ------------------------------------------------------------------ */ /* Tamanho da interface */ /* */ /* zoom cresce letra, botao e espacamento juntos - que e o que a */ /* pessoa quer dizer com "aumenta a tela". Fica no .app para nao */ /* afetar a barra de progresso, que e fixa na janela. */ /* */ /* O fator vai numa variavel, e nao direto no zoom, porque a ALTURA */ /* precisa dele tambem: o zoom multiplica o tamanho ja calculado, */ /* entao um min-height de 100vh com zoom 0.9 desenha 90vh - a barra */ /* lateral parava no meio do caminho e sobrava uma faixa clara no pe */ /* da tela. Nas escalas maiores era o contrario: 125vh desenhados, */ /* com barra de rolagem em pagina que cabia inteira. */ /* */ /* Dividir a altura pelo proprio fator devolve a tela cheia em */ /* qualquer escala - ver .app. */ /* ------------------------------------------------------------------ */ html[data-escala="compacta"] { --escala: 0.9; } html[data-escala="confortavel"] { --escala: 1.1; } html[data-escala="ampliada"] { --escala: 1.25; } * { box-sizing: border-box; margin: 0; padding: 0; } /* O atributo hidden precisa vencer o display do proprio elemento. Sem isto, esconder um bloco com display:flex ou :grid nao surte efeito - e o JavaScript acha que escondeu. */ [hidden] { display: none !important; } /* A cor de fundo no elimina o lampejo branco entre uma pagina e outra: o navegador pinta esta cor, nao o branco padrao. */ html { background: var(--fundo); } body { font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 15px; color: var(--texto); background: var(--fundo); line-height: 1.5; } /* ------------------------------------------------------------------ */ /* Transicao entre telas */ /* ------------------------------------------------------------------ */ /* Navegadores compativeis fazem a troca de documento com fade em vez de corte seco. Onde nao houver suporte, a regra e simplesmente ignorada e o resto do feedback (barra de progresso) continua valendo. */ @view-transition { navigation: auto; } .barra-progresso { position: fixed; top: 0; left: 0; height: 3px; width: 0; background: var(--azul); box-shadow: 0 0 8px rgba(37, 99, 235, .6); z-index: 9999; opacity: 0; transition: width .12s linear, opacity .2s ease; pointer-events: none; } .barra-progresso.ativa { opacity: 1; } .barra-progresso.concluida { transition: width .15s ease-out, opacity .25s ease; opacity: 0; } /* Cursor de espera enquanto a proxima tela nao chega */ html.carregando { cursor: progress; } html.carregando a, html.carregando button { cursor: progress; } /* Conteudo entra suave, o que disfarca o repintar da pagina */ main { animation: surgir .18s ease-out; } @keyframes surgir { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } } /* Quem prefere menos movimento nao recebe animacao nenhuma */ @media (prefers-reduced-motion: reduce) { main { animation: none; } .barra-progresso { transition: none; } } .botao.enviando { opacity: .7; cursor: progress; } a { color: var(--azul); text-decoration: none; } /* ------------------------------------------------------------------ */ /* Estrutura */ /* ------------------------------------------------------------------ */ .app { display: flex; zoom: var(--escala, 1); /* Dividido pela escala: o zoom multiplica depois, e o resultado na tela e 100vh de verdade em qualquer tamanho escolhido */ min-height: calc(100vh / var(--escala, 1)); } .lateral { width: 220px; flex-shrink: 0; background: var(--lateral-fundo); color: #d1d5db; padding: 20px 0; } /* A marca ocupa uma faixa de altura minima e centraliza o que estiver dentro dela - texto ou logo. Sem esse minimo, cada clinica empurrava o menu para uma altura diferente conforme a imagem que enviou. A faixa cresce junto com a logo (--logo-altura, escolhida em Configuracoes) mais o respiro de baixo: com a altura travada em 76px, uma logo de 120px vazava por cima do primeiro item do menu. */ .lateral .marca { display: flex; align-items: center; justify-content: center; min-height: max(76px, calc(var(--logo-altura, 56px) + 20px)); padding: 4px 16px 16px; font-size: 22px; font-weight: 700; color: #fff; text-align: center; line-height: 1.15; /* Nome comprido quebra em vez de vazar para fora da barra */ overflow-wrap: anywhere; } .lateral .marca span { color: #60a5fa; } .lateral nav { display: flex; flex-direction: column; } .lateral nav a { display: flex; align-items: center; gap: 8px; padding: 11px 20px; color: #d1d5db; border-left: 3px solid transparent; } .menu-rotulo { flex: 1; min-width: 0; } /* ------------------------------------------------------------------ */ /* Marcadores de pendencia no menu */ /* */ /* Numero para o que se conta (orcamentos em aberto, agenda do dia) e */ /* ponto para o que so esta ou nao pendente (o caixa do dia). Sao a */ /* mesma informacao do sino, dita no lugar onde a pessoa ja esta */ /* olhando quando decide o que fazer em seguida. */ /* ------------------------------------------------------------------ */ .menu-marcador { flex: 0 0 auto; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font-size: 11px; font-weight: 700; line-height: 1.5; text-align: center; font-variant-numeric: tabular-nums; } /* Rede de seguranca: pilula sem numero nao se desenha. O layout ja manda o marcador com hidden nesse caso; isto cobre o item que chegar vazio. */ .menu-marcador:empty { display: none; } .menu-ponto { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: #ef4444; /* O anel escuro descola o ponto de qualquer cor de barra que a clinica escolher, inclusive de um vermelho parecido */ box-shadow: 0 0 0 2px var(--lateral-fundo); } /* Clareia o item ativo sem depender da cor de fundo escolhida pela clinica */ .lateral nav a:hover { background: rgba(255, 255, 255, .08); color: #fff; } .lateral nav a.ativo { background: rgba(255, 255, 255, .12); color: #fff; border-left-color: var(--azul); font-weight: 600; } .lateral .subtitulo-lateral { padding: 0 20px 16px; margin-top: -14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #9ca3af; } /* object-fit: a logo cabe inteira na faixa, sem esticar nem cortar, seja ela quadrada, larga ou enorme. O teto de altura e da clinica (Configuracoes > Aparencia): a mesma medida serve mal a uma logo em pe e a uma deitada - uma fica ilegivel, a outra deixa sobra em volta. Sem o valor gravado vale o de sempre. */ .logo-clinica { display: block; max-width: 100%; max-height: var(--logo-altura, 56px); width: auto; height: auto; object-fit: contain; margin: 0 auto; } /* Faixa que lembra o master de que ele esta dentro de uma clinica */ .faixa-master { background: var(--aviso-fundo); border-bottom: 1px solid var(--aviso-borda); color: var(--aviso-texto); padding: 8px 24px; font-size: 13px; } .faixa-master a { color: var(--aviso-texto); text-decoration: underline; margin-left: 8px; } .conteudo { flex: 1; display: flex; flex-direction: column; min-width: 0; } .topo { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; background: var(--branco); border-bottom: 1px solid var(--borda); } .topo h1 { font-size: 19px; font-weight: 600; } .usuario { display: flex; align-items: center; gap: 14px; } /* Filho DIRETO: o nome empilhado e alinhado a direita e so o bloco do usuario. Sem o ">", a regra descia para dentro dos menus suspensos e jogava a lista de pendencias inteira contra a margem direita. */ .usuario > span, .usuario > .atalho-perfil { display: flex; flex-direction: column; line-height: 1.2; text-align: right; } .usuario > span > small, .usuario > .atalho-perfil > small { color: var(--texto-fraco); font-size: 12px; } /* O nome no topo abre o perfil: e onde a pessoa procura por isso */ .atalho-perfil { color: var(--texto); } .atalho-perfil:hover strong { color: var(--azul); } /* Separado do resto do menu: nao e area do sistema, e a propria pessoa */ .lateral nav .item-perfil { margin-top: 10px; border-top: 1px solid rgba(255, 255, 255, .12); } main { padding: 24px; flex: 1; } /* ------------------------------------------------------------------ */ /* Indicadores */ /* */ /* A faixa de numeros que abre quase toda tela de lista. Eram caixas */ /* brancas iguais: cinco retangulos que so diziam alguma coisa depois */ /* de lidos, um por um. Agora cada um leva a cor do que mede (--tom, o */ /* mesmo vocabulario dos cartoes do painel) em quatro lugares - faixa */ /* do topo, icone, numero e brilho de fundo. De longe se ve o verde do */ /* que entrou e o vermelho do que venceu sem ler uma palavra. */ /* */ /* O HTML sai todo do parcial Views/_parciais/indicadores.php. */ /* ------------------------------------------------------------------ */ /* O tom padrao mora na SECAO, e nao no indicador: aqui ele so vale por heranca, e a classe tom-* do proprio indicador passa na frente. Declarado em `.indicadores .indicador`, venceria `.tom-verde` por especificidade e a faixa inteira sairia cinza. */ .indicadores { --tom: var(--tom-neutro); display: grid; grid-template-columns: repeat(auto-fit, minmax(186px, 1fr)); gap: 12px; margin-bottom: 24px; } .indicador { position: relative; display: flex; flex-direction: column; padding: 14px 16px 13px; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } /* Faixa da cor no topo, como nos cartoes do painel */ .indicador::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--tom); } /* Brilho diluido do mesmo tom: cor sem precisar de um fundo por tema - a opacidade resolve no claro e no escuro */ .indicador::after { content: ""; position: absolute; top: -40px; right: -40px; width: 108px; height: 108px; border-radius: 50%; background: var(--tom); opacity: .10; pointer-events: none; transition: opacity .15s ease; } /* Altura de duas linhas de rotulo, sempre: "Diferencas de conferencia" quebra em duas e "Entradas" nao, e sem isto os numeros da mesma faixa ficariam cada um em uma altura */ .indicador-topo { display: flex; align-items: center; gap: 8px; min-height: 30px; } .indicador-icone { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 9px; background: var(--tom); color: #fff; flex-shrink: 0; } .indicador-icone svg { width: 16px; height: 16px; } /* No tema escuro os tons clareiam, e o branco do simbolo some dentro do ambar e do ciano. Ali o desenho vira escuro. */ html[data-tema="escuro"] .indicador-icone { color: var(--fundo); } .indicador .rotulo { display: block; color: var(--texto-fraco); font-size: 12.5px; font-weight: 600; line-height: 1.2; } .indicador .numero { display: block; margin-top: 10px; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--tom); font-variant-numeric: tabular-nums; /* Valor em reais nao pode vazar da caixa em tela estreita */ overflow-wrap: anywhere; } /* Quando o lugar do numero traz texto - uma data, um nome - o tamanho de numero grande so atrapalha a leitura */ .indicador .numero.curto { font-size: 17px; line-height: 1.25; } .indicador-valor { margin-top: 1px; font-size: 13.5px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .indicador .dica { margin-top: 2px; font-size: 11.5px; } /* Cor da situacao: a que a tela escolhe caso a caso perde para estas duas, que valem por si - vermelho para o que pede providencia. */ .indicador.atencao { --tom: var(--tom-vermelho); } /* O numero que resume os outros da faixa: o mesmo tom, com mais peso */ .indicador.destaque { box-shadow: 0 0 0 1px var(--tom); } .indicador.destaque::before { height: 5px; } .indicador.destaque::after { opacity: .16; } /* ------------------------------------------------------------------ */ /* Indicador que tambem e filtro */ /* */ /* Na lista de orcamentos clicar em "Contratados" filtra a tabela de */ /* baixo. O hover e o recorte aberto falam pela cor do proprio */ /* indicador, e nao pelo azul do sistema: o filtro ativo se reconhece */ /* pelo tom que ja estava ali - senao a lista mostra um subconjunto */ /* sem dizer de onde ele veio. */ /* ------------------------------------------------------------------ */ a.indicador { color: inherit; } a.indicador:hover, a.indicador:focus-visible { border-color: var(--tom); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(17, 24, 39, .12); } a.indicador:hover::after, a.indicador:focus-visible::after { opacity: .16; } a.indicador.ativo { border-color: var(--tom); box-shadow: 0 0 0 1px var(--tom); } a.indicador.ativo::before { height: 5px; } a.indicador.ativo::after { opacity: .18; } /* Faixa apertada: dentro de um painel, ou com muitos indicadores */ .indicadores.compacta { grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 10px; } .indicadores.compacta .indicador { padding: 12px 14px 11px; } .indicadores.compacta .numero { margin-top: 8px; font-size: 22px; } /* ------------------------------------------------------------------ */ /* Cartoes do painel */ /* */ /* Cada cartao e um link para o modulo, com a cor do que ele mede: o */ /* dinheiro em verde, o atraso em vermelho. A cor entra em tres */ /* lugares (faixa, icone e numero) a partir de --tom, entao trocar a */ /* cor de um indicador e trocar uma linha. */ /* ------------------------------------------------------------------ */ .cartoes-painel { display: grid; grid-template-columns: repeat(auto-fit, minmax(212px, 1fr)); gap: 16px; margin-bottom: 24px; } .cartao-painel { --tom: var(--tom-neutro); position: relative; display: flex; flex-direction: column; padding: 18px 18px 14px; background: var(--branco); border: 1px solid var(--borda); border-radius: 14px; color: var(--texto); overflow: hidden; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .tom-azul { --tom: var(--tom-azul); } .tom-verde { --tom: var(--tom-verde); } .tom-roxo { --tom: var(--tom-roxo); } .tom-vermelho { --tom: var(--tom-vermelho); } .tom-ambar { --tom: var(--tom-ambar); } .tom-ciano { --tom: var(--tom-ciano); } .tom-neutro { --tom: var(--tom-neutro); } /* Faixa da cor no topo do cartao */ .cartao-painel::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--tom); } /* Brilho diluido da mesma cor: da vida ao cartao sem precisar de um fundo por tema - a opacidade resolve no claro e no escuro */ .cartao-painel::after { content: ""; position: absolute; top: -46px; right: -46px; width: 132px; height: 132px; border-radius: 50%; background: var(--tom); opacity: .12; pointer-events: none; } .cartao-painel:hover, .cartao-painel:focus-visible { transform: translateY(-2px); border-color: var(--tom); box-shadow: 0 10px 24px rgba(17, 24, 39, .13); } .cartao-painel.com-detalhe { cursor: pointer; } .cartao-cabecalho { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .cartao-icone { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--tom); color: #fff; flex-shrink: 0; } .cartao-icone svg { width: 19px; height: 19px; } .cartao-rotulo { font-size: 13px; font-weight: 600; color: var(--texto-fraco); line-height: 1.2; } .cartao-valor { font-size: 30px; font-weight: 700; line-height: 1.15; color: var(--tom); font-variant-numeric: tabular-nums; /* Valor em reais nao pode vazar do cartao em telas estreitas */ overflow-wrap: anywhere; } .cartao-dica { margin-top: 3px; font-size: 12px; color: var(--texto-fraco); } .cartao-acao { margin-top: 12px; font-size: 12px; font-weight: 600; color: var(--tom); opacity: .8; } .cartao-painel:hover .cartao-acao { opacity: 1; } /* Detalhe do indicador: tabela larga, que rola dentro do proprio modal */ .dialogo-detalhe { max-width: 940px; } .dialogo-detalhe .barra-acoes { margin-bottom: 10px; } .dialogo-detalhe h2 { color: var(--tom); } .dialogo-detalhe .tabela { max-height: 60vh; overflow-y: auto; } /* Possivel paciente em dobro: o bloco precisa parar o olho antes do formulario, sem parecer um erro - nao e proibicao, e conferencia */ .aviso-duplicidade { border-left: 4px solid var(--amarelo); margin-bottom: 20px; } .aviso-duplicidade h2 { color: var(--aviso-texto); } .lista-semelhantes { list-style: none; font-size: 14px; } .lista-semelhantes li { padding: 6px 0; border-bottom: 1px solid var(--borda); } .lista-semelhantes li:last-child { border-bottom: none; } /* ------------------------------------------------------------------ */ /* Grafico de receitas por profissional (painel) */ /* */ /* Barras em HTML puro, sem biblioteca de grafico: sao cinco linhas de */ /* CSS, imprimem bem e nao dependem de nada baixado da internet - que */ /* e a mesma razao de o sistema inteiro nao ter dependencia externa. */ /* ------------------------------------------------------------------ */ .barras-receita { list-style: none; display: grid; gap: 16px; } .barra-topo { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 5px; font-size: 14px; } .barra-nome { display: flex; align-items: center; gap: 7px; font-weight: 600; } .barra-numeros { display: flex; align-items: baseline; gap: 8px; white-space: nowrap; } .barra-numeros .dica { font-size: 13px; } .barra-trilho { background: var(--realce); border-radius: 999px; height: 16px; overflow: hidden; } .barra-bruto { display: block; height: 100%; border-radius: 999px; /* Barra de valor baixo nao pode sumir: sem o minimo, o profissional que recebeu R$ 40 num mes de R$ 40 mil viraria uma linha invisivel e pareceria nao ter recebido nada */ min-width: 3px; transition: width .25s ease; } /* A parte que volta ao profissional, desenhada dentro do proprio bruto: escurece o pedaco em vez de somar uma segunda barra ao lado, porque o repasse e uma FATIA daquele valor, e nao um valor a mais */ .barra-repasse { display: block; height: 100%; border-radius: 999px 0 0 999px; background: rgba(0, 0, 0, .38); } .barra-rodape { display: block; margin-top: 5px; } .legenda-grafico { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--borda); color: var(--texto-fraco); font-size: 13px; } .legenda-grafico .amostra { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: middle; } .legenda-grafico .amostra-bruto { background: var(--tom-azul); } /* A mesma composicao da barra - cor de base com o escurecimento por cima - em vez de uma cor fechada: assim a amostra continua igual ao desenho no tema escuro, que troca --tom-azul por um azul mais claro */ .legenda-grafico .amostra-repasse { background: var(--tom-azul); box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .38); margin-left: 10px; } /* O seletor de periodo do grafico nao pode empurrar o titulo para fora da tela no celular */ .seletor-visao { flex-wrap: wrap; } .seletor-visao .botao { padding: 6px 12px; font-size: 13px; } /* Pendencia que trava o sistema: alerta com a acao ao lado */ .faixa-pendencia { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; } /* ------------------------------------------------------------------ */ /* Blocos e tabelas */ /* ------------------------------------------------------------------ */ .painel { background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); padding: 20px; } .painel h2 { font-size: 16px; font-weight: 600; margin-bottom: 14px; } .painel.centralizado { text-align: center; padding: 48px 20px; } .painel.centralizado .botao { margin-top: 16px; } .vazio { color: var(--texto-fraco); } /* ------------------------------------------------------------------ */ /* Painel com cabecalho e corpo */ /* */ /* O bloco comum tem titulo, botoes e conteudo no mesmo espaco - e em */ /* telas com muita informacao (o orcamento, por exemplo) a barra de */ /* acoes se mistura com a ficha logo abaixo. Aqui o cabecalho vira uma */ /* faixa propria: identificacao a esquerda, o que da para fazer a */ /* direita, e uma linha separando dos dados. */ /* ------------------------------------------------------------------ */ .painel-cartao { padding: 0; overflow: hidden; } .painel-cabecalho { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px; background: var(--realce); border-bottom: 1px solid var(--borda); } .painel-titulo { min-width: 0; } .painel-titulo h2 { margin-bottom: 2px; } .painel-subtitulo { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13px; color: var(--texto-fraco); } .painel-corpo { padding: 20px; } /* Botao de dentro de linha de tabela: o tamanho cheio empurraria a linha para 50px de altura so por causa dele */ .botao.compacto { padding: 5px 11px; font-size: 13px; font-weight: 500; } /* Acoes na linha ficam lado a lado. Empilhadas - que e o que a quebra automatica faz numa coluna estreita - elas dobram a altura da linha e desalinham a tabela inteira; a tabela ja rola na horizontal. */ .tabela .grupo-botoes { flex-wrap: nowrap; } /* Tabela larga rola dentro do proprio bloco, sem quebrar a pagina */ .tabela { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; } .tabela th, .tabela td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--borda); white-space: nowrap; } .tabela th { font-size: 12px; text-transform: uppercase; letter-spacing: .03em; color: var(--texto-fraco); } .tabela tbody tr:hover { background: var(--realce); } /* ------------------------------------------------------------------ */ /* Tabela de listagem */ /* */ /* A lista de registros e a tela em que a pessoa passa o dia. A tabela */ /* solta - linhas coladas, cabecalho sem peso, tudo do mesmo tamanho - */ /* obriga a ler celula por celula para achar um orcamento. Aqui a */ /* linha ganha ar, o cabecalho ganha fundo e cada celula diz o que ela */ /* e: identificacao em cima, contexto embaixo, em letra menor. */ /* ------------------------------------------------------------------ */ .tabela-quadro { border: 1px solid var(--borda); border-radius: var(--raio); overflow-x: auto; background: var(--branco); } /* Dentro do quadro quem rola e o quadro: a tabela volta a ser tabela */ .tabela-quadro .tabela { display: table; overflow: visible; } /* ------------------------------------------------------------------ */ /* So a rolagem, sem a moldura */ /* */ /* Para a tabela que ja mora dentro de um painel e so precisa caber: */ /* numa coluna estreita (o caixa, com a lateral de apoio ao lado) as */ /* colunas nao cabiam e a tabela invadia a coluna vizinha. Aqui ela */ /* volta a ser de verdade - o algoritmo de tabela negocia a */ /* largura das colunas - e quem rola na horizontal e este quadro. */ /* ------------------------------------------------------------------ */ .tabela-rolagem { overflow-x: auto; } .tabela-rolagem .tabela { display: table; overflow: visible; } .tabela-lista thead th { padding: 11px 14px; background: var(--realce); border-bottom: 1px solid var(--borda); font-size: 11.5px; font-weight: 700; } .tabela-lista tbody td { padding: 12px 14px; vertical-align: middle; } .tabela-lista tbody tr:last-child td { border-bottom: none; } .tabela-lista tbody tr { transition: background .12s ease; } /* Nome do paciente, numero do orcamento: o que se procura na varredura. Como link, ele nao fica azul: a linha inteira e clicavel e uma coluna de nomes azuis vira ruido. O azul volta no hover, dizendo que clica. */ .tabela-lista .celula-forte { font-weight: 600; color: var(--texto); } .tabela-lista a.celula-forte:hover { color: var(--azul); text-decoration: underline; } .tabela-lista .celula-fraca { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-fraco); font-weight: 400; } .tabela-lista .celula-valor { font-size: 15px; font-weight: 700; } .tabela-lista .texto-quitado { color: var(--verde); font-weight: 600; } /* A coluna de acoes so aparece de verdade na linha em que o ponteiro esta - fora dela, fica discreta para nao competir com o conteudo */ .tabela-lista .celula-acoes { text-align: right; } .tabela-lista .celula-acoes .botao { opacity: .7; } .tabela-lista tr:hover .celula-acoes .botao, .tabela-lista .celula-acoes .botao:focus-visible { opacity: 1; } /* Quanto do orcamento ja foi pago, em uma olhada */ .barra-pagamento { display: block; width: 120px; height: 6px; margin-top: 5px; border-radius: 999px; background: var(--borda); overflow: hidden; } .barra-pagamento i { display: block; height: 100%; border-radius: 999px; background: var(--verde); } .barra-pagamento.parcial i { background: var(--amarelo); } .barra-pagamento.largura-total { width: 100%; height: 8px; margin: 4px 0 0; } /* ------------------------------------------------------------------ */ /* Resumo do contrato (lateral do orcamento contratado) */ /* ------------------------------------------------------------------ */ .resumo-contrato { display: flex; flex-direction: column; gap: 2px; } .resumo-contrato > div { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--borda); } .resumo-contrato dt { font-size: 13px; color: var(--texto-fraco); } .resumo-contrato dd { font-size: 15px; font-weight: 600; } .resumo-contrato .linha-paga dd { color: var(--verde); } /* O que falta e a linha que interessa: fica maior, e em vermelho enquanto houver saldo */ .resumo-contrato .linha-resto { border-bottom: none; } .resumo-contrato .linha-resto dt { font-weight: 600; color: var(--texto); } .resumo-contrato .linha-resto dd { font-size: 18px; font-weight: 700; } .resumo-contrato .linha-resto.devendo dd { color: var(--vermelho); } /* ------------------------------------------------------------------ */ /* Etiquetas de status */ /* ------------------------------------------------------------------ */ .etiqueta { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; background: var(--fundo); color: var(--texto-fraco); } .etiqueta.agendado { background: var(--status-agendado); color: var(--status-agendado-texto); } .etiqueta.confirmado { background: var(--status-confirmado); color: var(--status-confirmado-texto); } .etiqueta.atendido { background: var(--status-atendido); color: var(--status-atendido-texto); } .etiqueta.faltou { background: var(--status-faltou); color: var(--status-faltou-texto); } .etiqueta.cancelado { background: var(--status-cancelado); color: var(--status-cancelado-texto); text-decoration: line-through; } /* Situacoes do financeiro. Nao saem das cores de atendimento (que a clinica configura): conta vencendo hoje e conta paga pela metade sao do sistema, e a cor tem que dizer a mesma coisa em toda clinica. */ .etiqueta.vence-hoje { background: var(--aviso-fundo); color: var(--aviso-texto); } .etiqueta.parcial { background: var(--realce-azul); color: var(--azul); } /* A linha que vence hoje fica marcada sem gritar: vencida ja usa o vermelho, e as duas no mesmo tom se confundiriam na varredura */ .linha-vence-hoje { background: var(--aviso-fundo); } /* ------------------------------------------------------------------ */ /* Botoes, formularios e alertas */ /* ------------------------------------------------------------------ */ .botao { display: inline-block; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--raio); font-size: 14px; font-weight: 600; cursor: pointer; text-align: center; } .botao.principal { background: var(--azul); color: #fff; } .botao.principal:hover { background: var(--azul-escuro); } .botao.secundario { background: var(--branco); color: var(--texto); border-color: var(--borda); } .botao.secundario:hover { background: var(--fundo); } /* Acao de criar numa tela onde o azul ja quer dizer OUTRA coisa. Na agenda o azul marca onde voce esta - hoje, a visao atual, o dia escolhido -, e mais um bloco azul ao lado deles some no meio. O verde e o mesmo do resto do sistema (--acao-verde), escuro o bastante para o texto branco passar no contraste. */ .botao.acao-nova { background: var(--acao-verde); color: #fff; } .botao.acao-nova:hover { background: var(--acao-verde-escuro); } .largura-total { width: 100%; } /* Botao travado precisa PARECER travado. Um "Avancar" azul e cheio que nao responde ao clique passa por tela quebrada; apagado, ele mesmo diz que ainda falta alguma coisa acima dele. */ .botao:disabled, .botao[disabled] { opacity: .45; cursor: not-allowed; /* Sem isto o hover ainda escurece o botao e promete um clique que nao vai acontecer */ pointer-events: none; } /* A situacao de agora, no meio dos botoes que mudam de situacao. Tem a forma de botao para a fila nao quebrar, mas nao e clicavel: verde diz "e aqui que este registro esta", e nao "clique para chegar aqui". */ .botao.situacao-atual { background: var(--sucesso-fundo); /* Borda no verde cheio, e nao no verde claro do fundo: e o que faz a situacao de agora saltar no meio dos botoes brancos */ border-color: var(--verde); color: var(--sucesso-texto); cursor: default; margin-bottom: 8px; } label { display: block; margin: 14px 0 5px; font-size: 13px; font-weight: 600; } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="time"], input[type="number"], select, textarea { width: 100%; padding: 9px 11px; border: 1px solid var(--borda); border-radius: var(--raio); font-size: 15px; font-family: inherit; background: var(--branco); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .alerta { padding: 11px 14px; border-radius: var(--raio); margin-bottom: 16px; font-size: 14px; border: 1px solid; } .alerta.sucesso { background: var(--sucesso-fundo); border-color: var(--sucesso-borda); color: var(--sucesso-texto); } .alerta.erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-texto); } .alerta.aviso { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso-texto); } /* ------------------------------------------------------------------ */ /* Aviso flutuante - o retorno de "salvou", "excluiu", "nao deu" */ /* */ /* A faixa dentro do
empurrava a tela para baixo bem na hora do */ /* clique seguinte, e so saia na proxima navegacao. Como notificacao */ /* ela passa por cima: nada se desloca e ela mesma se despede. */ /* */ /* O relogio e daqui, e nao do JavaScript: mesmo sem script o aviso */ /* aparece e some na hora certa. O .alerta acima continua existindo - */ /* ele e o recado que pertence a um lugar da pagina (dentro de um */ /* dialogo, acima de um formulario) e por isso fica onde esta. */ /* */ /* Fixo na janela, fora do .app: o zoom da preferencia de tamanho */ /* arrastaria a caixa para longe do canto conforme a escala escolhida. */ /* ------------------------------------------------------------------ */ .avisos { position: fixed; /* O canto e escolha de cada um, em Meu perfil (ver .avisos-* abaixo). Estes valores sao o que sobra se a classe do canto faltar. */ bottom: 16px; left: 16px; z-index: 90; display: flex; flex-direction: column; gap: 10px; /* A coluna passa por cima do menu; sem isto ela roubaria o clique dos itens debaixo mesmo depois do aviso ter apagado */ pointer-events: none; } /* --aviso-desloca: de que lado a caixa entra e sai. Quem nasce a direita deslizando para a esquerda parece ter vindo do meio da tela. */ .avisos-superior-esquerdo { top: 16px; bottom: auto; left: 16px; right: auto; } .avisos-inferior-esquerdo { top: auto; bottom: 16px; left: 16px; right: auto; } .avisos-superior-direito, .avisos-inferior-direito { --aviso-desloca: 16px; left: auto; right: 16px; align-items: flex-end; } .avisos-superior-direito { top: 16px; bottom: auto; } /* Em baixo a direita mora o botao de ajuda: a coluna comeca acima dele (22 de margem + 48 do botao + respiro) em vez de cobri-lo */ .avisos-inferior-direito { top: auto; bottom: 82px; } /* Preso a .avisos de proposito. Solto, ".aviso" tambem pegava o recado que fica DENTRO da pagina - o "alerta aviso" amarelo do caixa bloqueado, do a receber, do lancamento. Aqueles viravam uma caixa de 340px em display:flex (com o texto quebrado em colunas, cada trecho virando um item do flex) e, pior, herdavam a animacao de saida: o recado da tela sumia sozinho depois de cinco segundos. Recado da pagina fica; notificacao e que se despede. */ .avisos .aviso { --aviso-tempo: 5s; position: relative; display: flex; align-items: flex-start; gap: 10px; width: 340px; max-width: calc(100vw - 32px); padding: 12px 38px 14px 14px; border: 1px solid; border-radius: 12px; box-shadow: 0 14px 34px rgba(17, 24, 39, .24); font-size: 14px; line-height: 1.45; overflow: hidden; pointer-events: auto; animation: aviso-entrar .18s ease-out, aviso-sair .45s ease-in var(--aviso-tempo) forwards; } /* Erro fica mais tempo: dar certo se entende de relance, dar errado precisa ser lido ate o fim */ .aviso-erro { --aviso-tempo: 9s; } .aviso-sucesso { background: var(--sucesso-fundo); border-color: var(--sucesso-borda); color: var(--sucesso-texto); } .aviso-erro { background: var(--erro-fundo); border-color: var(--erro-borda); color: var(--erro-texto); } .aviso-atencao { background: var(--aviso-fundo); border-color: var(--aviso-borda); color: var(--aviso-texto); } .aviso-icone { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-top: 1px; border: 1.5px solid currentColor; border-radius: 50%; font-size: 12px; font-weight: 700; line-height: 1; } .aviso-texto { flex: 1; } .aviso-fechar { position: absolute; top: 7px; right: 7px; width: 24px; height: 24px; padding: 0; border: none; border-radius: 6px; background: transparent; color: inherit; font: inherit; font-size: 18px; line-height: 1; opacity: .6; cursor: pointer; } /* Fundo do hover pela variavel do tema: uma sombra preta fixa nao apareceria na caixa escura do tema noturno */ .aviso-fechar:hover { opacity: 1; background: var(--borda); } /* A barrinha que escorre ate o fim: o aviso sumir sozinho assusta menos quando da para ver que ele estava contando */ .aviso-tempo { position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: currentColor; opacity: .3; transform-origin: left center; animation: aviso-tempo var(--aviso-tempo) linear forwards; } @keyframes aviso-entrar { from { opacity: 0; transform: translateX(var(--aviso-desloca, -16px)); } to { opacity: 1; transform: none; } } @keyframes aviso-sair { /* pointer-events junto: apagado e sem sair do lugar, ele ainda engoliria o clique de quem ja mirou o menu embaixo */ to { opacity: 0; transform: translateX(var(--aviso-desloca, -16px)); pointer-events: none; } } @keyframes aviso-apagar { to { opacity: 0; pointer-events: none; } } @keyframes aviso-tempo { from { transform: scaleX(1); } to { transform: scaleX(0); } } /* Saida na hora, pelo X. * * Nome PROPRIO de animacao, de proposito: repetindo "aviso-sair" aqui o * navegador entende que e a mesma animacao de sempre, so com outra * duracao, e aproveita o tempo que ela ja tinha corrido - quem tivesse * lido o aviso por dois segundos veria a saida nascer terminada, sem o * animationend que tira a caixa do lugar. Com outro nome ela comeca do * zero, que e o que "fechar agora" quer dizer. */ .avisos .aviso.fechando { animation: aviso-fechar .2s ease-in forwards; } .avisos .aviso.fechando .aviso-tempo { animation: none; opacity: 0; } @keyframes aviso-fechar { to { opacity: 0; transform: translateX(var(--aviso-desloca, -16px)); pointer-events: none; } } @keyframes aviso-fechar-suave { to { opacity: 0; pointer-events: none; } } @media (prefers-reduced-motion: reduce) { /* Sumir nao e enfeite, e o combinado - fica. O que sai e o deslize */ .avisos .aviso { animation: none, aviso-apagar .45s ease-in var(--aviso-tempo) forwards; } .avisos .aviso.fechando { animation: aviso-fechar-suave .2s ease-in forwards; } } /* ------------------------------------------------------------------ */ /* Tela de login */ /* ------------------------------------------------------------------ */ .tela-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: #111827; padding: 20px; } .cartao-login { width: 100%; max-width: 380px; background: var(--branco); border-radius: 12px; padding: 32px; box-shadow: 0 10px 30px rgba(0, 0, 0, .3); } .cartao-login .marca { font-size: 28px; font-weight: 700; text-align: center; } .cartao-login .marca span { color: var(--azul); } .cartao-login .subtitulo { text-align: center; color: var(--texto-fraco); font-size: 14px; margin-bottom: 22px; } .cartao-login .botao { margin-top: 22px; } /* Marca da clinica no lugar do nome escrito. O tamanho vem de --logo-altura, a mesma medida que a clinica escolhe em Configuracoes para a barra lateral - um numero so, valendo nos dois lugares. */ .cartao-login .marca-com-logo { margin-bottom: 22px; } .rodape-login { margin-top: 20px; text-align: center; font-size: 13px; } .rodape-login a { color: var(--texto-fraco); text-decoration: none; } .rodape-login a:hover { color: var(--azul); text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Escolha da clinica (a tela anterior ao login) */ /* */ /* Lista, e nao . Nao confundir com */ /* .busca, que e a barra de filtros das listagens: os dois ja tiveram */ /* o mesmo nome e as regras se atropelavam. */ /* ------------------------------------------------------------------ */ .campo-busca { position: relative; } /* O select continua na pagina guardando o valor, so nao aparece */ .busca-original { display: none; } .busca-lista { position: absolute; z-index: 20; top: calc(100% + 2px); left: 0; right: 0; max-height: 260px; overflow-y: auto; list-style: none; background: var(--branco); border: 1px solid var(--borda); border-radius: var(--raio); box-shadow: 0 8px 20px rgba(17, 24, 39, .12); } .busca-item { padding: 8px 12px; cursor: pointer; font-size: 14px; } .busca-item:hover, .busca-item.ativo { background: var(--realce-azul); } .busca-nada { padding: 8px 12px; font-size: 13px; color: var(--texto-fraco); } /* Atalho de cadastro rapido, embaixo do campo de paciente */ .atalho-novo-paciente { margin-top: 6px; } .atalho-novo-paciente .botao { padding: 6px 12px; font-size: 13px; } .dialogo-estreito { max-width: 560px; } .dialogo .alerta { margin: 14px 0 0; } /* ------------------------------------------------------------------ */ /* Log do sistema */ /* ------------------------------------------------------------------ */ .filtros-log { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 16px; } /* Mesmo problema da barra de busca: 130px para tudo espremia a escolha de categoria ("Material de consumo") num campo onde so cabia "Mate". Marcacao fica de fora: uma caixa de marcar com largura minima de 150px se descola do proprio rotulo. */ .filtros-log input:not([type="checkbox"]):not([type="radio"]) { width: auto; flex: 0 1 auto; min-width: 150px; } .filtros-log select { width: auto; flex: 0 1 220px; min-width: 170px; } /* Atalhos de periodo: um controle de tres posicoes antes dos campos de data. Nao encolhe junto com o resto - "Hoje / Este mes / Ano todo" nao tem como ser abreviado. */ .filtros-log .atalhos-periodo { flex: 0 0 auto; } .filtros-log input[type="text"]:not([data-mascara="data"]) { flex: 1 1 200px; min-width: 190px; } .filtros-log .botao { flex: 0 0 auto; } .tabela-log { font-size: 13px; } .tabela-log td { vertical-align: top; } .nao-quebra { white-space: nowrap; } .tabela-log details summary { cursor: pointer; color: var(--azul); font-size: 12px; } .json-log { margin-top: 6px; padding: 8px 10px; background: #111827; color: #e5e7eb; border-radius: var(--raio); font-family: Consolas, "Courier New", monospace; font-size: 11px; line-height: 1.45; max-width: 460px; max-height: 260px; overflow: auto; white-space: pre; } /* ------------------------------------------------------------------ */ /* Grafico de barras dos relatorios */ /* ------------------------------------------------------------------ */ .grafico-barras { list-style: none; } .grafico-barras li { display: grid; grid-template-columns: 110px 1fr 120px; align-items: center; gap: 10px; padding: 4px 0; font-size: 13px; } .barra-trilho { background: var(--fundo); border-radius: 4px; height: 16px; overflow: hidden; } .barra-valor { display: block; height: 100%; background: var(--azul); border-radius: 4px; } .barra-numero { text-align: right; font-variant-numeric: tabular-nums; } .barra-rotulo { color: var(--texto-fraco); } /* ------------------------------------------------------------------ */ /* Perfil: ordem do menu */ /* ------------------------------------------------------------------ */ .lista-menu { list-style: none; margin-top: 6px; } .lista-menu li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 6px; background: var(--branco); cursor: grab; } .lista-menu li.arrastando { opacity: .5; border-style: dashed; } .lista-menu .opcao { flex: 1; } .lista-menu .dica { margin: 0; } .menu-arrastar { color: var(--texto-fraco); letter-spacing: -3px; cursor: grab; user-select: none; } .menu-acoes { display: flex; gap: 4px; } .menu-acoes .botao { padding: 4px 10px; } /* ------------------------------------------------------------------ */ /* Campo de data com calendario */ /* ------------------------------------------------------------------ */ .campo-data { position: relative; display: block; } .campo-data input[type="text"] { padding-right: 40px; } /* O seletor nativo existe so para abrir o calendario do navegador */ .campo-data-nativo { position: absolute; right: 8px; bottom: 0; width: 1px; height: 1px; padding: 0; border: none; opacity: 0; pointer-events: none; } .campo-data-botao { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: none; border-radius: 6px; background: none; color: var(--texto-fraco); cursor: pointer; } .campo-data-botao:hover { background: var(--fundo); color: var(--azul); } .campo-data-botao svg { width: 18px; height: 18px; } /* Data que nao existe no calendario */ .campo-invalido, .campo-invalido:focus { border-color: var(--vermelho); box-shadow: 0 0 0 3px rgba(220, 38, 38, .15); } /* Em barras horizontais o campo nao pode esticar - mas tambem nao pode encolher abaixo de "dd/mm/aaaa" mais o botao do calendario, que e o que sobrava quando so havia "width: auto". */ .linha-inline .campo-data, .filtros-log .campo-data { display: inline-block; width: auto; min-width: 155px; } .linha-inline .campo-data input[type="text"], .filtros-log .campo-data input[type="text"] { width: 100%; min-width: 0; } /* ------------------------------------------------------------------ */ /* Financeiro: caixa e lancamentos */ /* ------------------------------------------------------------------ */ /* Barra do modulo: abas a esquerda, estado do caixa a direita. O estado fica visivel em toda tela do financeiro porque e dele que depende poder receber e pagar. */ .barra-financeiro { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; border-bottom: 2px solid var(--borda); } .barra-financeiro .abas-links { margin-bottom: 0; border-bottom: none; } .chip-caixa { display: inline-flex; align-items: center; gap: 4px; margin-bottom: 8px; padding: 5px 12px; border: 1px solid var(--borda); border-radius: 999px; background: var(--branco); font-size: 13px; font-weight: 600; color: var(--texto); white-space: nowrap; } .chip-caixa.aberto { border-color: var(--sucesso-borda); background: var(--sucesso-fundo); color: var(--sucesso-texto); } .chip-caixa.fechado { border-color: var(--erro-borda); background: var(--erro-fundo); color: var(--erro-texto); } a.chip-caixa:hover { filter: brightness(.97); } .etiqueta.caixa-aberto { background: var(--sucesso-fundo); color: var(--sucesso-texto); } .etiqueta.caixa-fechado { background: var(--fundo); color: var(--texto-fraco); } /* Faixa do painel: o estado do caixa e a primeira coisa da tela */ .faixa-caixa { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 20px; padding: 14px 18px; } .valor-positivo { color: var(--verde); } .valor-negativo { color: var(--vermelho); } .titulo-dia { font-size: 16px; margin-left: 6px; } /* Movimento cancelado continua na lista, apagado: o caixa do dia tem que continuar explicavel depois. */ .linha-cancelada { opacity: .55; } .linha-cancelada td:not(:last-child) { text-decoration: line-through; } /* Reabertura salta aos olhos no historico */ .linha-reabertura { background: var(--aviso-fundo); } /* ------------------------------------------------------------------ */ /* Conferencia do fechamento */ /* */ /* Uma linha por forma de pagamento: a esquerda o que o sistema */ /* calculou, a direita o campo com o que a pessoa contou. A diferenca */ /* fica logo abaixo do campo, em pastilha, porque e o unico numero que */ /* decide se o dia fechou certo. */ /* ------------------------------------------------------------------ */ .conferencia-formas { border: 1px solid var(--borda); border-radius: var(--raio); overflow: hidden; } .linha-conferencia { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 11px 14px; border-bottom: 1px solid var(--borda); } .linha-conferencia:last-child { border-bottom: none; } .linha-conferencia:nth-child(even) { background: var(--realce); } .conf-forma { min-width: 120px; flex: 1 1 130px; } .conf-forma label { margin: 0; font-size: 14px; } .conf-forma .dica { display: block; font-size: 12px; } .conf-forma .dica strong { color: var(--texto); font-weight: 600; } .conf-contado { flex: 0 0 auto; text-align: right; } /* Campo de dinheiro: o "R$" fica dentro da moldura, e o valor alinhado a direita - assim os numeros de todas as formas batem na vertical */ .campo-moeda { display: flex; align-items: center; gap: 4px; padding: 0 10px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); transition: border-color .15s ease, box-shadow .15s ease; } .campo-moeda:focus-within { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .campo-moeda .prefixo { font-size: 12px; font-weight: 600; color: var(--texto-fraco); } .campo-moeda input[type="text"] { width: 108px; padding: 8px 0; border: none; background: transparent; text-align: right; font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .campo-moeda input[type="text"]:focus { outline: none; box-shadow: none; } /* Pastilha da diferenca: verde quando bate, vermelha quando falta, ambar quando sobra - sobra tambem e erro de conferencia */ .marca-diferenca { display: inline-block; margin-top: 5px; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.6; } .marca-diferenca:empty { display: none; } .marca-diferenca.confere { background: var(--sucesso-fundo); color: var(--sucesso-texto); } .marca-diferenca.falta { background: var(--erro-fundo); color: var(--erro-texto); } .marca-diferenca.sobra { background: var(--aviso-fundo); color: var(--aviso-texto); } /* Na lateral da tela do caixa nao cabe rotulo e campo lado a lado: o campo desce e ocupa a coluna inteira, em vez de espremer os dois */ .coluna-lateral .conf-contado { flex: 1 1 100%; } .coluna-lateral .campo-moeda input[type="text"] { width: 100%; } /* ------------------------------------------------------------------ */ /* Fechar o caixa atrasado direto do chip */ /* ------------------------------------------------------------------ */ .dialogo-fechar-caixa { max-width: 580px; max-height: 88vh; overflow-y: auto; } .dialogo-fechar-caixa .alerta { margin: 14px 0; } .dialogo-fechar-caixa .titulo-bloco { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); margin: 22px 0 4px; } /* Os numeros do dia. O dinheiro na gaveta vem primeiro e grande: e o que a pessoa tem na mao para conferir; o resto explica como chegou ate ele. */ .resumo-fechamento { display: grid; gap: 10px; margin-top: 4px; } .resumo-fechamento .gaveta { padding: 14px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--realce); box-shadow: inset 3px 0 0 var(--azul); } .resumo-fechamento .gaveta .rotulo { display: block; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); } .resumo-fechamento .gaveta .numero { display: block; margin-top: 2px; font-size: 28px; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; } .resumo-fechamento .fluxo { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .resumo-fechamento .fluxo-item { padding: 10px 14px; border: 1px solid var(--borda); border-radius: var(--raio); } .resumo-fechamento .fluxo-item .rotulo { display: block; font-size: 12px; color: var(--texto-fraco); } .resumo-fechamento .fluxo-item strong { font-size: 17px; font-variant-numeric: tabular-nums; } .resumo-fechamento .entradas { border-color: var(--sucesso-borda); background: var(--sucesso-fundo); } .resumo-fechamento .entradas .rotulo, .resumo-fechamento .entradas strong { color: var(--sucesso-texto); } .resumo-fechamento .saidas { border-color: var(--erro-borda); background: var(--erro-fundo); } .resumo-fechamento .saidas .rotulo, .resumo-fechamento .saidas strong { color: var(--erro-texto); } .fechamento-detalhes { border: 1px solid var(--borda); border-radius: var(--raio); padding: 2px 14px; } .fechamento-detalhes > div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--borda); font-size: 14px; } .fechamento-detalhes > div:last-child { border-bottom: none; } .fechamento-detalhes dt { color: var(--texto-fraco); } .fechamento-detalhes dt small { display: block; font-size: 11px; opacity: .8; } .fechamento-detalhes dd { font-weight: 600; white-space: nowrap; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------------ */ /* Campo de arquivo */ /* */ /* O campo nativo continua no formulario, invisivel mas focavel: e ele */ /* que guarda o arquivo e que o navegador usa para exigir o campo */ /* obrigatorio. Esconder com display:none tiraria o campo do teclado e */ /* quebraria a mensagem de "preencha este campo". */ /* ------------------------------------------------------------------ */ .campo-arquivo { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; position: relative; margin-top: 2px; } .campo-arquivo-nativo { position: absolute; left: 12px; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; pointer-events: none; } .campo-arquivo-botao { display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 9px 16px; border: 1px solid var(--borda); border-radius: var(--raio); background: var(--branco); color: var(--texto); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: border-color .15s ease, color .15s ease, background .15s ease; } .campo-arquivo-botao:hover { border-color: var(--azul); background: var(--realce-azul); color: var(--azul); } .campo-arquivo-botao svg { width: 16px; height: 16px; } /* O foco cai no campo escondido; o anel precisa aparecer no botao, que e o que a pessoa esta vendo */ .campo-arquivo-nativo:focus-visible + .campo-arquivo-botao { border-color: var(--azul); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .campo-arquivo-nome { flex: 1 1 160px; min-width: 0; font-size: 13px; color: var(--texto-fraco); overflow-wrap: anywhere; } /* Arquivo escolhido vira texto normal: e informacao, nao mais um aviso de que falta escolher */ .campo-arquivo-nome.escolhido { color: var(--texto); font-weight: 600; } .campo-arquivo-limpar { flex: 0 0 auto; width: 26px; height: 26px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--texto-fraco); font-size: 19px; line-height: 1; cursor: pointer; } .campo-arquivo-limpar:hover { background: var(--fundo); color: var(--vermelho); } /* Dentro da area de arrastar, o botao fica centralizado com o resto */ .area-envio-alvo .campo-arquivo { justify-content: center; margin-top: 8px; } .area-envio-alvo .campo-arquivo-nome { flex: 0 1 auto; text-align: center; } /* ------------------------------------------------------------------ */ /* Acoes do topo: sino das pendencias e engrenagem da conta */ /* ------------------------------------------------------------------ */ .acoes-topo { display: flex; align-items: center; gap: 6px; } .menu-topo { position: relative; } .botao-icone { display: flex; align-items: center; justify-content: center; position: relative; width: 38px; height: 38px; padding: 0; border: 1px solid transparent; border-radius: var(--raio); background: none; color: var(--texto-fraco); cursor: pointer; transition: background .15s ease, color .15s ease, border-color .15s ease; } .botao-icone:hover { background: var(--fundo); color: var(--texto); } .botao-icone svg { width: 20px; height: 20px; } .menu-topo.aberto .botao-icone { background: var(--realce-azul); border-color: var(--azul); color: var(--azul); } /* O ponto vermelho do sino. Fica na borda do icone, e nao dentro dele: assim aparece por cima do desenho em vez de se confundir com ele. */ .ponto-alerta { position: absolute; top: 6px; right: 7px; width: 9px; height: 9px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 2px var(--branco); } .caixa-menu { position: absolute; z-index: 60; top: calc(100% + 8px); right: 0; width: 320px; max-width: calc(100vw - 32px); background: var(--branco); border: 1px solid var(--borda); border-radius: 10px; box-shadow: 0 12px 32px rgba(17, 24, 39, .16); overflow: hidden; } .caixa-menu-titulo { padding: 12px 14px; border-bottom: 1px solid var(--borda); background: var(--realce); } .caixa-menu-titulo strong { display: block; font-size: 14px; } .caixa-menu-titulo .dica { margin-top: 1px; overflow-wrap: anywhere; } /* Itens da engrenagem */ .caixa-conta a { display: flex; align-items: center; gap: 10px; padding: 11px 14px; color: var(--texto); font-size: 14px; } .caixa-conta a:hover { background: var(--realce-azul); color: var(--azul); } .caixa-conta a svg { width: 17px; height: 17px; flex-shrink: 0; } /* Sair fica separado e em vermelho: e a acao que se lamenta ter clicado sem querer no meio de um cadastro */ .caixa-conta .item-sair { border-top: 1px solid var(--borda); color: var(--vermelho); } .caixa-conta .item-sair:hover { background: var(--erro-fundo); color: var(--vermelho); } /* Lista de pendencias do sino */ .caixa-pendencias { width: 380px; } .lista-pendencias { list-style: none; max-height: 60vh; overflow-y: auto; } .lista-pendencias li { border-bottom: 1px solid var(--borda); } .lista-pendencias li:last-child { border-bottom: none; } .lista-pendencias a { display: flex; align-items: flex-start; gap: 11px; padding: 11px 14px; color: var(--texto); } .lista-pendencias a:hover { background: var(--realce); } /* A cor do numero e a gravidade: vermelho e atraso, ambar e prazo estourando, ciano e so "esta esperando resposta" */ .lista-pendencias .tom-vermelho .pendencia-quantidade { background: var(--tom-vermelho); } .lista-pendencias .tom-ambar .pendencia-quantidade { background: var(--tom-ambar); } .lista-pendencias .tom-ciano .pendencia-quantidade { background: var(--tom-ciano); } .lista-pendencias .tom-roxo .pendencia-quantidade { background: var(--tom-roxo); } .lista-pendencias .tom-neutro .pendencia-quantidade { background: var(--tom-neutro); } .pendencia-quantidade { flex: 0 0 auto; min-width: 26px; padding: 2px 7px; border-radius: 999px; background: var(--tom-neutro); color: #fff; font-size: 12px; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; } /* Pendencia que trava o sistema (caixa) nao mostra "1": mostra que e um bloqueio */ .lista-pendencias .critica .pendencia-quantidade { font-size: 13px; } .lista-pendencias .critica strong { color: var(--vermelho); } .pendencia-texto { min-width: 0; } .pendencia-texto strong { display: block; font-size: 13.5px; } .pendencia-texto small { display: block; margin-top: 2px; font-size: 12px; color: var(--texto-fraco); line-height: 1.45; } .pendencia-vazia { padding: 22px 16px; text-align: center; font-size: 13px; color: var(--texto-fraco); } /* ------------------------------------------------------------------ */ /* Ajuda flutuante */ /* */ /* Fica fixo na janela, e nao no .app: o zoom da preferencia de tamanho */ /* moveria o botao para fora do canto conforme a escala escolhida. */ /* ------------------------------------------------------------------ */ .ajuda-flutuante { position: fixed; right: 22px; bottom: 22px; z-index: 80; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; } /* Parado, e so o circulo do "?": em toda tela do sistema ele fica ali no canto, e uma pilula escrita "Ajuda" o tempo inteiro competiria com o conteudo. O rotulo aparece quando o cursor chega - que e exatamente o momento em que alguem esta perguntando "o que e esse botao?". */ .ajuda-botao { display: inline-flex; align-items: center; padding: 14px; border: none; border-radius: 999px; background: var(--azul); color: #fff; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 8px 24px rgba(17, 24, 39, .28); transition: transform .15s ease, box-shadow .15s ease; } .ajuda-botao:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(17, 24, 39, .34); } .ajuda-botao svg { flex: 0 0 auto; width: 20px; height: 20px; } /* O texto continua no HTML (o leitor de tela precisa dele para dizer o nome do botao), so nasce com largura zero. Animar a largura, e nao o display, faz o circulo virar pilula crescendo para a esquerda, sem o pulo de quem so troca none por block. */ .ajuda-botao-texto { max-width: 0; margin-left: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: max-width .18s ease, margin-left .18s ease, opacity .18s ease; } .ajuda-botao:hover .ajuda-botao-texto, .ajuda-botao:focus-visible .ajuda-botao-texto { max-width: 120px; margin-left: 8px; opacity: 1; } .ajuda-balao { display: flex; flex-direction: column; width: 380px; max-width: calc(100vw - 32px); max-height: min(70vh, 560px); background: var(--branco); border: 1px solid var(--borda); border-radius: 12px; box-shadow: 0 18px 44px rgba(17, 24, 39, .24); overflow: hidden; animation: ajuda-entrar .16s ease-out; } @keyframes ajuda-entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { .ajuda-balao { animation: none; } .ajuda-botao:hover { transform: none; } .ajuda-botao-texto { transition: none; } } .ajuda-cabecalho { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 14px 16px; border-bottom: 1px solid var(--borda); background: var(--realce); } .ajuda-cabecalho strong { display: block; font-size: 15px; } .ajuda-cabecalho .dica { margin-top: 1px; } .ajuda-fechar { flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: none; border-radius: 50%; background: none; color: var(--texto-fraco); font-size: 22px; line-height: 1; cursor: pointer; } .ajuda-fechar:hover { background: var(--borda); color: var(--texto); } .ajuda-corpo { flex: 1; overflow-y: auto; } .ajuda-atalhos { list-style: none; } .ajuda-atalhos button { display: block; width: 100%; padding: 12px 16px; border: none; border-bottom: 1px solid var(--borda); background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; } .ajuda-atalhos button:hover { background: var(--realce-azul); } .ajuda-atalho-titulo { display: block; font-size: 14px; font-weight: 600; } .ajuda-atalho-modulo { display: block; margin-top: 2px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); } .ajuda-detalhe { padding: 16px; } .ajuda-detalhe h3 { font-size: 15px; margin-bottom: 6px; } .ajuda-detalhe h4 { margin: 14px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--texto-fraco); } .ajuda-para-que { font-size: 13.5px; line-height: 1.55; color: var(--texto); } .ajuda-passos { padding-left: 18px; font-size: 13.5px; line-height: 1.55; } .ajuda-passos li { margin-bottom: 6px; } /* O cuidado que a pessoa so descobriria errando */ .ajuda-atencao { margin-top: 14px; padding: 10px 12px; border: 1px solid var(--aviso-borda); border-radius: var(--raio); background: var(--aviso-fundo); color: var(--aviso-texto); font-size: 13px; line-height: 1.5; } .ajuda-ir { display: inline-block; margin-top: 14px; } .ajuda-rodape { display: flex; gap: 8px; padding: 12px 16px; border-top: 1px solid var(--borda); background: var(--realce); } .ajuda-rodape .botao { flex: 1; padding: 8px 12px; font-size: 13px; } /* ------------------------------------------------------------------ */ /* Central de ajuda */ /* ------------------------------------------------------------------ */ .central-ajuda { display: grid; grid-template-columns: 250px 1fr; gap: 20px; align-items: start; } .ajuda-indice { position: sticky; top: 16px; list-style: none; } .ajuda-indice a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: var(--raio); color: var(--texto); font-size: 14px; } .ajuda-indice a:hover { background: var(--realce-azul); } .ajuda-indice a.ativo { background: var(--azul); color: #fff; font-weight: 600; } .ajuda-indice-icone { font-size: 16px; line-height: 1; } .ajuda-modulo + .ajuda-modulo { margin-top: 26px; } .ajuda-modulo > header { margin-bottom: 14px; } .ajuda-modulo > header h2 { font-size: 19px; } .ajuda-modulo > header .dica { margin-top: 3px; font-size: 13.5px; } .ajuda-topico { border: 1px solid var(--borda); border-radius: var(--raio); margin-bottom: 10px; background: var(--branco); overflow: hidden; } .ajuda-topico > summary { padding: 13px 16px; font-size: 14.5px; font-weight: 600; cursor: pointer; list-style: none; } .ajuda-topico > summary::-webkit-details-marker { display: none; } .ajuda-topico > summary::before { content: '+'; display: inline-block; width: 18px; color: var(--azul); font-weight: 700; } .ajuda-topico[open] > summary { border-bottom: 1px solid var(--borda); background: var(--realce); } .ajuda-topico[open] > summary::before { content: '\2212'; } .ajuda-topico > summary:hover { color: var(--azul); } .ajuda-topico-corpo { padding: 16px; } /* ===================================================================== */ /* Relatorios */ /* */ /* A estante (/relatorios) e uma lista de cartoes: nome, o que o */ /* relatorio responde e em que formatos ele sai. O cartao inteiro e o */ /* link - alvo pequeno obriga a mirar, e aqui nao ha nada mais para */ /* clicar dentro dele. */ /* ===================================================================== */ .cabecalho-grupo { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; } .cabecalho-grupo h2 { margin-bottom: 2px; } .cabecalho-grupo .dica { margin: 0; } .grupo-icone { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 10px; background: var(--realce-azul); font-size: 19px; line-height: 1; } .lista-relatorios { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 12px; } .cartao-relatorio { display: flex; flex-direction: column; gap: 6px; height: 100%; padding: 14px 16px; border: 1px solid var(--borda); border-left: 3px solid var(--borda); border-radius: var(--raio); background: var(--branco); color: var(--texto); transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .cartao-relatorio:hover, .cartao-relatorio:focus-visible { border-color: var(--azul); border-left-color: var(--azul); box-shadow: 0 6px 18px rgba(17, 24, 39, .10); transform: translateY(-2px); } .cartao-relatorio strong { font-size: 14.5px; } .cartao-relatorio:hover strong { color: var(--azul); } .cartao-relatorio .cartao-descricao { font-size: 13px; line-height: 1.5; flex: 1; } .cartao-rodape { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; } .etiqueta-leve, .selo-formato { padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: .01em; } .etiqueta-leve { background: var(--realce-azul); color: var(--azul); } .selo-formato { border: 1px solid var(--borda); color: var(--texto-fraco); } /* ------------------------------------------------------------------ */ /* Relatorio em blocos, na tela */ /* */ /* O geral mensal nao e uma lista: sao sete respostas empilhadas. Numa */ /* tabela unica a primeira coluna repetia "1. Resumo do mes" por dez */ /* linhas e nada marcava onde um assunto acabava. Aqui cada bloco vira */ /* uma secao com titulo - a mesma leitura do documento que sai no */ /* fechamento do caixa, e o PDF do relatorio sai igual a isto. */ /* ------------------------------------------------------------------ */ .documento-relatorio { display: flex; flex-direction: column; gap: 22px; } .bloco-relatorio h3 { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--borda); } /* A tabela do bloco e leve de proposito: o titulo ja separa as secoes, e um cabecalho pesado em cada uma das sete criaria sete inicios de documento na mesma folha */ .tabela-bloco thead th { padding-top: 4px; padding-bottom: 6px; font-size: 10.5px; letter-spacing: .04em; background: none; color: var(--texto-fraco); } /* .tabela e display:block (para rolar sozinha), e bloco encolhe ate o conteudo: cada secao terminava numa largura diferente e o documento saia serrilhado do lado direito. Aqui quem rola e a caixa de fora. */ .tabela-bloco { display: table; width: 100%; } /* Quantidade e valor com largura fixa: assim as sete secoes alinham a coluna de dinheiro, que e a que se le de cima a baixo */ .tabela-bloco th:nth-last-child(2), .tabela-bloco td:nth-last-child(2) { width: 80px; } .tabela-bloco th:last-child, .tabela-bloco td:last-child { width: 130px; } /* ------------------------------------------------------------------ */ /* Mapa mensal consolidado */ /* */ /* Nao e lista nem tabela: e o painel de fechamento do mes, em quadros */ /* que se leem de relance. Cada quadro tem a faixa cinza de titulo e */ /* linhas de rotulo/valor - o mesmo desenho do papel, para quem confere*/ /* na tela e manda imprimir reconhecer a mesma folha. */ /* ------------------------------------------------------------------ */ .mapa-mensal { display: flex; flex-direction: column; gap: 16px; } .mapa-cabecalho { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; } .mapa-cabecalho h3 { margin: 0; padding: 9px 14px; background: var(--realce); border-bottom: 1px solid var(--borda); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--texto-fraco); text-align: center; } .mapa-identificacao { display: flex; flex-wrap: wrap; /* Clinica, mes e ano dividem a faixa em partes iguais, como no modelo: sao tres identificacoes de mesmo peso, e nao um titulo com dois complementos */ justify-content: space-around; gap: 6px 18px; padding: 9px 14px; font-size: 12.5px; } .mapa-identificacao strong { color: var(--texto-fraco); font-weight: 600; margin-right: 5px; } /* Estatisticas e despesas lado a lado. Abaixo de 900px empilham: em duas colunas espremidas o rotulo quebra em tres linhas e a folha fica mais alta do que empilhada. */ .mapa-duas { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; } @media (max-width: 900px) { .mapa-duas { grid-template-columns: 1fr; } } .mapa-bloco { border: 1px solid var(--borda); border-radius: 8px; overflow: hidden; } .mapa-bloco h4, .mapa-cartao h5 { margin: 0; padding: 8px 12px; background: var(--realce); border-bottom: 1px solid var(--borda); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-fraco); } .mapa-bloco > .vazio, .mapa-bloco > .tabela-rolavel { padding: 12px; } .mapa-bloco > .vazio { margin: 0; text-align: center; } /* .tabela e display:block (para rolar sozinha), e bloco encolhe ate o conteudo: a tabela das especialidades parava no meio do quadro, com o TOTAL longe da borda. Aqui quem rola e a caixa de fora. */ .mapa-bloco .tabela { display: table; width: 100%; } /* Dinheiro encostado a direita, que e o que faz a coluna virar uma pilha de numeros comparavel de cima a baixo. Precisa desta regra porque `.direita` (0,1,0) perde de `.tabela th, .tabela td` (0,1,1), que alinha tudo a esquerda - o utilitario nunca chegou a valer DENTRO de .tabela, em tela nenhuma do sistema. O conserto geral seria `.tabela th.direita, .tabela td.direita` la em cima, e ele mexeria na aparencia de toda listagem do sistema de uma vez; aqui a correcao fica no mapa, que e o que se pediu. */ .mapa-bloco .tabela th.direita, .mapa-bloco .tabela td.direita { text-align: right; } /* As linhas de rotulo/valor. O valor vem na COLUNA ESTREITA e o rotulo na larga: e o valor que se procura correndo o olho, e alinhado a direita numa coluna propria ele forma a pilha de numeros que se compara de cima a baixo. */ .mapa-pares { width: 100%; border-collapse: collapse; font-size: 12.5px; } .mapa-pares th, .mapa-pares td { padding: 5px 12px; border-bottom: 1px solid var(--borda); } .mapa-pares tr:last-child th, .mapa-pares tr:last-child td { border-bottom: none; } .mapa-pares th { font-weight: 400; text-align: left; color: var(--texto); } .mapa-pares .mapa-valor { width: 34%; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--texto); } /* Nas despesas o rotulo vem primeiro e o valor fecha a linha */ .mapa-pares-direita .mapa-valor { width: 40%; } /* Total liquido, resultado liquido, valor pago do dentista: as linhas que respondem a pergunta que fez alguem abrir a folha */ .mapa-pares tr.forte th, .mapa-pares tr.forte td { font-weight: 700; background: var(--realce); } .mapa-nota { color: var(--texto-fraco); font-weight: 700; cursor: help; } /* Um cartao por dentista. Largura minima de 260px: abaixo disso "Media de pgto por orcamento contratado" quebra em quatro linhas. */ .mapa-cartoes { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 12px; } .mapa-cartao { border: 1px solid var(--borda); border-radius: 6px; overflow: hidden; } .mapa-cartao h5 { text-align: center; } .mapa-formas { display: flex; flex-wrap: wrap; justify-content: space-around; gap: 10px 22px; padding: 12px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .mapa-formas strong { color: var(--texto-fraco); font-weight: 700; margin-right: 6px; letter-spacing: .03em; } .mapa-rodape { margin: 0; } /* ------------------------------------------------------------------ */ /* Os formatos de saida, na tela do relatorio */ /* */ /* Botao pequeno, so o icone e o nome, na cor de cada formato: o */ /* vermelho do PDF, o verde da planilha, e assim por diante. A */ /* explicacao de cada um foi para o title - quem ja sabe o que e um */ /* CSV nao precisa ler de novo a cada relatorio. */ /* ------------------------------------------------------------------ */ .lista-formatos { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; } .botao-formato { --formato-cor: var(--texto-fraco); --formato-fundo: var(--realce); display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px; border: 1px solid transparent; border-radius: 999px; background: var(--formato-fundo); color: var(--formato-cor); font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .botao-formato svg { width: 16px; height: 16px; flex: 0 0 auto; } .botao-formato:hover, .botao-formato:focus-visible { border-color: currentColor; box-shadow: 0 4px 12px rgba(17, 24, 39, .10); transform: translateY(-1px); } /* A cor de cada extensao. O fundo sai do proprio tom, bem diluido. */ .botao-formato.formato-pdf { --formato-cor: #dc2626; --formato-fundo: rgba(220, 38, 38, .10); } .botao-formato.formato-xlsx { --formato-cor: #15803d; --formato-fundo: rgba(21, 128, 61, .10); } .botao-formato.formato-csv { --formato-cor: #0f766e; --formato-fundo: rgba(15, 118, 110, .10); } .botao-formato.formato-json { --formato-cor: #b45309; --formato-fundo: rgba(180, 83, 9, .10); } html[data-tema="escuro"] .botao-formato.formato-pdf { --formato-cor: #f87171; --formato-fundo: rgba(248, 113, 113, .14); } html[data-tema="escuro"] .botao-formato.formato-xlsx { --formato-cor: #4ade80; --formato-fundo: rgba(74, 222, 128, .14); } html[data-tema="escuro"] .botao-formato.formato-csv { --formato-cor: #2dd4bf; --formato-fundo: rgba(45, 212, 191, .14); } html[data-tema="escuro"] .botao-formato.formato-json { --formato-cor: #fbbf24; --formato-fundo: rgba(251, 191, 36, .14); } /* A previa tem muitas colunas: rola sozinha, sem esticar a pagina */ .tabela-rolavel { overflow-x: auto; } .tabela-rolavel .tabela { min-width: 100%; } /* ------------------------------------------------------------------ */ /* Telas pequenas */ /* ------------------------------------------------------------------ */ @media (max-width: 980px) { .central-ajuda { grid-template-columns: 1fr; } .ajuda-indice { position: static; display: flex; flex-wrap: wrap; gap: 6px; } .ajuda-indice li { flex: 0 0 auto; } .ajuda-indice a { border: 1px solid var(--borda); } .colunas { grid-template-columns: 1fr; } } @media (max-width: 780px) { .app { flex-direction: column; } .lateral { width: 100%; padding: 12px 0; } .lateral nav { flex-direction: row; overflow-x: auto; } .lateral nav a { border-left: none; border-bottom: 3px solid transparent; white-space: nowrap; } .lateral nav a.ativo { border-left-color: transparent; border-bottom-color: var(--azul); } main { padding: 16px; } .campo.largo { grid-column: span 1; } .barra-acoes { flex-direction: column; align-items: stretch; } .linha-tempo li { flex-direction: column; gap: 4px; } /* Numa tela estreita nao ha o que dividir: cada filtro ocupa a largura toda em vez de virar tres tocos lado a lado */ .busca, .filtros-log { flex-direction: column; align-items: stretch; } .busca > *, .filtros-log > * { width: 100%; max-width: none; min-width: 0; flex: 0 0 auto; } .busca .campo-data, .filtros-log .campo-data { display: block; } .barra-financeiro { flex-direction: column; align-items: stretch; } .chip-caixa { align-self: flex-start; } /* Agenda: cada grupo passa a ocupar a largura toda, um por linha, em vez de virar tocos lado a lado. */ .agenda-barra { flex-direction: column; align-items: stretch; } .agenda-grupo { align-items: stretch; } .agenda-grupo-solto { column-gap: 8px; } .agenda-grupo .agenda-grupo, .agenda-campo, .agenda-barra .salto-dias { flex: 1 1 100%; } .agenda-barra input[type="date"], .agenda-barra select { width: 100%; min-width: 0; max-width: none; } /* Com a barra em coluna, flex-basis passa a valer para a ALTURA: os 480px que dao a largura da semana na tela larga virariam 480px de faixa vazia aqui. */ .semana { flex: 0 0 auto; } /* Segmentado e botao de acao ganham a linha inteira, e as opcoes dentro do segmentado repartem essa largura por igual. So o botao de ACAO: o "Ir" do salto tem que continuar do tamanho dele, senao empurra o "ou daqui a" ao lado para tres linhas. */ .agenda-barra .grupo-segmentado, .agenda-barra .acao-nova { flex: 1 1 100%; } .agenda-barra .grupo-segmentado { display: flex; } .agenda-barra .grupo-segmentado > a { flex: 1 1 0; padding-left: 4px; padding-right: 4px; } /* O campo de dias nao precisa mais do minimo de 130px da barra: numa tela estreita ele reparte a linha com o "Ir" */ .agenda-barra .salto-dias input[type="number"] { min-width: 0; } /* O menu vira uma faixa horizontal que rola: aqui o rotulo nao pode esticar, senao cada item ocuparia a tela inteira */ .menu-rotulo { flex: 0 0 auto; } /* Menu suspenso ancorado a direita vazaria pela borda numa tela estreita: passa a ocupar a largura util */ .caixa-menu, .caixa-pendencias { width: calc(100vw - 32px); right: -8px; } /* Tela estreita nao tem canto que caiba uma caixa de 340: o aviso ocupa a largura util e o canto escolhido decide so em cima ou embaixo */ .avisos { left: 12px; right: 12px; align-items: stretch; } .avisos .aviso { width: auto; } /* Em tela de toque nao existe hover: o rotulo abriria no toque e ficaria aberto depois dele. Aqui o botao e so o icone, e ponto. */ .ajuda-flutuante { right: 14px; bottom: 14px; } .ajuda-botao:hover .ajuda-botao-texto, .ajuda-botao:focus-visible .ajuda-botao-texto { max-width: 0; margin-left: 0; opacity: 0; } }