/* ===========================================================================
 * Jessy Glow OS v2.1 — Design System "Quiet Luxury"
 *
 * Princípios:
 *   - 1 fonte principal (Inter). Cormorant italic SÓ no logo e saudação hero.
 *   - Paleta enxuta: rosa primário · dourado pra acentos cirúrgicos · neutros.
 *   - Sombras quase invisíveis. Bordas finas só quando necessárias.
 *   - Sem gradients agressivos, sem glows decorativos espalhados.
 *   - Sidebar flat (Notion-style) sem grupos colapsáveis.
 *   - Ícones SVG outline 16px (sem emojis no menu).
 *   - Espaço em branco generoso. Hierarquia por tipografia, não decoração.
 * =========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Inter:wght@400;500;600;700&display=swap');

/* ── PALETA ─────────────────────────────────────────────────────────── */
.jgos-root, .jgos-form-root {
    /* Cor de marca — usar com cuidado */
    --jgos-primary:    #d97891;
    --jgos-primary-d:  #c1607a;
    --jgos-primary-l:  #fde7ee;
    --jgos-gold:       #c9a55c;   /* Acentos cirúrgicos: item ativo, badge VIP */

    /* Neutros (Notion/Linear-like) */
    --jgos-bg:         #fafaf9;   /* Quase branco com leve aquecimento */
    --jgos-surface:    #ffffff;
    --jgos-card-bg:    #ffffff;   /* V2.8.5 — usado por componentes V2.2+ (estava só no fallback) */
    --jgos-bg-soft:    #f6f3f1;   /* V2.8.5 — idem */
    --jgos-sidebar:    #faf8f9;   /* Sidebar light, NÃO mais dark */
    /* V2.6.1 — vars usadas por componentes V2.2+ (insumos, custos, agenda, WA).
       Antes só existiam como fallback inline (var(--x, #fff)), o que quebrava o dark mode. */
    --jgos-card-bg:    #ffffff;   /* Fundo de cards/superfícies */
    --jgos-bg-soft:    #f6f3f1;   /* Fundo suave (chips, hovers, áreas internas) */
    --jgos-text:       #18181b;
    --jgos-text-soft:  #52525b;
    --jgos-muted:      #71717a;
    --jgos-border:     #ececea;   /* MUITO sutil */
    --jgos-border-strong: #d4d4d8;

    /* Estados */
    --jgos-success:    #16a34a;
    --jgos-warning:    #c9a55c;
    --jgos-danger:     #dc2626;
    --jgos-info:       #6366f1;

    /* Sombras quase invisíveis */
    --jgos-shadow:     0 1px 2px rgba(24, 24, 27, .05);
    --jgos-shadow-md:  0 1px 3px rgba(24, 24, 27, .05), 0 6px 16px rgba(24, 24, 27, .06);
    --jgos-shadow-lg:  0 12px 32px rgba(24, 24, 27, .10), 0 4px 12px rgba(24, 24, 27, .05);
    --jgos-shadow-primary: 0 6px 20px rgba(217, 120, 145, .18);

    --jgos-radius:     12px;
    --jgos-radius-sm:  8px;
    --jgos-radius-xs:  5px;

    --jgos-trans:      all .18s cubic-bezier(.4, 0, .2, 1);
    --jgos-ring:       0 0 0 3px rgba(217, 120, 145, .16);

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--jgos-text);
    /* V2.1.1 — Trava font-size base pra não herdar do tema WP (Astra/Hello/etc colocam 17-20px no body) */
    font-size: 14px;
    line-height: 1.5;
    box-sizing: border-box;
    background: var(--jgos-bg);
    font-feature-settings: 'cv02', 'cv03', 'cv11', 'ss01';
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
/* Reset agressivo pra elementos dentro do app — tema WP NÃO vai sobrescrever */
.jgos-root *, .jgos-form-root * { box-sizing: border-box; }
.jgos-root button, .jgos-root input, .jgos-root select, .jgos-root textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    margin: 0;
}
.jgos-root a { color: inherit; }

/* ── TIPOGRAFIA ─────────────────────────────────────────────────────── */
.jgos-root h1, .jgos-root h2, .jgos-root h3, .jgos-root h4 {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--jgos-text);
    line-height: 1.3;
}
.jgos-root .jgos-main-title {
    font-size: 22px;
    font-weight: 600;
    margin: 0;
    color: var(--jgos-text);
}
.jgos-root .jgos-main-subtitle {
    color: var(--jgos-muted);
    font-size: 13px;
    margin-top: 4px;
}
.jgos-root .jgos-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--jgos-text);
    margin: 22px 0 12px;
    text-transform: none;
    letter-spacing: 0;
    padding-bottom: 0;
    border-bottom: none;
}
/* Cormorant italic SÓ no logo do brand e na saudação hero */
.jgos-root .jgos-brand-name,
.jgos-root .jgos-dash-saud h2,
.jgos-root .jgos-login-brand h1 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 600;
    letter-spacing: 0;
}

/* ── LOADING / SPINNER ──────────────────────────────────────────────── */
.jgos-loading {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 240px; gap: 12px; color: var(--jgos-muted);
}
.jgos-spinner {
    width: 28px; height: 28px;
    border: 2px solid var(--jgos-border);
    border-top-color: var(--jgos-primary);
    border-radius: 50%;
    animation: jgos-spin .7s linear infinite;
}
@keyframes jgos-spin { to { transform: rotate(360deg); } }

/* ── LAYOUT APP ─────────────────────────────────────────────────────── */
.jgos-app {
    display: grid;
    grid-template-columns: 230px 1fr;
    min-height: 100vh;
    background: var(--jgos-bg);
}

/* ── SIDEBAR (flat, light, clean, COMPACTA) ─────────────────────────── */
.jgos-app .jgos-sidebar {
    background: var(--jgos-sidebar);
    color: var(--jgos-text);
    padding: 14px 10px;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--jgos-border);
    position: relative;
    font-size: 13px;          /* trava font-size da sidebar */
    line-height: 1.4;
}
.jgos-app .jgos-brand {
    display: flex; align-items: center; gap: 9px;
    padding: 4px 6px 14px;
    margin-bottom: 4px;
}
.jgos-app .jgos-brand-logo {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--jgos-primary-l);
    color: var(--jgos-gold);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 17px;
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
    box-shadow: 0 0 0 1.5px var(--jgos-gold);
    flex-shrink: 0;
    overflow: hidden; /* V3.3 — recorta o logo da clínica no círculo */
}
.jgos-app .jgos-brand-logo img { /* V3.3 — logo da clínica preenche o círculo */
    width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit;
}
.jgos-app .jgos-brand-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--jgos-text);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
}

/* Search trigger */
.jgos-app .jgos-search-trigger {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 6px 9px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    color: var(--jgos-muted);
    border-radius: 6px;
    font-size: 12.5px;
    cursor: pointer;
    margin-bottom: 10px;
    transition: var(--jgos-trans);
    font-family: inherit;
    line-height: 1.3;
}
.jgos-app .jgos-search-trigger:hover {
    border-color: var(--jgos-border-strong);
    color: var(--jgos-text);
}
.jgos-app .jgos-search-trigger > span:first-child { font-size: 12px; opacity: .6; }
.jgos-app .jgos-search-trigger > span:nth-child(2) { flex: 1; text-align: left; }
.jgos-kbd {
    font-family: 'SF Mono', Menlo, monospace;
    font-size: 10px;
    padding: 1px 5px;
    background: var(--jgos-bg);
    border: 1px solid var(--jgos-border);
    border-radius: 3px;
    color: var(--jgos-muted);
    line-height: 1.2;
}

/* Nav flat */
.jgos-app .jgos-nav {
    display: flex; flex-direction: column;
    gap: 1px;
    flex: 1;
    overflow-y: auto;
}
.jgos-app .jgos-nav-sep {
    border: none;
    height: 1px;
    background: var(--jgos-border);
    margin: 6px 6px;
    opacity: .7;
}
.jgos-app .jgos-nav-item {
    display: flex; align-items: center; gap: 8px;
    width: 100%;
    padding: 5px 9px;
    background: transparent;
    border: none;
    border-radius: 5px;
    color: var(--jgos-text-soft);
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: var(--jgos-trans);
    position: relative;
    line-height: 1.35;
    min-height: 28px;        /* trava altura mínima pra todos iguais */
}
.jgos-app .jgos-nav-item:hover {
    background: rgba(0,0,0,.04);
    color: var(--jgos-text);
}
.jgos-app .jgos-nav-item.active {
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
    font-weight: 600;
}
.jgos-app .jgos-nav-item.active::before {
    content: '';
    position: absolute;
    left: -10px; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 14px;
    background: var(--jgos-gold);
    border-radius: 0 2px 2px 0;
}
.jgos-app .jgos-nav-item svg {
    width: 15px !important;
    height: 15px !important;
    flex-shrink: 0;
    stroke-width: 1.75;
}

/* User card no rodapé da sidebar */
.jgos-app .jgos-user-card {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    margin-top: 8px;
    font-size: 12px;
}
.jgos-app .jgos-user-card img {
    width: 24px; height: 24px;
    border-radius: 50%;
    object-fit: cover;
}
.jgos-app .jgos-user-card-info { flex: 1; min-width: 0; }
.jgos-app .jgos-user-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--jgos-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    line-height: 1.3;
}
.jgos-app .jgos-user-card-cargo {
    font-size: 10.5px;
    color: var(--jgos-muted);
    line-height: 1.2;
    margin-top: 1px;
}
.jgos-app .jgos-logout-btn {
    background: transparent;
    border: none;
    color: var(--jgos-muted);
    font-size: 11px;
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 4px;
    transition: var(--jgos-trans);
    font-family: inherit;
}
.jgos-app .jgos-logout-btn:hover { background: rgba(0,0,0,.06); color: var(--jgos-text); }

/* ── MAIN ───────────────────────────────────────────────────────────── */
.jgos-main {
    padding: 28px 36px;
    overflow-y: auto;
    animation: jgos-fade-in .2s ease;
}

/* V2.1.2 — Tabs da central no topo do main (sub-abas) */
.jgos-central-tabs {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: -8px -36px 22px;
    padding: 0 36px 12px;
    border-bottom: 1px solid var(--jgos-border);
    flex-wrap: wrap;
}
.jgos-central-tabs-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding-right: 16px;
    border-right: 1px solid var(--jgos-border);
}
.jgos-central-tabs-list {
    display: flex;
    gap: 2px;
    flex: 1;
}
.jgos-central-tab {
    background: none;
    border: none;
    padding: 6px 12px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--jgos-muted);
    cursor: pointer;
    border-radius: 6px;
    transition: var(--jgos-trans);
    line-height: 1.4;
}
.jgos-central-tab:hover {
    background: rgba(0,0,0,.04);
    color: var(--jgos-text);
}
.jgos-central-tab.is-active {
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
    font-weight: 600;
}
@keyframes jgos-fade-in { from { opacity: 0; } to { opacity: 1; } }
.jgos-main-header {
    display: flex; align-items: flex-start; justify-content: space-between;
    gap: 16px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--jgos-border);
    flex-wrap: wrap;
}

/* ── FORMS ──────────────────────────────────────────────────────────── */
.jgos-row, .jgos-row-3 {
    display: grid;
    gap: 12px;
    margin-bottom: 12px;
}
.jgos-row   { grid-template-columns: 1fr 1fr; }
.jgos-row-3 { grid-template-columns: 1fr 1fr 1fr; }
.jgos-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.jgos-label {
    font-size: 12px;
    font-weight: 500;
    color: var(--jgos-text-soft);
}
.jgos-input, .jgos-select, .jgos-textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--jgos-border-strong);
    border-radius: 6px;
    background: var(--jgos-surface);
    color: var(--jgos-text);
    font-family: inherit;
    font-size: 13.5px;
    transition: var(--jgos-trans);
}
.jgos-input:focus, .jgos-select:focus, .jgos-textarea:focus {
    outline: none;
    border-color: var(--jgos-primary);
    box-shadow: 0 0 0 3px rgba(217,120,145,.12);
}
.jgos-textarea { min-height: 70px; resize: vertical; }
.jgos-help { font-size: 11px; color: var(--jgos-muted); margin-top: 2px; }

/* ── BUTTONS ────────────────────────────────────────────────────────── */
.jgos-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 14px;
    border: 1px solid var(--jgos-primary);
    border-radius: 6px;
    background: var(--jgos-primary);
    color: #fff;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: var(--jgos-trans);
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}
.jgos-btn:hover:not(:disabled) {
    background: var(--jgos-primary-d);
    border-color: var(--jgos-primary-d);
    color: #fff;
}
.jgos-btn:disabled { opacity: .5; cursor: not-allowed; }
.jgos-btn-secondary {
    background: var(--jgos-surface);
    color: var(--jgos-text);
    border-color: var(--jgos-border-strong);
}
.jgos-btn-secondary:hover:not(:disabled) {
    background: var(--jgos-bg);
    border-color: var(--jgos-text-soft);
    color: var(--jgos-text);
}
.jgos-btn-danger {
    background: var(--jgos-danger);
    border-color: var(--jgos-danger);
}
.jgos-btn-danger:hover:not(:disabled) { background: #b91c1c; border-color: #b91c1c; color: #fff; }
.jgos-btn-ghost {
    background: transparent;
    border-color: transparent;
    color: var(--jgos-text-soft);
}
.jgos-btn-ghost:hover:not(:disabled) {
    background: rgba(0,0,0,.04);
    color: var(--jgos-text);
    border-color: transparent;
}
.jgos-btn-sm { padding: 5px 10px; font-size: 12px; }
.jgos-btn-block { width: 100%; justify-content: center; }

/* ── CARDS ──────────────────────────────────────────────────────────── */
.jgos-card {
    background: var(--jgos-surface);
    border-radius: var(--jgos-radius);
    padding: 18px 20px;
    margin-bottom: 14px;
    border: 1px solid var(--jgos-border);
    box-shadow: var(--jgos-shadow);
    transition: var(--jgos-trans);
}
.jgos-card-header {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}
.jgos-card-title {
    font-size: 14px;
    font-weight: 600;
    margin: 0;
    color: var(--jgos-text);
}
.jgos-card-subtitle {
    font-size: 12px;
    color: var(--jgos-muted);
    margin-top: 2px;
}
.jgos-card-info {
    background: var(--jgos-primary-l);
    border: 1px solid var(--jgos-primary-l);
    border-radius: var(--jgos-radius);
    padding: 10px 14px;
    margin: 12px 0;
    font-size: 13px;
    color: var(--jgos-text);
}

/* ── KPIs ───────────────────────────────────────────────────────────── */
.jgos-kpi-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.jgos-kpi {
    background: var(--jgos-surface);
    border-radius: var(--jgos-radius);
    padding: 16px 18px;
    border: 1px solid var(--jgos-border);
    transition: var(--jgos-trans);
}
.jgos-kpi:hover { border-color: var(--jgos-border-strong); }
.jgos-kpi-label {
    font-size: 11px;
    color: var(--jgos-muted);
    font-weight: 500;
    margin-bottom: 4px;
}
.jgos-kpi-value {
    font-size: 22px;
    font-weight: 600;
    color: var(--jgos-text);
    line-height: 1.15;
    letter-spacing: -0.01em;
}
.jgos-kpi-sub {
    font-size: 11px;
    color: var(--jgos-muted);
    margin-top: 4px;
}
.jgos-kpi-trend { font-size: 11px; margin-top: 4px; }
.jgos-kpi-trend.up   { color: var(--jgos-success); }
.jgos-kpi-trend.down { color: var(--jgos-danger); }

/* Margem semântica (sem barra vertical decorativa) */
.jgos-margem-good .jgos-kpi-value,
.jgos-kpi.jgos-margem-good .jgos-kpi-value { color: var(--jgos-success); }
.jgos-margem-warn .jgos-kpi-value,
.jgos-kpi.jgos-margem-warn .jgos-kpi-value { color: var(--jgos-gold); }
.jgos-margem-bad  .jgos-kpi-value,
.jgos-kpi.jgos-margem-bad  .jgos-kpi-value { color: var(--jgos-danger); }

/* ── TABS ───────────────────────────────────────────────────────────── */
.jgos-tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid var(--jgos-border);
    margin-bottom: 18px;
}
.jgos-tab {
    background: none;
    border: none;
    padding: 8px 14px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 500;
    color: var(--jgos-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--jgos-trans);
}
.jgos-tab:hover { color: var(--jgos-text); }
.jgos-tab.is-active {
    color: var(--jgos-text);
    border-bottom-color: var(--jgos-primary);
}

/* ── TABLES ─────────────────────────────────────────────────────────── */
.jgos-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--jgos-surface);
    border-radius: var(--jgos-radius);
    overflow: hidden;
    border: 1px solid var(--jgos-border);
    font-size: 13px;
}
.jgos-table th, .jgos-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid var(--jgos-border);
    vertical-align: middle;
}
.jgos-table th {
    background: var(--jgos-bg);
    color: var(--jgos-muted);
    font-weight: 500;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .03em;
}
.jgos-table tr:last-child td { border-bottom: none; }
.jgos-table-hover tr:hover td { background: var(--jgos-bg); }
.jgos-row-clickable { cursor: pointer; }
.jgos-row-clickable:hover { background: var(--jgos-bg); }

