/* ============================================================ receitas-mobile.css — Plantão10 Redesign mobile/tablet responsivo (<= 900px). Reusa classes/IDs existentes. Inclua APÓS receitas-split.css no . ============================================================ */ @media (max-width: 900px) { /* 1. ABAS PRINCIPAIS → BOTTOM NAVIGATION ----------------- */ .main-tabs-sticky-wrapper { position: fixed !important; left: 0; right: 0; bottom: 0; top: auto !important; width: 100% !important; /* Estende a altura para incluir a safe-area do iOS (barra URL inferior) e usa padding-bottom para empurrar os botões pra cima dela. */ height: calc(60px + env(safe-area-inset-bottom, 0px)) !important; margin: 0 !important; padding: 0 0 env(safe-area-inset-bottom, 0px) !important; background: var(--bg-container) !important; border-top: 1px solid var(--border-color) !important; border-bottom: none !important; box-shadow: 0 -2px 12px rgba(16,30,60,0.08); z-index: 5000; } .main-tabs { position: static !important; display: flex !important; width: 100% !important; max-width: 100% !important; height: 60px !important; margin: 0 !important; padding: 0 !important; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; overflow: visible !important; flex-direction: row !important; } .main-tabs .tab-btn { flex: 1 1 0 !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 3px !important; height: 60px !important; min-height: 60px !important; padding: 6px 4px !important; margin: 0 !important; border: none !important; border-top: 3px solid transparent !important; border-radius: 0 !important; background: transparent !important; color: var(--text-muted) !important; font-size: 11px !important; font-weight: 600 !important; line-height: 1.1 !important; transform: none !important; transition: color 0.12s, background 0.12s, border-color 0.12s !important; } .main-tabs .tab-btn .tab-icon { display: block !important; font-size: 18px !important; margin: 0 !important; line-height: 1 !important; } .main-tabs .tab-btn .tab-label { display: none !important; } .main-tabs .tab-btn .tab-label-short { display: block !important; font-size: 11px !important; line-height: 1.1 !important; } .main-tabs .tab-btn:hover { background: transparent !important; color: var(--text-secondary) !important; } .main-tabs .tab-btn.active { color: var(--accent-color) !important; background: var(--accent-tint) !important; border-top-color: var(--accent-color) !important; } body { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } /* A bottom-nav permanece visível no detalhe; os botões de ação viram FABs flutuantes. Mantém o padding-bottom para o conteúdo não ficar atrás da nav (60px + safe-area). */ body.rec-detail-mobile { padding-bottom: calc(60px + env(safe-area-inset-bottom, 0px)) !important; } /* min-height (não height): o split preenche a viewport quando o conteúdo é curto, mas pode crescer junto com o textarea (auto-grow) para empurrar o footer em vez de transbordar por cima dele. */ body.rec-detail-mobile .rec-split { min-height: calc(100vh - var(--header-height, 85px)) !important; min-height: calc(100dvh - var(--header-height, 85px)) !important; height: auto !important; } /* 2. CONTAINER + SPLIT → STACK -------------------------- */ #tab-receitas .container { padding: 0 !important; max-width: 100% !important; } .rec-split { display: block !important; height: auto !important; border-radius: 0 !important; box-shadow: none !important; position: relative; overflow: visible !important; } .rec-browser, .rec-workspace-panel { width: 100% !important; max-width: 100% !important; min-width: 0 !important; flex: none !important; border: none !important; border-radius: 0 !important; height: auto !important; /* Importante: overflow visible para position:sticky funcionar nas pills. */ overflow: visible !important; } /* Busca + filtro rolam junto com a página (sem sticky) — quando o input sai da viewport, o clone aparece no header dinâmico. */ .browser-sticky-bar { position: static !important; background: transparent !important; border: none !important; padding: 0 !important; display: flex; flex-direction: column; gap: 6px; } /* 3. LISTA — busca destaque, pills com scroll ----------- */ .browser-head { padding: 20px 20px 10px !important; background: var(--bg-container); } .search-receitas { width: 100% !important; height: 44px !important; padding: 0 38px !important; border: 1.5px solid var(--border-color) !important; border-radius: 10px !important; /* 16px é o mínimo para o iOS Safari não dar zoom ao focar. */ font-size: 16px !important; } .search-icon { left: 12px !important; } .search-kbd-badge { display: none !important; } /* Busca: input ocupa toda a largura; .bf-add vira FAB */ .browser-head .search-input-wrapper { display: flex !important; align-items: center; gap: 6px; } .browser-head .search-input-wrapper .search-receitas { flex: 1; min-width: 0; } /* Barra de filtro: no mobile, #btn-filtrar-cat é removido (regra 2) */ .browser-filter-bar { display: flex !important; align-items: center; justify-content: flex-end; padding: 0 !important; margin: 0 !important; background: transparent !important; border: none !important; } #btn-filtrar-cat { display: none !important; } /* .bf-add: FAB pílula no canto inferior direito (recolhe em bolinha) */ .bf-add { position: fixed !important; right: 16px !important; bottom: 76px !important; /* acima da bottom-nav (60px) + margem */ height: 52px !important; max-width: 52px; padding: 0 !important; border-radius: 26px !important; background: var(--accent-secondary) !important; color: #fff !important; border: none !important; box-shadow: 0 6px 18px rgba(0,0,0,0.20); z-index: 4500; overflow: hidden; white-space: nowrap; display: inline-flex !important; align-items: center; justify-content: flex-end; transition: max-width 0.35s ease, transform 0.12s linear; } .bf-add i { flex: 0 0 52px; text-align: center; font-size: 18px !important; margin: 0 !important; order: 2; } .bf-add .bf-add-label { display: none !important; } /* legenda curta do desktop */ .bf-add .bf-add-legend { display: inline-block !important; order: 1; opacity: 0; padding-left: 16px; padding-right: 18px; font-size: 13px; font-weight: 600; transition: opacity 0.2s ease; } .bf-add.is-legend { max-width: min(86vw, 340px); } .bf-add.is-legend .bf-add-legend { opacity: 1; } body.rec-detail-mobile .bf-add { display: none !important; } /* Pills rolam naturalmente com a página (sem sticky). */ .receitas-pills-row.browser-pills { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto !important; gap: 6px !important; padding: 0 20px 20px !important; scrollbar-width: none; position: static; background: transparent !important; border-bottom: none !important; } .receitas-pills-row.browser-pills::-webkit-scrollbar { display: none; } /* Lista: rola junto com a página (sem scroll interno) */ .browser-list { overflow: visible !important; padding-bottom: 80px !important; /* espaço pro FAB */ } .rec-browser { width: 100% !important; max-width: 100% !important; } .rec-sec-hdr { position: static; z-index: 5; padding: 8px 14px !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: 0.6px; } .rec-sec-list > *, .receitas-categoria-list > * { min-height: 56px !important; padding: 10px 14px !important; border-bottom: 1px solid var(--border-color); } /* 4. EDITOR ---------------------------------------------- */ .rec-workspace-panel { flex-direction: column; background: var(--bg-body); } .btn-mobile-voltar { display: flex !important; align-items: center; gap: 8px; width: 100%; height: 48px; padding: 0 12px !important; background: var(--bg-container) !important; border: none !important; border-bottom: 1px solid var(--border-color) !important; border-radius: 0 !important; color: var(--accent-color) !important; font-size: 14px !important; font-weight: 600 !important; text-align: left !important; justify-content: flex-start !important; } .receita-header-info { display: flex !important; align-items: center; gap: 8px; padding: 10px 12px !important; background: var(--bg-container); border-bottom: 1px solid var(--border-color); } #receita-titulo-display { flex: 1; font-size: 15px !important; font-weight: 700 !important; margin: 0 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .font-size-controls { display: flex !important; gap: 2px; } .btn-font-size { width: 32px !important; height: 32px !important; padding: 0 !important; border: 1px solid var(--border-color) !important; border-radius: 6px !important; } .btn-font-size.active { border-color: var(--accent-color) !important; color: var(--accent-color) !important; background: var(--accent-tint) !important; } /* 4.1 Calculadora — peso+idade lado a lado, botão "Calcular doses" abaixo */ .dados-paciente-bar { display: flex !important; flex-direction: column !important; gap: 30px !important; align-items: stretch !important; padding: 10px 12px 12px !important; margin: 0 !important; border-bottom: 1px solid var(--border-color); border-radius: 0 !important; background: var(--bg-container) !important; } .dados-paciente-bar.bar-visible { max-height: none !important; opacity: 1 !important; } .dados-paciente-bar .dp-campos { display: flex !important; flex-direction: row !important; align-items: flex-end !important; gap: 20px !important; width: 100%; } .dp-campo { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; gap: 4px !important; min-width: 0; } .dp-label { font-size: 16px !important; font-weight: 700 !important; color: var(--text-muted) !important; text-transform: uppercase; letter-spacing: 0.5px; width: auto !important; } .dp-input-group { height: 46px !important; border: 1.5px solid var(--rec-split-border) !important; border-radius: 11px !important; background: var(--input-bg) !important; padding: 0 !important; overflow: hidden; } .dp-input-group:focus-within { border-color: var(--calc-accent) !important; box-shadow: 0 0 0 3px var(--calc-accent-tint); background: var(--bg-container) !important; } .dp-input-group input[type="number"] { flex: 1 1 auto !important; width: auto !important; font-size: 1.15rem !important; font-weight: 700 !important; text-align: left !important; padding: 0 4px 0 13px !important; } .dp-slider { display: none !important; } .dados-paciente-bar .dp-acoes { display: flex !important; flex-direction: row !important; align-items: stretch !important; gap: 8px !important; width: 100%; margin: 0 !important; } .dados-paciente-bar .dp-btn-calc { flex: 1 1 auto !important; width: auto !important; height: 48px !important; padding: 0 14px !important; border-radius: 11px !important; font-size: 1.2rem !important; font-weight: 700 !important; box-shadow: 0 3px 12px var(--calc-accent-shadow) !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 8px !important; } .dados-paciente-bar .dp-btn-calc i { font-size: 0.95rem; margin: 0 !important; } .dados-paciente-bar .dp-btn-calc-label { display: inline !important; } /* Reset: só aparece quando habilitado, e mostra só o ícone */ .dados-paciente-bar #dp-btn-reset { display: none !important; width: 48px !important; height: 48px !important; padding: 0 !important; flex: 0 0 48px !important; border-radius: 11px !important; background: var(--input-bg) !important; border: 1.5px solid var(--rec-split-border) !important; color: var(--text-secondary) !important; text-decoration: none !important; align-items: center; justify-content: center; } .dados-paciente-bar #dp-btn-reset:not([disabled]) { display: inline-flex !important; } .dados-paciente-bar #dp-btn-reset .dp-btn-reset-label { display: none !important; } .dados-paciente-bar #dp-btn-reset i { font-size: 0.95rem; margin: 0 !important; } /* 4.2 Workspace body — coluna única, painel vira drawer */ .receita-workspace, .receita-workspace-body { display: flex !important; flex-direction: column !important; flex: 1; min-height: 0; } .receita-editor-col { flex: 1; padding: 10px 12px !important; overflow-y: auto; } .editor-receita { flex: 1; min-height: 240px; border-radius: 12px !important; padding: 14px !important; line-height: 1.65 !important; /* 16px é o mínimo que evita o zoom automático do iOS Safari ao focar o textarea. No mobile a fonte é fixa e a opção de alterar tamanho fica oculta. */ font-size: 16px !important; } .editor-receita-mirror { padding: 14px !important; line-height: 1.65 !important; border-radius: 12px !important; font-size: 16px !important; } /* Esconde o top-bar de sintaxe no mobile (movemos para baixo do textarea) */ .editor-top-bar { display: none !important; } /* Esconde header desktop quando em detalhe (substituído pelo header customizado) */ body.rec-detail-mobile .header { display: none !important; } body.rec-detail-mobile { padding-top: 0 !important; } body.rec-detail-mobile .receita-header-info { display: none !important; } body.rec-detail-mobile .btn-mobile-voltar { display: none !important; } /* Toolbar abaixo do textarea (mobile): abrir painel + ajuda de sintaxe */ .editor-bottom-toolbar { display: flex !important; flex-direction: row; gap: 8px; padding: 6px 12px 0; flex-wrap: wrap; } .btn-editor-tool { display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; background: var(--bg-panel); border: 1px solid var(--border-color); border-radius: 999px; color: var(--text-secondary); font-size: 12px; font-weight: 600; cursor: pointer; } .btn-editor-tool:hover { background: var(--hover-row); color: var(--text-main); } .btn-editor-tool i { font-size: 13px; } #btn-toggle-painel-mobile { background: var(--accent-tint); color: var(--accent-color); border-color: var(--accent-color); } /* Esconde as ações desktop da .receita-actions-bottom no detalhe (usamos a nova action bar) */ body.rec-detail-mobile .receita-actions-bottom { display: none !important; } /* ── Header customizado mobile (substitui .header e .receita-header-info no detalhe) */ .receita-mobile-header { display: none; } body.rec-detail-mobile .receita-mobile-header { display: flex !important; align-items: center; gap: 8px; position: fixed; top: 0; left: 0; right: 0; z-index: 100; padding: 10px 8px; background: var(--bg-container); border-bottom: 1px solid var(--border-color); min-height: 56px; } /* Compensa o espaço do header fixo */ body.rec-detail-mobile .receita-workspace { padding-top: 80px !important; } .rmh-back { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--accent-color); font-size: 18px; border-radius: 50%; } .rmh-back:hover { background: var(--hover-row); } .rmh-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.15; } .rmh-title { font-size: 1.3rem; font-weight: 700; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rmh-meta { font-size: 0.72rem; color: var(--text-muted); display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rmh-meta .rmh-cat-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } .rmh-icon-btn { width: 36px; height: 36px; flex: 0 0 36px; display: inline-flex; align-items: center; justify-content: center; background: transparent; border: none; cursor: pointer; color: var(--text-secondary); font-size: 16px; border-radius: 50%; } .rmh-icon-btn:hover { background: var(--hover-row); color: var(--text-main); } #rmh-fav.is-fav { color: #f5a623; } #rmh-fav.is-fav i { font-weight: 900; } .rmh-menu-wrap { position: relative; } .rmh-menu { position: absolute; top: 100%; right: 0; min-width: 220px; margin-top: 4px; background: var(--bg-container); border: 1px solid var(--border-color); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.18); z-index: 200; padding: 6px; display: flex; flex-direction: column; gap: 2px; } .rmh-menu[hidden] { display: none; } .rmh-menu-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: transparent; border: none; color: var(--text-main); font-size: 0.85rem; text-align: left; cursor: pointer; border-radius: 6px; } .rmh-menu-item:hover { background: var(--hover-row); } .rmh-menu-item i { color: var(--text-muted); width: 16px; text-align: center; } .rmh-menu-item.danger { color: var(--danger-color, #c0392b); } .rmh-menu-item.danger i { color: var(--danger-color, #c0392b); } .rmh-menu-fontgroup { display: flex; flex-direction: column; gap: 4px; padding: 8px 12px; border-top: 1px solid var(--border-color); margin-top: 4px; } .rmh-menu-fontgroup-label { font-size: 0.7rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; } .rmh-menu-fontgroup .font-size-controls { display: flex !important; gap: 6px; justify-content: space-around; } .rmh-menu-fontgroup .btn-font-size { flex: 1; padding: 6px; border: 1px solid var(--border-color); background: var(--bg-panel); border-radius: 6px; cursor: pointer; color: var(--text-main); } .rmh-menu-fontgroup .btn-font-size.active { border-color: var(--accent-color); background: var(--accent-tint); color: var(--accent-color); } .rmh-menu-fontgroup #btn-font-sm span { font-size: 11px; } .rmh-menu-fontgroup #btn-font-md span { font-size: 14px; } .rmh-menu-fontgroup #btn-font-lg span { font-size: 17px; } /* ── Dock de botões flutuantes (mobile) — substitui a bottom action bar. A bottom-nav segue visível; estes botões flutuam acima dela, no canto inf. direito. */ .receita-fab-dock { display: none; } body.rec-detail-mobile .receita-fab-dock { display: flex; align-items: flex-end; gap: 10px; position: fixed; right: 16px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 4001; transition: transform 0.12s linear; /* usado pelo ajuste do footer */ } .rfab-primary { display: flex; flex-direction: column; gap: 12px; align-items: flex-end; } .rfab-secondary { display: flex; flex-direction: row; gap: 10px; align-items: flex-end; } /* Botão base: bolinha que expande em pílula (texto + ícone à direita) */ .rfab { height: 52px; max-width: 52px; padding: 0; border: none; border-radius: 26px; overflow: hidden; white-space: nowrap; display: inline-flex; align-items: center; justify-content: flex-end; color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,0.25); transition: max-width 0.35s ease, background 0.15s; } .rfab > i { flex: 0 0 52px; text-align: center; font-size: 20px; } .rfab > span { opacity: 0; padding-left: 14px; font-size: 13px; font-weight: 600; transition: opacity 0.2s ease; } /* Estado expandido (legenda visível) — largura folgada p/ não cortar o texto */ .rfab.is-legend { max-width: min(86vw, 340px); } .rfab.is-legend > span{ opacity: 1; } /* Secundários (Salvar/Resetar): legenda SEMPRE aberta */ .rfab.rfab-static { max-width: min(86vw, 340px); } .rfab.rfab-static > span{ opacity: 1; } /* Garante espaço à direita do texto p/ respiro visual */ .rfab > span { padding-right: 18px; } /* Cores por função (reaproveitando variáveis do tema) */ .rfab-calc { background: var(--fab-calc-bg, #d35400); } .rfab-copiar { background: var(--btn-copy-bg, #1053a4); } .rfab-enviar { background: #3b475c; } .rfab-save { background: var(--success-color, #0d8a62); } .rfab-reset { background: var(--danger-color, #C0392B); } /* Visibilidade controlada por JS */ .rfab-calc { display: none; } /* só quando há fórmulas */ .rfab-calc.visible { display: inline-flex; } .rfab-secondary .rfab { display: none; } /* salvar/resetar só quando dirty */ .rfab-secondary .rfab.rfab-active { display: inline-flex; } .rfab[disabled] { opacity: 0.5; pointer-events: none; } /* Reduz densidade do .receita-tab-item */ .rec-sec-list > .receita-tab-item, .receitas-categoria-list > .receita-tab-item { min-height: 60px !important; padding: 7px 14px !important; font-size: 15px !important; } /* ── Drawer Mobile: seletor de tema (3 opções) */ .drawer-tema-section { border-bottom: 1px solid var(--border-color); padding-bottom: 10px; margin-bottom: 4px; } .drawer-tema-header { font-size: 0.78rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; padding: 8px 4px; display: flex; gap: 8px; align-items: center; } .drawer-tema-opts { display: flex; flex-direction: column; gap: 4px; } .drawer-tema-opt { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: transparent; border: 1px solid var(--border-color); border-radius: 10px; cursor: pointer; color: var(--text-main); font-size: 0.85rem; text-align: left; } .drawer-tema-opt .dt-preview { width: 28px; height: 22px; border-radius: 4px; border: 1px solid var(--border-color); flex-shrink: 0; } .drawer-tema-opt .dt-preview.dt-light { background: linear-gradient(135deg, #fff 50%, #c0e6ff 50%); } .drawer-tema-opt .dt-preview.dt-hospital { background: linear-gradient(135deg, #000 50%, #00aaff 50%); } .drawer-tema-opt .dt-preview.dt-carvao { background: linear-gradient(135deg, #1e2a3a 50%, #4090d0 50%); } .drawer-tema-opt .dt-label { flex: 1; } .drawer-tema-opt .dt-check { color: var(--accent-color); opacity: 0; font-size: 14px; } .drawer-tema-opt.selected { border-color: var(--accent-color); background: var(--accent-tint); } .drawer-tema-opt.selected .dt-check { opacity: 1; } /* Painel Inteligente desativado no mobile — substituído pelo FAB + drawer pediátrico */ #painel-inteligente.painel-inteligente { display: none !important; } .pi-backdrop { display: none !important; } .pi-fechar-mobile { display: none !important; } /* Dica da receita (clone do pi-obs-section) abaixo do textarea no mobile */ #pi-obs-mobile { display: block; margin: 8px 0 4px; padding: 10px 12px; background: rgba(0, 160, 190, 0.10); border-radius: 8px; color: var(--text-main); font-size: 0.82rem; line-height: 1.45; } #pi-obs-mobile[hidden] { display: none; } #pi-obs-mobile .pi-obs-titulo { font-size: 0.7rem; font-weight: 700; color: var(--accent-color); margin: 0 0 4px; display: flex; align-items: center; gap: 5px; } #pi-obs-mobile .pi-obs-texto { margin: 0; } /* Drawer (bottom sheet) da calculadora pediátrica */ .drawer-calc-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 4099; display: none; } body.calc-drawer-aberto .drawer-calc-backdrop { display: block; } .drawer-calc-pediatrica { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4100; background: var(--bg-container); border-top-left-radius: 18px; border-top-right-radius: 18px; box-shadow: 0 -10px 40px rgba(0,0,0,0.25); padding: 20px 30px calc(18px + env(safe-area-inset-bottom)); transform: translateY(100%); transition: transform 0.25s ease; max-height: 80vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; } body.calc-drawer-aberto .drawer-calc-pediatrica { transform: translateY(0); } /* Alça (grab handle) no topo do drawer — substitui o botão de fechar (×) */ .drawer-calc-pediatrica::before { content: ""; flex: 0 0 auto; width: 40px; height: 5px; border-radius: 3px; background: var(--rec-split-border); margin: -4px auto 2px; } /* O cabeçalho do card (.dp-head) substitui o título/botão antigos do drawer */ .drawer-calc-close, .drawer-calc-title { display: none; } #drawer-calc-pediatrica .dados-paciente-bar.calc-rd .dp-head { display: flex; } #drawer-calc-pediatrica .dados-paciente-bar.calc-rd .dp-head-icon i { color: var(--calc-accent); } .drawer-calc-reset-receita { margin-top: 4px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--danger-color, #C0392B); background: transparent; color: var(--danger-color, #C0392B); font-family: inherit; font-size: 0.92rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; } .drawer-calc-reset-receita[disabled] { opacity: 0.4; cursor: not-allowed; } /* Quando movida para o drawer, a bar precisa ocupar a largura toda */ #drawer-calc-pediatrica #dados-paciente-bar.dados-paciente-bar.bar-visible { display: flex; flex-direction: column; max-height: none !important; opacity: 1 !important; padding: 0 !important; margin: 0 !important; background: transparent; border: none; box-shadow: none; gap: 10px; } #drawer-calc-pediatrica .dp-campos { flex-direction: column; gap: 10px; } #drawer-calc-pediatrica .dp-acoes { display: flex; gap: 8px; } #drawer-calc-pediatrica .dp-btn { flex: 1; padding: 12px; } /* Conteúdo do drawer rola; o X fica fora da área de scroll */ #painel-inteligente #pi-content, #painel-inteligente #pi-admin-section { overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 14px; max-width: 100%; box-sizing: border-box; } #painel-inteligente #pi-content { flex: 1; padding-top: 44px; /* espaço pro X */ } #painel-inteligente #pi-admin-section { flex: 0 0 auto; padding-bottom: calc(14px + env(safe-area-inset-bottom)); } #painel-inteligente .pi-card { max-width: 100%; white-space: normal; } /* Botão de fechar drawer — fixo no topo, fora do scroll */ .pi-fechar-mobile { display: flex !important; position: absolute; top: 8px; right: 8px; width: 36px; height: 36px; align-items: center; justify-content: center; background: var(--bg-container); border: 1px solid var(--border-color); color: var(--text-main); font-size: 18px; cursor: pointer; z-index: 10; border-radius: 50%; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } .pi-fechar-mobile:hover { background: var(--hover-row); } /* Editor toolbar oculto no mobile — as ações vivem nos FABs flutuantes (.rfab) */ .editor-toolbar { display: none !important; } #symptoms-list { margin-top: 20px !important; } .rec-split .rec-workspace-panel .dados-paciente-bar { align-items: stretch !important; } } /* Fora do media query: elementos exclusivos do mobile escondidos no desktop */ .pi-backdrop { display: none; } .pi-fechar-mobile { display: none; } .receita-mobile-header { display: none; } .receita-fab-dock { display: none; } .editor-bottom-toolbar { display: none; } .rmh-menu[hidden] { display: none; }