@import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:wght@400;500;600;700&display=swap");
/*
 * Tema UP — cores, medidas e componentes dos produtos da UP Qualidade em Saúde
 * Autor: Daniel Santos (Grupo Iconne) · Colaboração: Claude (assistente de IA)
 * 0.3.0 · 29/09/2026
 *
 * 0.3.0: o carrossel previsível e suave (pedido do Daniel, 29/09: "quero que a
 * transição seja previsível para quem vê, uma mini barra de tempo mostrando
 * quando vai mudar e que a mudança seja mais suave"). A barra de tempo cresceu
 * e o esmaecimento ficou mais longo — e ambos deixam de ser desligados pela
 * preferência de menos movimento do sistema, que no navegador do Daniel estava
 * ligada: a barra aparecia sempre cheia e a troca era seca.
 *
 * POR QUE EXISTE: o Daniel pediu que ícones, botões e cores tenham UM lugar só,
 * "para que seja reutilizados em todo projeto e apontem sempre para o mesmo
 * elemento, assim se mudar um atualizar ajusta tudo". Antes, cada produto
 * carregava a sua cópia do CSS do tema. Agora Canal de Denúncias, Saúde Mental
 * e Telemedicina carregam ESTE arquivo pelo endereço (variável de ambiente
 * TEMA_URL de cada um) e nenhum guarda cor, medida ou ícone próprio.
 *
 * DIVISÃO DE TRABALHO, para cada coisa ter um dono só:
 *   - este arquivo: todos os valores (as variáveis abaixo) e as regras dos
 *     componentes da web — botão, campo, botão de rede social, tela de entrada;
 *   - tema.js: o que é configuração — quais redes aparecem no login, onde
 *     estão os ícones e as imagens;
 *   - icones/ e imagens/: os arquivos.
 * A Telemedicina é React Native: ela não usa as classes daqui, mas usa as
 * MESMAS variáveis (var(--marca-acao) etc.) nos estilos dela, na web.
 *
 * O QUE AINDA NÃO É: a forma final. Pela decisão de 28/09
 * (onde_mora_o_que_e_comum_aos_produtos_28_09), a identidade é configuração da
 * revenda, editada na área geral dela no Janua e servida no endereço dela.
 * Este arquivo estático é o primeiro passo: quando a tela de edição existir,
 * ele passa a ser gerado a partir do que a revenda salvou.
 *
 * Valores do Figma "Telas Telemedicina UP" (48:1139); a leitura completa está
 * no Design System "Tema UP" (https://claude.ai/artifact/Lmo8zxbYbNdH9BUNqAsR9B).
 */

:root {
  /* Cores da marca */
  --marca-escura: #364f6b;
  --marca-escura-media: rgba(54, 79, 107, 0.5);
  --marca-acao: #00a6f9;
  --marca-destaque: #00f897;

  /* Cores com papel próprio: no Figma são iguais a marca-acao, mas fazem
     trabalhos diferentes (link sobre o escuro, borda do botão secundário) e
     uma revenda pode precisar trocar uma sem mexer na outra. */
  --link-sobre-escuro: #00a6f9;
  --borda-botao-secundario: #00a6f9;

  /* Texto */
  --texto-principal: #33384b;
  --texto-suave: #7d8a95;
  --texto-sobre-escuro: #ffffff;
  --texto-exemplo-sobre-escuro: rgba(255, 255, 255, 0.5);
  --texto-erro-sobre-escuro: #ffd7d7;

  /* Bordas e fundos */
  --borda-padrao: #b2bcc9;
  --borda-sobre-escuro: #7d98b2;
  --fundo-pagina: #f4f4f6;
  --fundo-erro-sobre-escuro: rgba(255, 99, 99, 0.14);
  --borda-erro-sobre-escuro: rgba(255, 140, 140, 0.55);
  --superficie: #ffffff;

  /* Situações — fixas para todas as revendas: são significado, não marca. */
  --situacao-ok: #00f897;
  --situacao-pendente: #ffd968;
  --situacao-presencial: #1662c6;
  --situacao-telemedicina: #8be1d6;

  /* Tipografia */
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* Forma */
  --raio-indicador: 4px;
  --raio-controle: 6px;
  --raio-campo: 8px;
  --raio-icone: 12px;
  --raio-cartao: 20px;
  --altura-controle: 40px;
  --altura-campo: 54px;
  --altura-etiqueta: 24px;
  --botao-social: 56px;
  --icone-social: 24px;
  --sombra-cartao: 0px 1px 10px 0px rgba(0, 0, 0, 0.11);
  --sombra-login: 0 32px 80px rgba(0, 0, 0, 0.45); /* a do login offline do Daniel */

  /* Espaço */
  --espaco-2: 8px;
  --espaco-3: 12px;
  --espaco-4: 16px;
  --espaco-5: 20px;
  --espaco-6: 24px;
}

