/* ── Picture-in-Picture: estilos compartilhados ───────────────────────────── * Placeholder centralizado na aba principal enquanto a PiP está aberta. * Classe .pip-mode aplicada no da janela PiP (ajustes condicionais). * * Spec: docs/plans/2026-05-25-pip-evolucao-hospital-design.md * ────────────────────────────────────────────────────────────────────────── */ /* Placeholder mostrado na aba principal quando o app está na PiP. Cobre toda a viewport, alinhamento centralizado. */ .pip-placeholder { position: fixed; inset: 0; z-index: 9000; display: flex; align-items: center; justify-content: center; background: var(--bg-primary, #0a0e1a); padding: 24px; } .pip-placeholder-inner { text-align: center; max-width: 360px; display: flex; flex-direction: column; align-items: center; gap: 16px; } .pip-placeholder-icon { width: 56px; height: 56px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: var(--accent-soft, rgba(245, 158, 11, 0.15)); border: 1px solid var(--accent-border, rgba(245, 158, 11, 0.3)); color: var(--accent, #F59E0B); } .pip-placeholder-text { font-size: 14px; line-height: 1.4; color: var(--text-secondary, rgba(255, 255, 255, 0.7)); margin: 0; } .pip-placeholder-btn { padding: 10px 20px; border-radius: 12px; border: 0; font-size: 14px; font-weight: 600; cursor: pointer; background: linear-gradient(135deg, #F59E0B, #F97316); color: #fff; box-shadow: 0 6px 25px rgba(245, 158, 11, 0.35); transition: transform 0.15s ease, box-shadow 0.15s ease; } .pip-placeholder-btn:hover { transform: translateY(-1px); box-shadow: 0 8px 30px rgba(245, 158, 11, 0.45); } .pip-placeholder-btn:focus-visible { outline: 2px solid #fff; outline-offset: 3px; } /* Classe aplicada ao dentro da janela PiP. O app.css já é responsive (35 media queries a 400-1024px), então não precisamos forçar layout — o responsive natural cuida do reflow. */ .pip-mode { /* Sem overrides agressivos; espaço pra ajustes pontuais se preciso. */ } /* Botão "Janela flutuante" no header — herda estilo de .btn-plantao do app.css. Sem necessidade de override, mantemos seletor pra documentação. */ #btn-pip { /* (sem regras — usa .btn-plantao do header) */ }