:root { /* Marca MedicX (logo novo, 06/2026): azul elétrico + cyan, vibe dark/tech/IA. Os nomes --pink-* foram MANTIDOS pra diff mínima; só os VALORES mudaram pro azul/cyan. Reverter o tema todo = git revert deste commit. */ --pink-primary: #2563eb; /* azul (o "X" do logo) */ --pink-light: #dbeafe; --pink-lighter: #eff6ff; --pink-dark: #1d4ed8; --pink-soft: #22d3ee; /* cyan (o brilho/estrela) */ --brand-gradient: linear-gradient(135deg, #2563eb 0%, #22d3ee 100%); /* azul→cyan */ --brand-dark: #0a0f1e; /* fundo navy-preto das telas de marca */ --brand-panel: #0f1629; --gray-light: #f8f9fa; --gray-border: #e5e7eb; --text-dark: #1f2937; --text-muted: #6b7280; --white: #ffffff; --sidebar-width: 260px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: 'Inter', 'Segoe UI', sans-serif; background-color: var(--gray-light); color: var(--text-dark); min-height: 100vh; } /* ==================== AUTH PAGES (dark premium — visual do logo) ==================== */ .auth-wrapper { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; background: radial-gradient(1100px 520px at 50% -8%, #16213e 0%, rgba(10,15,30,0) 60%), var(--brand-dark); } .auth-card { background: var(--brand-panel); border-radius: 18px; padding: 40px; width: 100%; max-width: 440px; box-shadow: 0 24px 70px rgba(0,0,0,.55); border: 1px solid rgba(255,255,255,.08); color: #eef2f7; } .auth-logo { text-align: center; margin-bottom: 32px; } .auth-logo h1 { font-size: 30px; font-weight: 700; color: #eef2f7; letter-spacing: -0.5px; } .auth-logo p { color: #8a94a8; font-size: 14px; margin-top: 4px; } /* Form em fundo escuro */ .auth-wrapper .form-label { color: #c7cfdd; font-weight: 500; } .auth-wrapper .form-control { background: #0b1222; border: 1px solid rgba(255,255,255,.12); color: #eef2f7; } .auth-wrapper .form-control::placeholder { color: #5c6779; } .auth-wrapper .form-control:focus { background: #0b1222; border-color: var(--pink-soft); box-shadow: 0 0 0 4px rgba(34,211,238,.16); color: #eef2f7; } .auth-wrapper .text-muted { color: #8a94a8 !important; } /* Botão principal com o gradiente da marca */ .auth-wrapper .btn-pink { background: var(--brand-gradient); border: none; } .auth-wrapper .btn-pink:hover { filter: brightness(1.08); } /* ==================== SIDEBAR ==================== */ .sidebar { position: fixed; top: 0; left: 0; width: var(--sidebar-width); height: 100vh; background: var(--white); border-right: 1px solid var(--gray-border); padding: 0; overflow-y: auto; z-index: 1000; transition: transform 0.3s ease; } .sidebar-brand { padding: 20px 24px; border-bottom: 1px solid var(--gray-border); display: flex; align-items: center; gap: 12px; } .sidebar-brand h2 { font-size: 22px; font-weight: 700; color: var(--pink-primary); letter-spacing: -0.5px; } .sidebar-brand .brand-icon { width: 36px; height: 36px; background: linear-gradient(135deg, var(--pink-primary), var(--pink-soft)); border-radius: 10px; display: flex; align-items: center; justify-content: center; color: white; font-size: 18px; } .sidebar-nav { padding: 16px 12px; } .sidebar-section { margin-bottom: 8px; } /* Gating do menu por papel SEM flash: o recebe data-role (do cache, no , antes de pintar) e o CSS já esconde os itens/seções que o papel não acessa. O JS no sidebar confirma pela API e atualiza o cache. owner vê tudo. */ html[data-role="secretary"] .sidebar-link[data-roles]:not([data-roles*="secretary"]), html[data-role="secretary"] .sidebar-section[data-roles]:not([data-roles*="secretary"]) { display: none !important; } html[data-role="doctor"] .sidebar-link[data-roles]:not([data-roles*="doctor"]), html[data-role="doctor"] .sidebar-section[data-roles]:not([data-roles*="doctor"]) { display: none !important; } .sidebar-section-title { font-size: 11px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); padding: 8px 12px 4px; letter-spacing: 0.5px; } .sidebar-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--text-dark); text-decoration: none; font-size: 14px; font-weight: 500; transition: all 0.15s ease; } .sidebar-link:hover { background: var(--pink-lighter); color: var(--pink-primary); } .sidebar-link.active { background: var(--pink-lighter); color: var(--pink-primary); font-weight: 600; } .sidebar-link i { width: 20px; text-align: center; font-size: 16px; } /* ==================== MAIN CONTENT ==================== */ .main-content { margin-left: var(--sidebar-width); min-height: 100vh; } .topbar { background: var(--white); border-bottom: 1px solid var(--gray-border); padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .topbar-title { font-size: 20px; font-weight: 600; color: var(--text-dark); } .topbar-actions { display: flex; align-items: center; gap: 16px; } .topbar-user { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-muted); } .topbar-avatar { width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--pink-primary), var(--pink-soft)); display: flex; align-items: center; justify-content: center; color: white; font-weight: 600; font-size: 14px; } .page-content { padding: 32px; } /* ==================== CARDS ==================== */ .stat-card { background: var(--white); border-radius: 12px; padding: 24px; border: 1px solid var(--gray-border); transition: box-shadow 0.2s ease; } .stat-card:hover { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); } .stat-card .stat-icon { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; } .stat-card .stat-icon.pink { background: var(--pink-lighter); color: var(--pink-primary); } .stat-card .stat-icon.green { background: #ecfdf5; color: #059669; } .stat-card .stat-icon.blue { background: #eff6ff; color: #2563eb; } .stat-card .stat-icon.orange { background: #fff7ed; color: #ea580c; } .stat-card .stat-value { font-size: 28px; font-weight: 700; color: var(--text-dark); } .stat-card .stat-label { font-size: 13px; color: var(--text-muted); margin-top: 2px; } /* ==================== TABLE ==================== */ .content-card { background: var(--white); border-radius: 12px; border: 1px solid var(--gray-border); overflow: hidden; } .content-card-header { padding: 20px 24px; border-bottom: 1px solid var(--gray-border); display: flex; align-items: center; justify-content: space-between; } .content-card-header h5 { font-size: 16px; font-weight: 600; } .content-card-body { padding: 24px; } .table { margin-bottom: 0; } .table th { font-size: 12px; font-weight: 600; text-transform: uppercase; color: var(--text-muted); letter-spacing: 0.5px; border-bottom: 1px solid var(--gray-border); padding: 12px 16px; } .table td { padding: 14px 16px; vertical-align: middle; font-size: 14px; border-bottom: 1px solid var(--gray-border); } .table tr:last-child td { border-bottom: none; } /* ==================== BUTTONS ==================== */ .btn-pink { background: var(--pink-primary); color: white; border: none; border-radius: 8px; padding: 10px 20px; font-weight: 500; font-size: 14px; transition: all 0.15s ease; } .btn-pink:hover { background: var(--pink-dark); color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(124,58,237, 0.3); } .btn-pink-outline { background: transparent; color: var(--pink-primary); border: 1px solid var(--pink-primary); border-radius: 8px; padding: 10px 20px; font-weight: 500; font-size: 14px; transition: all 0.15s ease; } .btn-pink-outline:hover { background: var(--pink-lighter); color: var(--pink-dark); } .btn-sm { padding: 6px 12px; font-size: 13px; } /* ==================== FORMS ==================== */ .form-control:focus, .form-select:focus { border-color: var(--pink-soft); box-shadow: 0 0 0 3px rgba(124,58,237, 0.1); } .form-label { font-size: 13px; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; } /* ==================== BADGES ==================== */ .badge-status { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; } .badge-agendado { background: #dbeafe; color: #1d4ed8; } .badge-confirmado { background: #d1fae5; color: #065f46; } .badge-aguardando { background: #fef3c7; color: #92400e; font-weight: 700; } .badge-em_atendimento { background: #ede9fe; color: #5b21b6; font-weight: 700; } .badge-realizado { background: #ecfdf5; color: #059669; } .badge-nao_compareceu { background: #ffedd5; color: #9a3412; font-weight: 700; } .badge-cancelado { background: #fee2e2; color: #991b1b; } .badge-pendente { background: #fef3c7; color: #92400e; } .badge-pago { background: #d1fae5; color: #065f46; } /* ==================== WHATSAPP ==================== */ .whatsapp-qr { text-align: center; padding: 40px; } .whatsapp-qr img { max-width: 300px; border-radius: 12px; border: 2px solid var(--gray-border); } .whatsapp-status { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border-radius: 20px; font-size: 14px; font-weight: 500; } .whatsapp-status.connected { background: #d1fae5; color: #065f46; } .whatsapp-status.disconnected { background: #fee2e2; color: #991b1b; } /* ==================== RESPONSIVE ==================== */ .sidebar-toggle { display: none; background: none; border: none; font-size: 24px; color: var(--text-dark); cursor: pointer; } @media (max-width: 768px) { .sidebar { transform: translateX(-100%); } .sidebar.open { transform: translateX(0); } .main-content { margin-left: 0; } .sidebar-toggle { display: block; } .page-content { padding: 12px; } .topbar { padding: 8px 12px; } .topbar-title { font-size: 16px; } .topbar-user span { display: none; } .topbar-actions { gap: 8px; } .topbar-actions .btn { font-size: 12px; padding: 4px 10px; } /* Auth pages - login/register centralizado mais acima no mobile */ .auth-wrapper { align-items: flex-start; padding: 60px 16px 40px; } .auth-card { padding: 28px 24px; } /* Stat cards menores no mobile */ .stat-card { padding: 14px; } .stat-card .stat-icon { width: 36px; height: 36px; font-size: 16px; margin-bottom: 8px; } .stat-card .stat-value { font-size: 20px; } .stat-card .stat-label { font-size: 11px; } /* Content cards mais compactos */ .content-card-header { padding: 14px 16px; } .content-card-header h5 { font-size: 14px; } .content-card-body { padding: 16px; } /* Tabelas mais compactas */ .table th { font-size: 10px; padding: 8px 10px; } .table td { font-size: 12px; padding: 10px; } /* Botoes de acoes rapidas mais compactos */ .btn-pink-outline { padding: 8px 14px; font-size: 13px; } /* Rows com menos gap */ .row.g-4 { --bs-gutter-y: 0.75rem; --bs-gutter-x: 0.75rem; } } /* ==================== UTILITIES ==================== */ .text-pink { color: var(--pink-primary) !important; } .bg-pink-light { background: var(--pink-lighter) !important; } .border-pink { border-color: var(--pink-primary) !important; } .empty-state { text-align: center; padding: 60px 20px; color: var(--text-muted); } .empty-state i { font-size: 48px; color: var(--pink-light); margin-bottom: 16px; } .empty-state h5 { font-weight: 600; margin-bottom: 8px; color: var(--text-dark); } /* ==================== PHOTO GRID ==================== */ .photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; } .photo-card { border-radius: 10px; overflow: hidden; border: 1px solid var(--gray-border); transition: transform 0.2s; } .photo-card:hover { transform: scale(1.02); } .photo-card img { width: 100%; height: 200px; object-fit: cover; } .photo-card .photo-info { padding: 10px; font-size: 13px; } .photo-card .photo-type { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; } .photo-type.before { background: #fef3c7; color: #92400e; } .photo-type.after { background: #d1fae5; color: #065f46; } /* ==================== TEMA AZUL ==================== */ [data-theme="blue"] { --pink-primary: #2563eb; --pink-light: #dbeafe; --pink-lighter: #eff6ff; --pink-dark: #1d4ed8; --pink-soft: #60a5fa; } [data-theme="blue"] .btn-pink:hover { box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } [data-theme="blue"] .auth-card { box-shadow: 0 4px 24px rgba(37, 99, 235, 0.08); } /* ==================== TEMA ESCURO (premium — identidade do logo) ==================== */ [data-theme="dark"] { --pink-primary: #3b82f6; /* azul vivo — acentos/links/marca no escuro */ --pink-light: #16223e; --pink-lighter: #14203a; /* fundo de hover/ativo do menu (azul bem escuro) */ --pink-dark: #2563eb; --pink-soft: #22d3ee; /* cyan — gradiente da marca (brilho do logo) */ --gray-light: #0a0f1e; /* fundo da página = navy-preto do logo */ --gray-border: #1e2940; --text-dark: #eef2f7; /* texto claro */ --text-muted: #8a94a8; --white: #0f1629; /* sidebar / topbar / cards = painel escuro */ } [data-theme="dark"] .btn-pink:hover { box-shadow: 0 4px 14px rgba(34, 211, 238, 0.28); } [data-theme="dark"] .auth-wrapper { background: radial-gradient(1100px 520px at 50% -8%, #16213e 0%, rgba(10,15,30,0) 60%), var(--brand-dark); } [data-theme="dark"] .auth-card { box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3); border-color: #1e2940; } [data-theme="dark"] .form-control, [data-theme="dark"] .form-select { background-color: #0b1222; border-color: #1e2940; color: #eef2f7; } [data-theme="dark"] .form-control:focus, [data-theme="dark"] .form-select:focus { background-color: #0b1222; border-color: #22d3ee; color: #eef2f7; box-shadow: 0 0 0 4px rgba(34, 211, 238, 0.16); } [data-theme="dark"] .form-control::placeholder { color: #6b7280; } [data-theme="dark"] .modal-content { background-color: #0f1629; border-color: #1e2940; } [data-theme="dark"] .modal-header, [data-theme="dark"] .modal-footer { border-color: #1e2940; } [data-theme="dark"] .btn-close { filter: invert(1); } [data-theme="dark"] .btn-secondary { background-color: #1e2940; border-color: #4b5563; color: #f9fafb; } [data-theme="dark"] .btn-outline-secondary { border-color: #4b5563; color: #9ca3af; } [data-theme="dark"] .btn-outline-secondary:hover { background-color: #1e2940; color: #f9fafb; } [data-theme="dark"] .btn-outline-danger { border-color: #991b1b; color: #f87171; } [data-theme="dark"] .dropdown-menu { background-color: #0f1629; border-color: #1e2940; } [data-theme="dark"] .dropdown-item { color: #f9fafb; } [data-theme="dark"] .dropdown-item:hover { background-color: #1e2940; } [data-theme="dark"] .table { color: #f9fafb; } [data-theme="dark"] .badge.bg-light { background-color: #1e2940 !important; color: #f9fafb !important; } /* Calendario no tema escuro */ [data-theme="dark"] .calendar-cell { background: #0f1629; border-color: #1e2940; } [data-theme="dark"] .calendar-cell:hover { background: #16223e; } [data-theme="dark"] .calendar-cell.today { background: #14203a; border-color: #3b82f6; } [data-theme="dark"] .calendar-cell.today .calendar-cell-day { background: #3b82f6; color: #fff; } [data-theme="dark"] .calendar-cell.selected { background: #14203a; border-color: #3b82f6; } [data-theme="dark"] .calendar-cell.other-month { background: #0a0f1e; opacity: 0.4; } [data-theme="dark"] .calendar-cell-day { color: #f9fafb; } [data-theme="dark"] .calendar-day-name { color: #9ca3af; } [data-theme="dark"] .calendar-apt.status-agendado { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .calendar-apt.status-confirmado { background: #14332a; color: #6ee7b7; } [data-theme="dark"] .calendar-apt.status-realizado { background: #1a3329; color: #34d399; } [data-theme="dark"] .calendar-apt.status-cancelado { background: #3b1c1c; color: #fca5a5; } [data-theme="dark"] .calendar-apt-more { color: #60a5fa; } /* Badges no tema escuro */ [data-theme="dark"] .badge-agendado { background: #1e3a5f; color: #93c5fd; } [data-theme="dark"] .badge-confirmado { background: #14332a; color: #6ee7b7; } [data-theme="dark"] .badge-realizado { background: #1a3329; color: #34d399; } [data-theme="dark"] .badge-cancelado { background: #3b1c1c; color: #fca5a5; } [data-theme="dark"] .badge-pendente { background: #3b2f1c; color: #fcd34d; } [data-theme="dark"] .badge-pago { background: #14332a; color: #6ee7b7; } /* Cards e tabelas com contraste/estrutura no escuro (senão ficam "chapados") */ [data-theme="dark"] .content-card { border-color: rgba(255,255,255,.08); box-shadow: 0 12px 34px rgba(0,0,0,.38); } [data-theme="dark"] .content-card-header { border-bottom-color: rgba(255,255,255,.08); background: rgba(255,255,255,.015); } [data-theme="dark"] .table th { border-color: rgba(255,255,255,.10); color: #9fb0c7; background: #0c1322; } [data-theme="dark"] .table td { border-color: rgba(255,255,255,.06); } [data-theme="dark"] .table tbody tr:nth-child(even) td { background: rgba(255,255,255,.02); } [data-theme="dark"] .table tbody tr:hover td { background: rgba(59,130,246,.10); } /* Empty state no tema escuro */ [data-theme="dark"] .empty-state i { color: #4b5563; } /* Form check/switch no tema escuro */ [data-theme="dark"] .form-check-input { background-color: #1e2940; border-color: #4b5563; } [data-theme="dark"] .form-check-input:checked { background-color: #3b82f6; border-color: #3b82f6; } /* Stat cards no dashboard escuro */ [data-theme="dark"] .stat-card .stat-icon.pink { background: #14203a; color: #60a5fa; } [data-theme="dark"] .stat-card .stat-icon.green { background: #14332a; color: #6ee7b7; } [data-theme="dark"] .stat-card .stat-icon.blue { background: #1e3a5f; color: #93c5fd; } /* ===== VARREDURA tema escuro: utilitários Bootstrap + componentes com cor clara FIXA (o app foi feito claro; isto escurece bg-white/cards/borders/tabelas/alerts de uma vez) ===== */ [data-theme="dark"] .bg-white { background-color: #0f1629 !important; } [data-theme="dark"] .bg-light { background-color: #0c1322 !important; } [data-theme="dark"] .card { background-color: #0f1629; border-color: rgba(255,255,255,.08); color: #eef2f7; } [data-theme="dark"] .border, [data-theme="dark"] .border-top, [data-theme="dark"] .border-bottom, [data-theme="dark"] .border-start, [data-theme="dark"] .border-end { border-color: rgba(255,255,255,.08) !important; } [data-theme="dark"] .text-dark { color: #eef2f7 !important; } /* tabelas: zera o fundo branco do Bootstrap (era isso que deixava as linhas de Pacientes brancas) */ [data-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: #eef2f7; } [data-theme="dark"] .input-group-text { background-color: #0b1222; border-color: #1e2940; color: #8a94a8; } [data-theme="dark"] .alert-success { background-color: #0e2a1e; border-color: #14532d; color: #86efac; } [data-theme="dark"] .alert-danger { background-color: #2a1115; border-color: #7f1d1d; color: #fca5a5; } [data-theme="dark"] .alert-warning { background-color: #2a210a; border-color: #78350f; color: #fcd34d; } /* badges de status com fundo claro fixo */ [data-theme="dark"] .badge-aguardando, [data-theme="dark"] .badge-pendente { background: #2a210a !important; color: #fcd34d !important; } [data-theme="dark"] .badge-realizado { background: #0e2a1e !important; color: #6ee7b7 !important; } [data-theme="dark"] .stat-card .stat-icon.orange { background: #3b2f1c; color: #fcd34d; } /* ==================== SELETOR DE TEMA ==================== */ .theme-switcher { display: flex; align-items: center; gap: 6px; } .theme-dot { width: 22px; height: 22px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: all 0.2s ease; } .theme-dot:hover { transform: scale(1.15); } .theme-dot.active { border-color: var(--text-dark); box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--text-dark); } .theme-dot.theme-pink { background: #7c3aed; } .theme-dot.theme-blue { background: #2563eb; } .theme-dot.theme-dark { background: #0f1629; border: 2px solid #22d3ee; } /* AI tier cards (perfil de IA na tela de assinatura) */ .ai-tier-card { border: 2px solid #e5e7eb; border-radius: 10px; padding: 16px; height: 100%; display: flex; flex-direction: column; background: #fff; transition: border-color .15s ease, box-shadow .15s ease; } .ai-tier-card.ai-tier-active { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(124,58,237,.12); } .ai-tier-icon { width: 40px; height: 40px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; } .ai-tier-cost { font-size: 1.4rem; font-weight: 700; color: #111827; } .agenda-link-savings { border: 1px solid #bbf7d0; border-left: 4px solid #16a34a; border-radius: 10px; padding: 16px; background: #f0fdf4; } .agenda-link-new { font-size: 1.4rem; font-weight: 700; color: #15803d; } .agenda-link-badge { display: inline-block; font-size: .8rem; font-weight: 600; color: #15803d; background: #dcfce7; border-radius: 999px; padding: 2px 10px; }