/* ===================================================================== Fé na Vida — folha única, mobile first Local: /var/www/fenavida/public_html/_css/estilo.css Paleta padrão: vermelho claro + rosa. Cada usuário escolhe a sua em "Minha conta"; o topo.php escreve . Cabeçalho ≈ 20% da altura da tela; rodapé cinza ≈ 12%. ===================================================================== */ /* --- Cores ------------------------------------------------------------- */ :root, [data-paleta="rosa"] { --cor-forte: #c2185b; /* botões, links, destaques */ --cor-media: #ec6f8f; /* início do degradê do cabeçalho */ --cor-clara: #f7a8b8; /* fim do degradê */ --cor-suave: #fde4ea; /* fundos de destaque */ --cor-fundo: #fff7f9; /* fundo da página */ --cor-texto-topo: #ffffff; --cor-faixa: #fbd3dc; /* faixa de referência nos gráficos */ } [data-paleta="vermelho"] { --cor-forte: #c62828; --cor-media: #ef6461; --cor-clara: #f8a5a0; --cor-suave: #fde3e1; --cor-fundo: #fff8f7; --cor-texto-topo: #ffffff; --cor-faixa: #fbd2cf; } [data-paleta="laranja"] { --cor-forte: #c24e00; --cor-media: #f2863c; --cor-clara: #f9b98a; --cor-suave: #fde9da; --cor-fundo: #fffaf5; --cor-texto-topo: #ffffff; --cor-faixa: #fcdcc3; } [data-paleta="amarelo"] { --cor-forte: #8a6100; --cor-media: #f2c230; --cor-clara: #f8dd86; --cor-suave: #fdf3cf; --cor-fundo: #fffdf4; --cor-texto-topo: #3a2c00; --cor-faixa: #f8e9b0; } [data-paleta="verde"] { --cor-forte: #2e7d32; --cor-media: #5fb56a; --cor-clara: #a5d9a9; --cor-suave: #e3f3e4; --cor-fundo: #f7fcf7; --cor-texto-topo: #ffffff; --cor-faixa: #cdeacf; } [data-paleta="azul"] { --cor-forte: #1565c0; --cor-media: #4f94dd; --cor-clara: #9cc6f0; --cor-suave: #e1eefb; --cor-fundo: #f6faff; --cor-texto-topo: #ffffff; --cor-faixa: #cfe2f7; } :root { --superficie: #ffffff; --superficie-2: #f4f4f5; --tinta: #1f2328; --tinta-2: #4a4f57; --tinta-3: #6e747c; --linha: #e3e4e8; --ok: #2f7a4d; --ok-suave: #e3f1e8; --andamento: #1f5f8b; --andamento-suave: #e2edf6; --alerta: #b3261e; --alerta-suave: #fde7e5; --aviso: #8a5300; --aviso-suave: #fdf0dc; --neutro: #5f656d; --neutro-suave: #eceef0; --cinza-rodape-1: #eceef1; --cinza-rodape-2: #d5d9de; --cinza-rodape-texto: #4b5360; --raio: 14px; --sombra: 0 1px 2px rgba(40, 20, 30, .06), 0 4px 14px rgba(40, 20, 30, .05); --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --largura-menu: min(300px, 86vw); color-scheme: light; } /* --- Base -------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cor-fundo); color: var(--tinta); font: 16px/1.5 var(--fonte); display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body.menu-aberto { overflow: hidden; } a { color: var(--cor-forte); } a:hover { text-decoration-thickness: 2px; } h1, h2, h3 { line-height: 1.2; margin: 0; text-wrap: balance; } h1 { font-size: clamp(1.45rem, 4.5vw, 1.9rem); } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; } p { margin: 0; } img { max-width: 100%; } :focus-visible { outline: 3px solid var(--cor-forte); outline-offset: 2px; } .texto-leitor { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .nota { color: var(--tinta-3); font-size: .9rem; } .numero { font-variant-numeric: tabular-nums; } td.numero, th.numero { text-align: right; white-space: nowrap; } /* --- Cabeçalho (≈20% da altura) ---------------------------------------- */ .topo { min-height: 20vh; min-height: 20dvh; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; padding: 14px clamp(14px, 4vw, 32px) 0; background: linear-gradient(120deg, var(--cor-media), var(--cor-clara)); color: var(--cor-texto-topo); box-shadow: 0 2px 10px rgba(0, 0, 0, .08); } .topo-linha { display: flex; align-items: center; gap: 12px; max-width: 1120px; width: 100%; margin: 0 auto; } .marca { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 700; font-size: clamp(1.1rem, 3.6vw, 1.45rem); letter-spacing: .01em; margin-right: auto; } .marca-laco { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .topo-usuario { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; font-weight: 600; } .topo-usuario .avatar { width: 42px; height: 42px; border: 2px solid rgba(255, 255, 255, .85); } .topo-paciente { max-width: 1120px; width: 100%; margin: 0 auto; font-size: clamp(1.1rem, 3.5vw, 1.35rem); font-weight: 700; } /* Botão hambúrguer */ .botao-menu { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; cursor: pointer; background: rgba(255, 255, 255, .18); flex: none; } .botao-menu:hover { background: rgba(255, 255, 255, .3); } .hamburguer { display: grid; gap: 5px; width: 22px; } .hamburguer i { display: block; height: 2.5px; border-radius: 2px; background: currentColor; } /* Abas do paciente (base do cabeçalho) */ .abas { display: flex; gap: 4px; max-width: 1120px; width: 100%; margin: 0 auto; overflow-x: auto; scrollbar-width: none; } .abas::-webkit-scrollbar { display: none; } .abas a { flex: none; padding: 10px 14px; border-radius: 12px 12px 0 0; color: inherit; text-decoration: none; font-weight: 600; font-size: .95rem; opacity: .92; } .abas a:hover { background: rgba(255, 255, 255, .18); opacity: 1; } .abas a[aria-current="page"] { background: var(--cor-fundo); color: var(--cor-forte); opacity: 1; } .topo:not(:has(.abas)) { padding-bottom: 14px; justify-content: center; } /* --- Menu lateral (gaveta) --------------------------------------------- */ .menu-alternador { position: absolute; opacity: 0; pointer-events: none; } .menu-lateral { position: fixed; inset: 0 auto 0 0; z-index: 30; width: var(--largura-menu); display: flex; flex-direction: column; background: var(--superficie); box-shadow: 4px 0 24px rgba(0, 0, 0, .18); transform: translateX(-105%); transition: transform .22s ease; overflow-y: auto; visibility: hidden; } .menu-alternador:checked ~ .menu-lateral { transform: none; visibility: visible; } .menu-fundo { position: fixed; inset: 0; z-index: 20; background: rgba(20, 10, 15, .38); opacity: 0; pointer-events: none; transition: opacity .22s ease; } .menu-alternador:checked ~ .menu-fundo { opacity: 1; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .menu-lateral, .menu-fundo { transition: none; } } .menu-lateral-topo { display: flex; align-items: center; gap: 12px; padding: 20px 16px; background: linear-gradient(120deg, var(--cor-media), var(--cor-clara)); color: var(--cor-texto-topo); } .menu-lateral-topo > div { display: grid; min-width: 0; flex: 1; } .menu-lateral-topo .nota { color: inherit; opacity: .9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .menu-lateral-topo .avatar { width: 48px; height: 48px; border: 2px solid rgba(255, 255, 255, .85); } .menu-fechar { font-size: 1.8rem; line-height: 1; cursor: pointer; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; } .menu-fechar:hover { background: rgba(255, 255, 255, .25); } .menu-grupo { margin: 16px 18px 4px; font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tinta-3); } .menu-lateral ul { list-style: none; margin: 0; padding: 0 8px; } .menu-lateral li a { display: block; padding: 10px 12px; border-radius: 10px; color: var(--tinta); text-decoration: none; font-weight: 500; } .menu-lateral li a:hover { background: var(--cor-suave); } .menu-lateral li a[aria-current] { background: var(--cor-suave); color: var(--cor-forte); font-weight: 700; } .menu-sair { margin: auto 16px 20px; padding: 10px 12px; border: 1px solid var(--linha); border-radius: 10px; text-align: center; color: var(--alerta); text-decoration: none; font-weight: 600; } .menu-sair:hover { background: var(--alerta-suave); } /* --- Conteúdo ---------------------------------------------------------- */ .conteudo { flex: 1; width: 100%; max-width: 1120px; margin: 0 auto; padding: clamp(16px, 3vw, 28px) clamp(12px, 4vw, 32px) 40px; display: flex; flex-direction: column; gap: 18px; } .secao { display: flex; flex-direction: column; gap: 12px; } .linha-titulo, .cabecalho-pagina { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; } .trilha { font-size: .9rem; color: var(--tinta-3); } .trilha a { text-decoration: none; } .link-voltar { margin-top: 6px; } .link-voltar a { text-decoration: none; font-weight: 600; } /* --- Cartões ----------------------------------------------------------- */ .cartao { background: var(--superficie); border: 1px solid var(--linha); border-radius: var(--raio); box-shadow: var(--sombra); padding: clamp(14px, 3vw, 20px); display: flex; flex-direction: column; gap: 10px; min-width: 0; } a.cartao { color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; } a.cartao:hover { border-color: var(--cor-media); transform: translateY(-1px); } .cartao-pagina { gap: 14px; } .cartao-pagina > .cartao { box-shadow: none; background: var(--superficie-2); } .cartao-formulario { width: 100%; max-width: 440px; margin: 4vh auto 0; } .grade-2 { display: grid; gap: 18px; grid-template-columns: 1fr; } .grade-cartoes, .atalhos, .pacientes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); } .pacientes { list-style: none; margin: 0; padding: 0; } .pacientes .cartao { height: 100%; border-left: 5px solid var(--cor-media); } .atalho strong, .atalhos h3 { color: var(--cor-forte); } .grade-conta { display: grid; gap: 18px; grid-template-columns: 1fr; } @media (min-width: 760px) { .grade-2 { grid-template-columns: 1fr 1fr; align-items: start; } .grade-conta { grid-template-columns: 1fr 1fr; align-items: start; } .cartao-largo { grid-column: 1 / -1; } } /* --- Botões ------------------------------------------------------------ */ .botao, button:not(.menu-fechar) { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 42px; padding: 8px 18px; border: 1px solid var(--cor-forte); border-radius: 10px; background: var(--cor-forte); color: #fff; font: inherit; font-weight: 600; text-decoration: none; cursor: pointer; white-space: nowrap; } [data-paleta="amarelo"] .botao:not(.secundario):not(.perigo), [data-paleta="amarelo"] button:not(.secundario):not(.perigo) { color: #fff; } .botao:hover, button:hover { filter: brightness(1.08); } .botao.secundario, button.secundario { background: var(--superficie); color: var(--cor-forte); } .botao.secundario:hover { background: var(--cor-suave); filter: none; } .botao.perigo, button.perigo { background: var(--superficie); color: var(--alerta); border-color: #e9b4ae; } .botao.perigo:hover { background: var(--alerta-suave); filter: none; } .botao.pequeno, button.pequeno { min-height: 32px; padding: 4px 12px; font-size: .88rem; border-radius: 8px; } .icone-editar { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; text-decoration: none; font-size: 1.05rem; color: var(--cor-forte); background: var(--cor-suave); } .icone-editar:hover { filter: brightness(.96); } .acoes-linha, .acoes-situacao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .acoes-linha { justify-content: flex-end; } .acoes-formulario { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 4px; } .formulario-inline { display: inline; margin: 0; } /* --- Formulários ------------------------------------------------------- */ .formulario { display: flex; flex-direction: column; gap: 8px; } .formulario label, .filtros label { display: flex; flex-direction: column; gap: 4px; font-weight: 600; font-size: .92rem; color: var(--tinta-2); } .formulario > label + input, .formulario > label + select, .formulario > label + textarea { margin-bottom: 6px; } input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select, textarea { width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #d3d5da; border-radius: 10px; background: var(--superficie); color: var(--tinta); font: inherit; font-weight: 400; } input[type="file"] { padding: 7px; background: var(--superficie-2); } textarea { min-height: 90px; resize: vertical; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cor-forte); box-shadow: 0 0 0 3px var(--cor-suave); } input[type="checkbox"], input[type="radio"] { width: 18px; height: 18px; accent-color: var(--cor-forte); flex: none; } .formulario .rotulo-caixa, .filtros .rotulo-caixa, .rotulo-caixa { display: flex; flex-direction: row; align-items: center; gap: 8px; font-weight: 500; color: var(--tinta); } .formulario-grade { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); } .formulario-grade .campo-inteiro { grid-column: 1 / -1; } @media (min-width: 640px) { .formulario-grade .campo-largo { grid-column: span 2; } } .formulario-linha, .filtros { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 14px; } .formulario-linha label, .filtros label:not(.rotulo-caixa) { flex: 1 1 180px; } .filtros .rotulo-caixa { min-height: 42px; } .formulario-cadastro { max-width: 560px; } .campo-com-botao { display: flex; gap: 8px; align-items: stretch; } .campo-com-botao input { flex: 1; } .campo-motivo { max-width: 220px; min-height: 32px !important; padding: 4px 8px !important; font-size: .88rem !important; } fieldset { border: 0; padding: 0; margin: 0; } /* Painéis que abrem (+ Novo ...) */ details.editor { border: 1px dashed var(--cor-clara); border-radius: var(--raio); background: var(--cor-fundo); padding: 0 16px; } details.editor[open] { padding-bottom: 16px; border-style: solid; } details.editor > summary { cursor: pointer; list-style: none; padding: 12px 0; font-weight: 700; color: var(--cor-forte); } details.editor > summary::-webkit-details-marker { display: none; } details.editor > form, details.editor > .mensagem { margin-top: 4px; } details.editor > .formulario-inline { display: block; margin-top: 12px; } /* --- Mensagens e selos ------------------------------------------------- */ .mensagem { padding: 10px 14px; border-radius: 10px; border: 1px solid transparent; font-weight: 500; } .mensagem-sucesso { background: var(--ok-suave); color: var(--ok); border-color: #bfdcc9; } .mensagem-aviso { background: var(--aviso-suave); color: var(--aviso); border-color: #f0d3a6; } .mensagem-erro { background: var(--alerta-suave); color: var(--alerta); border-color: #f1bfba; } .selo { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: .8rem; font-weight: 600; white-space: nowrap; vertical-align: middle; } .selo-ok { background: var(--ok-suave); color: var(--ok); } .selo-andamento { background: var(--andamento-suave); color: var(--andamento); } .selo-alerta { background: var(--alerta-suave); color: var(--alerta); } .selo-neutro { background: var(--neutro-suave); color: var(--neutro); } .selo-previsto { background: var(--cor-suave); color: var(--cor-forte); } /* --- Tabelas ----------------------------------------------------------- */ .tabela-rolagem { overflow-x: auto; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); } .tabela { width: 100%; border-collapse: collapse; font-size: .94rem; } .tabela th, .tabela td { padding: 10px 12px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--linha); } .tabela thead th { background: var(--cor-suave); color: var(--tinta-2); font-size: .82rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; } .tabela tbody tr:last-child td { border-bottom: 0; } .tabela-listrada tbody tr:nth-child(even) { background: #fafafb; } .tabela tbody tr.linha-alerta { background: var(--alerta-suave); } .tabela-matriz td.coluna-nivel, .tabela-matriz th.coluna-nivel { text-align: center; } .tabela-matriz tr.linha-area th { background: var(--superficie-2); color: var(--cor-forte); text-transform: none; font-size: .9rem; } .tabela-matriz .coluna-competencia { min-width: 220px; } .tabela-competencias td { vertical-align: middle; } .tabela-lancamento input { min-width: 110px; max-width: 180px; } .tabela-lancamento label { font-weight: 600; } .paginacao { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } /* Ficha do usuário (editarUsuario.php) */ .secao-ficha { border-top: 1px solid var(--linha); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; } .secao-ficha:first-of-type { border-top: 0; padding-top: 0; } .lista-niveis { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; } .lista-niveis li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px; border-radius: 10px; background: var(--superficie-2); } /* --- Avatar e Minha conta ---------------------------------------------- */ .avatar { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; background: var(--cor-suave); } .avatar-iniciais { display: inline-grid; place-items: center; color: var(--cor-forte); font-weight: 700; font-size: .95rem; background: #fff; } .avatar-grande { width: 96px; height: 96px; font-size: 1.8rem; border: 3px solid var(--superficie); box-shadow: var(--sombra); } .cabecalho-conta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .cabecalho-conta > div { display: grid; gap: 4px; min-width: 0; } .escolha-paleta { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } .escolha-paleta legend { margin-bottom: 8px; } .opcao-paleta { display: flex !important; flex-direction: row !important; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--linha); border-radius: 10px; cursor: pointer; color: var(--tinta) !important; } .opcao-paleta:has(input:checked) { border-color: var(--cor-forte); box-shadow: 0 0 0 2px var(--cor-suave); } .amostra { display: inline-flex; border-radius: 6px; overflow: hidden; } .amostra i { display: block; width: 12px; height: 22px; } [data-paleta-amostra="rosa"] .amostra i:nth-child(1) { background: #c2185b; } [data-paleta-amostra="rosa"] .amostra i:nth-child(2) { background: #ec6f8f; } [data-paleta-amostra="rosa"] .amostra i:nth-child(3) { background: #f7a8b8; } [data-paleta-amostra="vermelho"] .amostra i:nth-child(1) { background: #c62828; } [data-paleta-amostra="vermelho"] .amostra i:nth-child(2) { background: #ef6461; } [data-paleta-amostra="vermelho"] .amostra i:nth-child(3) { background: #f8a5a0; } [data-paleta-amostra="laranja"] .amostra i:nth-child(1) { background: #c24e00; } [data-paleta-amostra="laranja"] .amostra i:nth-child(2) { background: #f2863c; } [data-paleta-amostra="laranja"] .amostra i:nth-child(3) { background: #f9b98a; } [data-paleta-amostra="amarelo"] .amostra i:nth-child(1) { background: #8a6100; } [data-paleta-amostra="amarelo"] .amostra i:nth-child(2) { background: #f2c230; } [data-paleta-amostra="amarelo"] .amostra i:nth-child(3) { background: #f8dd86; } [data-paleta-amostra="verde"] .amostra i:nth-child(1) { background: #2e7d32; } [data-paleta-amostra="verde"] .amostra i:nth-child(2) { background: #5fb56a; } [data-paleta-amostra="verde"] .amostra i:nth-child(3) { background: #a5d9a9; } [data-paleta-amostra="azul"] .amostra i:nth-child(1) { background: #1565c0; } [data-paleta-amostra="azul"] .amostra i:nth-child(2) { background: #4f94dd; } [data-paleta-amostra="azul"] .amostra i:nth-child(3) { background: #9cc6f0; } /* --- Painel do paciente ------------------------------------------------ */ .paciente-topo { display: flex; flex-direction: column; gap: 6px; } .paciente-topo .meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; color: var(--tinta-2); } .diagnostico { color: var(--tinta-2); max-width: 70ch; } /* Jornada (fases) */ .jornada { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; } .jornada li { display: grid; grid-template-columns: 22px 1fr; column-gap: 12px; align-items: start; } .jornada .marco { grid-row: span 2; display: flex; flex-direction: column; align-items: center; height: 100%; } .jornada .bola { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--linha); background: var(--superficie); flex: none; margin-top: 2px; } .jornada .trilho { width: 3px; flex: 1; min-height: 18px; background: var(--linha); } .jornada li:last-child .trilho { display: none; } .jornada .nome-fase { font-weight: 600; } .jornada .datas-fase { font-size: .85rem; color: var(--tinta-3); padding-bottom: 12px; } .jornada .concluida .bola { background: var(--cor-forte); border-color: var(--cor-forte); } .jornada .concluida .trilho { background: var(--cor-clara); } .jornada .andamento .bola { border-color: var(--cor-forte); box-shadow: 0 0 0 4px var(--cor-suave); } .jornada .andamento .nome-fase { color: var(--cor-forte); } .jornada .prevista .nome-fase { color: var(--tinta-3); } @media (min-width: 900px) { .jornada { grid-auto-flow: column; grid-auto-columns: 1fr; } .jornada li { grid-template-columns: 1fr; grid-template-rows: auto auto auto; text-align: center; } .jornada .marco { grid-row: auto; flex-direction: row; height: auto; position: relative; } .jornada .trilho { height: 3px; min-height: 0; width: auto; flex: 1; } .jornada .marco::before { content: ""; flex: 1; height: 3px; background: var(--linha); } .jornada li:first-child .marco::before { visibility: hidden; } .jornada li:last-child .trilho { display: block; visibility: hidden; } .jornada .concluida .marco::before, .jornada .andamento .marco::before { background: var(--cor-clara); } .jornada .nome-fase { margin-top: 8px; font-size: .9rem; padding: 0 4px; } .jornada .datas-fase { font-size: .78rem; padding: 0 4px 4px; } } /* Próximos passos */ .proximos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; } .proximos li { display: flex; gap: 12px; align-items: flex-start; } .proximos li > span:last-child { display: grid; gap: 2px; } .proximos .titulo { font-weight: 600; } .calendario { flex: none; width: 52px; border-radius: 10px; overflow: hidden; text-align: center; border: 1px solid var(--cor-clara); background: var(--superficie); } .calendario .mes { display: block; background: var(--cor-media); color: var(--cor-texto-topo); font-size: .72rem; font-weight: 700; text-transform: uppercase; padding: 2px 0; } .calendario .dia { display: block; font-size: 1.35rem; font-weight: 700; padding: 2px 0 4px; font-variant-numeric: tabular-nums; } /* Tratamentos */ .protocolo .contagem { font-size: 1.8rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .protocolo .contagem small { font-size: .95rem; font-weight: 500; color: var(--tinta-3); } .rotulo { font-size: .8rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--tinta-3); } svg.progresso { width: 100%; height: 14px; display: block; } svg.progresso .feito { fill: var(--cor-forte); } svg.progresso .falta { fill: var(--cor-suave); stroke: var(--cor-clara); stroke-width: .5; } /* Exames */ .graficos { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); } .mini { gap: 4px; } .mini .valor { font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .mini .valor.fora, .valor.fora { color: var(--alerta); } svg.grafico { width: 100%; height: auto; display: block; overflow: visible; margin-top: 4px; } svg.grafico .faixa { fill: var(--cor-faixa); opacity: .75; } svg.grafico .linha { fill: none; stroke: var(--tinta-3); stroke-width: 1.5; stroke-linejoin: round; } svg.grafico .ponto { fill: var(--andamento); stroke: var(--superficie); stroke-width: 1.5; } svg.grafico .ponto.fora { fill: var(--alerta); } svg.grafico .eixo { fill: var(--tinta-3); font-size: 10px; font-family: var(--fonte); } .legenda { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: .85rem; color: var(--tinta-3); } .legenda span { display: inline-flex; align-items: center; gap: 6px; } .legenda i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; } .legenda .legenda-faixa { width: 16px; border-radius: 3px; background: var(--cor-faixa); } .legenda .legenda-dentro { background: var(--andamento); } .legenda .legenda-fora { background: var(--alerta); } /* Listas simples */ .lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .lista li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-bottom: 1px solid var(--linha); } .lista li:last-child { border-bottom: 0; } .lista li.linha-titulo { flex-direction: row; } .lista-colunas { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); column-gap: 24px; } .lista-colunas li:last-child { border-bottom: 1px solid var(--linha); } details > summary { cursor: pointer; } /* Linha do tempo */ .ano { color: var(--cor-forte); } .tempo { list-style: none; margin: 0; padding: 0 0 0 18px; border-left: 3px solid var(--cor-suave); display: flex; flex-direction: column; gap: 16px; } .tempo li { position: relative; display: flex; flex-direction: column; gap: 3px; } .tempo li::before { content: ""; position: absolute; left: -26.5px; top: 6px; width: 14px; height: 14px; border-radius: 50%; background: var(--superficie); border: 3px solid var(--cor-clara); } .tempo li.destaque::before { background: var(--cor-forte); border-color: var(--cor-forte); } .tempo li.agendado::before { border-color: var(--andamento); border-style: dashed; } .tempo li.coleta::before { border-color: var(--neutro); width: 10px; height: 10px; left: -24.5px; top: 8px; } .tempo .quando { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-size: .88rem; color: var(--tinta-2); } .tempo .titulo { font-weight: 600; } .tempo li.destaque .titulo { color: var(--cor-forte); } .descricao { color: var(--tinta-2); white-space: pre-line; max-width: 75ch; } /* Documentos */ .docs { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); } .doc { display: flex; gap: 12px; align-items: center; height: 100%; padding: 12px 14px; border: 1px solid var(--linha); border-radius: var(--raio); background: var(--superficie); color: inherit; text-decoration: none; } .doc:hover { border-color: var(--cor-media); } .doc .icone { flex: none; width: 46px; height: 54px; border-radius: 8px; display: grid; place-items: center; background: var(--cor-suave); color: var(--cor-forte); font-size: .75rem; font-weight: 800; letter-spacing: .04em; } .doc .titulo { font-weight: 600; } /* --- Rodapé cinza (≈12% da altura) ------------------------------------- */ .rodape { min-height: 12vh; min-height: 12dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 16px clamp(14px, 4vw, 32px); background: linear-gradient(180deg, var(--cinza-rodape-1), var(--cinza-rodape-2)); border-top: 1px solid #c9ced4; color: var(--cinza-rodape-texto); font-size: .85rem; text-align: center; } .rodape strong { color: #373d46; } /* --- Impressão --------------------------------------------------------- */ @media print { .topo, .rodape, .menu-lateral, .menu-fundo, .abas, .botao, button, details.editor, .filtros { display: none !important; } body { background: #fff; } .cartao { box-shadow: none; break-inside: avoid; } } /* --- Coleta de dados (exames / receita) -------------------------------- */ .alternador-coleta { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 12px; background: var(--superficie-2); align-self: flex-start; } .alternador-coleta a { padding: 8px 16px; border-radius: 9px; text-decoration: none; font-weight: 600; color: var(--tinta-2); } .alternador-coleta a[aria-current="page"] { background: var(--superficie); color: var(--cor-forte); box-shadow: var(--sombra); } .linha-medicamento { border: 1px solid var(--linha); border-radius: var(--raio); padding: 12px 14px 14px; background: var(--superficie); } .linha-medicamento legend { padding: 0 6px; font-weight: 700; color: var(--cor-forte); font-size: .9rem; } .linha-medicamento:has(input[name$="[nomeMedicamento]"]:not(:placeholder-shown)) { border-color: var(--cor-clara); background: var(--cor-fundo); } .lista-regras { margin: 0; padding-left: 18px; display: grid; gap: 2px; } .duracao { font-size: .85rem; color: var(--tinta-2); } .duracao-temporaria { color: var(--andamento); font-weight: 600; } /* --- Busca de CEP ------------------------------------------------------ */ .aviso-cep { min-height: 1.4em; margin: 0; }