/*
 * Contraste: vale o do Figma. Decidido pelo Daniel em 29/09/2026 (item 29,
 * "escolho figma"), depois de comparar lado a lado com uma proposta reforçada
 * (botão #0077B6, link #7FD3FF), que saiu do kit. A conta que motivou a
 * comparação fica registrada: sobre o painel #364F6B, o texto branco no botão
 * #00A6F9 dá 2,7:1, abaixo dos 4,5:1 da WCAG AA.
 */

/* ============================== Botões ============================== */
.up-btn {
  display: flex; width: 100%; align-items: center; justify-content: center; gap: var(--espaco-2);
  height: var(--altura-controle); padding: 0 var(--espaco-5);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px; font-weight: 500;
  border: 2px solid transparent; border-radius: var(--raio-campo);
  cursor: pointer; text-decoration: none; transition: filter 120ms ease;
}
.up-btn:hover { filter: brightness(0.95); }
.up-btn:focus-visible { outline: 2px solid var(--texto-sobre-escuro); outline-offset: 2px; }
.up-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.up-btn--primario { background: var(--marca-acao); color: var(--texto-sobre-escuro); }
.up-btn--secundario { background: transparent; border-color: var(--borda-botao-secundario); color: var(--texto-sobre-escuro); }
.up-btn--positivo { background: var(--marca-destaque); color: var(--marca-escura); border-radius: var(--raio-controle); }

/* ====================== Botão de rede social ======================== */
/* Figma: círculo branco de 56 px com a marca de 24 px no centro. */
.up-rede {
  display: flex; align-items: center; justify-content: center;
  width: var(--botao-social); height: var(--botao-social); padding: 0;
  border: 0; border-radius: 50%; background: var(--superficie); cursor: pointer;
}
/* Login social ainda não configurado (é Identity Provider no Zitadel): o
   Daniel pediu em 29/09 o botão desativado — e ele precisa PARECER
   desativado, senão a pessoa clica e acha que quebrou. */
.up-rede[aria-disabled="true"] { cursor: not-allowed; opacity: 0.45; }
.up-rede:focus-visible { outline: 2px solid var(--texto-sobre-escuro); outline-offset: 2px; }
.up-rede img { width: var(--icone-social); height: var(--icone-social); }
.up-redes { display: grid; gap: var(--espaco-3); justify-items: center; }
.up-redes__ou { display: flex; align-items: center; gap: var(--espaco-4); width: 100%; margin: 0; font-size: 14px; color: var(--texto-exemplo-sobre-escuro); }
.up-redes__ou::before, .up-redes__ou::after { content: ""; flex: 1; border-top: 1px solid var(--texto-exemplo-sobre-escuro); }
.up-redes__lista { display: flex; gap: var(--espaco-6); }

/* ================= Campo com rótulo flutuante sobre a borda ================ */
.up-campo { position: relative; display: flex; align-items: center; height: var(--altura-campo); margin-top: var(--espaco-2); }
.up-campo__entrada {
  width: 100%; height: 100%; padding: 0 var(--espaco-4);
  font-family: var(--font-sans); font-size: 16px; line-height: 24px;
  background: transparent; color: var(--texto-sobre-escuro);
  border: 1px solid var(--borda-sobre-escuro); border-radius: var(--raio-campo);
}
.up-campo__entrada::placeholder { color: var(--texto-exemplo-sobre-escuro); }
.up-campo__entrada:focus { outline: 2px solid var(--marca-acao); outline-offset: 0; border-color: transparent; }
.up-campo--com-sufixo .up-campo__entrada { padding-right: 48px; }
.up-campo__rotulo {
  position: absolute; top: -8px; left: 14px; padding: 0 4px; z-index: 1;
  font-size: 14px; line-height: 14px; background: var(--marca-escura); color: var(--texto-sobre-escuro);
}
.up-campo__sufixo {
  position: absolute; right: 8px; display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; padding: 0; background: transparent; border: 0; border-radius: var(--raio-controle); cursor: pointer;
}
.up-campo__sufixo img { width: 20px; height: 20px; }
.up-campo__sufixo:focus-visible { outline: 2px solid var(--marca-acao); }

