/* ===================================================================== DENTAL SUPREME — Redesign Moderno Arquivo: custom-redesign.css Instrução: adicionar no do index APÓS todos os outros CSS ===================================================================== */ /* ----------------------------------------------------------------------- VARIÁVEIS / PALETA DE CORES ---------------------------------------------------------------------- */ :root { --ds-primary: #2563eb; /* Azul principal */ --ds-primary-dark: #1d4ed8; --ds-primary-light: #dbeafe; --ds-teal: #0891b2; /* Teal dental */ --ds-teal-light: #e0f2fe; --ds-danger: #e53e3e; --ds-success: #16a34a; --ds-warning: #d97706; --ds-sidebar-bg: #1a2236; /* Azul-navy sidebar */ --ds-sidebar-hover: #243047; --ds-sidebar-active:#2563eb; --ds-sidebar-text: #c8d3e0; --ds-sidebar-width: 260px; --ds-header-bg: #ffffff; --ds-header-h: 56px; --ds-body-bg: #f0f2f7; --ds-card-bg: #ffffff; --ds-card-shadow: 0 2px 12px rgba(0,0,0,.07); --ds-border: #e2e8f0; --ds-text: #1e293b; --ds-text-muted: #64748b; --ds-radius: 8px; --ds-font: 'Roboto', 'Open Sans', sans-serif; } /* ----------------------------------------------------------------------- RESET GERAL & FONT ---------------------------------------------------------------------- */ body.page-md { background: var(--ds-body-bg) !important; font-family: var(--ds-font) !important; color: var(--ds-text) !important; } /* ----------------------------------------------------------------------- BUG FIX #1 — Borda laranja/rosa ao redor do conteúdo ---------------------------------------------------------------------- */ .page-content-wrapper, .page-content, [ui-view], .fade-in-up { outline: none !important; border: none !important; box-shadow: none !important; } /* Remove o box vermelho que aparece em certas páginas */ .page-container { outline: none !important; } /* ----------------------------------------------------------------------- HEADER — Novo visual limpo e moderno ---------------------------------------------------------------------- */ .page-header.navbar { background: var(--ds-header-bg) !important; border-bottom: 1px solid var(--ds-border) !important; box-shadow: 0 1px 8px rgba(0,0,0,.08) !important; min-height: var(--ds-header-h) !important; padding: 0 20px !important; } /* Logo */ .page-header .page-logo { background: var(--ds-sidebar-bg) !important; border-bottom: 1px solid #273450 !important; width: var(--ds-sidebar-width) !important; padding: 0 20px !important; display: flex !important; align-items: center !important; height: var(--ds-header-h) !important; } .page-header .page-logo img { height: 34px !important; max-width: 160px !important; object-fit: contain !important; } .page-header .page-logo .logo-default { display: block !important; } /* Botão menu hamburger */ .page-header .menu-toggler { background: transparent !important; color: var(--ds-text-muted) !important; } .page-header .menu-toggler:hover { color: var(--ds-primary) !important; } /* Botão AÇÕES */ .page-header .btn.btn-danger, .page-header .btn-group > .btn { background: var(--ds-primary) !important; border-color: var(--ds-primary-dark) !important; border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; padding: 6px 14px !important; box-shadow: 0 1px 4px rgba(37,99,235,.25) !important; transition: background .2s !important; } .page-header .btn.btn-danger:hover, .page-header .btn-group > .btn:hover { background: var(--ds-primary-dark) !important; } .page-header .btn-group .dropdown-toggle { background: var(--ds-primary) !important; border-color: var(--ds-primary-dark) !important; } /* Usuário no header */ .page-header .top-menu .nav > li > a, .page-header .top-menu .nav > li > a .username { color: var(--ds-text) !important; font-size: 14px !important; font-weight: 500 !important; } .page-header .top-menu .nav > li > a:hover { color: var(--ds-primary) !important; background: var(--ds-primary-light) !important; border-radius: 6px !important; } /* ----------------------------------------------------------------------- SIDEBAR — Redesign completo ---------------------------------------------------------------------- */ .page-sidebar, .page-sidebar-wrapper .page-sidebar { width: var(--ds-sidebar-width) !important; min-width: var(--ds-sidebar-width) !important; background: var(--ds-sidebar-bg) !important; border-right: none !important; box-shadow: 2px 0 12px rgba(0,0,0,.15) !important; } /* Menu list container */ .page-sidebar-menu { background: transparent !important; padding-top: 8px !important; } /* BUG FIX #2 — Item de menu sem label visível Garante que todos os spans.title sejam exibidos corretamente */ .page-sidebar-menu > li > a > span.title, .page-sidebar-menu > li > a > .title { display: inline-block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; white-space: nowrap !important; text-overflow: clip !important; max-width: 160px !important; color: var(--ds-sidebar-text) !important; font-size: 13px !important; font-weight: 400 !important; letter-spacing: .2px !important; } /* BUG FIX #3 — Texto "se" truncado no submenu Garante que labels de sub-menus também sejam completos */ .page-sidebar-menu .sub-menu li > a > span.title { display: inline-block !important; visibility: visible !important; opacity: 1 !important; overflow: visible !important; white-space: nowrap !important; max-width: 150px !important; color: rgba(200,211,224,.85) !important; font-size: 12.5px !important; } /* Links do menu principal */ .page-sidebar-menu > li > a { background: transparent !important; border: none !important; padding: 11px 20px 11px 18px !important; border-left: 3px solid transparent !important; transition: background .18s, border-color .18s !important; display: flex !important; align-items: center !important; gap: 10px !important; } .page-sidebar-menu > li > a:hover { background: var(--ds-sidebar-hover) !important; border-left-color: var(--ds-primary) !important; } .page-sidebar-menu > li.active > a, .page-sidebar-menu > li > a.active { background: rgba(37,99,235,.18) !important; border-left-color: var(--ds-primary) !important; } .page-sidebar-menu > li.active > a span.title, .page-sidebar-menu > li > a.active span.title { color: #ffffff !important; font-weight: 500 !important; } /* Ícones do menu */ .page-sidebar-menu > li > a > i { color: var(--ds-sidebar-text) !important; font-size: 15px !important; width: 18px !important; text-align: center !important; flex-shrink: 0 !important; } .page-sidebar-menu > li.active > a > i, .page-sidebar-menu > li > a:hover > i { color: #ffffff !important; } /* Seta do submenu */ .page-sidebar-menu > li > a > .arrow { color: rgba(200,211,224,.5) !important; margin-left: auto !important; } .page-sidebar-menu > li.open > a > .arrow, .page-sidebar-menu > li > a:hover > .arrow { color: var(--ds-sidebar-text) !important; } /* Submenu (segundo nível) */ .page-sidebar-menu .sub-menu { background: rgba(0,0,0,.15) !important; border: none !important; padding: 4px 0 !important; } .page-sidebar-menu .sub-menu li > a { background: transparent !important; padding: 8px 20px 8px 48px !important; border-left: 3px solid transparent !important; transition: background .15s, border-color .15s !important; display: flex !important; align-items: center !important; gap: 8px !important; } .page-sidebar-menu .sub-menu li > a:hover { background: var(--ds-sidebar-hover) !important; border-left-color: var(--ds-teal) !important; } .page-sidebar-menu .sub-menu li.active > a { background: rgba(37,99,235,.22) !important; border-left-color: var(--ds-teal) !important; } .page-sidebar-menu .sub-menu li.active > a span.title { color: #ffffff !important; font-weight: 500 !important; } .page-sidebar-menu .sub-menu li > a > i { color: rgba(200,211,224,.7) !important; font-size: 12px !important; width: 14px !important; text-align: center !important; flex-shrink: 0 !important; } /* Separador de seção no menu */ .page-sidebar-menu .sidebar-toggler-wrapper, .page-sidebar-menu .sidebar-search-wrapper { background: var(--ds-sidebar-bg) !important; } /* Menu fechado (ícone apenas) */ .page-sidebar-closed .page-sidebar-menu > li > a > span.title, .page-sidebar-closed .page-sidebar-menu > li > a > .arrow { display: none !important; } .page-sidebar-closed .page-sidebar-menu > li > a { padding: 13px 0 !important; justify-content: center !important; border-left: 3px solid transparent !important; } .page-sidebar-closed .page-sidebar-menu > li:hover .sub-menu { background: var(--ds-sidebar-bg) !important; box-shadow: 4px 4px 12px rgba(0,0,0,.25) !important; border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important; } /* ----------------------------------------------------------------------- ÁREA DE CONTEÚDO ---------------------------------------------------------------------- */ .page-content-wrapper .page-content { background: var(--ds-body-bg) !important; padding: 24px !important; min-height: calc(100vh - var(--ds-header-h) - 46px) !important; } /* Título de página + breadcrumb */ .page-content > .page-bar { background: transparent !important; border: none !important; padding: 0 0 18px 0 !important; margin-bottom: 0 !important; box-shadow: none !important; } .page-content > .page-bar .page-breadcrumb li, .page-content > .page-bar .page-breadcrumb li a, .page-content > .page-bar .page-breadcrumb li span { font-size: 12px !important; color: var(--ds-text-muted) !important; } .page-content > .page-bar .page-breadcrumb li.active { color: var(--ds-text) !important; font-weight: 500 !important; } /* Título H1/H3 das páginas */ .page-title { font-size: 20px !important; font-weight: 600 !important; color: var(--ds-text) !important; margin: 0 0 20px 0 !important; } /* ----------------------------------------------------------------------- PORTLETS / CARDS — Substituição do visual "painel antigo" ---------------------------------------------------------------------- */ .portlet { background: var(--ds-card-bg) !important; border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius) !important; box-shadow: var(--ds-card-shadow) !important; margin-bottom: 20px !important; } .portlet .portlet-title { background: var(--ds-card-bg) !important; border-bottom: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important; padding: 14px 20px !important; min-height: 46px !important; display: flex !important; align-items: center !important; } .portlet .portlet-title .caption { font-size: 14px !important; font-weight: 600 !important; color: var(--ds-text) !important; text-transform: uppercase !important; letter-spacing: .5px !important; padding: 0 !important; } .portlet .portlet-title .caption > i { color: var(--ds-primary) !important; margin-right: 8px !important; } .portlet .portlet-body { padding: 20px !important; border-radius: 0 0 var(--ds-radius) var(--ds-radius) !important; } /* Portlet azul (cabeçalho colorido) */ .portlet.light > .portlet-title, .portlet.blue > .portlet-title { background: var(--ds-primary) !important; border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important; } .portlet.light > .portlet-title .caption, .portlet.blue > .portlet-title .caption { color: #ffffff !important; } .portlet.light > .portlet-title .caption > i, .portlet.blue > .portlet-title .caption > i { color: rgba(255,255,255,.85) !important; } /* ----------------------------------------------------------------------- TABELAS ---------------------------------------------------------------------- */ .table { border-radius: var(--ds-radius) !important; overflow: hidden !important; } .table thead th { background: #f8fafc !important; color: var(--ds-text-muted) !important; font-size: 11px !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .6px !important; border-bottom: 2px solid var(--ds-border) !important; padding: 12px 14px !important; } .table tbody tr { transition: background .12s !important; } .table tbody tr:hover { background: var(--ds-primary-light) !important; } .table tbody td { font-size: 13px !important; color: var(--ds-text) !important; padding: 11px 14px !important; vertical-align: middle !important; border-bottom: 1px solid var(--ds-border) !important; } .table-striped tbody tr:nth-of-type(odd) { background: #f9fafb !important; } .table-striped tbody tr:nth-of-type(odd):hover { background: var(--ds-primary-light) !important; } /* ----------------------------------------------------------------------- BOTÕES ---------------------------------------------------------------------- */ .btn { border-radius: 6px !important; font-size: 13px !important; font-weight: 500 !important; padding: 7px 16px !important; transition: all .18s !important; box-shadow: none !important; } .btn-primary, .btn-info { background: var(--ds-primary) !important; border-color: var(--ds-primary-dark) !important; color: #fff !important; } .btn-primary:hover, .btn-info:hover { background: var(--ds-primary-dark) !important; border-color: var(--ds-primary-dark) !important; box-shadow: 0 2px 8px rgba(37,99,235,.3) !important; } .btn-success { background: var(--ds-success) !important; border-color: #15803d !important; } .btn-success:hover { background: #15803d !important; box-shadow: 0 2px 8px rgba(22,163,74,.3) !important; } .btn-danger { background: var(--ds-danger) !important; border-color: #b91c1c !important; } .btn-danger:hover { background: #b91c1c !important; box-shadow: 0 2px 8px rgba(229,62,62,.3) !important; } .btn-default { background: #fff !important; border-color: var(--ds-border) !important; color: var(--ds-text) !important; } .btn-default:hover { background: #f8fafc !important; border-color: #cbd5e1 !important; } /* Botão pequeno */ .btn.btn-xs, .btn-group-xs > .btn { padding: 3px 9px !important; font-size: 11px !important; border-radius: 4px !important; } .btn.btn-sm, .btn-group-sm > .btn { padding: 5px 12px !important; font-size: 12px !important; } /* Botão Novo/Adicionar */ .btn-circle.btn-icon-only { border-radius: 50% !important; } /* ----------------------------------------------------------------------- FORMULÁRIOS ---------------------------------------------------------------------- */ .form-control { border: 1px solid var(--ds-border) !important; border-radius: 6px !important; font-size: 13px !important; color: var(--ds-text) !important; background: #ffffff !important; padding: 8px 12px !important; box-shadow: inset 0 1px 3px rgba(0,0,0,.04) !important; transition: border-color .18s, box-shadow .18s !important; height: 36px !important; } .form-control:focus { border-color: var(--ds-primary) !important; box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important; outline: none !important; } textarea.form-control { height: auto !important; min-height: 80px !important; } .form-group label, .control-label { font-size: 12px !important; font-weight: 600 !important; color: var(--ds-text-muted) !important; text-transform: uppercase !important; letter-spacing: .4px !important; margin-bottom: 6px !important; } .input-group-addon { background: #f8fafc !important; border: 1px solid var(--ds-border) !important; color: var(--ds-text-muted) !important; border-radius: 6px 0 0 6px !important; font-size: 13px !important; } /* Select2 e UI-Select */ .select2-container .select2-choice, .select2-container-multi .select2-choices { border: 1px solid var(--ds-border) !important; border-radius: 6px !important; background: #fff !important; box-shadow: none !important; min-height: 36px !important; padding: 5px 10px !important; } .select2-container .select2-choice:hover { border-color: var(--ds-primary) !important; } /* ----------------------------------------------------------------------- BADGES & LABELS ---------------------------------------------------------------------- */ .label, .badge { border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; padding: 3px 7px !important; letter-spacing: .3px !important; } .label-success, .badge-success { background: #dcfce7 !important; color: #15803d !important; } .label-danger, .badge-danger { background: #fee2e2 !important; color: #b91c1c !important; } .label-warning, .badge-warning { background: #fef3c7 !important; color: #b45309 !important; } .label-info, .badge-info { background: #dbeafe !important; color: #1d4ed8 !important; } .label-primary, .badge-primary { background: var(--ds-primary-light) !important; color: var(--ds-primary-dark) !important; } /* Badge "ODONTOLOGICO" nas tabelas de serviços */ .label.label-success[style*="background"], span[style*="background-color:#5cb85c"] { background: #dcfce7 !important; color: #15803d !important; border: none !important; } /* ----------------------------------------------------------------------- PAGINAÇÃO ---------------------------------------------------------------------- */ .pagination > li > a, .pagination > li > span { border: 1px solid var(--ds-border) !important; color: var(--ds-primary) !important; border-radius: 4px !important; margin: 0 2px !important; padding: 5px 11px !important; font-size: 13px !important; transition: all .15s !important; } .pagination > .active > a, .pagination > .active > span { background: var(--ds-primary) !important; border-color: var(--ds-primary) !important; color: #fff !important; } .pagination > li > a:hover { background: var(--ds-primary-light) !important; border-color: var(--ds-primary) !important; color: var(--ds-primary) !important; } /* ----------------------------------------------------------------------- TABS ---------------------------------------------------------------------- */ .nav-tabs > li > a { border-radius: 6px 6px 0 0 !important; color: var(--ds-text-muted) !important; font-size: 13px !important; font-weight: 500 !important; padding: 9px 18px !important; border: 1px solid transparent !important; transition: color .15s, background .15s !important; } .nav-tabs > li > a:hover { color: var(--ds-primary) !important; background: var(--ds-primary-light) !important; border-color: var(--ds-border) var(--ds-border) transparent !important; } .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover { color: var(--ds-primary) !important; background: #fff !important; border-color: var(--ds-border) var(--ds-border) #fff !important; font-weight: 600 !important; } .tab-content { background: #fff !important; border: 1px solid var(--ds-border) !important; border-top: none !important; border-radius: 0 0 var(--ds-radius) var(--ds-radius) !important; padding: 20px !important; } /* ----------------------------------------------------------------------- ALERTAS / TOASTR — Notificações Modernas ---------------------------------------------------------------------- */ /* Container: posicionado abaixo do header fixo */ #toast-container { position: fixed !important; top: 72px !important; right: 20px !important; z-index: 999999 !important; pointer-events: none !important; } #toast-container > div { pointer-events: all !important; } /* Toast base */ #toast-container .toast { position: relative !important; width: 390px !important; min-height: 64px !important; padding: 14px 44px 14px 62px !important; margin-bottom: 10px !important; border-radius: 10px !important; box-shadow: 0 6px 24px rgba(0,0,0,0.20) !important; font-family: var(--ds-font) !important; opacity: 1 !important; overflow: hidden !important; cursor: pointer !important; border: none !important; background-image: none !important; } /* Ícone via Font Awesome (::before) */ #toast-container .toast::before { position: absolute !important; left: 0 !important; top: 0 !important; bottom: 0 !important; width: 52px !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: FontAwesome !important; font-size: 22px !important; color: rgba(255,255,255,0.95) !important; background: rgba(0,0,0,0.12) !important; content: '' !important; } #toast-container .toast-success::before { content: '\f058' !important; } /* fa-check-circle */ #toast-container .toast-error::before { content: '\f057' !important; } /* fa-times-circle */ #toast-container .toast-warning::before { content: '\f071' !important; } /* fa-exclamation-triangle */ #toast-container .toast-info::before { content: '\f05a' !important; } /* fa-info-circle */ /* Cores de fundo */ #toast-container .toast-success { background-color: #16a34a !important; } #toast-container .toast-error { background-color: #dc2626 !important; } #toast-container .toast-warning { background-color: #d97706 !important; } #toast-container .toast-info { background-color: #2563eb !important; } /* Título (ex: "Sucesso", "Erro") */ #toast-container .toast-title { font-size: 13px !important; font-weight: 700 !important; color: #fff !important; margin-bottom: 4px !important; line-height: 1.3 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important; } /* Corpo da mensagem */ #toast-container .toast-message { font-size: 13px !important; color: rgba(255,255,255,0.94) !important; line-height: 1.5 !important; font-weight: 400 !important; word-break: break-word !important; } /* Botão fechar */ #toast-container .toast-close-button { position: absolute !important; right: 10px !important; top: 10px !important; font-size: 18px !important; font-weight: 700 !important; color: rgba(255,255,255,0.75) !important; opacity: 1 !important; text-shadow: none !important; float: none !important; line-height: 1 !important; } #toast-container .toast-close-button:hover { color: #fff !important; opacity: 1 !important; } /* Barra de progresso (timeout) */ #toast-container progress-bar { background-color: rgba(255,255,255,0.35) !important; height: 3px !important; border-radius: 0 0 10px 10px !important; } /* Hover: leve elevação */ #toast-container .toast:hover { box-shadow: 0 8px 30px rgba(0,0,0,0.28) !important; transform: translateY(-1px) !important; transition: all 0.2s ease !important; } /* ----------------------------------------------------------------------- ALERTAS INLINE (Angular ui-bootstrap em page-head.html) ---------------------------------------------------------------------- */ .page-alerts { position: relative; z-index: 100; margin-bottom: 12px; } .page-alerts .alert { display: flex !important; align-items: flex-start !important; padding: 13px 40px 13px 52px !important; border-radius: 10px !important; border: none !important; box-shadow: 0 3px 14px rgba(0,0,0,0.10) !important; font-family: var(--ds-font) !important; font-size: 13px !important; line-height: 1.55 !important; margin-bottom: 8px !important; position: relative !important; } /* Ícone por tipo via ::before */ .page-alerts .alert::before { position: absolute !important; left: 16px !important; top: 50% !important; transform: translateY(-50%) !important; font-family: FontAwesome !important; font-size: 20px !important; } .page-alerts .alert-danger { background: #fef2f2 !important; color: #991b1b !important; border-left: 4px solid #dc2626 !important; } .page-alerts .alert-success { background: #f0fdf4 !important; color: #14532d !important; border-left: 4px solid #16a34a !important; } .page-alerts .alert-warning { background: #fffbeb !important; color: #78350f !important; border-left: 4px solid #d97706 !important; } .page-alerts .alert-info { background: #eff6ff !important; color: #1e3a8a !important; border-left: 4px solid #2563eb !important; } .page-alerts .alert-danger::before { content: '\f057' !important; color: #dc2626 !important; } .page-alerts .alert-success::before { content: '\f058' !important; color: #16a34a !important; } .page-alerts .alert-warning::before { content: '\f071' !important; color: #d97706 !important; } .page-alerts .alert-info::before { content: '\f05a' !important; color: #2563eb !important; } /* Botão fechar do alert inline */ .page-alerts .alert .close { position: absolute !important; right: 12px !important; top: 50% !important; transform: translateY(-50%) !important; font-size: 16px !important; opacity: 0.5 !important; color: inherit !important; text-shadow: none !important; float: none !important; } .page-alerts .alert .close:hover { opacity: 1 !important; } /* ----------------------------------------------------------------------- RODAPÉ ---------------------------------------------------------------------- */ .page-footer { background: var(--ds-card-bg) !important; border-top: 1px solid var(--ds-border) !important; color: var(--ds-text-muted) !important; font-size: 12px !important; padding: 0 20px !important; } .page-footer .page-footer-inner { color: var(--ds-text-muted) !important; font-size: 12px !important; } /* ----------------------------------------------------------------------- MODAL ---------------------------------------------------------------------- */ .modal-content { border-radius: var(--ds-radius) !important; border: none !important; box-shadow: 0 20px 60px rgba(0,0,0,.18) !important; } .modal-header { background: var(--ds-primary) !important; border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important; padding: 16px 20px !important; } .modal-header .modal-title { color: #fff !important; font-size: 15px !important; font-weight: 600 !important; } .modal-header .close { color: #fff !important; opacity: .8 !important; text-shadow: none !important; font-size: 20px !important; } .modal-body { padding: 24px !important; } .modal-footer { padding: 14px 20px !important; border-top: 1px solid var(--ds-border) !important; background: #f8fafc !important; border-radius: 0 0 var(--ds-radius) var(--ds-radius) !important; } /* ----------------------------------------------------------------------- INPUTS DE BUSCA ---------------------------------------------------------------------- */ .input-group .form-control:first-child { border-right: 0 !important; } .input-group-btn .btn { border-radius: 0 6px 6px 0 !important; } /* ----------------------------------------------------------------------- STATUS E INDICADORES FINANCEIROS ---------------------------------------------------------------------- */ .note.note-info { background: var(--ds-teal-light) !important; border-left: 4px solid var(--ds-teal) !important; border-radius: 0 var(--ds-radius) var(--ds-radius) 0 !important; padding: 14px 16px !important; font-size: 13px !important; } .note.note-danger { background: #fee2e2 !important; border-left: 4px solid var(--ds-danger) !important; } .note.note-success { background: #dcfce7 !important; border-left: 4px solid var(--ds-success) !important; } .note.note-warning { background: #fef3c7 !important; border-left: 4px solid var(--ds-warning) !important; } /* ----------------------------------------------------------------------- SALDO / VALOR DESTACADO (página Caixa) ---------------------------------------------------------------------- */ .page-content h3 + h2, .saldo-real, [class*="saldo"] { color: var(--ds-success) !important; font-weight: 700 !important; font-size: 22px !important; } /* ----------------------------------------------------------------------- BREADCRUMB ---------------------------------------------------------------------- */ .page-bar { background: transparent !important; border: none !important; padding: 0 0 16px !important; box-shadow: none !important; margin-bottom: 0 !important; } .page-bar .page-breadcrumb { background: transparent !important; padding: 0 !important; } .page-breadcrumb > li + li:before { content: "/" !important; padding: 0 6px !important; color: var(--ds-text-muted) !important; } .page-breadcrumb > li > a { color: var(--ds-primary) !important; font-size: 12px !important; } .page-breadcrumb > li.active { color: var(--ds-text-muted) !important; font-size: 12px !important; } /* ----------------------------------------------------------------------- "SEM DADOS DISPONÍVEIS" — estado vazio de tabelas ---------------------------------------------------------------------- */ .text-center.text-muted, td.text-center, .empty-state-msg { color: var(--ds-text-muted) !important; font-size: 13px !important; padding: 24px !important; } /* ----------------------------------------------------------------------- DROPDOWN MENUS ---------------------------------------------------------------------- */ .dropdown-menu { border: 1px solid var(--ds-border) !important; border-radius: var(--ds-radius) !important; box-shadow: 0 8px 24px rgba(0,0,0,.12) !important; padding: 6px !important; } .dropdown-menu > li > a { border-radius: 4px !important; font-size: 13px !important; padding: 8px 14px !important; color: var(--ds-text) !important; transition: background .12s !important; } .dropdown-menu > li > a:hover { background: var(--ds-primary-light) !important; color: var(--ds-primary) !important; } /* ----------------------------------------------------------------------- SCROLLBAR PERSONALIZADA ---------------------------------------------------------------------- */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } /* ----------------------------------------------------------------------- ANIMAÇÃO DE CARREGAMENTO ---------------------------------------------------------------------- */ .fade-in-up { animation: fadeInUp .25s ease-out !important; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } /* ----------------------------------------------------------------------- RESPONSIVIDADE — Mobile ---------------------------------------------------------------------- */ @media (max-width: 768px) { .page-content-wrapper .page-content { padding: 14px !important; } .portlet .portlet-body { padding: 14px !important; } .table-responsive { border-radius: var(--ds-radius) !important; overflow-x: auto !important; } } /* ======================================================================= LAYOUT — Alinhamento sidebar + conteúdo (override Metronic) ======================================================================= */ /* Metronic define margin-left:235px no .page-content — sobrescrever aqui */ .page-content-wrapper .page-content { margin-left: 260px !important; } /* Logo header alinhado com sidebar */ .page-header.navbar .page-logo { width: 260px !important; } /* ======================================================================= LIVE TILES — Sidebar em grade 2 colunas ======================================================================= */ /* Sidebar — largura controlada por --ds-sidebar-width (280px) */ /* Branding na sidebar */ .ds-sidebar-brand { padding: 14px 14px 8px 14px !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; margin-bottom: 6px !important; text-align: center !important; } .ds-sidebar-brand .ds-brand-main { color: #ffffff !important; font-size: 15px !important; font-weight: 700 !important; letter-spacing: .5px !important; } .ds-sidebar-brand .ds-brand-sub { color: rgba(255,255,255,.6) !important; font-size: 13px !important; font-weight: 400 !important; } /* Container do menu vira flex 2 colunas */ .page-sidebar-menu { display: flex !important; flex-wrap: wrap !important; gap: 8px !important; padding: 10px 10px 14px !important; background: transparent !important; align-content: flex-start !important; } /* li se torna "transparente" no layout — seus filhos participam direto do flex */ .page-sidebar-menu > li.nav-item { display: contents !important; } /* Tile: cada ocupa 50% do container (menos o gap) */ .page-sidebar-menu > li.nav-item > a.nav-link { flex: 0 0 calc(50% - 5px) !important; width: calc(50% - 5px) !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; height: 96px !important; border-radius: 12px !important; padding: 10px 6px !important; gap: 6px !important; text-decoration: none !important; border-left: none !important; cursor: pointer !important; transition: transform .15s ease, box-shadow .15s ease, filter .15s ease !important; position: relative !important; box-sizing: border-box !important; border: 1px solid rgba(255,255,255,.15) !important; box-shadow: 0 4px 16px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.20) !important; } .page-sidebar-menu > li.nav-item > a.nav-link:hover { transform: translateY(-3px) scale(1.03) !important; box-shadow: 0 10px 28px rgba(0,0,0,.45) !important; filter: brightness(1.12) !important; } /* Ícone dentro do tile */ .page-sidebar-menu > li.nav-item > a.nav-link > i { font-size: 28px !important; width: auto !important; color: rgba(255,255,255,.95) !important; text-shadow: 0 1px 4px rgba(0,0,0,.25) !important; flex-shrink: 0 !important; } /* Label dentro do tile */ .page-sidebar-menu > li.nav-item > a.nav-link > span.title { font-size: 12px !important; font-weight: 900 !important; color: #ffffff !important; text-transform: uppercase !important; letter-spacing: 0px !important; text-shadow: 0 2px 6px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.9) !important; text-align: center !important; white-space: normal !important; line-height: 1.25 !important; max-width: 100% !important; display: block !important; visibility: visible !important; opacity: 1 !important; } /* Seta: oculta nos tiles */ .page-sidebar-menu > li.nav-item > a.nav-link > .arrow { display: none !important; } /* Tile ativo / aberto */ .page-sidebar-menu > li.nav-item.active > a.nav-link, .page-sidebar-menu > li.nav-item.open > a.nav-link { box-shadow: 0 0 0 2px rgba(255,255,255,.45), 0 6px 22px rgba(0,0,0,.45) !important; filter: brightness(1.08) !important; } /* ---- Cores de cada tile ---- */ .page-sidebar-menu > li.tile-inicio > a.nav-link { background: linear-gradient(145deg,#3b82f6,#1d4ed8) !important; } .page-sidebar-menu > li.tile-cadastrar > a.nav-link { background: linear-gradient(145deg,#22c55e,#15803d) !important; } .page-sidebar-menu > li.tile-atendimento > a.nav-link { background: linear-gradient(145deg,#22d3ee,#0e7490) !important; } .page-sidebar-menu > li.tile-telemarketing> a.nav-link { background: linear-gradient(145deg,#fb923c,#c2410c) !important; } .page-sidebar-menu > li.tile-servicos > a.nav-link { background: linear-gradient(145deg,#a855f7,#6d28d9) !important; } .page-sidebar-menu > li.tile-relatorios > a.nav-link { background: linear-gradient(145deg,#f87171,#b91c1c) !important; } .page-sidebar-menu > li.tile-faturamento > a.nav-link { background: linear-gradient(145deg,#34d399,#047857) !important; } .page-sidebar-menu > li.tile-funcionarios > a.nav-link { background: linear-gradient(145deg,#38bdf8,#0369a1) !important; } .page-sidebar-menu > li.tile-profissional > a.nav-link { background: linear-gradient(145deg,#818cf8,#4338ca) !important; } .page-sidebar-menu > li.tile-odontologico > a.nav-link { background: linear-gradient(145deg,#67e8f9,#0891b2) !important; } .page-sidebar-menu > li.tile-cobranca > a.nav-link { background: linear-gradient(145deg,#fb7185,#be123c) !important; } .page-sidebar-menu > li.tile-caixa > a.nav-link { background: linear-gradient(145deg,#6ee7b7,#059669) !important; } /* ---- Sub-menu: ocupa largura total da sidebar ---- */ .page-sidebar-menu > li.nav-item > .sub-menu { flex: 0 0 100% !important; width: 100% !important; background: rgba(0,0,0,.28) !important; border-radius: 10px !important; padding: 6px 0 8px !important; margin: 0 !important; border: 1px solid rgba(255,255,255,.06) !important; box-sizing: border-box !important; /* Metronic controla display via slideDown/slideUp */ } /* Sub-itens: visual de lista compacta (NÃO tile) */ .page-sidebar-menu > li.nav-item > .sub-menu > li { display: block !important; } .page-sidebar-menu > li.nav-item > .sub-menu > li > a.nav-link { display: flex !important; flex-direction: row !important; align-items: center !important; width: 100% !important; flex: none !important; height: auto !important; min-height: 42px !important; padding: 10px 16px !important; gap: 12px !important; border-radius: 8px !important; margin: 2px 6px !important; width: calc(100% - 12px) !important; box-sizing: border-box !important; background: transparent !important; border-left: 2px solid transparent !important; transition: background .18s, border-color .18s !important; transform: none !important; box-shadow: none !important; filter: none !important; } .page-sidebar-menu > li.nav-item > .sub-menu > li > a.nav-link:hover { background: rgba(255,255,255,.13) !important; border-left-color: rgba(255,255,255,.4) !important; transform: none !important; box-shadow: none !important; filter: none !important; } .page-sidebar-menu > li.nav-item > .sub-menu > li.active > a.nav-link { background: rgba(37,99,235,.3) !important; } .page-sidebar-menu > li.nav-item > .sub-menu > li > a.nav-link > i { font-size: 15px !important; width: 18px !important; color: rgba(255,255,255,.85) !important; text-align: center !important; text-shadow: 0 1px 4px rgba(0,0,0,.5) !important; flex-shrink: 0 !important; } .page-sidebar-menu > li.nav-item > .sub-menu > li > a.nav-link > span.title { font-size: 14px !important; font-weight: 600 !important; color: #ffffff !important; text-transform: none !important; white-space: nowrap !important; text-align: left !important; max-width: none !important; letter-spacing: .2px !important; text-shadow: 0 1px 3px rgba(0,0,0,.6) !important; } /* Sidebar fechada: tiles viram ícones centralizados numa coluna */ .page-sidebar-closed .page-sidebar-menu > li.nav-item > a.nav-link { flex: 0 0 100% !important; width: 100% !important; height: 52px !important; flex-direction: row !important; justify-content: center !important; padding: 0 !important; border-radius: 0 !important; } .page-sidebar-closed .page-sidebar-menu > li.nav-item > a.nav-link > span.title { display: none !important; } .page-sidebar-closed .page-sidebar-menu > li.nav-item > a.nav-link > i { font-size: 18px !important; } /* ======================================================================= LOGO TEXTO — R. Dental Supreme ======================================================================= */ .ds-logo-link { display: flex !important; align-items: center !important; gap: 8px !important; text-decoration: none !important; height: var(--ds-header-h) !important; } .ds-logo-icon { width: 34px !important; height: 34px !important; background: rgba(255,255,255,.15) !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ds-logo-icon > i { font-size: 18px !important; color: #ffffff !important; } .ds-logo-text { font-size: 15px !important; font-weight: 600 !important; color: #ffffff !important; line-height: 1.2 !important; letter-spacing: .2px !important; } .ds-logo-r { color: #93c5fd !important; font-weight: 800 !important; } .ds-logo-sup { display: block !important; font-size: 10px !important; font-weight: 400 !important; color: rgba(255,255,255,.65) !important; letter-spacing: .8px !important; text-transform: uppercase !important; line-height: 1 !important; margin-top: 1px !important; } /* ======================================================================= DASHBOARD — KPI Cards, tabelas de pagamento, inadimplentes ======================================================================= */ /* Barra de boas-vindas */ .ds-welcome-bar { display: flex !important; align-items: center !important; justify-content: space-between !important; margin-bottom: 22px !important; flex-wrap: wrap !important; gap: 12px !important; } .ds-welcome-title { font-size: 22px !important; font-weight: 700 !important; color: var(--ds-text) !important; margin: 0 0 4px !important; } .ds-welcome-date { font-size: 13px !important; color: var(--ds-text-muted) !important; margin: 0 !important; } /* KPI Cards */ .ds-kpi-row { margin-bottom: 6px !important; } .ds-kpi-card { display: flex !important; align-items: center !important; gap: 16px !important; background: var(--ds-card-bg) !important; border-radius: 12px !important; box-shadow: var(--ds-card-shadow) !important; padding: 18px 20px !important; margin-bottom: 20px !important; border-left: 4px solid transparent !important; transition: transform .15s, box-shadow .15s !important; } .ds-kpi-card:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 20px rgba(0,0,0,.1) !important; } .ds-kpi-icon-wrap { width: 52px !important; height: 52px !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; } .ds-kpi-icon-wrap > i { font-size: 22px !important; color: #ffffff !important; } .ds-kpi-value { font-size: 28px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: -.5px !important; } .ds-kpi-label { font-size: 12px !important; font-weight: 500 !important; color: var(--ds-text-muted) !important; text-transform: uppercase !important; letter-spacing: .4px !important; margin-top: 4px !important; } .ds-kpi-blue { border-left-color: var(--ds-primary) !important; } .ds-kpi-blue .ds-kpi-icon-wrap { background: var(--ds-primary) !important; } .ds-kpi-blue .ds-kpi-value { color: var(--ds-primary) !important; } .ds-kpi-red { border-left-color: var(--ds-danger) !important; } .ds-kpi-red .ds-kpi-icon-wrap { background: var(--ds-danger) !important; } .ds-kpi-red .ds-kpi-value { color: var(--ds-danger) !important; } .ds-kpi-green { border-left-color: var(--ds-success) !important; } .ds-kpi-green .ds-kpi-icon-wrap { background: var(--ds-success) !important; } .ds-kpi-green .ds-kpi-value { color: var(--ds-success) !important; } .ds-kpi-purple { border-left-color: #7c3aed !important; } .ds-kpi-purple .ds-kpi-icon-wrap { background: #7c3aed !important; } .ds-kpi-purple .ds-kpi-value { color: #7c3aed !important; } /* Portlets de pagamento */ .ds-pay-portlet .portlet-title { display: flex !important; align-items: center !important; justify-content: space-between !important; } .ds-pay-portlet .portlet-title .caption > i { margin-right: 6px !important; } .ds-pay-debit .portlet-title { border-top: 3px solid var(--ds-success) !important; } .ds-pay-card .portlet-title { border-top: 3px solid var(--ds-primary) !important; } .ds-pay-boleto .portlet-title { border-top: 3px solid var(--ds-warning) !important; } .ds-pay-badge { display: inline-block !important; min-width: 28px !important; height: 22px !important; line-height: 22px !important; text-align: center !important; border-radius: 11px !important; font-size: 12px !important; font-weight: 700 !important; padding: 0 8px !important; color: #fff !important; } .ds-badge-green { background: var(--ds-success) !important; } .ds-badge-blue { background: var(--ds-primary) !important; } .ds-badge-orange { background: var(--ds-warning) !important; } .ds-pay-table { margin: 0 !important; } .ds-pay-table thead th { padding: 10px 16px !important; font-size: 11px !important; } .ds-pay-table tbody td { padding: 8px 16px !important; font-size: 12.5px !important; } .ds-empty-state { display: flex !important; align-items: center !important; gap: 8px !important; padding: 20px 16px !important; color: var(--ds-text-muted) !important; font-size: 13px !important; } .ds-empty-state > i { color: var(--ds-success) !important; font-size: 16px !important; } .ds-see-more { padding: 8px 16px !important; font-size: 12px !important; color: var(--ds-text-muted) !important; border-top: 1px solid var(--ds-border) !important; } .ds-client-name { max-width: 160px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; font-weight: 500 !important; } /* Inadimplentes */ .ds-inadimplentes-portlet .portlet-title { background: #fff5f5 !important; border-top: 3px solid var(--ds-danger) !important; } .ds-inadimplentes-count { display: inline-block !important; background: var(--ds-danger) !important; color: #fff !important; border-radius: 10px !important; font-size: 11px !important; font-weight: 700 !important; padding: 1px 8px !important; margin-left: 8px !important; vertical-align: middle !important; } .ds-empty-inadimplente { text-align: center !important; padding: 36px 20px !important; color: var(--ds-text-muted) !important; } .ds-empty-inadimplente p { margin-top: 10px !important; font-size: 14px !important; } .ds-inad-table thead th { padding: 11px 16px !important; } .ds-inad-table tbody td { padding: 10px 16px !important; font-size: 13px !important; } .ds-inad-critical td { background: #fff5f5 !important; } /* Badges de forma de pagamento */ .ds-forma-badge { display: inline-block !important; padding: 2px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 600 !important; text-transform: uppercase !important; } .ds-forma-debito { background: #dcfce7 !important; color: #15803d !important; } .ds-forma-cartao { background: #dbeafe !important; color: #1d4ed8 !important; } .ds-forma-boleto { background: #fef3c7 !important; color: #b45309 !important; } .ds-forma-outro { background: #f1f5f9 !important; color: #64748b !important; } /* ===================================================================== CHAT WIDGET — R. Dental Supreme ===================================================================== */ /* ── Botão flutuante ───────────────────────────────────────────────── */ #ds-chat-root { position: fixed; bottom: 24px; right: 24px; z-index: 9999; font-family: 'Segoe UI', sans-serif; } .ds-chat-fab { width: 56px; height: 56px; border-radius: 50%; background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); border: none; color: #fff; font-size: 22px; box-shadow: 0 4px 16px rgba(37,99,235,.45); cursor: pointer; position: relative; transition: transform .2s, box-shadow .2s; display: flex; align-items: center; justify-content: center; } .ds-chat-fab:hover { transform: scale(1.08); box-shadow: 0 6px 20px rgba(37,99,235,.55); } .ds-chat-fab-open { background: linear-gradient(135deg, #475569 0%, #64748b 100%); } .ds-chat-fab-badge { position: absolute; top: -4px; right: -4px; background: #ef4444; color: #fff; font-size: 11px; font-weight: 700; min-width: 20px; height: 20px; border-radius: 10px; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; padding: 0 4px; animation: ds-chat-pulse 1.4s infinite; } @keyframes ds-chat-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.2); } } /* ── Painel ────────────────────────────────────────────────────────── */ .ds-chat-panel { position: absolute; bottom: 68px; right: 0; width: 420px; height: 560px; background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.18); display: flex; flex-direction: column; overflow: hidden; } /* ── Header ───────────────────────────────────────────────────────── */ .ds-chat-header { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); color: #fff; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .ds-chat-header-title { font-weight: 600; font-size: 14px; display: flex; align-items: center; gap: 8px; } .ds-chat-header-close { background: rgba(255,255,255,.2); border: none; color: #fff; width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 13px; transition: background .15s; } .ds-chat-header-close:hover { background: rgba(255,255,255,.35); } /* ── Sidebar de dentistas (recepção) ──────────────────────────────── */ .ds-chat-sidebar { width: 140px; flex-shrink: 0; border-right: 1px solid #e2e8f0; overflow-y: auto; background: #f8fafc; display: flex; flex-direction: column; } .ds-chat-room-item { padding: 10px 10px; cursor: pointer; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #f1f5f9; position: relative; transition: background .15s; } .ds-chat-room-item:hover, .ds-chat-room-active { background: #eff6ff; } .ds-chat-room-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#2563eb,#7c3aed); color: #fff; font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .ds-chat-room-name { font-size: 11px; font-weight: 600; color: #1e293b; line-height: 1.3; } .ds-chat-room-last { font-size: 10px; color: #94a3b8; margin-top: 1px; } .ds-chat-room-badge { position: absolute; top: 6px; right: 6px; background: #ef4444; color: #fff; font-size: 9px; font-weight: 700; min-width: 16px; height: 16px; border-radius: 8px; display: flex; align-items: center; justify-content: center; padding: 0 3px; } .ds-chat-new-room { padding: 8px; border-top: 1px solid #e2e8f0; margin-top: auto; } .ds-chat-new-btn { width: 100%; background: none; border: 1px dashed #cbd5e1; border-radius: 6px; color: #64748b; font-size: 11px; padding: 6px; cursor: pointer; transition: background .15s, color .15s; } .ds-chat-new-btn:hover { background: #eff6ff; color: #2563eb; border-color: #2563eb; } .ds-chat-new-input-wrap { display: flex; gap: 4px; margin-top: 6px; } .ds-chat-new-input { flex: 1; border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px; font-size: 11px; outline: none; } .ds-chat-new-go { background: #2563eb; border: none; color: #fff; border-radius: 6px; padding: 5px 8px; cursor: pointer; font-size: 11px; } /* ── Corpo (mensagens + input) ────────────────────────────────────── */ .ds-chat-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-left: 140px; } .ds-chat-body-full { margin-left: 0; } .ds-chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: #94a3b8; font-size: 13px; gap: 10px; padding: 20px; text-align: center; } .ds-chat-empty i { font-size: 36px; } /* ── Lista de mensagens ───────────────────────────────────────────── */ .ds-chat-msgs { flex: 1; overflow-y: auto; padding: 12px 12px 4px; display: flex; flex-direction: column; gap: 6px; scroll-behavior: smooth; } .ds-chat-day-label { text-align: center; font-size: 10px; color: #94a3b8; background: #f1f5f9; border-radius: 8px; padding: 3px 10px; align-self: center; margin-bottom: 4px; } .ds-chat-no-msgs { color: #94a3b8; font-size: 12px; text-align: center; padding: 20px 0; align-self: center; } /* Bolhas */ .ds-chat-msg-wrap { display: flex; } .ds-chat-mine { justify-content: flex-end; } .ds-chat-other { justify-content: flex-start; } .ds-chat-bubble { max-width: 78%; padding: 8px 12px; border-radius: 14px; font-size: 13px; line-height: 1.45; position: relative; word-break: break-word; } .ds-chat-mine .ds-chat-bubble { background: linear-gradient(135deg, #2563eb, #3b82f6); color: #fff; border-bottom-right-radius: 4px; } .ds-chat-other .ds-chat-bubble { background: #f1f5f9; color: #1e293b; border-bottom-left-radius: 4px; border: 1px solid #e2e8f0; } .ds-chat-bubble-name { font-size: 10px; font-weight: 700; color: #64748b; margin-bottom: 2px; } .ds-chat-mine .ds-chat-bubble-name { color: rgba(255,255,255,.75); } .ds-chat-bubble-text { } .ds-chat-bubble-time { font-size: 10px; margin-top: 3px; text-align: right; opacity: .65; } /* ── Input ────────────────────────────────────────────────────────── */ .ds-chat-input-row { display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; border-top: 1px solid #e2e8f0; background: #fff; flex-shrink: 0; } .ds-chat-textarea { flex: 1; border: 1px solid #e2e8f0; border-radius: 20px; padding: 8px 14px; font-size: 13px; resize: none; outline: none; font-family: inherit; line-height: 1.4; max-height: 80px; overflow-y: auto; transition: border-color .15s; } .ds-chat-textarea:focus { border-color: #2563eb; } .ds-chat-send-btn { width: 38px; height: 38px; border-radius: 50%; flex-shrink: 0; background: linear-gradient(135deg,#2563eb,#3b82f6); border: none; color: #fff; font-size: 14px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: transform .15s, opacity .15s; } .ds-chat-send-btn:disabled { opacity: .5; cursor: default; transform: none; } .ds-chat-send-btn:not(:disabled):hover { transform: scale(1.1); } /* ── Responsivo mobile ────────────────────────────────────────────── */ @media (max-width: 480px) { .ds-chat-panel { width: calc(100vw - 32px); right: -8px; height: 70vh; } .ds-chat-sidebar { width: 110px; } .ds-chat-body { margin-left: 110px; } } /* ======================================================================= CLIENTE-CONTA FORM FIX v2 — override definitivo 2026-05-07 ======================================================================= */ /* Layout: sidebar flutua, content preenche resto via overflow:hidden */ body #painel-details { float: left !important; width: 220px !important; margin-right: 15px !important; } body .profile-content { overflow: hidden !important; /* SEM margin-left: overflow:hidden BFC already handles layout after float */ } /* Toda a area direita: fundo transparente, deixa portlet definir seu proprio bg */ body .profile-content, body .profile-content > *, body .profile-content .row, body .profile-content .col-md-12 { background: transparent !important; background-color: transparent !important; } /* Portlet e portlet-body: fundo BRANCO */ body .profile-content .portlet, body .profile-content .portlet.light { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 10px !important; box-shadow: 0 2px 12px rgba(0,0,0,.07) !important; width: 100% !important; box-sizing: border-box !important; } body .profile-content .portlet.light > .portlet-body, body .profile-content .portlet-body { background: #ffffff !important; background-color: #ffffff !important; } body .profile-content .form-body, body .profile-content form, body .profile-content .horizontal-form { background: #ffffff !important; background-color: #ffffff !important; } /* Titulo do portlet: azul navy */ body .profile-content .portlet.light > .portlet-title { background: #1e3a8a !important; background-color: #1e3a8a !important; border-radius: 10px 10px 0 0 !important; padding: 13px 20px !important; } body .profile-content .portlet.light > .portlet-title .caption, body .profile-content .portlet.light > .portlet-title .caption-subject, body .profile-content .portlet.light > .portlet-title span { color: #ffffff !important; } /* Secoes H4 */ body .profile-content .form-body h4, body .profile-content .form-body h4 strong { color: #1e3a8a !important; border-bottom: 2px solid #dbeafe !important; padding-bottom: 8px !important; } /* Labels */ body .profile-content .form-body .control-label, body .profile-content .form-body label { color: #334155 !important; font-weight: 600 !important; font-size: 12px !important; } /* Inputs */ body .profile-content .form-body .form-control, body .profile-content .portlet-body .form-control { background: #ffffff !important; background-color: #ffffff !important; border: 1px solid #e2e8f0 !important; border-radius: 6px !important; color: #1e293b !important; } /* Painel esquerdo: portlet branco */ body #painel-details .portlet, body #painel-details .portlet.light, body #painel-details .portlet-body { background: #ffffff !important; background-color: #ffffff !important; } /* === FIM CLIENTE-CONTA FORM FIX v2 === */