/* Odontiza — design tokens v1 (2026-09-07) ============================================================ Fonte: kit `odontiza-identidade-visual/` (verde #009C9A, petróleo #0D4448, laranja #FF5722 só como acento, fundos #F5F7F7 / #0B202E) + arquitetura de tema da Intranet V2 (claro/escuro pela classe `dark` no , chrome do menu sempre escuro) + header de duas linhas do CRM Cliente. Hex sRGB, como o guia. Regras: laranja = presença/notificação/ação secundária, nunca texto corrido; teal em texto só na variante escura (--primary-dark no claro) por contraste; chrome (header/drawer) usa --sb-* e não muda com o tema. Nomes antigos (--background, --card, --sidebar…) continuam definidos como aliases para os componentes rp-*. ============================================================ */ :root { /* ── Métricas ──────────────────────────────────────────── */ --sidebar-w : 262px; --header-h : 64px; --radius-sm : 6px; --radius-md : 10px; --radius-lg : 14px; --navrow-h : 56px; --subheader-h : 44px; --brand-col-w : 232px; --font-sans : "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono : "JetBrains Mono", ui-monospace, "SFMono-Regular", monospace; /* ── Marca (fixos nos dois temas) ─────────────────────── */ --brand-teal : #009C9A; --brand-petroleo : #0D4448; --brand-orange : #FF5722; --brand-dark : #0B202E; --brand-light : #F5F7F7; --brand-accent : var(--brand-orange); /* sublinhado da categoria ativa, ponto de notificação */ --brand-yellow : var(--brand-orange); /* alias legado (CRM Cliente usava amarelo) */ --gold : var(--brand-orange); /* ── Claro — cinza-esverdeado sóbrio, sem branco puro no fundo ── */ --bg : #E7EEED; --surface : #F5F7F7; --surface-2 : #EDF2F1; --surface-3 : #E0E8E7; --border : #CBD8D6; --border-2 : #B4C5C2; --edge : var(--border); --text : #0B202E; --text-sub : #2E4552; --text-muted : #5B6F79; --table-stripe: #EEF3F2; --table-hover : #E3ECEA; --primary : #009C9A; --primary-dark: #067F7D; /* texto/link teal legível no claro */ --primary-soft: rgba(0, 156, 154, .12); --primary-ring: rgba(0, 156, 154, .22); --link : #067F7D; --link-hover : #0D4448; --accent-rgb : 0 156 154; --orange : #FF5722; --orange-soft : rgba(255, 87, 34, .14); --wa : #25D366; --wa-soft : rgba(37, 211, 102, .14); --success : #15803D; --success-soft: rgba(21, 128, 61, .12); --warning : #B45309; --warning-soft: rgba(180, 83, 9, .12); --error : #B91C1C; --error-soft : rgba(185, 28, 28, .10); --info : #1D4ED8; --info-soft : rgba(29, 78, 216, .12); --shadow-sm : 0 1px 3px rgba(11, 32, 46, .06), 0 1px 2px rgba(11, 32, 46, .04); --shadow-md : 0 4px 14px rgba(11, 32, 46, .08), 0 2px 6px rgba(11, 32, 46, .05); --shadow-lg : 0 10px 32px rgba(11, 32, 46, .10), 0 4px 12px rgba(11, 32, 46, .06); --shadow-xl : 0 20px 52px rgba(11, 32, 46, .13), 0 8px 20px rgba(11, 32, 46, .07); /* ── Chrome (header 2 linhas, drawer) — petróleo, igual nos dois temas ── */ --sb-bg : #0D4448; --sb-surface : #124F53; --sb-surface-2 : #175C60; --sb-border : #1F6B6F; --sb-text : #A9CBCA; --sb-text-strong : #E6F3F2; --sb-text-muted : #6F9695; --sb-active : #2ABBB9; --sb-active-soft : rgba(42, 187, 185, .14); /* Linha 2 do header (itens) — faixa clara no claro, petróleo-claro no escuro */ --subrow-bg : #DDE9E8; --subrow-text : #2C4A4D; /* ── Gráficos ─────────────────────────────────────────── */ --chart-1 : #009C9A; /* teal */ --chart-2 : #FF5722; /* laranja */ --chart-3 : #2F9E6E; /* verde */ --chart-4 : #6E63C9; /* índigo */ --chart-5 : #3B8BC2; /* azul */ --series-1 : #0D4448; --series-2 : #0E6A69; --series-3 : #009C9A; --series-4 : #2ABBB9; --series-5 : #5BCFCD; --series-6 : #8CDFDD; --series-7 : #B7ECEB; --series-8 : #DDF6F5; --series-despesa-1 : #8A2A0E; --series-despesa-2 : #B5391A; --series-despesa-3 : #E04A22; --series-despesa-4 : #FF5722; --series-despesa-5 : #FF7A50; --series-despesa-6 : #FF9E7E; --series-despesa-7 : #FFC2AD; --series-despesa-8 : #FFE3DA; --series-pessoas-1 : #0B202E; --series-pessoas-2 : #0D4448; --series-pessoas-3 : #1B5A5F; --series-pessoas-4 : #2E7075; --series-pessoas-5 : #4A878B; --series-pessoas-6 : #6E9FA2; --series-pessoas-7 : #98BCBE; --series-pessoas-8 : #C8DCDD; /* ── Papéis (chips) ───────────────────────────────────── */ --role-admin : #6E63C9; --role-admin-soft : rgba(110, 99, 201, .14); --role-gerente : #067F7D; --role-gerente-soft : rgba(6, 127, 125, .14); --role-sup : #3B8BC2; --role-sup-soft : rgba(59, 139, 194, .14); --role-cons : #2F9E6E; --role-cons-soft : rgba(47, 158, 110, .14); /* ── Aliases (nomes herdados do Gestor/Uninter usados pelos rp-*) ── */ --background : var(--bg); --bg-primary : var(--bg); --bg-secondary : var(--surface); --foreground : var(--text); --card : var(--surface); --card-foreground : var(--text); --popover : var(--surface); --popover-foreground : var(--text); --muted : var(--surface-2); --muted-foreground : var(--text-muted); --secondary : var(--surface-3); --secondary-foreground: var(--text-sub); --input : var(--border-2); --surface2 : var(--surface-2); --text-primary : var(--text); --text-secondary : var(--text-muted); --primary-foreground : #FFFFFF; --accent : var(--primary); --accent-foreground : #FFFFFF; --accent-2 : var(--primary-dark); --accent-grad-a : var(--primary); --accent-grad-b : var(--primary-dark); --accent-ring : var(--primary-ring); --accent-soft : var(--primary-soft); --ring : var(--primary); --destructive : var(--error); --destructive-foreground: #FFFFFF; --danger : var(--error); --danger-soft : var(--error-soft); --sidebar : var(--sb-bg); --sidebar-foreground : var(--sb-text); --sidebar-primary : var(--sb-active); --sidebar-accent : var(--sb-surface); --sidebar-border : var(--sb-border); --sidebar-ring : var(--sb-active); --navy : var(--sb-bg); --amber : var(--warning); --amber-soft : var(--warning-soft); --blue : var(--chart-5); --blue-soft : rgba(59, 139, 194, .14); --cyan : var(--chart-1); --cyan-soft : var(--primary-soft); --green : var(--chart-3); --green-soft : rgba(47, 158, 110, .14); --indigo : var(--chart-4); --indigo-soft : rgba(110, 99, 201, .14); --purple : var(--chart-4); --purple-soft : rgba(110, 99, 201, .14); --fb : #1877F2; --fb-soft : rgba(24, 119, 242, .12); } .dark { /* ── Escuro — petróleo profundo (fundo #0B202E do kit) ── */ --bg : #0B202E; --surface : #12293A; --surface-2 : #173245; --surface-3 : #1D3D51; --border : #27495D; --border-2 : #345F75; --text : #E6EEF1; --text-sub : #B5C7CE; --text-muted : #8099A4; --table-stripe: #12293A; --table-hover : #173245; --primary : #2ABBB9; --primary-dark: #009C9A; --primary-soft: rgba(42, 187, 185, .14); --primary-ring: rgba(42, 187, 185, .28); --link : #4FD0CE; --link-hover : #8AE3E1; --accent-rgb : 42 187 185; --orange : #FF7A50; --orange-soft : rgba(255, 122, 80, .16); --success : #4ADE80; --success-soft: rgba(74, 222, 128, .12); --warning : #FCD34D; --warning-soft: rgba(252, 211, 77, .12); --error : #F87171; --error-soft : rgba(248, 113, 113, .10); --info : #60A5FA; --info-soft : rgba(96, 165, 250, .12); --shadow-sm : 0 1px 4px rgba(0, 0, 0, .40); --shadow-md : 0 4px 18px rgba(0, 0, 0, .50); --shadow-lg : 0 12px 42px rgba(0, 0, 0, .60); --shadow-xl : 0 24px 66px rgba(0, 0, 0, .70); --subrow-bg : var(--sb-surface); --subrow-text : var(--sb-text-strong); --role-gerente : #2ABBB9; --role-gerente-soft : rgba(42, 187, 185, .16); --role-sup : #60A5FA; --role-sup-soft : rgba(96, 165, 250, .16); --role-cons : #4ADE80; --role-cons-soft : rgba(74, 222, 128, .16); --role-admin : #A79EF5; --role-admin-soft : rgba(167, 158, 245, .16); } /* ============================================================ BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-sans); background: var(--bg); color: var(--text); min-height: 100vh; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; } /* Numerais tabulares — KPIs, contadores, valores alinhados */ .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Links inline — sobrio, navy-leaning */ a.rp-link { color: var(--link); text-underline-offset: 2px; word-break: break-all; } a.rp-link:hover { color: var(--link-hover); } /* ============================================================ SCROLLBAR ============================================================ */ * { scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 99px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ============================================================ COMPONENTES rp-* GENERICOS (compartilhados entre telas) ============================================================ */ /* Card */ .rp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-sm); } /* Primary CTA button */ .rp-btn-primary { display: inline-flex; align-items: center; gap: 7px; background: linear-gradient(135deg, var(--accent-grad-a), var(--accent-grad-b)); color: var(--primary-foreground); font-family: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 18px; border-radius: 10px; border: none; cursor: pointer; transition: filter .14s, box-shadow .14s; text-decoration: none; } .rp-btn-primary:hover { filter: brightness(1.05); box-shadow: 0 6px 20px var(--accent-soft); } /* Secondary button */ .rp-btn-secondary { display: inline-flex; align-items: center; gap: 7px; background: var(--surface-2); color: var(--text-sub); font-family: inherit; font-size: 13.5px; font-weight: 500; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border); cursor: pointer; transition: background .13s, color .13s, border-color .13s; text-decoration: none; } .rp-btn-secondary:hover { background: var(--surface-3); color: var(--text); border-color: var(--border-2); } /* Danger text button */ .rp-btn-danger { display: inline-flex; align-items: center; gap: 6px; color: var(--text-muted); font-family: inherit; font-size: 13px; font-weight: 500; padding: 7px 12px; border-radius: 8px; border: none; background: none; cursor: pointer; transition: background .13s, color .13s; text-decoration: none; } .rp-btn-danger:hover { background: var(--error-soft); color: var(--error); } /* Form input */ .rp-input { width: 100%; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 9px 14px; font-family: inherit; font-size: 13.5px; color: var(--text); outline: none; transition: border-color .14s, box-shadow .14s; } .rp-input::placeholder { color: var(--text-muted); } .rp-input:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } /* Form label */ .rp-label { display: block; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); margin-bottom: 6px; } /* Field group */ .rp-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; } /* Alert/Toast inline */ .rp-alert { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-radius: 10px; font-size: 13.5px; margin-bottom: 20px; } .rp-alert.error { background: var(--error-soft); color: var(--error); border: 1px solid rgba(220,38,38,.20); } .rp-alert.success { background: var(--success-soft); color: var(--success); border: 1px solid rgba(16,185,129,.20); } .rp-alert.info { background: var(--info-soft); color: var(--info); border: 1px solid rgba(29,78,216,.20); } /* Table */ .rp-table { width: 100%; border-collapse: collapse; } .rp-table th { text-align: left; padding: 12px 20px; font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted); border-bottom: 1px solid var(--border); white-space: nowrap; } .rp-table td { padding: 14px 20px; font-size: 13.5px; color: var(--text-sub); border-bottom: 1px solid var(--border); vertical-align: middle; } .rp-table tbody tr:last-child td { border-bottom: none; } .rp-table tbody tr:hover td { background: var(--surface-2); } /* Status badge */ .rp-status { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; padding: 3px 10px; border-radius: 6px; } .rp-status::before { content: ''; width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; } .rp-status.active { background: var(--success-soft); color: var(--success); } .rp-status.active::before { background: var(--success); } .rp-status.inactive { background: var(--error-soft); color: var(--error); } .rp-status.inactive::before { background: var(--error); } .rp-status.warning { background: var(--warning-soft); color: var(--warning); } .rp-status.warning::before { background: var(--warning); } /* Section header */ .rp-section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; flex-wrap: wrap; gap: 12px; } /* Empty state */ .rp-empty { text-align: center; padding: 56px 20px; color: var(--text-muted); } .rp-empty i { font-size: 36px; margin-bottom: 12px; display: block; } .rp-empty p { font-size: 14px; } /* Page heading */ .rp-page-heading { font-size: 20px; font-weight: 700; color: var(--text); letter-spacing: -.3px; } .rp-page-sub { font-size: 13px; color: var(--text-muted); margin-top: 3px; } /* Toast slide-in */ @keyframes rpSlideIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .rp-toast { position: fixed; bottom: 24px; right: 24px; z-index: 9999; padding: 13px 20px; border-radius: 12px; font-size: 13.5px; font-weight: 600; color: var(--primary-foreground); box-shadow: 0 8px 32px rgba(0, 0, 0, .28); display: flex; align-items: center; gap: 10px; max-width: 380px; animation: rpSlideIn .25s ease; transition: opacity .3s; } .rp-toast.success { background: var(--success); } .rp-toast.error { background: var(--error); } .rp-toast.info { background: var(--info); } /* Avatar (brand gradient) */ .rp-avatar { width: 32px; height: 32px; border-radius: 50%; position: relative; overflow: hidden; background: linear-gradient(135deg, var(--accent-grad-a) 0%, var(--accent-grad-b) 100%); display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; color: var(--primary-foreground); flex-shrink: 0; box-shadow: 0 0 0 2px var(--accent-soft); letter-spacing: 0; } /* Botao de alternancia de tema (claro/escuro) */ .rp-theme-btn { position: fixed; top: 16px; right: 16px; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text-muted); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 14px; transition: background .2s, color .2s, border-color .2s; box-shadow: 0 1px 4px rgba(0, 0, 0, .08); } .rp-theme-btn:hover { color: var(--accent); border-color: var(--accent); } /* ============================================================ COMPONENTES ADICIONAIS — telas do app ============================================================ */ /* Select */ .rp-select { width: 100%; padding: 10px 32px 10px 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; color: var(--text); font-size: 13.5px; font-family: inherit; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23888' d='M8 11L3 6h10z'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 14px; cursor: pointer; transition: border-color .15s; outline: none; } .rp-select:focus { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); } .rp-select:disabled { opacity: .45; cursor: default; } /* Button size modifier */ .rp-btn-sm { padding: 6px 12px; font-size: 12.5px; border-radius: 8px; } /* Botao de acao icone-only em linha de tabela — portado de CRM-CLIENTE (empresas.html: .action-btn). Editar = padrao (hover accent); .danger = excluir/desativar (hover error); .success = reativar/restaurar (hover success). Funciona em e