/* ============================================================
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;
/* 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(--bordo); color:var(--white); }
.btn-red:hover { background:#7a4848; }
.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-ghost { background:transparent; color:var(--text-mid); border-color:transparent; }
.btn-ghost:hover { background:rgba(43,56,71,.06); color:var(--text); }
.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;
}
.form-control,
.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;
}
.form-control:focus,
.filter-control:focus { border-color:var(--gold); box-shadow:var(--ui-focus); }
select.form-control,
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); }
.skeleton {
position:relative; overflow:hidden;
background:#ece7e1; border-radius:8px;
}
.skeleton::after {
content:""; position:absolute; inset:0; transform:translateX(-100%);
background:linear-gradient(90deg, transparent, rgba(255,255,255,.55), transparent);
animation:skeleton-shimmer 1.2s infinite;
}
@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-header { padding:18px 22px; border-bottom:1px solid var(--border); }
.drawer-title { font-size:18px; font-weight:800; color:var(--text); }
.drawer-body { flex:1; overflow:auto; padding:20px 22px; }
.drawer-footer {
position:sticky; bottom:0; display:flex; justify-content:flex-end; gap:8px;
padding:14px 22px; border-top:1px solid var(--border); background:var(--surface);
}
/* ============================================================
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-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); }
.cdot { width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.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;
}
.uname { font-size:12px; font-weight:600; color:var(--white); }
.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; }
/* ============================================================
MODALS
============================================================ */
.modal-overlay {
position:fixed; inset:0;
background:rgba(20,22,28,.55);
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
z-index:1000; display:none;
align-items:center; justify-content:center;
}
.modal-overlay.open { display:flex; }
.modal {
background:var(--surface);
border:1px solid var(--border);
border-radius:14px;
padding:28px;
width:100%; max-width:520px;
max-height:88vh; overflow-y:auto;
animation:fadeUp .25s ease;
position:relative;
box-shadow:var(--shadow-lg);
}
.modal::before { display:none; } /* remove old colored top bar */
.modal-sm { max-width:420px; }
.mh { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; padding-top:0; }
.mt { font-size:17px; font-weight:700; color:var(--text); letter-spacing:-.2px; }
.mc {
background:var(--surface-alt);
border:1px solid var(--border);
border-radius:7px;
width:30px; height:30px;
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--text-mid); font-size:13px;
transition:all .15s;
}
.mc:hover { color:var(--text); background:var(--border); }
.mf { display:flex; gap:9px; margin-top:22px; justify-content:flex-end; }
/* ============================================================
FORM GRID — usadas em ~34 modais (estavam sem CSS antes)
============================================================ */
.g2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.g3 { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
.g4 { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
@media (max-width:640px){ .g2,.g3,.g4 { grid-template-columns:1fr; } }
/* ============================================================
MODAL — secoes e dicas (substitui inline styles repetidos)
============================================================ */
.modal-section {
border:1px solid var(--border); border-radius:8px;
padding:12px; margin-bottom:12px; background:var(--surface);
}
.modal-section-title {
font-size:11px; font-weight:700; color:var(--navy);
text-transform:uppercase; letter-spacing:.5px; margin-bottom:8px;
}
.modal-hint {
font-size:11px; color:var(--text-mid);
background:rgba(43,56,71,.05); padding:8px 10px;
border-radius:6px; line-height:1.5;
}
.modal-alert {
border-left:3px solid var(--gold);
background:rgba(200,154,62,.10);
padding:10px 12px; border-radius:6px;
font-size:12px; color:var(--text-mid); line-height:1.5;
margin-bottom:14px;
}
.modal-alert-title {
font-size:12px; font-weight:700; color:#8a6010; margin-bottom:4px;
}
.modal-error {
background:rgba(183,56,56,.08); border:1px solid rgba(183,56,56,.22);
border-left:3px solid var(--red);
padding:10px 14px; border-radius:6px;
font-size:12px; color:var(--red); font-weight:500;
margin-bottom:12px;
}
/* ============================================================
SMALL TABLES (.sm)
============================================================ */
table.sm { width:100%; border-collapse:collapse; }
table.sm th {
padding:11px 14px; text-align:left;
font-size:10px; font-weight:600;
text-transform:uppercase; letter-spacing:.7px;
color:var(--text-light);
border-bottom:1px solid var(--border);
background:var(--surface-alt);
}
table.sm td {
padding:11px 14px;
border-bottom:1px solid var(--border-soft);
font-size:13px; font-weight:500; color:var(--text);
}
table.sm tr:last-child td { border-bottom:none; }
table.sm tr:hover td { background:var(--surface-alt); }
/* ============================================================
TAGS
============================================================ */
.tag {
display:inline-block; padding:3px 8px; border-radius:6px;
font-size:10px; font-weight:600;
text-transform:none; letter-spacing:0;
}
.tag-superadmin { background:rgba(200,154,62,.15); color:#8a6010; border:1px solid rgba(200,154,62,.3); }
.tag-admin { background:rgba(145,89,89,.10); color:var(--bordo); }
.tag-user { background:rgba(74,120,163,.12); color:var(--blue2); }
/* ============================================================
COLUMN PICKER CARDS
============================================================ */
.col-card {
display:flex; align-items:flex-start; gap:10px;
padding:10px 12px; border-radius:8px;
border:1px solid var(--border); background:var(--surface);
cursor:pointer; transition:all .15s; user-select:none;
}
.col-card:hover { border-color:var(--border-strong); background:var(--surface-alt); }
.col-card.selected { border-color:var(--bordo); background:rgba(145,89,89,.04); }
.col-card.locked { opacity:.55; cursor:default; border-style:dashed; }
.col-check {
width:18px; height:18px; border-radius:5px;
border:1.5px solid var(--border-strong); flex-shrink:0; margin-top:1px;
display:flex; align-items:center; justify-content:center;
font-size:11px; transition:all .15s; color:transparent;
}
.col-card.selected .col-check { background:var(--bordo); border-color:var(--bordo); color:var(--white); }
.col-card.locked .col-check { background:var(--text-light); border-color:var(--text-light); color:var(--white); }
.col-card-label { font-size:13px; font-weight:600; color:var(--text); line-height:1.3; }
.col-card-type { font-size:11px; color:var(--text-light); margin-top:2px; font-weight:400; }
/* ============================================================
TOAST
============================================================ */
.toast {
position:fixed; bottom:24px; right:24px;
background:var(--text); border-radius:10px;
padding:12px 18px;
display:flex; align-items:center; gap:10px;
font-size:13px; font-weight:500; color:var(--white);
z-index:9999; animation:fadeUp .3s ease;
box-shadow:var(--shadow-lg);
transition:opacity .3s, transform .3s;
font-family:var(--font);
max-width:min(520px, calc(100vw - 32px));
}
.toast-text { line-height:1.35; }
.toast-action {
margin-left:8px; border:1px solid rgba(255,255,255,.35);
background:rgba(255,255,255,.12); color:#fff;
border-radius:7px; padding:5px 9px;
font-family:var(--font); font-size:11px; font-weight:800;
cursor:pointer; white-space:nowrap;
}
.toast-action:disabled { opacity:.55; cursor:wait; }
.toast.hide { opacity:0; transform:translateY(8px); }
/* Em mobile-active, sobe acima da bottom nav (~80px) e centraliza horizontalmente */
body.mobile-active .toast {
bottom: calc(90px + env(safe-area-inset-bottom, 0px));
right:16px; left:16px;
justify-content:center;
}
@keyframes fadeUp {
from { opacity:0; transform:translateY(12px); }
to { opacity:1; transform:translateY(0); }
}
/* ============================================================
INLINE STATUS SELECTS (in tables)
============================================================ */
.list-inline-sel {
border:none !important; outline:none !important;
font-family:var(--font); font-size:10px; font-weight:600;
cursor:pointer; border-radius:12px; padding:3px 8px;
appearance:none; -webkit-appearance:none; max-width:130px;
}
.list-inline-sel.ch-c { background:rgba(31,122,71,.10); color:var(--green); }
.list-inline-sel.ch-a { background:rgba(74,120,163,.12); color:var(--blue2); }
.list-inline-sel.ch-h { background:rgba(200,154,62,.15); color:#8a6010; }
.list-inline-sel.ch-n { background:rgba(120,120,120,.12); color:var(--text-mid); }
.list-inline-sel.ch-p { background:rgba(200,154,62,.15); color:#8a6010; }
.list-inline-sel.ch-no { background:rgba(183,56,56,.10); color:var(--red); }
.list-inline-sel.ch-s { background:rgba(31,122,71,.10); color:var(--green); }
.list-inline-sel:not([class*="ch-"]) { background:var(--surface-alt); color:var(--text-light); }
/* ============================================================
CMD+K PALETTE
============================================================ */
#cmdk-overlay {
position:fixed; inset:0;
background:rgba(20,22,28,.55);
z-index:9000; display:none;
align-items:flex-start; justify-content:center;
padding-top:14vh;
backdrop-filter:blur(6px);
-webkit-backdrop-filter:blur(6px);
}
#cmdk-overlay.open { display:flex; }
#cmdk-box {
width:min(640px,92vw); background:var(--surface);
border-radius:14px;
box-shadow:0 32px 80px rgba(0,0,0,.30);
overflow:hidden; font-family:var(--font);
border:1px solid var(--border);
}
#cmdk-input {
width:100%; border:none; outline:none;
padding:18px 22px; font-size:15px;
font-family:var(--font); color:var(--text);
border-bottom:1px solid var(--border);
box-sizing:border-box;
}
#cmdk-input::placeholder { color:var(--text-light); }
#cmdk-results { max-height:55vh; overflow-y:auto; }
.cmdk-item {
display:flex; align-items:center; gap:12px;
padding:11px 22px; cursor:pointer;
border-left:3px solid transparent;
transition:background .12s;
}
.cmdk-item:hover { background:var(--surface-alt); }
.cmdk-item.active { background:var(--surface-alt); border-left-color:var(--bordo); }
.cmdk-it-main { flex:1; min-width:0; }
.cmdk-it-name { font-size:13px; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-it-meta { font-size:11px; color:var(--text-light); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cmdk-it-tag {
font-size:9px; font-weight:600; letter-spacing:.4px; text-transform:uppercase;
padding:3px 8px; border-radius:10px;
background:var(--surface-alt); color:var(--text-mid);
}
.cmdk-it-tag.ess { background:rgba(74,120,163,.10); color:var(--blue2); }
.cmdk-it-tag.av { background:rgba(200,154,62,.12); color:#8a6010; }
#cmdk-empty { padding:40px 22px; text-align:center; color:var(--text-light); font-size:13px; }
#cmdk-hint {
padding:10px 22px; background:var(--surface-alt);
font-size:11px; color:var(--text-light);
border-top:1px solid var(--border); display:flex; gap:14px;
}
#cmdk-hint kbd {
background:var(--surface); border:1px solid var(--border);
border-radius:4px; padding:2px 6px;
font-family:'SF Mono', Menlo, monospace; font-size:10px;
}
.shortcut-help-overlay {
display:none; position:fixed; inset:0; z-index:1500;
background:rgba(20,22,26,.34); backdrop-filter:blur(4px);
align-items:flex-start; justify-content:center; padding:12vh 18px 28px;
}
.shortcut-help-overlay.open { display:flex; }
.shortcut-help-box {
width:min(560px, 100%); background:var(--surface);
border:1px solid var(--border); border-radius:14px;
box-shadow:var(--shadow-lg); overflow:hidden;
}
.shortcut-help-head {
display:flex; align-items:flex-start; justify-content:space-between;
gap:16px; padding:18px 20px; border-bottom:1px solid var(--border);
}
.shortcut-help-title { font-size:16px; font-weight:800; color:var(--text); }
.shortcut-help-sub { font-size:12px; color:var(--text-mid); margin-top:2px; }
.shortcut-help-head button {
border:none; background:var(--surface-alt); color:var(--text-mid);
width:30px; height:30px; border-radius:8px; cursor:pointer; font-size:18px;
}
.shortcut-grid { display:grid; grid-template-columns:180px 1fr; gap:0; padding:8px 0 12px; }
.shortcut-grid > div,
.shortcut-grid > span {
padding:8px 20px; border-bottom:1px solid var(--border-soft);
font-size:12px; color:var(--text-mid);
}
.shortcut-grid > div { color:var(--text); font-weight:700; }
.shortcut-grid kbd {
background:var(--surface-alt); border:1px solid var(--border);
border-radius:5px; padding:2px 6px;
font-family:'SF Mono', Menlo, monospace; font-size:10px;
}
/* ============================================================
MOBILE "Minhas tarefas"
============================================================ */
#mobile-view {
display:none; position:fixed; inset:0;
background:var(--bg); z-index:400;
overflow-y:auto; font-family:var(--font);
}
body.mobile-active #mobile-view { display:block; }
body.mobile-active .sidebar,
body.mobile-active #notif-bell-wrap { display:none !important; }
/* Por padrão, .main fica oculto no mobile-active */
body.mobile-active .main { display:none !important; }
/* Quando 'mob-show-main' está ativa, mostra .main e oculta o #mobile-view */
body.mobile-active.mob-show-main #mobile-view { display:none !important; }
body.mobile-active.mob-show-main .main {
display:block !important;
margin-left:0 !important;
width:100% !important; max-width:100vw !important;
overflow-x:hidden;
/* Espaço para o bottom nav */
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
/* Bloqueia overflow horizontal e força viewport fit no PWA mobile */
html, body { width:100%; max-width:100vw; }
body.mobile-active {
overflow-x:hidden; overscroll-behavior-x:contain;
width:100vw; max-width:100vw;
}
body.mobile-active #mobile-view {
width:100vw; max-width:100vw;
min-height:100vh; min-height:100dvh;
overflow-x:hidden;
}
body.mobile-active .mob-content { overflow-x:hidden; }
/* Garante que todos os textos longos quebrem em vez de empurrar a largura */
body.mobile-active .mob-card,
body.mobile-active .mob-card-cli,
body.mobile-active .mob-card-emp,
body.mobile-active .mob-kpi { word-break: break-word; overflow-wrap: anywhere; }
body.mobile-active .mob-card { max-width:100%; }
/* CSS responsivo para .main em mobile (mobile-active.mob-show-main OR mobile-desktop-pinned) */
body.mobile-active.mob-show-main .sidebar,
body.mobile-desktop-pinned .sidebar { display:none !important; }
body.mobile-desktop-pinned .main { margin-left:0 !important; width:100% !important; max-width:100vw !important; overflow-x:hidden; }
body.mobile-active.mob-show-main #notif-bell,
body.mobile-active.mob-show-main #review-icon,
body.mobile-active.mob-show-main #presence-bar,
body.mobile-desktop-pinned #notif-bell,
body.mobile-desktop-pinned #review-icon,
body.mobile-desktop-pinned #presence-bar { display:none !important; }
/* Topbar adaptada */
body.mobile-active.mob-show-main .topbar,
body.mobile-desktop-pinned .topbar {
padding:14px 12px;
padding-top: calc(14px + env(safe-area-inset-top, 0px));
flex-wrap:wrap; gap:8px;
}
body.mobile-active.mob-show-main .topbar > div:first-child,
body.mobile-desktop-pinned .topbar > div:first-child { flex:1; min-width:0; }
body.mobile-active.mob-show-main .tbt,
body.mobile-desktop-pinned .tbt { font-size:16px; }
body.mobile-active.mob-show-main .content,
body.mobile-desktop-pinned .content { padding:14px 10px; }
/* KPI grid (Dashboard) — 2 colunas */
body.mobile-active.mob-show-main .sg,
body.mobile-desktop-pinned .sg { grid-template-columns: 1fr 1fr !important; gap:10px !important; }
body.mobile-active.mob-show-main .sc,
body.mobile-desktop-pinned .sc { padding:12px 14px !important; min-width:0 !important; overflow:hidden; }
body.mobile-active.mob-show-main .sv,
body.mobile-desktop-pinned .sv { font-size:18px !important; }
body.mobile-active.mob-show-main .slb,
body.mobile-desktop-pinned .slb { font-size:9px !important; }
body.mobile-active.mob-show-main .ss,
body.mobile-desktop-pinned .ss { font-size:10px !important; }
/* Charts row do Dashboard (4 doughnuts) — vira 2x2 com canvas em altura confortável */
body.mobile-active.mob-show-main .content > div[style*="grid-template-columns:repeat(4"],
body.mobile-desktop-pinned .content > div[style*="grid-template-columns:repeat(4"] {
grid-template-columns: 1fr 1fr !important;
gap: 10px !important;
}
/* Wrapper do chart (div com height:170px inline) */
body.mobile-active.mob-show-main .content > div div[style*="height:170px"],
body.mobile-desktop-pinned .content > div div[style*="height:170px"] {
height: 180px !important;
width: 100% !important;
min-width: 0 !important;
position: relative !important;
}
/* Canvas dentro do wrapper de chart — força preencher */
body.mobile-active.mob-show-main canvas,
body.mobile-desktop-pinned canvas {
max-width: 100% !important;
max-height: 180px !important;
display: block;
}
/* Tabelas: scroll horizontal interno em vez de empurrar a página */
body.mobile-active.mob-show-main .tw,
body.mobile-desktop-pinned .tw {
overflow-x:auto; -webkit-overflow-scrolling:touch;
border-radius:8px;
}
body.mobile-active.mob-show-main table.sm,
body.mobile-desktop-pinned table.sm { font-size:11px; }
body.mobile-active.mob-show-main table.sm th,
body.mobile-active.mob-show-main table.sm td,
body.mobile-desktop-pinned table.sm th,
body.mobile-desktop-pinned table.sm td { padding:6px 4px !important; white-space:nowrap; }
/* Filtros do dashboard / essential / avulsa: chips quebram */
body.mobile-active.mob-show-main #dash-filters > div,
body.mobile-desktop-pinned #dash-filters > div {
flex-wrap:wrap !important; gap:6px !important; padding:8px 10px !important;
}
body.mobile-active.mob-show-main #dash-filters select,
body.mobile-active.mob-show-main #dash-filters input,
body.mobile-desktop-pinned #dash-filters select,
body.mobile-desktop-pinned #dash-filters input {
font-size:12px !important; flex:1 1 calc(50% - 4px) !important; min-width:0 !important;
}
/* Topbar dos filtros (Essential / Avulsa) — input + selects quebram */
body.mobile-active.mob-show-main .topbar > div:nth-child(2),
body.mobile-desktop-pinned .topbar > div:nth-child(2) {
flex-basis:100% !important; flex-wrap:wrap !important; gap:6px !important;
}
body.mobile-active.mob-show-main .topbar > div:nth-child(2) > *,
body.mobile-desktop-pinned .topbar > div:nth-child(2) > * {
flex:1 1 calc(50% - 4px) !important; min-width:0 !important; font-size:12px !important;
}
/* Lista de clientes em Essential / Avulsa — cards já são responsivos via inline styles */
body.mobile-active.mob-show-main #clients-list,
body.mobile-active.mob-show-main #avulsa-list { padding:0 !important; }
/* Botão flutuante "voltar ao mobile" quando pinado */
#mob-back-to-app {
display:none;
position:fixed; bottom: calc(18px + env(safe-area-inset-bottom, 0px));
left: 50%; transform:translateX(-50%);
background:#2B3847; color:#fff; border:none;
padding:11px 22px; border-radius:22px;
font-family:var(--font); font-size:12px; font-weight:700;
box-shadow:0 4px 16px rgba(43,56,71,.35);
z-index:500; cursor:pointer;
}
body.mobile-desktop-pinned #mob-back-to-app { display:block; }
/* Botão Voltar no topbar mobile (pilha de navegação) — visibilidade controlada por inline style via JS */
#mob-back-btn {
align-items:center; justify-content:center;
width:40px; height:40px; min-width:40px;
margin-right:6px;
background:transparent; color:#fff; border:none;
font-size:22px; font-weight:700; line-height:1;
cursor:pointer; padding:0; border-radius:8px;
-webkit-tap-highlight-color: rgba(255,255,255,.1);
}
#mob-back-btn:active { background:rgba(255,255,255,.12); }
/* Notificacoes — botao X individual em cada item */
.notif-item { transition:background .12s; }
.notif-item:hover { background:var(--surface-alt); }
.notif-item:hover .notif-close { opacity:1; }
.notif-close:hover { background:rgba(183,56,56,.10); color:var(--bordo) !important; opacity:1 !important; }
.mob-topbar {
background:var(--text); color:var(--white);
padding:18px 20px;
/* PWA iOS: empurra abaixo do status bar (notch/dynamic island) — só top, evita overflow lateral */
padding-top: calc(18px + env(safe-area-inset-top, 0px));
display:flex; align-items:center; justify-content:space-between;
width:100%; box-sizing:border-box;
}
.mob-topbar h1 { font-size:16px; font-weight:700; margin:0; }
.mob-topbar .mob-sub { font-size:11px; opacity:.7; margin-top:2px; }
.mob-topbar .mob-logout {
background:rgba(255,255,255,.1); border:none; color:var(--white);
padding:7px 12px; border-radius:6px; font-size:12px;
font-family:var(--font); cursor:pointer;
}
.mob-tabs {
display:flex; background:var(--surface);
border-bottom:1px solid var(--border);
position:sticky; top:0; z-index:1;
}
.mob-tab {
flex:1; padding:14px 8px; text-align:center;
font-size:11px; font-weight:600; color:var(--text-light);
border:none; background:none;
border-bottom:2px solid transparent; cursor:pointer;
font-family:var(--font); text-transform:uppercase; letter-spacing:.5px;
}
.mob-tab.active { color:var(--bordo); border-bottom-color:var(--bordo); }
.mob-content {
padding:14px;
/* bottom nav tem 64px + safe area; deixa espaço para o último item não ficar atrás */
padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
}
.mob-card {
background:var(--surface); border-radius:10px;
padding:14px; margin-bottom:10px;
border:1px solid var(--border); box-shadow:var(--shadow-sm);
}
.mob-card-h { display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:6px; }
.mob-card-cli { font-size:14px; font-weight:700; color:var(--text); flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mob-card-emp { font-size:12px; color:var(--text-mid); margin-bottom:8px; }
.mob-card-tags { display:flex; gap:6px; flex-wrap:wrap; }
.mob-card-tag { font-size:10px; padding:3px 8px; border-radius:10px; font-weight:600; }
.mob-empty { text-align:center; padding:40px 20px; color:var(--text-light); font-size:13px; }
/* ============================================================
MOBILE — BOTTOM NAVIGATION
============================================================ */
.mob-bottom-nav {
position:fixed; left:0; right:0; bottom:0; z-index:50;
display:none; /* só aparece em mobile-active */
align-items:stretch; justify-content:space-around;
background:var(--surface);
border-top:1px solid var(--border);
box-shadow:0 -2px 12px rgba(43,56,71,.08);
padding-bottom: env(safe-area-inset-bottom, 0px);
width:100%; box-sizing:border-box;
}
body.mobile-active .mob-bottom-nav { display:flex; }
.mob-bn {
flex:1; min-height:60px;
display:flex; flex-direction:column; align-items:center; justify-content:center;
gap:2px; background:none; border:none; cursor:pointer;
font-family:var(--font); color:var(--text-light);
padding:8px 4px;
transition:color .12s, background .15s, transform .1s;
-webkit-tap-highlight-color: rgba(145,89,89,.15);
user-select: none; -webkit-user-select:none;
touch-action:manipulation;
}
.mob-bn:active { background:var(--gelo); transform:scale(.94); }
.mob-bn.active { color:var(--bordo); }
.mob-bn.active .mob-bn-lbl { font-weight:700; }
.mob-bn-ico { font-size:22px; line-height:1; }
.mob-bn-lbl { font-size:10px; font-weight:600; letter-spacing:.2px; }
/* FAB central — botão "+" elevado */
.mob-bn-fab {
position:relative; flex:0 0 auto;
}
.mob-bn-fab::before {
content:""; position:absolute; top:6px; left:50%; transform:translateX(-50%);
width:48px; height:48px; border-radius:50%;
background:var(--bordo);
box-shadow:0 4px 12px rgba(145,89,89,.4);
}
.mob-bn-fab .mob-bn-ico {
position:relative; z-index:1; color:#fff; font-size:28px; font-weight:300;
width:48px; line-height:48px; text-align:center;
}
/* Search bar (na seção Clientes) */
.mob-search-bar {
padding:10px 14px;
background:var(--surface);
border-bottom:1px solid var(--border);
position:sticky; top:0; z-index:1;
}
.mob-search-bar input {
width:100%; padding:10px 14px;
border:1px solid var(--border); border-radius:10px;
font-family:var(--font); font-size:14px;
background:var(--gelo); outline:none;
}
.mob-search-bar input:focus {
background:var(--surface); border-color:var(--bordo);
}
/* ============================================================
MOBILE — DRAWER LATERAL ("Mais")
============================================================ */
#mob-drawer-overlay {
display:none; position:fixed; inset:0; z-index:1200;
}
body.mob-drawer-open #mob-drawer-overlay { display:block; }
#mob-drawer-backdrop {
position:absolute; inset:0;
background:rgba(0,0,0,.45);
backdrop-filter:blur(2px);
animation:mobFade .18s ease-out;
cursor:pointer;
}
@keyframes mobFade { from{opacity:0} to{opacity:1} }
@keyframes mobSlideR { from{transform:translateX(100%)} to{transform:translateX(0)} }
#mob-drawer {
position:absolute; top:0; right:0; bottom:0;
width:84%; max-width:320px;
background:#1a1d24; color:#fff;
display:flex; flex-direction:column;
animation:mobSlideR .22s ease-out;
padding-top: env(safe-area-inset-top, 0px);
padding-bottom: env(safe-area-inset-bottom, 0px);
}
.mob-drawer-h {
padding:18px 18px 16px;
display:flex; align-items:center; justify-content:space-between;
border-bottom:1px solid rgba(255,255,255,.08);
}
.mob-drawer-close {
background:rgba(255,255,255,.1); border:none; color:#fff;
width:32px; height:32px; border-radius:6px; font-size:18px;
cursor:pointer; line-height:1;
}
.mob-drawer-body {
flex:1; overflow-y:auto;
padding:8px 0;
}
.mob-drawer-section {
padding:8px 18px 4px;
font-size:9px; font-weight:700; color:rgba(255,255,255,.35);
text-transform:uppercase; letter-spacing:1.2px;
}
.mob-drawer-link {
display:flex; align-items:center; gap:11px;
width:100%; padding:13px 18px;
background:none; border:none;
color:rgba(255,255,255,.85);
font-family:var(--font); font-size:13px; font-weight:500;
text-align:left; cursor:pointer;
}
.mob-drawer-link:active { background:rgba(255,255,255,.06); }
.mob-drawer-link.active { background:rgba(145,89,89,.18); color:#fff; border-left:3px solid var(--bordo); padding-left:15px; }
.mob-drawer-foot {
padding:8px 0;
border-top:1px solid rgba(255,255,255,.08);
}
/* ============================================================
MOBILE — ACTION SHEET (FAB +)
============================================================ */
#mob-add-sheet-overlay,
#mob-status-sheet-overlay {
display:none; position:fixed; inset:0; z-index:1300;
}
body.mob-as-open #mob-add-sheet-overlay { display:block; }
body.mob-ss-open #mob-status-sheet-overlay { display:block; }
.mob-sheet-backdrop {
position:absolute; inset:0;
background:rgba(0,0,0,.45);
animation:mobFade .15s ease-out;
cursor:pointer;
}
#mob-status-sheet {
position:absolute; left:0; right:0; bottom:0;
background:var(--surface);
border-top-left-radius:16px; border-top-right-radius:16px;
padding:8px 14px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
animation:mobSlideUp .22s ease-out;
}
@keyframes mobSlideUp { from{transform:translateY(100%)} to{transform:translateY(0)} }
#mob-add-sheet {
position:absolute; left:0; right:0; bottom:0;
background:var(--surface);
border-top-left-radius:16px; border-top-right-radius:16px;
padding:8px 14px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
animation:mobSlideUp .22s ease-out;
}
.mob-as-grip {
width:40px; height:4px; border-radius:2px;
background:var(--border-strong);
margin:6px auto 14px;
}
.mob-as-title {
font-size:11px; font-weight:700; color:var(--text-light);
text-transform:uppercase; letter-spacing:.8px;
padding:0 6px 8px;
}
.mob-as-item {
width:100%; padding:14px 12px;
background:none; border:none; border-radius:10px;
display:flex; align-items:center; gap:14px;
text-align:left; cursor:pointer; font-family:var(--font);
margin-bottom:4px;
}
.mob-as-item:active { background:var(--gelo); }
.mob-as-ico { font-size:24px; flex-shrink:0; width:38px; text-align:center; }
.mob-as-lbl { display:block; font-size:14px; font-weight:600; color:var(--text); }
.mob-as-sub { display:block; font-size:11px; color:var(--text-light); margin-top:2px; }
.mob-as-cancel {
width:100%; padding:13px;
background:var(--gelo); border:none; border-radius:10px;
font-family:var(--font); font-size:14px; font-weight:600;
color:var(--text-mid); cursor:pointer;
margin-top:8px;
}
/* ============================================================
MOBILE — PULL TO REFRESH
============================================================ */
#mob-ptr {
position:absolute; left:0; right:0; top:0;
display:flex; align-items:center; justify-content:center;
height:0; overflow:hidden;
pointer-events:none;
transition:height .15s ease-out;
background:linear-gradient(180deg, var(--bordo), var(--bordo) 60%, transparent);
color:#fff; font-family:var(--font); font-size:11px; font-weight:700;
z-index:10;
}
#mob-ptr.pulling { transition:none; }
#mob-ptr.refreshing { height:50px; }
.mob-ptr-spinner {
width:18px; height:18px; border-radius:50%;
border:2px solid rgba(255,255,255,.3); border-top-color:#fff;
animation: ptrSpin .8s linear infinite;
display:inline-block; margin-right:8px; vertical-align:middle;
}
@keyframes ptrSpin { to { transform:rotate(360deg); } }
/* ============================================================
MOBILE — MODAIS FULL-SCREEN
============================================================ */
@media (max-width: 768px){
.modal-overlay.open .modal {
width:100% !important; max-width:100% !important;
height:100vh; height:100dvh; max-height:100vh; max-height:100dvh;
border-radius:0 !important;
margin:0 !important;
padding:18px 18px 14px !important;
padding-top: calc(18px + env(safe-area-inset-top, 0px)) !important;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)) !important;
overflow-y:auto;
display:flex; flex-direction:column;
}
.modal-overlay.open .modal .mh {
position:sticky; top: calc(0px - env(safe-area-inset-top, 0px));
background:var(--surface); margin:-18px -18px 14px;
margin-top: calc(-18px - env(safe-area-inset-top, 0px));
padding:14px 18px;
padding-top: calc(14px + env(safe-area-inset-top, 0px));
border-bottom:1px solid var(--border);
z-index:5;
}
.modal-overlay.open .modal .mf {
position:sticky; bottom:0; bottom: calc(0px - env(safe-area-inset-bottom, 0px));
background:var(--surface);
margin:14px -18px -14px;
margin-bottom: calc(-14px - env(safe-area-inset-bottom, 0px));
padding:14px 18px;
padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
border-top:1px solid var(--border);
z-index:5;
}
/* Botão de fechar maior no mobile */
.modal-overlay.open .mc { padding:8px; min-width:36px; min-height:36px; }
/* Inputs maiores e melhor espaçados no mobile */
.modal-overlay.open .fi {
font-size:16px !important; /* >=16px previne zoom automático no iOS ao focar */
padding:10px 12px;
}
}
/* Card pressionado (long-press feedback visual) */
.mob-card.pressing { background:var(--surface-alt); transform:scale(.98); transition:transform .15s, background .15s; }
/* KPI cards mobile (Dashboard) */
.mob-kpi-grid {
display:grid; grid-template-columns:1fr 1fr; gap:10px;
margin-bottom:14px;
}
.mob-kpi {
background:var(--surface); border:1px solid var(--border);
border-radius:10px; padding:14px 14px;
}
.mob-kpi-lbl { font-size:10px; font-weight:700; color:var(--text-light); text-transform:uppercase; letter-spacing:.5px; margin-bottom:6px; }
.mob-kpi-val { font-size:20px; font-weight:800; color:var(--navy); letter-spacing:-.3px; }
.mob-kpi-sub { font-size:11px; color:var(--text-mid); margin-top:3px; }
.mob-kpi.full { grid-column:1/-1; }
.mob-kpi-bar {
margin-top:8px; height:6px; background:var(--gelo); border-radius:3px; overflow:hidden;
}
.mob-kpi-bar > div { height:100%; background:var(--green); border-radius:3px; }
/* ============================================================
FILTER CHIPS / VIEWS BAR
============================================================ */
.views-bar { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.view-chip {
display:inline-flex; align-items:center; gap:5px;
background:var(--surface); border:1px solid var(--border);
border-radius:16px; padding:5px 12px;
font-size:12px; color:var(--text-mid);
cursor:pointer; font-family:var(--font); font-weight:500;
transition:all .15s;
}
.view-chip:hover { border-color:var(--border-strong); color:var(--text); }
.view-chip.active { background:var(--text); color:var(--white); border-color:var(--text); }
.view-chip .x { opacity:.5; font-weight:400; margin-left:2px; }
.view-chip .x:hover { opacity:1; }
.view-add { background:none; border:1px dashed var(--border-strong); color:var(--text-light); }
.view-quick { background:var(--surface-alt); border-color:var(--border); color:var(--text); }
/* ============================================================
METRICS
============================================================ */
.met-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(420px, 1fr)); gap:16px; margin-bottom:18px; }
.met-card {
background:var(--surface); border-radius:var(--radius);
border:1px solid var(--border); padding:18px 20px;
}
.met-card-h { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.met-card-t { font-size:14px; font-weight:700; color:var(--text); letter-spacing:-.2px; }
.met-card-sub { font-size:11px; color:var(--text-light); font-weight:500; }
.met-toggle { display:inline-flex; background:var(--surface-alt); border-radius:7px; padding:2px; border:1px solid var(--border); }
.met-toggle button {
border:none; background:none;
padding:5px 11px; font-size:11px; font-weight:600;
color:var(--text-mid); cursor:pointer;
border-radius:5px; font-family:var(--font);
transition:all .12s;
}
.met-toggle button.active { background:var(--surface); color:var(--text); box-shadow:var(--shadow-sm); }
.met-canvas-wrap { position:relative; height:240px; }
.met-table { width:100%; border-collapse:collapse; font-size:12px; margin-top:8px; }
.met-table th {
text-align:left; padding:8px 10px;
font-size:10px; font-weight:600; color:var(--text-light);
text-transform:uppercase; letter-spacing:.6px;
border-bottom:1px solid var(--border);
}
.met-table td { padding:9px 10px; border-bottom:1px solid var(--border-soft); color:var(--text); }
.met-table tr:last-child td { border-bottom:none; }
.met-table .num { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.met-empty { text-align:center; padding:32px; color:var(--text-light); font-size:12px; }
.met-bar-cell { position:relative; }
.met-bar-fill {
position:absolute; left:0; top:0; bottom:0;
background:linear-gradient(90deg, rgba(74,120,163,.12), rgba(145,89,89,.12));
border-radius:3px;
}
.met-bar-cell span { position:relative; z-index:1; }
/* Aging pills */
.aging-pill { display:inline-block; padding:3px 10px; border-radius:12px; font-size:10px; font-weight:600; }
.aging-0 { background:rgba(31,122,71,.12); color:#1f7a47; }
.aging-7 { background:rgba(200,154,62,.15); color:#8a6010; }
.aging-30 { background:rgba(217,119,6,.15); color:#a85b1a; }
.aging-60 { background:rgba(145,89,89,.12); color:var(--bordo); }
.aging-90 { background:#2a1418; color:var(--white); }
/* ============================================================
CORPORATE — CRM cards
============================================================ */
.cp-grid {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
gap:14px;
}
.cp-card {
background:var(--surface);
border:1px solid var(--border);
border-radius:var(--radius);
padding:16px;
cursor:pointer;
transition:border-color .15s, box-shadow .15s, transform .1s;
display:flex; gap:12px; align-items:flex-start;
}
.cp-card:hover {
border-color:var(--border-strong);
box-shadow:var(--shadow);
transform:translateY(-1px);
}
.cp-card.inactive { opacity:.55; }
.cp-avatar {
width:44px; height:44px; border-radius:10px;
background:linear-gradient(135deg, #915959, #c47a7a);
color:var(--white);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:14px;
flex-shrink:0; text-transform:uppercase;
}
.cp-body { flex:1; min-width:0; }
.cp-name {
font-size:14px; font-weight:600; color:var(--text);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
margin-bottom:2px;
}
.cp-email {
font-size:12px; color:var(--text-mid);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cp-meta { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.cp-chip {
font-size:10px; font-weight:600;
padding:3px 8px; border-radius:10px;
background:var(--surface-alt); color:var(--text-mid);
border:1px solid var(--border);
}
.cp-chip.ok { background:rgba(31,122,71,.10); color:#1f7a47; border-color:rgba(31,122,71,.2); }
.cp-chip.warn { background:rgba(200,154,62,.15); color:#8a6010; border-color:rgba(200,154,62,.3); }
.cp-chip.alert { background:rgba(145,89,89,.10); color:var(--bordo); border-color:rgba(145,89,89,.25); }
.cp-icons { display:flex; gap:6px; margin-top:10px; font-size:13px; opacity:.85; }
.cp-tag-chip { display:inline-block; user-select:none; transition:all .12s; }
/* ============================================================
CORPORATE — Profile
============================================================ */
.cprofile-header {
display:flex; gap:18px; align-items:center;
padding:20px 22px;
background:var(--surface); border:1px solid var(--border);
border-radius:var(--radius); margin-bottom:16px;
}
.cprofile-avatar {
width:60px; height:60px; border-radius:12px;
background:linear-gradient(135deg, #915959, #c47a7a);
color:var(--white);
display:flex; align-items:center; justify-content:center;
font-weight:700; font-size:20px; text-transform:uppercase;
flex-shrink:0;
}
.cprofile-headinfo { flex:1; min-width:0; }
.cprofile-name {
font-size:22px; font-weight:700; color:var(--text);
margin-bottom:6px; line-height:1.2; letter-spacing:-.4px;
}
.cprofile-meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.cp-code-badge {
font-family:'SF Mono', Menlo, monospace;
font-size:11px; font-weight:600; color:var(--text-mid);
background:var(--surface-alt); border:1px solid var(--border);
padding:3px 9px; border-radius:5px; letter-spacing:.3px;
}
.cp-status-badge {
font-size:11px; font-weight:600; padding:4px 11px; border-radius:14px;
}
.cp-status-badge.linked { background:rgba(31,122,71,.12); color:#1f7a47; }
.cp-status-badge.unlinked { background:rgba(200,154,62,.18); color:#8a6010; }
.cp-status-badge.pre { background:rgba(74,120,163,.12); color:var(--blue2); }
.cp-status-badge.inactive { background:rgba(120,120,120,.12); color:var(--text-mid); }
.cprofile-grid {
display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:16px;
}
.cprofile-col-right { display:flex; flex-direction:column; gap:16px; }
.cprofile-extras {
display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px;
}
.cprofile-card .cprofile-card-title,
.cprofile-card-title {
font-size:11px; font-weight:700; color:var(--text);
text-transform:uppercase; letter-spacing:.7px;
padding-bottom:12px; margin-bottom:10px;
border-bottom:1px solid var(--border);
display:flex; justify-content:space-between; align-items:center;
}
.cprofile-row { padding:11px 0; border-bottom:1px solid var(--border-soft); }
.cprofile-row:last-child { border-bottom:0; }
.cprofile-row-label {
font-size:10px; font-weight:600; color:var(--text-mid);
text-transform:uppercase; letter-spacing:.6px;
margin-bottom:4px;
}
.cprofile-row-value {
font-size:13px; color:var(--text); font-weight:500;
line-height:1.4;
}
.cprofile-notes {
font-size:13px; color:var(--text); line-height:1.5;
white-space:pre-wrap;
}
.cprofile-link-row {
display:flex; gap:10px; align-items:center;
padding:11px 13px; margin-bottom:6px;
background:var(--surface-alt); border-radius:8px;
cursor:pointer; transition:background .12s;
font-size:12px;
}
.cprofile-link-row:hover { background:rgba(145,89,89,.06); }
.cprofile-link-name { font-weight:600; color:var(--text); }
/* Tabs no perfil */
.cprofile-tabs {
display:flex; gap:0;
border-bottom:1px solid var(--border);
margin-bottom:16px;
}
.cprofile-tab {
padding:11px 18px; background:none; border:none;
border-bottom:2px solid transparent;
cursor:pointer; font-weight:600; color:var(--text-light);
font-size:13px; transition:color .12s, border-color .12s;
font-family:var(--font);
}
.cprofile-tab:hover { color:var(--text); }
.cprofile-tab.active { color:var(--text); border-bottom-color:var(--bordo); }
.cprofile-tab .tab-count { font-size:11px; color:var(--text-light); margin-left:5px; font-weight:500; }
.cprofile-address-block { padding:12px 0; border-bottom:1px solid var(--border-soft); }
.cprofile-address-block:last-child { border-bottom:0; }
.cprofile-address-title { font-size:13px; font-weight:600; color:var(--text); margin-bottom:2px; }
.cprofile-address-subtitle { font-size:11px; color:var(--text-light); font-style:italic; margin-bottom:6px; }
.cprofile-address-value { font-size:12px; color:var(--text-mid); }
@media (max-width:900px) {
.cprofile-grid, .cprofile-extras { grid-template-columns:1fr; }
}
/* ============================================================
CORPORATE — CHART (estrutura societaria visual)
Layout: arvore vertical com cards conectados por linhas CSS.
Conectores feitos com pseudo-elements (sem SVG) para zero dep.
============================================================ */
.corp-chart-root { display:flex; justify-content:center; min-width:fit-content; padding:20px 8px; }
.corp-chart-node { display:flex; flex-direction:column; align-items:center; position:relative; }
/* ========== GOVERNANCA — anexo LATERAL (direita do card) ==========
Diretores, Managers, Officers, Nominees aparecem ao LADO da empresa,
conectados por linha tracejada horizontal. Visual de "anexo" — nao
compete com hierarquia de propriedade.
============================================================ */
.corp-chart-card-wrap {
position:relative;
display:inline-block;
/* card mantem largura natural; governanca sai do fluxo (absolute) para
nao deslocar o card horizontalmente nem desalinhar conectores. */
}
.corp-chart-governance-side {
position:absolute;
left:100%; top:50%; transform:translateY(-50%);
margin-left:38px;
display:flex; flex-direction:column; align-items:flex-start; gap:6px;
min-width:160px;
z-index:1;
}
/* Linha tracejada horizontal conectando ao card */
.corp-chart-governance-side::before {
content:''; position:absolute;
right:100%; top:50%;
width:38px; height:0;
border-top:1.5px dashed var(--text-light);
transform:translateY(-50%);
}
.corp-chart-governance-label-side {
font-size:9px; font-weight:700; letter-spacing:1.4px;
color:var(--text-light); text-transform:uppercase;
background:var(--surface); padding:3px 10px; border-radius:10px;
border:1px dashed var(--border-strong);
margin-bottom:4px;
}
/* Cards de governanca a direita ficam alinhados a esquerda do bloco */
.corp-chart-governance-side > .corp-chart-node { align-self:flex-start; }
.corp-chart-governance-side .corp-chart-card { min-width:160px; }
/* ========== SUBSIDIARIAS — cadeia DESCENDENTE (empresas que esta detem) ==========
Mesma logica visual da hierarquia ascendente: linha solida + conectores em T.
Aparece abaixo do card central. Cada subsidiaria pode ter as suas
proprias subsidiarias (recursao para baixo).
============================================================ */
.corp-chart-children,
.corp-chart-subsidiaries {
display:flex; gap:24px; align-items:flex-start; justify-content:center;
position:relative; padding-top:36px;
min-width:fit-content;
}
.corp-chart-children::before,
.corp-chart-subsidiaries::before {
content:''; position:absolute; top:0; left:50%;
width:2px; height:18px; background:var(--border-strong); transform:translateX(-50%);
}
.corp-chart-children::after,
.corp-chart-subsidiaries::after {
content:''; position:absolute; top:18px; left:0; right:0;
height:2px; background:var(--border-strong);
}
.corp-chart-children:has(> .corp-chart-node:only-child)::after,
.corp-chart-subsidiaries:has(> .corp-chart-node:only-child)::after { display:none; }
.corp-chart-children > .corp-chart-node::before,
.corp-chart-subsidiaries > .corp-chart-node::before {
content:''; position:absolute; top:-18px; left:50%;
width:2px; height:18px; background:var(--border-strong); transform:translateX(-50%);
}
/* ========== JOINT TENANCY (JTWROS) — bloco que envolve membros ========== */
.corp-chart-jt-group {
display:flex; flex-direction:column; align-items:stretch;
border:1.5px solid var(--gold);
border-radius:12px;
padding:8px 10px 12px;
background:rgba(200,154,62,.06);
position:relative;
}
.corp-chart-jt-header {
display:flex; align-items:center; gap:8px;
margin-bottom:8px;
padding:0 4px;
font-family:var(--font);
}
.corp-chart-jt-icon { color:var(--gold); font-size:14px; line-height:1; }
.corp-chart-jt-label {
flex:1;
font-size:10px; font-weight:800; letter-spacing:.6px;
color:#8a6010; text-transform:uppercase;
}
.corp-chart-jt-total {
font-size:11px; font-weight:700;
color:#8a6010;
font-variant-numeric:tabular-nums;
}
.corp-chart-jt-members {
display:flex; gap:14px; align-items:flex-end; justify-content:center;
}
/* ========== ACIMA do card (cadeia de socios ascendente: UBO no topo) ========== */
.corp-chart-owners {
display:flex; gap:24px; align-items:flex-end; justify-content:center;
position:relative; padding-bottom:36px;
min-width:fit-content;
}
/* Linha vertical do trunk descendo ate o card (abaixo do bloco) */
.corp-chart-owners::after {
content:''; position:absolute; bottom:0; left:50%;
width:2px; height:18px; background:var(--border-strong); transform:translateX(-50%);
}
/* Linha horizontal conectando os owners */
.corp-chart-owners::before {
content:''; position:absolute; bottom:18px; left:0; right:0;
height:2px; background:var(--border-strong);
}
.corp-chart-owners:has(> .corp-chart-node:only-child)::before { display:none; }
/* Linha vertical descendo de cada owner ate a horizontal */
.corp-chart-owners > .corp-chart-node::after {
content:''; position:absolute; bottom:-18px; left:50%;
width:2px; height:18px; background:var(--border-strong); transform:translateX(-50%);
}
/* ===== CARDS — base (empresa) ===== */
.corp-chart-card {
position:relative;
min-width:180px; max-width:220px;
padding:16px 14px 12px;
background:var(--surface);
border:1.5px solid var(--border-strong);
border-radius:10px;
text-align:center;
box-shadow:var(--shadow-sm);
transition:box-shadow .15s, border-color .15s, transform .15s;
}
.corp-chart-card:hover { box-shadow:var(--shadow); border-color:var(--bordo2); }
/* Affordance de clique — cards navegaveis */
.corp-chart-card-clickable { cursor:pointer; }
.corp-chart-card-clickable:hover {
border-color:var(--bordo);
box-shadow:0 8px 20px rgba(145,89,89,.12), 0 2px 6px rgba(15,16,20,.08);
transform:translateY(-1px);
}
.corp-chart-card-person.corp-chart-card-clickable:hover {
background:var(--surface);
border-style:solid;
border-color:var(--bordo);
}
/* Empresa em foco nunca eh clicavel (voce ja esta nela) */
.corp-chart-card-root { cursor:default; }
.corp-chart-card-root:hover { transform:translateY(-2px); /* mantem o estado original */ }
/* ===== Card EMPRESA RAIZ (o que o usuario esta vendo agora) =====
Destaque forte: mais largo, sombra azul, anel exterior. */
.corp-chart-card-root {
min-width:220px; max-width:280px;
padding:20px 18px 16px;
background:linear-gradient(180deg, #fff, rgba(74,120,163,.04));
border:2px solid var(--blue2);
box-shadow:0 0 0 4px rgba(74,120,163,.10), 0 8px 24px rgba(74,120,163,.18);
transform:translateY(-2px);
}
.corp-chart-card-root:hover { border-color:var(--blue2); box-shadow:0 0 0 4px rgba(74,120,163,.14), 0 10px 28px rgba(74,120,163,.22); }
.corp-chart-card-root .corp-chart-card-title { font-size:15px; }
/* ===== Card EMPRESA (sub) — solido como o raiz mas sem o anel ===== */
.corp-chart-card-company {
border-style:solid;
}
/* ===== Card PESSOA — visual SUTIL, distingue de empresa =====
Sem caixa "fechada": usa contorno fino, fundo neutro,
icone redondo (vs. quadrado das empresas). */
.corp-chart-card-person {
background:transparent;
border:1px dashed var(--border-strong);
box-shadow:none;
padding:12px 14px 10px;
min-width:160px; max-width:200px;
}
.corp-chart-card-person:hover {
background:var(--surface);
border-style:solid;
box-shadow:var(--shadow-sm);
}
/* ===== ICONES ===== */
.corp-chart-card-icon {
width:38px; height:38px; margin:0 auto 8px;
display:flex; align-items:center; justify-content:center;
background:rgba(74,120,163,.10);
border-radius:9px;
color:var(--blue2);
}
.corp-chart-card-root .corp-chart-card-icon {
width:44px; height:44px;
background:var(--blue2); color:#fff;
border-radius:10px;
box-shadow:0 4px 12px rgba(74,120,163,.30);
}
/* Pessoa: icone redondo, neutro */
.corp-chart-card-person .corp-chart-card-icon {
width:32px; height:32px; margin-bottom:6px;
background:transparent;
border:1px solid var(--border-strong);
border-radius:50%;
color:var(--text-mid);
}
.corp-chart-card-person:hover .corp-chart-card-icon {
border-color:var(--text-mid); color:var(--text);
}
/* ===== TIPOGRAFIA ===== */
.corp-chart-card-title {
font-size:13px; font-weight:700; color:var(--navy);
line-height:1.3; margin-bottom:4px;
word-wrap:break-word;
}
.corp-chart-card-person .corp-chart-card-title {
font-size:12px; font-weight:600; color:var(--text);
}
.corp-chart-card-sub {
font-size:11px; color:var(--text-mid);
margin-bottom:8px; font-weight:500;
}
.corp-chart-meta {
display:flex; flex-wrap:wrap; gap:4px; justify-content:center; margin-top:6px;
}
.corp-chart-pct {
font-size:14px; font-weight:700; color:var(--navy); display:block; width:100%; margin-top:4px;
font-family:var(--font-display, var(--font));
font-variant-numeric:tabular-nums;
}
.corp-chart-card-person .corp-chart-pct {
font-size:13px; color:var(--text);
}
.corp-chart-class {
font-size:10px; font-weight:600; color:var(--text-mid);
background:var(--surface-alt); padding:2px 7px; border-radius:10px;
}
.corp-chart-root-badge {
display:inline-block; margin-top:8px;
font-size:10px; font-weight:800; letter-spacing:.7px;
color:#fff; background:var(--blue2);
padding:4px 10px; border-radius:10px; text-transform:uppercase;
}
/* ===== CHIPS DE PAPEL (mesmas cores do filtro de tags acima) ===== */
.corp-chart-chip {
display:inline-block;
font-size:9px; font-weight:700; letter-spacing:.4px;
padding:3px 8px; border-radius:10px; text-transform:uppercase;
border:1px solid;
}
.corp-chart-chip-shareholder, .corp-chart-chip-socio { color:var(--blue2); border-color:rgba(74,120,163,.4); background:rgba(74,120,163,.08); }
.corp-chart-chip-diretor, .corp-chart-chip-director, .corp-chart-chip-manager, .corp-chart-chip-officer { color:var(--text-mid); border-color:var(--border-strong); background:var(--surface-alt); }
.corp-chart-chip-ubo, .corp-chart-chip-beneficiario_final { color:#a06410; border-color:rgba(200,154,62,.45); background:rgba(200,154,62,.10); }
.corp-chart-chip-nominee { color:#7a5b9b; border-color:rgba(140,100,180,.40); background:rgba(140,100,180,.08); }
.corp-chart-chip-secretario, .corp-chart-chip-signatario { color:var(--green); border-color:rgba(31,122,71,.40); background:rgba(31,122,71,.08); }
.corp-chart-chip-parte_relacionada { color:var(--text-mid); border-color:var(--border-strong); background:var(--surface-alt); }
/* ===== EXPAND/COLLAPSE ===== */
.corp-chart-expand {
position:absolute; left:50%; bottom:-12px; transform:translateX(-50%);
width:24px; height:24px; border-radius:50%;
background:var(--surface); border:1.5px solid var(--border-strong);
display:flex; align-items:center; justify-content:center;
cursor:pointer; color:var(--text-mid);
transition:transform .2s, color .15s, border-color .15s;
z-index:2;
}
.corp-chart-expand:hover { color:var(--bordo); border-color:var(--bordo); }
.corp-chart-expand.open { transform:translateX(-50%) rotate(180deg); color:var(--bordo); border-color:var(--bordo); }
/* Variante para owners — botao no TOPO do card (apontando para cima) */
.corp-chart-expand-up {
bottom:auto; top:-12px;
transform:translateX(-50%) rotate(180deg);
}
.corp-chart-expand-up.open { transform:translateX(-50%) rotate(0deg); }
.corp-chart-nested,
.corp-chart-nested-owners { /* container — animacao opcional */ }
/* ============================================================
PARTNER CRM — modal com tabs + cards de contato/doc/interacao
============================================================ */
.cspm-tab {
background:none; border:none; cursor:pointer;
padding:8px 14px; font-size:12px; font-weight:600; font-family:var(--font);
color:var(--text-light);
border-bottom:2px solid transparent;
transition:color .12s, border-color .12s;
}
.cspm-tab:hover { color:var(--text-mid); }
.cspm-tab.active { color:var(--bordo); border-bottom-color:var(--bordo); }
.cspm-tab-count {
display:inline-block; min-width:18px;
font-size:9px; font-weight:700; padding:1px 5px; margin-left:4px;
background:var(--surface-alt); color:var(--text-mid);
border-radius:8px;
}
.cspm-tab.active .cspm-tab-count { background:rgba(145,89,89,.15); color:var(--bordo); }
.cspm-pane { animation:fadeIn .15s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
/* Chips de areas (multi-select) */
.cspm-area-chip {
display:inline-block; padding:5px 12px; border-radius:14px;
font-size:11px; font-weight:600;
border:1px solid var(--border-strong);
background:var(--surface); color:var(--text-mid);
cursor:pointer;
transition:all .12s;
}
.cspm-area-chip:hover { border-color:var(--bordo2); color:var(--text); }
.cspm-area-chip.on {
background:var(--bordo); color:#fff; border-color:var(--bordo);
}
.cspm-area-chip.on:hover { background:#7a4848; }
/* Cards de contato/doc/interacao */
.cspm-contact-card,
.cspm-doc-card,
.cspm-inter-card {
border:1px solid var(--border);
border-radius:8px;
padding:12px 14px;
margin-bottom:8px;
background:var(--surface);
cursor:pointer;
transition:border-color .12s, box-shadow .12s;
}
.cspm-contact-card:hover,
.cspm-doc-card:hover,
.cspm-inter-card:hover {
border-color:var(--bordo2);
box-shadow:var(--shadow-sm);
}
/* ============================================================
CORPORATE — People table
============================================================ */
.cp-people-table tbody tr.cp-people-row { cursor:pointer; transition:background .12s; }
.cp-people-table tbody tr.cp-people-row:hover { background:var(--surface-alt); }
.cp-people-table td { vertical-align:top; padding:12px 12px; }
.cp-people-comp-row {
padding:5px 9px; margin-bottom:4px;
background:var(--surface-alt); border-radius:6px;
cursor:pointer; transition:background .12s;
}
.cp-people-comp-row:hover { background:rgba(145,89,89,.07); }
.cp-people-comp-row:last-child { margin-bottom:0; }
/* ============================================================
SCROLLBAR (sutil)
============================================================ */
*::-webkit-scrollbar { width:10px; height:10px; }
*::-webkit-scrollbar-track { background:transparent; }
*::-webkit-scrollbar-thumb { background:rgba(120,120,120,.18); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover { background:rgba(120,120,120,.30); border:2px solid transparent; background-clip:padding-box; }
/* Scrollbar dark (sidebar) */
.snav::-webkit-scrollbar-thumb { background:rgba(255,255,255,.10); border:2px solid transparent; background-clip:padding-box; }
.snav::-webkit-scrollbar-thumb:hover { background:rgba(255,255,255,.20); border:2px solid transparent; background-clip:padding-box; }
/* ============================================================
FOCUS RING (acessibilidade) — visivel apenas para navegacao por teclado.
Sprint 1: estende a cobertura para inputs/textareas/selects/checkboxes
============================================================ */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible,
.fi:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline:2px solid var(--bordo);
outline-offset:2px;
border-radius:4px;
box-shadow:0 0 0 4px rgba(145,89,89,.15);
}
/* Mouse click nao mostra ring — mantem visual limpo para uso normal */
button:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible) {
outline:none;
}
/* ============================================================
UTILS — divisor sutil
============================================================ */
hr { border:none; border-top:1px solid var(--border); margin:18px 0; }
/* ============================================================
ICON SYSTEM (Lucide-style SVG)
- contém o SVG injetado por JS
- SVG herda cor via stroke="currentColor"
============================================================ */
[data-icon] {
display:inline-flex; align-items:center; justify-content:center;
flex-shrink:0; line-height:0;
}
[data-icon] svg { display:block; }
/* Sidebar nav items */
.ni > span[data-icon] {
width:18px; height:18px; opacity:.65;
transition:opacity .15s;
}
.ni:hover > span[data-icon] { opacity:.9; }
.ni.active > span[data-icon] { opacity:1; }
.ni > span[data-icon] svg { width:16px; height:16px; }
/* Sidebar foot buttons */
.btnout span[data-icon],
.sfoot button span[data-icon] { opacity:.85; }
/* Manter compatibilidade com spans unicode legados (caso restem) */
.ni > span:first-child:not([data-icon]) {
opacity:.6; font-size:14px; width:18px; text-align:center;
display:inline-flex; align-items:center; justify-content:center;
}
.ni.active > span:first-child:not([data-icon]) { opacity:1; }
/* ============================================================
MOBILE — REFINAMENTOS UX/UI (consolidados)
============================================================ */
/* 1. Sync widget acima da bottom nav (~80px + safe-area) */
body.mobile-active #sync-widget {
bottom: calc(90px + env(safe-area-inset-bottom, 0px)) !important;
right: 12px !important;
font-size: 10px !important;
padding: 5px 10px !important;
opacity: .92 !important;
}
/* 2. Bottom nav: indicador visual mais forte no item ativo (dot pill) */
.mob-bn { position:relative; }
.mob-bn.active::before {
content:""; position:absolute; top:6px; left:50%;
width:24px; height:3px; border-radius:2px;
background: var(--bordo);
transform: translateX(-50%);
animation: mobNavDotIn .22s ease-out;
}
@keyframes mobNavDotIn { from{opacity:0;transform:translateX(-50%) scaleX(.4);} to{opacity:1;transform:translateX(-50%) scaleX(1);} }
/* FAB não tem o indicador */
.mob-bn.mob-bn-fab.active::before { display:none; }
/* Touch targets reforçados (Apple HIG: 44pt mínimo) */
.mob-bn { min-height: 64px; }
/* 3. PEDIDOS legend: quebra de linha em mobile + espaçamento generoso */
body.mobile-active #dash-ped-legend {
flex-wrap: wrap !important;
gap: 4px 12px !important;
padding: 8px 12px !important;
font-size: 10px !important;
line-height: 1.6 !important;
}
body.mobile-active #dash-ped-legend > span:last-child {
flex-basis: 100%;
margin-left: 0 !important;
padding-top: 2px;
border-top: 1px solid var(--border-soft);
margin-top: 4px;
}
/* 4. Topbar do Dashboard mobile: ações empilhadas, "Exportar" full-width */
body.mobile-active.mob-show-main #page-dashboard .topbar > div:nth-child(2) > * {
flex: 1 1 100% !important;
white-space: normal !important;
text-align: center;
justify-content: center !important;
}
body.mobile-active.mob-show-main #page-dashboard #topbar-date {
font-size: 11px !important;
text-align: left;
padding: 4px 0;
flex: 1 1 100% !important;
}
body.mobile-active.mob-show-main #page-dashboard #btn-pipedrive-sync,
body.mobile-active.mob-show-main #page-dashboard #btn-export-dash {
padding: 9px 12px !important;
min-height: 38px;
font-size: 12px !important;
}
/* 5. Tabela com scroll horizontal: sombra/fade indicando que tem mais conteúdo */
body.mobile-active.mob-show-main .tw {
position: relative;
background:
linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center / 24px 100% no-repeat,
linear-gradient(to left, var(--surface) 30%, rgba(255,255,255,0)) right center / 24px 100% no-repeat,
linear-gradient(to right, rgba(0,0,0,.08), rgba(0,0,0,0)) left center / 16px 100% no-repeat,
linear-gradient(to left, rgba(0,0,0,.08), rgba(0,0,0,0)) right center / 16px 100% no-repeat;
background-attachment: local, local, scroll, scroll;
}
/* 6. Cards de Tarefas: cursor pointer + feedback de tap mais claro */
body.mobile-active .mob-card[data-mob-rid] {
cursor: pointer;
transition: transform .1s, box-shadow .15s, background .15s;
}
body.mobile-active .mob-card[data-mob-rid]:active {
transform: scale(.985);
background: var(--surface-alt);
}
/* 7. Status sheet (long-press): chips com touch target adequado */
body.mob-ss-open #mob-ss-options button {
min-height: 40px !important;
padding: 10px 14px !important;
font-size: 13px !important;
flex: 0 1 auto;
}
#mob-ss-options { padding: 4px 6px 8px; max-height: 65vh; overflow-y: auto; }
#mob-ss-options::-webkit-scrollbar { width: 0; }
/* 8. Drawer "Sair" — área maior + visual de risco */
.mob-drawer-foot .mob-drawer-link { min-height: 48px; }
/* 9. Filtros do dash em mobile — melhor pareamento de selects */
body.mobile-active.mob-show-main #dash-filters select,
body.mobile-active.mob-show-main #dash-filters input,
body.mobile-active.mob-show-main #dash-filters .multisel button {
min-height: 36px !important;
padding: 7px 10px !important;
font-size: 13px !important; /* ≥13px ajuda no toque */
}
body.mobile-active.mob-show-main #dash-filters input[id="df-search"] {
flex: 1 1 100% !important;
}
body.mobile-active.mob-show-main #dash-filters > div > span:first-child {
flex: 1 1 100% !important;
}
/* 10. Dashboard: "Todos os Registros" header — mais respiro */
body.mobile-active.mob-show-main #page-dashboard .content > div[style*="margin-bottom:12px"] {
margin-top: 10px !important;
}
/* 11. Mob-topbar (custom Tarefas) — sticky e botão Sair com mais área */
.mob-topbar { position: sticky; top: 0; z-index: 5; }
.mob-topbar .mob-logout { min-height: 36px; padding: 8px 14px !important; font-weight: 600; }
/* 12. Mob-tabs sticky abaixo da topbar */
.mob-tabs { top: 0; }
.mob-tab { min-height: 44px; }
/* 13. Action sheet items — alvos maiores */
.mob-as-item { min-height: 56px; }
.mob-as-cancel { min-height: 48px; }
/* 14. Drawer links — alvos maiores e leitura confortável */
.mob-drawer-link { min-height: 46px; font-size: 14px; }
.mob-drawer-section { font-size: 10px; }
/* 15. Modal de detalhe em mobile: ações sticky no rodapé com sombra superior sutil */
@media (max-width: 768px){
.modal-overlay.open .modal .mf {
box-shadow: 0 -2px 8px rgba(20,20,25,.04);
}
/* Botões em modal mobile: alvo mínimo 44px */
.modal-overlay.open .modal button:not(.mc) { min-height: 42px; }
}
/* 16. Page Dashboard: KPI cards com dimensão mais legível */
body.mobile-active.mob-show-main .sc { min-height: 76px; }
body.mobile-active.mob-show-main .sv { font-size: 22px !important; }
body.mobile-active.mob-show-main .ss { line-height: 1.4; }
/* ============================================================
COMERCIAL — PIPELINE KANBAN
============================================================ */
.pd-kanban {
display:flex; gap:12px;
overflow-x:auto; overflow-y:hidden;
padding-bottom:8px;
align-items:flex-start;
scroll-snap-type:x proximity;
-webkit-overflow-scrolling:touch;
}
.pd-col {
flex:0 0 280px; max-width:280px;
background:var(--surface-alt);
border:1px solid var(--border);
border-radius:10px;
padding:10px 10px 14px;
display:flex; flex-direction:column;
max-height: calc(100vh - 220px);
scroll-snap-align:start;
transition:background .15s, border-color .15s;
}
.pd-col.pd-col-hover { background:#f0e7dc; border-color:var(--bordo); }
.pd-col-h { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:4px 4px 2px; }
.pd-col-t { font-size:12px; font-weight:700; color:var(--text); letter-spacing:.2px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-col-meta { font-size:10px; color:var(--text-light); font-weight:600; }
.pd-col-sub { font-size:11px; color:var(--text-mid); font-weight:600; padding:0 4px 8px; border-bottom:1px dashed var(--border); margin-bottom:8px; }
.pd-col-body { flex:1; overflow-y:auto; padding-right:2px; }
.pd-col-body::-webkit-scrollbar { width:4px; }
.pd-col-body::-webkit-scrollbar-thumb { background:rgba(0,0,0,.1); border-radius:2px; }
.pd-col-empty {
text-align:center; padding:18px 8px;
font-size:10px; color:var(--text-light); font-style:italic;
background:rgba(0,0,0,.02); border-radius:6px;
border:1px dashed var(--border);
}
.pd-card {
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
padding:9px 11px;
margin-bottom:6px;
cursor:grab;
transition:box-shadow .15s, transform .1s, border-color .15s;
box-shadow: 0 1px 2px rgba(0,0,0,.03);
}
.pd-card:hover { border-color:var(--border-strong); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.pd-card:active { cursor:grabbing; }
.pd-card.pd-dragging { opacity:.5; transform:rotate(-1deg) scale(.98); }
.pd-card-title { font-size:12px; font-weight:600; color:var(--text); line-height:1.35; margin-bottom:3px; word-break:break-word; }
.pd-card-sub { font-size:10px; color:var(--text-light); margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-card-foot { display:flex; align-items:center; gap:6px; font-size:10px; }
.pd-card-val { font-weight:700; color:var(--navy); }
.pd-card-owner { background:rgba(74,120,163,.10); color:var(--blue2); padding:2px 7px; border-radius:8px; font-weight:600; font-size:9px; }
.pd-card-aging { background:rgba(145,89,89,.12); color:var(--bordo); padding:2px 6px; border-radius:8px; font-weight:700; font-size:9px; }
/* ----- Modal de deal: anotações ----- */
.pd-deal-note {
background:var(--gelo, #fafaf8);
border:1px solid var(--border);
border-left:3px solid var(--bordo);
border-radius:6px;
padding:8px 10px;
margin-bottom:6px;
font-family:var(--font);
}
.pd-deal-note-head {
display:flex;
align-items:center;
gap:8px;
margin-bottom:4px;
}
.pd-deal-note-who {
font-size:11px;
font-weight:700;
color:var(--navy);
}
.pd-deal-note-when {
font-size:10px;
color:var(--text-light);
flex:1;
}
.pd-deal-note-btn {
background:none;
border:1px solid transparent;
border-radius:5px;
padding:2px 6px;
font-size:12px;
cursor:pointer;
line-height:1;
}
.pd-deal-note-btn:hover { background:#fff; border-color:var(--border-strong); }
.pd-deal-note-btn-danger:hover { background:rgba(145,89,89,.08); }
.pd-deal-note-body {
font-size:12px;
color:var(--text);
line-height:1.45;
word-break:break-word;
}
.pd-note-edit {
background:#fff;
border:1px solid var(--border-strong);
border-radius:7px;
padding:8px;
margin-bottom:10px;
}
.pd-note-edit textarea {
width:100%;
resize:vertical;
font-family:var(--font);
font-size:12px;
border:1px solid var(--border);
border-radius:5px;
padding:6px 8px;
min-height:64px;
}
.pd-note-edit-actions {
display:flex;
justify-content:flex-end;
gap:6px;
margin-top:6px;
}
/* Links de navegação dentro da modal de deal (cliente, organização, vendedor) */
.pd-deal-link {
background:none; border:none; padding:0;
font-family:var(--font);
font-size:13px; font-weight:600;
color:var(--blue2);
cursor:pointer;
text-align:left;
display:inline-flex; align-items:center; gap:4px;
border-bottom:1px dashed transparent;
transition:color .12s, border-color .12s;
}
.pd-deal-link:hover {
color:var(--bordo);
border-bottom-color:var(--bordo);
}
/* ============================================================
COMERCIAL — HOJE
============================================================ */
.pd-hoje-filters {
display:flex;
flex-direction:column;
gap:8px;
margin-bottom:14px;
padding:10px 12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
}
.pd-chip-row {
display:flex; gap:6px; flex-wrap:wrap; align-items:center;
}
.pd-chip-row-aux { padding-top:6px; border-top:1px dashed var(--border); }
.pd-hoje-filter-label {
font-size:10px;
font-weight:800;
color:var(--text-light);
text-transform:uppercase;
letter-spacing:.7px;
min-width:74px;
}
.pd-hoje-filter {
border:1px solid var(--border);
border-radius:7px;
background:#fff;
color:var(--text);
font-family:var(--font);
font-size:12px;
padding:6px 9px;
min-height:32px;
}
.pd-chip {
background:#fff;
border:1px solid var(--border);
border-radius:14px;
padding:5px 11px;
font-size:11px; font-weight:600;
color:var(--text-mid);
cursor:pointer;
font-family:var(--font);
transition:background .12s, border-color .12s, color .12s;
}
.pd-chip:hover { background:var(--surface-alt); color:var(--text); }
.pd-chip-on {
background:var(--bordo); color:#fff; border-color:var(--bordo);
}
.pd-chip-on:hover { background:var(--bordo); color:#fff; }
.pd-chip-clear {
margin-left:auto;
background:none; border:none;
font-size:11px; color:var(--bordo);
font-weight:600; cursor:pointer;
text-decoration:underline;
font-family:var(--font);
}
.pd-chip-clear:hover { color:#6b3a3a; }
/* KPI cards clicáveis */
.pd-kpi { transition:transform .08s, box-shadow .12s, border-color .12s; }
.pd-kpi:hover { box-shadow:0 2px 8px rgba(0,0,0,.06); border-color:var(--border-strong); }
.pd-kpi:active { transform:translateY(1px); }
.pd-kpi-on { outline:2px solid var(--bordo); outline-offset:-2px; }
/* Painel Por responsável */
.pd-people-head {
display:flex; align-items:center; gap:10px; flex-wrap:wrap;
margin-bottom:6px;
}
.pd-people-toggle {
background:none; border:none;
font-size:12px; font-weight:700; color:var(--text);
cursor:pointer; padding:4px 0;
font-family:var(--font);
}
.pd-people-toggle:hover { color:var(--bordo); }
.pd-people-count { color:var(--text-light); font-weight:600; margin-left:4px; }
.pd-people-active {
font-size:11px; color:var(--text-mid);
}
.pd-people-active b { color:var(--bordo); }
.pd-people-active a { color:var(--bordo); }
.pd-people-body {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(280px, 1fr));
gap:6px;
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
padding:8px;
}
.pd-people-row {
display:flex; align-items:center; gap:8px;
background:#fff;
border:1px solid var(--border);
border-radius:7px;
padding:6px 10px;
cursor:pointer;
font-family:var(--font);
text-align:left;
transition:background .12s, border-color .12s;
min-width:0;
}
.pd-people-row:hover { background:var(--surface-alt); border-color:var(--border-strong); }
.pd-people-row-on { background:rgba(145,89,89,.08); border-color:var(--bordo); }
.pd-people-ini {
flex-shrink:0;
display:inline-flex; align-items:center; justify-content:center;
width:28px; height:28px; border-radius:50%;
background:rgba(79,128,163,.12); color:var(--blue2);
font-size:11px; font-weight:800;
}
.pd-people-name {
flex:1; min-width:0;
font-size:12px; font-weight:600; color:var(--text);
overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-people-stats {
display:flex; gap:4px; flex-wrap:wrap; flex-shrink:0;
}
.pd-people-stat {
font-size:10px; font-weight:700;
padding:2px 6px; border-radius:8px;
background:rgba(0,0,0,.04); color:var(--text-mid);
white-space:nowrap;
}
.pd-people-stat-red { background:rgba(145,89,89,.12); color:var(--bordo); }
.pd-people-stat-bordo { background:rgba(145,89,89,.08); color:var(--bordo); }
.pd-people-stat-blue { background:rgba(79,128,163,.10); color:var(--blue2); }
.pd-people-stat-gray { background:rgba(0,0,0,.05); color:var(--text-light); }
.pd-people-stat-total { background:var(--text); color:#fff; }
.pd-hoje-owner {
display:inline-flex;
align-items:center;
justify-content:center;
min-width:30px;
height:22px;
padding:0 8px;
border-radius:999px;
background:rgba(79,128,163,.12);
color:var(--blue2);
font-size:10px;
font-weight:800;
letter-spacing:.4px;
flex-shrink:0;
}
.pd-hoje-private {
background:rgba(145,89,89,.10);
color:var(--bordo);
}
.pd-hoje-cal {
font-size:10px;
font-weight:700;
color:var(--green);
background:rgba(31,122,71,.09);
border-radius:8px;
padding:2px 7px;
margin-left:6px;
white-space:nowrap;
}
.pd-hoje-sec { margin-bottom:24px; }
.pd-hoje-sec-t {
font-size:12px; font-weight:700; letter-spacing:.3px;
margin-bottom:10px; padding-bottom:6px;
border-bottom:2px solid currentColor; display:inline-block;
}
.pd-hoje-list { display:flex; flex-direction:column; gap:8px; }
.pd-hoje-item {
display:flex; align-items:center; gap:12px;
background:var(--surface);
border:1px solid var(--border);
border-radius:8px;
padding:11px 14px;
transition:background .12s, border-color .12s, box-shadow .12s;
cursor:pointer;
}
.pd-hoje-item:hover { background:var(--surface-alt); border-color:var(--border-strong); box-shadow:0 1px 3px rgba(0,0,0,.04); }
.pd-hoje-item:focus { outline:2px solid var(--bordo); outline-offset:1px; }
.pd-hoje-menu-btn {
flex-shrink:0;
width:28px; height:28px;
border:1px solid transparent;
background:transparent;
border-radius:6px;
color:var(--text-mid);
font-size:18px; font-weight:700;
line-height:1; cursor:pointer;
display:flex; align-items:center; justify-content:center;
transition:background .12s, border-color .12s, color .12s;
}
.pd-hoje-item:hover .pd-hoje-menu-btn { color:var(--text); }
.pd-hoje-menu-btn:hover { background:#fff; border-color:var(--border-strong); color:var(--bordo); }
.pd-hoje-pop {
position:absolute; z-index:9999;
background:#fff;
border:1px solid var(--border-strong);
border-radius:8px;
box-shadow:0 8px 22px rgba(0,0,0,.13);
padding:6px;
display:flex; flex-direction:column; gap:2px;
min-width:220px;
font-family:var(--font);
}
.pd-hoje-pop-it {
text-align:left;
background:none; border:none;
padding:8px 10px;
font-size:12px; color:var(--text);
border-radius:5px;
cursor:pointer;
font-family:var(--font);
}
.pd-hoje-pop-it:hover { background:var(--surface-alt); }
.pd-hoje-pop-danger { color:#915959; }
.pd-hoje-pop-danger:hover { background:rgba(145,89,89,.08); }
/* ----- Modal de atividade: link picker (deal/person/org) ----- */
.pd-na-link-current { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.pd-na-chip {
display:inline-block;
padding:4px 10px;
background:rgba(79,128,163,.10);
color:#2f5874;
border:1px solid rgba(79,128,163,.30);
border-radius:14px;
font-size:11px; font-weight:600;
max-width:340px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.pd-na-link-btn {
background:#fff;
border:1px solid var(--border);
border-radius:6px;
padding:4px 9px;
font-size:11px; font-weight:600; color:var(--text-mid);
cursor:pointer;
font-family:var(--font);
}
.pd-na-link-btn:hover { background:var(--surface-alt); color:var(--text); }
.pd-na-link-clear {
width:22px; height:22px; padding:0;
border-radius:50%;
font-size:14px; line-height:1;
}
.pd-na-link-search { display:flex; gap:6px; align-items:flex-start; position:relative; }
.pd-na-link-search .pd-na-link-q { flex:1; }
.pd-na-suggest {
position:absolute;
top:calc(100% + 2px); left:0; right:0;
z-index:10;
background:#fff;
border:1px solid var(--border-strong);
border-radius:6px;
box-shadow:0 6px 16px rgba(0,0,0,.10);
max-height:240px; overflow-y:auto;
padding:4px;
}
.pd-na-suggest-it {
padding:6px 9px;
border-radius:5px;
cursor:pointer;
}
.pd-na-suggest-it:hover { background:var(--surface-alt); }
.pd-na-suggest-n { font-size:12px; font-weight:600; color:var(--text); }
.pd-na-suggest-h { font-size:10px; color:var(--text-light); margin-top:1px; }
.pd-hoje-check {
width:22px; height:22px; flex-shrink:0;
border:2px solid var(--border-strong);
border-radius:50%;
background:#fff;
cursor:pointer;
transition:all .15s;
position:relative;
}
.pd-hoje-check:hover { border-color:var(--green); background:rgba(31,122,71,.08); }
.pd-hoje-check:hover::after {
content:''; position:absolute; top:50%; left:50%;
width:6px; height:10px; transform:translate(-50%, -60%) rotate(45deg);
border-right:2px solid var(--green); border-bottom:2px solid var(--green);
}
.pd-hoje-body { flex:1; min-width:0; }
.pd-hoje-sub { font-size:13px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; }
.pd-hoje-type { font-size:15px; flex-shrink:0; }
.pd-hoje-ctx { font-size:11px; color:var(--text-light); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pd-hoje-when {
font-size:11px; font-weight:600; color:var(--text-mid);
flex-shrink:0;
padding:4px 10px; border-radius:12px;
background:var(--surface-alt);
white-space:nowrap;
}
/* ============================================================
COMERCIAL — MOBILE RESPONSIVO
============================================================ */
@media (max-width:768px){
.pd-kanban { padding:0 4px 12px; gap:8px; }
.pd-col { flex:0 0 78vw; max-width:78vw; max-height:none; }
.pd-col-body { max-height:60vh; overflow-y:auto; }
/* Card mobile: tap em vez de drag (drag-drop HTML5 não funciona em touch) */
.pd-card { cursor:pointer; }
.pd-card[draggable] { -webkit-user-drag:none; }
.pd-hoje-item { padding:13px 12px; }
.pd-hoje-check { width:26px; height:26px; }
}
body.mobile-active.mob-show-main #page-comercial-pipeline .topbar,
body.mobile-active.mob-show-main #page-comercial-hoje .topbar {
/* mesma altura/padding já tratada pelas regras gerais de topbar mobile */
}
/* Forecast/Summary cards do Pipeline: 2 colunas no mobile */
body.mobile-active.mob-show-main #pd-pipeline-summary > .sc,
body.mobile-active.mob-show-main #pd-hoje-summary > .sc {
flex: 1 1 calc(50% - 7px) !important;
min-width: 0 !important;
}
/* Sprint 5: render HTML sanitizado de notas/atividades do Pipedrive */
.pd-note-content { word-break: break-word; }
.pd-note-content p { margin: 0 0 8px; }
.pd-note-content p:last-child { margin-bottom: 0; }
.pd-note-content ul,
.pd-note-content ol { margin: 0 0 8px 20px; padding: 0; }
.pd-note-content li { margin-bottom: 2px; }
.pd-note-content a {
color: #4F80A3;
text-decoration: underline;
word-break: break-all;
}
.pd-note-content a:hover { color: #355d80; }
.pd-note-content b,
.pd-note-content strong { font-weight: 700; }
.pd-note-content i,
.pd-note-content em { font-style: italic; }
/* Sprint TV: Mural da Empresa em modo televisão.
Esconde sidebar/topbar e expande conteúdo para tela inteira com fonte gigante. */
body.mural-tv .sidebar,
body.mural-tv #review-icon,
body.mural-tv .topbar-extra,
body.mural-tv .global-bar,
body.mural-tv #notif-panel,
body.mural-tv #presence-bar { display: none !important; }
body.mural-tv .main { margin-left: 0 !important; padding: 0 !important; }
body.mural-tv #page-mural .topbar { padding: 18px 28px; }
body.mural-tv #page-mural .tbt { font-size: 28px !important; }
body.mural-tv #page-mural .tbs { font-size: 14px !important; }
body.mural-tv #page-mural .content { padding: 18px 28px 28px; }
body.mural-tv #mural-grid { gap: 28px !important; }
@media (min-width: 1600px) {
body.mural-tv #mural-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
/* ============================================================
FEEDBACK — galeria de anexos (modal e detalhe)
============================================================ */
.fb-gallery {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(110px, 1fr));
gap:8px;
}
.fb-thumb {
position:relative;
background:#fff;
border:1px solid var(--border);
border-radius:6px;
overflow:hidden;
display:flex;
flex-direction:column;
}
.fb-thumb img {
width:100%;
height:80px;
object-fit:cover;
display:block;
}
.fb-thumb-remove {
position:absolute;
top:3px; right:3px;
width:22px; height:22px;
border-radius:50%;
background:rgba(0,0,0,.55);
color:#fff;
border:none;
font-size:14px;
line-height:1;
cursor:pointer;
display:flex; align-items:center; justify-content:center;
font-family:var(--font);
}
.fb-thumb-remove:hover { background:var(--bordo); }
.fb-thumb-name {
font-size:9px;
color:var(--text-light);
padding:3px 6px;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
background:var(--gelo);
border-top:1px solid var(--border);
}
.fbd-gallery {
display:grid;
grid-template-columns:repeat(auto-fill, minmax(160px, 1fr));
gap:10px;
}
.fbd-thumb {
display:block;
border:1px solid var(--border);
border-radius:6px;
overflow:hidden;
background:#fff;
cursor:zoom-in;
transition:border-color .12s, box-shadow .12s;
}
.fbd-thumb:hover { border-color:var(--bordo); box-shadow:0 2px 6px rgba(0,0,0,.07); }
.fbd-thumb img {
width:100%;
max-height:200px;
object-fit:cover;
display:block;
}
/* ============================================================
Onda 2.3 — Primitiva de Modal baseada em