/* ============================================================ 4TX PORTAL — MODERN DESIGN SYSTEM (v2) Inspired by Linear / Notion / ClickUp aesthetics ============================================================ */ :root { /* Brand */ --navy:#1a1d24; --bordo:#915959; --bordo2:#c47a7a; --beige:#d4c5b0; --blue2:#4a78a3; --gold:#c89a3e; --green:#1f7a47; --red:#b73838; --gray:#b8b6b1; /* Botão de marca (manual): bege #D1BDA6 com tinta escura para contraste */ --btn-brand:#D1BDA6; --btn-brand-h:#c3a883; --btn-brand-ink:#3b2f21; /* Surfaces */ --bg:#faf9f7; /* page background, warm off-white */ --surface:#ffffff; /* cards, modals */ --surface-alt:#f6f4f0; /* hovers, table headers, subtle bg */ --gelo:#f5f3ef; /* legacy alias */ --white:#ffffff; /* Text — calibrado para WCAG 2.2 AA em fundo branco #1f2429 = 14.7:1 · #4F5862 = 7.4:1 · #7C848D = 4.6:1 */ --text:#1f2429; --text-mid:#4F5862; --text-light:#7C848D; /* Borders */ --border:#ececea; --border-soft:#f3f1ed; --border-strong:#dad6cf; /* Shape */ --radius:12px; --radius-sm:8px; --radius-lg:16px; --font:'Urbanist', system-ui, -apple-system, sans-serif; --font-display:'Fraunces', 'Times New Roman', Georgia, serif; /* Elevation */ --shadow-sm:0 1px 2px rgba(0,0,0,.04); --shadow:0 4px 12px rgba(20,20,25,.06); --shadow-lg:0 16px 40px rgba(20,20,25,.12); /* Semantic colors (status/feedback) */ --color-success:#1f7a47; --color-success-soft:rgba(31,122,71,.10); --color-warning:#b07310; --color-warning-soft:rgba(200,154,62,.15); --color-danger:#b73838; --color-danger-soft:rgba(183,56,56,.10); --color-info:#4a78a3; --color-info-soft:rgba(74,120,163,.12); --color-neutral:#5e6770; --color-neutral-soft:rgba(120,120,120,.12); --color-accent:#915959; --color-accent-soft:rgba(145,89,89,.10); /* UI Foundation aliases */ --ui-navy:var(--navy); --ui-wine:var(--bordo); --ui-gold:var(--gold); --ui-ice:var(--gelo); --ui-surface:var(--surface); --ui-border:var(--border); --ui-radius:8px; --ui-radius-lg:12px; --ui-focus:0 0 0 3px rgba(200,154,62,.18); color-scheme:light; } /* ============================================================ DARK MODE — override de tokens. Mantém brand (navy/bordo/gold) e ajusta apenas superfícies, texto, bordas e sombras. Ativa via [data-theme="dark"] no (ver script no head). ============================================================ */ [data-theme="dark"] { /* Brand — pequenos ajustes para legibilidade sobre fundo escuro */ --bordo:#c47a7a; --gold:#d9b25a; --blue2:#7aa6cf; --green:#3da76d; --red:#d96666; /* Superfícies — deep warm dark inspirado em Linear/Notion Hierarquia: bg (mais escuro) < surface (cards) < surface-alt (hover) */ --bg:#0e1116; --surface:#181c23; --surface-alt:#222731; --gelo:#222731; --white:#181c23; /* Texto — contraste pisado para boa legibilidade em dark #ebedf0 = 14.8:1 · #b4bac3 = 8.6:1 · #8b9099 = 5.4:1 */ --text:#ebedf0; --text-mid:#b4bac3; --text-light:#8b9099; /* Bordas — mais subtis, quase invisíveis para criar separação leve */ --border:#262a32; --border-soft:#1d2128; --border-strong:#363b45; /* Elevation — sombras mais profundas e opacas em dark */ --shadow-sm:0 1px 2px rgba(0,0,0,.30); --shadow:0 4px 12px rgba(0,0,0,.40); --shadow-lg:0 16px 40px rgba(0,0,0,.55); /* Semantic soft — rgba sobre fundo escuro precisa de mais opacidade */ --color-success-soft:rgba(61,167,109,.16); --color-warning-soft:rgba(217,178,90,.18); --color-danger-soft:rgba(217,102,102,.16); --color-info-soft:rgba(122,166,207,.16); --color-neutral-soft:rgba(160,167,176,.14); --color-accent-soft:rgba(196,122,122,.14); --ui-focus:0 0 0 3px rgba(217,178,90,.28); color-scheme:dark; } /* Imagens e logos: leve atenuação em dark para não ofuscar */ [data-theme="dark"] img:not([data-no-dim]) { filter:brightness(.92); } /* ============================================================ DARK MODE — Polimento visual (Linear/Notion-style) Remove bordas duras dos cards e usa elevation subtil. Topbar coesa com fundo translúcido escuro (não branco). Inputs com leve diferenciação para visibilidade. ============================================================ */ /* Cards e superfícies: borda quase invisível + sombra subtil */ [data-theme="dark"] .sc, [data-theme="dark"] .cc, [data-theme="dark"] .tw, [data-theme="dark"] .top-panel, [data-theme="dark"] .meta-wrap, [data-theme="dark"] .setup-sec { border-color:transparent; box-shadow:0 1px 2px rgba(0,0,0,.25), 0 0 0 1px rgba(255,255,255,.04); } /* Modais: ring sutil + sombra mais forte por ser overlay */ [data-theme="dark"] .modal { border-color:transparent; box-shadow:0 16px 48px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.06); } [data-theme="dark"] .mo { background:rgba(0,0,0,.65); } /* Topbar: fundo translúcido escuro (não branco como light) */ [data-theme="dark"] .topbar { background:rgba(20,23,29,.85); border-bottom-color:rgba(255,255,255,.05); } /* Inputs: bg ligeiramente diferenciado para se destacarem dos cards */ [data-theme="dark"] .fi { background:rgba(255,255,255,.025); border-color:rgba(255,255,255,.08); } [data-theme="dark"] .fi:focus { border-color:var(--gold); box-shadow:0 0 0 3px rgba(217,178,90,.22); } [data-theme="dark"] select.fi { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23b4bac3' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); } /* Botões secundários no topbar: ring sutil em vez de border dura */ [data-theme="dark"] .btn-sec, [data-theme="dark"] .btn-secondary { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); } [data-theme="dark"] .btn-sec:hover, [data-theme="dark"] .btn-secondary:hover { background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.14); } /* btn-primary em dark: o light usa var(--text) como bg (preto sobre branco). Em dark var(--text) é claro — ficaria branco gigante. Inverter. */ [data-theme="dark"] .btn-primary { background:var(--gold); color:#1a1d24; } [data-theme="dark"] .btn-primary:hover { background:#e6c074; } /* Tabelas: linhas separadoras mais subtis */ [data-theme="dark"] .sm td, [data-theme="dark"] table tbody td { border-bottom-color:rgba(255,255,255,.04); } [data-theme="dark"] .sm tr:hover td, [data-theme="dark"] table tbody tr:hover td { background:rgba(255,255,255,.03); } /* Top-action ícones (sino, edit, etc.): ring sutil */ [data-theme="dark"] .top-actions .top-action { background:rgba(255,255,255,.04); border-color:rgba(255,255,255,.08); } /* ============================================================ FEEDBACK / SUGESTÕES — cards e botões theme-aware ============================================================ */ .fb-card { transition:border-color .15s, box-shadow .15s, transform .15s; } .fb-card:hover { border-color:var(--bordo); box-shadow:var(--shadow); } .fb-prompt-btn:hover { background:var(--color-accent-soft); filter:brightness(1.15); } [data-theme="dark"] .fb-card:hover { box-shadow:0 4px 16px rgba(0,0,0,.5); } * { margin:0; padding:0; box-sizing:border-box; } body { font-family:var(--font); background:var(--bg); color:var(--text); min-height:100vh; overflow-x:hidden; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } /* ============================================================ LOGIN — editorial / quiet luxury (Sprint 3) Hero full-bleed + frosted card. Imagem rotativa via API. ============================================================ */ #login-screen { min-height:100vh; position:relative; display:flex; align-items:center; /* Sem imagem: card centralizado. Com imagem: empurra para direita. */ justify-content:center; padding:48px 80px; background:var(--navy); overflow:hidden; } #login-screen.has-hero { justify-content:flex-end; } /* Hero — container fixo full-bleed. Fallback (sem imagem): gradient sofisticado em camadas com radial accents. */ .login-hero { position:absolute; inset:0; z-index:0; overflow:hidden; background-image: radial-gradient(ellipse 60% 50% at 25% 30%, rgba(145,89,89,.18), transparent 60%), radial-gradient(ellipse 50% 40% at 80% 70%, rgba(74,120,163,.14), transparent 60%), radial-gradient(ellipse 40% 30% at 60% 20%, rgba(212,197,176,.06), transparent 65%), linear-gradient(135deg, #15171c 0%, #1a1d24 50%, #22262f 100%); animation:loginHeroFade 1.1s ease; } /* Imagem propria (img tag — mais confiavel que background-image) */ .login-hero-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; opacity:0; transition:opacity .6s ease; border:0; outline:0; } /* Overlay leve sobre a imagem para contexto visual sob o card */ .login-hero-overlay { position:absolute; inset:0; pointer-events:none; opacity:0; transition:opacity .6s ease; background: linear-gradient(110deg, rgba(15,16,20,.30) 0%, rgba(15,16,20,.10) 50%, transparent 80%), linear-gradient(to top, rgba(15,16,20,.20) 0%, transparent 35%); } #login-screen.has-hero .login-hero-img, #login-screen.has-hero .login-hero-overlay { opacity:1; } @keyframes loginHeroFade { from { opacity:0; transform:scale(1.04); } to { opacity:1; transform:scale(1); } } /* Pull-quote editorial — canto inferior esquerdo */ .login-quote { position:absolute; bottom:56px; left:64px; right:auto; max-width:520px; z-index:1; margin:0; padding:0; } .login-quote blockquote { font-family:var(--font-display); font-weight:300; font-style:italic; font-size:30px; line-height:1.25; color:rgba(255,255,255,.94); text-shadow:0 1px 24px rgba(0,0,0,.35); margin:0; } .login-quote figcaption { margin-top:14px; font-family:var(--font); font-size:11px; font-weight:500; letter-spacing:1.6px; text-transform:uppercase; color:rgba(255,255,255,.62); } /* Caption discreta — canto inferior direito */ .login-caption { position:absolute; right:24px; bottom:18px; z-index:1; font-family:var(--font); font-size:10px; font-weight:500; letter-spacing:.4px; color:rgba(255,255,255,.45); } /* Card frosted — direita, animacao sutil de entrada */ .login-card { position:relative; z-index:2; width:400px; padding:40px 38px 32px; background:rgba(255,255,255,.86); backdrop-filter:blur(28px) saturate(140%); -webkit-backdrop-filter:blur(28px) saturate(140%); border:1px solid rgba(255,255,255,.55); border-radius:18px; box-shadow:0 30px 80px rgba(15,16,20,.28), 0 4px 12px rgba(15,16,20,.10); animation:loginCardIn .55s cubic-bezier(.22,.9,.32,1) both; } @keyframes loginCardIn { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } } .login-logo-wrap { display:flex; align-items:center; justify-content:center; margin-bottom:24px; } .login-logo { max-width:170px; max-height:60px; display:block; } .login-logo-fallback { display:flex; flex-direction:column; align-items:center; gap:2px; } .login-name { font-family:var(--font-display); font-size:32px; font-weight:400; color:var(--text); letter-spacing:-1px; line-height:1; } .login-sub-mark { font-size:10px; color:var(--text-mid); letter-spacing:2.2px; text-transform:uppercase; font-weight:500; } .login-title { font-family:var(--font-display); font-size:26px; font-weight:400; color:var(--text); margin:0 0 4px; letter-spacing:-.4px; text-align:center; } .login-sub { font-size:12px; color:var(--text-mid); text-align:center; margin:0 0 24px; letter-spacing:.2px; } .login-err { background:rgba(183,56,56,.08); border:1px solid rgba(183,56,56,.22); border-left:3px solid var(--red); border-radius:var(--radius-sm); padding:10px 14px; font-size:12px; color:var(--red); margin-bottom:16px; display:none; font-weight:500; } .login-foot { margin-top:18px; padding-top:14px; border-top:1px solid rgba(15,16,20,.08); text-align:center; } .login-link { background:none; border:none; cursor:pointer; color:var(--text-mid); font-size:12px; font-family:var(--font); text-decoration:none; border-bottom:1px dashed transparent; padding:2px 0; transition:color .15s, border-color .15s; } .login-link:hover { color:var(--bordo); border-bottom-color:var(--bordo); } /* Mobile / tablet */ @media (max-width:768px){ #login-screen { padding:24px; align-items:flex-end; justify-content:center; } .login-card { width:100%; max-width:420px; padding:32px 26px 26px; border-radius:16px; } .login-quote { left:24px; right:24px; bottom:auto; top:32px; max-width:none; } .login-quote blockquote { font-size:22px; } .login-caption { display:none !important; } } /* ============================================================ FORMS ============================================================ */ .fg { margin-bottom:16px; } .fl { font-size:11px; font-weight:600; color:var(--text-mid); margin-bottom:6px; display:block; letter-spacing:0; } .fi { width:100%; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-sm); padding:11px 14px; color:var(--text); font-family:var(--font); font-size:13px; font-weight:500; outline:none; transition:border-color .15s, box-shadow .15s; } .fi:focus { border-color:var(--bordo); box-shadow:0 0 0 3px rgba(145,89,89,.08); } select.fi { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%239aa0a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; } /* ============================================================ BUTTONS ============================================================ */ .btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; padding:9px 16px; border-radius:var(--radius-sm); font-family:var(--font); font-weight:600; font-size:13px; cursor:pointer; border:1px solid transparent; transition:all .15s; white-space:nowrap; } .btn-primary { background:var(--text); color:var(--white); width:100%; justify-content:center; font-size:14px; margin-top:8px; padding:13px; } .btn-primary:hover { background:#000; } .btn-sec { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); } .btn-sec:hover { background:var(--surface-alt); border-color:var(--text-light); } .btn-red { background:var(--btn-brand); color:var(--btn-brand-ink); } .btn-red:hover { background:var(--btn-brand-h); } .btn-del { background:transparent; color:var(--bordo); border:1px solid rgba(145,89,89,.3); } .btn-del:hover { background:rgba(145,89,89,.06); border-color:var(--bordo); } .btn-blue { background:var(--blue2); color:var(--white); } .btn-blue:hover { background:#3e6889; } .btn-sm { padding:7px 12px; font-size:12px; border-radius:7px; } .btn-xs { padding:4px 9px; font-size:11px; border-radius:6px; } .btn-secondary { background:var(--surface); color:var(--text); border:1px solid var(--border-strong); } .btn-secondary:hover { background:var(--surface-alt); border-color:var(--text-light); } .btn-danger { background:var(--bordo); color:var(--white); } .btn-danger:hover { background:#7a4848; } .btn-icon { width:34px; height:34px; padding:0; border:1px solid var(--border); background:var(--surface); color:var(--text); border-radius:8px; } .btn-icon:hover { background:var(--surface-alt); border-color:var(--border-strong); box-shadow:var(--shadow-sm); } .btn-icon svg { width:15px; height:15px; } /* ============================================================ UI FOUNDATION — shells, actions, filters, work tables ============================================================ */ .top-actions { position:fixed; top:12px; right:24px; z-index:300; display:flex; align-items:center; gap:6px; } .top-actions .presence-bar, .top-actions .top-action { position:relative !important; top:auto !important; right:auto !important; width:auto; height:34px; box-shadow:var(--shadow-sm); } .top-actions .top-action { width:34px; } .top-action-badge { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; border-radius:9px; display:none; align-items:center; justify-content:center; padding:0 4px; line-height:1; background:var(--bordo); color:#fff; font-size:9px; font-weight:800; } .top-panel { position:fixed; top:54px; right:24px; z-index:400; width:380px; max-width:calc(100vw - 32px); background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:0 8px 32px rgba(43,56,71,.18); overflow:hidden; } .page-shell { padding:24px 28px; } .page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:24px; margin-bottom:18px; } .page-kicker { font-size:10px; font-weight:800; letter-spacing:.08em; color:var(--bordo); text-transform:uppercase; margin-bottom:3px; } .page-title { font-size:24px; font-weight:800; letter-spacing:-.4px; color:var(--text); line-height:1.15; } .page-subtitle { margin-top:4px; font-size:13px; color:var(--text-mid); } .page-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; flex-wrap:wrap; margin-right:118px; } @media (max-width:1100px){ .page-header { flex-direction:column; } .page-actions { justify-content:flex-start; margin-right:0; } } .filter-panel { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px; margin-bottom:14px; box-shadow:var(--shadow-sm); } .filter-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }.filter-control { min-height:34px; padding:7px 10px; border:1px solid var(--border-strong); border-radius:8px; background:var(--surface); color:var(--text); font-family:var(--font); font-size:12px; font-weight:500; outline:none; transition:border-color .15s, box-shadow .15s, background .15s; }.filter-control:focus { border-color:var(--gold); box-shadow:var(--ui-focus); }select.filter-control { cursor:pointer; } .filter-search { flex:1; min-width:240px; } .filter-select { width:150px; } .filter-check { min-height:34px; display:inline-flex; align-items:center; gap:7px; padding:0 10px; border:1px solid var(--border); border-radius:8px; color:var(--text-mid); background:var(--surface-alt); font-size:11px; font-weight:700; cursor:pointer; } .work-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:12px 0; } .work-count { font-size:12px; font-weight:800; color:var(--text-mid); } .work-tools { display:flex; align-items:center; gap:6px; } .work-table-wrap { overflow:auto; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); } .work-table { width:100%; border-collapse:separate; border-spacing:0; font-size:12px; } .work-table th { position:sticky; top:0; z-index:2; padding:10px 12px; background:var(--surface-alt); color:var(--text-light); border-bottom:1px solid var(--border); font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; text-align:left; white-space:nowrap; } .work-table td { padding:10px 12px; border-bottom:1px solid var(--border-soft); color:var(--text); vertical-align:middle; } .work-table tbody tr:last-child td { border-bottom:none; } .work-table tbody tr:hover td { background:#fbfaf8; } .work-table .cell-muted { color:var(--text-light); font-size:11px; } .work-table-actions { display:flex; justify-content:flex-end; gap:4px; } .sort-indicator { color:var(--gold); margin-left:4px; font-size:10px; } .bulk-bar { display:none; align-items:center; gap:12px; padding:10px 14px; margin-bottom:10px; background:rgba(145,89,89,.08); border:1px solid rgba(145,89,89,.22); border-radius:8px; } .bulk-bar-label { font-size:13px; font-weight:800; color:var(--bordo); } .bulk-bar-spacer { flex:1; } .empty-state { padding:42px 24px; text-align:center; border:1px solid var(--border); border-radius:var(--radius); background:var(--surface); color:var(--text-mid); } .empty-state-title { font-size:14px; font-weight:800; color:var(--text); } .empty-state-body { margin-top:4px; font-size:12px; color:var(--text-light); } @keyframes skeleton-shimmer { to { transform:translateX(100%); } } .drawer { position:fixed; top:0; right:0; z-index:700; width:min(720px,100vw); height:100vh; display:flex; flex-direction:column; background:var(--surface); border-left:1px solid var(--border); box-shadow:var(--shadow-lg); } .drawer-body { flex:1; overflow:auto; padding:20px 22px; } /* ============================================================ APP LAYOUT ============================================================ */ #app { display:none; min-height:100vh; } /* ===== SIDEBAR (dark, modern) ===== */ .sidebar { position:fixed; left:0; top:0; bottom:0; width:220px; background:#1a1d24; display:flex; flex-direction:column; z-index:100; overflow:hidden; border-right:1px solid #252830; /* PWA iOS: respeita safe area no topo (notch/dynamic island) e no bottom (home indicator) */ padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); } .sidebar::before { display:none; } /* remove pattern */ .sl { padding:14px 12px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:10px; position:relative; z-index:1; } .sl-logo { width:148px; max-width:90%; height:auto; display:block; filter:brightness(0) invert(1); } .sl-name { font-size:18px; font-weight:700; color:var(--white); letter-spacing:-.3px; } .sl-sub { font-size:9px; color:rgba(255,255,255,.42); font-weight:500; letter-spacing:1.2px; text-transform:uppercase; } .snav { flex:1; padding:10px 8px; overflow-y:auto; position:relative; z-index:1; } .nst { font-size:10px; text-transform:uppercase; letter-spacing:1px; color:rgba(255,255,255,.32); padding:10px 12px 6px; font-weight:600; } .ni { display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:7px; cursor:pointer; font-size:13px; font-weight:500; color:rgba(255,255,255,.65); margin-bottom:1px; border:none; background:none; width:100%; text-align:left; transition:background .12s, color .12s; font-family:var(--font); } .ni:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.95); } .ni.active { background:rgba(145,89,89,.18); color:#f0d5d5; } /* Icon styles for .ni movidos para a seção ICON SYSTEM no fim do arquivo */ .cni { display:flex; align-items:center; gap:8px; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; font-weight:500; color:rgba(255,255,255,.5); margin-bottom:1px; border:none; background:none; width:100%; text-align:left; transition:all .12s; font-family:var(--font); overflow:hidden; } .cni:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.85); } .cni.active { background:rgba(196,122,122,.15); color:var(--bordo2); } .menu-sep { font-size:10px; font-weight:700; color:rgba(255,255,255,.46); text-transform:uppercase; letter-spacing:1.2px; padding:10px 12px; margin:8px 0 2px; border-top:1px solid rgba(255,255,255,.05); border-radius:7px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; transition:background .12s, color .12s; } .nst { border-radius:7px; display:flex; align-items:center; justify-content:space-between; cursor:pointer; user-select:none; padding:10px 12px; } .menu-sep:hover, .nst:hover { background:rgba(255,255,255,.05); color:rgba(255,255,255,.8); } .menu-sep::after, .nst::after { content:''; width:6px; height:6px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg); opacity:.7; transition:transform .15s; } .menu-sep.is-collapsed::after, .nst.is-collapsed::after { transform:rotate(-45deg); } .snav .nav-collapsed { display:none !important; } .sfoot { padding:10px 8px; border-top:1px solid rgba(255,255,255,.06); position:relative; z-index:1; } .uinfo { display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; background:rgba(255,255,255,.04); margin-bottom:8px; transition:background .12s; } .uinfo:hover { background:rgba(255,255,255,.07); } .uav { width:30px; height:30px; border-radius:7px; background:linear-gradient(135deg, #915959, #c47a7a); color:var(--white); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:12px; flex-shrink:0; } /* Branco fixo, não var(--white): a barra lateral é sempre escura nos dois temas, mas em dark mode --white passa a valer um tom quase-preto (alias de superfície escura para outros usos) — usar o token aqui apagava o nome do usuário. Mesmo padrão já usado em .ni/.urole nesta seção. */ .uname { font-size:12px; font-weight:600; color:rgba(255,255,255,.92); } .urole { font-size:10px; color:rgba(255,255,255,.45); } .btnout { width:100%; justify-content:center; background:transparent; border:1px solid rgba(255,255,255,.10); color:rgba(255,255,255,.55); border-radius:7px; padding:8px; font-size:11px; font-weight:500; cursor:pointer; display:flex; align-items:center; gap:5px; font-family:var(--font); transition:all .15s; } .btnout:hover { background:rgba(255,255,255,.05); color:var(--white); border-color:rgba(255,255,255,.18); } /* ===== MAIN ===== */ .main { margin-left:220px; min-height:100vh; } .topbar { padding:18px 320px 18px 28px; /* PWA iOS: empurra abaixo do status bar quando em standalone */ padding-top: calc(18px + env(safe-area-inset-top, 0px)); border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; background:rgba(255,255,255,.85); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); position:sticky; top:0; z-index:50; } .tbt { font-size:18px; font-weight:700; color:var(--text); letter-spacing:-.3px; } .tbs { font-size:12px; color:var(--text-light); font-weight:400; margin-top:2px; } .content { padding:24px 28px; } .page { display:none; } .page.active { display:block; } /* ============================================================ KPI / STAT CARDS ============================================================ */ .sg { display:grid; grid-template-columns:repeat(6,1fr); gap:12px; margin-bottom:24px; } .sc { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px 18px; position:relative; overflow:hidden; transition:border-color .15s, box-shadow .15s; } .sc:hover { border-color:var(--border-strong); } /* Replace top color bar with subtle right-side dot */ .sc::after { display:none; } .sc.acc-navy::before, .sc.acc-blue::before, .sc.acc-gold::before, .sc.acc-green::before, .sc.acc-red::before { content:''; position:absolute; top:18px; right:18px; width:8px; height:8px; border-radius:50%; } .sc.acc-navy::before { background:var(--text); } .sc.acc-blue::before { background:var(--blue2); } .sc.acc-gold::before { background:var(--gold); } .sc.acc-green::before { background:var(--green); } .sc.acc-red::before { background:var(--red); } .slb { font-size:11px; font-weight:500; color:var(--text-light); margin-bottom:8px; letter-spacing:0; text-transform:none; } .sv { font-size:24px; font-weight:700; color:var(--text); letter-spacing:-.7px; line-height:1.1; } .ss { font-size:11px; color:var(--text-light); margin-top:4px; font-weight:400; } /* ============================================================ TABLES ============================================================ */ .tc, .tw { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; } .tscroll { overflow-x:auto; max-height:calc(100vh - 290px); } .dt { width:100%; border-collapse:collapse; font-size:12px; table-layout:fixed; } .dt th { padding:11px 12px; text-align:left; font-size:10px; font-weight:600; text-transform:uppercase; letter-spacing:.7px; color:var(--text-light); background:var(--surface-alt); border-bottom:1px solid var(--border); border-right:1px solid var(--border-soft); white-space:nowrap; position:sticky; top:0; z-index:10; } .dt th:last-child { border-right:none; } .dt td { padding:9px 12px; border-bottom:1px solid var(--border-soft); border-right:1px solid var(--border-soft); vertical-align:middle; color:var(--text); } .dt td:last-child { border-right:none; } .dt tr:last-child td { border-bottom:none; } .dt tr:hover td { background:var(--surface-alt); } .dt td.cid { text-align:center; font-weight:600; color:var(--text-light); font-size:11px; width:36px; } .dt td.cact { text-align:center; width:60px; } /* Inline editable cells */ .ct { width:100%; border:none; background:transparent; font-family:var(--font); font-size:12px; color:var(--text); font-weight:500; outline:none; resize:none; } .ct:focus { background:var(--surface-alt); border-radius:4px; padding:2px 4px; } .cs { width:100%; border:none; background:transparent; font-family:var(--font); font-size:12px; color:var(--text); font-weight:500; outline:none; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='5' viewBox='0 0 8 5'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%239aa0a8' stroke-width='1.2' fill='none'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 2px center; padding-right:14px; } .cs:focus { background-color:var(--surface-alt); border-radius:4px; } .cd { width:100%; border:none; background:transparent; font-family:var(--font); font-size:12px; color:var(--text); font-weight:500; outline:none; } .cd:focus { background:var(--surface-alt); border-radius:4px; } .cn { width:100%; border:none; background:transparent; font-family:var(--font); font-size:12px; color:var(--text); font-weight:500; outline:none; text-align:right; font-variant-numeric:tabular-nums; } .cn:focus { background:var(--surface-alt); border-radius:4px; } /* Currency: input editavel formatado ($1,234.56). Visual de "valor" destacado (navy, semibold) mas mantem altura/estilo de input. */ .cn-currency { color:var(--navy); font-weight:600; letter-spacing:.1px; } .cn-currency::placeholder { color:var(--text-light); font-weight:400; } /* Celulas numericas read-only (modo somente visualizar) */ .td-number, .td-currency { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } .td-currency { color:var(--navy); font-weight:600; font-size:11.5px; } .td-number { color:var(--text); font-size:11.5px; } /* Spinner usado no modal de Análise Reputacional (KYC Fase 9) */ .spinner { width:32px; height:32px; border:3px solid rgba(74,120,163,.15); border-top-color:var(--blue2); border-radius:50%; animation:spin 0.8s linear infinite; } @keyframes spin { to { transform:rotate(360deg); } } /* Badge "USD" discreto no header da coluna de moeda */ .col-unit-badge { display:inline-block; margin-left:5px; font-size:8.5px; font-weight:700; letter-spacing:.5px; color:var(--text-light); background:rgba(255,255,255,.10); padding:1px 5px; border-radius:6px; border:1px solid rgba(255,255,255,.18); vertical-align:middle; text-transform:uppercase; } /* ============================================================ CHIPS / BADGES - Dot semântico antes do texto (estilo Linear / GitHub) - Cor do dot herda do `color` da chip via `currentColor` ============================================================ */ .chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px 3px 8px; border-radius:12px; font-size:10px; font-weight:600; white-space:nowrap; letter-spacing:0; text-transform:none; line-height:1.4; } .chip::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:currentColor; flex-shrink:0; opacity:.85; } /* Variantes — só cor opcional e fundo */ .ch-c { background:rgba(31,122,71,.10); color:var(--green); } .ch-a { background:rgba(74,120,163,.12); color:var(--blue2); } .ch-n { background:rgba(120,120,120,.12); color:var(--text-mid); } .ch-p { background:rgba(200,154,62,.15); color:#8a6010; } .ch-h { background:rgba(145,89,89,.10); color:var(--bordo); } .ch-s { background:rgba(31,122,71,.10); color:var(--green); } .ch-no { background:rgba(183,56,56,.10); color:var(--red); } /* Sem dot quando .chip é usado puramente como contador (ex: badge numérico) */ .chip.no-dot::before { display:none; } /* ---- Prioridade (Contabilidade Essential/Avulsa) — rampa semântica por hue, não por intensidade de uma única cor (pedido do usuário após ver o esquema anterior em dark mode): cada nível tem uma cor própria, fácil de distinguir à primeira vista sem depender de gradiente de opacidade. ---- */ .ch-prio-0 { background:rgba(120,120,120,.12); color:var(--text-mid); } /* On Hold — cinza */ .ch-prio-1 { background:rgba(74,120,163,.12); color:var(--blue2); } /* Baixa — azul */ .ch-prio-2 { background:rgba(230,196,20,.18); color:#8a7005; } /* Média — amarelo */ .ch-prio-3 { background:rgba(217,119,6,.15); color:#a85b1a; } /* Alta — laranja */ .ch-prio-4 { background:rgba(183,56,56,.10); color:var(--red); } /* Imediato — vermelho */ /* Borda do estado "preenchido" (cor/fundo já vêm de .ch-prio-0..4, que sempre acompanha esta classe — ver cls em empPrioritySel). Fica em classe, não em style inline, para o listener de troca de valor em _empRenderRoster poder atualizar a aparência só trocando classList. */ .emp-prio-sel { border:1px solid rgba(0,0,0,.10); } /* "Selecionar…" (não definida): mesmo esquema neutro/tracejado dos demais selects vazios da tabela (ver baseStyle "unfilled" em empListSel) — só o ícone de atenção ao lado (.emp-prio-flag) sinaliza que precisa ser definida, a cor em si não é mais um alerta visual próprio. */ .emp-prio-unset { border:1px dashed var(--border-strong,#c9c2b8) !important; background:var(--gelo,#f4f2ee) !important; color:var(--text-mid) !important; } .emp-prio-flag { display:inline-flex; font-size:11px; line-height:1; } .emp-prio-unset-chip { background:rgba(120,120,120,.12); color:var(--text-mid); border:1px dashed var(--border-strong,#c9c2b8); } /* O em si herda cor/fundo do chip selecionado (correto, fica legível fechado), mas o popup nativo de