/* Fontes vendorizadas (Google Fonts → local): CSP same-origin + funciona offline no PWA. Variáveis: um woff2 por família cobre todos os pesos. Subset latin (cobre pt-BR). */ @font-face { font-family: 'Libre Franklin'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/libre-franklin-latin.woff2') format('woff2'); } @font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/fonts/inter-tight-latin.woff2') format('woff2'); } /* Prontuário IA — sistema de tema claro/escuro ----------------------------- "2 cores": UM acento (azul sinal-vital) + neutros, servidos em tema CLARO (padrão) e ESCURO (toggle). Toda cor passa por token semântico; trocar o conjunto de tokens re-tematiza todos os componentes de uma vez. O tema efetivo é gravado em por um script inline no (sem flash). Layout/estrutura das classes é o mesmo de antes. ------------------------------------------------------------------------- */ :root { /* ---- TEMA CLARO (padrão) ---- */ --accent: #2F80ED; /* azul de marca (preenchimentos) */ --accent-ink: #1662C6; /* azul como TEXTO/ícone (AA sobre superfícies claras) */ --accent-deep: #1B62C4; --accent-soft-bg: #E6F0FD; /* tinta atrás de ícones/chips */ --on-accent: #06122B; /* tinta escura sobre preenchimento accent */ /* CTA vivo em gradiente (estilo do modelo) */ --cta-a: #3B8AF0; --cta-b: #1E63C8; --on-cta: #FFFFFF; --bg: #F4F7FC; --bg-deep: #E8EDF7; --bg-grad: radial-gradient(130% 80% at 50% -12%, #FFFFFF 0%, #EFF4FC 48%, #E6ECF7 100%) no-repeat; --surface: #FFFFFF; --surface-raised: #FFFFFF; /* modais */ --fill: #EFF3FA; /* preenchimento sutil (itens de lista, chips) */ --fill-2: #E4EAF4; /* hover/realce */ --field-bg: #FFFFFF; /* inputs */ --border-soft: #E6EBF4; --border: #D7DEEC; --ink: #14203A; --ink-strong: #0A1224; --muted: #55607A; --placeholder: #646E86; --alerta-fundo: #FEF4DA; --alerta-borda: #EFD58A; --alerta-texto: #7A5C05; --ok: #157F3B; --ok-bg: #E7F7EE; --ok-border: #B3E4C6; --erro: #C42B2B; --erro-border: #EBB0B0; --on-erro-soft: #7A1414; --scrim: rgba(17, 24, 44, 0.45); --shadow-card: 0 6px 22px rgba(23, 45, 90, 0.09); --shadow-modal: 0 18px 50px rgba(23, 45, 90, 0.18); --toast-bg: #14203A; --toast-ink: #FFFFFF; /* shell (modelo) — gradiente do hero aprofundado p/ texto branco passar AA */ --hero-a: #2A72CE; --hero-b: #1C5AB0; --hero-ink: #FFFFFF; --hero-ink-soft: #FFFFFF; /* kicker: hierarquia por tamanho/peso, não por cor */ --hero-btn-bg: rgba(255, 255, 255, 0.16); --hero-btn-ink: #FFFFFF; --tabbar-bg: rgba(255, 255, 255, 0.82); --tabbar-glass: rgba(255, 255, 255, 0.5); --glass-edge: rgba(255, 255, 255, 0.6); --raio: 14px; } /* Conjunto ESCURO — aplicado por atributo (toggle) e por preferência do SO. */ :root[data-theme='dark'] { --accent: #4D9FFF; --accent-ink: #4D9FFF; --accent-deep: #2f7fe0; --accent-soft-bg: rgba(77, 159, 255, 0.14); --on-accent: #071230; --cta-a: #4DA2FF; --cta-b: #2f7fe0; --on-cta: #071230; --bg: #0a0f24; --bg-deep: #05070f; --bg-grad: radial-gradient(120% 70% at 50% -10%, #14204a 0%, #0a0f24 46%, #05070f 100%) no-repeat; --surface: rgba(255, 255, 255, 0.04); --surface-raised: #0e1730; --fill: rgba(255, 255, 255, 0.03); --fill-2: rgba(255, 255, 255, 0.06); --field-bg: rgba(255, 255, 255, 0.04); --border-soft: rgba(255, 255, 255, 0.13); --border: rgba(255, 255, 255, 0.15); --ink: #eef1fa; --ink-strong: #ffffff; --muted: rgba(226, 233, 250, 0.66); --placeholder: rgba(226, 233, 250, 0.58); --alerta-fundo: rgba(250, 204, 21, 0.12); --alerta-borda: rgba(250, 204, 21, 0.5); --alerta-texto: #f6dd7a; --ok: #4ade80; --ok-bg: rgba(34, 197, 94, 0.08); --ok-border: rgba(34, 197, 94, 0.45); --erro: #ff5a5a; --erro-border: rgba(255, 90, 90, 0.5); --on-erro-soft: #ffd9d9; --scrim: rgba(0, 0, 0, 0.6); --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.28); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6); --toast-bg: #12213f; --toast-ink: #ffffff; --hero-a: #16224d; --hero-b: #0e1839; --hero-ink: #eef1fa; --hero-ink-soft: rgba(226, 233, 250, 0.7); --hero-btn-bg: rgba(255, 255, 255, 0.10); --hero-btn-ink: #eef1fa; --tabbar-bg: rgba(14, 23, 48, 0.82); --tabbar-glass: rgba(20, 32, 62, 0.42); --glass-edge: rgba(150, 180, 230, 0.28); } /* Sem JS: segue a preferência do SO (o script inline normalmente já fixou o atributo). */ @media (prefers-color-scheme: dark) { :root:not([data-theme='light']):not([data-theme='dark']) { --accent: #4D9FFF; --accent-ink: #4D9FFF; --accent-deep: #2f7fe0; --accent-soft-bg: rgba(77, 159, 255, 0.14); --on-accent: #071230; --cta-a: #4DA2FF; --cta-b: #2f7fe0; --on-cta: #071230; --bg: #0a0f24; --bg-deep: #05070f; --bg-grad: radial-gradient(120% 70% at 50% -10%, #14204a 0%, #0a0f24 46%, #05070f 100%) no-repeat; --surface: rgba(255, 255, 255, 0.04); --surface-raised: #0e1730; --fill: rgba(255, 255, 255, 0.03); --fill-2: rgba(255, 255, 255, 0.06); --field-bg: rgba(255, 255, 255, 0.04); --border-soft: rgba(255, 255, 255, 0.13); --border: rgba(255, 255, 255, 0.15); --ink: #eef1fa; --ink-strong: #ffffff; --muted: rgba(226, 233, 250, 0.66); --placeholder: rgba(226, 233, 250, 0.58); --alerta-fundo: rgba(250, 204, 21, 0.12); --alerta-borda: rgba(250, 204, 21, 0.5); --alerta-texto: #f6dd7a; --ok: #4ade80; --ok-bg: rgba(34, 197, 94, 0.08); --ok-border: rgba(34, 197, 94, 0.45); --erro: #ff5a5a; --erro-border: rgba(255, 90, 90, 0.5); --on-erro-soft: #ffd9d9; --scrim: rgba(0, 0, 0, 0.6); --shadow-card: 0 10px 28px rgba(0, 0, 0, 0.28); --shadow-modal: 0 24px 60px rgba(0, 0, 0, 0.6); --toast-bg: #12213f; --toast-ink: #ffffff; --hero-a: #16224d; --hero-b: #0e1839; --hero-ink: #eef1fa; --hero-ink-soft: rgba(226, 233, 250, 0.7); --hero-btn-bg: rgba(255, 255, 255, 0.10); --hero-btn-ink: #eef1fa; --tabbar-bg: rgba(14, 23, 48, 0.82); --tabbar-glass: rgba(20, 32, 62, 0.42); --glass-edge: rgba(150, 180, 230, 0.28); } } * { box-sizing: border-box; } /* Só para leitor de tela: rótulo/heading fora da tela, mantendo o foco com contexto. */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* Foco PROGRAMÁTICO em títulos (showScreen move o foco p/ o h2 da tela, tabindex=-1, dando contexto ao leitor de tela). O Safari/iOS desenha um anel nesse elemento focado, que aparecia como uma "caixa de seleção" em volta do "Boa tarde" ao abrir o app. Elementos tabindex=-1 não são tabuláveis, então suprimir o anel não afeta a navegação por teclado — o foco continua indo p/ lá (o leitor de tela ainda anuncia). */ [tabindex="-1"]:focus { outline: none; } html { background: var(--bg-deep); /* evita flash no "rubber-band" do iOS */ -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; color: var(--ink); min-height: 100vh; /* fallback */ min-height: 100dvh; /* altura real no Safari iOS (sem pulo da barra) */ /* espaço p/ a barra de navegação flutuante do rodapé + safe-area do iOS */ padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; } /* Fundo em camada fixa própria — background-attachment:fixed é bugado no iOS */ body::before { content: ''; position: fixed; inset: 0; z-index: -1; background: var(--bg-grad); background-size: cover; } /* orb-vídeo do logo (injetado por theme-orb.js) — onboarding (no hero deu lugar à foto de perfil) */ .logo-orb { width: 1.35em; height: 1.35em; flex: none; position: relative; display: inline-block; border-radius: 50%; overflow: hidden; /* sem disco de fundo: hero e círculo do onboarding já são azul-escuros, então o vídeo (mix-blend:screen) brilha sobre eles sem criar halo escuro. */ } .logo-orb video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; mix-blend-mode: screen; } /* ---------- Hero header (estilo do modelo) ---------- */ .hero { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 14px; padding: calc(env(safe-area-inset-top, 0px) + 18px) 20px 20px; /* Liquid glass tintado de azul */ background: linear-gradient(135deg, color-mix(in oklab, var(--hero-a) 82%, transparent) 0%, color-mix(in oklab, var(--hero-b) 82%, transparent) 100%); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); color: var(--hero-ink); border-radius: 0 0 26px 26px; box-shadow: 0 8px 28px rgba(15,30,60,0.22), inset 0 1px 0 rgba(255,255,255,0.28); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 60%; background: linear-gradient(180deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .hero > * { position: relative; z-index: 1; } .hero.hidden { display: none; } .hero-brand { flex: none; /* foto de perfil do médico (preenchida por app.js; fallback = ícone de pessoa) */ width: 46px; height: 46px; } .hero-brand .avatar { width: 100%; height: 100%; background: var(--hero-btn-bg); color: var(--hero-ink); box-shadow: inset 0 0 0 1px var(--glass-edge); } .hero-brand .avatar svg { width: 24px; height: 24px; } .hero-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .hero-kicker { font-size: 0.82rem; font-weight: 600; color: var(--hero-ink-soft); } .hero-title { font-family: 'Libre Franklin', sans-serif; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.4px; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hero-actions { flex: none; display: flex; gap: 8px; align-items: center; } .hero-btn { width: 44px; height: 44px; display: grid; place-items: center; border: none; border-radius: 14px; background: var(--hero-btn-bg); color: var(--hero-btn-ink); cursor: pointer; } .hero-btn svg { width: 22px; height: 22px; } .hero-btn:hover { filter: brightness(1.08); } .hero-btn:focus-visible { outline: 2px solid var(--hero-ink); outline-offset: 2px; } /* ---------- Bottom-nav flutuante (estilo do modelo) ---------- */ .tabbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); z-index: 25; display: flex; gap: 2px; width: min(560px, calc(100% - 24px)); padding: 7px; /* Liquid glass */ background: var(--tabbar-glass, color-mix(in oklab, var(--surface) 55%, transparent)); backdrop-filter: blur(22px) saturate(180%); -webkit-backdrop-filter: blur(22px) saturate(180%); border: 1px solid var(--glass-edge, rgba(255,255,255,0.55)); border-radius: 26px; box-shadow: 0 8px 32px rgba(15,30,60,0.18), inset 0 1px 0 rgba(255,255,255,0.6), inset 0 -1px 1px rgba(120,140,170,0.12); overflow: hidden; } /* brilho especular no topo do vidro */ .tabbar::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 55%; background: linear-gradient(180deg, rgba(255,255,255,0.35) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } :root[data-theme='dark'] .tabbar { box-shadow: 0 8px 32px rgba(0,0,0,0.45), inset 0 1px 0 rgba(255,255,255,0.12); } :root[data-theme='dark'] .tabbar::before { background: linear-gradient(180deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 100%); } :root[data-theme='dark'] .card { box-shadow: 0 8px 24px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.08); } :root[data-theme='dark'] .card::before { background: linear-gradient(180deg, rgba(255,255,255,0.06) 0%, rgba(255,255,255,0) 100%); } .tabbar.hidden { display: none; } .tab { flex: 1 1 0; min-height: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 6px 2px; border: none; border-radius: 16px; background: none; color: var(--muted); font-family: 'Inter Tight', sans-serif; font-size: 0.66rem; font-weight: 600; cursor: pointer; position: relative; z-index: 1; } .tab svg { width: 22px; height: 22px; } .tab-label { line-height: 1; } .tab.active { color: var(--accent-ink); background: color-mix(in oklab, var(--accent-soft-bg) 78%, transparent); box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } .tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* badge de passagens recebidas sobre a aba */ .tab .badge { position: absolute; top: 4px; right: 50%; margin-right: -22px; } /* ---------- Layout de tela ---------- */ .screen { max-width: 660px; margin: 0 auto; padding: 20px 16px 16px; display: flex; flex-direction: column; gap: 18px; } .hidden { display: none !important; } /* ---------- Cards ---------- */ .card { position: relative; background: color-mix(in oklab, var(--surface) 70%, transparent); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border: 1px solid var(--glass-edge, var(--border-soft)); border-radius: 20px; padding: 24px; box-shadow: 0 6px 22px rgba(15,30,60,0.10), inset 0 1px 0 rgba(255,255,255,0.5); overflow: hidden; } .card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 42%; background: linear-gradient(180deg, rgba(255,255,255,0.28) 0%, rgba(255,255,255,0) 100%); pointer-events: none; } .card > * { position: relative; z-index: 1; } .card h2 { margin: 0 0 16px; font-family: 'Libre Franklin', sans-serif; font-size: 1.15rem; font-weight: 700; color: var(--accent-ink); } .card h2 small, .field span small { font-weight: 400; color: var(--muted); font-size: 0.78rem; } /* Cabeçalho de card com ação textual à direita (ex.: Paciente + limpar campos) */ .card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .card-head h2 { margin: 0; } .link-limpar { background: none; border: none; /* alvo de toque ≥44px de altura sem mudar o visual (padding + margem negativa) */ padding: 13px 0; margin: -13px 0; min-height: 44px; display: inline-flex; align-items: center; font-family: 'Inter Tight', sans-serif; font-size: 0.85rem; color: var(--muted); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; white-space: nowrap; } .link-limpar:hover { color: var(--ink-strong); } .card-warning { background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); } .card-warning h2 { color: var(--alerta-texto); } /* Atendimento selado (imutável): reforço visual de que não pode mais ser editado. */ .card-selado { background: var(--ok-bg); border: 1px solid var(--ok-border); } .card-selado h2 { color: var(--ok); } /* ---------- Campos ---------- */ .row { display: flex; gap: 12px; } .grow { flex: 1; } .w-idade { width: 96px; } .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .field > span { font-size: 0.85rem; font-weight: 600; } input[type='text'], input[type='tel'], input[type='password'], input[type='number'], input[type='email'], input[type='search'], input[type='date'], input[type='time'], textarea, select { font: inherit; font-family: 'Inter Tight', sans-serif; font-size: 16px; /* 16px evita o zoom automático do iOS ao focar */ padding: 14px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--field-bg); color: var(--ink); width: 100%; } input::placeholder, textarea::placeholder { color: var(--placeholder); } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in oklab, var(--accent) 22%, transparent); } textarea { resize: vertical; line-height: 1.55; } select { appearance: none; cursor: pointer; } select option { color: #0a0f24; } /* menu nativo do SO é sempre claro */ #out-prontuario { font-family: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-size: 16px; text-transform: uppercase; } /* ---------- Sexo ---------- */ .sexo-toggle { display: flex; gap: 8px; } .sexo-toggle label { position: relative; } .sexo-toggle input { position: absolute; opacity: 0; } .sexo-toggle span { display: inline-block; padding: 13px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--field-bg); font-family: 'Libre Franklin', sans-serif; font-weight: 700; cursor: pointer; } .sexo-toggle input:checked + span { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } /* foco de teclado visível no toggle (o radio real é oculto) */ .sexo-toggle input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; } /* grupo Sexo é um
: zera a aparência nativa, mantém o layout do .field */ .sexo-fieldset { border: 0; margin: 0 0 12px; padding: 0; min-inline-size: 0; } .sexo-fieldset legend { padding: 0; font-size: 0.85rem; font-weight: 600; } /* ---------- Sinais vitais ---------- */ /* PA precisa de mais largura ("130X80" = 6 chars); as demais têm 2-3 dígitos */ .vitals { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr 1fr; gap: 8px; } .vital { display: flex; flex-direction: column; gap: 6px; } .vital span { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.5px; text-align: center; color: var(--muted); } .vital input { padding: 13px 4px; text-align: center; font-size: 16px; font-weight: 600; } /* Telas muito estreitas (ex. iPhone SE, 320-360px): 5 colunas ficam apertadas demais pro toque; reflui pra 3 colunas (PA ocupa a linha inteira). */ @media (max-width: 360px) { .vitals { grid-template-columns: repeat(3, 1fr); } .vitals .vital:nth-child(4) { grid-column: 1 / -1; } } /* ---------- Botão de microfone ---------- */ .btn-mic { width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 20px; font-family: 'Libre Franklin', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--on-cta); background: linear-gradient(135deg, var(--cta-a) 0%, var(--cta-b) 100%); border: 1px solid transparent; border-radius: var(--raio); margin-bottom: 14px; cursor: pointer; } .btn-mic.recording { background: color-mix(in oklab, var(--erro) 18%, transparent); border-color: var(--erro-border); color: var(--on-erro-soft); animation: pulse 1.4s infinite; } .btn-mic:disabled { opacity: 0.55; } .mic-timer { font-variant-numeric: tabular-nums; opacity: 0.85; } @keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--erro) 40%, transparent); } 50% { box-shadow: 0 0 0 12px color-mix(in oklab, var(--erro) 0%, transparent); } } /* ---------- Botões ---------- */ .btn-primary, .btn-secondary, .btn-ghost { font: inherit; font-family: 'Libre Franklin', sans-serif; font-weight: 700; padding: 17px; border-radius: var(--raio); border: none; cursor: pointer; } .btn-primary { background: linear-gradient(135deg, var(--cta-a) 0%, var(--cta-b) 100%); color: var(--on-cta); font-size: 1.05rem; box-shadow: 0 12px 30px color-mix(in oklab, var(--accent) 34%, transparent); } .btn-primary:hover { filter: brightness(1.05); } .btn-primary:disabled { opacity: 0.55; box-shadow: none; } .btn-secondary { background: var(--fill-2); color: var(--ink); border: 1px solid var(--border); } .btn-secondary:hover { border-color: var(--accent); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--border); } .btn-ghost:hover { border-color: var(--accent); } /* anel de foco de teclado (contraste ≥3:1) em todo alvo clicável */ .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, .btn-mic:focus-visible, .btn-escore:focus-visible, .modal-close:focus-visible, .unidade-item:focus-visible, .hist-item:focus-visible, .score-item:focus-visible, .link-limpar:focus-visible, .conta-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .actions .btn-primary { grid-column: 1 / -1; } /* ---------- Chips de alerta ---------- */ .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip-alert { background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); border-radius: 999px; padding: 6px 13px; font-size: 0.8rem; font-weight: 700; color: var(--alerta-texto); } /* ---------- Chip de reavaliação ---------- */ .reav-chip { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--alerta-fundo); border: 1px solid var(--alerta-borda); color: var(--alerta-texto); border-radius: 999px; padding: 8px 14px; font-size: 0.85rem; font-weight: 700; margin-bottom: 12px; } /* .hidden global perde para display:flex acima na ordem do cascade — reforço explícito: */ .reav-chip.hidden { display: none; } .reav-chip button { background: none; border: none; color: inherit; font-size: 1rem; cursor: pointer; /* alvo de toque 44×44 sem inflar o chip: área cresce, visual não (margens negativas) */ min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding: 0; margin: -12px -14px -12px 0; } .reav-chip button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------- SUGESTÃO IA ---------- */ .chip-sugestao { background: transparent; border: 1px solid var(--accent); color: var(--accent-ink); border-radius: 999px; padding: 6px 13px; font-size: 0.8rem; font-weight: 700; cursor: pointer; } .chip-sugestao.inserido { opacity: 0.55; cursor: default; } .chip-sugestao:disabled:not(.inserido) { opacity: 0.4; cursor: default; } .chip-sugestao:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } #sugestao-card h3 { font-size: 0.85rem; margin: 12px 0 6px; } .sugestao-carregando, .sugestao-aviso, .sugestao-diferenciais { font-size: 0.85rem; color: var(--muted); } .sugestao-aviso { color: var(--alerta-texto); } .disclaimer { font-size: 0.76rem; color: var(--muted); text-align: center; margin: 4px 8px; line-height: 1.6; } .audio-debug { display: block; font-size: 0.78rem; color: var(--muted); text-decoration: underline; margin: -6px 0 12px; } /* ---------- Overlay ocupado + toast ---------- */ .busy { position: fixed; inset: 0; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 14px; background: color-mix(in oklab, var(--bg-deep) 82%, transparent); backdrop-filter: blur(4px); color: var(--ink); font-weight: 700; z-index: 20; } .busy.visible { display: flex; } .spinner { width: 42px; height: 42px; border: 4px solid var(--fill-2); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.9s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .toast { position: fixed; left: 50%; /* acima da barra de navegação flutuante do rodapé + safe-area do iOS */ bottom: calc(env(safe-area-inset-bottom, 0px) + 92px); transform: translateX(-50%) translateY(140%); background: var(--toast-bg); border: 1px solid var(--border-soft); color: var(--toast-ink); padding: 13px 22px; border-radius: 999px; font-size: 0.9rem; max-width: 90vw; text-align: center; /* opacity garante o desaparecimento: o translateY(140%) sozinho não tira o toast da tela (ele fica a 92px do rodapé), então sem opacity ele ficava espiando no rodapé até recarregar o app. pointer-events:none impede que o toast escondido (ainda no fluxo) intercepte toques na barra de navegação/conteúdo abaixo. */ opacity: 0; pointer-events: none; transition: transform 0.25s ease, opacity 0.25s ease; z-index: 30; } .toast:empty { display: none; } .toast.visible { transform: translateX(-50%) translateY(0); opacity: 1; } .toast-error { background: color-mix(in oklab, var(--erro) 24%, var(--toast-bg)); border-color: var(--erro-border); } /* ---------- Modal de escores ---------- */ #scores-modal.hidden { display: none; } #scores-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } #scores-modal .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } #scores-modal .modal-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-soft); max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-modal); } #scores-modal .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } /* ---------- Modal de selo (mesma estrutura do de escores) ---------- */ #selo-modal.hidden { display: none; } #selo-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } #selo-modal .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } #selo-modal .modal-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-soft); max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-modal); } #selo-modal .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } .selo-ciente { display: flex; gap: 10px; align-items: flex-start; margin: 16px 0; padding: 12px; border: 1px solid var(--border); border-radius: 12px; cursor: pointer; } .selo-ciente input { margin-top: 3px; width: 20px; height: 20px; flex: 0 0 auto; cursor: pointer; } #selo-modal .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .score-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; } .score-item { text-align: left; padding: 15px 16px; border: 1px solid var(--border); border-radius: 12px; background: var(--fill); color: var(--ink); font-size: 16px; cursor: pointer; } .score-item:hover { border-color: var(--accent); background: var(--fill-2); } .score-check { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; } .score-check input { width: 22px; height: 22px; margin-top: 2px; accent-color: var(--accent); } .score-field { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; } .score-field select, .score-field input { padding: 12px; font-size: 16px; border: 1px solid var(--border); border-radius: 10px; } .score-result { margin: 14px 0; padding: 14px; background: color-mix(in oklab, var(--accent) 12%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); border-radius: 12px; } .score-result strong { font-size: 20px; color: var(--accent-ink); } .score-actions { display: flex; gap: 10px; margin-top: 8px; } .btn-escore { margin-top: 12px; width: 100%; padding: 15px; border: 1px dashed var(--border); border-radius: 12px; background: none; color: var(--muted); font-family: 'Inter Tight', sans-serif; font-weight: 600; font-size: 15px; cursor: pointer; } .btn-escore:hover { border-color: var(--accent); color: var(--ink-strong); } /* ---------- Auth (login / criar / recuperar) ---------- */ .auth-card { max-width: 440px; margin: 40px auto; } .auth-card h2 { text-align: center; font-size: 1.55rem; color: var(--ink); } .auth-card > p { text-align: center; color: var(--muted); font-size: 0.95rem; line-height: 1.55; margin: 8px 0 20px; } .auth-card .field { margin-bottom: 14px; text-align: left; } .auth-erro { color: var(--erro); min-height: 18px; margin: 6px 0; font-size: 0.88rem; } /* botões da tela de auth: empilhados, largura total, com respiro entre eles */ .auth-card > .btn-primary, .auth-card > .btn-secondary, .auth-card > .btn-ghost { display: block; width: 100%; margin-top: 12px; } .auth-card > .btn-primary:first-of-type { margin-top: 4px; } /* "Esqueci a senha" / "Voltar" como link discreto, não um botão pesado */ .auth-card > .btn-ghost { background: none; border: none; color: var(--accent-ink); font-size: 0.95rem; padding: 12px; } .auth-card > .btn-ghost:hover { border: none; text-decoration: underline; color: var(--ink-strong); } .frase-recuperacao { font-size: 20px; letter-spacing: 0.5px; line-height: 1.8; padding: 16px; background: color-mix(in oklab, var(--accent) 10%, transparent); border: 1px solid color-mix(in oklab, var(--accent) 24%, transparent); border-radius: 12px; word-spacing: 6px; margin: 12px 0; } /* esfera de IA (injetada por js/theme-orb.js na tela de login) — vídeo solto sobre disco escuro para brilhar em qualquer tema */ .auth-orb { width: 190px; height: 190px; margin: 4px auto 8px; position: relative; /* sem fundo: o canvas do theme-orb.js já entrega a orb com fundo transparente (keying por luminância), então não precisa (nem pode ter) disco/halo escuro. */ } .auth-orb video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; mix-blend-mode: screen; -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,0) 68%); mask-image: radial-gradient(circle at 50% 50%, #000 52%, rgba(0,0,0,0) 68%); } /* ---------- Seleção de unidade ---------- */ #screen-unidade .unidade-lista { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 4px; } .unidade-item { padding: 12px 16px; border: 1px solid var(--border); border-radius: 999px; background: var(--fill); color: var(--ink); font-size: 14px; font-weight: 600; cursor: pointer; } .unidade-item:hover { border-color: var(--accent); color: var(--ink-strong); } /* ---------- Histórico ---------- */ .hist-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* busca e filtro do histórico: largura total real (a classe .field de container quebrava isso) */ .hist-busca { display: block; width: 100%; margin-bottom: 10px; } .hist-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .hist-item { display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--fill); color: var(--ink); cursor: pointer; } .hist-item:hover { border-color: var(--accent); background: var(--fill-2); } .hist-item small { color: var(--muted); } /* Linha do histórico com exclusão: o card do paciente cresce, o 🗑 fica à direita */ .hist-item-row { display: flex; align-items: stretch; gap: 8px; } .hist-item-row .hist-item { flex: 1; min-width: 0; } .hist-item-del { min-width: 48px; padding: 0 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--fill); color: var(--muted); cursor: pointer; font-size: 17px; } .hist-item-del:hover { border-color: var(--erro-border); color: var(--erro); background: var(--fill-2); } .hist-item-del:focus-visible { outline: 2px solid var(--erro); outline-offset: 2px; } .hist-toggle { display: flex; align-items: center; gap: 8px; margin: 6px 0; } .hist-toggle input { accent-color: var(--accent); width: 20px; height: 20px; } .hist-corpo { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: 14px; } .hist-meta { color: var(--muted); font-size: 13px; } /* Faixa de dia (accordion nativo
) do histórico */ .hist-dia { border: 1px solid var(--border); border-radius: 14px; background: var(--fill); overflow: hidden; } .hist-dia > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; cursor: pointer; user-select: none; color: var(--ink); font-weight: 600; list-style: none; } .hist-dia > summary::-webkit-details-marker { display: none; } .hist-dia > summary:hover { color: var(--accent-ink); } .hist-dia[open] > summary { border-bottom: 1px solid var(--border); } .hist-dia-rotulo { display: inline-flex; align-items: center; gap: 9px; text-transform: capitalize; } .hist-dia-rotulo::before { content: '\203A'; flex: none; color: var(--muted); font-size: 18px; line-height: 1; transition: transform 0.15s ease; } .hist-dia[open] > summary .hist-dia-rotulo::before { transform: rotate(90deg); } .hist-dia-contagem { flex: none; display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 700; line-height: 1; } .hist-dia .hist-lista { margin-top: 0; padding: 12px; } /* ---------- Passagem de plantão ---------- */ .badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; line-height: 1; } .badge.hidden { display: none; } /* seções da tela Passagens (Aguardando/Recebidos/Enviadas) como faixas recolhíveis (reusa .hist-dia do histórico); gap entre os grupos. */ .pass-grupos { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; } /* .hist-dia-rotulo capitaliza (feito p/ datas: "hoje", "terça-feira"); aqui os rótulos são frases prontas — mostra o texto exato ("Aguardando você"). */ .pass-grupos .hist-dia-rotulo { text-transform: none; } .pass-item { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; padding: 15px 16px; margin-top: 10px; border: 1px solid var(--border); border-radius: 14px; background: var(--fill); } /* dentro do accordion o espaçamento vem do gap da .hist-lista — zera a margem própria do pass-item p/ não somar (ficaria espaço duplo entre os itens). */ .hist-dia .pass-item { margin-top: 0; } .pass-item .actions { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: 8px; } .pass-pendencias { white-space: pre-wrap; margin: 0; font-size: 14px; } .pass-item details summary { cursor: pointer; color: var(--muted); font-size: 13px; } .busca-resultados { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; } .busca-resultados .hist-item[disabled] { opacity: 0.55; cursor: not-allowed; } .pass-escolhido { margin: 0 0 10px; color: var(--accent-ink); font-weight: 600; } .pass-escolhido.hidden { display: none; } /* ---------- Admin ---------- */ .admin-lista { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; } .admin-item { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 15px 16px; border: 1px solid var(--border); border-radius: 14px; background: var(--fill); } .admin-item small { display: block; color: var(--muted); } .admin-item .actions { grid-template-columns: none; display: flex; flex-wrap: wrap; gap: 8px; } .admin-senha { display: block; margin-top: 4px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; color: var(--accent-ink); word-break: break-all; } @media (min-width: 480px) { .admin-item { flex-direction: row; align-items: center; justify-content: space-between; } } /* ---------- Perfil / Conta (estilo do modelo) ---------- */ .perfil-hero { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: 6px 0 10px; } .perfil-avatar { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--accent-soft-bg); color: var(--accent-ink); border: 3px solid var(--surface); box-shadow: var(--shadow-card); } .perfil-avatar svg { width: 46px; height: 46px; } /* Avatar reutilizável (foto ou bonequinho): tela de perfil, hero, busca de colega e card da passagem recebida. A foto preenche o círculo; o svg fica centralizado. */ .avatar { border-radius: 50%; overflow: hidden; display: grid; place-items: center; flex: none; } .avatar img { width: 100%; height: 100%; object-fit: cover; display: block; } .avatar-sm { width: 34px; height: 34px; background: var(--accent-soft-bg); color: var(--accent-ink); } .avatar-sm svg { width: 20px; height: 20px; } /* marca do hero: a foto do médico no lugar da orb (bonequinho quando não há foto) */ .hero-avatar { width: 46px; height: 46px; background: var(--accent-soft-bg); color: var(--accent-ink); } .hero-avatar svg { width: 26px; height: 26px; } /* upload na tela de perfil */ .perfil-foto-acoes { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 4px; } .perfil-foto-btn { width: auto; display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; font-size: 0.85rem; cursor: pointer; } .perfil-foto-status { color: var(--muted); font-size: 0.82rem; min-height: 1em; margin: 2px 0 0; text-align: center; } /* linhas com avatar na passagem de plantão */ .colega-item { display: flex; align-items: center; gap: 10px; text-align: left; } .pass-remetente { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; } .pass-remetente small { margin: 0; } .perfil-nome { font-family: 'Libre Franklin', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 4px 0 0; } .perfil-sub { color: var(--muted); font-size: 0.9rem; margin: 0; } .perfil-role { display: inline-block; margin-top: 6px; padding: 5px 14px; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent-ink); font-size: 0.82rem; font-weight: 700; } .perfil-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; margin-top: 8px; } .perfil-stat { background: var(--fill); border: 1px solid var(--border-soft); border-radius: 16px; padding: 14px 12px; text-align: center; display: flex; flex-direction: column; gap: 3px; } .perfil-stat b { font-family: 'Libre Franklin', sans-serif; font-size: 1.05rem; color: var(--ink); word-break: break-word; } .perfil-stat span { font-size: 0.74rem; color: var(--muted); font-weight: 600; } /* linha de ação com ícone-em-quadrado + rótulo + chevron (menu de conta) */ .conta-lista { display: flex; flex-direction: column; gap: 12px; } .conta-row { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: 16px; background: var(--fill); color: var(--ink); cursor: pointer; font-family: 'Inter Tight', sans-serif; font-size: 0.98rem; font-weight: 600; } .conta-row:hover { border-color: var(--accent); background: var(--fill-2); } .conta-ico { flex: none; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft-bg); color: var(--accent-ink); } .conta-ico svg { width: 22px; height: 22px; } .conta-row .conta-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .conta-row .conta-txt small { font-weight: 400; color: var(--muted); font-size: 0.8rem; } .conta-row .conta-chevron { flex: none; color: var(--muted); } .conta-row.conta-danger .conta-ico { background: color-mix(in oklab, var(--erro) 14%, transparent); color: var(--erro); } .conta-row.conta-danger { color: var(--erro); } /* ---------- Switch estilo iOS (Perfil → Tema escuro) ---------- */ .conta-switch-row { cursor: default; } .conta-switch-row:hover { border-color: var(--border); background: transparent; } .ios-switch { flex: none; width: 46px; height: 28px; border-radius: 999px; border: none; padding: 0; position: relative; background: var(--fill-2); cursor: pointer; transition: background 0.18s ease; } .ios-switch .ios-knob { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.18s ease; } .ios-switch.on { background: #34C759; } .ios-switch.on .ios-knob { transform: translateX(18px); } .ios-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ios-switch:disabled { cursor: not-allowed; opacity: 0.45; } /* ---------- Tela Início (organização do modelo) ---------- */ .inicio-saudacao { position: relative; display: flex; align-items: flex-start; justify-content: space-between; gap: 0; padding-bottom: 2px; } .inicio-saud-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding-top: 4px; } .inicio-ola { font-family: 'Libre Franklin', sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.15; letter-spacing: -0.4px; margin: 0; color: var(--ink-strong); } .inicio-kicker { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--ink); margin-top: 6px; } .inicio-sub { color: var(--muted); font-size: 0.92rem; margin: 0; } /* Card de boas-vindas em destaque (gradiente azul de marca) */ .inicio-welcome { display: flex; align-items: center; gap: 12px; padding: 20px 22px; border-radius: 20px; background: linear-gradient(135deg, var(--accent) 0%, var(--accent-deep) 100%); color: #fff; box-shadow: var(--shadow-card); overflow: hidden; } .welcome-txt { flex: 1 1 auto; min-width: 0; } .inicio-welcome h3 { font-family: 'Libre Franklin', sans-serif; font-size: 1.22rem; font-weight: 800; line-height: 1.2; margin: 0 0 8px; } .inicio-welcome p { font-size: 0.9rem; line-height: 1.5; margin: 0 0 16px; color: rgba(255, 255, 255, 0.9); } .welcome-cta { display: inline-flex; align-items: center; gap: 8px; padding: 12px 18px; border: none; border-radius: 12px; background: #fff; color: var(--accent-ink); font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.95rem; cursor: pointer; } .welcome-cta:hover { filter: brightness(0.97); } .welcome-cta:focus-visible { outline: 2px solid #fff; outline-offset: 2px; } .welcome-cta-ico svg { width: 18px; height: 18px; display: block; } .welcome-art { flex: none; width: 84px; height: 84px; color: rgba(255, 255, 255, 0.92); } .welcome-art svg { width: 100%; height: 100%; } @media (max-width: 420px) { .welcome-art { display: none; } } /* Cabeçalho de seção com link à direita */ .inicio-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .inicio-sec-titulo { font-family: 'Libre Franklin', sans-serif; font-size: 1.05rem; font-weight: 700; margin: 4px 0 0; color: var(--ink-strong); } .inicio-verlink { background: none; border: none; padding: 4px; color: var(--accent-ink); font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .inicio-verlink:hover { text-decoration: underline; } .inicio-verlink:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* Resumo do dia: três linhas num card (reusa .conta-row, sem borda própria) */ .resumo-card { padding: 6px; } .resumo-card .conta-row { border: none; border-radius: 12px; } .resumo-card .conta-row + .conta-row { border-top: 1px solid var(--border-soft); border-radius: 0; } /* Ações rápidas: grade de cartões em 4 colunas (ícone + rótulo) */ .acoes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .acao-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 6px; background: var(--surface); border: 1px solid var(--border-soft); border-radius: 16px; cursor: pointer; box-shadow: var(--shadow-card); font-family: 'Inter Tight', sans-serif; } .acao-card:hover { border-color: var(--accent); } .acao-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .acao-ico { width: 44px; height: 44px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft-bg); color: var(--accent-ink); } .acao-ico svg { width: 24px; height: 24px; } .acao-label { font-size: 0.72rem; font-weight: 600; color: var(--ink); text-align: center; line-height: 1.2; } @media (max-width: 380px) { .acoes-grid { grid-template-columns: repeat(2, 1fr); } } /* Banner premium do programa de indicação (navy + dourado, cores próprias nos dois temas — como o .inicio-welcome) */ .indicacao-banner { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; padding: 18px 20px; border-radius: 20px; overflow: hidden; cursor: pointer; text-align: left; background: linear-gradient(135deg, #0F1B38 0%, #1C2E5C 55%, #2A4585 100%); border: 1px solid rgba(233, 196, 106, 0.55); color: #fff; box-shadow: var(--shadow-card); } .indicacao-banner::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(90% 120% at 100% 0%, rgba(233, 196, 106, 0.22) 0%, transparent 55%); } .indicacao-banner:hover { filter: brightness(1.06); } .indicacao-banner:focus-visible { outline: 2px solid #E9C46A; outline-offset: 2px; } .indicacao-ico { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; color: #0F1B38; background: linear-gradient(135deg, #F5D889 0%, #E0AC3F 100%); box-shadow: 0 4px 12px rgba(224, 172, 63, 0.35); } .indicacao-ico svg { width: 26px; height: 26px; } .indicacao-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; } .indicacao-kicker { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.68rem; letter-spacing: 1.2px; text-transform: uppercase; color: #F0CD7E; } .indicacao-titulo { font-family: 'Libre Franklin', sans-serif; font-weight: 800; font-size: 1.12rem; line-height: 1.2; } .indicacao-sub { font-size: 0.84rem; line-height: 1.45; color: rgba(255, 255, 255, 0.85); } .indicacao-cta { flex: none; align-self: center; padding: 10px 16px; border-radius: 12px; background: linear-gradient(135deg, #F5D889 0%, #E0AC3F 100%); color: #0F1B38; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.86rem; white-space: nowrap; } @media (max-width: 480px) { .indicacao-banner { flex-wrap: wrap; } .indicacao-cta { flex: 1 1 100%; text-align: center; margin-top: 4px; } } /* Nota LGPD */ .inicio-lgpd { display: flex; align-items: center; justify-content: center; gap: 7px; margin: 4px 0 2px; color: var(--muted); font-size: 0.8rem; } .lgpd-ico svg { width: 15px; height: 15px; display: block; } /* ---------- Empty state (estilo do modelo) ---------- */ .empty-state { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 36px 20px; } .empty-state .es-icon { width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: var(--accent-soft-bg); color: var(--accent-ink); } .empty-state .es-icon svg { width: 40px; height: 40px; } .empty-state h3 { font-family: 'Libre Franklin', sans-serif; font-size: 1.15rem; margin: 0; color: var(--ink); } .empty-state p { color: var(--muted); margin: 0; font-size: 0.92rem; } /* Respeita "reduzir movimento" do sistema: pulso do mic, spinner e orb param */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* ---------- Billing: banner de trial + paywall ---------- */ .billing-banner { display: flex; align-items: center; justify-content: center; gap: 12px; padding: 8px 16px; font-size: 0.85rem; color: var(--ink); background: color-mix(in oklab, var(--accent) 16%, var(--surface)); border-bottom: 1px solid var(--border-soft); } .billing-banner.hidden { display: none; } .billing-banner-alerta { background: var(--alerta-fundo); border-bottom-color: var(--alerta-borda); color: var(--alerta-texto); } .billing-banner-bloqueado { background: color-mix(in oklab, var(--erro) 18%, var(--surface)); border-bottom-color: var(--erro-border); } .billing-banner-btn { padding: 4px 12px; border: 1px solid var(--border); border-radius: 999px; background: transparent; color: inherit; font: inherit; cursor: pointer; } .billing-banner-btn:hover { border-color: var(--accent); } .paywall-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; background: var(--scrim); backdrop-filter: blur(4px); } .paywall-overlay.hidden { display: none; } .paywall-card { width: min(440px, 100%); max-height: 85dvh; overflow-y: auto; padding: 24px; border: 1px solid var(--border-soft); border-radius: var(--raio); background: var(--surface-raised); display: flex; flex-direction: column; gap: 14px; } .paywall-card h2 { font-size: 1.15rem; } .paywall-card p { color: var(--muted); font-size: 0.92rem; } .paywall-contato { font-weight: 600; } .auth-sub { color: var(--muted); font-size: 0.9rem; } /* tag de status de billing no painel admin */ .tag-billing { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; border: 1px solid var(--border); color: var(--muted); } .tag-billing-vencido { color: var(--alerta-texto); border-color: var(--alerta-borda); } .tag-billing-isento { color: var(--accent-ink); border-color: var(--accent); } /* ação destrutiva no painel admin (Excluir usuário) */ .btn-perigo { color: var(--erro); border-color: var(--erro-border); } .btn-perigo:hover { background: color-mix(in oklab, var(--erro) 14%, transparent); border-color: var(--erro); } /* rodapé discreto: link para o site (apresentação/preço) e para a política de privacidade */ .rodape-app { display: flex; justify-content: center; align-items: center; gap: 8px; padding: 26px 20px 8px; font-size: 0.8rem; color: var(--muted); } .rodape-app a { color: var(--muted); text-decoration: none; } .rodape-app a:hover { color: var(--ink); text-decoration: underline; } /* ---------- Instalar como app (banner + instruções iOS) ---------- */ .install-banner { display: flex; align-items: center; gap: 12px; max-width: 660px; margin: 12px auto 0; padding: 12px 16px; border: 1px solid color-mix(in oklab, var(--accent) 30%, transparent); background: color-mix(in oklab, var(--accent) 10%, transparent); border-radius: 14px; } .install-banner.hidden { display: none; } .install-banner-txt { flex: 1 1 auto; font-size: 0.92rem; color: var(--ink); } .install-banner-btn { flex: none; padding: 8px 18px; border: none; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-family: 'Inter Tight', sans-serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .install-banner-btn:hover { filter: brightness(1.05); } .install-banner-x { flex: none; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; color: var(--muted); font-size: 16px; cursor: pointer; } .install-banner-x:hover { color: var(--ink); } @media (max-width: 620px) { .install-banner { margin-left: 12px; margin-right: 12px; } } /* Overlay de instruções do iPhone/iPad */ .install-overlay { position: fixed; inset: 0; z-index: 60; display: flex; align-items: center; justify-content: center; padding: 20px; } .install-overlay-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } .install-overlay-card { position: relative; width: min(440px, 100%); max-height: 85dvh; overflow-y: auto; padding: 24px; border: 1px solid var(--border-soft); border-radius: 18px; background: var(--surface-raised); box-shadow: var(--shadow-modal); display: flex; flex-direction: column; gap: 12px; } .install-overlay-card .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } .ios-steps { margin: 4px 0 0; padding-left: 22px; display: flex; flex-direction: column; gap: 12px; } .ios-steps li { color: var(--ink); font-size: 0.95rem; line-height: 1.45; } .ios-note { color: var(--muted); font-size: 0.88rem; margin: 4px 0 0; } /* ---------- Onboarding (carrossel de primeira vez, identidade azul) ---------- */ body.onb-lock { overflow: hidden; } .onb { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; background: var(--bg); padding: calc(env(safe-area-inset-top, 0px) + 12px) 20px calc(env(safe-area-inset-bottom, 0px) + 18px); opacity: 1; transition: opacity 0.3s ease; } .onb::before { /* mesma atmosfera de fundo das telas */ content: ''; position: absolute; inset: 0; z-index: -1; background: var(--bg-grad); background-size: cover; } .onb-saindo { opacity: 0; } .onb-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 44px; } .onb-nav-btn { width: 44px; height: 44px; flex: none; display: grid; place-items: center; border: none; border-radius: 14px; background: var(--fill); color: var(--ink); cursor: pointer; } .onb-nav-btn svg { width: 22px; height: 22px; } .onb-back-hidden { visibility: hidden; } .onb-pill { padding: 6px 16px; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent-ink); font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.9rem; font-variant-numeric: tabular-nums; } .onb-skip { min-height: 44px; padding: 0 8px; background: none; border: none; color: var(--muted); font-family: 'Inter Tight', sans-serif; font-size: 0.95rem; font-weight: 600; cursor: pointer; } .onb-skip:hover { color: var(--ink); } .onb-nav-btn:focus-visible, .onb-skip:focus-visible, .onb-cta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .onb-viewport { flex: 1 1 auto; overflow: hidden; position: relative; margin-top: 4px; } .onb-track { display: flex; height: 100%; transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1); } .onb-slide { flex: 0 0 100%; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 6px 2px 10px; overflow-y: auto; } .onb-panel { width: 100%; flex: none; height: clamp(180px, 33vh, 280px); border-radius: 26px; background: var(--accent-soft-bg); position: relative; overflow: hidden; display: grid; place-items: center; margin-bottom: 4px; } .onb-blob { position: absolute; border-radius: 50%; background: var(--accent); opacity: 0.14; } .onb-blob-a { width: 190px; height: 190px; top: -60px; right: -50px; } .onb-blob-b { width: 150px; height: 150px; bottom: -50px; left: -40px; opacity: 0.10; } .onb-circle { position: relative; z-index: 1; width: clamp(96px, 24vw, 120px); height: clamp(96px, 24vw, 120px); border-radius: 50%; display: grid; place-items: center; background: linear-gradient(135deg, var(--cta-a), var(--cta-b)); color: #fff; box-shadow: 0 16px 34px color-mix(in oklab, var(--accent) 40%, transparent); } .onb-circle svg { width: 50px; height: 50px; } /* slide de boas-vindas: a orb aparece "solta" como no hero/home — sem o disco azul nem o glow do .onb-circle (os demais slides mantêm o círculo com o glifo) */ .onb-circle--orb { background: none; box-shadow: none; } .onb-circle .logo-orb { display: block; width: 100%; height: 100%; } .onb-badge { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft-bg); color: var(--accent-ink); } .onb-badge svg { width: 24px; height: 24px; } .onb-title { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: clamp(1.35rem, 5.5vw, 1.6rem); line-height: 1.2; letter-spacing: -0.4px; color: var(--ink); margin: 2px 0 0; text-wrap: balance; max-width: 18ch; } .onb-subtitle { color: var(--accent-ink); font-weight: 700; font-size: 1rem; margin: 0; } .onb-body { color: var(--muted); font-size: 0.98rem; line-height: 1.62; margin: 2px 0 0; max-width: 40ch; } .onb-features { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; margin-top: 8px; } .onb-feature { display: flex; flex-direction: column; align-items: center; gap: 5px; } .onb-feat-ico { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; background: var(--accent-soft-bg); color: var(--accent-ink); } .onb-feat-ico svg { width: 22px; height: 22px; } .onb-feature strong { font-size: 0.8rem; color: var(--ink); font-family: 'Libre Franklin', sans-serif; } .onb-feature small { font-size: 0.72rem; color: var(--muted); line-height: 1.2; } .onb-dots { display: flex; justify-content: center; gap: 7px; margin: 14px 0; } .onb-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--border); transition: width 0.25s ease, background 0.25s ease; } .onb-dot.active { width: 22px; background: var(--accent); } .onb-foot { flex: none; } .onb-cta { width: 100%; } /* ---------- Agenda (grade de mês estilo calendário) ---------- */ #screen-agenda { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); } .ag-topo { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ag-mes { margin: 0; font-size: 1.35rem; text-transform: capitalize; } .ag-nav { display: flex; align-items: center; gap: 6px; } .ag-seta { min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--ink); font-size: 22px; line-height: 1; cursor: pointer; } .ag-seta:hover { border-color: var(--accent); } .ag-hoje { padding: 9px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: var(--accent-ink); font-weight: 600; cursor: pointer; } .ag-hoje:hover { border-color: var(--accent); } .ag-grade { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; } .ag-dow { background: var(--surface); text-align: center; padding: 8px 0; font-size: 0.72rem; font-weight: 700; color: var(--muted); } .ag-cel { background: var(--surface); min-height: clamp(66px, 13vw, 96px); min-width: 0; border: 0; cursor: pointer; display: flex; flex-direction: column; align-items: stretch; gap: 3px; padding: 4px 4px 6px; text-align: left; } .ag-cel:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .ag-cel.fora { background: var(--fill); } .ag-cel.fora .ag-num { color: var(--placeholder); } .ag-num { align-self: flex-start; min-width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: var(--ink); border-radius: 999px; } .ag-cel.hoje .ag-num { background: var(--accent); color: #fff; } .ag-chip { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 1px 6px; border-radius: 6px; color: #fff; font-size: 0.62rem; font-weight: 600; line-height: 1.5; } .ag-mais { font-size: 0.62rem; font-weight: 700; color: var(--muted); padding-left: 4px; } .ag-fab { position: fixed; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); z-index: 24; width: 56px; height: 56px; border: 0; border-radius: 18px; background: var(--accent); color: #fff; font-size: 30px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-modal); transition: transform 0.12s ease; } .ag-fab:hover { transform: scale(1.06); } .ag-fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Agenda — abas Dia/Semana/Mês + navegação de data (estilo do modelo) */ .ag-head { display: flex; flex-direction: column; gap: 14px; } .ag-tabs { display: flex; gap: 4px; background: var(--fill); border: 1px solid var(--border-soft); border-radius: 12px; padding: 4px; } .ag-tab { flex: 1; padding: 9px 8px; border: none; border-radius: 9px; background: none; color: var(--muted); font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.9rem; cursor: pointer; } .ag-tab.active { background: var(--surface); color: var(--accent-ink); box-shadow: var(--shadow-card); } .ag-tab:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ag-navbar { display: flex; align-items: center; gap: 10px; } .ag-nav-btn { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); color: var(--ink); cursor: pointer; } .ag-nav-btn svg { width: 20px; height: 20px; } .ag-nav-btn:hover { border-color: var(--accent); color: var(--accent-ink); } .ag-nav-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ag-nav-label { flex: 1; padding: 11px 12px; border: 1px solid var(--border-soft); border-radius: 12px; background: var(--surface); color: var(--ink); font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.95rem; text-align: center; cursor: pointer; } .ag-nav-label:hover { border-color: var(--accent); } .ag-nav-label:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ag-corpo { margin-top: 4px; } /* Lista de eventos (Dia / Semana) */ .ag-lista { display: flex; flex-direction: column; gap: 12px; } .ag-ev { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; padding: 16px; border: 1px solid var(--border-soft); border-radius: 16px; background: var(--surface); box-shadow: var(--shadow-card); cursor: pointer; } .ag-ev:hover { border-color: var(--accent); } .ag-ev:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .ag-ev-hora { flex: none; width: 52px; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--accent-ink); } .ag-ev-txt { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .ag-ev-txt strong { font-size: 1rem; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-ev-txt small { color: var(--muted); font-size: 0.82rem; } .ag-ev-dot { flex: none; width: 10px; height: 10px; border-radius: 999px; } /* Vista Semana: blocos por dia */ .ag-semana { display: flex; flex-direction: column; gap: 16px; } .ag-sem-bloco { display: flex; flex-direction: column; gap: 10px; } .ag-sem-dia { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 6px 2px; border: none; background: none; cursor: pointer; } .ag-sem-dow { font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--ink-strong); } .ag-sem-data { color: var(--muted); font-size: 0.85rem; } .ag-sem-cont { margin-left: auto; min-width: 22px; height: 22px; padding: 0 6px; display: inline-grid; place-items: center; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent-ink); font-size: 0.75rem; font-weight: 700; } .ag-sem-dia.hoje .ag-sem-dow { color: var(--accent-ink); } .ag-sem-vazio { color: var(--muted); font-size: 0.85rem; padding-left: 2px; } /* ---------- Locais de atendimento ---------- */ #screen-locais { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 96px); } .locais-sub { margin: -4px 0 4px; color: var(--muted); font-size: 0.9rem; } .local-row { align-items: flex-start; } .local-ico { margin-top: 2px; } .local-txt { gap: 3px; } .local-txt strong { font-size: 1.02rem; color: var(--ink-strong); } .local-txt small { color: var(--muted); font-size: 0.85rem; line-height: 1.4; } .local-tel { color: var(--ink) !important; font-weight: 600; } .local-chip { display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; margin-top: 6px; padding: 5px 12px; border-radius: 999px; background: var(--accent-soft-bg); color: var(--accent-ink); font-size: 0.78rem; font-weight: 700; border: 1px solid color-mix(in oklab, var(--accent) 26%, transparent); } .local-chip-ico svg { width: 13px; height: 13px; display: block; } .local-row .conta-chevron { align-self: center; } .locais-add { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; margin-top: 4px; padding: 16px; border: 1.5px solid color-mix(in oklab, var(--accent) 45%, var(--border)); border-radius: 16px; background: var(--surface); color: var(--accent-ink); font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.98rem; cursor: pointer; } .locais-add:hover { background: var(--accent-soft-bg); border-color: var(--accent); } .locais-add:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .locais-add-ico svg { width: 20px; height: 20px; display: block; } /* modal da agenda: mesma estrutura dos modais de selo/escores */ #agenda-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } #agenda-modal .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } #agenda-modal .modal-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-soft); max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-modal); } #agenda-modal .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } #agenda-modal h2 { margin: 0 0 14px; font-size: 1.25rem; } /* modal de locais: mesma estrutura dos demais modais */ #locais-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } #locais-modal .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } #locais-modal .modal-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-soft); max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-modal); } #locais-modal .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } #locais-modal h2 { margin: 0 0 14px; font-size: 1.25rem; } #locais-modal .field { margin-bottom: 12px; } #locais-modal .ag-checkline { display: flex; align-items: center; gap: 10px; margin: 4px 0 14px; } #locais-modal .ag-checkline input { width: 20px; height: 20px; } /* ---------- Pacientes ---------- */ /* botão em bloco (largura total) — irmão branco do "Gerar prontuário" na tela de atendimento */ .btn-bloco { width: 100%; } /* autocomplete do campo Nome no atendimento (sugestões do cadastro) */ .nome-sugestoes-wrap { position: relative; } .nome-sugestoes { position: absolute; top: 100%; left: 0; right: 0; z-index: 30; margin-top: 4px; background: var(--surface-raised); border: 1px solid var(--border-soft); border-radius: 14px; box-shadow: var(--shadow-modal); overflow: hidden; display: flex; flex-direction: column; } .nome-sugestao { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; padding: 12px 16px; border: 0; background: none; cursor: pointer; text-align: left; font: inherit; } .nome-sugestao + .nome-sugestao { border-top: 1px solid var(--border-soft); } .nome-sugestao:hover, .nome-sugestao:focus-visible { background: var(--fill-2); } .nome-sugestao strong { color: var(--ink); font-size: 0.98rem; } .nome-sugestao small { color: var(--muted); font-size: 0.82rem; } /* FAB com rótulo "Novo paciente" — pílula fixa, mesmo chão da ag-fab */ #screen-pacientes { padding-bottom: 96px; } /* espaço p/ a lista não sumir sob o FAB */ .fab { position: fixed; right: 20px; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px); z-index: 24; display: inline-flex; align-items: center; gap: 8px; padding: 15px 20px; border: 0; border-radius: 999px; background: var(--accent); color: #fff; font-family: 'Libre Franklin', sans-serif; font-weight: 700; font-size: 0.98rem; cursor: pointer; box-shadow: var(--shadow-modal); transition: transform 0.12s ease; } .fab:hover { transform: scale(1.04); } .fab:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } .fab-ico svg { width: 20px; height: 20px; display: block; } /* busca (nome/CPF/telefone) com ícone à esquerda */ .pac-busca { position: relative; margin-bottom: 4px; } .pac-busca-ico { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; } .pac-busca-ico svg { width: 18px; height: 18px; display: block; } .pac-busca-in { padding-left: 42px; } .pac-vazio-busca { color: var(--muted); text-align: center; padding: 24px 0; } /* modal de cadastro — mesmo chrome do #locais-modal */ #pacientes-modal { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; } #pacientes-modal .modal-backdrop { position: absolute; inset: 0; background: var(--scrim); backdrop-filter: blur(3px); } #pacientes-modal .modal-card { position: relative; background: var(--surface-raised); border: 1px solid var(--border-soft); max-width: 480px; width: 92%; max-height: 88vh; overflow-y: auto; border-radius: 18px; padding: 22px; box-shadow: var(--shadow-modal); } #pacientes-modal .modal-close { position: absolute; top: 8px; right: 8px; min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; font-size: 20px; color: var(--muted); cursor: pointer; } #pacientes-modal h2 { margin: 0 0 14px; font-size: 1.25rem; } #pacientes-modal .field { margin-bottom: 12px; } #pacientes-modal .pac-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } #pacientes-modal .pac-grid2 .field { margin-bottom: 12px; } .ag-horas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ag-horas .field { margin-bottom: 12px; } .ag-checkline { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; cursor: pointer; } .ag-checkline input { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; } .ag-cores { display: flex; gap: 10px; flex-wrap: wrap; } .ag-cor { width: 30px; height: 30px; border-radius: 999px; border: 2px solid transparent; cursor: pointer; } .ag-cor.sel { box-shadow: 0 0 0 3px var(--surface-raised), 0 0 0 5px var(--accent); } .ag-excluir { width: 100%; margin-bottom: 10px; color: var(--erro); } .ag-dia-lista { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; } .ag-vazio { color: var(--muted); } .ag-dia-item { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--fill); color: var(--ink); cursor: pointer; } .ag-dia-item:hover { border-color: var(--accent); } .ag-dia-cor { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 999px; } .ag-dia-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ag-dia-txt strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ag-dia-txt small { color: var(--muted); } /* ---------- Desktop (mouse + tela larga): mesmo shell mobile, sem redesenhar a IA ---------- O hero era o único elemento sem teto de largura — esticava a faixa azul até a borda da tela enquanto os cards ficavam centrados em 660px, descolando o "cabeçalho" do conteúdo. Aqui só alinhamos a largura e acrescentamos feedback de hover pro mouse (tab e mic não tinham nenhum). Nada disso roda abaixo de 1024px. */ @media (min-width: 1024px) { .hero, .screen { max-width: 720px; } .hero { margin: 0 auto; border-radius: 20px; } } @media (min-width: 1024px) and (hover: hover) { .tab:hover { background: var(--fill-2); color: var(--ink); } .btn-mic:hover { filter: brightness(1.05); } }