/** * DiZaps — tema claro / escuro (tokens globais) * Mobile-first design system * Aplicar em */ /* =================================================== BREAKPOINTS (mobile-first) =================================================== */ /* xs: < 400px (mobile pequeno) sm: 400-639px (mobile padrão) md: 640-1023px (tablet) lg: 1024-1279px (desktop pequeno) xl: >= 1280px (desktop grande) */ :root, html[data-theme="light"] { color-scheme: light; /* Cores */ --dz-bg: #eef3f1; --dz-bg-elevated: #f7faf8; --dz-surface: #ffffff; --dz-surface-2: #f4f7f5; --dz-ink: #0f1f1a; --dz-ink-soft: #334155; --dz-muted: #64748b; --dz-line: #d7e3dd; --dz-line-strong: #b9cdc3; --dz-teal: #0d9488; --dz-teal-dark: #0f766e; --dz-teal-soft: rgba(13, 148, 136, 0.12); --dz-lime: #84cc16; --dz-danger: #dc2626; --dz-warn: #d97706; --dz-ok: #059669; /* Sombras */ --dz-shadow: 0 1px 2px rgba(15, 31, 26, 0.04), 0 12px 32px rgba(15, 31, 26, 0.06); --dz-shadow-lg: 0 24px 48px rgba(15, 31, 26, 0.14); --dz-shadow-sm: 0 1px 2px rgba(15, 31, 26, 0.04), 0 4px 12px rgba(15, 31, 26, 0.04); /* Raios (responsivos) */ --dz-radius: 14px; --dz-radius-sm: 10px; --dz-radius-lg: 18px; /* Espaçamento fluido (mobile-first) */ --dz-space-xs: 0.25rem; --dz-space-sm: 0.5rem; --dz-space-md: 0.75rem; --dz-space-lg: 1rem; --dz-space-xl: 1.5rem; --dz-space-2xl: 2rem; --dz-space-3xl: 3rem; /* Tipografia fluida */ --dz-text-xs: clamp(0.7rem, 1.8vw, 0.75rem); --dz-text-sm: clamp(0.82rem, 2vw, 0.88rem); --dz-text-base: clamp(0.92rem, 2.2vw, 1rem); --dz-text-lg: clamp(1.05rem, 2.5vw, 1.15rem); --dz-text-xl: clamp(1.2rem, 3vw, 1.4rem); --dz-text-2xl: clamp(1.5rem, 4vw, 1.85rem); --dz-text-3xl: clamp(1.8rem, 5vw, 2.5rem); --dz-text-4xl: clamp(2.2rem, 6vw, 3.2rem); /* Larguras container responsivas */ --dz-container-sm: 640px; --dz-container-md: 768px; --dz-container-lg: 1024px; --dz-container-xl: 1280px; /* Touch targets (mínimo 44x44px) */ --dz-touch-min: 44px; --dz-side-bg: #f3f7f5; --dz-side-ink: #0f1f1a; --dz-side-muted: #5c7369; --dz-side-line: rgba(15, 31, 26, 0.1); --dz-side-hover: rgba(13, 148, 136, 0.1); --dz-side-active-from: #0d9488; --dz-side-active-to: #0f766e; --dz-side-foot: rgba(15, 31, 26, 0.03); --dz-side-avatar-bg: rgba(13, 148, 136, 0.14); --dz-side-avatar-ink: #0f766e; --dz-input-bg: #ffffff; --dz-input-border: #c9d8d1; --dz-focus: rgba(13, 148, 136, 0.35); --dz-modal-backdrop: rgba(15, 23, 42, 0.55); /* aliases usados por ops/panel */ --ops-ink: var(--dz-ink); --ops-muted: var(--dz-muted); --ops-line: var(--dz-line); --ops-card: var(--dz-surface); --ops-bg: var(--dz-bg); --ops-teal: var(--dz-teal); --ops-teal-deep: var(--dz-teal-dark); --ops-shadow: var(--dz-shadow); --bg: var(--dz-bg); --bg2: var(--dz-bg-elevated); --ink: var(--dz-ink); --muted: var(--dz-muted); --teal: var(--dz-teal); --teal-dark: var(--dz-teal-dark); --card: var(--dz-surface); --line: var(--dz-line); } html[data-theme="dark"] { color-scheme: dark; /* Cores */ --dz-bg: #0b1210; --dz-bg-elevated: #111a17; --dz-surface: #15201c; --dz-surface-2: #1a2722; --dz-ink: #e8f5ef; --dz-ink-soft: #c5d9cf; --dz-muted: #9bb0a6; --dz-line: #2a3c35; --dz-line-strong: #3d564b; --dz-teal: #2dd4bf; --dz-teal-dark: #5eead4; --dz-teal-soft: rgba(45, 212, 191, 0.16); --dz-lime: #a3e635; --dz-danger: #f87171; --dz-warn: #fbbf24; --dz-ok: #34d399; /* Sombras */ --dz-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px rgba(0, 0, 0, 0.35); --dz-shadow-lg: 0 24px 48px rgba(0, 0, 0, 0.5); --dz-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3); --dz-side-bg: #060c0a; --dz-side-ink: #dceee6; --dz-side-muted: #7f9b90; --dz-side-line: rgba(255, 255, 255, 0.07); --dz-side-hover: rgba(255, 255, 255, 0.08); --dz-side-active-from: #059669; --dz-side-active-to: #61896f; --dz-side-foot: rgba(0, 0, 0, 0.22); --dz-side-avatar-bg: rgba(163, 230, 53, 0.22); --dz-side-avatar-ink: #d9f99d; --dz-input-bg: #101916; --dz-input-border: #2a3c35; --dz-focus: rgba(45, 212, 191, 0.4); --dz-modal-backdrop: rgba(0, 0, 0, 0.65); /* aliases (obrigatório no escuro — senão fica texto claro em fundo claro) */ --ops-ink: var(--dz-ink); --ops-muted: var(--dz-muted); --ops-line: var(--dz-line); --ops-card: var(--dz-surface); --ops-bg: var(--dz-bg); --ops-teal: var(--dz-teal); --ops-teal-deep: var(--dz-teal-dark); --ops-shadow: var(--dz-shadow); --bg: var(--dz-bg); --bg2: var(--dz-bg-elevated); --ink: var(--dz-ink); --muted: var(--dz-muted); --teal: var(--dz-teal); --teal-dark: var(--dz-teal-dark); --card: var(--dz-surface); --line: var(--dz-line); --err: #f87171; --ok: #34d399; } /* —— Utilitários de formulário modular (mobile-first) —— */ .ui-page-head { display: flex; flex-direction: column; gap: var(--dz-space-md); margin: 0 0 var(--dz-space-xl); } @media (min-width: 640px) { .ui-page-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--dz-space-lg) var(--dz-space-xl); } } .ui-page-head h1 { margin: 0 0 var(--dz-space-sm); font-family: var(--font-display), sans-serif; font-size: var(--dz-text-2xl); letter-spacing: -0.02em; color: var(--dz-ink); line-height: 1.15; } .ui-page-head p { margin: 0; color: var(--dz-muted); font-size: var(--dz-text-sm); max-width: 42rem; line-height: 1.5; } .ui-page-actions { display: flex; flex-wrap: wrap; gap: var(--dz-space-sm); align-items: center; width: 100%; } @media (min-width: 640px) { .ui-page-actions { width: auto; } } .ui-stack { display: flex; flex-direction: column; gap: var(--dz-space-lg); max-width: 100%; width: 100%; } @media (min-width: 640px) { .ui-stack { max-width: 960px; } } .ui-stack--wide { max-width: 100%; } @media (min-width: 1024px) { .ui-stack--wide { max-width: 1100px; } } .ui-card { background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: var(--dz-radius); box-shadow: var(--dz-shadow-sm); padding: var(--dz-space-lg) var(--dz-space-lg); } @media (min-width: 640px) { .ui-card { padding: var(--dz-space-xl) calc(var(--dz-space-xl) * 0.9); box-shadow: var(--dz-shadow); } } .ui-card-head { display: flex; flex-direction: column; gap: var(--dz-space-md); margin-bottom: var(--dz-space-lg); padding-bottom: var(--dz-space-md); border-bottom: 1px solid var(--dz-line); } @media (min-width: 640px) { .ui-card-head { flex-direction: row; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--dz-space-md) var(--dz-space-lg); } } .ui-card-head h2, .ui-card-head h3 { margin: 0; font-family: var(--font-display), sans-serif; font-size: var(--dz-text-lg); color: var(--dz-ink); line-height: 1.3; } .ui-card-head p { margin: var(--dz-space-xs) 0 0; color: var(--dz-muted); font-size: var(--dz-text-sm); line-height: 1.4; } .ui-card-body { min-width: 0; } .ui-form-grid { display: grid; grid-template-columns: 1fr; gap: var(--dz-space-md) var(--dz-space-lg); } @media (min-width: 640px) { .ui-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .ui-form-grid .ui-span-2 { grid-column: 1 / -1; } .ui-field { display: flex !important; flex-direction: column; gap: var(--dz-space-sm); margin: 0 !important; min-width: 0; font-weight: 600; font-size: var(--dz-text-sm); color: var(--dz-ink-soft); } .ui-field input, .ui-field select, .ui-field textarea { width: 100%; max-width: 100%; box-sizing: border-box; margin: 0; padding: var(--dz-space-md) var(--dz-space-md); min-height: var(--dz-touch-min); border-radius: var(--dz-radius-sm); border: 1.5px solid var(--dz-input-border); background: var(--dz-input-bg); color: var(--dz-ink); font: inherit; font-weight: 400; font-size: var(--dz-text-base); transition: border-color 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 640px) { .ui-field input, .ui-field select, .ui-field textarea { min-height: auto; padding: 0.7rem 0.8rem; } } .ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus { outline: none; border-color: var(--dz-teal); box-shadow: 0 0 0 3px var(--dz-focus); } .ui-hint { margin: var(--dz-space-xs) 0 0; color: var(--dz-muted); font-size: var(--dz-text-xs); line-height: 1.4; font-weight: 400; } .ui-hint code { font-size: 0.78rem; background: var(--dz-surface-2); padding: 0.1rem 0.35rem; border-radius: 6px; color: var(--dz-ink-soft); } .ui-check { display: flex !important; gap: var(--dz-space-md); align-items: flex-start; margin: 0 !important; padding: var(--dz-space-md); border-radius: var(--dz-radius-sm); border: 1.5px solid var(--dz-line); background: var(--dz-surface-2); font-weight: 500; font-size: var(--dz-text-sm); color: var(--dz-ink-soft); cursor: pointer; min-height: var(--dz-touch-min); transition: border-color 0.2s ease, background-color 0.2s ease; } .ui-check:hover { border-color: var(--dz-teal-dark); background: var(--dz-surface); } .ui-check input { margin: 0.15rem 0 0; flex: 0 0 auto; width: 1.15rem; height: 1.15rem; accent-color: var(--dz-teal); } .ui-check span { flex: 1; min-width: 0; line-height: 1.4; } .ui-sticky-actions { position: sticky; bottom: var(--dz-space-md); z-index: 5; display: flex; flex-direction: column; gap: var(--dz-space-sm); margin-top: var(--dz-space-md); padding: var(--dz-space-md); background: color-mix(in srgb, var(--dz-surface) 95%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--dz-line); border-radius: var(--dz-radius); box-shadow: var(--dz-shadow-lg); } @media (min-width: 640px) { .ui-sticky-actions { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: var(--dz-space-sm); padding: var(--dz-space-md) var(--dz-space-lg); } } /* —— Steps / onboarding (mobile-first) —— */ .ui-steps { display: grid; grid-template-columns: 1fr; gap: var(--dz-space-md); } @media (min-width: 768px) { .ui-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1024px) { .ui-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .ui-step { display: flex; flex-direction: column; gap: var(--dz-space-sm); padding: var(--dz-space-lg); background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: var(--dz-radius); box-shadow: var(--dz-shadow-sm); min-width: 0; transition: transform 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 640px) { .ui-step { padding: var(--dz-space-lg) calc(var(--dz-space-lg) * 1.1); gap: var(--dz-space-md); } } .ui-step:hover { transform: translateY(-2px); box-shadow: var(--dz-shadow); } .ui-step.is-done { border-color: color-mix(in srgb, var(--dz-ok) 45%, var(--dz-line)); background: color-mix(in srgb, var(--dz-ok) 8%, var(--dz-surface)); } .ui-step-top { display: flex; align-items: center; justify-content: space-between; gap: var(--dz-space-sm); } .ui-step-num { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 999px; background: var(--dz-teal-soft); color: var(--dz-teal-dark); font-size: var(--dz-text-sm); font-weight: 800; } .ui-step.is-done .ui-step-num { background: color-mix(in srgb, var(--dz-ok) 22%, transparent); color: var(--dz-ok); } .ui-step-badge { font-size: var(--dz-text-xs); font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 999px; background: var(--dz-surface-2); color: var(--dz-muted); } .ui-step.is-done .ui-step-badge { background: color-mix(in srgb, var(--dz-ok) 18%, transparent); color: var(--dz-ok); } .ui-step h3 { margin: 0; font-family: var(--font-display), sans-serif; font-size: var(--dz-text-lg); color: var(--dz-ink); line-height: 1.3; } .ui-step p { margin: 0; color: var(--dz-muted); font-size: var(--dz-text-sm); line-height: 1.45; flex: 1; } .ui-step ol { margin: 0; padding-left: var(--dz-space-xl); color: var(--dz-ink-soft); font-size: var(--dz-text-sm); line-height: 1.5; } .ui-step-actions { display: flex; flex-wrap: wrap; gap: var(--dz-space-sm); margin-top: var(--dz-space-xs); } /* Theme toggle (mobile-friendly) */ .dz-theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: var(--dz-space-sm); border: 1px solid var(--dz-line); background: var(--dz-surface); color: var(--dz-ink-soft); border-radius: 999px; padding: var(--dz-space-sm) var(--dz-space-md); font: inherit; font-size: var(--dz-text-sm); font-weight: 600; cursor: pointer; box-shadow: var(--dz-shadow-sm); min-height: var(--dz-touch-min); transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease; } @media (min-width: 640px) { .dz-theme-toggle { min-height: auto; padding: 0.4rem 0.75rem; } } .dz-theme-toggle:hover { border-color: var(--dz-teal); color: var(--dz-teal-dark); box-shadow: var(--dz-shadow); } .dz-theme-toggle svg { width: 18px; height: 18px; flex: 0 0 auto; } @media (min-width: 640px) { .dz-theme-toggle svg { width: 16px; height: 16px; } } .side .dz-theme-toggle { width: 100%; justify-content: flex-start; background: var(--dz-side-hover); border-color: var(--dz-side-line); color: var(--dz-side-ink); box-shadow: none; } .side .dz-theme-toggle:hover { background: color-mix(in srgb, var(--dz-teal) 18%, transparent); border-color: color-mix(in srgb, var(--dz-teal) 40%, var(--dz-side-line)); color: var(--dz-side-ink); } .panel-shell.is-collapsed .side .dz-theme-toggle .dz-theme-label, body.panel-collapsed .side .dz-theme-toggle .dz-theme-label { display: none; } .panel-shell.is-collapsed .side .dz-theme-toggle, body.panel-collapsed .side .dz-theme-toggle { justify-content: center; padding: 0.55rem; } body.is-panel .ops-home-tile, body.is-panel .ops-kpi { background: var(--dz-surface); border-color: var(--dz-line); color: var(--dz-ink); } body.is-panel .ops-home-tile span, body.is-panel .ops-kpi span, body.is-panel .ops-kpi em { color: var(--dz-muted); } body.is-panel .ops-section-title, body.is-panel .ops-home-hero h1 { color: var(--dz-ink); } body.is-panel .ops-home-hero p { color: var(--dz-muted); } body.is-panel .google-account-badge { background: var(--dz-surface-2); color: var(--dz-muted); } body.is-panel .google-account-badge.is-on { background: color-mix(in srgb, var(--dz-ok) 20%, transparent); color: var(--dz-ok); } body.is-panel .panel-main { background: var(--dz-bg) !important; color: var(--dz-ink); } body.is-panel .panel-card, body.is-panel .ops-card { background: var(--dz-surface); border-color: var(--dz-line); color: var(--dz-ink); } body.is-panel .hint { color: var(--dz-muted); } body.is-panel label { color: var(--dz-ink-soft); } body.is-panel input, body.is-panel select, body.is-panel textarea { background: var(--dz-input-bg); border-color: var(--dz-input-border); color: var(--dz-ink); } body.is-panel .btn-ghost { border-color: var(--dz-line); color: var(--dz-ink); background: transparent; } body.is-panel .btn-primary { background: var(--dz-teal); color: #fff; } body.is-panel .btn-primary:hover { background: var(--dz-teal-dark); } /* Sidebar tokens */ body.is-panel .side { background: var(--dz-side-bg) !important; color: var(--dz-side-ink); border-right-color: var(--dz-side-line); } body.is-panel .side .side-brand, body.is-panel .side .side-brand-name, body.is-panel .side .side-user-name { color: var(--dz-side-ink) !important; } body.is-panel .side .side-brand-sub, body.is-panel .side .side-section-title, body.is-panel .side .side-user-role { color: var(--dz-side-muted) !important; } body.is-panel .side a.side-link { color: var(--dz-side-muted) !important; } body.is-panel .side a.side-link:hover { background: var(--dz-side-hover) !important; color: var(--dz-side-ink) !important; } body.is-panel .side a.side-link.active { background: linear-gradient(90deg, var(--dz-side-active-from), var(--dz-side-active-to)) !important; color: #fff !important; box-shadow: 0 10px 24px color-mix(in srgb, var(--dz-side-active-from) 28%, transparent); } body.is-panel .side .side-top, body.is-panel .side .side-foot { border-color: var(--dz-side-line) !important; } body.is-panel .side .side-foot { background: var(--dz-side-foot) !important; } body.is-panel .side .side-user-avatar { background: var(--dz-side-avatar-bg) !important; color: var(--dz-side-avatar-ink) !important; } body.is-panel .side .side-toggle { border-color: var(--dz-side-line) !important; background: var(--dz-side-hover) !important; color: var(--dz-side-ink) !important; } body.is-panel .side .side-toggle:hover { background: color-mix(in srgb, var(--dz-teal) 18%, transparent) !important; color: var(--dz-side-ink) !important; border-color: color-mix(in srgb, var(--dz-teal) 35%, var(--dz-side-line)) !important; } /* Planos / checkout (conta/plano) */ body.is-panel .ck-card, body.is-panel .ck-modal-sheet { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink); box-shadow: var(--dz-shadow); } body.is-panel .ck-card.is-current { border-color: var(--dz-teal) !important; box-shadow: 0 0 0 2px var(--dz-teal-soft), var(--dz-shadow); } body.is-panel .ck-card h2, body.is-panel .ck-price, body.is-panel .ck-pay-card strong, body.is-panel .ck-field, body.is-panel .ck-section-label { color: var(--dz-ink) !important; } body.is-panel .ck-tag, body.is-panel .ck-cancel-note, body.is-panel .ck-status, body.is-panel .ck-reassure, body.is-panel .ck-price span, body.is-panel .ck-pay-card em { color: var(--dz-muted) !important; } body.is-panel .ck-banner { background: var(--dz-surface); border: 1px solid var(--dz-line); color: var(--dz-ink); } body.is-panel .ck-banner.is-trial { background: color-mix(in srgb, var(--dz-warn) 12%, var(--dz-surface)); border-color: color-mix(in srgb, var(--dz-warn) 35%, var(--dz-line)); } body.is-panel .ck-banner.is-plan { background: color-mix(in srgb, var(--dz-ok) 12%, var(--dz-surface)); border-color: color-mix(in srgb, var(--dz-ok) 35%, var(--dz-line)); } body.is-panel .ck-pay-card { border-color: var(--dz-line) !important; background: var(--dz-surface) !important; } body.is-panel .ck-pay-opt input:checked + .ck-pay-card { border-color: var(--dz-teal) !important; background: var(--dz-teal-soft) !important; box-shadow: 0 0 0 2px var(--dz-teal-soft); } body.is-panel .ck-terms { background: var(--dz-surface-2) !important; border-color: var(--dz-line) !important; color: var(--dz-ink-soft) !important; } body.is-panel .ck-field input { background: var(--dz-input-bg) !important; border-color: var(--dz-input-border) !important; color: var(--dz-ink) !important; } body.is-panel .ck-modal-x { background: var(--dz-surface-2) !important; color: var(--dz-muted) !important; } body.is-panel .ck-modal-x:hover { background: var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .ck-btn-back { background: var(--dz-surface) !important; color: var(--dz-ink) !important; border-color: var(--dz-line) !important; } body.is-panel .ck-btn-back:hover { background: var(--dz-surface-2) !important; } body.is-panel .ck-btn-pay { background: var(--dz-teal) !important; border-color: var(--dz-teal) !important; color: #fff !important; } body.is-panel .ck-modal-bg { background: var(--dz-modal-backdrop) !important; } body.is-panel .flash.warn, .flash.warn { background: color-mix(in srgb, var(--dz-warn) 14%, var(--dz-surface)) !important; border: 1px solid color-mix(in srgb, var(--dz-warn) 40%, var(--dz-line)); color: var(--dz-warn) !important; } /* Site marketing also follows theme */ html[data-theme="dark"] body:not(.is-panel) { background: var(--dz-bg); color: var(--dz-ink); } html[data-theme="dark"] .site-header { background: rgba(11, 18, 16, 0.9); border-bottom-color: var(--dz-line); } html[data-theme="dark"] .site-footer { background: var(--dz-bg-elevated); border-top-color: var(--dz-line); } /* —— Tabelas / toolbars do painel (mobile-first) —— */ .ui-toolbar { display: flex; flex-direction: column; gap: var(--dz-space-md); margin-bottom: var(--dz-space-lg); } @media (min-width: 640px) { .ui-toolbar { flex-direction: row; flex-wrap: wrap; align-items: center; } } .ui-toolbar form { display: flex; flex-direction: column; gap: var(--dz-space-sm); flex: 1; min-width: 220px; margin: 0; } @media (min-width: 640px) { .ui-toolbar form { flex-direction: row; flex-wrap: wrap; align-items: center; } } .ui-toolbar input, .ui-toolbar select { width: 100%; flex: 1; min-width: 140px; margin: 0; padding: var(--dz-space-md); min-height: var(--dz-touch-min); border-radius: var(--dz-radius-sm); border: 1.5px solid var(--dz-input-border); background: var(--dz-input-bg); color: var(--dz-ink); font: inherit; } @media (min-width: 640px) { .ui-toolbar input, .ui-toolbar select { max-width: 280px; padding: 0.65rem 0.8rem; min-height: auto; } } .ui-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--dz-line); border-radius: var(--dz-radius); background: var(--dz-surface); box-shadow: var(--dz-shadow-sm); margin: 0 calc(var(--dz-space-lg) * -1); width: calc(100% + var(--dz-space-lg) * 2); } @media (min-width: 640px) { .ui-table-wrap { margin: 0; width: auto; box-shadow: var(--dz-shadow); } } .ui-table, body.is-panel table { width: 100%; min-width: 600px; border-collapse: collapse; font-size: var(--dz-text-sm); background: transparent; } @media (min-width: 640px) { .ui-table, body.is-panel table { min-width: 100%; } } body.is-panel table { border: 1px solid var(--dz-line); border-radius: var(--dz-radius); overflow: hidden; background: var(--dz-surface); box-shadow: var(--dz-shadow-sm); } @media (min-width: 640px) { body.is-panel table { box-shadow: var(--dz-shadow); } } .ui-table th, .ui-table td, body.is-panel table th, body.is-panel table td { padding: var(--dz-space-sm) var(--dz-space-sm); text-align: left; border-bottom: 1px solid var(--dz-line); color: var(--dz-ink); vertical-align: top; font-size: var(--dz-text-xs); } @media (min-width: 640px) { .ui-table th, .ui-table td, body.is-panel table th, body.is-panel table td { padding: 0.75rem 0.9rem; font-size: var(--dz-text-sm); } } .ui-table th, body.is-panel table th { font-size: var(--dz-text-xs); text-transform: uppercase; letter-spacing: 0.04em; color: var(--dz-muted); background: var(--dz-surface-2); font-weight: 700; position: sticky; top: 0; z-index: 1; } .ui-table tr:last-child td, body.is-panel table tr:last-child td { border-bottom: 0; } .ui-table tr:hover td, body.is-panel table tbody tr:hover td { background: color-mix(in srgb, var(--dz-teal) 6%, transparent); } .ui-badge { display: inline-flex; align-items: center; padding: 0.15rem 0.5rem; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: var(--dz-surface-2); color: var(--dz-muted); } .ui-badge.is-warn { background: color-mix(in srgb, var(--dz-warn) 18%, transparent); color: var(--dz-warn); } .ui-badge.is-ok { background: color-mix(in srgb, var(--dz-ok) 18%, transparent); color: var(--dz-ok); } .ui-badge.is-danger { background: color-mix(in srgb, var(--dz-danger) 18%, transparent); color: var(--dz-danger); } .ui-link-row { display: inline-flex; flex-wrap: wrap; gap: 0.35rem 0.65rem; align-items: center; } .ui-link-row a, .ui-link-row .btn-link { color: var(--dz-teal-dark); font-weight: 600; font-size: 0.86rem; } .ui-token { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.82rem; word-break: break-all; padding: 0.9rem 1rem; border-radius: var(--dz-radius-sm); background: var(--dz-surface-2); border: 1px solid var(--dz-line); color: var(--dz-ink); user-select: all; } .ui-section-title { margin: 1.5rem 0 0.75rem; font-family: var(--font-display), sans-serif; font-size: 1.1rem; color: var(--dz-ink); } body.is-panel .panel-section-title { color: var(--dz-ink); } body.is-panel .ops-chip { background: var(--dz-surface); border-color: var(--dz-line); color: var(--dz-muted); } body.is-panel .ops-card, body.is-panel .admin-stat { background: var(--dz-surface); border-color: var(--dz-line); color: var(--dz-ink); } body.is-panel .admin-stat-label, body.is-panel .admin-stat-desc { color: var(--dz-muted); } body.is-panel .admin-stat-value { color: var(--dz-ink); } body.is-panel .usage-cost-table { background: var(--dz-surface); border-color: var(--dz-line); } body.is-panel .token-box { background: var(--dz-surface-2); border: 1px solid var(--dz-line); color: var(--dz-ink); border-radius: var(--dz-radius-sm); padding: 0.9rem 1rem; } /* —— Brand icons / chips —— */ .brand-ico { display: inline-block; vertical-align: middle; flex: 0 0 auto; border-radius: 6px; } .brand-title { display: inline-flex; align-items: center; gap: 0.55rem; } .brand-title-text { line-height: 1.2; } .brand-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.28rem 0.65rem 0.28rem 0.35rem; border-radius: 999px; background: var(--dz-surface-2); border: 1px solid var(--dz-line); color: var(--dz-ink-soft); font-size: 0.78rem; font-weight: 700; line-height: 1; } .brand-chip .brand-ico { border-radius: 4px; } .brand-chip.is-ok { background: color-mix(in srgb, var(--dz-ok) 14%, transparent); border-color: color-mix(in srgb, var(--dz-ok) 35%, var(--dz-line)); color: var(--dz-ok); } .brand-chip.is-warn { background: color-mix(in srgb, var(--dz-warn) 14%, transparent); border-color: color-mix(in srgb, var(--dz-warn) 35%, var(--dz-line)); color: var(--dz-warn); } .brand-chip.is-off { opacity: 0.85; } .ui-step-brand { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.15rem; } .ui-step-brand .brand-ico { width: 28px; height: 28px; border-radius: 8px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.12); } .ui-card-head .brand-title h2, .ui-card-head .brand-title { margin: 0; } .ui-card-head-brand { display: flex; align-items: flex-start; gap: 0.75rem; } .ui-card-head-brand .brand-ico { width: 36px; height: 36px; border-radius: 10px; box-shadow: 0 4px 12px rgba(15, 23, 42, 0.1); margin-top: 0.1rem; } .ops-home-tile-ico { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.35rem; } .ops-home-tile-ico .brand-ico { width: 22px; height: 22px; border-radius: 6px; } .btn .brand-ico { margin-right: 0.35rem; border-radius: 4px; } .side-link .brand-ico { width: 18px; height: 18px; border-radius: 4px; } /* ========================================================= Contraste global — claro e escuro (corrige texto/fundo bagunçados) ========================================================= */ body, body.is-panel { background: var(--dz-bg); color: var(--dz-ink); } body.is-panel .muted, body.is-panel .hint, .muted, .hint { color: var(--dz-muted) !important; } body.is-panel a:not(.btn):not(.side-link):not(.ops-chip):not(.brand) { color: var(--dz-teal-dark); } body.is-panel a:not(.btn):not(.side-link):not(.ops-chip):not(.brand):hover { color: var(--dz-teal); } body.is-panel h1, body.is-panel h2, body.is-panel h3, body.is-panel h4, body.is-panel strong { color: var(--dz-ink); } body.is-panel .btn, .btn { color: inherit; } body.is-panel .btn-primary, .btn-primary { background: var(--dz-teal) !important; border-color: transparent !important; color: #fff !important; } html[data-theme="dark"] body.is-panel .btn-primary, html[data-theme="dark"] .btn-primary { color: #042f2e !important; font-weight: 700; } body.is-panel .btn-ghost, .btn-ghost, body.is-panel .btn:not(.btn-primary):not(.btn-danger) { background: var(--dz-surface) !important; border: 1px solid var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .btn-danger, .btn-danger { background: color-mix(in srgb, var(--dz-danger) 16%, var(--dz-surface)) !important; border: 1px solid color-mix(in srgb, var(--dz-danger) 40%, var(--dz-line)) !important; color: var(--dz-danger) !important; } body.is-panel .flash.ok, .flash.ok { background: color-mix(in srgb, var(--dz-ok) 16%, var(--dz-surface)) !important; border: 1px solid color-mix(in srgb, var(--dz-ok) 35%, var(--dz-line)); color: var(--dz-ok) !important; } body.is-panel .flash.warn, .flash.warn { background: color-mix(in srgb, var(--dz-warn) 16%, var(--dz-surface)) !important; border: 1px solid color-mix(in srgb, var(--dz-warn) 35%, var(--dz-line)); color: var(--dz-warn) !important; } body.is-panel .flash.err, .flash.err, .flash.error { background: color-mix(in srgb, var(--dz-danger) 16%, var(--dz-surface)) !important; border: 1px solid color-mix(in srgb, var(--dz-danger) 35%, var(--dz-line)); color: var(--dz-danger) !important; } body.is-panel .badge, .badge { background: var(--dz-surface-2) !important; color: var(--dz-ink-soft) !important; border: 1px solid var(--dz-line); } body.is-panel code, code { background: var(--dz-surface-2); color: var(--dz-ink-soft); } /* Cards / tiles / KPIs — sempre tokens */ body.is-panel .panel-card, body.is-panel .ui-card, body.is-panel .ops-card, body.is-panel .ops-home-tile, body.is-panel .ops-kpi, body.is-panel .admin-stat, body.is-panel .stat, body.is-panel .kanban-modal-card, body.is-panel .kanban-card { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .ops-home-tile span, body.is-panel .ops-home-tile strong, body.is-panel .ops-kpi strong, body.is-panel .ops-kpi span, body.is-panel .ops-kpi em { color: inherit; } body.is-panel .ops-home-tile span, body.is-panel .ops-kpi span, body.is-panel .ops-kpi em { color: var(--dz-muted) !important; } body.is-panel .ops-home-tile strong, body.is-panel .ops-kpi strong { color: var(--dz-ink) !important; } /* Tabelas */ body.is-panel table, body.is-panel .ui-table, body.is-panel .ops-table { background: var(--dz-surface) !important; color: var(--dz-ink) !important; } body.is-panel table th, body.is-panel .ops-table th { background: var(--dz-surface-2) !important; color: var(--dz-muted) !important; border-color: var(--dz-line) !important; } body.is-panel table td, body.is-panel .ops-table td { color: var(--dz-ink) !important; border-color: var(--dz-line) !important; } body.is-panel table tbody tr:hover td, body.is-panel .ops-table tbody tr:hover { background: color-mix(in srgb, var(--dz-teal) 8%, var(--dz-surface)) !important; } /* Inputs / selects */ body.is-panel input:not([type="checkbox"]):not([type="radio"]), body.is-panel select, body.is-panel textarea, .auth-card input, .auth-card select, .auth-card textarea { background: var(--dz-input-bg) !important; border-color: var(--dz-input-border) !important; color: var(--dz-ink) !important; } body.is-panel input::placeholder, body.is-panel textarea::placeholder { color: var(--dz-muted) !important; opacity: 0.85; } body.is-panel option { background: var(--dz-surface); color: var(--dz-ink); } /* Status / tags claros forçados a contrastar */ body.is-panel .ops-status, body.is-panel .ops-tag, body.is-panel .ops-sev, body.is-panel .ops-delta, body.is-panel .aib-badge { border: 1px solid transparent; } html[data-theme="dark"] body.is-panel .ops-status.is-open, html[data-theme="dark"] body.is-panel .ops-sev.is-warn, html[data-theme="dark"] body.is-panel .ops-tag.is-warn { background: color-mix(in srgb, var(--dz-warn) 18%, var(--dz-surface)) !important; color: var(--dz-warn) !important; } html[data-theme="dark"] body.is-panel .ops-status.is-closed, html[data-theme="dark"] body.is-panel .ops-sev.is-info, html[data-theme="dark"] body.is-panel .aib-badge.live { background: color-mix(in srgb, var(--dz-ok) 18%, var(--dz-surface)) !important; color: var(--dz-ok) !important; } html[data-theme="dark"] body.is-panel .ops-sev.is-critical, html[data-theme="dark"] body.is-panel .aib-badge.paused { background: color-mix(in srgb, var(--dz-danger) 18%, var(--dz-surface)) !important; color: var(--dz-danger) !important; } /* Ops alerts / age / chips */ html[data-theme="dark"] body.is-panel .ops-chip { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-muted) !important; } html[data-theme="dark"] body.is-panel .ops-chip.is-active { background: linear-gradient(135deg, var(--dz-teal), var(--dz-teal-dark)) !important; color: #042f2e !important; } html[data-theme="dark"] body.is-panel .ops-alert, html[data-theme="dark"] body.is-panel .ops-alert-item, html[data-theme="dark"] body.is-panel .ops-age.is-hot { background: color-mix(in srgb, var(--dz-danger) 12%, var(--dz-surface)) !important; border-color: color-mix(in srgb, var(--dz-danger) 35%, var(--dz-line)) !important; color: var(--dz-ink) !important; } html[data-theme="dark"] body.is-panel .ops-alert strong, html[data-theme="dark"] body.is-panel .ops-alert-item strong, html[data-theme="dark"] body.is-panel .ops-age.is-hot strong { color: var(--dz-danger) !important; } /* Kanban */ body.is-panel .kanban-col, body.is-panel .kanban-modal-card { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .kanban-col-head h2, body.is-panel .kanban-card-title { color: var(--dz-ink) !important; } body.is-panel .kanban-count { color: var(--dz-muted) !important; } body.is-panel .kanban-modal { background: transparent; } body.is-panel .kanban-modal-backdrop { background: var(--dz-modal-backdrop) !important; } /* Progress / steps */ .ui-progress { height: 6px; border-radius: 999px; background: var(--dz-surface-2); overflow: hidden; min-width: 120px; flex: 1; } .ui-progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--dz-teal), var(--dz-lime)); border-radius: inherit; } /* Site / auth no escuro */ html[data-theme="dark"] .auth-card, html[data-theme="dark"] .panel-card, html[data-theme="dark"] .plan-card, html[data-theme="dark"] .feat-card, html[data-theme="dark"] .pain-card { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } html[data-theme="dark"] .auth-card input, html[data-theme="dark"] .auth-card select, html[data-theme="dark"] form input:not([type="checkbox"]):not([type="radio"]), html[data-theme="dark"] form select, html[data-theme="dark"] form textarea { background: var(--dz-input-bg) !important; border-color: var(--dz-input-border) !important; color: var(--dz-ink) !important; } html[data-theme="dark"] .site-footer { background: var(--dz-bg-elevated) !important; color: var(--dz-muted); } html[data-theme="dark"] .section-alt { background: var(--dz-bg-elevated) !important; } html[data-theme="dark"] .proof-item-light, html[data-theme="dark"] .feat-carousel-track, html[data-theme="dark"] .plan-feats .feat-no .feat-mark { background: var(--dz-surface-2) !important; color: var(--dz-ink) !important; } /* AI bot cards no painel (claro/escuro) */ body.is-panel .aib-agent-card, body.is-panel .aib-stat-box, body.is-panel .aib-strategy { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .aib-strategy h1, body.is-panel .aib-strategy h2, body.is-panel .aib-strategy h3, body.is-panel .aib-agent-card summary strong, body.is-panel .aib-conv-row strong { color: var(--dz-ink) !important; } body.is-panel .aib-strategy .lead, body.is-panel .aib-strategy .muted, body.is-panel .aib-strategy .eyebrow, body.is-panel .aib-agent-meta dt { color: var(--dz-muted) !important; } body.is-panel .aib-badge { background: var(--dz-surface-2) !important; color: var(--dz-ink-soft) !important; } body.is-panel .aib-badge.live { background: color-mix(in srgb, var(--dz-ok) 18%, transparent) !important; color: var(--dz-ok) !important; } body.is-panel .aib-badge.paused { background: color-mix(in srgb, var(--dz-danger) 18%, transparent) !important; color: var(--dz-danger) !important; } body.is-panel .aib-line-panel { background: var(--dz-surface-2) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } body.is-panel .aib-prompt-block, body.is-panel .coach-prompt-view pre { background: var(--dz-surface-2) !important; color: var(--dz-ink) !important; border-color: var(--dz-line) !important; } /* Inline light panels that break dark mode */ html[data-theme="dark"] body.is-panel [style*="background:#fff"], html[data-theme="dark"] body.is-panel [style*="background: #fff"], html[data-theme="dark"] body.is-panel [style*="background:#ffffff"], html[data-theme="dark"] body.is-panel [style*="background: #ffffff"], html[data-theme="dark"] body.is-panel [style*="background:#f8fafc"], html[data-theme="dark"] body.is-panel [style*="background: #f8fafc"], html[data-theme="dark"] body.is-panel [style*="background:#fff7ed"], html[data-theme="dark"] body.is-panel [style*="background: #fff7ed"] { background: var(--dz-surface-2) !important; color: var(--dz-ink) !important; border-color: var(--dz-line) !important; } html[data-theme="dark"] body.is-panel [style*="color:#0f172a"], html[data-theme="dark"] body.is-panel [style*="color: #0f172a"], html[data-theme="dark"] body.is-panel [style*="color:#334155"], html[data-theme="dark"] body.is-panel [style*="color: #334155"] { color: var(--dz-ink) !important; } html[data-theme="dark"] body.is-panel [style*="border:1px solid #e2e8f0"], html[data-theme="dark"] body.is-panel [style*="border: 1px solid #e2e8f0"] { border-color: var(--dz-line) !important; } /* Dark: botão primary no site também legível */ html[data-theme="dark"] .btn-primary { background: var(--dz-teal) !important; color: #042f2e !important; } html[data-theme="dark"] .btn-ghost { background: var(--dz-surface) !important; border-color: var(--dz-line) !important; color: var(--dz-ink) !important; } html[data-theme="dark"] .nav a, html[data-theme="dark"] .brand { color: var(--dz-ink) !important; } /* —— Abas segmentadas (config / agentes / admin) - Mobile-first —— */ .ui-seg-tabs { display: flex; flex-wrap: nowrap; gap: 0.25rem; padding: 0.25rem; margin: 0 0 var(--dz-space-lg); background: var(--dz-surface-2); border: 1px solid var(--dz-line); border-radius: var(--dz-radius); overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: var(--dz-line) transparent; } .ui-seg-tabs::-webkit-scrollbar { height: 4px; } .ui-seg-tabs::-webkit-scrollbar-track { background: transparent; margin: 0 0.25rem; } .ui-seg-tabs::-webkit-scrollbar-thumb { background: var(--dz-line); border-radius: 2px; } @media (min-width: 640px) { .ui-seg-tabs { flex-wrap: wrap; overflow-x: visible; gap: 0.3rem; padding: 0.3rem; } } .ui-seg-tabs [data-ui-tab], .ui-seg-tab { appearance: none; border: 0; background: transparent; color: var(--dz-muted); font: inherit; font-size: var(--dz-text-sm); font-weight: 700; padding: var(--dz-space-md) var(--dz-space-lg); border-radius: var(--dz-radius-sm); cursor: pointer; line-height: 1.2; white-space: nowrap; min-height: var(--dz-touch-min); display: inline-flex; align-items: center; justify-content: center; gap: var(--dz-space-xs); transition: color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; flex-shrink: 0; } @media (min-width: 640px) { .ui-seg-tabs [data-ui-tab], .ui-seg-tab { min-height: auto; padding: 0.55rem 0.9rem; } } .ui-seg-tabs [data-ui-tab]:hover, .ui-seg-tab:hover { color: var(--dz-ink); background: color-mix(in srgb, var(--dz-surface) 70%, transparent); } .ui-seg-tabs [data-ui-tab].is-on, .ui-seg-tab.is-on { background: var(--dz-surface); color: var(--dz-ink); box-shadow: var(--dz-shadow-sm); } .ui-seg-panes { display: flex; flex-direction: column; gap: var(--dz-space-lg); min-width: 0; } .ui-seg-panes > [data-ui-pane] { display: none !important; flex-direction: column; gap: var(--dz-space-lg); min-width: 0; } .ui-seg-panes > [data-ui-pane].is-on { display: flex !important; animation: fadeInUp 0.3s ease; } @keyframes fadeInUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .aib-agent-detail .ui-seg-tabs { margin-top: var(--dz-space-xs); } .aib-detail-toolbar { display: flex; flex-wrap: wrap; gap: var(--dz-space-sm); align-items: center; } /* =================================================== COMPONENTES COMPACTOS (economiza espaço) =================================================== */ /* Versão compacta dos cards padrão */ .ui-card--compact { padding: var(--dz-space-md) var(--dz-space-lg); } @media (min-width: 640px) { .ui-card--compact { padding: var(--dz-space-lg); } } /* Form grid mais compacto */ .ui-form-grid--compact { gap: var(--dz-space-sm) var(--dz-space-md); } .ui-form-grid--compact .ui-field { gap: var(--dz-space-xs); } /* Stack com menos espaçamento */ .ui-stack--compact { gap: var(--dz-space-md); } /* Details/Summary nativo estilizado */ .ui-details { background: var(--dz-surface); border: 1px solid var(--dz-line); border-radius: var(--dz-radius); overflow: hidden; } .ui-details + .ui-details { margin-top: var(--dz-space-sm); } .ui-details summary { display: flex; align-items: center; justify-content: space-between; gap: var(--dz-space-md); padding: var(--dz-space-md) var(--dz-space-lg); cursor: pointer; list-style: none; min-height: var(--dz-touch-min); font-weight: 600; font-size: var(--dz-text-sm); color: var(--dz-ink); transition: background-color 0.2s ease; user-select: none; } @media (min-width: 640px) { .ui-details summary { padding: var(--dz-space-lg); min-height: auto; font-size: var(--dz-text-base); } } .ui-details summary::-webkit-details-marker { display: none; } .ui-details summary:hover { background: var(--dz-surface-2); } .ui-details summary::after { content: ''; width: 20px; height: 20px; background-image: url('data:image/svg+xml,'); background-repeat: no-repeat; background-position: center; transition: transform 0.3s ease; flex-shrink: 0; } .ui-details[open] summary::after { transform: rotate(180deg); } .ui-details-content { padding: 0 var(--dz-space-lg) var(--dz-space-lg); border-top: 1px solid var(--dz-line); animation: fadeInDown 0.3s ease; } @media (min-width: 640px) { .ui-details-content { padding: 0 var(--dz-space-xl) var(--dz-space-xl); } } @keyframes fadeInDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Grid compacto para stats/KPIs */ .compact-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: var(--dz-space-sm); } @media (min-width: 640px) { .compact-stats { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--dz-space-md); } } .compact-stat { background: var(--dz-surface-2); padding: var(--dz-space-md); border-radius: var(--dz-radius-sm); border: 1px solid var(--dz-line); } .compact-stat-label { font-size: var(--dz-text-xs); color: var(--dz-muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: var(--dz-space-xs); line-height: 1.2; } .compact-stat-value { font-size: var(--dz-text-xl); font-weight: 800; font-family: var(--font-display), sans-serif; color: var(--dz-ink); line-height: 1.1; } @media (min-width: 640px) { .compact-stat-value { font-size: var(--dz-text-2xl); } }