/* ── BADGES ─────────────────────────────────────────────────────────── */
.jgos-badge {
    display: inline-flex; align-items: center; gap: 3px;
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.4;
    background: var(--jgos-bg);
    color: var(--jgos-text-soft);
    border: 1px solid var(--jgos-border);
}
.jgos-badge-primary { background: var(--jgos-primary-l); color: var(--jgos-primary-d); border-color: transparent; }
.jgos-badge-success { background: rgba(22,163,74,.1); color: #166534; border-color: transparent; }
.jgos-badge-warning { background: rgba(201,165,92,.12); color: #92740b; border-color: transparent; }
.jgos-badge-danger  { background: rgba(220,38,38,.08); color: #991b1b; border-color: transparent; }
.jgos-badge-info    { background: rgba(99,102,241,.1); color: #4338ca; border-color: transparent; }
.jgos-badge-muted   { background: var(--jgos-bg); color: var(--jgos-muted); }
.jgos-badge-gold {
    background: var(--jgos-gold);
    color: #fff;
    border-color: var(--jgos-gold);
}

/* ── TOAST ──────────────────────────────────────────────────────────── */
.jgos-toast-stack {
    position: fixed; top: 18px; right: 18px;
    z-index: 100000;
    display: flex; flex-direction: column; gap: 8px;
}
.jgos-toast {
    background: var(--jgos-text);
    color: #fff;
    padding: 9px 14px;
    border-radius: var(--jgos-radius-sm);
    box-shadow: var(--jgos-shadow-lg);
    font-size: 13px;
    max-width: 320px;
    animation: jgos-toast-in .18s ease;
}
.jgos-toast.success { background: var(--jgos-success); }
.jgos-toast.error   { background: var(--jgos-danger); }
.jgos-toast.warning { background: var(--jgos-gold); color: #fff; }
.jgos-toast.info    { background: var(--jgos-info); }
@keyframes jgos-toast-in {
    from { transform: translateX(12px); opacity: 0; }
    to   { transform: translateX(0); opacity: 1; }
}

/* ── EMPTY STATES ───────────────────────────────────────────────────── */
.jgos-empty {
    padding: 60px 20px;
    text-align: center;
    color: var(--jgos-muted);
}
.jgos-empty h3 {
    font-size: 16px;
    color: var(--jgos-text);
    margin: 10px 0 4px;
    font-weight: 600;
}
.jgos-empty p { font-size: 13px; margin: 0; }

/* ── LOGIN ──────────────────────────────────────────────────────────── */
.jgos-login {
    max-width: 380px;
    margin: 80px auto;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 36px 32px;
    box-shadow: var(--jgos-shadow-md);
}
.jgos-login-brand { text-align: center; margin-bottom: 22px; }
.jgos-login-brand h1 {
    margin: 14px 0 4px;
    font-size: 22px;
    color: var(--jgos-text);
}
.jgos-login-brand p { margin: 0; color: var(--jgos-muted); font-size: 13px; }
.jgos-login-logo {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--jgos-primary-l);
    color: var(--jgos-gold);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 1.5px var(--jgos-gold);
}

/* ── FORM SHELL (público) ───────────────────────────────────────────── */
.jgos-form-root {
    max-width: 480px; margin: 0 auto;
    background: var(--jgos-surface);
    border-radius: var(--jgos-radius);
    padding: 24px;
    box-shadow: var(--jgos-shadow-md);
}
.jgos-public-form h2 { margin: 0 0 4px; font-size: 19px; color: var(--jgos-text); }
.jgos-public-form p.subtitle { margin: 0 0 16px; color: var(--jgos-muted); font-size: 13px; }

/* ===========================================================================
 * MÓDULOS ESPECÍFICOS — refinados na mesma direção clean
 * =========================================================================== */

/* Funil */
.jgos-funil-row {
    display: flex; gap: 8px;
    overflow-x: auto;
    padding-bottom: 4px;
    margin-bottom: 16px;
}
.jgos-funil-card {
    flex: 1 1 130px;
    min-width: 130px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 10px 12px;
}
.jgos-funil-label {
    font-size: 10.5px; color: var(--jgos-muted);
    font-weight: 500; margin-bottom: 3px;
}
.jgos-funil-qtd { font-size: 20px; font-weight: 600; color: var(--jgos-text); line-height: 1.1; }
.jgos-funil-valor { font-size: 11px; color: var(--jgos-gold); margin-top: 2px; }

/* Kanban */
.jgos-kanban { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 10px; min-height: 480px; }
.jgos-kanban-col {
    flex: 0 0 270px;
    background: var(--jgos-bg);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 12px;
    display: flex; flex-direction: column;
    max-height: calc(100vh - 220px);
}
.jgos-kanban-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.jgos-kanban-head strong { font-size: 13px; font-weight: 600; color: var(--jgos-text); }
.jgos-kanban-qtd {
    background: var(--jgos-primary-l); color: var(--jgos-primary-d);
    font-size: 11px; font-weight: 600;
    padding: 1px 7px; border-radius: 999px;
}
.jgos-kanban-valor { font-size: 11px; color: var(--jgos-muted); margin-bottom: 10px; }
.jgos-kanban-cards { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; min-height: 50px; padding: 2px; border-radius: 4px; transition: background .15s; }
.jgos-kanban-cards.is-drop-target { background: var(--jgos-primary-l); box-shadow: inset 0 0 0 1.5px var(--jgos-primary); }
.jgos-kanban-card {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius-sm);
    padding: 10px 12px;
    cursor: grab;
    transition: var(--jgos-trans);
    position: relative;
}
.jgos-kanban-card:hover { box-shadow: var(--jgos-shadow); border-color: var(--jgos-border-strong); }
.jgos-kanban-card.is-dragging { opacity: .5; transform: rotate(2deg); }
.jgos-kanban-card.is-atrasado { border-left: 2px solid var(--jgos-danger); }
.jgos-kanban-card.is-hoje     { border-left: 2px solid var(--jgos-gold); }
.jgos-kanban-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.jgos-kanban-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
    font-size: 10.5px;
    font-weight: 600;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.jgos-kanban-card-info { flex: 1; min-width: 0; }
.jgos-kanban-card-nome { font-weight: 600; font-size: 12.5px; color: var(--jgos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgos-kanban-card-srv  { font-size: 11px; color: var(--jgos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgos-kanban-card-meta { display: flex; gap: 6px; font-size: 11px; flex-wrap: wrap; }
.jgos-kanban-card-origem { color: var(--jgos-muted); background: var(--jgos-bg); padding: 1px 6px; border-radius: 4px; }
.jgos-kanban-card-valor { color: var(--jgos-gold); font-weight: 600; }
.jgos-kanban-card-wa { position: absolute; top: 6px; right: 8px; text-decoration: none; font-size: 13px; opacity: .5; }
.jgos-kanban-card-wa:hover { opacity: 1; }
.jgos-kanban-card-prox {
    margin-top: 6px;
    font-size: 11px;
    color: var(--jgos-muted);
    padding-top: 6px;
    border-top: 1px dashed var(--jgos-border);
}
.jgos-kanban-card-prox.is-atrasado { color: var(--jgos-danger); }
.jgos-kanban-card-prox.is-hoje     { color: var(--jgos-gold); }

/* Log timeline (leads) */
.jgos-log-list { display: flex; flex-direction: column; gap: 6px; max-height: 480px; overflow-y: auto; }
.jgos-log-item {
    display: flex; gap: 10px;
    padding: 8px 10px;
    background: var(--jgos-bg);
    border-radius: var(--jgos-radius-sm);
}
.jgos-log-icon {
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--jgos-surface);
    display: flex; align-items: center; justify-content: center;
    font-size: 12px;
    flex-shrink: 0;
    border: 1px solid var(--jgos-border);
}
.jgos-log-body { flex: 1; min-width: 0; }
.jgos-log-msg { font-size: 12.5px; color: var(--jgos-text); line-height: 1.4; }
.jgos-log-meta { font-size: 10.5px; color: var(--jgos-muted); margin-top: 2px; }

/* Tarefas */
.jgos-tf-list { display: flex; flex-direction: column; gap: 6px; }
.jgos-tf-item {
    display: flex; align-items: flex-start; gap: 10px;
    padding: 12px 14px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-left: 2px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    transition: var(--jgos-trans);
}
.jgos-tf-item:hover { border-color: var(--jgos-border-strong); }
.jgos-tf-item.jgos-tf-prio-baixa   { border-left-color: #9ca3af; }
.jgos-tf-item.jgos-tf-prio-media   { border-left-color: var(--jgos-info); }
.jgos-tf-item.jgos-tf-prio-alta    { border-left-color: var(--jgos-gold); }
.jgos-tf-item.jgos-tf-prio-urgente { border-left-color: var(--jgos-danger); }
.jgos-tf-item.is-atrasada { background: rgba(220,38,38,.03); }
.jgos-tf-item.is-done { opacity: .55; }
.jgos-tf-item.is-done .jgos-tf-titulo, .jgos-tf-item.is-done .jgos-tf-desc { text-decoration: line-through; }
.jgos-tf-check { width: 16px; height: 16px; margin-top: 3px; accent-color: var(--jgos-primary); cursor: pointer; }
.jgos-tf-body { flex: 1; min-width: 0; }
.jgos-tf-titulo { font-size: 13px; color: var(--jgos-text); }
.jgos-tf-desc { font-size: 12px; color: var(--jgos-muted); margin-top: 3px; }
.jgos-tf-meta { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; font-size: 11px; color: var(--jgos-muted); }
.jgos-tf-prazo.is-atrasada { color: var(--jgos-danger); font-weight: 500; }
.jgos-tf-link {
    color: var(--jgos-primary-d); text-decoration: none;
    border: 1px solid var(--jgos-border); padding: 1px 7px; border-radius: 999px; font-size: 10.5px;
}
.jgos-tf-edit {
    background: transparent; border: 1px solid transparent;
    cursor: pointer; width: 24px; height: 24px;
    border-radius: 4px; transition: var(--jgos-trans);
    opacity: .4; font-size: 12px;
}
.jgos-tf-item:hover .jgos-tf-edit { opacity: 1; }
.jgos-tf-edit:hover { background: var(--jgos-bg); }

/* ── DASHBOARD ──────────────────────────────────────────────────────── */
.jgos-dash-hero {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 22px 26px;
    margin-bottom: 18px;
}
.jgos-dash-saud small {
    font-size: 11px; color: var(--jgos-muted); text-transform: capitalize;
}
.jgos-dash-saud h2 {
    margin: 4px 0 4px;
    font-size: 26px;
    color: var(--jgos-text);
}
.jgos-dash-saud-txt { color: var(--jgos-gold); }
.jgos-dash-saud-emoji { margin-left: 4px; font-style: normal; }
.jgos-dash-saud p { margin: 0; color: var(--jgos-muted); font-size: 13px; }

.jgos-dash-tabs {
    display: flex; gap: 2px;
    border-bottom: 1px solid var(--jgos-border);
    margin-bottom: 18px;
}
.jgos-dash-tab {
    background: none; border: none;
    padding: 10px 18px;
    font-family: inherit; font-size: 13px; font-weight: 500;
    color: var(--jgos-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: var(--jgos-trans);
}
.jgos-dash-tab:hover { color: var(--jgos-text); }
.jgos-dash-tab.is-active { color: var(--jgos-text); border-bottom-color: var(--jgos-primary); }

.jgos-dash-kpis-hoje { grid-template-columns: repeat(6, 1fr); margin-bottom: 16px; }
.jgos-kpi-mini { padding: 12px 14px; }
.jgos-kpi-mini-body { display: flex; flex-direction: column; gap: 4px; }
.jgos-kpi-mini-label { font-size: 11px; color: var(--jgos-muted); font-weight: 500; line-height: 1.3; }
.jgos-kpi-mini-label small { opacity: .7; font-weight: 400; }
.jgos-kpi-mini-value { font-size: 18px; font-weight: 600; color: var(--jgos-text); line-height: 1.15; letter-spacing: -0.01em; }
.jgos-kpi-mini.jgos-margem-warn .jgos-kpi-mini-value { color: var(--jgos-gold); }
.jgos-kpi-mini.jgos-margem-bad  .jgos-kpi-mini-value { color: var(--jgos-danger); }
.jgos-kpi-mini.jgos-margem-good .jgos-kpi-mini-value { color: var(--jgos-success); }

.jgos-kpi-big { padding: 16px 18px; position: relative; }
.jgos-kpi-big-icon { position: absolute; top: 14px; right: 16px; font-size: 18px; opacity: .35; }
.jgos-kpi-big .jgos-kpi-value { font-size: 24px; }

.jgos-dash-period-tabs {
    display: inline-flex; gap: 2px;
    margin-bottom: 14px;
    background: var(--jgos-bg);
    border: 1px solid var(--jgos-border);
    border-radius: 999px;
    padding: 3px;
}
.jgos-dash-period-tabs .jgos-tab {
    background: transparent; border: none;
    padding: 5px 14px;
    border-radius: 999px;
    color: var(--jgos-muted);
    font-size: 12px; font-weight: 500;
    border-bottom: none; margin-bottom: 0;
}
.jgos-dash-period-tabs .jgos-tab.is-active {
    background: var(--jgos-surface);
    color: var(--jgos-text);
}

.jgos-dash-3col {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.jgos-dash-list { display: flex; flex-direction: column; gap: 4px; padding: 10px 14px 14px; }
.jgos-dash-item-card {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px;
    border-radius: var(--jgos-radius-sm);
    transition: var(--jgos-trans);
}
.jgos-dash-item-card:hover { background: var(--jgos-bg); }
.jgos-dash-time { font-weight: 600; color: var(--jgos-text); font-size: 12.5px; min-width: 48px; text-align: center; }
.jgos-dash-item-body { flex: 1; min-width: 0; }
.jgos-dash-item-body strong { display: block; font-size: 12.5px; color: var(--jgos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgos-dash-item-body small { display: block; color: var(--jgos-muted); font-size: 11px; margin-top: 2px; }
.jgos-dash-empty {
    padding: 28px; text-align: center;
    display: flex; flex-direction: column; align-items: center;
    gap: 8px; color: var(--jgos-muted);
}

/* Alertas */
.jgos-alertas {
    background: rgba(201,165,92,.06);
    border: 1px solid rgba(201,165,92,.2);
    border-radius: var(--jgos-radius);
    padding: 10px 14px;
    margin: 14px 0;
    font-size: 12.5px;
    color: var(--jgos-text-soft);
}

/* Barras horizontais (gráficos CSS) */
.jgos-bar {
    display: grid; grid-template-columns: 1fr 2fr auto;
    gap: 10px; align-items: center;
    padding: 7px 16px;
    font-size: 12px;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-bar:last-child { border-bottom: none; }
.jgos-bar-label { color: var(--jgos-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgos-bar-label small { color: var(--jgos-muted); font-weight: 400; margin-left: 4px; }
.jgos-bar-track { height: 6px; background: var(--jgos-bg); border-radius: 999px; overflow: hidden; }
.jgos-bar-fill { height: 100%; background: var(--jgos-primary); border-radius: 999px; transition: width .3s ease; }
.jgos-bar-fill.is-gold { background: var(--jgos-gold); }
.jgos-bar-value { text-align: right; color: var(--jgos-text); font-weight: 500; min-width: 100px; font-size: 12px; }
.jgos-bar-value small { color: var(--jgos-muted); font-weight: 400; }

/* ── FAB ───────────────────────────────────────────────────────────── */
.jgos-fab { position: fixed; bottom: 22px; right: 22px; z-index: 100; }
.jgos-fab-trigger {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: var(--jgos-primary);
    color: #fff;
    font-size: 22px;
    font-weight: 300;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(217,120,145,.3);
    transition: all .18s ease;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit;
}
.jgos-fab-trigger:hover { background: var(--jgos-primary-d); transform: scale(1.04); }
.jgos-fab.is-open .jgos-fab-trigger { transform: rotate(45deg); }
.jgos-fab-menu {
    position: absolute; bottom: 60px; right: 0;
    display: flex; flex-direction: column; gap: 6px;
    opacity: 0; pointer-events: none;
    transform: translateY(6px);
    transition: all .18s ease;
}
.jgos-fab.is-open .jgos-fab-menu { opacity: 1; pointer-events: auto; transform: translateY(0); }
.jgos-fab-item {
    background: var(--jgos-surface);
    color: var(--jgos-text);
    padding: 8px 14px;
    border-radius: 999px;
    text-decoration: none;
    font-size: 12.5px;
    font-weight: 500;
    box-shadow: var(--jgos-shadow-md);
    border: 1px solid var(--jgos-border);
    transition: var(--jgos-trans);
    white-space: nowrap;
}
.jgos-fab-item:hover {
    background: var(--jgos-primary-l);
    border-color: var(--jgos-primary);
    color: var(--jgos-primary-d);
}

/* ── WIZARD ─────────────────────────────────────────────────────────── */
.jgos-wizard-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.jgos-wstep {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 12px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    cursor: pointer;
    text-align: left;
    transition: var(--jgos-trans);
    font-family: inherit;
    color: var(--jgos-muted);
}
.jgos-wstep:hover { border-color: var(--jgos-border-strong); color: var(--jgos-text); }
.jgos-wstep.is-active {
    border-color: var(--jgos-primary);
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
}
.jgos-wstep.is-done { color: var(--jgos-success); }
.jgos-wstep-num {
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--jgos-bg);
    color: var(--jgos-muted);
    display: flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: 11px;
    flex-shrink: 0;
}
.jgos-wstep.is-active .jgos-wstep-num { background: var(--jgos-primary); color: #fff; }
.jgos-wstep.is-done   .jgos-wstep-num { background: var(--jgos-success); color: #fff; }
.jgos-wstep-info { display: flex; flex-direction: column; min-width: 0; }
.jgos-wstep-info small { font-size: 10px; color: var(--jgos-muted); font-weight: 500; }
.jgos-wstep-info strong { font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.jgos-wizard-grid {
    display: grid; grid-template-columns: 1fr 320px;
    gap: 16px; align-items: flex-start;
}
.jgos-wizard-form { padding: 22px 26px; }
.jgos-wizard-nav {
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 22px; padding-top: 16px;
    border-top: 1px solid var(--jgos-border);
}
.jgos-wizard-resumo {
    position: sticky; top: 18px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    overflow: hidden;
}
.jgos-wizard-resumo-head {
    padding: 14px 16px;
    background: var(--jgos-bg);
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-wizard-resumo-head small {
    font-size: 10px; color: var(--jgos-muted);
    font-weight: 600; display: block; margin-bottom: 3px;
    text-transform: uppercase; letter-spacing: .04em;
}
.jgos-wizard-resumo-head strong { font-size: 14px; color: var(--jgos-text); display: block; }
.jgos-wizard-resumo-body { padding: 12px 16px; }
.jgos-wizard-resumo-row {
    display: flex; justify-content: space-between; align-items: baseline;
    padding: 4px 0; font-size: 12.5px; color: var(--jgos-text);
}
.jgos-wizard-resumo-row span { color: var(--jgos-muted); font-size: 12px; }
.jgos-wizard-resumo-row strong { font-size: 13px; font-weight: 600; }
.jgos-wizard-resumo-row.big strong { font-size: 18px; }
.jgos-wizard-resumo-row.jgos-margem-good strong { color: var(--jgos-success); }
.jgos-wizard-resumo-row.jgos-margem-warn strong { color: var(--jgos-gold); }
.jgos-wizard-resumo-row.jgos-margem-bad  strong { color: var(--jgos-danger); }
.jgos-wizard-resumo-row.preco strong { color: var(--jgos-primary-d); }
.jgos-wizard-resumo-row.custo strong { color: var(--jgos-muted); }
.jgos-wizard-resumo-foot {
    padding: 8px 16px;
    background: var(--jgos-bg);
    border-top: 1px solid var(--jgos-border);
    color: var(--jgos-muted);
    font-size: 11px;
    text-align: center;
}
.jgos-divider-gold {
    border: none;
    height: 1px;
    background: var(--jgos-border);
    margin: 12px 0;
}

/* Chips de habilitação */
.jgos-chip-group { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.jgos-chip-check {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 4px 11px;
    border: 1px solid var(--jgos-border-strong);
    border-radius: 999px;
    background: var(--jgos-surface);
    cursor: pointer;
    font-size: 12px;
    transition: var(--jgos-trans);
}
.jgos-chip-check:hover { border-color: var(--jgos-primary); color: var(--jgos-primary); }
.jgos-chip-check input { accent-color: var(--jgos-primary); }
.jgos-chip-check:has(input:checked) {
    background: var(--jgos-primary-l);
    border-color: var(--jgos-primary);
    color: var(--jgos-primary-d);
    font-weight: 500;
}

/* Quick Search */
/* V2.8.5 — Os modais são inseridos no <body>, FORA de .jgos-root, então NÃO herdavam
 * as variáveis de cor do design system. Resultado: fundo transparente, texto/bordas
 * sumindo ("modal apagado"), e só elementos com cor chumbada apareciam.
 * Aqui re-declaramos os tokens nos overlays pra todo modal ficar consistente. */
.jgos-qs-overlay, .jgos-modal-overlay, .jgos-ob-overlay {
    --jgos-primary:    #d97891;
    --jgos-primary-d:  #c1607a;
    --jgos-primary-l:  #fde7ee;
    --jgos-gold:       #c9a55c;
    --jgos-bg:         #fafaf9;
    --jgos-surface:    #ffffff;
    --jgos-card-bg:    #ffffff;
    --jgos-bg-soft:    #f6f3f1;
    --jgos-text:       #18181b;
    --jgos-text-soft:  #52525b;
    --jgos-muted:      #71717a;
    --jgos-border:     #ececea;
    --jgos-border-strong: #d4d4d8;
    --jgos-success:    #16a34a;
    --jgos-warning:    #c9a55c;
    --jgos-danger:     #dc2626;
    --jgos-info:       #6366f1;
    --jgos-radius:     10px;
    --jgos-radius-sm:  6px;
    --jgos-radius-xs:  4px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    color: var(--jgos-text);
}

.jgos-qs-overlay {
    position: fixed; inset: 0;
    background: rgba(24, 24, 27, .4);
    backdrop-filter: blur(4px);
    display: flex; align-items: flex-start; justify-content: center;
    padding-top: 12vh;
    z-index: 9999;
    animation: jgos-qs-in .15s ease;
}
@keyframes jgos-qs-in { from { opacity: 0; } to { opacity: 1; } }
.jgos-qs-box {
    width: min(620px, 92vw);
    background: var(--jgos-surface);
    border-radius: 12px;
    box-shadow: 0 16px 40px rgba(0,0,0,.16);
    overflow: hidden;
}
.jgos-qs-input-wrap {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-qs-icon { font-size: 16px; opacity: .5; }
.jgos-qs-input {
    flex: 1; border: none; outline: none;
    background: transparent;
    font-size: 15px;
    color: var(--jgos-text);
    font-family: inherit;
}
.jgos-qs-input::placeholder { color: var(--jgos-muted); }
.jgos-qs-results { max-height: 56vh; overflow-y: auto; padding: 6px; }
.jgos-qs-hint { padding: 24px 16px; text-align: center; color: var(--jgos-muted); font-size: 13px; }
.jgos-qs-group-label {
    padding: 8px 12px 4px;
    font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .06em;
    color: var(--jgos-muted);
}
.jgos-qs-item {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: all .12s ease;
    font-family: inherit;
}
.jgos-qs-item:hover, .jgos-qs-item.is-active {
    background: var(--jgos-bg);
}
.jgos-qs-item-body { flex: 1; min-width: 0; }
.jgos-qs-item-title { font-weight: 500; font-size: 13px; color: var(--jgos-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jgos-qs-item-sub { font-size: 11.5px; color: var(--jgos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px; }
.jgos-qs-footer {
    padding: 8px 14px;
    border-top: 1px solid var(--jgos-border);
    background: var(--jgos-bg);
    text-align: right;
    color: var(--jgos-muted);
    font-size: 11px;
}

/* Onboarding */
.jgos-ob-overlay {
    position: fixed; inset: 0;
    background: rgba(24, 24, 27, .65);
    backdrop-filter: blur(6px);
    display: flex; align-items: center; justify-content: center;
    z-index: 9998;
    animation: jgos-fade-in .2s ease;
    font-family: 'Inter', sans-serif;
}
.jgos-ob-card {
    width: min(500px, 92vw);
    background: var(--jgos-surface);
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
    overflow: hidden;
    animation: jgos-ob-scale .3s cubic-bezier(.2,.9,.3,1.2);
}
@keyframes jgos-ob-scale { from { transform: scale(.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.jgos-ob-progress { display: flex; gap: 4px; padding: 16px 20px 0; }
.jgos-ob-dot { flex: 1; height: 3px; background: var(--jgos-border); border-radius: 3px; transition: all .3s; }
.jgos-ob-dot.is-active { background: var(--jgos-primary); }
.jgos-ob-dot.is-done   { background: var(--jgos-primary-l); }
.jgos-ob-body { padding: 28px 32px 24px; text-align: center; }
.jgos-ob-emoji { font-size: 44px; margin-bottom: 8px; }
.jgos-ob-body h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-size: 24px; margin: 6px 0; color: var(--jgos-text);
}
.jgos-ob-tag {
    display: inline-block;
    padding: 1px 9px;
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
    border-radius: 999px;
    font-size: 10.5px; font-weight: 600;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.jgos-ob-body p { color: var(--jgos-muted); font-size: 13.5px; line-height: 1.55; margin: 6px 0 0; }
.jgos-ob-body p code, .jgos-ob-body p kbd {
    background: var(--jgos-bg);
    padding: 2px 7px; border-radius: 4px;
    font-size: 11.5px; font-family: 'SF Mono', monospace;
    color: var(--jgos-gold);
}
.jgos-ob-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    padding: 14px 18px;
    background: var(--jgos-bg);
    border-top: 1px solid var(--jgos-border);
}
.jgos-ob-step-label {
    font-size: 11px; color: var(--jgos-muted);
    text-transform: uppercase; letter-spacing: .04em;
}

/* Minha conta */
.jgos-conta-grid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: flex-start; }
.jgos-conta-card-perfil { text-align: center; padding: 24px 20px; position: sticky; top: 18px; }
.jgos-conta-avatar-wrap { margin-bottom: 12px; }
.jgos-conta-avatar {
    width: 96px; height: 96px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--jgos-gold);
}
.jgos-conta-avatar-placeholder {
    width: 96px; height: 96px;
    border-radius: 50%;
    background: var(--jgos-primary-l);
    color: var(--jgos-gold);
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-style: italic;
    font-weight: 700;
    font-size: 42px;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 0 0 2px var(--jgos-gold);
}
.jgos-theme-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 6px; }
.jgos-theme-opt {
    display: flex; flex-direction: column; gap: 4px;
    padding: 12px;
    border: 1.5px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    cursor: pointer;
    transition: var(--jgos-trans);
    text-align: center;
}
.jgos-theme-opt:hover { border-color: var(--jgos-border-strong); }
.jgos-theme-opt.is-active { border-color: var(--jgos-primary); background: var(--jgos-primary-l); }
.jgos-theme-opt input { display: none; }
.jgos-theme-preview {
    height: 50px; border-radius: 6px; margin-bottom: 4px;
    border: 1px solid var(--jgos-border); position: relative; overflow: hidden;
}
.jgos-theme-preview.is-light { background: linear-gradient(135deg, #fafaf9 0%, #fde7ee 100%); }
.jgos-theme-preview.is-light::before {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 20px; background: #18181b; border-radius: 3px;
}
.jgos-theme-preview.is-dark { background: linear-gradient(135deg, #18181b 0%, #27272a 100%); }
.jgos-theme-preview.is-dark::before {
    content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px;
    width: 20px; background: rgba(217,120,145,.4); border-radius: 3px;
}
.jgos-theme-opt strong { font-size: 12.5px; color: var(--jgos-text); }
.jgos-theme-opt small { font-size: 11px; color: var(--jgos-muted); }

/* WhatsApp */
.jgos-wa-conv-list {
    display: flex; flex-direction: column; gap: 1px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    overflow: hidden;
}
.jgos-wa-conv-item {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--jgos-border);
    transition: var(--jgos-trans);
}
.jgos-wa-conv-item:last-child { border-bottom: 0; }
.jgos-wa-conv-item:hover { background: var(--jgos-bg); }
.jgos-wa-conv-avatar {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--jgos-primary-l);
    color: var(--jgos-primary-d);
    font-weight: 600; font-size: 14px;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.jgos-wa-conv-info { flex: 1; min-width: 0; }
.jgos-wa-conv-nome { font-weight: 600; font-size: 13.5px; color: var(--jgos-text); }
.jgos-wa-conv-prev { font-size: 12px; color: var(--jgos-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.jgos-wa-conv-meta { text-align: right; flex-shrink: 0; }
.jgos-wa-conv-time { font-size: 11px; color: var(--jgos-muted); }
.jgos-wa-conv-qtd { font-size: 10px; color: var(--jgos-primary-d); margin-top: 3px; font-weight: 500; }

.jgos-wa-chat {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    overflow: hidden;
    display: flex; flex-direction: column;
    height: 70vh;
    min-height: 460px;
}
.jgos-wa-chat-head {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-wa-chat-nome { flex: 1; font-weight: 600; color: var(--jgos-text); font-size: 14px; }
.jgos-wa-chat-body {
    flex: 1; overflow-y: auto;
    padding: 18px 14px;
    background: var(--jgos-bg);
    display: flex; flex-direction: column; gap: 8px;
}
.jgos-wa-bolha {
    max-width: 70%;
    padding: 8px 12px;
    border-radius: 10px;
    font-size: 13px;
    line-height: 1.45;
    word-wrap: break-word;
}
.jgos-wa-bolha.is-out {
    align-self: flex-end;
    background: var(--jgos-primary);
    color: #fff;
    border-bottom-right-radius: 4px;
}
.jgos-wa-bolha.is-in {
    align-self: flex-start;
    background: var(--jgos-surface);
    color: var(--jgos-text);
    border: 1px solid var(--jgos-border);
    border-bottom-left-radius: 4px;
}
.jgos-wa-bolha-meta { font-size: 10px; margin-top: 4px; opacity: .8; text-align: right; }
.jgos-wa-bolha.is-in .jgos-wa-bolha-meta { color: var(--jgos-muted); }
.jgos-wa-chat-form {
    display: flex; gap: 8px;
    padding: 10px;
    border-top: 1px solid var(--jgos-border);
}
.jgos-wa-chat-form .jgos-textarea { flex: 1; min-height: auto; resize: none; }

/* Agenda */
.jgos-ag-lista { display: flex; flex-direction: column; gap: 6px; }
.jgos-ag-card {
    display: grid; grid-template-columns: 70px 1fr auto;
    gap: 14px; align-items: center;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 12px 16px;
    cursor: pointer;
    transition: var(--jgos-trans);
}
.jgos-ag-card:hover { border-color: var(--jgos-border-strong); }
.jgos-ag-hora {
    text-align: center;
    border-right: 1px solid var(--jgos-border);
    padding-right: 12px;
}
.jgos-ag-hora strong { display: block; font-size: 19px; font-weight: 600; color: var(--jgos-text); }
.jgos-ag-hora small  { color: var(--jgos-muted); font-size: 11px; }
.jgos-ag-nome { font-weight: 600; font-size: 13.5px; color: var(--jgos-text); }
.jgos-ag-sub  { font-size: 11.5px; color: var(--jgos-muted); margin-top: 3px; }

.jgos-ag-semana {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 6px; overflow-x: auto;
}
.jgos-ag-sem-col {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius-sm);
    min-height: 260px;
    display: flex; flex-direction: column;
}
.jgos-ag-sem-col.is-hoje { border-color: var(--jgos-primary); }
.jgos-ag-sem-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 7px 10px;
    background: var(--jgos-bg);
    border-bottom: 1px solid var(--jgos-border);
    font-size: 11.5px;
}
.jgos-ag-sem-body { padding: 4px; flex: 1; display: flex; flex-direction: column; gap: 3px; }
.jgos-ag-sem-item {
    background: var(--jgos-primary-l);
    border-left: 2px solid var(--jgos-primary);
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: var(--jgos-trans);
}
.jgos-ag-sem-item:hover { background: var(--jgos-primary); color: #fff; }
.jgos-ag-sem-item small { display: block; color: var(--jgos-muted); font-size: 10px; margin-top: 1px; }
.jgos-muted-text { color: var(--jgos-muted); font-size: 11px; padding: 4px; }

/* Sessões */
.jgos-sess-group { margin-bottom: 14px; }
.jgos-sess-group-head {
    display: flex; align-items: center; gap: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--jgos-border);
    margin-bottom: 10px;
}
.jgos-sess-group-head > div:first-child { flex: 1; }
.jgos-sess-progress {
    flex: 0 1 180px;
    height: 5px;
    background: var(--jgos-bg);
    border-radius: 999px;
    overflow: hidden;
}
.jgos-sess-progress > span { display: block; height: 100%; background: var(--jgos-gold); transition: width .3s; }
.jgos-sess-items { display: flex; flex-direction: column; gap: 4px; }
.jgos-sess-item {
    display: grid; grid-template-columns: 50px 1fr auto;
    gap: 10px; align-items: center;
    padding: 7px 10px;
    background: var(--jgos-bg);
    border-radius: var(--jgos-radius-sm);
}
.jgos-sess-num { font-size: 14px; font-weight: 600; color: var(--jgos-primary-d); text-align: center; }
.jgos-sess-body strong { display: block; font-size: 12.5px; }
.jgos-sess-body small { color: var(--jgos-muted); font-size: 11px; }
.jgos-sess-actions { display: flex; align-items: center; gap: 6px; }

/* Relatórios */
.jgos-rel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 10px;
}
.jgos-rel-card {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 16px 18px;
    text-align: left;
    cursor: pointer;
    transition: var(--jgos-trans);
    font-family: inherit;
}
.jgos-rel-card:hover { border-color: var(--jgos-border-strong); }
.jgos-rel-card-nome { font-weight: 600; font-size: 14px; color: var(--jgos-text); margin-bottom: 3px; }
.jgos-rel-card-desc { font-size: 11.5px; color: var(--jgos-muted); }
.jgos-rel-totals {
    display: flex; flex-wrap: wrap; gap: 16px;
    font-size: 13px;
}
.jgos-rel-totals strong { color: var(--jgos-gold); text-transform: capitalize; }

/* Login form ajustes */
.jgos-error-msg { color: var(--jgos-danger); font-size: 12.5px; margin: 6px 0; }
.jgos-success-msg { color: var(--jgos-success); font-size: 12.5px; margin: 6px 0; }

/* Plano cards */
.jgos-plano-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
}
.jgos-plano-card {
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius);
    padding: 16px;
    cursor: pointer;
    transition: var(--jgos-trans);
}
.jgos-plano-card:hover { border-color: var(--jgos-border-strong); }
.jgos-plano-card-head h3 { font-size: 15px; margin: 0; }
.jgos-plano-card-head small { color: var(--jgos-muted); font-size: 11px; }
.jgos-plano-card-desc { color: var(--jgos-muted); font-size: 12.5px; margin: 6px 0 10px; line-height: 1.5; }
.jgos-plano-card-precos, .jgos-plano-card-kpis {
    display: flex; gap: 12px; padding: 10px 0;
    border-top: 1px solid var(--jgos-border);
}
.jgos-plano-card-precos > div, .jgos-plano-card-kpis > div { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.jgos-plano-card-precos small, .jgos-plano-card-kpis small {
    color: var(--jgos-muted); font-size: 10px;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 500;
}
.jgos-plano-card-precos strong, .jgos-plano-card-kpis strong { font-size: 14px; font-weight: 600; }

/* Toolbar */
.jgos-toolbar {
    display: flex; gap: 8px; align-items: center;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

/* Calc preview */
.jgos-calc-preview {
    margin: 18px 0;
    padding: 16px;
    border-radius: var(--jgos-radius);
    background: var(--jgos-bg);
    border: 1px solid var(--jgos-border);
}
.jgos-calc-preview::before { display: none; } /* tira label "✦ Cálculo automático" duplicado */

/* Formulário rodapé sticky */
.jgos-formulario-footer {
    position: sticky;
    bottom: -1px;
    background: var(--jgos-surface);
    padding: 14px 0 0;
    margin-top: 18px;
    border-top: 1px solid var(--jgos-border);
    display: flex; flex-direction: column;
    gap: 8px; z-index: 5;
}
.jgos-formulario-footer-meta {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.jgos-formulario-save-btn {
    width: 100%;
    padding: 10px 18px;
    font-size: 14px; font-weight: 600;
    background: var(--jgos-primary);
    border: 1px solid var(--jgos-primary);
    color: #fff;
    border-radius: var(--jgos-radius-sm);
    cursor: pointer;
    transition: var(--jgos-trans);
    font-family: inherit;
}
.jgos-formulario-save-btn:hover:not(:disabled) {
    background: var(--jgos-primary-d);
    border-color: var(--jgos-primary-d);
}
.jgos-formulario-save-btn:disabled { opacity: .65; cursor: wait; }
.jgos-formulario-dirty-flag {
    display: inline-flex; align-items: center;
    padding: 2px 9px;
    border-radius: 999px;
    background: rgba(201,165,92,.12);
    color: var(--jgos-gold);
    font-size: 11px; font-weight: 500;
}

/* Textarea de formulário maior */
.jgos-formulario-form textarea,
.jgos-formulario-card-body textarea {
    min-height: 200px;
    padding: 12px 14px;
    font-size: 13.5px;
    line-height: 1.6;
    resize: vertical;
    overflow-y: auto;
    white-space: pre-wrap;
}

/* DateTime picker custom */
.jgos-dtpicker {
    display: flex; flex-direction: column; gap: 8px;
    background: var(--jgos-surface);
    border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius-sm);
    padding: 10px 12px;
}
.jgos-dt-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.jgos-dt-date { flex: 1 1 130px; padding: 6px 9px; border: 1px solid var(--jgos-border-strong); border-radius: 5px; background: var(--jgos-surface); font-size: 13px; }
.jgos-dt-time {
    flex: 0 1 100px; padding: 6px 9px; text-align: center;
    font-size: 16px; font-weight: 600; letter-spacing: .02em;
    border: 1.5px solid var(--jgos-border-strong); border-radius: 5px;
    background: var(--jgos-surface);
    font-variant-numeric: tabular-nums;
}
.jgos-dt-step {
    width: 28px; height: 32px;
    padding: 0;
    border: 1px solid var(--jgos-border-strong);
    border-radius: 5px;
    background: var(--jgos-surface);
    color: var(--jgos-text);
    font-size: 13px; font-weight: 600;
    cursor: pointer; transition: var(--jgos-trans);
}
.jgos-dt-step:hover { background: var(--jgos-primary); border-color: var(--jgos-primary); color: #fff; }
.jgos-dt-quick { display: flex; flex-wrap: wrap; gap: 3px; }
.jgos-dt-quick button {
    padding: 3px 10px;
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    background: var(--jgos-surface);
    color: var(--jgos-muted);
    cursor: pointer;
    transition: var(--jgos-trans);
}
.jgos-dt-quick button:hover { border-color: var(--jgos-primary); color: var(--jgos-primary); }
.jgos-dt-quick button.is-on { background: var(--jgos-primary); border-color: var(--jgos-primary); color: #fff; }

.jgos-form-datahora-picker-wrap { display: flex; align-items: stretch; gap: 8px; }
.jgos-form-datahora-picker-wrap .jgos-dtpicker { flex: 1; }

/* ── DARK MODE ──────────────────────────────────────────────────────── */
html[data-jgos-theme="dark"] .jgos-root,
html[data-jgos-theme="dark"] .jgos-form-root {
    --jgos-bg:           #18181b;
    --jgos-surface:      #1f1f23;
    --jgos-sidebar:      #161618;
    --jgos-card-bg:      #1f1f23;   /* V2.6.1 — card escuro no dark mode */
    --jgos-bg-soft:      #26262b;   /* V2.6.1 — fundo suave escuro */
    --jgos-text:         #f4f4f5;
    --jgos-text-soft:    #d4d4d8;
    --jgos-muted:        #71717a;
    --jgos-border:       #2a2a2e;
    --jgos-border-strong:#3f3f46;
    --jgos-primary-l:    #2a1f24;
    --jgos-shadow:       0 1px 2px rgba(0,0,0,.4);
    --jgos-shadow-md:    0 4px 12px rgba(0,0,0,.4);
    --jgos-shadow-lg:    0 12px 32px rgba(0,0,0,.55);
}
html[data-jgos-theme="dark"] .jgos-search-trigger { background: #1f1f23; }
html[data-jgos-theme="dark"] .jgos-table th { background: #1a1a1d; }

/* ── RESPONSIVO ─────────────────────────────────────────────────────── */
@media (max-width: 968px) {
    .jgos-app { grid-template-columns: 1fr; }
    .jgos-sidebar {
        position: relative;
        border-right: 0;
        border-bottom: 1px solid var(--jgos-border);
    }
    .jgos-main { padding: 18px; }
    .jgos-row, .jgos-row-3 { grid-template-columns: 1fr; }
    .jgos-dash-kpis-hoje { grid-template-columns: repeat(3, 1fr); }
    .jgos-dash-3col { grid-template-columns: 1fr; }
    .jgos-wizard-steps { grid-template-columns: repeat(2, 1fr); }
    .jgos-wizard-grid { grid-template-columns: 1fr; }
    .jgos-wizard-resumo { position: static; }
    .jgos-conta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .jgos-dash-kpis-hoje { grid-template-columns: repeat(2, 1fr); }
    .jgos-dash-saud h2 { font-size: 22px; }
    .jgos-fab { bottom: 16px; right: 16px; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.2 — Insumos (cadastro padrão + integração no wizard de procedimentos)
 * ═══════════════════════════════════════════════════════════════ */

/* ── Lista de insumos (view /insumos) ── */
.jgos-ins-grupo {
    margin-bottom: 22px;
}
.jgos-ins-grupo-titulo {
    font-size: 13px;
    font-weight: 600;
    color: var(--jgos-muted);
    margin: 0 0 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.jgos-ins-grupo-titulo small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.jgos-ins-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 12px;
}
.jgos-ins-card {
    display: flex;
    gap: 12px;
    padding: 12px;
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .15s, transform .15s, box-shadow .15s;
}
.jgos-ins-card:hover {
    border-color: var(--jgos-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,.05);
    transform: translateY(-1px);
}
.jgos-ins-card.is-inactive {
    opacity: 0.55;
}
.jgos-ins-thumb {
    flex: 0 0 56px;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--jgos-bg-soft, #f6f3f1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.jgos-ins-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.jgos-ins-thumb-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f3ddd6, #e8c6bd);
    color: #8a4d3a;
    font-weight: 700;
    font-size: 18px;
}
.jgos-ins-body {
    flex: 1;
    min-width: 0;
}
.jgos-ins-nome {
    font-weight: 600;
    color: var(--jgos-text);
    font-size: 14px;
    line-height: 1.3;
    margin-bottom: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.jgos-ins-meta {
    font-size: 13px;
    color: var(--jgos-primary);
    font-weight: 600;
}
.jgos-ins-fornecedor {
    font-size: 11px;
    color: var(--jgos-muted);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Bloco de insumos dentro do Step 3 do wizard ── */
.jgos-insumos-bloco {
    background: var(--jgos-bg-soft, #faf6f4);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 14px;
    margin-bottom: 6px;
}
.jgos-insumos-bloco-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--jgos-border);
}
.jgos-insumos-bloco-total {
    text-align: right;
}
.jgos-insumos-bloco-total small {
    display: block;
    font-size: 10px;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.jgos-insumos-bloco-total strong {
    font-size: 18px;
    color: var(--jgos-primary);
    font-weight: 700;
}
.jgos-insumos-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jgos-insumos-empty {
    padding: 18px;
    text-align: center;
    font-size: 12px;
    color: var(--jgos-muted);
    border: 1px dashed var(--jgos-border);
    border-radius: 8px;
    background: rgba(255,255,255,.5);
}
.jgos-insumo-linha {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    background: #fff;
    border: 1px solid var(--jgos-border);
    border-radius: 8px;
}
.jgos-insumo-linha.is-orphan {
    background: #fff5f5;
    border-color: #f4b8b8;
}
.jgos-insumo-linha-thumb {
    flex: 0 0 38px;
    width: 38px;
    height: 38px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--jgos-bg-soft, #f6f3f1);
}
.jgos-insumo-linha-thumb img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.jgos-insumo-thumb-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #f3ddd6, #e8c6bd);
    color: #8a4d3a;
    font-weight: 700; font-size: 14px;
}
.jgos-insumo-linha-info {
    flex: 1;
    min-width: 0;
}
.jgos-insumo-linha-nome {
    font-weight: 600;
    font-size: 13px;
    color: var(--jgos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jgos-insumo-linha-meta {
    font-size: 11px;
    color: var(--jgos-muted);
}
.jgos-insumo-linha-qtd {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 6px;
}
.jgos-insumo-linha-qtd small {
    font-size: 11px;
    color: var(--jgos-muted);
}
.jgos-insumo-linha-sub {
    flex: 0 0 80px;
    text-align: right;
    font-weight: 600;
    color: var(--jgos-text);
    font-size: 13px;
}
.jgos-insumo-linha .jgos-btn-sm {
    padding: 4px 10px;
    font-size: 13px;
    line-height: 1;
}

/* Responsivo */
@media (max-width: 700px) {
    .jgos-insumo-linha {
        flex-wrap: wrap;
    }
    .jgos-insumo-linha-info { flex: 1 1 100%; order: 1; }
    .jgos-insumo-linha-thumb { order: 0; }
    .jgos-insumo-linha-qtd { order: 2; }
    .jgos-insumo-linha-sub { order: 3; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.3 — Atendimentos do dia + Custos + DRE + Fechamento
 * ═══════════════════════════════════════════════════════════════ */

/* ── Tabs em pílulas (usado em Custos) ── */
.jgos-tabs-pills {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    background: var(--jgos-bg-soft, #f6f3f1);
    border-radius: 10px;
}
.jgos-tab-pill {
    background: transparent;
    border: 0;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    color: var(--jgos-muted);
    cursor: pointer;
    border-radius: 7px;
    transition: all .15s;
}
.jgos-tab-pill:hover {
    color: var(--jgos-text);
}
.jgos-tab-pill.is-active {
    background: #fff;
    color: var(--jgos-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}

/* ── Atendimentos do dia: KPIs no topo ── */
.jgos-at-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.jgos-at-kpi {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.jgos-at-kpi small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
}
.jgos-at-kpi strong {
    font-size: 22px;
    font-weight: 700;
    color: var(--jgos-text);
}
.jgos-at-kpi span {
    font-size: 11px;
    color: var(--jgos-muted);
}

/* ── Grupos no kanban do dia ── */
.jgos-at-grupo-head {
    margin: 20px 0 10px;
}
.jgos-at-grupo-head h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.jgos-at-grupo-head h3 small {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
}
.jgos-at-grupo-head.done h3 { color: #16a34a; }
.jgos-at-grupo-head.wait h3 { color: #d97706; }

.jgos-at-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 10px;
}
.jgos-at-card {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.jgos-at-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}
.jgos-at-card-head strong {
    font-size: 14px;
    color: var(--jgos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jgos-at-card-head span {
    font-size: 11px;
    color: var(--jgos-muted);
    font-weight: 600;
    flex-shrink: 0;
}
.jgos-at-card-proc {
    margin-top: 4px;
    font-size: 13px;
    color: var(--jgos-primary);
    font-weight: 500;
}
.jgos-at-card-meta {
    margin-top: 6px;
    display: flex;
    gap: 8px;
    font-size: 11px;
    color: var(--jgos-muted);
}
.jgos-at-card-foot {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed var(--jgos-border);
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.jgos-at-card-foot small {
    display: block;
    font-size: 10px;
    color: var(--jgos-muted);
    text-transform: uppercase;
}
.jgos-at-card-foot strong {
    font-size: 16px;
}
.jgos-at-card-desc {
    margin-left: 6px;
    font-size: 11px;
    color: #d97706;
}

/* ── Modal de apontamento enxuto ── */
.jgos-at-modal-box {
    width: min(580px, 94vw) !important;
    max-height: 90vh;
    overflow: auto;
}
.jgos-at-preco-box {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.2fr;
    gap: 10px;
    align-items: end;
    background: var(--jgos-bg-soft, #faf6f4);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 14px;
    margin: 6px 0 12px;
}
.jgos-at-preco-box > div small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    margin-bottom: 4px;
}
.jgos-at-preco-box > div strong {
    font-size: 16px;
}
.jgos-at-preco-box .jgos-at-total {
    color: var(--jgos-primary);
    font-size: 20px !important;
}

/* ── Custos: KPIs ── */
.jgos-cu-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.jgos-cu-kpi {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 12px 14px;
}
.jgos-cu-kpi small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    display: block;
}
.jgos-cu-kpi strong {
    font-size: 20px;
    margin-top: 4px;
    display: block;
}
.jgos-cu-kpi.paid strong { color: #16a34a; }
.jgos-cu-kpi.pend strong { color: #d97706; }

/* ── DRE ── */
.jgos-dre-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 14px;
    align-items: start;
}
.jgos-dre-tabela {
    width: 100%;
    border-collapse: collapse;
}
.jgos-dre-tabela td {
    padding: 10px 0;
    font-size: 14px;
}
.jgos-dre-tabela td:last-child {
    font-variant-numeric: tabular-nums;
}
.jgos-dre-row.receita td {
    font-weight: 600;
}
.jgos-dre-row.receita.big td:last-child {
    font-size: 18px;
    font-weight: 700;
    color: #16a34a;
}
.jgos-dre-row.subtracao td {
    color: var(--jgos-muted);
}
.jgos-dre-row.subtotal td {
    border-top: 1px solid var(--jgos-border);
    font-weight: 600;
    padding-top: 12px;
}
.jgos-dre-final td {
    padding: 16px 0 8px;
    border-top: 2px solid var(--jgos-text);
    font-size: 18px;
}
.jgos-dre-final.good td:last-child strong { color: #16a34a; }
.jgos-dre-final.warn td:last-child strong { color: #d97706; }
.jgos-dre-final.bad  td:last-child strong { color: #dc2626; }

/* ── Fechamento de caixa ── */
.jgos-fc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    padding: 18px 0;
    margin-bottom: 14px;
    border-bottom: 1px solid var(--jgos-border);
    flex-wrap: wrap;
}
.jgos-fc-header small {
    display: block;
    font-size: 11px;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}
.jgos-fc-header h3 {
    margin: 4px 0 6px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 22px;
    font-weight: 600;
}
.jgos-fc-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: 18px;
}
.jgos-fc-card {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jgos-fc-card small {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
}
.jgos-fc-card strong {
    font-size: 22px;
    font-weight: 700;
}
.jgos-fc-card.primary {
    background: linear-gradient(135deg, #fff5f7, #fff);
    border-color: var(--jgos-primary, #d97891);
}
.jgos-fc-card.primary strong {
    font-size: 28px;
}
.jgos-fc-card strong.good { color: #16a34a; }
.jgos-fc-card strong.bad  { color: #dc2626; }
.jgos-fc-card span {
    font-size: 11px;
    color: var(--jgos-muted);
    margin-top: 2px;
}
.jgos-fc-card span.good { color: #16a34a; }
.jgos-fc-card span.warn { color: #d97706; }
.jgos-fc-card span.bad  { color: #dc2626; }

.jgos-fc-3col {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

/* Responsivo */
@media (max-width: 900px) {
    .jgos-dre-grid { grid-template-columns: 1fr; }
    .jgos-at-preco-box { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.4 — DateRange + Dashboard novo (Resultados / Financeiro)
 * ═══════════════════════════════════════════════════════════════ */

/* ── JGOS.DateRange (componente reutilizável) ── */
.jgos-dr {
    position: relative;
    display: inline-block;
    z-index: 100;
}
.jgos-dr-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    cursor: pointer;
    font-size: 13px;
    color: var(--jgos-text);
    font-family: inherit;
    transition: all .15s;
    min-width: 240px;
}
.jgos-dr-trigger:hover {
    border-color: var(--jgos-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,.04);
}
.jgos-dr-label {
    font-weight: 600;
    color: var(--jgos-text);
}
.jgos-dr-sublabel {
    color: var(--jgos-muted);
    font-size: 11px;
    flex: 1;
    text-align: left;
    margin-left: 2px;
}
.jgos-dr-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    width: 720px;
    max-width: calc(100vw - 32px);
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,.12);
    padding: 16px;
    z-index: 1101; /* V2.30.6 — acima da tab bar do mobile (1100) */
}
.jgos-dr-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-dr-pill {
    background: var(--jgos-bg-soft, #f6f3f1);
    border: 1px solid transparent;
    padding: 6px 12px;
    font-size: 12px;
    border-radius: 16px;
    cursor: pointer;
    color: var(--jgos-text);
    font-family: inherit;
    transition: all .12s;
}
.jgos-dr-pill:hover {
    background: #ede8e5;
}
.jgos-dr-pill.is-active {
    background: var(--jgos-primary, #d97891);
    color: #fff;
}

/* Calendário (2 meses) */
.jgos-dr-calendar {
    padding: 4px 0 12px;
    border-bottom: 1px solid var(--jgos-border);
    margin-bottom: 14px;
}
.jgos-dr-cal-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4px 10px;
}
.jgos-dr-cal-nav button {
    background: transparent;
    border: 0;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 12px;
    border-radius: 6px;
    color: var(--jgos-muted);
}
.jgos-dr-cal-nav button:hover {
    background: var(--jgos-bg-soft);
    color: var(--jgos-text);
}
.jgos-dr-cal-nav > div {
    font-size: 12px;
    color: var(--jgos-muted);
    font-weight: 500;
}
.jgos-dr-cal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.jgos-dr-month-title {
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 8px;
    color: var(--jgos-text);
}
.jgos-dr-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-bottom: 4px;
}
.jgos-dr-dow span {
    text-align: center;
    font-size: 10px;
    color: var(--jgos-muted);
    text-transform: uppercase;
    font-weight: 600;
}
.jgos-dr-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
}
.jgos-dr-day {
    background: transparent;
    border: 0;
    padding: 6px 0;
    font-size: 12px;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    color: var(--jgos-text);
    transition: all .1s;
}
.jgos-dr-day:hover:not(.is-disabled):not(.is-empty) {
    background: var(--jgos-bg-soft);
}
.jgos-dr-day.is-empty {
    visibility: hidden;
}
.jgos-dr-day.is-today {
    font-weight: 700;
    color: var(--jgos-primary);
}
.jgos-dr-day.is-start,
.jgos-dr-day.is-end {
    background: var(--jgos-primary, #d97891);
    color: #fff;
    font-weight: 600;
}
.jgos-dr-day.is-mid {
    background: rgba(217, 120, 145, 0.15);
    color: var(--jgos-text);
    border-radius: 0;
}
.jgos-dr-day.is-disabled {
    color: #ccc;
    cursor: not-allowed;
}
.jgos-dr-cal-hint {
    font-size: 11px;
    color: var(--jgos-muted);
    text-align: center;
    margin-top: 8px;
    font-style: italic;
}

.jgos-dr-summary {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    background: var(--jgos-bg-soft);
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 12px;
}
.jgos-dr-summary > div small {
    display: block;
    font-size: 10px;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: .4px;
    margin-bottom: 2px;
}
.jgos-dr-summary > div strong {
    font-size: 14px;
    color: var(--jgos-text);
}

/* ───────── V3.22 — DatePicker (seletor de data+hora próprio) ───────── */
.jgos-dtp { position: relative; }
.jgos-dtp-field {
    display: flex; align-items: center; gap: 8px; width: 100%;
    background: #fff; border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius-sm); padding: 0 12px; min-height: 44px;
    font-family: inherit; font-size: 14px; color: var(--jgos-text);
    cursor: pointer; text-align: left; transition: border-color .15s, box-shadow .15s;
}
.jgos-dtp-field:hover { border-color: var(--jgos-border-strong, #d4d4d8); }
.jgos-dtp-ico { font-size: 15px; flex: 0 0 auto; }
.jgos-dtp-val { flex: 1; }
.jgos-dtp-val.is-empty { color: var(--jgos-muted); }
.jgos-dtp-caret { color: var(--jgos-muted); font-size: 11px; flex: 0 0 auto; }

.jgos-dtp-pop {
    position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
    min-width: 268px; background: #fff; border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius); box-shadow: 0 12px 36px rgba(40,25,30,.18);
    padding: 12px;
}
.jgos-dtp-pop.is-up { top: auto; bottom: calc(100% + 6px); }
.jgos-dtp-pop.jgos-dtp-inline { position: static; box-shadow: none; border: 0; padding: 0; min-width: 0; }
.jgos-dtp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.jgos-dtp-nav button {
    background: none; border: 0; cursor: pointer; font-size: 20px; line-height: 1;
    color: var(--jgos-muted); width: 32px; height: 32px; border-radius: 8px;
}
.jgos-dtp-nav button:hover { background: var(--jgos-bg-soft); color: var(--jgos-text); }
.jgos-dtp-month { font-weight: 600; font-size: 14px; color: var(--jgos-text); }
.jgos-dtp-dow { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; margin-bottom: 4px; }
.jgos-dtp-dow span { text-align: center; font-size: 11px; color: var(--jgos-muted); font-weight: 600; }
.jgos-dtp-days { display: grid; grid-template-columns: repeat(7,1fr); gap: 2px; }
.jgos-dtp-day {
    background: transparent; border: 0; padding: 8px 0; font-size: 13px; cursor: pointer;
    border-radius: 8px; font-family: inherit; color: var(--jgos-text); transition: background .1s;
}
.jgos-dtp-day:hover:not(.is-disabled):not(.is-empty) { background: var(--jgos-bg-soft); }
.jgos-dtp-day.is-empty { visibility: hidden; cursor: default; }
.jgos-dtp-day.is-today { font-weight: 700; color: var(--jgos-primary); }
.jgos-dtp-day.is-sel { background: var(--jgos-primary, #d97891); color: #fff; font-weight: 600; }
.jgos-dtp-day.is-disabled { color: #ccc; cursor: not-allowed; }
.jgos-dtp-time {
    display: flex; align-items: center; gap: 8px; margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--jgos-border);
}
.jgos-dtp-time-lbl { font-size: 12px; color: var(--jgos-muted); font-weight: 600; margin-right: auto; }
.jgos-dtp-time select {
    font-family: inherit; font-size: 15px; padding: 6px 8px; border: 1px solid var(--jgos-border);
    border-radius: var(--jgos-radius-sm); background: #fff; color: var(--jgos-text); cursor: pointer; min-height: 40px;
}
.jgos-dtp-time b { color: var(--jgos-muted); }

/* prompt() — mini-modal centralizado (remarcar etc.) */
.jgos-dtp-overlay {
    position: fixed; inset: 0; z-index: 2000; background: rgba(40,25,30,.45);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.jgos-dtp-dialog {
    background: #fff; border-radius: 16px; box-shadow: 0 20px 60px rgba(0,0,0,.3);
    width: 100%; max-width: 320px;
}
.jgos-dtp-dialog-head { padding: 16px 18px 4px; font-weight: 600; font-size: 15px; color: var(--jgos-text); }
.jgos-dtp-dialog-body { padding: 8px 18px; }
.jgos-dtp-dialog-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 8px 18px 16px; }

.jgos-dr-compare {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background: rgba(217, 120, 145, 0.05);
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 12px;
}
.jgos-dr-compare input { margin: 0; }
.jgos-dr-compare span { font-size: 13px; font-weight: 500; }
.jgos-dr-compare small {
    color: var(--jgos-muted);
    font-size: 11px;
    margin-left: auto;
}

.jgos-dr-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

@media (max-width: 700px) {
    /* V3.50 — no celular o painel do filtro vira BOTTOM-SHEET (antes vazava/cortava fora da tela
       à esquerda, porque era position:absolute; right:0 ancorado num gatilho estreito). */
    .jgos-dr-panel {
        position: fixed;
        left: 0; right: 0; bottom: 0; top: auto;
        width: auto !important; max-width: none;
        max-height: 85vh; overflow-y: auto;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 40px rgba(0,0,0,.18);
        animation: jgos-sheet-up .2s ease;
    }
    .jgos-dr-cal-grid { grid-template-columns: 1fr; gap: 14px; }
    .jgos-dr-cal-grid-single { max-width: none; }
    .jgos-dr-trigger { min-width: 200px; }
    /* botões Cancelar/Aplicar fixos no rodapé do sheet (sempre visíveis ao rolar) */
    .jgos-dr-actions { position: sticky; bottom: 0; background: var(--jgos-card-bg, #fff); padding-top: 10px; margin-top: 4px; }
}

/* ── Dashboard novo: tools no header ── */
.jgos-dash-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.jgos-dash-tools {
    display: flex;
    gap: 8px;
    align-items: center;
}

/* ── KPI cards V2 (com delta) ── */
.jgos-dash-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 20px 0 18px;
}
.jgos-dash-kpi-3 {
    grid-template-columns: repeat(3, 1fr);
}
.jgos-kpi-v2 {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.jgos-kpi-v2.is-destaque {
    background: linear-gradient(135deg, #fff8fa, #fff);
    border-color: var(--jgos-primary, #d97891);
}
.jgos-kpi-v2-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    font-weight: 600;
}
.jgos-kpi-v2-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--jgos-text);
    line-height: 1.1;
}
.jgos-kpi-v2-value.good { color: #16a34a; }
.jgos-kpi-v2-value.bad  { color: #dc2626; }
.jgos-kpi-v2-sub {
    font-size: 11px;
    color: var(--jgos-muted);
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}
.jgos-kpi-v2-sub.good { color: #16a34a; }
.jgos-kpi-v2-sub.warn { color: #d97706; }
.jgos-kpi-v2-sub.bad  { color: #dc2626; }

/* ── Delta tag (↑12% / ↓3%) ── */
.jgos-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
}
.jgos-delta-up    { background: rgba(22, 163, 74, 0.1);  color: #16a34a; }
.jgos-delta-down  { background: rgba(220, 38, 38, 0.1);  color: #dc2626; }
.jgos-delta-flat  { background: var(--jgos-bg-soft); color: var(--jgos-muted); }
.jgos-delta-new   { background: rgba(217, 120, 145, 0.1); color: var(--jgos-primary); }

/* ── Gráfico SVG ── */
.jgos-chart-card {
    padding: 18px;
    margin-bottom: 18px;
}
.jgos-chart-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 12px;
}
.jgos-chart-head strong {
    font-size: 14px;
    color: var(--jgos-text);
    font-weight: 600;
}
.jgos-chart-head small {
    font-size: 11px;
    color: var(--jgos-muted);
}
.jgos-chart-svg {
    width: 100%;
    height: 220px;
    display: block;
}

/* ── Performance por dia da semana ── */
.jgos-dow-bar {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-dow-bar:last-child { border-bottom: 0; }
.jgos-dow-bar-label {
    font-weight: 600;
    font-size: 12px;
    color: var(--jgos-text);
}
.jgos-dow-bar-track {
    height: 8px;
    background: var(--jgos-bg-soft);
    border-radius: 4px;
    overflow: hidden;
}
.jgos-dow-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--jgos-primary, #d97891), #e89aac);
    border-radius: 4px;
    transition: width .3s ease;
}
.jgos-dow-bar-val {
    font-size: 11px;
    color: var(--jgos-muted);
    text-align: right;
    white-space: nowrap;
}

/* ── Dashboard 2 colunas helper ── */
.jgos-dash-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-bottom: 18px;
}
.jgos-dash-section-title {
    margin: 24px 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--jgos-muted);
    text-transform: uppercase;
    letter-spacing: .5px;
}

/* ── Responsivo ── */
@media (max-width: 980px) {
    .jgos-dash-kpi-row { grid-template-columns: repeat(2, 1fr); }
    .jgos-dash-kpi-3   { grid-template-columns: 1fr; }
    .jgos-dash-2col    { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
    .jgos-dash-kpi-row { grid-template-columns: 1fr; }
    .jgos-chart-svg   { height: 180px; }
    .jgos-dr-trigger  { min-width: 0; width: 100%; }
    .jgos-dash-tools  { width: 100%; }
    .jgos-dash-hero   { flex-direction: column; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.5 — Agenda Pro (Mês/Semana/Dia/Lista) + Modal de cadastro
 * ═══════════════════════════════════════════════════════════════ */

.jgos-ag2 {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Toolbar ── */
.jgos-ag2-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.jgos-ag2-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}
.jgos-ag2-titulo {
    margin: 0 0 0 12px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 20px;
    font-weight: 600;
    color: var(--jgos-text);
    text-transform: capitalize;
}
.jgos-ag2-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}
.jgos-ag2-modos {
    display: inline-flex;
    padding: 3px;
    background: var(--jgos-bg-soft, #f6f3f1);
    border-radius: 8px;
}
.jgos-ag2-modo {
    background: transparent;
    border: 0;
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 500;
    color: var(--jgos-muted);
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
    transition: all .15s;
}
.jgos-ag2-modo:hover { color: var(--jgos-text); }
.jgos-ag2-modo.is-active {
    background: var(--jgos-card-bg, #fff);
    color: var(--jgos-text);
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.jgos-ag2-cor-sel {
    max-width: 160px;
    font-size: 12px;
}

/* ── Body: sidebar + canvas ── */
.jgos-ag2-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 14px;
    min-height: 600px;
}
.jgos-ag2-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.jgos-ag2-canvas {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    overflow: hidden;
    min-height: 600px;
}

/* Mini calendário sidebar */
.jgos-ag2-mini {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 12px;
}
.jgos-ag2-mini-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 6px;
}
.jgos-ag2-mini-head span {
    font-size: 13px;
    font-weight: 600;
}
.jgos-ag2-mini-head button {
    background: transparent;
    border: 0;
    cursor: pointer;
    padding: 2px 6px;
    color: var(--jgos-muted);
    border-radius: 4px;
}
.jgos-ag2-mini-head button:hover { background: var(--jgos-bg-soft); color: var(--jgos-text); }
.jgos-ag2-mini-dow {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    font-size: 9px;
    color: var(--jgos-muted);
    text-align: center;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.jgos-ag2-mini-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
}
.jgos-ag2-mini-day {
    background: transparent;
    border: 0;
    padding: 4px 0;
    font-size: 11px;
    cursor: pointer;
    border-radius: 4px;
    font-family: inherit;
    color: var(--jgos-text);
}
.jgos-ag2-mini-day:hover { background: var(--jgos-bg-soft); }
.jgos-ag2-mini-day.is-today {
    color: var(--jgos-primary);
    font-weight: 700;
}
.jgos-ag2-mini-day.is-selected {
    background: var(--jgos-primary);
    color: #fff;
    font-weight: 700;
}

/* Sidebar sections (chips de filtro) */
.jgos-ag2-side-section {
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    padding: 12px;
}
.jgos-ag2-side-section small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    font-weight: 600;
    margin-bottom: 8px;
}
.jgos-ag2-chip {
    display: flex;
    align-items: center;
    gap: 6px;
    width: 100%;
    background: transparent;
    border: 0;
    padding: 5px 0;
    font-size: 12px;
    cursor: pointer;
    color: var(--jgos-text);
    font-family: inherit;
    text-align: left;
    opacity: 0.5;
    transition: opacity .15s;
}
.jgos-ag2-chip.is-on { opacity: 1; }
.jgos-ag2-chip:hover { opacity: 1; }
.jgos-ag2-chip-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--chip-cor, #ccc);
    flex-shrink: 0;
}

/* ── Visão Mês ── */
.jgos-ag2-mes {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.jgos-ag2-mes-head {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-ag2-mes-dow {
    padding: 10px 0;
    text-align: center;
    font-size: 11px;
    color: var(--jgos-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: .5px;
}
.jgos-ag2-mes-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(100px, 1fr);
    flex: 1;
}
.jgos-ag2-mes-cell {
    border-right: 1px solid var(--jgos-border);
    border-bottom: 1px solid var(--jgos-border);
    padding: 6px 6px 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    transition: background .12s;
    min-height: 100px;
}
.jgos-ag2-mes-cell:hover { background: var(--jgos-bg-soft, #f9f5f3); }
.jgos-ag2-mes-cell.is-out { background: #fafafa; opacity: 0.5; }
.jgos-ag2-mes-cell.is-today { background: rgba(217, 120, 145, 0.05); }
.jgos-ag2-mes-num {
    font-size: 12px;
    color: var(--jgos-muted);
    font-weight: 600;
    margin-bottom: 4px;
}
.jgos-ag2-mes-cell.is-today .jgos-ag2-mes-num {
    color: var(--jgos-primary);
    font-weight: 700;
}
.jgos-ag2-mes-evt {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
}
.jgos-ag2-mes-evt:hover { filter: brightness(1.1); }
.jgos-ag2-mes-mais {
    font-size: 10px;
    color: var(--jgos-muted);
    padding: 1px 4px;
    cursor: pointer;
}

/* ── Visão Semana ── */
.jgos-ag2-sem-wrap {
    display: flex;
    flex-direction: column;
    height: 600px;
}
.jgos-ag2-sem-head-row {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
    border-bottom: 1px solid var(--jgos-border);
    background: #fff;
}
.jgos-ag2-sem-cell-hora {
    border-right: 1px solid var(--jgos-border);
}
.jgos-ag2-sem-cell-head {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid var(--jgos-border);
}
.jgos-ag2-sem-cell-head small {
    display: block;
    font-size: 10px;
    color: var(--jgos-muted);
    text-transform: uppercase;
}
.jgos-ag2-sem-cell-head strong {
    font-size: 18px;
    color: var(--jgos-text);
}
.jgos-ag2-sem-cell-head.is-today strong { color: var(--jgos-primary); }
.jgos-ag2-sem-body {
    position: relative;
    overflow-y: auto;
    flex: 1;
}
.jgos-ag2-sem-grid {
    display: grid;
    grid-template-columns: 60px repeat(7, 1fr);
}
.jgos-ag2-sem-slot-hora {
    height: 30px;
    border-right: 1px solid var(--jgos-border);
    border-bottom: 1px dashed #f0eae7;
    padding: 2px 6px;
    font-size: 10px;
    color: var(--jgos-muted);
    text-align: right;
}
.jgos-ag2-sem-slot {
    height: 30px;
    border-right: 1px solid var(--jgos-border);
    border-bottom: 1px dashed #f0eae7;
    cursor: pointer;
    transition: background .1s;
}
.jgos-ag2-sem-slot:hover {
    background: rgba(217, 120, 145, 0.06);
}
.jgos-ag2-sem-eventos {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.jgos-ag2-sem-evt {
    position: absolute;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 11px;
    line-height: 1.2;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    pointer-events: auto;
    transition: filter .15s, transform .15s;
}
.jgos-ag2-sem-evt:hover {
    filter: brightness(1.1);
    transform: scale(1.02);
    z-index: 5;
}
.jgos-ag2-sem-evt strong {
    display: block;
    font-size: 10px;
    opacity: 0.9;
}
.jgos-ag2-sem-evt small {
    display: block;
    font-size: 10px;
    opacity: 0.8;
}

/* ── Visão Dia ── */
.jgos-ag2-dia-wrap {
    position: relative;
    height: 600px;
    overflow-y: auto;
}
.jgos-ag2-dia-grid {
    display: flex;
    flex-direction: column;
}
.jgos-ag2-dia-row {
    display: grid;
    grid-template-columns: 80px 1fr;
    border-bottom: 1px dashed #f0eae7;
    height: 30px;
}
.jgos-ag2-dia-hora {
    border-right: 1px solid var(--jgos-border);
    padding: 2px 8px;
    font-size: 10px;
    color: var(--jgos-muted);
    text-align: right;
}
.jgos-ag2-dia-slot {
    cursor: pointer;
    transition: background .1s;
}
.jgos-ag2-dia-slot:hover {
    background: rgba(217, 120, 145, 0.06);
}
.jgos-ag2-dia-eventos {
    position: absolute;
    top: 0;
    left: 80px;
    right: 0;
    bottom: 0;
    pointer-events: none;
}
.jgos-ag2-dia-evt {
    position: absolute;
    left: 8px;
    right: 8px;
    border-radius: 6px;
    padding: 6px 10px;
    cursor: pointer;
    pointer-events: auto;
    box-shadow: 0 2px 8px rgba(0,0,0,.1);
    overflow: hidden;
    transition: filter .15s, transform .15s;
}
.jgos-ag2-dia-evt:hover {
    filter: brightness(1.05);
    transform: scale(1.01);
}
.jgos-ag2-dia-evt-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    margin-bottom: 2px;
    opacity: 0.9;
}
.jgos-ag2-dia-evt-head span {
    text-transform: uppercase;
    font-size: 9px;
    background: rgba(255,255,255,0.2);
    padding: 1px 6px;
    border-radius: 3px;
}
.jgos-ag2-dia-evt-nome {
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 2px;
}
.jgos-ag2-dia-evt small {
    font-size: 11px;
    opacity: 0.85;
}

/* ── Linha "agora" ── */
.jgos-ag2-agora-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: #dc2626;
    z-index: 10;
    pointer-events: none;
}
.jgos-ag2-agora-line::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -3px;
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
}

/* ── Visão Lista ── */
.jgos-ag2-lista {
    padding: 14px;
}
.jgos-ag2-lista-grupo {
    margin-bottom: 18px;
}
.jgos-ag2-lista-grupo h3 {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    margin: 0 0 8px;
    font-weight: 600;
}
.jgos-ag2-lista-item {
    display: grid;
    grid-template-columns: 4px 70px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 10px;
    border: 1px solid var(--jgos-border);
    border-radius: 8px;
    margin-bottom: 6px;
    cursor: pointer;
    transition: all .15s;
}
.jgos-ag2-lista-item:hover {
    border-color: var(--jgos-primary);
    transform: translateX(2px);
}
.jgos-ag2-lista-bar {
    height: 100%;
    border-radius: 2px;
}
.jgos-ag2-lista-hora {
    text-align: center;
}
.jgos-ag2-lista-hora strong {
    display: block;
    font-size: 16px;
    color: var(--jgos-text);
}
.jgos-ag2-lista-hora small {
    font-size: 10px;
    color: var(--jgos-muted);
}
.jgos-ag2-lista-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}
.jgos-ag2-lista-info small {
    font-size: 11px;
    color: var(--jgos-muted);
}

/* ═══════════════════════════════════════════════════════════════
 * MODAL compacto (overlay) — usado pela agenda
 * ═══════════════════════════════════════════════════════════════ */
.jgos-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.4);
    z-index: 1500;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px;
    overflow-y: auto;
    animation: jgos-fade-in .15s;
}
@keyframes jgos-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.jgos-modal-box {
    background: var(--jgos-card-bg, #fff);
    border-radius: 12px;
    width: min(600px, 100%);
    max-height: calc(100vh - 120px);
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    display: flex;
    flex-direction: column;
    animation: jgos-slide-up .2s;
}
@keyframes jgos-slide-up {
    from { transform: translateY(12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}
.jgos-modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-modal-head h3 {
    margin: 0;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 18px;
    font-weight: 600;
}
.jgos-modal-head small {
    display: block;
    font-size: 11px;
    color: var(--jgos-muted);
    margin-top: 2px;
}
.jgos-modal-close {
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 28px;
    line-height: 1;
    color: var(--jgos-muted);
    padding: 4px 10px;
    border-radius: 6px;
}
.jgos-modal-close:hover {
    background: var(--jgos-bg-soft);
    color: var(--jgos-text);
}
.jgos-modal-body {
    padding: 18px 22px;
    overflow-y: auto;
    flex: 1;
}
.jgos-modal-foot {
    padding: 14px 22px;
    border-top: 1px solid var(--jgos-border);
    display: flex;
    gap: 8px;
    align-items: center;
}

/* AgendaModal específico */
.jgos-agm-box { width: min(640px, 100%); }

.jgos-agm-cliente {
    display: flex;
    gap: 8px;
    align-items: center;
    position: relative;
}
.jgos-agm-cliente input[type="text"] { flex: 1; }
.jgos-agm-cli-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 90px;
    margin-top: 4px;
    background: #fff;
    border: 1px solid var(--jgos-border);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
    max-height: 250px;
    overflow-y: auto;
    z-index: 10;
}
.jgos-agm-cli-result {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 10px 12px;
    cursor: pointer;
    font-family: inherit;
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-agm-cli-result:last-child { border-bottom: 0; }
.jgos-agm-cli-result:hover { background: var(--jgos-bg-soft); }
.jgos-agm-cli-result strong {
    display: block;
    font-size: 13px;
}
.jgos-agm-cli-result small {
    font-size: 11px;
    color: var(--jgos-muted);
}
.jgos-agm-cli-empty {
    padding: 14px;
    font-size: 12px;
    color: var(--jgos-muted);
    text-align: center;
}

.jgos-agm-cli-quick {
    background: var(--jgos-bg-soft);
    border-radius: 8px;
    padding: 12px;
    margin: 8px 0 14px;
}

.jgos-agm-proc-preview {
    margin-top: 8px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    background: var(--jgos-bg-soft);
    border-radius: 8px;
    padding: 10px 12px;
}
.jgos-agm-proc-preview small {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--jgos-muted);
    margin-bottom: 2px;
}
.jgos-agm-proc-preview strong { font-size: 14px; }

.jgos-agm-conflito {
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(220, 38, 38, 0.07);
    border: 1px solid rgba(220, 38, 38, 0.3);
    border-radius: 8px;
    color: #991b1b;
    font-size: 12px;
}
.jgos-agm-conflito strong { display: block; margin-bottom: 6px; font-size: 13px; }
.jgos-agm-conflito ul { margin: 4px 0; padding-left: 18px; }
.jgos-agm-conflito li { margin: 3px 0; }
.jgos-agm-conflito small { color: #b91c1c; }

/* Responsivo */
@media (max-width: 900px) {
    .jgos-ag2-body { grid-template-columns: 1fr; }
    .jgos-ag2-sidebar { order: 2; }
    .jgos-ag2-mes-grid { grid-auto-rows: minmax(80px, 1fr); }
}
@media (max-width: 600px) {
    .jgos-ag2-sem-wrap, .jgos-ag2-dia-wrap { height: 500px; }
    .jgos-ag2-actions { flex-direction: column; align-items: stretch; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.6 — WhatsApp Web visual
 * ═══════════════════════════════════════════════════════════════ */

/* Header — badge de status da conexão */
.jgos-wa-conn-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    background: var(--jgos-bg-soft, #f6f3f1);
    color: var(--jgos-muted);
}
.jgos-wa-conn-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #9ca3af;
}
.jgos-wa-conn-badge.is-connected {
    background: rgba(22, 163, 74, 0.1);
    color: #16a34a;
}
.jgos-wa-conn-badge.is-connected .jgos-wa-conn-dot {
    background: #16a34a;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.2);
    animation: jgos-wa-pulse 2s infinite;
}
.jgos-wa-conn-badge.is-pending {
    background: rgba(217, 119, 6, 0.1);
    color: #d97706;
}
.jgos-wa-conn-badge.is-pending .jgos-wa-conn-dot { background: #d97706; }
.jgos-wa-conn-badge.is-off {
    background: rgba(220, 38, 38, 0.08);
    color: #dc2626;
}
.jgos-wa-conn-badge.is-off .jgos-wa-conn-dot { background: #dc2626; }

@keyframes jgos-wa-pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}

/* Container 2 colunas */
.jgos-wa-wrap {
    display: grid;
    grid-template-columns: 340px 1fr;
    height: calc(100vh - 220px);
    min-height: 560px;
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    overflow: hidden;
}

/* ── Sidebar (lista) ── */
.jgos-wa-side {
    border-right: 1px solid var(--jgos-border);
    display: flex;
    flex-direction: column;
    background: #fafaf9;
    min-height: 0; /* item do grid: deixa a lista rolar internamente */
}
.jgos-wa-side-head {
    padding: 14px;
    border-bottom: 1px solid var(--jgos-border);
    background: #fff;
}
.jgos-wa-side-list {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
.jgos-wa-side-empty {
    padding: 30px 16px;
    text-align: center;
    color: var(--jgos-muted);
    font-size: 13px;
}
.jgos-wa-side-foot {
    padding: 12px 14px;
    border-top: 1px solid var(--jgos-border);
    background: #fff;
}

/* Item da lista */
.jgos-wa-side-item {
    display: grid;
    grid-template-columns: 44px 1fr;
    gap: 12px;
    padding: 12px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--jgos-border);
    transition: background .12s;
    align-items: center;
}
.jgos-wa-side-item:hover {
    background: var(--jgos-bg-soft, #f6f3f1);
}
.jgos-wa-side-item.is-active {
    background: rgba(217, 120, 145, 0.08);
    border-left: 3px solid var(--jgos-primary, #d97891);
    padding-left: 11px;
}
.jgos-wa-side-item.is-unread strong {
    font-weight: 700;
    color: var(--jgos-text);
}
.jgos-wa-side-item-info {
    min-width: 0;
}
.jgos-wa-side-item-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 2px;
}
.jgos-wa-side-item-head strong {
    font-size: 14px;
    color: var(--jgos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jgos-wa-side-item-head small {
    font-size: 11px;
    color: var(--jgos-muted);
    flex-shrink: 0;
}
.jgos-wa-side-item-prev {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}
.jgos-wa-side-item-prev span {
    flex: 1;
    font-size: 12px;
    color: var(--jgos-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3px;
}
.jgos-wa-side-badge {
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    background: var(--jgos-primary, #d97891);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    flex-shrink: 0;
}

/* Avatar com iniciais */
.jgos-wa-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #9ca3af;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* ── Área do chat ── */
.jgos-wa-chat-area {
    background:
        linear-gradient(rgba(248, 245, 243, 0.6), rgba(248, 245, 243, 0.6)),
        repeating-linear-gradient(45deg, transparent, transparent 35px, rgba(0,0,0,0.01) 35px, rgba(0,0,0,0.01) 36px);
    display: flex;
    flex-direction: column;
    min-height: 0; /* item do grid: não estoura a altura do .jgos-wa-wrap */
}

.jgos-wa-empty-chat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px;
    text-align: center;
    color: var(--jgos-muted);
}
.jgos-wa-empty-chat h3 {
    margin: 14px 0 6px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    color: var(--jgos-text);
}
.jgos-wa-empty-chat p { font-size: 13px; max-width: 320px; margin: 0; }

.jgos-wa-chat {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Header do chat */
.jgos-wa-chat-head {
    display: grid;
    grid-template-columns: 44px 1fr auto;
    gap: 12px;
    align-items: center;
    padding: 12px 18px;
    border-bottom: 1px solid var(--jgos-border);
    background: #fff;
}
.jgos-wa-chat-info {
    min-width: 0;
}
.jgos-wa-chat-info strong {
    display: block;
    font-size: 15px;
    color: var(--jgos-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.jgos-wa-chat-info small {
    display: block;
    font-size: 11px;
    color: var(--jgos-muted);
    margin-top: 2px;
}
.jgos-wa-chat-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Body do chat (bolhas) */
.jgos-wa-chat-body {
    flex: 1;
    min-height: 0; /* essencial: deixa o corpo ROLAR em vez de crescer e empurrar o input */
    overflow-y: auto;
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.jgos-wa-chat-empty {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--jgos-muted);
    font-size: 13px;
    padding: 40px;
}

/* Separador de data */
.jgos-wa-data-sep {
    display: flex;
    justify-content: center;
    margin: 14px 0;
}
.jgos-wa-data-sep span {
    background: rgba(255,255,255,0.85);
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 11px;
    color: var(--jgos-muted);
    font-weight: 500;
}

/* Bolhas */
.jgos-wa-bolha-wrap {
    display: flex;
    margin: 2px 0;
    animation: jgos-wa-msg-in .25s ease-out;
}
.jgos-wa-bolha-wrap.is-out { justify-content: flex-end; }
.jgos-wa-bolha-wrap.is-in  { justify-content: flex-start; }

@keyframes jgos-wa-msg-in {
    from { transform: translateY(4px); opacity: 0; }
    to   { transform: translateY(0);   opacity: 1; }
}

.jgos-wa-bolha {
    max-width: 65%;
    padding: 8px 12px 6px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 1px 1px rgba(0,0,0,0.06);
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}
.jgos-wa-bolha-wrap.is-out .jgos-wa-bolha {
    background: #d9fdd3;
    color: #111;
    border-bottom-right-radius: 2px;
}
.jgos-wa-bolha-wrap.is-in .jgos-wa-bolha {
    background: #fff;
    color: #111;
    border-bottom-left-radius: 2px;
}
.jgos-wa-bolha-txt {
    margin-right: 50px;
}
.jgos-wa-bolha-meta {
    position: absolute;
    bottom: 4px;
    right: 8px;
    font-size: 10px;
    color: rgba(0,0,0,0.45);
    display: flex;
    gap: 3px;
    align-items: center;
}
.jgos-wa-status { font-size: 11px; }
.jgos-wa-status.is-read { color: #34b7f1; }
.jgos-wa-status.is-failed { color: #dc2626; }

/* Input do chat */
.jgos-wa-chat-input {
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    padding: 10px 18px;
    background: #fff;
    border-top: 1px solid var(--jgos-border);
    align-items: end;
    position: relative;
}
.jgos-wa-chat-input textarea {
    width: 100%;
    border: 1px solid var(--jgos-border);
    border-radius: 20px;
    padding: 10px 16px;
    font-family: inherit;
    font-size: 14px;
    resize: none;
    outline: none;
    background: var(--jgos-bg-soft, #f6f3f1);
    line-height: 1.4;
    max-height: 120px;
    overflow-y: auto;
}
.jgos-wa-chat-input textarea:focus {
    border-color: var(--jgos-primary);
}
.jgos-wa-input-extra {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: var(--jgos-bg-soft, #f6f3f1);
    color: var(--jgos-muted);
    cursor: pointer;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jgos-wa-input-extra:hover { background: #ede8e5; }
.jgos-wa-send {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: var(--jgos-primary, #d97891);
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .1s;
}
.jgos-wa-send:hover { transform: scale(1.05); }
.jgos-wa-send:active { transform: scale(0.95); }

/* Popup de templates */
.jgos-wa-tpl-popup {
    position: absolute;
    bottom: 60px;
    left: 18px;
    width: 320px;
    max-height: 280px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--jgos-border);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    padding: 6px;
    z-index: 10;
}
.jgos-wa-tpl-item {
    display: block;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    padding: 8px 10px;
    cursor: pointer;
    border-radius: 6px;
    font-family: inherit;
}
.jgos-wa-tpl-item:hover { background: var(--jgos-bg-soft); }
.jgos-wa-tpl-item strong { display: block; font-size: 13px; margin-bottom: 2px; }
.jgos-wa-tpl-item small { font-size: 11px; color: var(--jgos-muted); }

/* ── Configuração ── */
.jgos-wa-cfg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.jgos-wa-cfg-col {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.jgos-wa-cfg-status {
    padding: 16px 20px;
    border-radius: 10px;
    background: var(--jgos-card-bg, #fff);
    border: 1px solid var(--jgos-border);
    border-left-width: 4px;
}
.jgos-wa-cfg-status strong {
    display: block;
    font-size: 14px;
    margin-bottom: 4px;
}
.jgos-wa-cfg-status small {
    display: block;
    font-size: 12px;
    color: var(--jgos-muted);
}
.jgos-wa-cfg-status.is-ok      { border-left-color: #16a34a; }
.jgos-wa-cfg-status.is-ok strong { color: #16a34a; }
.jgos-wa-cfg-status.is-pending { border-left-color: #d97706; }
.jgos-wa-cfg-status.is-pending strong { color: #d97706; }
.jgos-wa-cfg-status.is-bad     { border-left-color: #dc2626; }
.jgos-wa-cfg-status.is-bad strong { color: #dc2626; }
.jgos-wa-cfg-status.is-off     { border-left-color: #9ca3af; }

.jgos-wa-copy {
    display: flex;
    gap: 6px;
}
.jgos-wa-copy input { flex: 1; }
.jgos-wa-code {
    display: block;
    background: var(--jgos-bg-soft);
    border: 1px solid var(--jgos-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    color: var(--jgos-text);
}
.jgos-wa-qr-img {
    display: block;
    width: 100%;
    max-width: 280px;
    margin: 0 auto;
    border: 8px solid #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.jgos-checkbox {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

/* Responsivo */
/* V2.30.4 — botão "voltar" do chat (só aparece no mobile/tablet) */
.jgos-wa-back {
    display: none; background: none; border: 0; cursor: pointer;
    font-size: 28px; line-height: 1; color: var(--jgos-text); padding: 0 6px 0 0;
}
@media (max-width: 900px) {
    /* V2.30.7 — LISTA flui na página; abrir conversa = CHAT EM TELA CHEIA (overlay
     * fixo acima da tab bar), input sempre alcançável. Antes o input ficava atrás da barra. */
    .jgos-wa-wrap { display: block; height: auto; min-height: 0; border: 0; border-radius: 0; background: transparent; }
    .jgos-wa-wrap .jgos-wa-side { display: flex; flex-direction: column; border-right: 0; background: transparent; }
    .jgos-wa-side-list { overflow: visible; }
    .jgos-wa-wrap .jgos-wa-chat-area { display: none; }
    .jgos-wa-wrap.is-chat-open .jgos-wa-side { display: none; }
    .jgos-wa-wrap.is-chat-open .jgos-wa-chat-area {
        display: flex; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 1400; background: var(--jgos-bg);
        /* V3.53.2 — dvh acompanha o teclado no iOS/Android: antes (inset:0 / 100vh) o campo de
         * digitar ficava ATRÁS do teclado. dvh encolhe com o teclado aberto; vh é o fallback. */
        height: 100vh; height: 100dvh; bottom: auto;
    }
    .jgos-wa-wrap.is-chat-open .jgos-wa-chat {
        height: 100%; min-height: 0; flex: 1; border: 0; border-radius: 0;
    }
    /* cabeçalho: identidade na 1ª linha (nome truncado), ações numa 2ª linha rolável
     * — antes os 4-5 botões empilhavam e inchavam o header no celular */
    /* V3.3.1 — força FLEX no mobile (no desktop é grid de 3 colunas; com o botão
     * "voltar" vira 4 filhos e o grid esmagava as ações em ~44px). Em flex, o
     * order:3 + width:100% das ações funcionam: identidade na 1ª linha, ações roláveis na 2ª. */
    .jgos-wa-chat-head { display: flex; flex-wrap: wrap; align-items: center; }
    .jgos-wa-chat-info { min-width: 0; flex: 1; }
    .jgos-wa-chat-info strong { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .jgos-wa-chat-actions {
        order: 3; width: 100%; flex-wrap: nowrap; justify-content: flex-start;
        overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .jgos-wa-chat-actions::-webkit-scrollbar { display: none; }
    .jgos-wa-chat-actions .jgos-btn { flex: 0 0 auto; }
    .jgos-wa-chat-input { padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
    #jgos-wa-msg { font-size: 16px; } /* iOS não dá zoom ao focar */
    .jgos-wa-back { display: inline-flex; align-items: center; }
    .jgos-wa-cfg-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
 * V2.7 — Formulários de captação (admin)
 * ═══════════════════════════════════════════════════════════════ */

.jgos-fm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 14px;
}
.jgos-fm-card {
    background: var(--jgos-surface, #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.jgos-fm-card.is-inactive { opacity: 0.6; }
.jgos-fm-card-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.jgos-fm-card-head strong { font-size: 15px; }
.jgos-fm-card-titulo { font-size: 13px; color: var(--jgos-muted); }
.jgos-fm-card-stats {
    display: flex;
    gap: 18px;
    padding: 10px 0;
    border-top: 1px solid var(--jgos-border);
    border-bottom: 1px solid var(--jgos-border);
}
.jgos-fm-card-stats > div { display: flex; flex-direction: column; }
.jgos-fm-card-stats strong { font-size: 20px; }
.jgos-fm-card-stats small { font-size: 11px; color: var(--jgos-muted); }
.jgos-fm-card-link {
    display: flex;
    gap: 6px;
}
.jgos-fm-card-link input { font-size: 11px; flex: 1; }
.jgos-fm-card-actions {
    display: flex;
    gap: 6px;
}
.jgos-fm-card-actions .jgos-btn { flex: 1; text-align: center; text-decoration: none; }

/* Editor com preview */
.jgos-fm-editor {
    display: grid;
    grid-template-columns: 1fr 300px;
    gap: 16px;
    align-items: start;
}
.jgos-fm-preview {
    position: sticky;
    top: 16px;
}
.jgos-fm-preview-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--jgos-muted);
    margin-bottom: 8px;
    font-weight: 600;
}
.jgos-fm-preview-phone {
    background: #faf7f6;
    border: 1px solid var(--jgos-border);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: var(--jgos-shadow-md);
}
.jgos-fm-prev-head {
    background: var(--jgos-primary, #d97891);
    color: #fff;
    padding: 20px 18px;
    text-align: center;
}
.jgos-fm-prev-head strong { display: block; font-size: 16px; }
.jgos-fm-prev-head span { display: block; font-size: 12px; opacity: .9; margin-top: 4px; }
.jgos-fm-prev-body { padding: 16px; }
.jgos-fm-prev-q { font-size: 14px; font-weight: 600; margin-bottom: 12px; }
.jgos-fm-prev-chip {
    padding: 12px 14px;
    border: 1.5px solid var(--jgos-border);
    border-radius: 10px;
    font-size: 13px;
    margin-bottom: 8px;
    background: #fff;
}
.jgos-fm-prev-more { font-size: 12px; color: var(--jgos-muted); text-align: center; }

/* Relatório */
.jgos-fm-rel-total {
    background: linear-gradient(135deg, var(--jgos-primary-l, #fde7ee), #fff);
    border: 1px solid var(--jgos-border);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.jgos-fm-rel-total strong { font-size: 34px; color: var(--jgos-primary); }
.jgos-fm-rel-total span { font-size: 14px; color: var(--jgos-muted); }

@media (max-width: 900px) {
    .jgos-fm-editor { grid-template-columns: 1fr; }
    .jgos-fm-preview { position: static; }
}

/* V2.7.1 — DateRange modo single (1 mês) */
.jgos-dr-calendar-single { }
.jgos-dr-cal-grid-single { grid-template-columns: 1fr !important; max-width: 280px; margin: 0 auto; }
.jgos-dr-panel:has(.jgos-dr-calendar-single) { width: 320px; }

/* V2.8 — Backup (KPIs simples) */
.jgos-bk-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 12px; margin-bottom: 14px; }
.jgos-bk-kpi { background: var(--jgos-card-bg, #fff); border: 1px solid var(--jgos-border); border-radius: 10px; padding: 14px 16px; }
.jgos-bk-kpi small { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .5px; color: var(--jgos-muted); margin-bottom: 4px; }
.jgos-bk-kpi strong { font-size: 22px; }

/* V2.8.6 — Busca de clientes (barra destacada, única busca do sistema) */
.jgos-cl-searchbar {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-bottom: 6px;
}
.jgos-cl-searchbox {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}
.jgos-cl-search-icon {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 19px;
    height: 19px;
    color: var(--jgos-muted, #9a8f8a);
    pointer-events: none;
}
.jgos-cl-searchbox input {
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    padding: 0 44px 0 46px;
    font-size: 15px;
    color: var(--jgos-text, #2b2422);
    background: var(--jgos-card-bg, #fff);
    border: 1.5px solid var(--jgos-border, #e8e0db);
    border-radius: 12px;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}
.jgos-cl-searchbox input::placeholder { color: var(--jgos-muted, #b3a8a2); }
.jgos-cl-searchbox input:focus {
    border-color: var(--jgos-primary, #d97891);
    box-shadow: 0 0 0 3px rgba(217, 120, 145, .15);
}
.jgos-cl-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 50%;
    background: var(--jgos-bg-soft, #f6f3f1);
    color: var(--jgos-muted, #9a8f8a);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.jgos-cl-clear:hover { background: var(--jgos-primary, #d97891); color: #fff; }
.jgos-cl-searchbar .jgos-select { height: 50px; border-radius: 12px; }
.jgos-cl-count {
    font-size: 13px;
    color: var(--jgos-muted, #9a8f8a);
    margin: 0 0 14px 2px;
    min-height: 16px;
}
@media (max-width: 640px) {
    .jgos-cl-searchbar { flex-direction: column; }
    .jgos-cl-searchbar .jgos-select { width: 100% !important; max-width: none !important; }
}

/* V2.9.3 — botão de fechar (✕) quadradinho nas modais (no lugar do antigo "esc") */
.jgos-btn-x {
    min-width: 34px;
    padding-left: 0;
    padding-right: 0;
    font-size: 15px;
    line-height: 1;
    color: var(--jgos-muted);
}
.jgos-btn-x:hover { color: var(--jgos-text); }

/* ───────── V2.16 — Automações ───────── */
.jgos-switch { display: inline-flex; align-items: center; cursor: pointer; user-select: none; }
.jgos-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.jgos-switch input + strong { position: relative; padding-left: 52px; font-weight: 600; line-height: 22px; }
.jgos-switch input + strong::before {
    content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: 42px; height: 22px; border-radius: 22px; background: var(--jgos-border-strong, #ccc); transition: background .2s;
}
.jgos-switch input + strong::after {
    content: ''; position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
    width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .2s; box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.jgos-switch input:checked + strong::before { background: var(--jgos-primary, #d97891); }
.jgos-switch input:checked + strong::after { left: 23px; }

.jgos-regua { transition: opacity .2s; border-left: 3px solid var(--jgos-primary, #d97891); }
.jgos-regua.is-off { opacity: .6; border-left-color: var(--jgos-border, #e5e5e5); }
.jgos-regua code, .jgos-alertas code {
    background: var(--jgos-surface, #f5f0f2); padding: 1px 6px; border-radius: 5px; font-size: 12px;
}

/* ═════════════════════ V2.19 — Polish global de UX/beleza ═════════════════════ */

/* Botões: pressão tátil + foco acessível + leve profundidade no primário */
.jgos-btn { box-shadow: 0 1px 2px rgba(24,24,27,.06); }
.jgos-btn-secondary, .jgos-btn-ghost { box-shadow: none; }
.jgos-btn:not(:disabled):active { transform: translateY(1px); }
.jgos-btn:focus-visible { outline: none; box-shadow: var(--jgos-ring); }

/* Foco visível (acessibilidade WCAG) em elementos interativos sem ring próprio */
a:focus-visible,
button:focus-visible,
.jgos-nav-item:focus-visible,
.jgos-tab:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible {
    outline: 2px solid var(--jgos-primary);
    outline-offset: 2px;
    border-radius: 6px;
}

/* Tabelas: hover suave + transição */
.jgos-table tbody tr { transition: background .15s ease; }
.jgos-table tbody tr:hover td { background: var(--jgos-bg-soft); }

/* Inputs: garante o ring com o token (consistência) */
.jgos-input:focus, .jgos-select:focus, .jgos-textarea:focus { box-shadow: var(--jgos-ring); }

/* Empty states: um pouco mais de respiro e charme */
.jgos-empty { padding: 56px 24px; }
.jgos-empty > div:first-child { opacity: .85; }

/* Entrada suave dos modais (criados a cada abertura — sem flicker em re-render) */
.jgos-modal-overlay { animation: jgos-fade .18s ease both; }
.jgos-modal-box { animation: jgos-pop .22s cubic-bezier(.34,1.2,.64,1) both; }
@keyframes jgos-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes jgos-pop  { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

/* Toast: mensagem + ação "Desfazer" */
.jgos-toast { display: flex; align-items: center; gap: 12px; }
.jgos-toast-msg { flex: 1; }
.jgos-toast-action {
    flex-shrink: 0; background: transparent; border: 1px solid rgba(255,255,255,.5);
    color: inherit; font: inherit; font-weight: 600; font-size: 12px;
    padding: 3px 10px; border-radius: 6px; cursor: pointer; transition: var(--jgos-trans);
}
.jgos-toast-action:hover { background: rgba(255,255,255,.18); }

/* Skeleton screens (loading que parece o conteúdo — sensação de +rápido) */
.jgos-skeleton {
    position: relative; overflow: hidden;
    background: var(--jgos-bg-soft, #f0ecea);
    border-radius: var(--jgos-radius-sm);
}
.jgos-skeleton::after {
    content: ''; position: absolute; inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
    animation: jgos-shimmer 1.25s infinite;
}
@keyframes jgos-shimmer { to { transform: translateX(100%); } }
.jgos-sk-line   { height: 12px; margin: 8px 0; }
.jgos-sk-line.lg { height: 18px; width: 55%; }
.jgos-sk-line.sm { width: 70%; }
.jgos-sk-circle { width: 44px; height: 44px; border-radius: 50%; }
.jgos-sk-card   { height: 96px; margin-bottom: 12px; border-radius: var(--jgos-radius); }
.jgos-sk-row    { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--jgos-border); }
.jgos-sk-row > div { flex: 1; }

/* Respeita quem prefere menos movimento (acessibilidade) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
    }
}

/* ═════════════════════ V2.24 — Mídia no chat do WhatsApp ═════════════════════ */
.jgos-wa-bolha-midia { margin-bottom: 4px; }
.jgos-wa-midia-img { max-width: 220px; max-height: 260px; border-radius: 10px; display: block; cursor: pointer; }
.jgos-wa-midia-audio { width: 232px; max-width: 100%; height: 40px; }
.jgos-wa-midia-video { max-width: 240px; max-height: 280px; border-radius: 10px; display: block; }
.jgos-wa-midia-load {
    background: rgba(0,0,0,.06); border: 1px solid var(--jgos-border); border-radius: 8px;
    padding: 8px 12px; cursor: pointer; font: inherit; font-size: 13px; color: inherit;
}
.jgos-wa-midia-load:hover { background: rgba(0,0,0,.1); }
.jgos-wa-midia-doc {
    display: inline-block; padding: 6px 10px; background: rgba(0,0,0,.05);
    border-radius: 8px; text-decoration: none; color: inherit; font-size: 13px;
}

/* V2.25 — "digitando…" no cabeçalho do chat */
.jgos-wa-typing { color: var(--jgos-primary-d, #c1607a); font-style: italic; }

/* ===== V2.26 — Tags (etiquetas) ===== */
.jgos-tags-box { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; position: relative; }
.jgos-tags-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; margin-bottom: 12px; }
.jgos-tags-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; flex: 1; min-height: 28px; position: relative; }
.jgos-tag-chip {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 12px; font-weight: 600; line-height: 1.4;
    white-space: nowrap; border: none;
}
.jgos-tag-x {
    background: rgba(0,0,0,.18); color: inherit; border: none; cursor: pointer;
    width: 15px; height: 15px; border-radius: 50%; font-size: 12px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; padding: 0;
}
.jgos-tag-x:hover { background: rgba(0,0,0,.35); }
.jgos-tag-add {
    border: 1px dashed var(--jgos-border-strong, #d4d4d8); background: transparent;
    color: var(--jgos-muted, #71717a); cursor: pointer;
    padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
}
.jgos-tag-add:hover { border-color: var(--jgos-primary, #d97891); color: var(--jgos-primary, #d97891); }
.jgos-tag-empty { color: var(--jgos-muted, #71717a); font-size: 12px; }
.jgos-tag-pick { cursor: pointer; }
.jgos-tag-pop {
    position: absolute; top: 100%; left: 0; z-index: 50; margin-top: 6px;
    background: #fff; border: 1px solid var(--jgos-border, #ececea);
    border-radius: 12px; box-shadow: 0 10px 30px rgba(60,40,45,.16);
    padding: 10px; width: min(320px, 86vw);
}
.jgos-tag-pop-list { display: flex; flex-wrap: wrap; gap: 6px; max-height: 168px; overflow: auto; margin-bottom: 8px; }
.jgos-tag-pop-new { display: flex; gap: 6px; align-items: center; border-top: 1px solid var(--jgos-border, #ececea); padding-top: 8px; }
.jgos-tag-pop-new .jgos-tag-newname { flex: 1; min-width: 0; }
.jgos-tag-newcor { width: 34px; height: 30px; padding: 0; border: 1px solid var(--jgos-border-strong, #d4d4d8); border-radius: 8px; background: #fff; cursor: pointer; }
.jgos-kanban-card-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.jgos-kanban-card-tags .jgos-tag-chip { font-size: 10.5px; padding: 1px 7px; }

/* ===== V2.28 — Cockpit do dia ===== */
.jgos-ck-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.jgos-ck-sec { padding: 14px 16px; }
.jgos-ck-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
.jgos-ck-sec-head h3 { margin: 0; font-size: 15px; }
.jgos-ck-badge { color: #fff; font-size: 12px; font-weight: 700; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; }
.jgos-ck-list { display: flex; flex-direction: column; gap: 6px; max-height: 360px; overflow: auto; }
.jgos-ck-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border: 1px solid var(--jgos-border, #ececea); border-radius: 10px; }
.jgos-ck-row:hover { background: var(--jgos-primary-l, #fde7ee); }
.jgos-ck-row-main { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.jgos-ck-row-main strong { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* V3.50 — quebra em linha (data/proc/selo) em vez de transbordar por cima do botão Confirmar no mobile */
.jgos-ck-sub { font-size: 12px; color: var(--jgos-muted, #71717a); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 3px; }
.jgos-ck-row-acts { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.jgos-ck-prio { color: #fff; font-size: 10px; font-weight: 700; text-transform: uppercase; padding: 1px 6px; border-radius: 999px; }
.jgos-ck-empty { color: var(--jgos-muted, #71717a); font-size: 13px; margin: 4px 0 0; }
/* V2.29 — Anti-falta: selos de status de confirmação no cockpit */
.jgos-ck-flag { font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.jgos-ck-flag.is-risco { background: #fdeaea; color: #c0392b; }
.jgos-ck-flag.is-aguard { background: #fdf3e0; color: #b3541e; }
.jgos-ck-row.is-risco { border-color: #f3c6c6; background: #fef7f7; }

/* ===== V2.30.1 — Mobile: barra de abas (rodapé) + gaveta "Mais" + telas ===== */
.jgos-tabbar { display: none; }
.jgos-drawer-overlay { display: none; }
.jgos-ag2-fab { display: none; }

@media (max-width: 768px) {
    .jgos-app { display: block; }

    /* V2.30.7 — sub-abas (Conversas/Configuração/IA/Templates etc.) rolam na horizontal
     * em telas estreitas em vez de quebrar/espremer */
    .jgos-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
    .jgos-tabs::-webkit-scrollbar { display: none; }
    .jgos-tabs .jgos-tab { white-space: nowrap; flex: 0 0 auto; }
    /* V3.20.2 — abas do dashboard (Resultados/Recuperar/Financeiro) também rolam, não estouram */
    .jgos-dash-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
    .jgos-dash-tabs::-webkit-scrollbar { display: none; }
    .jgos-dash-tab { white-space: nowrap; flex: 0 0 auto; }

    /* Gaveta "Mais" = a sidebar deslizando da esquerda */
    .jgos-app .jgos-sidebar {
        position: fixed; top: 0; left: 0; bottom: 0; width: 84%; max-width: 310px;
        z-index: 1300; transform: translateX(-100%); transition: transform .26s ease;
        border-right: 1px solid var(--jgos-border); border-bottom: 0;
        overflow-y: auto; background: var(--jgos-sidebar, #fff);
        padding-bottom: calc(16px + env(safe-area-inset-bottom));
    }
    .jgos-app.is-drawer-open .jgos-sidebar { transform: translateX(0); box-shadow: 0 0 50px rgba(0,0,0,.3); }
    .jgos-drawer-overlay {
        display: block; position: fixed; inset: 0; z-index: 1250;
        background: rgba(40,25,30,.45); opacity: 0; visibility: hidden; transition: opacity .26s;
    }
    .jgos-app.is-drawer-open .jgos-drawer-overlay { opacity: 1; visibility: visible; }

    /* Conteúdo: 1 cabeçalho só (o da própria página) + espaço embaixo pra tab bar */
    .jgos-main { padding: 14px 14px calc(82px + env(safe-area-inset-bottom)); }
    .jgos-main-header { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
    .jgos-main-title { font-size: 20px; }

    /* Barra de abas no rodapé */
    .jgos-tabbar {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1100;
        background: #fff; border-top: 1px solid var(--jgos-border);
        padding-bottom: env(safe-area-inset-bottom);
        box-shadow: 0 -2px 12px rgba(60,40,45,.06);
    }
    .jgos-tabbar .jgos-tab {
        flex: 1; background: none; border: 0; cursor: pointer; min-height: 56px;
        display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
        padding: 8px 2px 6px; color: var(--jgos-muted, #71717a); font-size: 11px; font-weight: 600;
    }
    .jgos-tabbar .jgos-tab svg { width: 22px; height: 22px; }
    .jgos-tabbar .jgos-tab.active { color: var(--jgos-primary, #d97891); }

    /* Toque */
    .jgos-btn, .jgos-input, .jgos-select, .jgos-textarea { min-height: 44px; }

    /* Modal vira folha (bottom sheet) — cabeçalho/rodapé fixos pelo flex; só o corpo rola */
    .jgos-modal-overlay { display: flex; align-items: flex-end; justify-content: center; padding: 0; }
    .jgos-modal-box {
        width: 100%; max-width: 100%; max-height: 92vh; overflow: hidden;
        border-radius: 18px 18px 0 0; animation: jgos-sheet-up .24s ease;
    }
    .jgos-modal-head { position: relative; padding: 18px 18px 12px; }
    .jgos-modal-head::before {
        content: ''; position: absolute; top: 7px; left: 50%; transform: translateX(-50%);
        width: 40px; height: 4px; border-radius: 999px; background: var(--jgos-border-strong, #d4d4d8);
    }
    .jgos-modal-body { padding: 16px 18px; }
    .jgos-modal-foot {
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); flex-wrap: wrap;
    }
    .jgos-modal-foot .jgos-btn { flex: 1; min-width: 120px; justify-content: center; }
    /* Fase 4 — iOS não dá zoom ao focar input (precisa ≥16px) */
    .jgos-input, .jgos-select, .jgos-textarea,
    .jgos-cl-searchbox input { font-size: 16px; } /* V3.3.1 — 16px evita zoom no iOS */
    /* qualquer grade de form em 1 coluna */
    .jgos-row, .jgos-row-3, .jgos-row-4 { grid-template-columns: 1fr; }

    /* Agenda no celular: empilha, esconde mini-calendário, modos roláveis */
    .jgos-ag2-body { display: block; }
    .jgos-ag2-sidebar { display: none; }
    .jgos-ag2-canvas { width: 100%; overflow-x: auto; }
    .jgos-ag2-toolbar { flex-wrap: wrap; gap: 8px; }
    .jgos-ag2-modos { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    /* enxuga a toolbar no celular: o FAB substitui o "+ Novo"; cor fica no padrão */
    #jgos-ag2-novo, .jgos-ag2-cor-sel { display: none; }
    .jgos-ag2-fab {
        display: flex; align-items: center; justify-content: center;
        position: fixed; right: 16px; bottom: calc(78px + env(safe-area-inset-bottom));
        width: 54px; height: 54px; border-radius: 50%; border: 0; cursor: pointer;
        background: var(--jgos-primary, #d97891); color: #fff; font-size: 30px; line-height: 1;
        box-shadow: 0 6px 20px rgba(217,120,145,.45); z-index: 1090;
    }

    /* V2.30.3 — Tabelas no celular: fallback rola na horizontal; .jgos-cards vira cartões */
    .jgos-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .jgos-table.jgos-cards,
    .jgos-table.jgos-cards thead,
    .jgos-table.jgos-cards tbody,
    .jgos-table.jgos-cards tr,
    .jgos-table.jgos-cards td { display: block; width: auto; }
    .jgos-table.jgos-cards { overflow: visible; }
    .jgos-table.jgos-cards thead { display: none; }
    .jgos-table.jgos-cards tbody tr {
        background: #fff; border: 1px solid var(--jgos-border); border-radius: 12px;
        padding: 10px 12px; margin-bottom: 10px; box-shadow: 0 1px 3px rgba(60,40,45,.05);
    }
    .jgos-table.jgos-cards td {
        display: flex; align-items: center; justify-content: space-between; gap: 12px;
        padding: 5px 0; border: 0 !important; text-align: right;
    }
    .jgos-table.jgos-cards td::before {
        content: attr(data-label); font-weight: 600; color: var(--jgos-muted, #71717a);
        text-align: left; font-size: 12px; flex-shrink: 0;
    }
    .jgos-table.jgos-cards td:first-child {
        display: block; text-align: left; font-size: 15px;
        padding-bottom: 8px; margin-bottom: 4px; border-bottom: 1px solid var(--jgos-border) !important;
    }
    .jgos-table.jgos-cards td:first-child::before { content: ''; }

    /* Pipeline: 1 coluna por vez (swipe horizontal com snap) */
    .jgos-kanban { scroll-snap-type: x mandatory; min-height: 0; }
    .jgos-kanban-col { flex: 0 0 86vw; scroll-snap-align: start; max-height: none; }
}

/* V2.30.5 — animação da folha (bottom-sheet) subindo */
@keyframes jgos-sheet-up { from { transform: translateY(100%); } to { transform: translateY(0); } }

/* ═══════════════ V3.47 — Disparo em massa (broadcast) ═══════════════ */
.jgos-bc-sec { margin-bottom: 14px; }
.jgos-bc-h { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--jgos-text); }
.jgos-bc-aviso { margin-bottom: 14px; background: var(--jgos-primary-l); border: 1px solid var(--jgos-primary); color: var(--jgos-primary-d); font-size: 13px; line-height: 1.5; }
.jgos-bc-muted { color: var(--jgos-muted); font-size: 12.5px; line-height: 1.5; }
.jgos-bc-muted code, .jgos-bc-h + p code { background: var(--jgos-bg-soft); padding: 1px 5px; border-radius: var(--jgos-radius-xs); font-size: 12px; }
.jgos-bc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }
.jgos-bc-chks { display: flex; flex-direction: column; gap: 6px; max-height: 160px; overflow: auto; padding: 8px; border: 1px solid var(--jgos-border); border-radius: var(--jgos-radius-sm); background: var(--jgos-bg); }
.jgos-bc-chk { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--jgos-text-soft); cursor: pointer; }
.jgos-bc-radio { display: inline-flex; align-items: center; gap: 6px; margin-right: 16px; font-size: 13.5px; cursor: pointer; }
.jgos-bc-toggle { display: inline-flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 13.5px; cursor: pointer; font-weight: 500; }
.jgos-bc-count { margin-top: 12px; padding: 10px 14px; background: var(--jgos-primary-l); border-radius: var(--jgos-radius-sm); font-size: 14px; color: var(--jgos-primary-d); }
.jgos-bc-count strong { font-size: 18px; }
.jgos-bc-segbtns { display: flex; gap: 6px; margin-top: 6px; }
.jgos-bc-testrow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.jgos-bc-preview { margin-top: 10px; padding: 12px 14px; background: #dcf8c6; border-radius: var(--jgos-radius-sm); white-space: pre-wrap; font-size: 13.5px; color: #18181b; box-shadow: var(--jgos-shadow); }
.jgos-bc-adv { margin-top: 12px; border: 1px solid var(--jgos-border); border-radius: var(--jgos-radius-sm); padding: 8px 12px; }
.jgos-bc-adv summary { cursor: pointer; font-size: 13.5px; font-weight: 500; color: var(--jgos-text-soft); }
.jgos-bc-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 8px; position: sticky; bottom: 0; background: linear-gradient(to top, var(--jgos-bg) 60%, transparent); padding: 12px 0; }
.jgos-bc-item { margin-bottom: 12px; }
.jgos-bc-itemtop { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.jgos-bc-bar { height: 8px; background: var(--jgos-bg-soft); border-radius: 99px; overflow: hidden; margin: 10px 0; }
.jgos-bc-bar-fill { height: 100%; background: var(--jgos-primary); border-radius: 99px; transition: width .4s ease; }
.jgos-bc-stats { display: flex; flex-wrap: wrap; gap: 12px; font-size: 12.5px; color: var(--jgos-text-soft); }
.jgos-bc-itemacts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.jgos-bc-det { margin-top: 10px; }
.jgos-bc-det .jgos-bc-fail { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--jgos-danger); }
.jgos-bc-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 13px; }
.jgos-bc-table th, .jgos-bc-table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--jgos-border); }
.jgos-bc-table th { color: var(--jgos-muted); font-weight: 600; font-size: 12px; }
.jgos-badge.jgos-bc-st-enviando { background: var(--jgos-info); color: #fff; }
.jgos-badge.jgos-bc-st-concluido { background: var(--jgos-success); color: #fff; }
.jgos-badge.jgos-bc-st-pausado, .jgos-badge.jgos-bc-st-agendado { background: var(--jgos-gold); color: #fff; }
.jgos-badge.jgos-bc-st-cancelado, .jgos-badge.jgos-bc-st-erro { background: var(--jgos-danger); color: #fff; }
.jgos-badge.jgos-bc-st-rascunho { background: var(--jgos-bg-soft); color: var(--jgos-text-soft); }

/* ═══════════════ V3.51 — Importar em lote ═══════════════ */
.jgos-imp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 14px; }
.jgos-imp-card { display: flex; flex-direction: column; }
.jgos-imp-emoji { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.jgos-imp-h { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--jgos-text); }
.jgos-imp-desc { margin: 0 0 14px; font-size: 13px; color: var(--jgos-text-soft); line-height: 1.5; flex: 1; }
.jgos-imp-acts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.jgos-imp-modelo { background: #fbf7ee; border: 1px solid var(--jgos-gold); color: #7a5b20; font-size: 13px; line-height: 1.5; }