/* ===== Tlin Shared Theme — light / dark / system ===== * Aplicado via [data-theme="light"|"dark"] no . * tlin-shared.js seta isso a partir de localStorage. */ :root { /* Cores base (dark default) */ --bg-app: #0a0f1d; --bg-surface: #0f172a; --bg-surface-2: #1e293b; --bg-surface-3: #334155; --bg-elevated: rgba(15, 23, 42, 0.85); --border-soft: rgba(51, 65, 85, 0.6); --border-medium: rgba(71, 85, 105, 0.7); --text-primary: #f1f5f9; --text-secondary: #cbd5e1; --text-tertiary: #94a3b8; --text-muted: #64748b; /* Acentos vibrantes (mesmas em light/dark, ajustam só o "matiz") */ --accent-cyan: #22d3ee; --accent-cyan-soft: rgba(34, 211, 238, 0.12); --accent-purple: #a855f7; --accent-purple-soft: rgba(168, 85, 247, 0.12); --accent-emerald: #10b981; --accent-emerald-soft: rgba(16, 185, 129, 0.12); --accent-amber: #f59e0b; --accent-amber-soft: rgba(245, 158, 11, 0.15); --accent-rose: #f43f5e; --accent-rose-soft: rgba(244, 63, 94, 0.12); --accent-pink: #ec4899; --accent-blue: #3b82f6; /* Gradientes pra cards de KPI */ --grad-cyan: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%); --grad-purple: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); --grad-emerald: linear-gradient(135deg, #10b981 0%, #047857 100%); --grad-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); --grad-rose: linear-gradient(135deg, #f43f5e 0%, #be123c 100%); --grad-pink: linear-gradient(135deg, #ec4899 0%, #be185d 100%); --grad-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%); --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --shadow-card-hover: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.2); } [data-theme="light"] { --bg-app: #f8fafc; --bg-surface: #ffffff; --bg-surface-2: #f1f5f9; --bg-surface-3: #e2e8f0; --bg-elevated: rgba(255, 255, 255, 0.95); --border-soft: rgba(226, 232, 240, 1); --border-medium: rgba(203, 213, 225, 1); --text-primary: #0f172a; --text-secondary: #334155; --text-tertiary: #64748b; --text-muted: #94a3b8; --accent-cyan-soft: rgba(6, 182, 212, 0.08); --accent-purple-soft: rgba(168, 85, 247, 0.08); --accent-emerald-soft: rgba(16, 185, 129, 0.08); --accent-amber-soft: rgba(245, 158, 11, 0.10); --accent-rose-soft: rgba(244, 63, 94, 0.08); --shadow-card: 0 1px 3px 0 rgba(15, 23, 42, 0.08), 0 1px 2px -1px rgba(15, 23, 42, 0.05); --shadow-card-hover: 0 10px 15px -3px rgba(15, 23, 42, 0.10), 0 4px 6px -4px rgba(15, 23, 42, 0.08); } /* ===== Base ===== */ html { font-size: 18px; /* âncora dos rem — 1rem = 18px em todo o app */ -webkit-text-size-adjust: 100%; } html, body { background: var(--bg-app); color: var(--text-primary); font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; transition: background-color 200ms ease, color 200ms ease; overflow-x: hidden; /* impede scroll horizontal acidental */ } /* Scrollbar customizada (webkit) */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--bg-surface); } ::-webkit-scrollbar-thumb { background: var(--bg-surface-3); border-radius: 5px; } ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); } /* ===== Componentes utilitários ===== */ .tlin-card { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 1rem; box-shadow: var(--shadow-card); transition: box-shadow 200ms, transform 200ms, border-color 200ms; } .tlin-card:hover { box-shadow: var(--shadow-card-hover); } .tlin-kpi { position: relative; overflow: hidden; padding: 1.25rem; border-radius: 1rem; color: white; box-shadow: var(--shadow-card); min-height: 120px; display: flex; flex-direction: column; justify-content: space-between; } .tlin-kpi::before { content: ""; position: absolute; top: -40px; right: -40px; width: 120px; height: 120px; border-radius: 50%; background: rgba(255, 255, 255, 0.15); filter: blur(20px); } .tlin-kpi--cyan { background: var(--grad-cyan); } .tlin-kpi--purple { background: var(--grad-purple); } .tlin-kpi--emerald { background: var(--grad-emerald); } .tlin-kpi--amber { background: var(--grad-amber); } .tlin-kpi--rose { background: var(--grad-rose); } .tlin-kpi--pink { background: var(--grad-pink); } .tlin-kpi--blue { background: var(--grad-blue); } .tlin-sidebar-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.625rem 0.875rem; border-radius: 0.625rem; color: var(--text-secondary); font-size: 1rem; font-weight: 500; cursor: pointer; transition: background 150ms, color 150ms; } .tlin-sidebar-link:hover { background: var(--bg-surface-2); color: var(--text-primary); } .tlin-sidebar-link--active { background: var(--accent-cyan-soft); color: var(--accent-cyan); } .tlin-sidebar-link--active svg { color: var(--accent-cyan); } .tlin-input { width: 100%; padding: 0.5rem 0.75rem; border-radius: 0.5rem; background: var(--bg-surface-2); border: 1px solid var(--border-medium); color: var(--text-primary); font-size: 1rem; transition: border-color 150ms, box-shadow 150ms; } .tlin-input:focus { outline: none; border-color: var(--accent-cyan); box-shadow: 0 0 0 3px var(--accent-cyan-soft); } .tlin-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.5rem; font-weight: 500; font-size: 1rem; cursor: pointer; transition: background 150ms, transform 100ms; border: 1px solid transparent; } .tlin-btn:hover { transform: translateY(-1px); } .tlin-btn--primary { background: var(--accent-cyan); color: #0f172a; } .tlin-btn--primary:hover { background: #06b6d4; } .tlin-btn--ghost { background: transparent; border-color: var(--border-medium); color: var(--text-primary); } .tlin-btn--ghost:hover { background: var(--bg-surface-2); } .tlin-btn--danger { background: var(--accent-rose); color: white; } .tlin-pill { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.2rem 0.7rem; border-radius: 999px; font-size: 0.833rem; font-weight: 500; } .tlin-pill--cyan { background: var(--accent-cyan-soft); color: var(--accent-cyan); } .tlin-pill--emerald { background: var(--accent-emerald-soft); color: var(--accent-emerald); } .tlin-pill--amber { background: var(--accent-amber-soft); color: var(--accent-amber); } .tlin-pill--rose { background: var(--accent-rose-soft); color: var(--accent-rose); } .tlin-pill--purple { background: var(--accent-purple-soft); color: var(--accent-purple); } /* Dropdowns */ .tlin-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 180px; background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: 0.75rem; box-shadow: var(--shadow-card-hover); padding: 0.375rem; z-index: 50; } .tlin-dropdown-item { display: flex; align-items: center; gap: 0.625rem; padding: 0.5rem 0.625rem; border-radius: 0.375rem; font-size: 1rem; color: var(--text-secondary); cursor: pointer; width: 100%; text-align: left; background: transparent; border: none; } .tlin-dropdown-item:hover { background: var(--bg-surface-2); color: var(--text-primary); } .tlin-dropdown-item--active { color: var(--accent-cyan); font-weight: 600; } /* Tema-icon nas pílulas (sol/lua/monitor) */ .tlin-theme-icon { width: 18px; height: 18px; } /* Bandeirinhas inline */ .tlin-flag { width: 20px; height: 14px; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,0,0,0.2); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; overflow: hidden; flex-shrink: 0; } /* Overlay de sidebar (mobile) — sempre fixed pra não participar do grid */ .sidebar-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 39; display: none; pointer-events: none; } .sidebar-overlay.visible { display: block; pointer-events: auto; } /* Animação fade-in suave nos cards */ @keyframes tlin-fade-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .tlin-fade-in { animation: tlin-fade-in 300ms ease-out backwards; } /* Skeleton loader */ .tlin-skeleton { background: linear-gradient(90deg, var(--bg-surface-2) 0%, var(--bg-surface-3) 50%, var(--bg-surface-2) 100%); background-size: 200% 100%; animation: tlin-skeleton 1.5s infinite; border-radius: 0.375rem; } @keyframes tlin-skeleton { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* ===== Responsividade Mobile ===== */ /* Tabelas com scroll horizontal em telas pequenas */ .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: .5rem; } .table-responsive .data-table { min-width: 500px; } /* Em telas pequenas: targets tácteis confortáveis */ @media (max-width: 640px) { .tlin-btn { padding: .75rem 1.125rem; font-size: 1rem; min-height: 44px; } .tlin-pill { padding: .3rem .8rem; font-size: .9rem; } .tlin-input { font-size: 1rem; /* ≥ 16px evita zoom automático no iOS */ min-height: 44px; padding: .625rem .875rem; } /* Conteúdo: padding menor */ .content { padding: .875rem !important; } /* KPIs: ajuste pra caber 2 por linha sem quebrar */ .tlin-kpi { min-height: 100px; padding: 1rem; } .tlin-kpi div[style*="font-size:2rem"] { font-size: 1.75rem !important; } /* Gráficos: altura reduzida pra não dominar a tela */ .chart-wrap { height: 200px !important; } .chart-wrap.donut { height: 180px !important; } .chart-wrap.compact { height: 160px !important; } /* Topbar: padding menor */ .topbar { padding: .625rem 1rem; } /* Headers ligeiramente menores no mobile */ h2[style*="1.5rem"] { font-size: 1.25rem !important; } /* Tabelas: células compactas mas legíveis */ .data-table th { font-size: .833rem; padding: .5rem .625rem; } .data-table td { font-size: .9rem; padding: .625rem .625rem; } /* Modal: ocupa tela inteira */ .tlin-modal-card { max-width: 100%; margin: 0; border-radius: .75rem .75rem 0 0; max-height: 92vh; } .tlin-modal { align-items: flex-end; padding: 0; } } /* Desktop/iMac: tabelas confortáveis */ @media (min-width: 1280px) { .data-table td { font-size: 1rem; } .data-table th { font-size: .875rem; } }