/* ========================= Tela de entrada ========================= */
/* Um cartão de 960 × 620 no meio da página, com o carrossel à esquerda e o
   formulário à direita — o login offline do Daniel (UP_Login_*.html). Até
   29/09 os dois ocupavam a janela inteira (55/45); ele pediu a tela "menor
   com um carrossel passando" e que "não fica em tela cheia".
   Dentro do cartão o campo e o botão de rede encolhem um pouco em relação ao
   Figma (54 → 48 px, 56 → 44 px): com as medidas cheias o formulário não
   cabe nos 620 px. As variáveis são redefinidas só aqui dentro. */
.up-login {
  display: flex; align-items: center; justify-content: center; min-height: 100vh; box-sizing: border-box;
  padding: 72px var(--espaco-5) 32px;
  background: var(--fundo-pagina); color: var(--texto-principal); font-family: var(--font-sans);
}
.up-login__cartao {
  --altura-campo: 48px; --botao-social: 44px; --icone-social: 20px;
  display: grid; grid-template-columns: 1fr 1fr; width: 100%; max-width: 960px; min-height: 620px;
  border-radius: var(--raio-cartao); overflow: hidden; box-shadow: var(--sombra-login);
  background: var(--marca-escura); color: var(--texto-sobre-escuro);
}
.up-login__painel { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--espaco-5); padding: 28px 40px; }
.up-login__form { display: flex; flex-direction: column; gap: var(--espaco-3); width: 100%; max-width: 380px; }
.up-login__marca { display: flex; flex-direction: column; align-items: center; gap: var(--espaco-2); margin-bottom: var(--espaco-2); color: inherit; text-decoration: none; }
.up-login__logo { width: 96px; height: auto; }
.up-login__produto { margin: 0; font-size: 13px; line-height: 16px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--marca-destaque); }
.up-login__titulo { margin: 0; font-size: 20px; line-height: 28px; font-weight: 700; }
.up-login__instrucao { margin: 0; font-size: 15px; line-height: 22px; font-weight: 600; }
.up-login__instrucao strong { font-weight: 700; color: var(--marca-destaque); }
.up-login__esqueci {
  align-self: flex-end; margin-top: -4px; padding: 0; background: none; border: 0;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600;
  color: var(--link-sobre-escuro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.up-login__erro {
  display: flex; align-items: flex-start; gap: var(--espaco-2); padding: var(--espaco-3);
  border-radius: var(--raio-campo); background: var(--fundo-erro-sobre-escuro);
  border: 1px solid var(--borda-erro-sobre-escuro); font-size: 14px; line-height: 20px; color: var(--texto-erro-sobre-escuro);
}
.up-login__erro svg { flex: none; margin-top: 2px; }
.up-login__rodape {
  display: grid; gap: 4px; justify-items: center; width: 100%; max-width: 380px;
  padding-top: var(--espaco-3); border-top: 1px solid var(--texto-exemplo-sobre-escuro); text-align: center;
}
.up-login__ajuda { margin: 0; font-size: 13px; line-height: 18px; color: var(--texto-sobre-escuro); }
.up-login__direitos { margin: 0; font-size: 12px; line-height: 16px; color: var(--texto-exemplo-sobre-escuro); }
.up-girando { animation: up-girar 0.9s linear infinite; }
@keyframes up-girar { to { transform: rotate(360deg); } }

/* Voltar · Início — do desenho offline do Daniel. */
.up-voltar {
  position: fixed; top: 16px; left: 16px; z-index: 20; display: flex; align-items: center; gap: var(--espaco-2);
  padding: 6px 14px; border-radius: 9999px; background: rgba(54, 79, 107, 0.88);
  border: 1px solid var(--borda-sobre-escuro); box-shadow: var(--sombra-cartao);
}
.up-voltar a, .up-voltar button {
  padding: 2px 0; background: none; border: 0; cursor: pointer; text-decoration: none;
  font-family: var(--font-sans); font-size: 14px; font-weight: 600; color: var(--texto-sobre-escuro);
}
.up-voltar span { color: var(--texto-exemplo-sobre-escuro); }

/* =================== Carrossel da tela de entrada =================== */
/* O login offline do Daniel (UP_Login_*.html), escolhido em 28/09 como a tela
   que substitui o login atual, com as cores e a fonte do Figma. */
.up-carrossel { position: relative; overflow: hidden; background: var(--marca-escura); color: var(--texto-sobre-escuro); }
.up-carrossel__ondas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.35; mix-blend-mode: screen; }
.up-carrossel__aneis { position: absolute; top: 40%; left: 50%; width: 0; height: 0; }
.up-carrossel__anel { position: absolute; top: 0; left: 0; border-radius: 50%; border: 1px solid; transform: translate(-50%, -50%); animation: up-pulso 4s ease-in-out infinite; }
@keyframes up-pulso { 0%, 100% { opacity: 0.35; } 50% { opacity: 0.8; } }
.up-carrossel__ilustracao { position: absolute; top: 40%; left: 50%; width: min(260px, 58%); transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.9s ease-in-out; }
.up-carrossel__ilustracao.is-ativa { opacity: 0.92; }
.up-carrossel__ilustracao svg { display: block; width: 100%; height: auto; }
.up-carrossel__indicador { position: absolute; top: 14px; left: 50%; z-index: 2; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.up-carrossel__pontos { display: flex; }
/* O botão tem 24 px para ser clicável (WCAG 2.5.8); o ponto visível é o ::before. */
.up-carrossel__ponto { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; }
.up-carrossel__ponto::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.25); border: 1.5px solid rgba(255, 255, 255, 0.45); transition: transform 0.25s, background 0.25s; }
.up-carrossel__ponto:hover::before { background: rgba(255, 255, 255, 0.55); }
.up-carrossel__ponto.is-ativo::before { background: var(--marca-destaque); border-color: var(--marca-destaque); transform: scale(1.3); }
.up-carrossel__ponto:focus-visible { outline: 2px solid var(--texto-sobre-escuro); border-radius: 6px; }
/* A barra de tempo: enche em 5 s e, cheia, o destaque troca. Larga e alta o
   bastante para ser vista de relance — é ela que torna a troca previsível. */
