/* ========================================================================= CONCILIA — Conciliação Medicamentosa Digital Design system: paleta da logo (azul aço + verde sálvia), tipografia Fraunces (display) + Inter (UI). Estética clínica refinada. ========================================================================= */ :root { /* Paleta principal */ --c-azul: #5b8db8; --c-azul-dark: #3d6b94; --c-verde: #7fb695; --c-verde-dark: #5a9374; --c-bg: #f7f9fb; --c-bg-alt: #ffffff; --c-text: #1d2c3a; --c-text-soft: #56697b; --c-text-muted: #8696a6; --c-border: #e2e8ee; --c-border-soft: #eef2f6; --c-danger: #c4504e; --c-warning: #c89048; /* Etapas (tags) */ --c-conciliado-bg: #e8f3ec; --c-conciliado-fg: #2f6c4a; --c-naoconc-bg: #fdf1e3; --c-naoconc-fg: #8a5210; --c-suspenso-bg: #fbe8e7; --c-suspenso-fg: #8a3431; /* Estados de hover/focus */ --c-hover-bg: rgba(91,141,184,0.08); --c-focus-ring: rgba(91,141,184,0.2); --radius: 12px; --radius-sm: 8px; --shadow-sm: 0 1px 2px rgba(29,44,58,0.05), 0 2px 4px rgba(29,44,58,0.04); --shadow: 0 4px 12px rgba(29,44,58,0.06), 0 2px 4px rgba(29,44,58,0.04); --shadow-lg: 0 16px 40px rgba(29,44,58,0.12); --font-display: "Fraunces", Georgia, serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, sans-serif; } /* ========================================================================= Tema escuro — ativado por data-theme="dark" no ========================================================================= */ [data-theme="dark"] { --c-azul: #7eaed4; --c-azul-dark: #a3c4e0; --c-verde: #9bd0b1; --c-verde-dark: #b0dac0; --c-bg: #0f1620; --c-bg-alt: #1a232f; --c-text: #e6edf4; --c-text-soft: #a8b6c4; --c-text-muted: #6f8194; --c-border: #2b3845; --c-border-soft: #1f2933; --c-danger: #e07875; --c-warning: #e0a868; --c-conciliado-bg: #1f3a2c; --c-conciliado-fg: #9bd0b1; --c-naoconc-bg: #3a2a18; --c-naoconc-fg: #e0b06a; --c-suspenso-bg: #3a201f; --c-suspenso-fg: #e08e8b; --c-hover-bg: rgba(126,174,212,0.12); --c-focus-ring: rgba(126,174,212,0.3); --shadow-sm: 0 1px 2px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.2); --shadow: 0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.2); --shadow-lg: 0 16px 40px rgba(0,0,0,0.5); } /* Transição suave ao trocar tema */ html, body, .card, .app-header, .modal, .modal-backdrop, input, select, textarea, button { transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-body); font-size: 15px; color: var(--c-text); background: var(--c-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ========================================================================= Header ========================================================================= */ .app-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 2rem; background: var(--c-bg-alt); border-bottom: 1px solid var(--c-border); position: sticky; top: 0; z-index: 50; backdrop-filter: blur(8px); } .brand { display: flex; align-items: center; gap: 0.875rem; } .brand-logo { width: 44px; height: 44px; flex-shrink: 0; } .brand-logo svg { width: 100%; height: 100%; } .brand-text h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; margin: 0; letter-spacing: 0.04em; color: var(--c-azul-dark); } .brand-text p { margin: 0; font-size: 0.78rem; color: var(--c-verde-dark); font-weight: 500; letter-spacing: 0.02em; } .header-actions { display: flex; align-items: center; gap: 0.75rem; } .status-pill { display: inline-block; padding: 0.35rem 0.85rem; font-size: 0.75rem; font-weight: 500; border-radius: 999px; background: var(--c-bg); color: var(--c-text-soft); border: 1px solid var(--c-border); } /* ========================================================================= Layout ========================================================================= */ .container { max-width: 1100px; margin: 2rem auto; padding: 0 1.5rem 4rem; display: flex; flex-direction: column; gap: 1.5rem; } .card { background: var(--c-bg-alt); border-radius: var(--radius); border: 1px solid var(--c-border); padding: 1.75rem; box-shadow: var(--shadow-sm); } .section-title { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; margin: 0 0 1.25rem 0; color: var(--c-azul-dark); letter-spacing: -0.01em; } .section-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1.25rem; } .section-header .section-title { margin-bottom: 0; } .section-hint { font-size: 0.85rem; color: var(--c-text-soft); margin: -0.5rem 0 1rem 0; } /* ========================================================================= Forms ========================================================================= */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .grid-2 .full { grid-column: 1 / -1; } .field { display: flex; flex-direction: column; gap: 0.4rem; } .field label { font-size: 0.78rem; font-weight: 600; color: var(--c-text-soft); text-transform: uppercase; letter-spacing: 0.04em; } .req { color: var(--c-danger); } input[type="text"], input[type="date"], input[type="time"], input[type="number"], select, textarea { width: 100%; padding: 0.65rem 0.85rem; font-family: inherit; font-size: 0.95rem; color: var(--c-text); background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: border-color 120ms ease, box-shadow 120ms ease; color-scheme: light; /* afeta o ícone do calendário/relógio nativo */ } [data-theme="dark"] input[type="text"], [data-theme="dark"] input[type="date"], [data-theme="dark"] input[type="time"], [data-theme="dark"] input[type="number"], [data-theme="dark"] select, [data-theme="dark"] textarea { color-scheme: dark; /* o ícone do navegador fica claro no dark */ } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--c-azul); box-shadow: 0 0 0 3px rgba(91, 141, 184, 0.15); } input[readonly] { background: var(--c-bg); color: var(--c-text-soft); } textarea { resize: vertical; min-height: 80px; } .toggle-row { display: flex; align-items: center; gap: 0.6rem; font-size: 0.95rem; color: var(--c-text); cursor: pointer; padding: 0.6rem 0; } .toggle-row input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--c-azul); } .row-inline { display: flex; gap: 0.5rem; } .row-inline > input { flex: 1; } .hint { margin: 0.4rem 0 0; font-size: 0.78rem; color: var(--c-text-muted); } /* ========================================================================= Buttons ========================================================================= */ .btn { font-family: inherit; font-size: 0.9rem; font-weight: 600; letter-spacing: 0.01em; padding: 0.65rem 1.2rem; border-radius: var(--radius-sm); border: 1px solid transparent; cursor: pointer; transition: all 140ms ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--c-azul); color: white; } .btn-primary:hover:not(:disabled) { background: var(--c-azul-dark); } .btn-secondary { background: var(--c-verde); color: white; } .btn-secondary:hover:not(:disabled) { background: var(--c-verde-dark); } .btn-ghost { background: transparent; color: var(--c-text-soft); border-color: var(--c-border); } .btn-ghost:hover:not(:disabled) { background: var(--c-bg); color: var(--c-text); } .btn-icon { background: transparent; border: none; color: var(--c-text-muted); cursor: pointer; padding: 0.4rem; border-radius: 6px; transition: all 120ms ease; font-size: 1rem; } .btn-icon:hover { background: var(--c-bg); color: var(--c-danger); } /* ========================================================================= Tabela de medicamentos ========================================================================= */ .meds-wrapper { width: 100%; overflow-x: auto; border: 1px solid var(--c-border); border-radius: var(--radius-sm); } .meds-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .meds-table thead th { background: var(--c-bg); padding: 0.75rem 1rem; text-align: left; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-text-soft); border-bottom: 1px solid var(--c-border); } .meds-table tbody td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-border-soft); vertical-align: middle; } .meds-table tbody tr:last-child td { border-bottom: none; } .meds-table tbody tr:hover { background: var(--c-bg); } .meds-table .col-med { font-weight: 500; } .meds-table .col-actions { text-align: right; width: 60px; } .empty-row td { text-align: center; color: var(--c-text-muted); padding: 2rem 1rem !important; font-size: 0.9rem; } /* Tag de etapa */ .etapa-tag { display: inline-block; padding: 0.2rem 0.65rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.02em; } .etapa-CONCILIADO { background: var(--c-conciliado-bg); color: var(--c-conciliado-fg); } .etapa-NAO_CONCILIADO { background: var(--c-naoconc-bg); color: var(--c-naoconc-fg); } .etapa-SUSPENSO { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); } /* ========================================================================= Riscos (chips) ========================================================================= */ .risks-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0.6rem; } .risk-chip { display: flex; align-items: center; gap: 0.6rem; padding: 0.75rem 1rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius-sm); cursor: pointer; transition: all 140ms ease; user-select: none; } .risk-chip:hover { border-color: var(--c-azul); background: rgba(91,141,184,0.04); } .risk-chip input { accent-color: var(--c-azul); width: 18px; height: 18px; } .risk-chip:has(input:checked) { border-color: var(--c-azul); background: rgba(91,141,184,0.08); } .risk-chip-neutral:has(input:checked) { border-color: var(--c-verde); background: rgba(127,182,149,0.10); } /* ========================================================================= Ações inferiores ========================================================================= */ .actions { display: flex; justify-content: flex-end; gap: 0.75rem; flex-wrap: wrap; } /* ========================================================================= Laudo ========================================================================= */ .laudo-card { background: linear-gradient(180deg, var(--c-bg-alt) 0%, var(--c-bg) 100%); } .laudo-actions { display: flex; gap: 0.5rem; } .laudo-text { margin: 0; padding: 1.5rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); font-family: "SF Mono", "Cascadia Code", Consolas, "Courier New", monospace; font-size: 0.88rem; line-height: 1.6; color: var(--c-text); white-space: pre-wrap; overflow-x: auto; } /* ========================================================================= Modal ========================================================================= */ .modal-backdrop { position: fixed; inset: 0; background: rgba(29,44,58,0.5); backdrop-filter: blur(4px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; animation: fadeIn 180ms ease; } .modal { background: var(--c-bg-alt); border-radius: var(--radius); width: 100%; max-width: 600px; max-height: 90vh; display: flex; flex-direction: column; box-shadow: var(--shadow-lg); animation: slideUp 220ms ease; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); } .modal-header h3 { margin: 0; font-family: var(--font-display); font-size: 1.15rem; color: var(--c-azul-dark); } .modal-close { background: none; border: none; font-size: 1.5rem; color: var(--c-text-muted); cursor: pointer; width: 32px; height: 32px; border-radius: 6px; } .modal-close:hover { background: var(--c-bg); color: var(--c-text); } .modal-body { padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; } .modal-divider { border: none; border-top: 1px solid var(--c-border); margin: 0.5rem 0; } .modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); background: var(--c-bg); border-radius: 0 0 var(--radius) var(--radius); } /* Resultados de busca */ .search-results { margin-top: 0.4rem; max-height: 220px; overflow-y: auto; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); display: none; } .search-results.visible { display: block; } .search-result-item { padding: 0.6rem 0.85rem; cursor: pointer; font-size: 0.92rem; border-bottom: 1px solid var(--c-border-soft); display: flex; justify-content: space-between; align-items: center; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--c-bg); } .search-result-item .badge { font-size: 0.7rem; padding: 0.1rem 0.5rem; border-radius: 999px; background: var(--c-conciliado-bg); color: var(--c-conciliado-fg); font-weight: 600; } .search-result-item .badge-nao-padr { background: var(--c-naoconc-bg); color: var(--c-naoconc-fg); } .search-result-item .name strong { background: rgba(127,182,149,0.30); padding: 0 1px; border-radius: 2px; font-weight: 600; } .divider { display: flex; align-items: center; gap: 0.75rem; color: var(--c-text-muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.1em; margin: 0.25rem 0; } .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: var(--c-border); } /* ========================================================================= Painel de alertas de interação medicamentosa ========================================================================= */ .alerts-panel { margin-bottom: 1.25rem; display: flex; flex-direction: column; gap: 0.55rem; } .alert-card { display: grid; grid-template-columns: auto 1fr; gap: 0.85rem; padding: 0.9rem 1.1rem; border-radius: var(--radius-sm); border-left: 4px solid var(--c-azul); background: rgba(91,141,184,0.06); align-items: start; } .alert-card.sev-GRAVE { border-left-color: var(--c-danger); background: rgba(196,80,78,0.07); } .alert-card.sev-MODERADA { border-left-color: var(--c-warning); background: rgba(200,144,72,0.08); } .alert-card.sev-LEVE { border-left-color: var(--c-azul); background: rgba(91,141,184,0.06); } .alert-icon { font-size: 1.3rem; line-height: 1.4; } .alert-body { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; } .alert-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; } .alert-sev { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; padding: 0.15rem 0.55rem; border-radius: 999px; text-transform: uppercase; } .alert-sev.GRAVE { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); } .alert-sev.MODERADA { background: var(--c-naoconc-bg); color: var(--c-naoconc-fg); } .alert-sev.LEVE { background: var(--c-conciliado-bg); color: var(--c-conciliado-fg); } .alert-meds { font-weight: 600; font-size: 0.92rem; color: var(--c-text); } .alert-desc { font-size: 0.88rem; color: var(--c-text-soft); line-height: 1.45; } .alert-conduta { font-size: 0.88rem; color: var(--c-text); line-height: 1.45; margin-top: 0.15rem; } .alert-conduta strong { color: var(--c-azul-dark); } /* ========================================================================= Botão de link (texto) ========================================================================= */ .btn-link { background: none; border: none; color: var(--c-azul); font-family: inherit; font-size: 0.82rem; font-weight: 600; padding: 0.3rem 0; cursor: pointer; text-align: left; margin-top: 0.25rem; align-self: flex-start; } .btn-link:hover { color: var(--c-azul-dark); text-decoration: underline; } /* ========================================================================= Header — navegação ========================================================================= */ .header-nav { display: flex; gap: 0.4rem; align-items: center; } .nav-link { display: flex; align-items: center; gap: 0.4rem; padding: 0.45rem 0.8rem; font-size: 0.85rem; font-weight: 500; color: var(--c-text-soft); text-decoration: none; border-radius: var(--radius-sm); border: 1px solid transparent; transition: all 0.15s ease; } .nav-link:hover { background: var(--c-hover-bg); color: var(--c-azul-dark); border-color: var(--c-border); } .nav-link.active { background: var(--c-hover-bg); color: var(--c-azul-dark); border-color: var(--c-azul); } /* ========================================================================= Histórico de Conciliações ========================================================================= */ .historico-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; } .historico-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 1rem 1.15rem; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-sm); transition: border-color 0.15s ease, transform 0.1s ease; } .historico-item:hover { border-color: var(--c-azul); transform: translateY(-1px); } .historico-meta { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; } .historico-data { font-size: 0.95rem; font-weight: 600; color: var(--c-text); } .historico-motivo { font-size: 0.88rem; color: var(--c-text-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .historico-badges { display: flex; gap: 0.4rem; flex-wrap: wrap; } .hist-badge { font-size: 0.72rem; padding: 0.2rem 0.55rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px; color: var(--c-text-soft); } .historico-acoes { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; } .btn-danger { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); border: 1px solid var(--c-danger); padding: 0.55rem 1rem; font-size: 0.88rem; font-weight: 500; border-radius: var(--radius-sm); cursor: pointer; transition: all 0.15s ease; font-family: inherit; } .btn-danger:hover { background: var(--c-danger); color: white; } .btn-danger:disabled { opacity: 0.6; cursor: not-allowed; } .btn-icon-danger { background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-sm); width: 38px; height: 38px; cursor: pointer; font-size: 1rem; color: var(--c-text-soft); transition: all 0.15s ease; flex-shrink: 0; } .btn-icon-danger:hover { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); border-color: var(--c-danger); } /* ========================================================================= Interações cadastradas (página separada) ========================================================================= */ .interacoes-list { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 1rem; } .interacao-item { padding: 0.85rem 1rem; border-radius: var(--radius-sm); border-left: 3px solid var(--c-azul); background: rgba(91,141,184,0.06); } .interacao-item.sev-GRAVE { border-left-color: var(--c-danger); background: rgba(196,80,78,0.07); } .interacao-item.sev-MODERADA { border-left-color: var(--c-warning); background: rgba(200,144,72,0.08); } .interacao-item.sev-LEVE { border-left-color: var(--c-azul); background: rgba(91,141,184,0.06); } .interacao-head { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; margin-bottom: 0.4rem; } .interacao-pares { font-weight: 600; font-size: 0.95rem; color: var(--c-text); flex: 1; min-width: 200px; } .interacao-custom-tag, .interacao-curada-tag { font-size: 0.68rem; font-weight: 700; padding: 0.15rem 0.55rem; border-radius: 999px; letter-spacing: 0.04em; text-transform: uppercase; } .interacao-custom-tag { background: var(--c-conciliado-bg); color: var(--c-conciliado-fg); } .interacao-curada-tag { background: var(--c-bg); color: var(--c-text-muted); border: 1px solid var(--c-border); } .btn-remover { background: transparent; border: 1px solid var(--c-border); border-radius: var(--radius-sm); width: 28px; height: 28px; cursor: pointer; font-size: 0.85rem; color: var(--c-text-soft); transition: all 0.15s ease; } .btn-remover:hover { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); border-color: var(--c-danger); } .interacao-body { display: flex; flex-direction: column; gap: 0.25rem; } .interacao-desc { font-size: 0.88rem; color: var(--c-text-soft); line-height: 1.45; } .interacao-conduta { font-size: 0.88rem; color: var(--c-text); line-height: 1.45; } .interacao-conduta strong { color: var(--c-azul-dark); } @media (max-width: 720px) { .historico-item { flex-direction: column; align-items: stretch; } .historico-item .btn { width: 100%; } .interacao-pares { min-width: 0; width: 100%; } } /* ========================================================================= Página de Login ========================================================================= */ .login-body { background: var(--c-bg); min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .login-container { width: 100%; max-width: 420px; padding: 2rem 1.25rem; display: flex; flex-direction: column; align-items: center; gap: 1.5rem; } .login-card { width: 100%; background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 2.5rem 2rem; position: relative; } .login-brand { text-align: center; margin-bottom: 2rem; } .login-brand h1 { font-family: var(--font-display); font-weight: 600; font-size: 1.85rem; margin: 0; letter-spacing: 0.04em; color: var(--c-azul-dark); } .login-brand p { margin: 0.3rem 0 0; font-size: 0.85rem; color: var(--c-verde-dark); font-weight: 500; } .login-form { display: flex; flex-direction: column; gap: 1rem; } .login-btn { width: 100%; padding: 0.8rem; font-size: 1rem; margin-top: 0.5rem; } .login-btn:disabled { opacity: 0.6; cursor: not-allowed; } .login-error { background: var(--c-suspenso-bg); color: var(--c-suspenso-fg); padding: 0.7rem 0.9rem; border-radius: var(--radius-sm); font-size: 0.85rem; border: 1px solid var(--c-danger); } .login-foot { display: flex; justify-content: center; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border-soft); } .login-rodape { font-size: 0.75rem; color: var(--c-text-muted); letter-spacing: 0.05em; text-transform: uppercase; text-align: center; } @media (max-width: 480px) { .login-card { padding: 2rem 1.5rem; } .login-brand h1 { font-size: 1.55rem; } } /* ========================================================================= Botão de toggle de tema (sol/lua) ========================================================================= */ .theme-toggle { background: transparent; border: 1px solid var(--c-border); border-radius: 999px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--c-text-soft); padding: 0; position: relative; transition: all 0.2s ease; flex-shrink: 0; } .theme-toggle:hover { background: var(--c-hover-bg); color: var(--c-azul-dark); border-color: var(--c-azul); } .theme-toggle svg { width: 18px; height: 18px; position: absolute; transition: opacity 0.25s ease, transform 0.3s ease; } .theme-toggle .icon-sun { opacity: 0; transform: rotate(-90deg) scale(0.6); } .theme-toggle .icon-moon { opacity: 1; transform: rotate(0) scale(1); } [data-theme="dark"] .theme-toggle .icon-sun { opacity: 1; transform: rotate(0) scale(1); } [data-theme="dark"] .theme-toggle .icon-moon { opacity: 0; transform: rotate(90deg) scale(0.6); } /* ========================================================================= Mobile — extras (em adição ao @media existente abaixo) ========================================================================= */ .toast { position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%); padding: 0.75rem 1.4rem; background: var(--c-text); color: white; border-radius: var(--radius-sm); font-size: 0.9rem; font-weight: 500; box-shadow: var(--shadow-lg); z-index: 200; animation: slideUp 220ms ease; } .toast.success { background: var(--c-verde-dark); } .toast.error { background: var(--c-danger); } /* ========================================================================= Footer ========================================================================= */ .app-footer { text-align: center; padding: 2rem 1rem; color: var(--c-text-muted); font-size: 0.78rem; letter-spacing: 0.18em; font-weight: 500; } /* ========================================================================= Animações ========================================================================= */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; transform: translate(-50%, 16px); } to { opacity: 1; transform: translate(-50%, 0); } } /* Específico do modal (override do translateX) */ .modal { animation: modalSlideUp 220ms ease; } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ========================================================================= Utilities ========================================================================= */ .hidden { display: none !important; } /* ========================================================================= Responsivo ========================================================================= */ @media (max-width: 720px) { .app-header { padding: 0.875rem 1rem; gap: 0.5rem; } .brand { gap: 0.625rem; } .brand-logo { width: 36px; height: 36px; } .brand-text h1 { font-size: 1.15rem; } .brand-text p { font-size: 0.68rem; } .header-actions { gap: 0.5rem; } .status-pill { font-size: 0.7rem; padding: 0.3rem 0.6rem; } .theme-toggle { width: 36px; height: 36px; } /* Nav: esconde labels, deixa só ícones */ .nav-link span { display: none; } .nav-link { padding: 0.4rem 0.5rem; width: 36px; height: 36px; justify-content: center; } .header-nav { gap: 0.25rem; } .container { padding: 0 1rem 3rem; margin-top: 1rem; } .card { padding: 1.25rem 1rem; } .section-title { font-size: 1rem; } .section-header { flex-direction: column; align-items: stretch; gap: 0.75rem; } .section-header .btn { width: 100%; } .grid-2 { grid-template-columns: 1fr; gap: 0.75rem; } /* Riscos: melhor uso do espaço no mobile */ .risks-grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; } .risk-chip { padding: 0.65rem 0.8rem; font-size: 0.85rem; } /* Alertas: reduzir padding */ .alert-card { padding: 0.75rem 0.85rem; gap: 0.65rem; } .alert-icon { font-size: 1.1rem; } .alert-meds { font-size: 0.85rem; } .alert-desc, .alert-conduta { font-size: 0.82rem; } /* Modal: ocupa quase toda a tela no celular */ .modal-backdrop { padding: 0.5rem; } .modal { max-height: 92vh; border-radius: var(--radius-sm); } .modal-header { padding: 0.875rem 1rem; } .modal-body { padding: 1rem; } .modal-footer { padding: 0.75rem 1rem; flex-direction: column-reverse; gap: 0.5rem; } .modal-footer .btn { width: 100%; } .row-inline { flex-direction: column; align-items: stretch; gap: 0.5rem; } .row-inline .btn { width: 100%; } .actions { flex-direction: column-reverse; } .actions .btn { width: 100%; } /* Inputs com font-size >= 16px pra evitar zoom no iOS Safari */ input, select, textarea { font-size: 16px; } /* Laudo: scroll horizontal melhor */ .laudo-text { padding: 1rem; font-size: 0.82rem; } .laudo-actions { flex-wrap: wrap; gap: 0.4rem; } .laudo-actions .btn { font-size: 0.78rem; padding: 0.4rem 0.75rem; } /* Tabela "responsiva-card" no celular */ .meds-table thead { display: none; } .meds-table tbody, .meds-table tr, .meds-table td { display: block; width: 100%; } .meds-table tr { border: 1px solid var(--c-border); border-radius: var(--radius-sm); margin-bottom: 0.6rem; padding: 0.5rem; } .meds-table tbody tr:hover { background: transparent; } .meds-table td { border: none; padding: 0.4rem 0.5rem; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .meds-table td::before { content: attr(data-label); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; color: var(--c-text-muted); letter-spacing: 0.04em; } .meds-table td.col-actions { justify-content: flex-end; } .meds-table td.col-actions::before { display: none; } .empty-row td { display: block; } .empty-row td::before { display: none; } } /* Telas muito pequenas (iPhone SE) */ @media (max-width: 380px) { .app-header { padding: 0.75rem 0.75rem; } .brand-text h1 { font-size: 1.05rem; } .container { padding: 0 0.75rem 3rem; } .card { padding: 1rem 0.875rem; } .risks-grid { grid-template-columns: 1fr; } .footer-marquee, .app-footer p { font-size: 0.75rem; } }