/* ========================================================================== Cadastro de Coordenadores — folha de estilo única do sistema. Paleta institucional: azul-marinho, azul, amarelo do logotipo. As cores da página pública podem ser trocadas no painel; elas chegam como variáveis no atributo style da tag e sobrescrevem o padrão daqui. ========================================================================== */ :root { --cor-fundo: #eef2f7; --cor-cartao: #ffffff; --cor-topo: #ffffff; --cor-topo-texto: #12315c; --cor-primaria: #12315c; --cor-destaque: #1d5fae; --cor-realce: #f5c518; --cor-texto: #1f2a37; --largura: 820px; --cinza-borda: #d5dce6; --cinza-claro: #f4f6f9; --cinza-texto: #5b6878; --vermelho: #c0392b; --verde: #1e8449; --raio: 10px; --sombra: 0 1px 3px rgba(16, 32, 56, .08), 0 8px 24px rgba(16, 32, 56, .06); --fonte: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; } * { box-sizing: border-box; } /* Precisa vir com !important: regras como .botao{display:inline-block} têm mais peso que o [hidden] do navegador e faziam o botão reaparecer. */ [hidden] { display: none !important; } html, body { margin: 0; padding: 0; } body { font-family: var(--fonte); font-size: 15px; line-height: 1.5; color: var(--cor-texto); background: var(--cor-fundo); -webkit-font-smoothing: antialiased; } h1, h2, h3 { color: var(--cor-primaria); line-height: 1.25; margin: 0 0 .5rem; } h1 { font-size: 1.6rem; } h2 { font-size: 1.25rem; } h3 { font-size: 1.05rem; } a { color: var(--cor-destaque); } a:hover { text-decoration: none; } code { background: var(--cinza-claro); padding: .1em .35em; border-radius: 4px; font-size: .9em; } /* ------------------------------------------------------------- botões --- */ .botao { display: inline-block; padding: .65rem 1.25rem; border: 0; border-radius: var(--raio); background: var(--cor-primaria); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; transition: filter .15s ease; } .botao:hover { filter: brightness(1.15); } .botao:disabled { opacity: .6; cursor: default; } .botao:focus-visible { outline: 3px solid var(--cor-realce); outline-offset: 2px; } .botao-secundario { background: transparent; color: var(--cor-primaria); border: 1px solid var(--cinza-borda); } .botao-secundario:hover { background: var(--cinza-claro); filter: none; } .botao-perigo { background: var(--vermelho); } .botao-mini { padding: .35rem .7rem; font-size: .85rem; } /* -------------------------------------------------------- página pública */ .pagina-publica .cabecalho { background: var(--cor-topo); color: var(--cor-topo-texto); padding: 1.5rem 1rem; border-bottom: 4px solid var(--cor-realce); } .cabecalho-interno { max-width: var(--largura); margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; } .cabecalho-interno h1 { color: var(--cor-topo-texto); margin: 0; } .cabecalho .subtitulo { margin: .25rem 0 0; opacity: .8; font-size: .95rem; } /* O cartão atrás do logotipo some quando o topo é claro (branco no branco) e reaparece se alguém escurecer a faixa — o PNG do instituto é transparente. */ .logo { max-height: 76px; max-width: 260px; background: var(--cor-cartao); padding: 4px; border-radius: 8px; } .conteudo { max-width: var(--largura); margin: 0 auto; padding: 1.75rem 1rem 3rem; } .cartao { background: var(--cor-cartao); border-radius: var(--raio); box-shadow: var(--sombra); padding: 1.75rem; } /* O formulário público sai em blocos: dados básicos num cartão, perguntas em outro. Cada cartão é um container, com respiro entre eles. */ .conteudo .cartao + .cartao, .conteudo form .cartao:first-child { margin-top: 1.25rem; } .cartao .campo:last-child { margin-bottom: 0; } .cartao-envio .acoes { margin-top: 0; } .cartao-intro { padding-bottom: 1.25rem; } .cartao-sucesso { text-align: center; } .selo-ok { width: 64px; height: 64px; line-height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--verde); color: #fff; font-size: 2rem; } .intro { margin-top: 0; color: var(--cinza-texto); } .rodape { max-width: var(--largura); margin: 0 auto; padding: 0 1rem 2.5rem; color: var(--cinza-texto); font-size: .85rem; text-align: center; } .rodape p { margin: .25rem 0; } /* ---------------------------------------------------------- formulários */ .formulario { margin: 0; } .formulario-estreito { max-width: 420px; } .campo { margin-bottom: 1.15rem; } .campo > label { display: block; font-weight: 600; margin-bottom: .35rem; font-size: .95rem; } .campo .obrig { color: var(--vermelho); } .ajuda { margin: 0 0 .4rem; color: var(--cinza-texto); font-size: .85rem; } input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=password], input[type=search], select, textarea { width: 100%; padding: .6rem .75rem; border: 1px solid var(--cinza-borda); border-radius: var(--raio); background: #fff; color: var(--cor-texto); font: inherit; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-destaque); box-shadow: 0 0 0 3px rgba(29, 95, 174, .15); } textarea { resize: vertical; min-height: 96px; } input[type=color] { width: 100%; height: 42px; padding: 2px; border: 1px solid var(--cinza-borda); border-radius: var(--raio); background: #fff; } .opcoes { display: grid; gap: .5rem; } .opcoes-linha { grid-auto-flow: column; justify-content: start; gap: 1.5rem; } .opcao { display: flex; align-items: flex-start; gap: .5rem; font-weight: 400; cursor: pointer; } .opcao input { margin-top: .2rem; accent-color: var(--cor-destaque); } .campo-erro input, .campo-erro select, .campo-erro textarea { border-color: var(--vermelho); } .mensagem-erro { color: var(--vermelho); font-size: .85rem; margin: .35rem 0 0; } .acoes { margin-top: 1.5rem; display: flex; gap: .75rem; flex-wrap: wrap; } .aviso-lgpd { color: var(--cinza-texto); font-size: .8rem; margin-top: 1rem; } /* O campo isca precisa sumir da tela sem sumir do DOM. */ .isca { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .alerta { padding: .85rem 1rem; border-radius: var(--raio); margin-bottom: 1.25rem; border-left: 4px solid; } .alerta-erro { background: #fdecea; border-color: var(--vermelho); color: #8e2b20; } .alerta-ok { background: #e8f6ee; border-color: var(--verde); color: #14603a; } .alerta-aviso { background: #fff7e0; border-color: var(--cor-realce); color: #6b5200; } /* ---------------------------------------------------------------- login */ .pagina-login { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: linear-gradient(160deg, var(--cor-primaria), #0a1c36); padding: 2rem 1rem; } .caixa-login { background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(0, 0, 0, .25); padding: 2.25rem; width: 100%; max-width: 400px; border-top: 5px solid var(--cor-realce); } .caixa-larga { max-width: 640px; } .subtitulo-login { margin: 0 0 1.5rem; color: var(--cinza-texto); font-size: .9rem; } /* A caixa do login é branca, então o PNG transparente do instituto entra direto, sem cartão de apoio. */ .logo-login { display: block; margin: 0 auto 1.75rem; max-height: 88px; max-width: 100%; } /* Some da tela, continua no leitor: a página precisa de um título mesmo sem texto visível. */ .oculto-visual { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .volta { margin: 1.5rem 0 0; font-size: .85rem; text-align: center; } .lista-checagem { margin: 0 0 1.25rem; padding-left: 1.2rem; color: var(--cinza-texto); } .lista-checagem li { margin-bottom: .3rem; } /* --------------------------------------------------------------- painel */ .pagina-painel { background: var(--cinza-claro); } .barra { background: #fff; color: var(--cor-primaria); display: flex; align-items: center; gap: 1.5rem; padding: 0 1.25rem; flex-wrap: wrap; border-bottom: 3px solid var(--cor-realce); } .barra-marca { display: flex; align-items: center; font-weight: 700; padding: .6rem 0; white-space: nowrap; color: var(--cor-primaria); text-decoration: none; } /* Barra branca: o PNG transparente do instituto entra direto, sem o cartão de apoio que era necessário quando o fundo era azul-marinho. */ .barra-logo { display: block; max-height: 40px; } /* Sem nowrap, uma aba sozinha cai para a linha de baixo e a barra dobra de altura. Preferível rolar as abas do que quebrar o cabeçalho. */ .barra-abas { display: flex; gap: .25rem; flex: 1; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .barra-abas::-webkit-scrollbar { display: none; } .aba { white-space: nowrap; } .barra-usuario { display: flex; align-items: center; gap: .5rem; font-size: .85rem; padding: .5rem 0; color: var(--cor-primaria); } .aba { background: transparent; border: 0; border-bottom: 3px solid transparent; color: var(--cor-primaria); font: inherit; font-size: .92rem; padding: .95rem .8rem; cursor: pointer; /* A aba inativa é a mesma cor da ativa, só mais apagada: assim o negrito e o traço amarelo é que marcam a seleção, sem trocar o tom da marca. */ opacity: .65; } .aba:hover { opacity: 1; } .aba.ativa { opacity: 1; border-bottom-color: var(--cor-primaria); font-weight: 700; } .painel { max-width: 1180px; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; } .painel-aba { display: none; } .painel-aba.ativa { display: block; } .nota { color: var(--cinza-texto); font-size: .9rem; max-width: 70ch; } .bloco { background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 1.25rem; margin-bottom: 1.25rem; } .grade-dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; } .grade-dupla > .formulario { background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 1.25rem; } .cartoes { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; } .cartao-numero { background: #fff; border: 1px solid var(--cinza-borda); border-left: 4px solid var(--cor-destaque); border-radius: var(--raio); padding: 1rem 1.15rem; } .cartao-numero strong { display: block; font-size: 1.9rem; color: var(--cor-primaria); line-height: 1.1; } .cartao-numero span { color: var(--cinza-texto); font-size: .85rem; } .lista-barras { display: grid; gap: .6rem; } .barra-item { display: grid; grid-template-columns: 130px 1fr 42px; align-items: center; gap: .6rem; font-size: .88rem; } .barra-trilho { background: var(--cinza-claro); border-radius: 99px; height: 10px; overflow: hidden; } .barra-preenchida { background: var(--cor-destaque); height: 100%; } .barra-item b { text-align: right; color: var(--cinza-texto); font-weight: 600; } /* --------------------------------------------------------------- filtros */ .filtros { display: flex; gap: .75rem; flex-wrap: wrap; align-items: flex-end; background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--raio); padding: 1rem; margin-bottom: .75rem; } .campo-linha { margin: 0; min-width: 140px; flex: 1 1 140px; } .campo-linha label { font-size: .82rem; } .filtros-acoes { display: flex; gap: .5rem; } .exportacao { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; font-size: .85rem; } /* --------------------------------------------------------------- tabelas */ .tabela-rolagem { overflow-x: auto; background: #fff; border: 1px solid var(--cinza-borda); border-radius: var(--raio); } .tabela { width: 100%; border-collapse: collapse; font-size: .9rem; } .tabela th, .tabela td { padding: .7rem .85rem; text-align: left; border-bottom: 1px solid var(--cinza-borda); white-space: nowrap; } .tabela th { background: var(--cinza-claro); color: var(--cor-primaria); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; } .tabela tbody tr:hover { background: #fbfcfe; } .tabela td:last-child, .tabela th:last-child { text-align: right; } .tabela .vazio { text-align: center; color: var(--cinza-texto); padding: 2rem; white-space: normal; } .etiqueta { display: inline-block; padding: .15rem .55rem; border-radius: 99px; font-size: .75rem; font-weight: 600; } .etiqueta-novo { background: #e6effa; color: #17457f; } .etiqueta-em_analise { background: #fff3d6; color: #7a5a00; } .etiqueta-aprovado { background: #e4f5ea; color: #14603a; } .etiqueta-recusado { background: #fbe4e1; color: #8e2b20; } .paginacao { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1rem; font-size: .88rem; } /* ------------------------------------------------------------- perguntas */ .barra-acoes { display: flex; gap: .6rem; margin: 1rem 0; flex-wrap: wrap; } .lista-perguntas { display: grid; gap: .6rem; } .item-pergunta { background: #fff; border: 1px solid var(--cinza-borda); border-left: 4px solid var(--cor-destaque); border-radius: var(--raio); padding: .85rem 1rem; display: flex; align-items: center; gap: 1rem; } .item-pergunta.sistema { border-left-color: var(--cor-realce); } .item-pergunta.inativa { opacity: .55; } .item-pergunta .pega { cursor: grab; color: var(--cinza-texto); font-size: 1.1rem; user-select: none; } .item-pergunta .corpo { flex: 1; min-width: 0; } .item-pergunta .rotulo { font-weight: 600; } .item-pergunta .meta { color: var(--cinza-texto); font-size: .82rem; margin-top: .15rem; } .item-pergunta.arrastando { outline: 2px dashed var(--cor-destaque); opacity: .6; } .selo { display: inline-block; padding: .1rem .45rem; border-radius: 4px; background: var(--cinza-claro); font-size: .72rem; color: var(--cinza-texto); margin-left: .35rem; } /* -------------------------------------------------------------- aparência */ .logo-atual { margin-bottom: 1rem; } .logo-atual img { max-height: 70px; border: 1px solid var(--cinza-borda); border-radius: 8px; padding: 4px; background: #fff; } .cores { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; } .previa { border: 1px solid var(--cinza-borda); border-radius: var(--raio); overflow: hidden; } .previa-cabecalho { padding: 1rem; font-weight: 700; } .previa-cartao { padding: 1rem; } .previa-cartao p { margin: 0 0 1rem; font-size: .85rem; } .previa-botao { display: inline-block; padding: .5rem 1rem; border-radius: 8px; font-size: .85rem; font-weight: 600; } /* ----------------------------------------------------------------- modal */ .modal { position: fixed; inset: 0; background: rgba(12, 24, 44, .55); display: flex; align-items: center; justify-content: center; padding: 1rem; z-index: 50; } .modal[hidden] { display: none; } .modal-caixa { background: #fff; border-radius: 14px; width: 100%; max-width: 640px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: 0 24px 60px rgba(0, 0, 0, .3); } .modal-topo { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--cinza-borda); } .modal-topo h3 { margin: 0; } .modal-fechar { background: none; border: 0; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--cinza-texto); } .modal-corpo { padding: 1.25rem; overflow-y: auto; } .modal-rodape { display: flex; justify-content: flex-end; gap: .6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--cinza-borda); flex-wrap: wrap; } .detalhe { display: grid; gap: .6rem; } .detalhe-linha { display: grid; grid-template-columns: 210px 1fr; gap: .75rem; padding-bottom: .5rem; border-bottom: 1px dashed var(--cinza-borda); } .detalhe-linha dt { color: var(--cinza-texto); font-size: .85rem; } .detalhe-linha dd { margin: 0; word-break: break-word; } .opcoes-editor { display: grid; gap: .4rem; } .opcao-editor { display: flex; gap: .5rem; } .opcao-editor input { flex: 1; } /* --------------------------------------------------------------- avisos */ .avisos { position: fixed; right: 1rem; bottom: 1rem; display: grid; gap: .5rem; z-index: 60; } .aviso { background: var(--cor-primaria); color: #fff; padding: .75rem 1rem; border-radius: var(--raio); box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-width: 330px; font-size: .9rem; animation: entrar .18s ease; } .aviso-falha { background: var(--vermelho); } .aviso-sucesso { background: var(--verde); } @keyframes entrar { from { opacity: 0; transform: translateY(8px); } } /* ------------------------------------------------------------ responsivo */ @media (max-width: 860px) { .grade-dupla { grid-template-columns: 1fr; } .cores { grid-template-columns: repeat(2, 1fr); } .detalhe-linha { grid-template-columns: 1fr; gap: .1rem; } .barra { gap: .5rem; } .barra-abas { order: 3; width: 100%; overflow-x: auto; } .barra-item { grid-template-columns: 90px 1fr 36px; } } @media print { .barra, .filtros, .exportacao, .barra-acoes, .avisos, .modal { display: none !important; } }