.up-carrossel__progresso { width: 168px; height: 4px; border-radius: 2px; overflow: hidden; background: rgba(255, 255, 255, 0.22); }
.up-carrossel__barra { height: 100%; background: var(--marca-destaque); transform-origin: left; animation: up-progresso 5s linear forwards; }
@keyframes up-progresso { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.up-carrossel--pausado .up-carrossel__barra { animation-play-state: paused; }
.up-carrossel__contador { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.08em; color: var(--texto-exemplo-sobre-escuro); }
.up-carrossel__texto { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 80px 28px 28px; background: linear-gradient(to top, rgba(54, 79, 107, 0.95) 35%, rgba(54, 79, 107, 0)); animation: up-surgir 0.8s ease-out; }
@keyframes up-surgir { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.up-carrossel__titulo { margin: 0; font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.84px; }
.up-carrossel__apoio { margin: var(--espaco-2) 0 0; font-size: 16px; line-height: 22px; font-weight: 500; letter-spacing: -0.6px; opacity: 0.8; }
.up-carrossel__selo { display: inline-flex; align-items: center; height: var(--altura-etiqueta); margin-top: var(--espaco-3); padding: 0 var(--espaco-2); border-radius: var(--raio-indicador); background: var(--situacao-ok); color: var(--marca-escura); font-size: 12px; line-height: 16px; font-weight: 600; }

@media (max-width: 760px) {
  .up-login { align-items: flex-start; padding: 64px 12px 24px; }
  .up-login__cartao { grid-template-columns: 1fr; min-height: 0; }
  /* No celular o carrossel vira uma faixa no topo do cartão, como no desenho do Daniel. */
  .up-carrossel { height: 240px; }
  .up-carrossel__ilustracao { width: 130px; top: 40%; }
  .up-carrossel__texto { padding: 56px 20px 16px; }
  .up-carrossel__titulo { font-size: 22px; line-height: 28px; }
  .up-carrossel__apoio { font-size: 15px; line-height: 20px; }
  .up-login__painel { padding: 28px 16px 32px; }
}
/* Para quem pediu menos movimento, saem o que é só enfeite: a transição dos
   botões, o giro de carregamento e o pulso dos anéis. A barra de tempo e o
   esmaecimento do carrossel FICAM (0.3.0): sem eles a troca, que continua
   automática por regra do Daniel, vira um corte seco e sem aviso — o
   contrário do que quem pediu menos movimento precisa. */
@media (prefers-reduced-motion: reduce) {
  .up-btn { transition: none; }
  .up-girando, .up-carrossel__anel { animation: none; }
}