/* Identidade do formulário, sem alterar os demais formulários do tema. */ .tbx-ctst-formulario { --tbx-ctst-azul: #003b80; --tbx-ctst-texto: #193e73; --tbx-ctst-suave: #667b9d; color: var(--tbx-ctst-texto); font-family: Arial, Helvetica, sans-serif; font-size: 20px; line-height: 1.35; } /* As linhas passaram a morar dentro das secoes numeradas: o seletor de filho direto deixaria de alcancar qualquer uma delas, e o formulario inteiro perderia o espacamento de uma vez. */ .tbx-ctst-formulario .row { --bs-gutter-x: 28px; --bs-gutter-y: 32px; } .tbx-ctst-formulario .form-label { display: block; margin-bottom: 8px; color: var(--tbx-ctst-azul); font-size: 20px; font-weight: 600; line-height: 1.3; } .tbx-ctst-formulario .tbx-ctst-obrigatorio { color: #d71932; } .tbx-ctst-formulario .form-control, .tbx-ctst-formulario .form-select { width: 100%; min-width: 0; min-height: 52px; padding: 11px 18px; border: 1px solid #989eaa; border-radius: 19px; background-color: #fff; color: var(--tbx-ctst-texto); font: inherit; box-shadow: none; } .tbx-ctst-formulario .form-select { padding-right: 44px; color: var(--tbx-ctst-suave); background-position: right 18px center; } .tbx-ctst-formulario .form-control::placeholder { color: var(--tbx-ctst-suave); opacity: 1; } .tbx-ctst-formulario .form-control:focus, .tbx-ctst-formulario .form-select:focus, .tbx-ctst-formulario .form-check-input:focus { border-color: var(--tbx-ctst-azul); outline: 2px solid var(--tbx-ctst-azul); outline-offset: 3px; box-shadow: none; } .tbx-ctst-formulario textarea.form-control { min-height: 170px; padding: 15px 20px; resize: vertical; } .tbx-ctst-formulario .form-text { margin: 8px 0 0; color: var(--tbx-ctst-suave); font-size: 18px; line-height: 1.35; } .tbx-ctst-formulario input[type="file"] { min-height: 66px; padding: 8px; border-color: #d3dae5; border-radius: 16px; color: var(--tbx-ctst-suave); } .tbx-ctst-formulario input[type="file"]::file-selector-button { margin: 0 18px 0 0; padding: 10px 18px; border: 0; border-right: 1px solid #e0e5ed; border-radius: 10px 0 0 10px; background: #f4f5f7; color: var(--tbx-ctst-texto); font: inherit; cursor: pointer; } /* * O !important e contra a margem que o Bootstrap poe em .form-check. Os 30px * de antes separavam a caixa do acordeao do aviso, que nao existe mais: sem * ele, a ciencia segue o mesmo ritmo vertical dos demais campos. */ .tbx-ctst-formulario .form-check { position: relative; min-height: 26px; margin-top: 0 !important; padding-left: 44px; } .tbx-ctst-formulario .form-check .form-check-input { width: 24px; height: 24px; margin: 1px 0 0 -44px; border: 1px solid #8b939f; border-radius: 6px; cursor: pointer; } .tbx-ctst-formulario .form-check-input:checked { background-color: var(--tbx-ctst-azul); border-color: var(--tbx-ctst-azul); } .tbx-ctst-formulario .form-check-label { color: var(--tbx-ctst-texto); font: inherit; cursor: pointer; } .tbx-ctst-formulario button[type="submit"] { min-height: 56px; padding: 13px 38px; border: 1px solid #23ad68; border-radius: 32px; background: #23ad68; color: #fff; font: inherit; font-weight: 600; line-height: 1.4; } .tbx-ctst-formulario button[type="submit"]:hover { background: #17854d; border-color: #17854d; } .tbx-ctst-formulario button[type="submit"]:focus-visible, .tbx-ctst-aviso-link:focus-visible, .tbx-ctst-modal-fechar:focus-visible { outline: 2px solid var(--tbx-ctst-azul); outline-offset: 4px; } /* Integração com o page.php dos três temas; mantém o template nativo. O escopo é `.tbx-ctst-pagina`, classe que o próprio plugin acrescenta ao e só na página que tem o shortcode. Nunca volte a escrever `.wp-theme-epr-parana` aqui: o seletor casava com o nome do tema, e o site do Paraná publicou o tema `epr-iguacu`. A regra deixou de casar, o `.article__content` manteve o `max-width: 800px` do tema, e o formulário apareceu 20% mais estreito em produção sem erro nenhum a que se agarrar. `max-width` vai com `!important` pelo mesmo motivo do `padding`: sem o nome do tema o seletor perdeu uma classe de especificidade, e as regras de container dos temas passam a empatar com esta. */ .tbx-ctst-pagina .main-content { width: 100%; max-width: 1086px !important; padding: 40px 40px 50px !important; } .tbx-ctst-pagina .article__content { max-width: none !important; } .tbx-ctst-pagina .main-content > .article { margin-bottom: 0; } /* Ferramenta de conferência: só o administrador a recebe, e ela precisa não parecer parte do formulário — tracejado e fundo de aviso dizem isso sozinhos. */ .tbx-ctst-teste { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 28px; padding: 12px 16px; border: 1px dashed #b38600; border-radius: 8px; background: #fff9e6; font-family: Arial, Helvetica, sans-serif; font-size: 15px; } .tbx-ctst-teste-botao { padding: 7px 14px; border: 1px solid #8a6800; border-radius: 6px; background: #fff; color: #6b4f00; font: inherit; font-weight: 600; cursor: pointer; } .tbx-ctst-teste-botao:hover:not(:disabled) { background: #fdf0c9; } .tbx-ctst-teste-botao:disabled { opacity: 0.6; cursor: default; } .tbx-ctst-teste-nota { color: #6b4f00; } /* O gutter do rodapé ultrapassa o container também nos breakpoints intermediários. */ .tbx-ctst-pagina footer .row { margin-right: 0; margin-left: 0; } @media (max-width: 991px) and (min-width: 768px) { .tbx-ctst-formulario .col-md-3, .tbx-ctst-formulario .col-md-4, .tbx-ctst-formulario .col-md-5, .tbx-ctst-formulario .col-md-6 { width: 50%; } /* O Nome ocupa a faixa inteira aqui, e só ele: a regra é presa à seção 1 porque "primeiro da linha" hoje também descreve o Assunto e a Data, que dividem a linha com o par e não devem esticar. */ .tbx-ctst-formulario .tbx-ctst-secao:first-of-type .row > .col-md-6:first-child { width: 100%; } } @media (max-width: 767px) { .tbx-ctst-pagina .main-content { padding: 30px 20px 40px !important; } .tbx-ctst-modal { font-size: 16px; border-radius: 14px; } .tbx-ctst-modal-cabecalho { padding: 14px 12px 12px 18px; } .tbx-ctst-modal .tbx-ctst-aviso-texto { padding: 16px 18px 20px; } .tbx-ctst-aviso { padding: 16px 18px; } .tbx-ctst-aviso-titulo { font-size: 18px; } .tbx-ctst-formulario { font-size: 16px; } .tbx-ctst-formulario .row { --bs-gutter-y: 24px; } .tbx-ctst-formulario .form-label { font-size: 18px; } .tbx-ctst-formulario .form-text { font-size: 15px; } .tbx-ctst-formulario .form-check { padding-left: 36px; } .tbx-ctst-formulario .form-check .form-check-input { margin-left: -36px; } .tbx-ctst-formulario input[type="file"]::file-selector-button { margin-right: 10px; padding-right: 10px; padding-left: 10px; } } /* * A isca precisa sumir para quem enxerga e para quem usa leitor de tela, sem * usar display:none — alguns bots ignoram campos ocultos por display, e outros * os preenchem justamente por isso. */ .tbx-ctst-isca { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; } /* * O link do aviso, dentro da frase da ciencia. Verde escuro, e nao o verde do * botao: #23ad68 sobre branco da 2,9:1 de contraste, abaixo do minimo para * texto. Este da 4,9:1, e e o mesmo verde do hover do botao. */ .tbx-ctst-formulario .tbx-ctst-aviso-link { color: #17854d; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; } .tbx-ctst-formulario .tbx-ctst-aviso-link:hover, .tbx-ctst-formulario .tbx-ctst-aviso-link:focus { color: #106038; } /* * O aviso na propria pagina: e isto que o cidadao ve quando nao ha JavaScript * ou . Com os dois, o JavaScript move este bloco para dentro do modal. */ .tbx-ctst-aviso { margin-top: 24px; border: 1px solid #d0d9e7; border-radius: 12px; padding: 18px 24px; } .tbx-ctst-aviso-titulo { margin: 0 0 12px; color: var(--tbx-ctst-azul); font-size: 20px; font-weight: 600; line-height: 1.3; } .tbx-ctst-aviso-texto { color: var(--tbx-ctst-suave); font-size: inherit; } .tbx-ctst-aviso-texto p:last-child { margin-bottom: 0; } /* ----- O mesmo aviso, em modal, quando o navegador permite ----- */ .tbx-ctst-modal { width: min(640px, calc(100vw - 32px)); max-height: min(82vh, 760px); padding: 0; border: 0; border-radius: 16px; background: #fff; color: var(--tbx-ctst-texto); font-family: Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.45; box-shadow: 0 24px 60px rgba(9, 24, 46, .28); overflow-y: auto; overscroll-behavior: contain; } .tbx-ctst-modal::backdrop { background: rgba(9, 24, 46, .55); } /* Dentro do modal o bloco perde a moldura: a moldura passa a ser o modal. */ .tbx-ctst-modal .tbx-ctst-aviso { margin: 0; border: 0; border-radius: 0; padding: 0; } /* * O cabecalho acompanha a rolagem, com o titulo e o botao de fechar juntos: * texto longo nao pode empurrar a saida do modal para fora da tela. */ .tbx-ctst-modal-cabecalho { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 16px 14px 26px; border-bottom: 1px solid #e4eaf3; background: #fff; } .tbx-ctst-modal .tbx-ctst-aviso-titulo { margin: 0; } .tbx-ctst-modal .tbx-ctst-aviso-texto { padding: 18px 26px 26px; } .tbx-ctst-modal-fechar { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid #d0d9e7; border-radius: 50%; background: #fff; color: var(--tbx-ctst-azul); font: inherit; font-size: 20px; line-height: 1; cursor: pointer; } .tbx-ctst-modal-fechar:hover { background: #f1f4f9; } .tbx-ctst-erro { color: #b02a37; font-size: .875rem; display: block; margin-top: .25rem; } .tbx-ctst-protocolo { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.25rem; font-weight: 700; letter-spacing: .04em; } /* Campo com erro devolvido pelo servidor. Mesmo tom do .is-invalid do Bootstrap. */ .tbx-ctst-formulario [data-tbx-erro] { border-color: #dc3545; } .tbx-ctst-formulario [data-tbx-erro]:focus { border-color: #dc3545; box-shadow: 0 0 0 .25rem rgba(220, 53, 69, .25); } /* Durante o envio o botao fica inerte, mas NAO desabilitado: desabilitar quebraria o fallback de quem tem JavaScript com erro. */ .tbx-ctst-enviando button[type="submit"] { pointer-events: none; opacity: .65; } .tbx-ctst-enviando { cursor: progress; } /* Secoes numeradas do formulario. O titulo e o unico ponto de ancoragem visual entre os oito blocos: sem ele a tela vira uma lista longa de campos. */ .tbx-ctst-secao { margin-bottom: 30px; padding-top: 22px; border-top: 1px solid rgba(102, 123, 157, .28); } .tbx-ctst-secao:first-of-type { border-top: 0; padding-top: 0; } .tbx-ctst-secao-titulo { /* O tema aplica margem em h3 com seletor mais especifico. Sem o !important, ela reaparece acima do titulo de cada secao. */ margin: 0 0 18px !important; color: var(--tbx-ctst-azul); font-size: 22px; font-weight: 700; line-height: 1.25; } /* O gutter vertical de 32px foi calibrado para uma tela de treze campos. Com oito secoes ele aparece em toda linha e acumula: o formulario ficou com faixas vazias maiores que os proprios campos. */ .tbx-ctst-formulario .row { --bs-gutter-y: 22px; } /* Reset de fieldset, com as duas classes que o cartao da passagem precisa para nao ser apagado por ele. Sem o `.tbx-ctst-formulario` na frente, este seletor tem uma classe a mais que `.tbx-ctst-passagem` e vencia: o cartao perdia borda e padding, e o botao de remover, sem o padding, caia por cima do campo de portico. */ .tbx-ctst-formulario fieldset { min-width: 0; margin: 0; padding: 0; border: 0; } .tbx-ctst-formulario legend.form-label, .tbx-ctst-formulario .tbx-ctst-passagem-titulo { float: none; width: auto; padding: 0; } /* Radio e redondo, caixa de selecao e quadrada -- e a unica pista de que so uma opcao do grupo pode ser escolhida. O raio de 6px do formulario deixava as duas iguais, e o :checked pintava o radio como um quadrado solido. */ .tbx-ctst-formulario .form-check-input[type="radio"] { border-radius: 50%; } .tbx-ctst-formulario .form-check-input[type="radio"]:checked { background: #fff; border: 7px solid var(--tbx-ctst-azul); } /* Grupo de escolha: sem isto as opcoes se encostam, porque o .form-check do formulario zera a margem superior para a caixa unica da declaracao. */ .tbx-ctst-formulario .form-check + .form-check { margin-top: 10px !important; } .tbx-ctst-formulario fieldset > legend.form-label { margin-bottom: 12px; } /* Cada passagem e um cartao proprio: com tres ou quatro repeticoes na tela, campos soltos deixam de dizer a qual passagem pertencem. */ .tbx-ctst-formulario .tbx-ctst-passagem { position: relative; margin-bottom: 18px; padding: 20px 22px 22px; border: 1px solid rgba(102, 123, 157, .35); border-radius: 12px; background: rgba(102, 123, 157, .04); } /* `float: left` com largura cheia tira a do lugar especial que o navegador reserva para ela dentro da borda. Sem isso, o titulo abre um rasgo na borda de cima do cartao e fica meio dentro, meio fora dele. */ .tbx-ctst-formulario .tbx-ctst-passagem-titulo { float: left; width: 100%; /* A faixa a direita e do botao de remover, que e posicionado ali. Sem ela, um titulo mais longo passaria por baixo do botao. */ padding-right: 110px; margin-bottom: 16px; color: var(--tbx-ctst-azul); font-size: 19px; font-weight: 700; line-height: 1.3; } /* Botao de verdade, e nao um link sublinhado solto no meio dos campos: o .btn-link do Bootstrap o deixava sem caixa, e ele encostava no select de portico sem nada que dissesse onde ele comecava. */ .tbx-ctst-formulario .tbx-ctst-remover-passagem { position: absolute; top: 18px; right: 22px; padding: 6px 14px; border: 1px solid rgba(215, 25, 50, .45); border-radius: 16px; background: #fff; color: #d71932; font: inherit; font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; } .tbx-ctst-formulario .tbx-ctst-remover-passagem:hover { background: #d71932; border-color: #d71932; color: #fff; } .tbx-ctst-formulario .tbx-ctst-remover-passagem:focus-visible { outline: 2px solid var(--tbx-ctst-azul); outline-offset: 3px; } .tbx-ctst-mais-passagens { margin-bottom: 4px; } .tbx-ctst-mais-passagens .form-label { margin-bottom: 10px; } .tbx-ctst-formulario .tbx-ctst-mais-passagens .btn { padding: 9px 20px; border: 1px solid var(--tbx-ctst-azul); border-radius: 24px; background: #fff; color: var(--tbx-ctst-azul); font: inherit; font-size: 17px; font-weight: 600; } .tbx-ctst-formulario .tbx-ctst-mais-passagens .btn:hover:not(:disabled) { background: var(--tbx-ctst-azul); color: #fff; } .tbx-ctst-formulario .tbx-ctst-mais-passagens .btn:disabled { opacity: .5; } /* A chamada do aviso substituiu a segunda caixa de selecao. Ela e texto de apoio da declaracao, e por isso segue o ritmo do .form-text. */ .tbx-ctst-aviso-chamada { margin: 14px 0 0; padding-left: 44px; color: var(--tbx-ctst-suave); font-size: 17px; line-height: 1.4; } /* O aviso na propria pagina e prova, nao leitura obrigatoria: encolhe-lo tira a faixa vazia que ele abria entre a declaracao e o botao de enviar. */ .tbx-ctst-secao .tbx-ctst-aviso { margin-top: 18px; } .tbx-ctst-formulario button[type="submit"] { margin-top: 22px; } @media (max-width: 767px) { .tbx-ctst-secao { margin-bottom: 24px; padding-top: 18px; } .tbx-ctst-secao-titulo { font-size: 19px; } .tbx-ctst-formulario .tbx-ctst-passagem { padding: 16px 14px 18px; } /* No celular o botao volta ao fluxo: no canto, ele espremeria o titulo contra a borda e sobraria uma faixa vazia embaixo. */ .tbx-ctst-formulario .tbx-ctst-remover-passagem { position: static; display: block; margin: 0 0 14px; } /* Sem tirar o float, a legenda sai do fluxo e o botao de remover sobe para cima dela: a tela abria o cartao com "Remover" antes de dizer qual passagem era. */ .tbx-ctst-formulario .tbx-ctst-passagem-titulo { float: none; padding-right: 0; margin-bottom: 10px; } .tbx-ctst-aviso-chamada { padding-left: 36px; font-size: 15px; } } /* ------------------------------------------------------------------ * * Comprovante de protocolo * * Um cartao claro sobre a pagina, com a confirmacao em cima, o numero * destacado no meio e as acoes embaixo -- a ordem em que a pessoa precisa * das coisas. O verde aparece so na marca de confirmacao: espalhado pelo * cartao inteiro, como era antes, ele vira aviso de sistema e o numero do * protocolo perde o lugar de destaque. * ------------------------------------------------------------------ */ .tbx-ctst-comprovante { --tbx-tinta: #0f2f4f; --tbx-tinta-suave: #4a5b6e; --tbx-borda: #cbe4d5; --tbx-verde: #1f9d55; --tbx-verde-claro: #d9efe1; --tbx-campo: #f1f8f3; position: relative; padding: 30px 32px 28px; border: 1px solid var(--tbx-borda); border-radius: 16px; /* O verde claro do fundo e o que diz "deu certo" antes de qualquer texto ser lido. Vai de cima para baixo para o cartao nao virar um bloco chapado de cor, e para o numero do protocolo continuar sendo o que salta. */ background: linear-gradient(180deg, #e9f5ee 0%, #f5fbf8 60%, #f9fdfb 100%); box-shadow: 0 1px 2px rgba(15, 47, 79, .04), 0 12px 28px -18px rgba(15, 47, 79, .22); color: var(--tbx-tinta); } /* Os tres sites rodam temas diferentes, e todos estilizam titulo e paragrafo dentro do conteudo -- o epr-parana por `.article__content h2`, que ganha de uma classe sozinha e empurrava o titulo 48px para baixo, deixando a marca de confirmacao sozinha na linha de cima. Qualificar pelo elemento junto da classe ganha sem `!important` e sem citar o nome de tema nenhum. */ .tbx-ctst-comprovante h1, .tbx-ctst-comprovante h2, .tbx-ctst-comprovante p, .tbx-ctst-comprovante ul, .tbx-ctst-comprovante li { margin: 0; padding: 0; color: inherit; font-family: inherit; } .tbx-ctst-comprovante-topo { display: flex; align-items: flex-start; gap: 16px; padding-bottom: 20px; border-bottom: 1px solid var(--tbx-borda); } /* A unica peca colorida do cartao, e a primeira coisa que se ve. */ .tbx-ctst-marca { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 54px; height: 54px; border-radius: 50%; background: var(--tbx-verde-claro); color: var(--tbx-verde); } .tbx-ctst-marca svg { width: 27px; height: 27px; } .tbx-ctst-comprovante h2.tbx-ctst-comprovante-titulo { margin: 0 0 6px; font-size: 1.75rem; line-height: 1.2; font-weight: 700; color: var(--tbx-tinta); } .tbx-ctst-comprovante p.tbx-ctst-comprovante-resumo, .tbx-ctst-comprovante p.tbx-ctst-duplicado { /* O cartao ocupa a largura da pagina, mas a frase nao: linha de mais de 75 caracteres cansa de ler, e esta e a primeira coisa que a pessoa le. */ max-width: 72ch; font-size: 1rem; line-height: 1.55; color: var(--tbx-tinta-suave); } .tbx-ctst-comprovante p.tbx-ctst-duplicado { margin-top: 8px; } .tbx-ctst-comprovante p.tbx-ctst-rotulo-protocolo { margin: 22px 0 10px; font-size: 1rem; font-weight: 700; } .tbx-ctst-bloco-protocolo { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--tbx-borda); border-radius: 12px; /* Claro sobre o verde do cartao: e o unico bloco que a pessoa volta para ler, e precisa se destacar do que esta em volta. */ background: #fff; } .tbx-ctst-icone-documento { flex: 0 0 auto; display: flex; color: var(--tbx-tinta); } .tbx-ctst-icone-documento svg { width: 24px; height: 24px; } .tbx-ctst-protocolo { flex: 1 1 auto; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1.2rem; font-weight: 700; letter-spacing: .04em; /* Um protocolo longo quebra dentro do bloco em vez de esticar o cartao. */ overflow-wrap: anywhere; } .tbx-ctst-copiar { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 4px 6px 14px; border: 0; border-left: 1px solid var(--tbx-borda); background: none; font: inherit; font-size: .92rem; font-weight: 600; color: var(--tbx-tinta); cursor: pointer; border-radius: 0; } .tbx-ctst-copiar:hover, .tbx-ctst-copiar.tbx-ctst-copiado { color: var(--tbx-verde); } .tbx-ctst-copiar svg { width: 17px; height: 17px; } .tbx-ctst-comprovante ul.tbx-ctst-comprovante-avisos { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .tbx-ctst-comprovante ul.tbx-ctst-comprovante-avisos li { display: flex; align-items: flex-start; gap: 11px; font-size: .95rem; line-height: 1.5; color: var(--tbx-tinta-suave); } .tbx-ctst-aviso-icone { flex: 0 0 auto; display: flex; margin-top: 2px; color: var(--tbx-verde); } .tbx-ctst-aviso-icone svg { width: 18px; height: 18px; } /* O tema alcanca estes links por `.article__content a`, que tem especificidade maior que uma classe sozinha -- e pinta os dois de verde, inclusive o botao. Dai o seletor descendente: e o menor aumento que ganha, sem !important. */ .tbx-ctst-comprovante .tbx-ctst-contato a { color: inherit; border-bottom: 0; text-decoration: underline; text-decoration-color: var(--tbx-borda); text-underline-offset: 3px; } .tbx-ctst-comprovante .tbx-ctst-contato a:hover { text-decoration-color: currentColor; } .tbx-ctst-comprovante p.tbx-ctst-comprovante-acoes { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0 0; } .tbx-ctst-comprovante .tbx-ctst-imprimir, .tbx-ctst-comprovante .tbx-ctst-nova { display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 20px; border-radius: 9px; font-size: .95rem; font-weight: 600; line-height: 1; text-decoration: none; cursor: pointer; } .tbx-ctst-comprovante .tbx-ctst-imprimir { border: 1px solid var(--tbx-tinta); background: var(--tbx-tinta); color: #fff; } .tbx-ctst-comprovante .tbx-ctst-imprimir:hover { background: #0b2440; color: #fff; } .tbx-ctst-comprovante .tbx-ctst-nova { border: 1px solid var(--tbx-borda); background: #fff; color: var(--tbx-tinta); border-bottom: 1px solid var(--tbx-borda); } .tbx-ctst-comprovante .tbx-ctst-nova:hover { border-color: var(--tbx-tinta); color: var(--tbx-tinta); } .tbx-ctst-imprimir svg { width: 18px; height: 18px; } .tbx-ctst-comprovante :focus-visible { outline: 2px solid var(--tbx-verde); outline-offset: 2px; } /* Selo e rodape existem para o papel. Na tela, o selo repetiria o titulo e o rodape explicaria uma impressao que ninguem fez. */ .tbx-ctst-selo, .tbx-ctst-rodape-impresso { display: none; } @media (max-width: 575.98px) { .tbx-ctst-comprovante { padding: 22px 18px 20px; } .tbx-ctst-comprovante-titulo { font-size: 1.3rem; } /* No celular o botao de copiar vai para baixo do numero: ao lado, sobra uma coluna de duas letras para o protocolo. */ .tbx-ctst-bloco-protocolo { flex-wrap: wrap; } .tbx-ctst-copiar { padding: 8px 0 0; border-left: 0; border-top: 1px solid var(--tbx-borda); width: 100%; justify-content: center; } .tbx-ctst-imprimir, .tbx-ctst-nova { flex: 1 1 100%; } } /* O comprovante impresso, e so ele. * * A primeira versao escondia tudo por `visibility`, e saiu errado em duas * frentes: visibility esconde mas PRESERVA o espaco, entao o site inteiro * continuava ocupando altura e o comprovante saia na pagina 2, depois de meia * pagina em branco; e a caixa, posicionada por `absolute`, se ancorava no * primeiro ancestral posicionado do tema, nao na pagina. * * Aqui quem esconde e `display`, que tira do fluxo. O `:has()` devolve * exatamente a cadeia de ancestrais do comprovante -- sem ele seria preciso * nomear as divs de cada tema, e sao tres, com a producao do Parana rodando o * epr-iguacu. O seletor le: esconda tudo que nao contem o comprovante, nao e o * comprovante, e nao esta dentro dele. */ @media print { /* Sem transicao nem animacao no papel. * * O tema anima a cor do link, e a impressao capturava a cor no MEIO da * transicao: o endereco de contato saia num verde diferente a cada vez, * apesar da regra de cor abaixo estar valendo. Papel nao tem estado * intermediario -- ou a cor final, ou nada. */ *, *::before, *::after { transition: none !important; animation: none !important; } body *:not(:has(.tbx-ctst-resposta)):not(.tbx-ctst-resposta):not(.tbx-ctst-resposta *) { display: none !important; } /* A cadeia de ancestrais so serve de caminho ate o comprovante: qualquer largura, recuo ou fundo que ela traga do tema atrapalha no papel. */ body *:has(.tbx-ctst-resposta) { display: block !important; margin: 0 !important; padding: 0 !important; max-width: none !important; width: auto !important; background: none !important; box-shadow: none !important; border: 0 !important; position: static !important; } body { background: #fff !important; color: #000; font-size: 12pt; } @page { margin: 18mm 16mm; } /* No papel o cartao deixa de ser cartao: borda, sombra e fundo sao recursos de tela, e a folha ja e a moldura. */ .tbx-ctst-resposta, .tbx-ctst-comprovante { max-width: none !important; width: auto !important; margin: 0 !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: none !important; box-shadow: none !important; color: #000 !important; } .tbx-ctst-selo { display: flex !important; justify-content: space-between; align-items: baseline; gap: 12px; margin: 0 0 6mm; padding-bottom: 3mm; border-bottom: 1.5pt solid #123a63; } .tbx-ctst-selo-tipo { font-size: 10pt; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #123a63; } .tbx-ctst-selo-emissor { font-size: 11pt; color: #123a63; } /* A marca de confirmacao, os icones e os botoes sao sinalizacao de tela. No papel gastam tinta e nao dizem nada que o texto ja nao diga. */ .tbx-ctst-marca, .tbx-ctst-aviso-icone, .tbx-ctst-icone-documento, .tbx-ctst-copiar, .tbx-ctst-comprovante-acoes { display: none !important; } .tbx-ctst-comprovante-topo { display: block !important; padding-bottom: 0 !important; border-bottom: 0 !important; } .tbx-ctst-comprovante-titulo { font-size: 15pt !important; margin: 0 0 4mm !important; color: #000 !important; } .tbx-ctst-comprovante-resumo, .tbx-ctst-duplicado, .tbx-ctst-rotulo-protocolo, .tbx-ctst-comprovante-avisos li { max-width: none !important; font-size: 11pt !important; line-height: 1.5 !important; color: #000 !important; } .tbx-ctst-rotulo-protocolo { margin: 0 0 2mm !important; } .tbx-ctst-comprovante-avisos { margin: 5mm 0 0 !important; gap: 2mm !important; } /* O numero e o que a pessoa volta para ler. No papel ele ganha moldura. */ .tbx-ctst-bloco-protocolo { display: block !important; padding: 4mm 5mm !important; margin: 0 !important; border: 1pt solid #123a63 !important; border-radius: 0 !important; background: none !important; } .tbx-ctst-protocolo { font-size: 18pt !important; letter-spacing: .06em; } /* O tema pinta o link pela variavel do Bootstrap, com especificidade maior que `.tbx-ctst-contato a`. No papel, link colorido e sublinhado nao leva a lugar nenhum -- e o texto do link ja e o proprio endereco. */ .tbx-ctst-resposta a, .tbx-ctst-resposta a:link, .tbx-ctst-resposta a:visited { color: #000 !important; text-decoration: none !important; /* O tema sublinha por borda pontilhada, nao por text-decoration. */ border-bottom: 0 !important; } /* Vazio quando ninguem carimbou -- sem JavaScript nao ha como saber a hora, e a linha some em vez de sair em branco atras de um rotulo. */ .tbx-ctst-impresso-em { display: inline; } .tbx-ctst-impresso-em:empty { display: none; } .tbx-ctst-rodape-impresso { display: block !important; margin-top: 8mm !important; padding-top: 3mm; border-top: .5pt solid #8a97ab; font-size: 9pt; color: #4a5568; } }