/* layout_main.css */ /* ========================================= ESTRUTURA GERAL E RESET ========================================= */ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; margin: 0; padding-top: calc(var(--header-height)); background-color: var(--bg-body); color: var(--text-main); } .container { max-width: 1220px; width: 95%; margin: 0 auto; display: flex; gap: 20px; align-items: flex-start; } /* ========================================= BANNERS GUEST — VERDE, CENTRALIZADOS ========================================= */ #banner-tema-guest { max-width: 1220px; width: 95%; margin: 6px auto; border-radius: 8px; display: flex; align-items: center; gap: 10px; padding: 8px 16px; font-size: 0.83rem; color: var(--text-main); background: rgba(20, 168, 116, 0.09); border: 1px solid rgba(20, 168, 116, 0.30); box-sizing: border-box; } .banner-guest-inline { display: flex; align-items: center; gap: 10px; background: rgba(20, 168, 116, 0.09); border: 1px solid rgba(20, 168, 116, 0.30); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 0.85rem; color: var(--text-main); } #btn-menu-mobile { display: none; } /* Responsividade Mobile */ .mobile-only-flex { display: none; } @media (max-width: 900px) { #btn-menu-mobile { display: flex; align-items: center; justify-content: center; } /* Esconde os itens originais do header que agora estão dentro do menu sanduíche */ .header-right .btn-receita[title="Alternar Tema"], .header-right #btn-header-receita, .header-right #btn-header-tutorial, .header-right .tema-picker-wrap, .header-right .visitor-links { display: none !important; } /* User dropdown: container fica no DOM (para o dropdown aparecer), mas a pill visível some */ .header-right .user-dropdown-container .user-pill { display: none !important; } .header-right .user-dropdown-container { position: static; } .header-right .user-dropdown-container .user-dropdown-menu { position: fixed !important; top: calc(var(--header-height, 85px) + 4px) !important; right: 12px !important; left: auto !important; } .mobile-only-flex { display: flex; } /* As pills mobile usam a classe específica (.user-mini-pill / .btn-login-mobile), cuja regra base define display:none e — por vir depois na cascata — vencia .mobile-only-flex. Reafirma a visibilidade no breakpoint mobile. */ .user-mini-pill.mobile-only-flex { display: flex; } .btn-login-mobile.mobile-only-flex { display: inline-block; } /* Hamburger sai do mobile — função vai para a aba "Mais" no sticky wrapper. */ #btn-menu-mobile { display: none !important; } /* Impede scroll horizontal global. Aplicado em (não em body) porque overflow-x: hidden em body, no iOS Safari, transforma body em scroll container e quebra position: fixed (header anda com o scroll, bottom-nav some/aparece). overflow-x: clip não cria scroll container — preserva position: fixed/sticky. */ html { overflow-x: clip; } body { overflow-x: clip; max-width: 100vw; } /* iOS Safari faz zoom ao focar input/textarea/select com font-size < 16px. Garante 16px nos inputs de busca, no select de perfil e no clone do header. */ .search-receitas, #busca-cid, #busca-receita, #select-perfil-sintomas, .header-select, .header-dynamic-slot .header-dynamic-clone { font-size: 16px !important; } .header { height: auto !important; min-height: var(--header-height); padding: 15px 0; } .header-inner { /* gap:8px casa com o gap usado quando o slot dinâmico está ativo (mais.css body.header-slot-active). Antes era 15px e a pill "pulava" ~7px na horizontal ao alternar entre os dois estados. */ gap: 8px; /* Mantém SEMPRE uma única linha — sem flex-wrap. Antes (sessão 9 v1) tinha flex-wrap:wrap → header com 2 linhas no modo normal; ao ativar o slot dinâmico, flex-wrap:nowrap (mais.css) colapsava para 1 linha e logo/pill "pulavam" verticalmente. Solução: 1 linha em ambos os estados; .header-right encolhe naturalmente (flex:0 0 auto) pois seu conteúdo visível foi todo movido pelo abrirAba()/JS ou ocultado por display:none. */ flex-wrap: nowrap; } /* .header-left ocupa o espaço disponível; pill/login (margin-left:auto) fica encostada à direita pois .header-right é auto-width (vazio). */ .header-left { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding-top: 0; } /* .header-right ocupa só o que precisa. No mobile o conteúdo visível (#select-perfil-sintomas, tema-picker, btn-receita, visitor-links, user-pill desktop) ou foi movido para slots de aba ou está display:none. Resta apenas .user-dropdown-container vazio (dropdown é position:fixed e nem é acionado no mobile — clique vai para aba "Mais"). */ .header-right { flex: 0 0 auto; width: auto; justify-content: flex-end; gap: 8px; } /* Quando o select de perfil está temporariamente em .header-right (entre trocas de aba), continua full-width do seu container imediato. Em outros containers (slot de aba), também full-width. */ .symptom-select-wrapper { width: 100%; min-width: 0; margin-bottom: 0 !important; } .tab-perfil-slot { width: auto; } /* Oculta os botões padrão da direita se for usar o menu sanduíche */ /* Descomente abaixo após criar o menu lateral do sanduíche */ /* #btn-header-receita, .btn-receita[title="Alternar Tema"], .visitor-links, .user-dropdown-container { display: none; } */ /* 1. Empilha as colunas de anamnese (Esquerda em cima, Direita embaixo) */ .container { flex-direction: column; width: 100%; } .col-input, .col-output { flex: none; /* Reseta o comportamento flex do desktop */ width: 100%; max-width: 100%; min-width: 0; } /* No mobile, .col-input fica "integrada" ao header: sem cantos arredondados nem sombra no topo. */ .col-input { border-top-left-radius: 0; border-top-right-radius: 0; box-shadow: none; } /* 2. Bottom navigation bar (mobile/tablet) — regras unificadas em receitas-mobile.css */ .main-tabs-sticky-wrapper { position: fixed !important; bottom: 0 !important; top: auto !important; transition: none !important; transform: none !important; left: 0; right: 0; width: 100%; height: calc(60px + env(safe-area-inset-bottom, 0px)); padding: 0 0 env(safe-area-inset-bottom, 0px); margin: 0; background: var(--bg-container); backdrop-filter: none; -webkit-backdrop-filter: none; border-top: 1px solid var(--border-color); border-bottom: none; box-shadow: 0 -2px 12px rgba(0,0,0,0.1); z-index: 5000; } body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)); } /* Trocar label longa pela curta */ .tab-label { display: none; } .tab-label-short { display: inline; } /* Dark mode bottom nav */ } /* ========================================= HEADER (NAVBAR) ========================================= */ .header { position: fixed; top: 0; left: 0; width: 100%; height: var(--header-height); background: var(--glass-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--border-color); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03); z-index: 5000; display: flex; align-items: center; justify-content: center; padding: 0; box-sizing: border-box; } .header-inner { max-width: 1220px; width: 95%; display: flex; align-items: center; justify-content: space-between; gap: 20px; height: 100%; box-sizing: border-box; } .header-left { display: flex; align-items: center; gap: 12px; } .header-right { display: flex; align-items: center; gap: 15px; } /* Logos */ .site-logo { height: 40px; width: auto; display: block; } .footer-logo-img { height: 38px; width: auto; display: block; } /* "10" sempre verde; "Plantão" azul no dark */ .logo-num { color: var(--accent-secondary) !important; } #titulo-sistema { margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--heading-color); outline: none; white-space: nowrap; } /* Título: desktop mostra o customizado; mobile mostra sempre "Plantão10" */ .title-mobile { display: none; margin: 0; font-size: 1.6rem; font-weight: 700; color: var(--heading-color); outline: none; white-space: nowrap; } @media (max-width: 900px) { .title-desktop { display: none !important; } .title-mobile { display: block; font-size: 1.3rem; } /* Overrides do .header-inner mobile DEPOIS da regra base (linha ~212), que vinha depois da @media (max-width:900px) original (linha 58) e sobrescrevia gap:8px → gap:20px por source order com mesma especificidade. Repetir aqui (após a base) garante que gap/flex-wrap mobile vençam. */ .header-inner { gap: 8px; flex-wrap: nowrap; } .header-left { flex: 1 1 auto; min-width: 0; gap: 10px; } .header-right { flex: 0 0 auto; width: auto; justify-content: flex-end; gap: 8px; } } /* Dropdown Perfil/Sintomas — usado no header e em cada aba */ .symptom-select-wrapper { position: relative; min-width: 220px; display: flex; align-items: center; } .symptom-select-wrapper::before { content: "\f0f0"; /* fa-user-md */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.78em; position: absolute; left: 8px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--accent-tint, rgba(16,83,164,0.10)); color: var(--accent-color); pointer-events: none; transition: background 0.18s, color 0.18s; } .symptom-select-wrapper:hover::before, .symptom-select-wrapper:focus-within::before { background: var(--accent-tint2, var(--accent-tint)); } .header-select { width: 100%; padding: 10px 38px 10px 42px; border-radius: 12px; border: 1.5px solid var(--border-color); background-color: var(--input-bg, var(--bg-container)); color: var(--heading-color); font-size: 1.2rem; font-weight: 600; letter-spacing: 0.01em; appearance: none; cursor: pointer; transition: border-color 0.18s, box-shadow 0.18s, background-color 0.18s; text-overflow: ellipsis; } .header-select:hover { border-color: var(--accent-color); background-color: var(--bg-container); } .header-select:focus { outline: none; border-color: var(--accent-color); box-shadow: 0 0 0 3px var(--accent-tint, rgba(16,83,164,0.15)); } .symptom-select-wrapper::after { content: '\f078'; /* fa-chevron-down */ font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 0.65em; position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--text-secondary, var(--text-main)); opacity: 0.7; transition: transform 0.2s ease, color 0.18s, opacity 0.18s; } .symptom-select-wrapper:hover::after { opacity: 1; } .symptom-select-wrapper:focus-within::after { transform: translateY(-50%) rotate(180deg); color: var(--accent-color); opacity: 1; } /* Slot do seletor em cada aba (anamnese, receitas, cids) */ .tab-perfil-slot { display: block; } .tab-perfil-slot:empty { display: none; } .tab-perfil-slot #select-perfil-sintomas-div { width: 100%; } .tab-perfil-slot .symptom-select-wrapper { width: 100%; min-width: 0; } /* Aba Receitas: o slot fica no cabeçalho do browser, junto da busca */ .rec-split .browser-head .tab-perfil-slot .header-select { padding: 9px 34px 9px 40px; border-radius: 8px; border-width: 1.5px; border-color: var(--rec-split-border, var(--border-color)); } /* Botões do Header (Receita, Tema, User) */ .btn-receita { padding: 8px 16px; border-radius: 6px; font-size: 0.9rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; gap: 8px; transition: 0.3s; } .btn-receita.empty { background: transparent; border: 1px solid var(--border-color); color: var(--text-main); } .btn-receita.full { background-color: var(--accent-color); color: white; border: 1px solid var(--accent-color); } .btn-theme-icon { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: var(--text-main); padding: 5px; } .user-pill { display: flex; align-items: center; gap: 10px; padding: 5px 15px 5px 5px; border: 1px solid var(--border-color); border-radius: 30px; cursor: pointer; background: var(--bg-container); } .user-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; } /* Mobile: pill discreta do usuário e botão de login no .header-left */ .user-mini-pill { display: none; margin-left: auto; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; border: none; background: transparent; cursor: pointer; padding: 0; } .user-mini-pill .user-mini-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--accent-color); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 0.9rem; } .btn-login-mobile { display: none; margin-left: auto; padding: 12px 25px; border-radius: 10px; border: 1px solid var(--accent-color); background: var(--accent-color); color: #fff; cursor: pointer; font-weight: 600; font-size: 0.85rem; } .btn-login-mobile:hover { filter: brightness(0.95); } /* ========================================= ABAS PRINCIPAIS E CONTAINERS GERAIS ========================================= */ /* Desktop: o wrapper antigo de abas (fora do header) some — as abas vivem no header */ .main-tabs-sticky-wrapper { display: none; } @media (max-width: 900px) { /* Mobile: wrapper antigo volta como bottom-nav; tabs no header desaparecem */ .main-tabs-sticky-wrapper { display: block; } /* Especificidade dupla (.main-tabs.header-tabs) para vencer .main-tabs { display: flex !important; } definido em receitas-mobile.css. */ .main-tabs.header-tabs, nav.header-tabs { display: none !important; } } /* Abas dentro do header (desktop) */ .header-tabs { display: flex; align-items: stretch; gap: 4px; margin-left: 18px; background: transparent; border: none; border-radius: 0; box-shadow: none; overflow: visible; box-sizing: border-box; height: 100%; } .header-tabs .tab-btn { height: var(--header-height); min-height: var(--header-height); padding: 0 18px; margin: 0; align-self: stretch; box-sizing: border-box; } /* Ícones e labels — desktop */ .tab-icon { display: inline-block; margin-right: 8px; font-size: 0.95rem; opacity: 0.7; } .tab-label { display: inline; } .tab-label-short { display: none; } .tab-btn { flex: 0 0 auto; padding: 14px 18px; cursor: pointer; background: transparent; color: var(--text-secondary); border: none; border-top: 3px solid transparent; border-bottom: 3px solid transparent; font-weight: 600; font-size: 0.95rem; transition: color 0.18s, border-color 0.18s; text-align: center; line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .tab-btn:hover { color: var(--text-main); } .tab-btn:hover .tab-icon { opacity: 1; } .tab-btn.active { color: var(--heading-color); border-bottom-color: var(--accent-color); } .tab-btn.active .tab-icon { opacity: 1; color: var(--accent-color); } /* Dark mode */ .tab-content { display: none; width: 100%; } .tab-content.active { display: block; animation: fadeIn 0.3s ease; } @media (min-width: 901px) { .tab-content { margin-top: 20px; } } @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } } .med-container, .cid-section { background-color: var(--bg-container); padding: 20px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); width: 100%; box-sizing: border-box; } /* Inputs gerais (usados em todo o site) */ input, select, textarea { width: 100%; padding: 10px; border: 1px solid var(--border-color); border-radius: 6px; background-color: var(--input-bg); color: var(--text-main); box-sizing: border-box; font-family: inherit; outline: none; } input:focus, textarea:focus { border-color: var(--accent-color); box-shadow: 0 0 0 2px rgba(0, 86, 179, 0.08); } textarea { font-family: 'Roboto Mono', monospace; font-size: 13px; min-height: 80px; resize: vertical; line-height: 1.5; padding: 12px; } /* ========================================= ÁREA DO VISITANTE (LOGIN/CADASTRO) ========================================= */ .visitor-links { display: flex; align-items: center; gap: 0; } /* Esconde o botão "Cadastre-se" no header quando a aba Home está ativa. Nas outras abas ele reaparece com fade/slide. max-width + margin + padding animados colapsam o espaço, fazendo o conteúdo restante deslizar suavemente até a borda direita. */ .visitor-links .btn-cadastre { transition: opacity 0.28s ease, transform 0.28s ease, max-width 0.32s ease, margin-left 0.32s ease, padding-left 0.32s ease, padding-right 0.32s ease; opacity: 1; transform: translateX(0) scale(1); max-width: 200px; margin-left: 15px; overflow: hidden; white-space: nowrap; } body.tab-home-active .visitor-links .btn-cadastre { opacity: 0; transform: translateX(8px) scale(0.96); pointer-events: none; max-width: 0; margin-left: 0; padding-left: 0; padding-right: 0; } @keyframes btnCadastreReveal { from { opacity: 0; transform: translateX(12px) scale(0.96); } to { opacity: 1; transform: translateX(0) scale(1); } } body:not(.tab-home-active) .visitor-links .btn-cadastre { animation: btnCadastreReveal 0.32s ease both; } .link-login { color: var(--accent-color); /* Fica Azul */ font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: 0.2s; } .link-login:hover { text-decoration: underline; opacity: 0.8; } .btn-cadastre { background: var(--accent-color); color: #fff; border: none; padding: 0 24px; height: 42px; /* Mesma altura da user-pill */ border-radius: 30px; font-weight: bold; font-size: 0.95rem; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 86, 179, 0.2); transition: all 0.2s ease; } .btn-cadastre:hover { background: var(--accent-hover); transform: translateY(-1px); }