/* ============================================================
   ConectaLojas Web - tema verde esmeralda + ajustes gov.br + Bootstrap
   ============================================================
   Paleta:
     --cl-primary       #047857   (esmeralda escuro)
     --cl-primary-hover #065f46   (mais escuro)
     --cl-primary-soft  #10b981   (esmeralda claro)
     --cl-accent-light  #34d399   (mint)
     --cl-bg            #f3faf7   (verde quase branco)
     --cl-row-head      #e6f4ee   (cabecalho de tabela)
   ============================================================ */

:root {
    --cl-primary:        #047857;
    --cl-primary-hover:  #065f46;
    --cl-primary-soft:   #10b981;
    --cl-accent-light:   #34d399;
    --cl-bg:             #f3faf7;
    --cl-row-head:       #e6f4ee;
    --cl-border:         #cfe6dc;

    /* Override do gov.br Design System (componentes do DS herdam dessas vars) */
    --color-primary-default:    #047857;
    --color-primary-lighten-01: #10b981;
    --color-primary-lighten-02: #34d399;
    --color-primary-darken-01:  #065f46;
    --color-primary-darken-02:  #022c22;
    --color-primary-pastel-01:  #a7f3d0;
    --color-primary-pastel-02:  #d1fae5;

    --rgb-primary-default:     4, 120, 87;
    --rgb-primary-lighten-01:  16, 185, 129;
    --rgb-primary-lighten-02:  52, 211, 153;
    --rgb-primary-darken-01:   6, 95, 70;
    --rgb-primary-darken-02:   2, 44, 34;
    --rgb-primary-pastel-01:   167, 243, 208;
    --rgb-primary-pastel-02:   209, 250, 229;

    --blue-warm-vivid-70:      #047857;
    --blue-warm-vivid-80:      #065f46;
    --blue-warm-vivid-90:      #022c22;
    --blue-warm-vivid-70-rgb:  4, 120, 87;
    --blue-warm-vivid-80-rgb:  6, 95, 70;
    --blue-warm-vivid-90-rgb:  2, 44, 34;

    --interactive:             var(--color-primary-default);
    --interactive-rgb:         var(--rgb-primary-default);
    --interactive-light:       var(--color-primary-default);
    --interactive-light-rgb:   var(--rgb-primary-default);

    --background-dark:         var(--color-primary-darken-02);
    --background-dark-rgb:     var(--rgb-primary-darken-02);
}

body {
    font-family: 'Rawline', 'Raleway', -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    background: linear-gradient(180deg, var(--cl-bg) 0%, #ffffff 200px);
}

main { min-height: calc(100vh - 200px); overflow-x: hidden; }
html, body { overflow-x: hidden; }

/* --- Menu lateral (gov.br) - overlay --- */
.br-menu .menu-panel { z-index: 1050; }
.br-menu:not(.active) .menu-panel,
.br-menu:not(.active) .menu-scrim {
    display: none !important;
    pointer-events: none !important;
}
.br-menu .menu-header,
.br-menu .menu-item:hover { color: var(--cl-primary); }
.br-cookiebar { display: none !important; }

/* --- Header --- */
.br-header .header-title { font-weight: 600; }
.br-header .header-sign  { color: var(--cl-primary); font-weight: 600; }
/* Borda inferior do header — UMA única linha gradient verde.
   Suprime QUALQUER outro separator/shadow/border que o gov-br possa
   adicionar (interno entre header-top/header-bottom, no estado sticky,
   em pseudo-elementos), evitando aparência de "duas linhas" entre o
   header e o corpo da página. */
.br-header {
    border-bottom: 3px solid !important;
    border-image: linear-gradient(90deg, var(--cl-primary) 0%, var(--cl-accent-light) 100%) 1 !important;
    box-shadow: none !important;
}
.br-header[data-sticky],
.br-header.is-fixed,
.br-header.is-sticky {
    box-shadow: none !important;
}
.br-header .header-top,
.br-header .header-bottom,
.br-header .container-lg {
    border-top: 0 !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}
.br-header::before,
.br-header::after,
.br-header .header-top::before,
.br-header .header-top::after,
.br-header .header-bottom::before,
.br-header .header-bottom::after {
    border: 0 !important;
    box-shadow: none !important;
}
/* Drawer/menu também não deve adicionar borda no topo */
.br-menu { border-top: 0 !important; }

/* --- Tabelas --- */
.table thead th {
    background-color: var(--cl-row-head);
    color: var(--cl-primary);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 2px solid var(--cl-primary);
}

/* --- Cards --- */
.card {
    border: 1px solid var(--cl-border);
    border-radius: 6px;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.06);
}
.card .card-header {
    background-color: var(--cl-row-head);
    color: var(--cl-primary);
    font-weight: 600;
    border-bottom: 1px solid var(--cl-border);
}

/* --- Botoes --- */
.btn-primary {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    border-color: var(--cl-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: linear-gradient(135deg, var(--cl-primary-hover) 0%, var(--cl-primary) 100%) !important;
    border-color: var(--cl-primary-hover) !important;
    color: #fff !important;
}
.btn-outline-primary {
    color: var(--cl-primary);
    border-color: var(--cl-primary);
}
.btn-outline-primary:hover, .btn-outline-primary:focus {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary);
    color: #fff;
}
.btn-success {
    background-color: var(--cl-primary-soft);
    border-color: var(--cl-primary-soft);
}
.btn-success:hover, .btn-success:focus {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary);
}

/* --- Utilitarios Bootstrap remapeados --- */
.text-primary { color: var(--cl-primary) !important; }
.bg-primary   { background-color: var(--cl-primary) !important; }
.bg-success   { background-color: var(--cl-primary-soft) !important; }
.text-bg-primary { background-color: var(--cl-primary) !important; color: #fff !important; }
.text-bg-success { background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%) !important; color: #fff !important; }
.badge.bg-primary { background-color: var(--cl-primary) !important; }
.badge.bg-success { background-color: var(--cl-primary-soft) !important; }

a { color: var(--cl-primary); }
a:hover { color: var(--cl-primary-hover); }

.form-control:focus, .form-select:focus {
    border-color: var(--cl-primary-soft);
    box-shadow: 0 0 0 .2rem rgba(16, 185, 129, .15);
}

.progress-bar {
    background: linear-gradient(90deg, var(--cl-primary) 0%, var(--cl-accent-light) 100%);
}

.required-field::after { content: " *"; color: #dc3545; }

/* ============================================================
   br-message (gov.br) - blindagem contra mensagens longas
   ------------------------------------------------------------
   Quebra qualquer string sem espacos (URLs, stack traces) para
   nao estourar o container, e limita altura com scroll suave
   caso a mensagem seja realmente enorme.
   ============================================================ */
.br-message {
    margin-bottom: 1rem;
    max-width: 100%;
    box-sizing: border-box;
    word-break: break-word;
    overflow-wrap: anywhere;
}
.br-message > .content,
.br-message > .content * {
    min-width: 0;
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
}
.br-message > .content {
    flex: 1 1 auto;
    max-height: 8.5rem;       /* ~5 linhas */
    overflow-y: auto;          /* se ainda assim for muito grande, rola */
    line-height: 1.35;
}
.br-message > .icon {
    flex: 0 0 auto;            /* icone nao deforma */
}

@media (min-width: 1400px) { .container-lg { max-width: 1320px; } }

/* ============================================================
   Drawer lateral
   ============================================================ */
.br-menu .cl-drawer,
.br-menu.active .menu-panel.cl-drawer {
    flex: 0 0 280px !important;
    width: 280px !important;
    max-width: 85vw !important;
    min-width: 0 !important;
    background: #f7f8fa !important;
    overflow-y: auto !important;
    padding: 0 !important;
    box-shadow: 4px 0 16px rgba(0, 0, 0, 0.12) !important;
    height: 100vh !important;
    max-height: 100vh !important;
}
.br-menu.active .menu-container { background: transparent; }
.br-menu.active .menu-scrim {
    flex: 1 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    cursor: pointer;
}
.cl-drawer .menu-header,
.cl-drawer .menu-footer:not(.cl-drawer-footer) { display: none !important; }

/* Cabecalho do drawer */
.cl-drawer-header {
    position: relative;
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-accent-light) 100%);
    color: #ffffff;
    padding: 1.25rem 1rem 1rem;
    text-align: center;
}
.cl-drawer-close {
    position: absolute;
    top: 0.5rem; right: 0.5rem;
    background: rgba(255,255,255,0.18);
    border: 0;
    color: #fff;
    width: 28px; height: 28px;
    font-size: 0.75rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-drawer-close:hover { background: rgba(255,255,255,0.32); }

.cl-avatar {
    width: 56px; height: 56px;
    margin: 0 auto 0.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,0.22);
    border: 2px solid rgba(255,255,255,0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}
.cl-avatar-letter {
    font-size: 1.5rem;
    font-weight: 600;
    color: #ffffff;
    width: 100%; height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.cl-user-name {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 0.1rem;
    line-height: 1.2;
}
.cl-user-email {
    font-size: 0.7rem;
    opacity: 0.85;
    margin-bottom: 0.4rem;
    word-break: break-all;
    line-height: 1.2;
}
.cl-user-badge {
    display: inline-block;
    background: rgba(255,255,255,0.22);
    border: 1px solid rgba(255,255,255,0.3);
    border-radius: 9999px;
    padding: 0.1rem 0.65rem;
    font-size: 0.62rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

/* Corpo do drawer / secoes */
.cl-drawer-body { padding: 0 !important; margin: 0 !important; }
.cl-section { margin-top: 1.4rem; }
.cl-section:first-of-type { margin-top: 0.85rem; }
.cl-section-title {
    text-transform: uppercase;
    font-size: 0.62rem;
    font-weight: 700;
    color: #9ca3af;
    padding: 0 0.85rem 0.45rem;
    letter-spacing: 0.08em;
}

.cl-drawer .cl-menu-item {
    background: #ffffff !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 0.7rem 0.85rem 0.7rem 1.5rem !important;
    text-decoration: none !important;
    color: #374151 !important;
    border-top: 1px solid #eef0f3 !important;
    font-size: 0.84rem !important;
    line-height: 1.2 !important;
    transition: background 0.12s, color 0.12s;
    cursor: pointer;
    margin: 0 !important;
}
.cl-section .cl-menu-item:first-child { border-top: none !important; }
.cl-drawer .cl-menu-item:hover {
    background: #f3faf7 !important;
    color: var(--cl-primary) !important;
}
.cl-drawer .cl-menu-item.cl-menu-item-feature {
    background: #ffffff !important;
    margin: 0.5rem 0.65rem !important;
    border-radius: 8px !important;
    border: 1px solid var(--cl-border) !important;
    box-shadow: 0 1px 2px rgba(4,120,87,0.05) !important;
    padding: 0.75rem 0.85rem !important;
}
.cl-drawer .cl-menu-item.cl-menu-item-feature:hover {
    border-color: var(--cl-primary-soft) !important;
    background: var(--cl-row-head) !important;
}
.cl-drawer .cl-menu-item-danger:hover {
    color: #dc3545 !important;
    background: #fef2f2 !important;
}

.cl-icon {
    width: 22px;
    text-align: center;
    color: var(--cl-primary);
    margin-right: 0.65rem;
    font-size: 0.85rem;
}
.cl-content { flex: 1; font-weight: 500; }
.cl-chevron { color: #cbd5e1; font-size: 0.65rem; }
.cl-drawer-footer {
    text-align: center;
    color: #9ca3af;
    font-size: 0.65rem;
    padding: 1rem 0.85rem 1.25rem;
    margin-top: 0.5rem;
}

/* Header logo clicavel.
   O gov.br design system aplica background/shadow no hover de qualquer <a>
   do header. Forçamos remocao com seletor de alta especificidade (body...)
   e cobrimos pseudo-elementos que algumas versoes do DS usam pra "destacar". */
body .br-header a.header-logo,
body .br-header .header-top a.header-logo {
    display: flex;
    align-items: center;
    transition: opacity 0.15s ease;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    border: none !important;
}
body .br-header a.header-logo:hover,
body .br-header a.header-logo:focus,
body .br-header a.header-logo:active,
body .br-header a.header-logo:focus-visible,
body .br-header .header-top a.header-logo:hover,
body .br-header .header-top a.header-logo:focus,
body .br-header .header-top a.header-logo:active,
body .br-header .header-top a.header-logo:focus-visible {
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    opacity: 0.75;
}
body .br-header a.header-logo::before,
body .br-header a.header-logo::after,
body .br-header a.header-logo:hover::before,
body .br-header a.header-logo:hover::after {
    display: none !important;
    background: transparent !important;
}

/* ============================================================
   Dashboard - KPIs e atalhos
   ============================================================ */
.cl-kpi {
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    color: white;
}
.cl-kpi:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0,0,0,0.12);
}
.cl-kpi .card-body { padding: 1.1rem 1.25rem; }
.cl-kpi-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
}
.cl-kpi-icon { font-size: 1.4rem; opacity: 0.55; }
.cl-kpi-value {
    font-size: 2.4rem;
    font-weight: 700;
    line-height: 1.1;
    margin: 0.25rem 0 0.4rem;
}
.cl-kpi-value-money {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0.25rem 0 0.4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-kpi-sub { font-size: 0.78rem; opacity: 0.85; }

.cl-kpi-primary { background: linear-gradient(135deg, #047857 0%, #10b981 100%); }
.cl-kpi-success { background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%); }
.cl-kpi-warning { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); }
.cl-kpi-info    { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%); }
.cl-kpi-pink    { background: linear-gradient(135deg, #be185d 0%, #f472b6 100%); }

/* Atalhos rapidos */
.cl-quick-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    text-decoration: none;
    padding: 0.85rem 0.5rem;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 10px;
    color: var(--cl-primary, #047857);
    background: white;
    transition: all 0.15s ease;
    height: 100%;
    min-height: 95px;
}
.cl-quick-action:hover {
    transform: translateY(-2px);
    border-color: var(--cl-primary-soft, #10b981);
    box-shadow: 0 4px 12px rgba(4,120,87,0.10);
    color: var(--cl-primary, #047857);
}
.cl-qa-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 0.4rem;
}
.cl-qa-label {
    font-size: 0.83rem;
    font-weight: 600;
    color: #374151;
    line-height: 1.2;
}
.cl-quick-action:hover .cl-qa-label { color: var(--cl-primary, #047857); }

/* ============================================================
   Dashboard estilo aplicativo
   ------------------------------------------------------------
   Saudacao + seletor de periodo + secoes de stat-cards
   inspiradas no layout do app mobile.
   ============================================================ */

.cl-dash-greet {
    padding: 1rem 0 0.75rem;
}
.cl-dash-greet-time {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0 0 0.15rem;
}
.cl-dash-greet-name {
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--cl-primary);
    margin: 0 0 0.25rem;
    line-height: 1.2;
}
.cl-dash-greet-sub {
    font-size: 0.9rem;
    color: #6b7280;
    margin: 0;
}

/* ----- Seletor de periodo (chips) ----- */
.cl-dash-period {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    -webkit-overflow-scrolling: touch;
}
.cl-dash-period::-webkit-scrollbar { height: 4px; }
.cl-dash-period::-webkit-scrollbar-thumb { background: var(--cl-border); border-radius: 2px; }

.cl-dash-period-btn {
    flex: 0 0 auto;
    padding: 0.4rem 0.85rem;
    border-radius: 9999px;
    background: #ffffff;
    border: 1px solid var(--cl-border);
    color: #374151;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.cl-dash-period-btn:hover {
    border-color: var(--cl-primary-soft);
    color: var(--cl-primary);
    background: var(--cl-row-head);
}
.cl-dash-period-btn.active {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    color: #ffffff;
    border-color: var(--cl-primary);
}
.cl-dash-period-btn.active:hover { color: #ffffff; }

/* ----- Titulo de secao ----- */
.cl-dash-section {
    font-size: 0.78rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 1.25rem 0 0.6rem;
    display: flex;
    align-items: center;
}
.cl-dash-section i { color: var(--cl-primary); }

/* ----- Grid de stat cards ----- */
.cl-dash-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.7rem;
}

/* ----- Card de stat (icone pastel + valor + label) ----- */
.cl-dash-stat {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    min-height: 72px;
    cursor: pointer;
}
.cl-dash-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.10);
    border-color: var(--cl-primary-soft);
    color: #374151;
}
.cl-dash-stat.featured {
    background: linear-gradient(135deg, #ffffff 0%, #fff8e6 100%);
    border-color: #fde68a;
}
.cl-dash-stat-icon {
    flex: 0 0 auto;
    width: 42px; height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.cl-dash-stat-info {
    flex: 1 1 auto;
    min-width: 0;
}
.cl-dash-stat-value {
    font-size: 1.55rem;
    font-weight: 700;
    color: #111827;
    line-height: 1;
    margin-bottom: 0.15rem;
}
.cl-dash-stat-value-money {
    font-size: 1.1rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.1;
    margin-bottom: 0.15rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-dash-stat-label {
    font-size: 0.78rem;
    color: #6b7280;
    font-weight: 500;
}

/* ============================================================
   Barra de filtros com chips (reutilizavel em listagens)
   ============================================================ */
.cl-filtros-bar {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    padding: 0.85rem 1rem;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.05);
}
.cl-filtros-grupo {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.25rem 0;
}
.cl-filtros-grupo + .cl-filtros-grupo {
    border-top: 1px dashed #e5e7eb;
    margin-top: 0.4rem;
    padding-top: 0.65rem;
}
.cl-filtros-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-right: 0.4rem;
    min-width: 64px;
}

.cl-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.32rem 0.85rem;
    border-radius: 9999px;
    background: #f7fafc;
    border: 1px solid #d1d5db;
    color: #374151;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease;
    white-space: nowrap;
    cursor: pointer;
}
.cl-chip:hover {
    background: var(--cl-row-head);
    border-color: var(--cl-primary-soft);
    color: var(--cl-primary);
}
.cl-chip.active {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    border-color: var(--cl-primary);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.20);
}
.cl-chip.active:hover { color: #ffffff; }

.cl-chip-count {
    margin-left: 0.4rem;
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(4, 120, 87, 0.10);
    color: var(--cl-primary);
    padding: 0 0.4rem;
    border-radius: 9999px;
    min-width: 1.25rem;
    text-align: center;
}
.cl-chip.active .cl-chip-count {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* ============================================================
   Orbs (bolas circulares)
   ============================================================ */

.cl-orbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1.25rem 1.5rem;
    padding: 0.75rem 0;
}

.cl-orb {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: #374151;
    width: 140px;
    flex: 0 0 auto;
    transition: transform 0.2s ease;
    cursor: pointer;
}
.cl-orb:hover { transform: translateY(-3px); }

.cl-orb-circle {
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 3px solid var(--cl-primary-soft);
    background: #ffffff;
    padding: 6px;
    box-sizing: border-box;
    display: block;
    box-shadow: 0 2px 10px rgba(4, 120, 87, 0.10);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.cl-orb:hover .cl-orb-circle {
    border-color: var(--cl-primary);
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.20);
}

.cl-orb-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.5rem;
    box-sizing: border-box;
}
.cl-orb-ico {
    font-size: 1.4rem;
    line-height: 1;
    margin-bottom: 0.35rem;
    opacity: 0.85;
}
.cl-orb-num {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1;
    color: #111827;
}
.cl-orb-num-money {
    font-size: 1rem;
    line-height: 1.1;
    word-break: break-all;
    max-width: 100%;
    padding: 0 0.25rem;
}

.cl-orb-label {
    margin-top: 0.7rem;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #374151;
    text-align: center;
    max-width: 140px;
    line-height: 1.25;
}
.cl-orb:hover .cl-orb-label { color: var(--cl-primary); }

.cl-orb.featured .cl-orb-circle {
    border-color: var(--cl-primary);
    border-width: 4px;
    box-shadow: 0 4px 16px rgba(4, 120, 87, 0.18);
}
.cl-orb.featured .cl-orb-num {
    color: var(--cl-primary-hover);
}

@media (max-width: 480px) {
    .cl-orbs { gap: 1rem; justify-content: center; }
    .cl-orb { width: 110px; }
    .cl-orb-circle { width: 100px; height: 100px; }
    .cl-orb-ico { font-size: 1.1rem; margin-bottom: 0.2rem; }
    .cl-orb-num { font-size: 1.5rem; }
    .cl-orb-num-money { font-size: 0.85rem; }
    .cl-orb-label { font-size: 0.7rem; max-width: 110px; }
}

/* ----- Acoes rapidas (linha horizontal de atalhos) ----- */
.cl-dash-quick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 0.6rem;
}
.cl-dash-quick-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0.85rem 0.5rem;
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    text-decoration: none;
    color: #374151;
    transition: all 0.15s ease;
    min-height: 95px;
    justify-content: center;
}
.cl-dash-quick-item:hover {
    transform: translateY(-2px);
    border-color: var(--cl-primary-soft);
    box-shadow: 0 4px 12px rgba(4,120,87,0.10);
    color: var(--cl-primary);
}
.cl-dash-quick-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    margin-bottom: 0.4rem;
}
.cl-dash-quick-label {
    font-size: 0.82rem;
    font-weight: 600;
    line-height: 1.2;
}

/* ============================================================
   Indicador de status da API (footer)
   ============================================================ */
.cl-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.25rem 0.65rem;
    border-radius: 9999px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    margin-bottom: 0.75rem;
}
.cl-status-badge.online {
    background: #d1fae5;
    color: #065f46;
    border-color: #a7f3d0;
}
.cl-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #ef4444;
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.5);
    animation: cl-pulse-red 1.6s infinite;
}
.cl-status-badge.online .cl-status-dot {
    background: #10b981;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.5);
    animation: cl-pulse-green 2.4s infinite;
}
@keyframes cl-pulse-green {
    0%   { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(16, 185, 129, 0); }
    100% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0); }
}
@keyframes cl-pulse-red {
    0%   { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(239, 68, 68, 0); }
    100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
}

/* ============================================================
   Paginacao (estilo gov.br/esmeralda)
   ============================================================ */
.pagination .page-link {
    color: var(--cl-primary);
    border-color: var(--cl-border);
}
.pagination .page-link:hover {
    background-color: var(--cl-row-head);
    color: var(--cl-primary-hover);
    border-color: var(--cl-primary-soft);
}
.pagination .page-item.active .page-link {
    background-color: var(--cl-primary);
    border-color: var(--cl-primary);
    color: #fff;
}
.pagination .page-item.disabled .page-link {
    color: #9ca3af;
}

/* ============================================================
   Listagem de produtos - thumbnails, tags, estoque
   ============================================================ */
.cl-prod-thumb {
    width: 52px;
    height: 52px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--cl-border);
    background: #fff;
    display: block;
}
.cl-prod-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    color: var(--cl-primary);
    font-size: 1.1rem;
    border: 1px dashed var(--cl-primary-soft);
}
.cl-prod-tag {
    display: inline-block;
    padding: 0.05rem 0.5rem;
    background: var(--cl-row-head);
    color: var(--cl-primary);
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Badge de estoque com cores conforme volume */
.cl-est-badge {
    display: inline-block;
    min-width: 2.4rem;
    padding: 0.18rem 0.55rem;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 8px;
    background: #d1fae5;
    color: #047857;
    border: 1px solid #a7f3d0;
}
.cl-est-badge.low {
    background: #fef3c7;
    color: #92400e;
    border-color: #fde68a;
}
.cl-est-badge.empty {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}

/* Hover de linha mais elegante */
.table-hover tbody tr:hover {
    background-color: #f9fafb !important;
}

/* ============================================================
   Cards de categoria (grid)
   ============================================================ */
.cl-cat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}
.cl-cat-card {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    position: relative;
    overflow: hidden;
}
.cl-cat-card::before {
    content: '';
    position: absolute;
    inset: 0 auto 0 0;
    width: 4px;
    background: linear-gradient(180deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
}
.cl-cat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.10);
    border-color: var(--cl-primary-soft);
}
.cl-cat-card.inactive {
    opacity: 0.6;
}
.cl-cat-card.inactive::before {
    background: #cbd5e1;
}

.cl-cat-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--cl-row-head);
    color: var(--cl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}
.cl-cat-card-body {
    flex: 1 1 auto;
    min-width: 0;
}
.cl-cat-card-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 0.2rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-cat-card-desc {
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-bottom: 0.45rem;
    min-height: 2rem;
}
.cl-cat-card-status {
    display: flex;
    align-items: center;
}
.cl-cat-card-actions {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    align-items: flex-end;
}

/* ============================================================
   Polish geral - cards, tabelas, botoes
   ============================================================ */
.card {
    border-radius: 10px;
    box-shadow: 0 1px 2px rgba(4, 120, 87, 0.04);
}
.card .card-header {
    border-radius: 10px 10px 0 0 !important;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
}
.card .card-footer {
    border-radius: 0 0 10px 10px !important;
    background: #fafafa;
}

/* Botoes mais arredondados */
.btn { border-radius: 8px; }
.btn-sm { border-radius: 6px; }

/* Inputs com leve preenchimento */
.form-control, .form-select {
    border-radius: 8px;
}
.form-control:focus, .form-select:focus {
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .15);
}

/* Badges um pouco mais finos */
.badge {
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 0.32em 0.6em;
    border-radius: 6px;
}

/* Cabecalho de pagina (h4 com icone) - espacamento padrao */
.cl-page-header {
    padding-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}

/* ============================================================
   Cards de pessoa (funcionarios, clientes, entregadores)
   ============================================================ */
.cl-people-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1rem;
}
.cl-people-card {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    padding: 1rem 1.1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cl-people-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(4, 120, 87, 0.10);
    border-color: var(--cl-primary-soft);
}
.cl-people-card.inactive { opacity: 0.65; }

.cl-people-head {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}
.cl-avatar {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.1rem;
    text-transform: uppercase;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.15);
}
.cl-avatar.large { width: 64px; height: 64px; font-size: 1.45rem; }

.cl-people-name {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-people-meta {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cl-people-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}
.cl-people-tag {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 0.15rem 0.55rem;
    border-radius: 9999px;
    background: var(--cl-row-head);
    color: var(--cl-primary);
    border: 1px solid var(--cl-border);
}

.cl-people-stats {
    display: flex;
    gap: 1rem;
    padding: 0.6rem 0;
    border-top: 1px solid #f3f4f6;
    border-bottom: 1px solid #f3f4f6;
}
.cl-people-stat {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    flex: 1 1 0;
    min-width: 0;
}
.cl-people-stat strong {
    color: var(--cl-primary);
    font-size: 1.05rem;
    font-weight: 700;
}
.cl-people-stat span {
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.cl-people-actions {
    display: flex;
    gap: 0.3rem;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* ============================================================
   Header avatar (botao do menu do usuario)
   ============================================================ */
.cl-header-avatar-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.25rem 0.75rem 0.25rem 0.25rem;
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 9999px;
    cursor: pointer;
    transition: all 0.15s ease;
    /* line-height: 1 evita que o ascender da fonte do texto desloque
       o baseline do flex container, fazendo o avatar parecer mais alto. */
    line-height: 1;
}
.cl-header-avatar-btn:hover {
    border-color: var(--cl-primary-soft);
    background: var(--cl-row-head);
    box-shadow: 0 2px 6px rgba(4, 120, 87, 0.10);
}
.cl-header-avatar-btn .cl-avatar {
    width: 36px;
    height: 36px;
    font-size: 0.95rem;
    align-self: center;        /* reforço explícito */
    flex-shrink: 0;
    /* Pequeno deslocamento óptico pra baixo: o centro geométrico do
       círculo aparenta estar acima do centro do texto ao lado por causa
       da diferença de pesos visuais (avatar é uniforme; texto tem nome
       grande no topo + role pequeno embaixo). 2px compensa essa
       percepção sem causar desalinhamento real. */
    margin-top: 2px;
}
.cl-header-user-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;   /* centra verticalmente as 2 linhas */
    line-height: 1.15;
    align-self: center;        /* alinha o bloco inteiro com o avatar */
    min-height: 36px;          /* mesma altura do avatar — evita drift */
}
.cl-header-user-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: #111827;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.2;
}
.cl-header-user-role {
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--cl-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.2;
    margin-top: 1px;
}
/* Chevron do dropdown — alinha com o centro vertical da pílula */
.cl-header-avatar-btn .fa-chevron-down {
    align-self: center;
}

.cl-header-dropdown {
    min-width: 280px;
    border-radius: 12px;
    border: 1px solid var(--cl-border);
    overflow: hidden;
    padding: 0;
}
.cl-header-dropdown-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem;
    background: linear-gradient(135deg, var(--cl-row-head) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--cl-border);
}
.cl-header-dropdown-head .cl-avatar {
    width: 48px; height: 48px;
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cl-header-dropdown-name {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.cl-header-dropdown-email {
    font-size: 0.75rem;
    color: #6b7280;
    line-height: 1.2;
    margin-top: 0.1rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 180px;
}
.cl-header-dropdown-badge {
    display: inline-block;
    margin-top: 0.35rem;
    padding: 0.1rem 0.5rem;
    background: var(--cl-primary);
    color: #ffffff;
    border-radius: 9999px;
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.cl-header-dropdown .dropdown-item {
    padding: 0.65rem 1rem;
    font-size: 0.85rem;
    transition: background 0.12s;
}
.cl-header-dropdown .dropdown-item:hover {
    background: var(--cl-row-head);
}
.cl-header-dropdown .dropdown-item.text-danger:hover {
    background: #fef2f2;
    color: #b91c1c !important;
}

/* ============================================================
   Chat - layout principal (lista + conversa) + bolhas
   ============================================================ */
.cl-chat-shell {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1rem;
    min-height: calc(100vh - 240px);
    height: calc(100vh - 240px);
}
@media (max-width: 768px) {
    .cl-chat-shell { grid-template-columns: 1fr; height: auto; }
}

/* Coluna lateral - lista */
.cl-chat-list-col {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.cl-chat-list-header {
    padding: 0.85rem 1rem;
    background: var(--cl-row-head);
    border-bottom: 1px solid var(--cl-border);
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--cl-primary);
    display: flex;
    align-items: center;
}
.cl-chat-list {
    flex: 1 1 auto;
    overflow-y: auto;
}
.cl-chat-list-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.85rem;
    text-decoration: none;
    color: #374151;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.cl-chat-list-item:hover {
    background: #f9fafb;
    color: #374151;
}
.cl-chat-list-item.active {
    background: linear-gradient(90deg, var(--cl-row-head) 0%, transparent 100%);
    border-left: 3px solid var(--cl-primary);
    padding-left: calc(0.85rem - 3px);
}
.cl-chat-list-item .cl-avatar {
    width: 40px; height: 40px;
    font-size: 0.95rem;
    flex-shrink: 0;
}
.cl-chat-list-info { flex: 1; min-width: 0; }
.cl-chat-list-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #111827;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-chat-list-prev {
    font-size: 0.75rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: 0.1rem;
}
.cl-chat-list-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
}
.cl-chat-list-time {
    font-size: 0.65rem;
    color: #9ca3af;
}
.cl-chat-list-unread {
    background: var(--cl-primary);
    color: #fff;
    border-radius: 9999px;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.45rem;
    min-width: 1.1rem;
    text-align: center;
}

/* Coluna principal - conversa */
.cl-chat-main {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.cl-chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--cl-border);
    background: linear-gradient(180deg, #fafafa, #ffffff);
}
.cl-chat-header .cl-avatar {
    width: 40px; height: 40px;
    background: linear-gradient(135deg, #6b7280, #9ca3af);
    font-size: 0.9rem;
}
.cl-chat-header-name {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
}
.cl-chat-header-status {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.72rem;
    color: #6b7280;
}
.cl-chat-online-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #10b981;
    box-shadow: 0 0 0 2px rgba(16,185,129,0.20);
}

.cl-chat-msgs {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 1.25rem 1rem;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 39px, #f9fafb 39px, #f9fafb 40px),
        #fdfdfd;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cl-chat-empty {
    text-align: center;
    color: #9ca3af;
    margin: auto;
    padding: 2rem;
}
.cl-chat-empty i {
    font-size: 2.5rem;
    margin-bottom: 0.5rem;
    opacity: 0.5;
}

.cl-chat-row {
    display: flex;
    align-items: flex-end;
    gap: 0.4rem;
}
.cl-chat-row.mine { justify-content: flex-end; }
.cl-chat-row.theirs { justify-content: flex-start; }
.cl-avatar-sm {
    width: 28px !important;
    height: 28px !important;
    font-size: 0.7rem !important;
}
.cl-avatar-spacer { width: 28px; flex-shrink: 0; }

.cl-chat-bubble {
    max-width: 70%;
    padding: 0.55rem 0.85rem 0.4rem;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.cl-chat-bubble.mine {
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    color: #ffffff;
    border-bottom-right-radius: 4px;
}
.cl-chat-bubble.theirs {
    background: #ffffff;
    color: #374151;
    border: 1px solid var(--cl-border);
    border-bottom-left-radius: 4px;
}
.cl-chat-bubble-text {
    font-size: 0.88rem;
    line-height: 1.4;
    white-space: pre-wrap;
}
.cl-chat-bubble-time {
    font-size: 0.65rem;
    opacity: 0.75;
    text-align: right;
    margin-top: 0.2rem;
}
.cl-chat-bubble.theirs .cl-chat-bubble-time { color: #9ca3af; }

.cl-chat-form {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    background: #fafafa;
    border-top: 1px solid var(--cl-border);
}
.cl-chat-input {
    flex: 1;
    padding: 0.65rem 1rem;
    border: 1px solid var(--cl-border);
    border-radius: 9999px;
    font-size: 0.88rem;
    background: #ffffff;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.cl-chat-input:focus {
    outline: none;
    border-color: var(--cl-primary-soft);
    box-shadow: 0 0 0 3px rgba(16,185,129,0.15);
}
.cl-chat-send {
    background: linear-gradient(135deg, var(--cl-primary), var(--cl-primary-soft));
    border: 0;
    color: #fff;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 8px rgba(4,120,87,0.25);
}
.cl-chat-send:hover {
    transform: translateY(-1px) scale(1.04);
    box-shadow: 0 4px 14px rgba(4,120,87,0.35);
}

/* ============================================================
   Orcamento detalhe - itens em linha compacta com stepper
   ============================================================ */
.cl-orc-items {
    padding: 0.25rem 0.4rem;
}
.cl-orc-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.45rem 0.7rem;
    border-bottom: 1px solid #f3f4f6;
    transition: background 0.12s;
}
.cl-orc-item:last-child { border-bottom: none; }
.cl-orc-item:hover { background: #fafafa; }

.cl-orc-item-img {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
}
.cl-orc-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid var(--cl-border);
    display: block;
}
.cl-orc-item-img-empty {
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
    color: var(--cl-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    border: 1px dashed var(--cl-primary-soft);
}

.cl-orc-item-info {
    flex: 1 1 auto;
    min-width: 0;
}
.cl-orc-item-name {
    font-weight: 600;
    font-size: 0.88rem;
    color: #111827;
    line-height: 1.2;
    margin-bottom: 0.1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-orc-item-meta {
    /* Grid com 3 colunas: as 2 primeiras compactas (modalidade + estoque)
       pra liberar espaço pra coluna auto (preço unitário + badge desc/acrésc).
       Antes era 110px + 90px = 200px reservados pra badges leves; reduzido
       pra 80px + 68px = 148px (economia de ~50px) — assim o input de preço
       maior (R$ até 9.999.999,99) + badge +28% caem na linha sem cortar. */
    display: grid;
    grid-template-columns: 80px 68px auto;
    column-gap: 0.6rem;
    row-gap: 0.25rem;
    font-size: 0.72rem;
    color: #6b7280;
    align-items: center;
}
.cl-orc-meta-col {
    min-width: 0;
    display: flex;
    align-items: center;
}
.cl-orc-meta-col:empty { visibility: hidden; }   /* slot vazio nao quebra grid */
/* Em telas estreitas, deixa a meta empilhar livremente */
@media (max-width: 600px) {
    .cl-orc-item-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}
.cl-orc-item-unit { color: #9ca3af; }

/* Preco unitario editavel inline (form compacto na linha do item).
   Visualmente parece um span de texto ate o lojista clicar — input
   sem borda exceto no foco, sem spinners, alinhado com o resto do meta. */
.cl-orc-preco-form {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    margin: 0;                   /* espacamento vem do grid da meta */
    color: #6b7280;
}
/* Badge de desconto (verde) / acrescimo (laranja) aplicado ao precoUnitario.
   Compara o preco atual com o precoOriginal salvo no item. */
.cl-orc-preco-diff {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4rem;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: help;
}
.cl-orc-preco-diff-desconto {
    background: #d1fae5;
    color: #047857;
}
.cl-orc-preco-diff-acrescimo {
    background: #fee2e2;
    color: #b91c1c;
}

/* Memoria de calculo do campo Desconto auto-calculado.
   Lista item a item com (original - atual) x qtd = total. */
.cl-orc-desc-breakdown {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 11px;
    line-height: 1.5;
}
.cl-orc-desc-breakdown-titulo {
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 3px;
    font-size: 10.5px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.cl-orc-desc-breakdown-linha {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: baseline;
    padding: 2px 0;
    border-top: 1px dashed #e5e7eb;
}
.cl-orc-desc-breakdown-linha:first-of-type { border-top: 0; }
.cl-orc-desc-breakdown-nome {
    flex: 1 1 auto;
    color: #374151;
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cl-orc-desc-breakdown-formula {
    color: #9ca3af;
    font-family: monospace;
    font-size: 10.5px;
    flex-shrink: 0;
}
.cl-orc-desc-breakdown-valor {
    font-weight: 700;
    flex-shrink: 0;
}
.cl-orc-desc-breakdown-valor.positivo { color: #047857; }
.cl-orc-desc-breakdown-valor.negativo { color: #b91c1c; }
.cl-orc-preco-prefix,
.cl-orc-preco-suffix {
    color: #9ca3af;
    font-size: 0.74rem;
    line-height: 1;
}
.cl-orc-preco-input {
    /* Largura calibrada pra acomodar valores até ~R$ 9.999.999,99 sem
       cortar o texto. Antes era 64px e cortava qualquer valor acima
       de ~R$ 999,99 (input type=number usa "." como separador decimal,
       não formata vírgula/ponto de milhar, então valor alto = string longa). */
    width: 110px;
    border: 1px dashed #cbd5e1;       /* dashed visivel — indica "editavel" */
    background: #fffbf0;              /* fundo amarelinho sutil — destaca como input */
    color: #047857;
    font-weight: 600;
    font-size: 0.78rem;
    text-align: right;
    padding: 0.05rem 0.3rem;
    border-radius: 4px;
    outline: none;
    cursor: text;
    -moz-appearance: textfield;        /* esconde spinners no Firefox */
    transition: background 0.12s, border-color 0.12s;
}
.cl-orc-preco-input::-webkit-outer-spin-button,
.cl-orc-preco-input::-webkit-inner-spin-button {
    -webkit-appearance: none;          /* esconde spinners no Chrome/Safari */
    margin: 0;
}
.cl-orc-preco-input:hover {
    border-color: #10b981;
    background: #ecfdf5;
}
.cl-orc-preco-input:focus {
    border-color: #10b981;
    background: #ffffff;
    border-style: solid;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15);
}
.cl-orc-item-estoque {
    color: #047857;
    background: #d1fae5;
    padding: 0.05rem 0.4rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 600;
}

/* Hint compacto abaixo de inputs (validade / devolucao em colunas estreitas) */
.cl-orc-hint {
    margin-top: 0.25rem;
    font-size: 0.68rem;
    color: #6b7280;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-orc-hint i { font-size: 0.7rem; }

/* Linha de meta-info abaixo do nome no balanco
   (badge de modalidade + codigo de barras juntos numa linha so) */
.cl-bal-meta-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.15rem;
}
.cl-bal-meta-row .cl-bal-cod {
    margin: 0;
}

/* Badge de modalidade do produto (venda / locacao / misto)
   Usado em balanco e orcamento ao lado do nome do produto. */
.cl-modalidade {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
    border: 1px solid transparent;
    white-space: nowrap;
}
.cl-modalidade i { font-size: 0.7rem; }
.cl-modalidade-venda {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
.cl-modalidade-locacao {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.cl-modalidade-misto {
    background: linear-gradient(90deg, #dbeafe 0%, #fef3c7 100%);
    color: #5b21b6;
    border-color: #c4b5fd;
}

/* Stepper - / N / + */
/* Stepper de quantidade — largura FIXA pra alinhamento entre linhas:
   editavel ([- N +]) ≈ 100px e read-only (so' o numero) tambem ocupa
   100px com o valor centralizado. Sem isso, quando o orcamento entra
   em status read-only, a coluna encolhe e desalinha as colunas seguintes
   (preco/acoes) entre os itens. */
.cl-orc-qtd-stepper {
    flex: 0 0 100px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cl-orc-qtd-form {
    display: inline-flex;
    align-items: stretch;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 8px;
    overflow: hidden;
    background: #ffffff;
}
.cl-orc-qtd-btn {
    border: none;
    background: #f9fafb;
    color: #4b5563;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
    font-size: 0.7rem;
    padding: 0;
}
.cl-orc-qtd-btn:hover:not(:disabled) {
    background: #10b981;
    color: #ffffff;
}
.cl-orc-qtd-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.cl-orc-qtd-value {
    border: none;
    width: 44px;
    height: 28px;
    text-align: center;
    font-weight: 700;
    color: #111827;
    font-size: 0.85rem;
    background: #ffffff;
    border-left: 1px solid #f3f4f6;
    border-right: 1px solid #f3f4f6;
    padding: 0;
    -moz-appearance: textfield;
}
.cl-orc-qtd-value::-webkit-inner-spin-button,
.cl-orc-qtd-value::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.cl-orc-qtd-value:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px #10b981;
}
.cl-orc-qtd-stepper.readonly {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.2rem 0.65rem;
    font-weight: 700;
    color: #4b5563;
}

/* Preco e acoes */
.cl-orc-item-total {
    flex: 0 0 auto;
    text-align: right;
    min-width: 88px;
}
.cl-orc-item-total > span {
    display: block;
    font-weight: 700;
    color: var(--cl-primary);
    font-size: 0.95rem;
    line-height: 1.1;
}
/* Coluna de acoes do item — largura FIXA pra que TODAS as linhas da
   grade fiquem alinhadas, mesmo quando o item nao tem botoes a exibir
   (status read-only sem observacao). 74px cobre 2 botoes redondos
   (34px cada) + gap; quando ha so' 1 botao, justify-content:flex-end
   alinha pelo lado direito mantendo a coluna estavel em todas as linhas. */
.cl-orc-item-acoes {
    flex: 0 0 74px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}
/* Placeholder invisivel — mesmo footprint do .cl-icon-btn pra reservar
   o lugar do botao ausente e manter o alinhamento das colunas. */
.cl-icon-btn-placeholder {
    display: inline-block;
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    visibility: hidden;
}
/* Forms internos (ex.: form de remover item) precisam ser inline-flex
   para nao quebrarem em uma nova linha — sem isso, o <form> volta ao
   default block e empilha em cima do botao anterior. */
.cl-orc-item-acoes > form {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.cl-orc-total-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.7rem 1.1rem;
    background: linear-gradient(90deg, var(--cl-row-head) 0%, transparent 100%);
}
.cl-orc-total-value {
    font-size: 1.25rem;
    color: var(--cl-primary);
    font-weight: 700;
}

/* ============================================================
   Pagamento de entregas - cards com avatar do entregador
   ============================================================ */
/* Grid dedicado dos cards de pagamento - mais denso que o cl-people-grid
   pra acomodar muitos entregadores sem bagunçar. */
.cl-pag-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.7rem;
}
.cl-pag-card {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cl-pag-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(4, 120, 87, 0.10);
}
.cl-pag-card-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid var(--cl-border);
}
.cl-pag-card-head .cl-avatar {
    width: 34px; height: 34px;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cl-pag-card-head h6 {
    margin: 0;
    font-weight: 600;
    color: #111827;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-pag-card-head small {
    color: #6b7280;
    font-size: 0.68rem;
}

.cl-pag-totals {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 0.6rem 0.7rem;
    gap: 0.5rem;
}
.cl-pag-total-block {
    background: #f9fafb;
    border-radius: 6px;
    padding: 0.45rem 0.55rem;
    text-align: center;
}
.cl-pag-total-block.pendente {
    background: #fef2f2;
    color: #991b1b;
}
.cl-pag-total-block.pago {
    background: #d1fae5;
    color: #047857;
}
.cl-pag-total-block strong {
    display: block;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.1;
}
.cl-pag-total-block span {
    display: block;
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.15rem;
    opacity: 0.8;
}

.cl-pag-pending-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cl-pag-pending-list li {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1.1rem;
    font-size: 0.78rem;
    border-top: 1px solid #f3f4f6;
}
.cl-pag-pending-list li:hover {
    background: #fafafa;
}
.cl-pag-pending-list .cl-pag-orc-id {
    font-family: monospace;
    color: #6b7280;
}
.cl-pag-pending-list .cl-pag-orc-val {
    font-weight: 600;
    color: var(--cl-primary);
}

.cl-pag-card-foot {
    padding: 0.5rem 0.7rem;
    background: #fafafa;
    border-top: 1px solid var(--cl-border);
    font-size: 0.72rem;
}

/* ============================================================
   Monitor em tempo real (Kanban)
   ============================================================ */
.cl-mon-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cl-mon-titulo small i.text-success {
    animation: cl-pulse-green 2.4s infinite;
}

.cl-mon-kpis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.85rem;
}
@media (max-width: 768px) {
    .cl-mon-kpis { grid-template-columns: repeat(2, 1fr); }
}
.cl-mon-kpi {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    border-radius: 12px;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.cl-mon-kpi.is-zero {
    background: #f3f4f6 !important;
    color: #6b7280 !important;
}
.cl-mon-kpi-primary {
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
}
.cl-mon-kpi-danger {
    background: linear-gradient(135deg, #b91c1c 0%, #ef4444 100%);
}
.cl-mon-kpi-success {
    background: linear-gradient(135deg, #0e7490 0%, #06b6d4 100%);
}
.cl-mon-kpi-info {
    background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
}
.cl-mon-kpi-violet {
    background: linear-gradient(135deg, #4338ca 0%, #6366f1 100%);
}
.cl-mon-kpi-chat {
    background: linear-gradient(135deg, #c2410c 0%, #f97316 100%);
    position: relative;
}
/* Indicador "pulsando" no canto superior direito do KPI quando ha mensagens
   nao lidas - chama a atencao do lojista. */
.cl-mon-kpi-pulse {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #fef08a;
    box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.7);
    animation: cl-pulse 1.6s infinite;
}

/* ====================================================================
   Dashboard - Status compactos por modalidade (Locacoes vs Vendas)
   Substitui os "orbs" grandes que duplicavam o Monitor.
   ==================================================================== */
.cl-status-card {
    padding: 1.1rem 1.25rem;
}
.cl-status-icon-loc { color: #0d9488; }
.cl-status-icon-ven { color: #1e40af; }

.cl-status-total {
    margin: 0.4rem 0 1rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}
.cl-status-total-num {
    font-size: 2.1rem;
    font-weight: 800;
    color: #111827;
    line-height: 1;
}
.cl-status-total-label {
    font-size: 0.78rem;
    color: #6b7280;
}

.cl-status-rows {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cl-status-row {
    display: grid;
    grid-template-columns: 12px 1fr minmax(60px, 1fr) auto;
    align-items: center;
    gap: 0.6rem;
    padding: 0.35rem 0.45rem;
    border-radius: 6px;
    color: #374151;
    text-decoration: none;
    font-size: 0.83rem;
    transition: background 0.12s ease;
}
.cl-status-row:hover {
    background: #f9fafb;
    color: #111827;
}
.cl-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}
.cl-status-label {
    color: #4b5563;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-status-bar {
    display: block;
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.cl-status-bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease;
}
.cl-status-num {
    font-weight: 700;
    color: #111827;
    min-width: 28px;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
@keyframes cl-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(254, 240, 138, 0.6); }
    70%  { box-shadow: 0 0 0 10px rgba(254, 240, 138, 0); }
    100% { box-shadow: 0 0 0 0 rgba(254, 240, 138, 0); }
}
.cl-mon-kpi-icon {
    width: 42px; height: 42px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,0.20);
    font-size: 1.1rem;
    flex-shrink: 0;
}
.cl-mon-kpi-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}
.cl-mon-kpi-value {
    font-size: 1.75rem;
    font-weight: 700;
    line-height: 1;
}
.cl-mon-kpi-value-money {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-mon-kpi-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.9;
    margin-top: 0.2rem;
    font-weight: 600;
}

.cl-mon-banner {
    background: linear-gradient(90deg, #fef3c7 0%, #fde68a 100%);
    border: 1px solid #fcd34d;
    color: #92400e;
    padding: 0.75rem 1rem;
    border-radius: 10px;
    font-size: 0.88rem;
    margin-bottom: 1rem;
}

.cl-kanban-scroll {
    overflow-x: auto;
    padding-bottom: 0.65rem;
    margin: 0 -0.25rem;
}
.cl-kanban {
    display: flex;
    gap: 0.6rem;
    min-width: max-content;
    padding: 0 0.25rem;
}
.cl-kanban-col {
    flex: 0 0 220px;
    background: #f9fafb;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 75vh;
}
.cl-kanban-col-head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.5rem;
    border-bottom: 1px solid var(--cl-border);
    text-align: center;
    min-width: 0;
}
.cl-kanban-col-head-title {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    max-width: 100%;
    font-weight: 700;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.15;
    overflow: hidden;
}
.cl-kanban-col-head-title i { font-size: 0.85rem; flex-shrink: 0; }
.cl-kanban-col-head-title span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}
.cl-kanban-col-count {
    background: #ffffff;
    color: #111827;
    padding: 0.1rem 0.7rem;
    border-radius: 9999px;
    font-size: 0.8rem;
    font-weight: 700;
    min-width: 1.7rem;
    text-align: center;
    box-shadow: 0 1px 2px rgba(0,0,0,0.06);
    line-height: 1.3;
}
.cl-kanban-col-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.45rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    background: #f9fafb;
}
/* Empty state ULTRA compacto. Só um "—" centrado, sem texto repetitivo.
   Antes mostrava "ícone + Sem orçamentos" em cada coluna vazia, o que
   inflava demais a tela (quase sempre 5 das 7 colunas estão vazias). */
.cl-kanban-empty {
    text-align: center;
    color: #d1d5db;
    padding: 0.75rem 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.cl-kanban-card {
    position: relative;
    background: #ffffff;
    border: 1px solid #eef0f3;
    border-radius: 8px;
    padding: 0.6rem 0.55rem 0.55rem;
    text-decoration: none;
    color: #374151;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.22rem;
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    border-left: 3px solid var(--cl-primary-soft);
    cursor: pointer;
}
.cl-kanban-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 10px rgba(4,120,87,0.10);
    border-color: var(--cl-primary-soft);
    border-left-color: var(--cl-primary);
    color: #374151;
}
.cl-kanban-card.atrasado {
    border-left-color: #ef4444;
    background: linear-gradient(90deg, #fef2f2 0%, #ffffff 10%);
    animation: cl-pulse-border-red 2.5s infinite;
}
@keyframes cl-pulse-border-red {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
    50%      { box-shadow: 0 0 0 3px rgba(239,68,68,0.10); }
}

/* Linha 1: tempo parado no status atual (linha propria, centralizada).
   .alerta = pulsa em vermelho quando o orcamento esta "esquecido". */
.cl-kanban-card-tempo-row {
    display: flex;
    justify-content: center;
    width: 100%;
}
.cl-kanban-card-tempo {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.62rem;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 0.1rem 0.5rem;
    border-radius: 9999px;
    line-height: 1.2;
    letter-spacing: 0.2px;
    white-space: nowrap;
}
.cl-kanban-card-tempo i { font-size: 0.6rem; }
.cl-kanban-card-tempo.alerta {
    color: #b91c1c;
    background: #fee2e2;
    animation: cl-pulse-tempo 1.6s infinite;
}
@keyframes cl-pulse-tempo {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.45); }
    50%      { box-shadow: 0 0 0 4px rgba(239,68,68,0); }
}

/* HIERARQUIA do card (de cima pra baixo):
   1. Tempo parado (só se relevante, badge pequena)
   2. Nome do cliente (bold, destaque principal)
   3. Valor (cor primária, grande — segunda info mais importante)
   4. Metalinha (data · modalidade) — cinza pequeno
   5. Metalinha sub (ID + funcionário) — cinza menor ainda
   Cada linha tem peso visual decrescente — lojista bate o olho e
   vê primeiro nome+valor, sem ruído. */

.cl-kanban-card-name {
    width: 100%;
    font-weight: 700;
    font-size: 0.78rem;
    color: #111827;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    margin-top: 0.05rem;
}

/* Valor com fonte menor pra não quebrar valores grandes (R$ 13.510,00).
   nowrap impede quebra; com a fonte menor cabem ~10-11 caracteres na
   largura do card (220px), suficiente pra valores de até ~R$ 999.999,99. */
.cl-kanban-card-val {
    width: 100%;
    color: var(--cl-primary);
    font-weight: 800;
    font-size: 0.95rem;
    line-height: 1.1;
    text-align: center;
    padding: 0.05rem 0;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Metalinha (data · modalidade). Cinza pequeno, peso visual baixo. */
.cl-kanban-card-meta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.28rem;
    width: 100%;
    font-size: 0.65rem;
    color: #6b7280;
    line-height: 1.3;
    text-align: center;
}
.cl-kanban-card-meta i { color: #9ca3af; flex-shrink: 0; }
.cl-kanban-card-meta-sep {
    color: #cbd5e1;
    margin: 0 0.05rem;
}
/* Sub-metalinha: peso ainda menor pro ID + atendente. */
.cl-kanban-card-meta-sub {
    font-size: 0.6rem;
    color: #9ca3af;
    margin-top: 0.05rem;
}
.cl-kanban-card-meta-sub .cl-kanban-card-num {
    font-family: 'JetBrains Mono', 'Fira Mono', monospace;
    background: transparent;
    padding: 0;
    border-radius: 0;
    letter-spacing: 0.3px;
    color: inherit;
}
/* Modalidade dentro da metalinha — pílula compacta pastel. */
.cl-kanban-card-meta .cl-modalidade {
    padding: 0.05rem 0.38rem;
    font-size: 0.6rem;
    font-weight: 600;
    line-height: 1.2;
}


/* Em telas largas: as 7 raias caem como grid sem scroll horizontal */
@media (min-width: 1280px) {
    .cl-kanban {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        min-width: 0;
    }
    .cl-kanban-col {
        flex: 1 1 0;
        min-width: 0;
    }
    .cl-kanban-scroll { overflow-x: visible; }
}

/* Modo TV - ativado pelo body class do Monitor: esconde header/footer
   da pagina, container full width, KPIs maiores, mais densidade vertical. */
body.cl-tv-mode .br-header,
body.cl-tv-mode .br-footer,
body.cl-tv-mode .br-skiplink {
    display: none !important;
}
body.cl-tv-mode main .container-lg {
    max-width: 100% !important;
    padding: 0.5rem 1rem !important;
}
body.cl-tv-mode .cl-kanban-col { max-height: 82vh; }
body.cl-tv-mode .cl-mon-kpi-value { font-size: 2rem; }
body.cl-tv-mode .cl-mon-kpi-value-money { font-size: 1.3rem; }
body.cl-tv-mode .cl-kanban-card-name { font-size: 0.92rem; }
body.cl-tv-mode .cl-kanban-card-val  { font-size: 1.2rem; }
body.cl-tv-mode .cl-kanban-card-line { font-size: 0.78rem; }
body.cl-tv-mode .cl-kanban-card-num  { font-size: 0.78rem; }
body.cl-tv-mode .cl-kanban-card-tempo { font-size: 0.74rem; }

/* Cabecalho do KPI claramente sobre o gradiente, sem poluicao */
.cl-mon-kpi-value, .cl-mon-kpi-value-money, .cl-mon-kpi-label {
    color: #ffffff !important;
    background: transparent !important;
}

.cl-mon-concluidos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 0.6rem;
}
.cl-mon-concluido-card {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.65rem 0.85rem;
    background: linear-gradient(90deg, #d1fae5 0%, #ffffff 100%);
    border: 1px solid #a7f3d0;
    border-radius: 10px;
    text-decoration: none;
    color: #047857;
    transition: transform 0.15s ease;
}
.cl-mon-concluido-card:hover {
    transform: translateY(-1px);
    color: #047857;
}
.cl-mon-concluido-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--cl-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.cl-mon-concluido-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}
.cl-mon-concluido-info strong {
    color: #111827;
    font-size: 0.82rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-mon-concluido-info span {
    color: var(--cl-primary);
    font-weight: 600;
    font-size: 0.78rem;
}
.cl-mon-concluido-by {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.15rem;
    font-size: 0.68rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-mon-concluido-by i { color: #9ca3af; flex-shrink: 0; }

/* ============================================================
   Tela Meu Plano - card destaque + cards de outros planos
   ============================================================ */
.cl-plano-atual {
    background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%);
    border: 1px solid var(--cl-primary-soft);
    border-radius: 14px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 16px rgba(4, 120, 87, 0.10);
    position: relative;
    overflow: hidden;
}
.cl-plano-atual::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--cl-primary) 0%, var(--cl-primary-soft) 50%, var(--cl-accent-light) 100%);
}

.cl-plano-atual-header {
    margin-bottom: 1.25rem;
}
.cl-plano-atual-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.85rem;
    background: var(--cl-primary);
    color: #ffffff;
    border-radius: 9999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.65rem;
}
.cl-plano-atual-nome {
    font-size: 1.85rem;
    font-weight: 700;
    color: var(--cl-primary-hover);
    margin: 0 0 0.25rem;
    line-height: 1.15;
}
.cl-plano-atual-desc {
    color: #6b7280;
    font-size: 0.9rem;
    margin: 0;
}

.cl-plano-atual-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    padding: 1rem 0;
    border-top: 1px solid #e5e7eb;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 1.25rem;
}
@media (max-width: 768px) {
    .cl-plano-atual-stats { grid-template-columns: 1fr; }
}
.cl-plano-atual-stat {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.cl-plano-atual-stat > i {
    width: 38px; height: 38px;
    border-radius: 10px;
    background: var(--cl-row-head);
    color: var(--cl-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
}
.cl-plano-atual-stat strong {
    display: block;
    font-size: 1rem;
    color: #111827;
    font-weight: 700;
    line-height: 1.2;
}
.cl-plano-atual-stat span {
    font-size: 0.7rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-weight: 600;
}

.cl-plano-atual-limites {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}
.cl-plano-limite {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.7rem 0.85rem;
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 10px;
}
.cl-plano-limite > i {
    width: 32px; height: 32px;
    border-radius: 8px;
    background: var(--cl-row-head);
    color: var(--cl-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.cl-plano-limite strong {
    display: block;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--cl-primary);
    line-height: 1.1;
}
.cl-plano-limite span {
    font-size: 0.7rem;
    color: #6b7280;
}

.cl-plano-atual-features {
    background: rgba(255,255,255,0.5);
    padding: 0.85rem 1rem;
    border-radius: 10px;
    margin-bottom: 1.25rem;
}
.cl-plano-atual-features h6 {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #374151;
    margin-bottom: 0.5rem;
}
.cl-plano-atual-features ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.35rem 1rem;
}
.cl-plano-atual-features li {
    font-size: 0.82rem;
    color: #374151;
    position: relative;
    padding-left: 1.1rem;
}
.cl-plano-atual-features li::before {
    content: '\2713';
    position: absolute;
    left: 0;
    color: var(--cl-primary);
    font-weight: 700;
}

.cl-plano-atual-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Cards de outros planos */
.cl-plano-card {
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.cl-plano-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(4, 120, 87, 0.12);
    border-color: var(--cl-primary-soft);
}
.cl-plano-card-preco {
    text-align: center;
    padding: 0.85rem 0;
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 0.85rem;
}
.cl-plano-card-preco-valor {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cl-primary);
    line-height: 1;
}
.cl-plano-card-preco-ciclo {
    font-size: 0.85rem;
    color: #6b7280;
    margin-left: 0.2rem;
}
.cl-plano-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}
.cl-plano-card-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #374151;
}
.cl-plano-card-list li i {
    width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* ============================================================
   Tela de pagamento PIX (Mercado Pago)
   ============================================================ */
.cl-pag-status {
    /* display:flex com width:fit-content + margin auto = pill centralizada
       que ocupa linha propria (em vez de inline-flex que ficava lado a lado
       com o QR e quebrava o layout vertical). */
    display: flex;
    width: fit-content;
    margin: 0 auto 1rem;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}
.cl-pag-status.approved {
    background: #d1fae5;
    color: #047857;
    border-color: #a7f3d0;
}
.cl-pag-status.rejected {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fecaca;
}
.cl-pag-status-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #f59e0b;
    box-shadow: 0 0 0 0 rgba(245,158,11,0.55);
    animation: cl-pulse-amber 1.6s infinite;
}
.cl-pag-status.approved .cl-pag-status-dot {
    background: #10b981;
    animation: cl-pulse-green 2.4s infinite;
}
.cl-pag-status.rejected .cl-pag-status-dot {
    background: #ef4444;
    animation: cl-pulse-red 1.6s infinite;
}
@keyframes cl-pulse-amber {
    0%   { box-shadow: 0 0 0 0 rgba(245,158,11,0.55); }
    70%  { box-shadow: 0 0 0 8px rgba(245,158,11,0); }
    100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); }
}

.cl-pag-qr-wrap {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 14px;
    padding: 0.85rem;
    display: inline-block;
    margin: 0.25rem 0 0.5rem;
    box-shadow: 0 4px 14px rgba(0,0,0,0.05);
}
.cl-pag-qr {
    display: block;
    width: 240px;
    height: 240px;
    image-rendering: pixelated;
}
.cl-pag-qr-empty {
    width: 240px;
    height: 180px;
    margin: 1rem auto;
    border: 2px dashed var(--cl-border);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    color: #9ca3af;
}
.cl-pag-qr-empty i {
    font-size: 2.5rem;
    opacity: 0.6;
}

.cl-pag-divider {
    margin: 1.25rem 0 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: #9ca3af;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.cl-pag-divider::before,
.cl-pag-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}
.cl-pag-divider span {
    flex: 0 0 auto;
}

.cl-pag-copy-wrap {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}
.cl-pag-copy-wrap input {
    font-family: monospace;
    font-size: 0.78rem;
    background: #f9fafb;
}
.cl-pag-copy-wrap .btn { white-space: nowrap; }

.cl-pag-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    font-size: 0.88rem;
}
.cl-pag-resumo-linha span { color: #6b7280; }
.cl-pag-resumo-linha strong { color: #111827; }
.cl-pag-resumo-total span { font-size: 0.95rem; color: #374151; font-weight: 600; }
.cl-pag-resumo-total strong {
    font-size: 1.5rem;
    color: var(--cl-primary);
    font-weight: 700;
}

.cl-pag-instrucoes h6 {
    font-size: 0.85rem;
    font-weight: 700;
    margin-bottom: 0.65rem;
    color: #374151;
}
.cl-pag-instrucoes ol {
    padding-left: 1.25rem;
    margin: 0;
    font-size: 0.83rem;
    color: #4b5563;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

/* Modal de sucesso */
.cl-pag-sucesso-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4, 120, 87, 0.35);
    backdrop-filter: blur(4px);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: cl-fadein 0.3s ease;
}
@keyframes cl-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cl-pag-sucesso-card {
    background: #ffffff;
    border-radius: 18px;
    padding: 2.5rem 2rem;
    box-shadow: 0 20px 50px rgba(0,0,0,0.20);
    text-align: center;
    max-width: 400px;
    width: 90%;
    animation: cl-popin 0.4s ease;
}
@keyframes cl-popin {
    from { transform: scale(0.85); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.cl-pag-sucesso-icon {
    width: 86px;
    height: 86px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, #047857 0%, #10b981 100%);
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    box-shadow: 0 8px 22px rgba(4,120,87,0.30);
    animation: cl-checkpop 0.6s ease;
}
@keyframes cl-checkpop {
    0%   { transform: scale(0); }
    60%  { transform: scale(1.15); }
    100% { transform: scale(1); }
}
.cl-pag-sucesso-card h3 {
    color: var(--cl-primary);
    font-weight: 700;
    margin-bottom: 0.4rem;
}

/* ============================================================
   Dashboard - Hero, section cards, atividade recente
   ============================================================ */

/* Fix: orbs nao podem mostrar sublinhado de link */
.cl-orb,
.cl-orb:hover,
.cl-orb-label {
    text-decoration: none !important;
}

/* Hero/welcome banner no topo do Dashboard */
.cl-hero {
    background: linear-gradient(135deg, #047857 0%, #065f46 70%, #022c22 100%);
    border-radius: 16px;
    padding: 1.5rem 1.75rem;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    position: relative;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(4, 120, 87, 0.20);
}
.cl-hero::before {
    content: '';
    position: absolute;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    top: -80px; right: -50px;
    pointer-events: none;
}
.cl-hero::after {
    content: '';
    position: absolute;
    width: 140px; height: 140px;
    border-radius: 50%;
    background: rgba(255,255,255,0.05);
    bottom: -60px; left: 30%;
    pointer-events: none;
}
.cl-hero-avatar { flex: 0 0 auto; position: relative; z-index: 1; }
.cl-hero-info   { flex: 1 1 auto; min-width: 0; position: relative; z-index: 1; }
.cl-hero-greet {
    font-size: 0.85rem;
    opacity: 0.85;
    margin: 0 0 0.15rem;
    font-weight: 500;
}
.cl-hero-name {
    font-size: 1.85rem;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 0.35rem;
    color: #ffffff;
    letter-spacing: -0.01em;
}
.cl-hero-sub {
    font-size: 0.9rem;
    opacity: 0.85;
    margin: 0;
}
.cl-hero-sub strong { font-weight: 700; opacity: 1; }

.cl-hero-actions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
}
.cl-hero-btn {
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.30);
    color: #ffffff !important;
    backdrop-filter: blur(4px);
    transition: all 0.15s;
    font-size: 0.82rem;
    white-space: nowrap;
}
.cl-hero-btn:hover {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.5);
}

@media (max-width: 768px) {
    .cl-hero { flex-wrap: wrap; padding: 1.25rem; }
    .cl-hero-actions { flex-direction: row; flex-basis: 100%; }
}

/* Avatar variants */
.cl-avatar-xl {
    width: 72px !important;
    height: 72px !important;
    font-size: 1.6rem !important;
    border: 3px solid rgba(255,255,255,0.30);
    box-shadow: 0 4px 14px rgba(0,0,0,0.20) !important;
}
.cl-avatar-xs {
    width: 32px !important;
    height: 32px !important;
    font-size: 0.78rem !important;
    box-shadow: none;
}

/* Section card - container para agrupar (e dar contexto) os orbs e listas */
.cl-section-card {
    background: #ffffff;
    border: 1px solid var(--cl-border);
    border-radius: 12px;
    box-shadow: 0 1px 3px rgba(4, 120, 87, 0.04);
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}
.cl-section-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.9rem 1.15rem;
    border-bottom: 1px solid #f3f4f6;
    background: linear-gradient(180deg, #fafafa 0%, #ffffff 100%);
    font-size: 0.85rem;
    color: #374151;
}
.cl-section-card-header strong {
    color: #111827;
    font-weight: 600;
}
.cl-section-link {
    font-size: 0.78rem;
    color: var(--cl-primary);
    text-decoration: none;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}
.cl-section-link:hover {
    color: var(--cl-primary-hover);
    text-decoration: none;
}
.cl-section-link i { font-size: 0.7rem; }

/* Grid dos orbs DENTRO do section card - sem espaco perdido */
.cl-orbs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 1rem;
    padding: 1.25rem 1.15rem;
    justify-items: center;
}
.cl-orbs-grid .cl-orb { width: auto; }
.cl-orbs-grid .cl-orb-circle {
    width: 100px !important;
    height: 100px !important;
}
.cl-orbs-grid .cl-orb-ico { font-size: 1.1rem; }
.cl-orbs-grid .cl-orb-num { font-size: 1.4rem; }
.cl-orbs-grid .cl-orb-num-money { font-size: 0.85rem; }
.cl-orbs-grid .cl-orb-label {
    font-size: 0.7rem;
    margin-top: 0.5rem;
}

/* Lista de atividade recente */
.cl-recente-list {
    flex: 1 1 auto;
    overflow-y: auto;
    max-height: 380px;
}
.cl-recente-item {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.7rem 1.15rem;
    border-bottom: 1px solid #f3f4f6;
    text-decoration: none;
    color: #374151;
    transition: background 0.12s;
}
.cl-recente-item:last-child { border-bottom: none; }
.cl-recente-item:hover {
    background: #f9fafb;
    color: #374151;
}
.cl-recente-info {
    flex: 1 1 auto;
    min-width: 0;
}
.cl-recente-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: #111827;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cl-recente-status {
    font-size: 0.68rem;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-top: 0.1rem;
}
.cl-recente-val {
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--cl-primary);
    font-size: 0.88rem;
    white-space: nowrap;
}

/* Atalhos rapidos dentro de section card precisam de padding interno */
.cl-section-card .cl-dash-quick {
    padding: 1.15rem;
}

/* ============================================================
   Tela de detalhe do orcamento - novos componentes (tabs/chat)
   ============================================================ */

/* Form "Adicionar item" integrado no rodape do card de itens */
.cl-orc-add-item {
    background: #f9fafb;
    border-top: 1px solid var(--cl-border);
    padding: 0.85rem 1.1rem;
}

/* Card lateral de status (acoes) */
.cl-orc-status-card .card-body {
    display: flex;
    flex-direction: column;
}
.cl-orc-status-summary {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px dashed #e5e7eb;
    margin-bottom: 0.75rem;
}
.cl-orc-status-label {
    font-size: 0.65rem;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}
.cl-orc-status-pill {
    display: inline-block;
    background: linear-gradient(135deg, var(--cl-primary) 0%, var(--cl-primary-soft) 100%);
    color: #ffffff;
    padding: 0.25rem 0.85rem;
    border-radius: 9999px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
/* Variantes de cor do badge de status — alinhadas com a paleta da timeline
   (corPorEtapa em OrcamentoController.java). Aplicadas via th:classappend
   no template. Default (sem variante) é o verde primary acima. */
.cl-orc-status-pill-cancelado,
.cl-orc-status-pill-rejeitado {
    background: linear-gradient(135deg, #991b1b 0%, #b91c1c 100%);
}
.cl-orc-status-pill-descontinuado {
    background: linear-gradient(135deg, #4b5563 0%, #6b7280 100%);
}
.cl-orc-status-pill-aguardando_aceite,
.cl-orc-status-pill-aguardando_devolucao,
.cl-orc-status-pill-aguardando_pagamento {
    background: linear-gradient(135deg, #92400e 0%, #b45309 100%);
}
.cl-orc-status-pill-em_transito {
    background: linear-gradient(135deg, #a16207 0%, #ca8a04 100%);
}
.cl-orc-status-pill-em_uso {
    background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
}
.cl-orc-status-pill-aberto {
    background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%);
}
.cl-orc-status-pill-em_andamento {
    background: linear-gradient(135deg, #0369a1 0%, #0284c7 100%);
}
.cl-orc-status-info {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
    color: #374151;
    padding: 0.25rem 0;
}
.cl-orc-status-info i {
    width: 18px;
    text-align: center;
    color: #9ca3af;
}
/* Dark mode: texto e ícone com a MESMA cor (text-soft) — assim o
   "Frete R$ X" e "Validade DD/MM/YYYY" ficam legíveis e harmônicos
   com o ícone do truck/calendário ao lado. Antes texto e ícone tinham
   cores cinzas próximas mas ambas sumiam no fundo escuro. */
.cl-theme-dark .cl-orc-status-info,
.cl-theme-dark .cl-orc-status-info i {
    color: var(--cl-text-soft) !important;
}
.cl-theme-dark .cl-orc-status-info span {
    color: var(--cl-text-soft) !important;
}

.cl-orc-acao-vazia {
    text-align: center;
    color: #9ca3af;
    padding: 0.75rem 0;
}
.cl-orc-acao-vazia i {
    font-size: 1.5rem;
    margin-bottom: 0.4rem;
    display: block;
    opacity: 0.6;
}
.cl-orc-acao-vazia p {
    font-size: 0.78rem;
    margin: 0;
}

/* ====================================================================
   TIMELINE de etapas do orcamento (substitui o cl-orc-historico antigo)
   ==================================================================== */
.cl-timeline {
    position: relative;
    padding: 0.25rem 0 0.25rem 0.5rem;
}
.cl-timeline::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    bottom: 0.5rem;
    left: 14px;
    width: 2px;
    background: linear-gradient(180deg, #e5e7eb 0%, #f3f4f6 100%);
    border-radius: 2px;
}
.cl-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.45rem 0 0.45rem 0;
}
.cl-timeline-item:last-child { padding-bottom: 0; }
.cl-timeline-dot {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--cl-primary, #10b981);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(16, 24, 40, 0.10), 0 0 0 3px #ffffff;
    z-index: 1;
}
.cl-timeline-card {
    flex: 1;
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s ease;
}
.cl-timeline-card:hover {
    box-shadow: 0 4px 10px rgba(16, 24, 40, 0.06);
}
.cl-timeline-card-head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.85rem;
    color: #111827;
}
.cl-timeline-card-head strong {
    font-weight: 600;
    color: #111827;
}
.cl-timeline-data {
    margin-left: auto;
    font-size: 0.72rem;
    white-space: nowrap;
}
.cl-timeline-detalhes {
    margin-top: 0.3rem;
    font-size: 0.78rem;
    color: #6b7280;
    line-height: 1.4;
}

/* ====================================================================
   CHAT FLUTUANTE (estilo Messenger, canto inferior direito)
   ==================================================================== */
.cl-chat-fab {
    position: fixed;
    bottom: 1.1rem;
    right: 1.1rem;
    /* z-index alto para ficar acima do header sticky do gov.br.
       Continua abaixo do .cl-select-overlay (100000) e do .cl-confirm-modal,
       que sao dialogs modais que devem cobrir tudo, inclusive o chat. */
    z-index: 9050;
    font-family: inherit;
}

/* ----- Estado fechado: pilula clicavel ----- */
.cl-chat-fab-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.45rem 0.75rem 0.45rem 0.45rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    border: none;
    border-radius: 999px;
    box-shadow: 0 8px 22px rgba(16, 185, 129, 0.35), 0 2px 5px rgba(16, 24, 40, 0.10);
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    min-width: 220px;
    max-width: 320px;
    position: relative;
}
.cl-chat-fab-pill:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.45), 0 3px 8px rgba(16, 24, 40, 0.12);
}
.cl-chat-fab-pill .cl-avatar {
    width: 34px;
    height: 34px;
    font-size: 0.85rem;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.55);
    flex-shrink: 0;
}
.cl-chat-fab-pill-info {
    text-align: left;
    line-height: 1.1;
    flex: 1;
    min-width: 0;
}
.cl-chat-fab-pill-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-chat-fab-pill-sub {
    font-size: 0.7rem;
    opacity: 0.85;
    color: #ffffff;
}
.cl-chat-fab-pill-icon {
    font-size: 1rem;
    color: #ffffff;
    flex-shrink: 0;
    margin-left: 0.15rem;
}
.cl-chat-fab-pill-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    background: #ef4444;
    color: #ffffff;
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #ffffff;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.15);
}

/* ----- Estado aberto: panel completo ----- */
.cl-chat-fab-panel {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 360px;
    max-width: calc(100vw - 2rem);
    height: 480px;
    /* Reserva espaco para o header sticky do gov.br (~150px) + a margem
       inferior do FAB (~1rem). Em telas curtas o painel encolhe ate caber
       sem ficar atras do header. */
    max-height: calc(100vh - 170px);
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 14px;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.20), 0 6px 14px rgba(16, 24, 40, 0.10);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform-origin: bottom right;
    opacity: 0;
    transform: translateY(12px) scale(0.96);
    pointer-events: none;
    transition: opacity 0.18s ease, transform 0.18s ease;
}
.cl-chat-fab.open .cl-chat-fab-panel {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}
.cl-chat-fab.open .cl-chat-fab-pill {
    display: none;
}

.cl-chat-fab-header {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 0.9rem;
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #ffffff;
    flex-shrink: 0;
}
.cl-chat-fab-header .cl-avatar {
    width: 38px;
    height: 38px;
    font-size: 0.95rem;
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
    border: 2px solid rgba(255, 255, 255, 0.55);
}
.cl-chat-fab-header-info {
    flex: 1;
    min-width: 0;
    line-height: 1.15;
}
.cl-chat-fab-header-name {
    font-weight: 700;
    font-size: 0.95rem;
    color: #ffffff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-chat-fab-header-sub {
    font-size: 0.72rem;
    opacity: 0.9;
    color: #ffffff;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}
.cl-chat-fab-header-sub .cl-chat-online-dot {
    background: #34d399;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}
.cl-chat-fab-close {
    background: rgba(255, 255, 255, 0.18);
    border: none;
    color: #ffffff;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease;
    flex-shrink: 0;
}
.cl-chat-fab-close:hover {
    background: rgba(255, 255, 255, 0.30);
}

.cl-chat-fab-msgs {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0.9rem 0.85rem;
    background:
        repeating-linear-gradient(0deg, transparent, transparent 31px, #f9fafb 31px, #f9fafb 32px),
        #fdfdfd;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}
.cl-chat-fab-msgs::-webkit-scrollbar { width: 6px; }
.cl-chat-fab-msgs::-webkit-scrollbar-thumb {
    background: #d1d5db;
    border-radius: 3px;
}
.cl-chat-fab-msgs::-webkit-scrollbar-thumb:hover { background: #9ca3af; }

.cl-chat-fab-form {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.6rem 0.7rem;
    background: #fafafa;
    border-top: 1px solid var(--cl-border, #e5e7eb);
    flex-shrink: 0;
}

/* Em telas estreitas, panel ocupa quase toda largura */
@media (max-width: 480px) {
    .cl-chat-fab-panel {
        width: calc(100vw - 1.2rem);
        height: calc(100vh - 5rem);
    }
    .cl-chat-fab-pill {
        min-width: auto;
    }
    .cl-chat-fab-pill-info { display: none; }
}

/* Estado vazio compartilhado */
.cl-empty-state {
    text-align: center;
    color: #6b7280;
    padding: 3rem 1rem;
}
.cl-empty-state i {
    font-size: 3rem;
    color: #cbd5e1;
    margin-bottom: 0.5rem;
}
.cl-empty-state .cl-empty-title {
    font-weight: 600;
    color: #374151;
    margin-bottom: 0.3rem;
}

/* ====================================================================
   DIALOG DE CONFIRMACAO GENERICO
   ==================================================================== */
.cl-confirm-modal .modal-dialog { max-width: 380px; }
.cl-confirm-content {
    border: none;
    border-radius: 16px;
    padding: 1.5rem 1.25rem 1.1rem;
    text-align: center;
    box-shadow: 0 20px 50px rgba(16, 24, 40, 0.18);
}
.cl-confirm-icon {
    width: 60px;
    height: 60px;
    margin: 0 auto 0.85rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    background: #fee2e2;
    color: #dc2626;
}
.cl-confirm-content.cl-confirm-warning .cl-confirm-icon {
    background: #fef3c7;
    color: #d97706;
}
.cl-confirm-content.cl-confirm-primary .cl-confirm-icon {
    background: #dbeafe;
    color: #2563eb;
}
.cl-confirm-titulo {
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.45rem;
    font-size: 1.05rem;
}
.cl-confirm-mensagem {
    color: #4b5563;
    font-size: 0.92rem;
    margin-bottom: 1.1rem;
    line-height: 1.5;
}
.cl-confirm-acoes {
    display: flex;
    gap: 0.5rem;
}
.cl-confirm-acoes .btn { flex: 1; font-weight: 600; }
.cl-confirm-acoes .btn-light { background: #f3f4f6; }

/* ====================================================================
   FILTRO DE PERIODO REUTILIZAVEL
   ==================================================================== */
.cl-periodo-filtro {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.85rem;
    padding: 0.6rem 0.75rem;
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cl-periodo-quick {
    display: inline-flex;
    background: #f3f4f6;
    border-radius: 999px;
    padding: 3px;
    gap: 0;
}
.cl-periodo-chip {
    border: none;
    background: transparent;
    color: #4b5563;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}
.cl-periodo-chip:hover {
    background: rgba(255, 255, 255, 0.6);
}
.cl-periodo-chip.active {
    background: #ffffff;
    color: #10b981;
    box-shadow: 0 1px 3px rgba(16, 24, 40, 0.10);
}
.cl-periodo-custom {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: auto;
}
.cl-periodo-label {
    font-size: 0.75rem;
    color: #6b7280;
    margin: 0;
}
.cl-periodo-custom .form-control {
    width: auto;
    min-width: 140px;
}

/* ====================================================================
   PAGINACAO PADRAO
   ==================================================================== */
.cl-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.85rem 1rem;
    background: #fafafa;
    border-top: 1px solid var(--cl-border, #e5e7eb);
    font-size: 0.85rem;
    color: #6b7280;
}
.cl-pagination-info { font-size: 0.82rem; }
.cl-pagination-nav {
    display: inline-flex;
    gap: 0.25rem;
}
.cl-pagination-nav .btn {
    min-width: 36px;
    padding: 0.32rem 0.55rem;
    font-size: 0.85rem;
}
.cl-pagination-nav .btn.active {
    background: #10b981;
    color: #fff;
    border-color: #10b981;
}

/* ====================================================================
   FILTROS DE ORCAMENTOS - tabs estilo "pill" elegante
   ==================================================================== */
.cl-orc-filtros {
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 12px;
    padding: 0.75rem 0.85rem;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
}
.cl-orc-filtros-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
}
.cl-orc-tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.42rem 0.85rem;
    background: #f3f4f6;
    color: #4b5563;
    border-radius: 999px;
    font-size: 0.83rem;
    font-weight: 500;
    text-decoration: none !important;   /* gov-br aplicava underline no <a> */
    transition: background 0.12s ease, color 0.12s ease, transform 0.12s ease;
    border: 1px solid transparent;
    white-space: nowrap;
    text-align: center;
}
/* Força sem sublinhado em todos os estados/descendentes — evita
   herança do reset gov-br/Bootstrap que coloca underline em <a>. */
.cl-orc-tab,
.cl-orc-tab:hover,
.cl-orc-tab:focus,
.cl-orc-tab:active,
.cl-orc-tab:visited,
.cl-orc-tab span {
    text-decoration: none !important;
}

/* Padrão geral: links que viram "chips/pills/cards" não devem ter
   sublinhado herdado do gov-br (que aplica underline em <a>). Aqui
   cobre proativamente as classes do projeto que renderizam <a>
   estilizado como botão/cartão/aba/etc — economiza ter que repetir
   o override em cada uma. */
a.cl-orc-tab,
a.cl-cli-card,
a.cl-menu-item,
a.cl-icon-btn,
a.cl-chat-card,
a.cl-mon-kpi,
a.cl-pag-card,
a.cl-novo-card,
a.cl-chip,
a.cl-filtro-chip,
a.cl-periodo-chip,
a.cl-btn-conversar,
a.cl-cli-edit-fab,
a.btn,
a.cl-fin-card-rd,
a.cl-fin-card-pend,
a.cl-fin-nav-card,
a.cl-fin-mes-nav-btn,
a.cl-bal-mes-nav-btn,
a.cl-fg-mes-arrow,
a.cl-kanban-card,
a.cl-mon-concluido-card,
.cl-orc-tab a,
.cl-cli-card a,
.cl-menu-item a,
.cl-kanban-card *,
.cl-mon-concluido-card *,
.nav-pills .nav-link {
    text-decoration: none !important;
}
a.cl-orc-tab:hover, a.cl-orc-tab:focus,
a.cl-cli-card:hover, a.cl-cli-card:focus,
a.cl-menu-item:hover, a.cl-menu-item:focus,
a.btn:hover, a.btn:focus,
a.cl-fin-card-rd:hover, a.cl-fin-card-rd:focus,
a.cl-fin-card-pend:hover, a.cl-fin-card-pend:focus,
a.cl-fin-nav-card:hover, a.cl-fin-nav-card:focus,
a.cl-fin-mes-nav-btn:hover, a.cl-fin-mes-nav-btn:focus,
a.cl-bal-mes-nav-btn:hover, a.cl-bal-mes-nav-btn:focus,
a.cl-fg-mes-arrow:hover, a.cl-fg-mes-arrow:focus,
.nav-pills .nav-link:hover, .nav-pills .nav-link:focus {
    text-decoration: none !important;
}
/* Linha de status (filtro): grid uniforme — todos os chips ocupam EXATAMENTE
   a mesma largura. minmax(125px, 1fr) garante mínimo de 125px e cresce
   proporcionalmente; em telas estreitas, quebra em mais linhas mantendo
   largura uniforme. justify-content:center alinha texto + badge no centro. */
.cl-orc-filtros-row--status {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
    gap: 0.45rem;
}
.cl-orc-tab:hover {
    background: #e5e7eb;
    color: #111827;
    transform: translateY(-1px);
}
.cl-orc-tab.active {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.30);
}
.cl-orc-tab.active .cl-orc-tab-count {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}
.cl-orc-tab-count {
    background: #ffffff;
    color: #4b5563;
    border-radius: 999px;
    padding: 0 0.5rem;
    font-size: 0.72rem;
    font-weight: 700;
    min-width: 20px;
    text-align: center;
    line-height: 18px;
}

/* ====================================================================
   BOTOES DE ACAO REDONDOS (usar em colunas "Acoes" das tabelas)
   ==================================================================== */
.cl-row-actions {
    display: inline-flex;
    gap: 0.4rem;
    align-items: center;
    justify-content: flex-end;
}
.cl-icon-btn {
    width: 34px;
    height: 34px;
    border-radius: 10px;     /* arredondado em todos os 4 cantos */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border: 1.5px solid;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
    font-size: 0.85rem;
    text-decoration: none;
    line-height: 1;
}
.cl-icon-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(16, 24, 40, 0.10);
}
.cl-icon-btn-primary { color: #047857; border-color: #10b981; }
.cl-icon-btn-primary:hover { background: #10b981; color: #ffffff; }
.cl-icon-btn-warning { color: #b45309; border-color: #f59e0b; }
.cl-icon-btn-warning:hover { background: #f59e0b; color: #ffffff; }
.cl-icon-btn-success { color: #047857; border-color: #34d399; }
.cl-icon-btn-success:hover { background: #34d399; color: #ffffff; }
.cl-icon-btn-danger { color: #b91c1c; border-color: #ef4444; }
.cl-icon-btn-danger:hover { background: #ef4444; color: #ffffff; }

/* Botao "observacao do item" — bolinha verde no canto quando preenchido */
.cl-orc-obs-btn { position: relative; }
.cl-orc-obs-btn.tem-obs {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
}
.cl-orc-obs-btn.tem-obs::after {
    content: '';
    position: absolute;
    top: -3px;
    right: -3px;
    width: 9px;
    height: 9px;
    background: #f59e0b;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

/* Numero do orcamento monoespacado */
.cl-orc-num {
    font-family: 'JetBrains Mono', 'Fira Mono', Menlo, monospace;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    background: #f3f4f6;
    padding: 0.2rem 0.55rem;
    border-radius: 6px;
    letter-spacing: 0.5px;
}

/* ====================================================================
   BALANCO - PDV (campo unico de busca em destaque)
   ==================================================================== */
.cl-bal-pdv-card {
    border: 1px solid #d1fae5;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.08);
}
.cl-bal-pdv-head {
    background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 100%);
    color: #065f46;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.cl-bal-pdv-hint {
    margin-left: auto;
    font-size: 0.75rem;
    color: #6b7280;
    font-weight: 400;
}
.cl-bal-pdv-hint kbd {
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    font-size: 0.7rem;
    color: #374151;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
.cl-bal-pdv-form {
    display: grid;
    grid-template-columns: 1fr 100px 70px;    /* busca maior, qtd menor, btn so' icone */
    gap: 0.75rem;
    align-items: start;       /* todos os campos alinham pelo TOPO (label + input) */
}
@media (max-width: 768px) {
    .cl-bal-pdv-form { grid-template-columns: 1fr; }
}
.cl-bal-pdv-input-wrap {
    position: relative;
}
.cl-bal-pdv-input-wrap .form-control {
    padding-left: 2.5rem;
    font-size: 1.05rem;
    font-weight: 500;
}
.cl-bal-pdv-icon {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #10b981;
    font-size: 1rem;
    z-index: 2;
    pointer-events: none;     /* evita roubar clique do input */
}
/* Faixa de ajuda abaixo do form do PDV - separada do grid para nao
   interferir no alinhamento dos campos. */
.cl-bal-pdv-help {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #6b7280;
    font-size: 0.74rem;
    margin-top: 0.85rem;
    padding: 0.45rem 0.7rem;
    background: #f9fafb;
    border-left: 3px solid #10b981;
    border-radius: 4px;
    line-height: 1.35;
}
.cl-bal-pdv-help i {
    color: #10b981;
    flex-shrink: 0;
}

/* Dark mode: o card de "Adicionar item" tinha fundo branco no header
   (gradient claro) e na faixa de ajuda abaixo (#f9fafb), que ficavam
   gritantes no fundo escuro. Aqui aplicamos tons escuros consistentes
   com o resto do tema, mantendo o destaque verde da borda esquerda. */
.cl-theme-dark .cl-bal-pdv-card {
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-bal-pdv-head {
    background: linear-gradient(180deg, var(--cl-bg-elev-2) 0%, var(--cl-bg-elev) 100%) !important;
    color: var(--cl-primary) !important;
    border-bottom: 1px solid var(--cl-border);
}
.cl-theme-dark .cl-bal-pdv-hint {
    color: var(--cl-text-muted) !important;
}
.cl-theme-dark .cl-bal-pdv-hint kbd {
    background: var(--cl-bg) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text-soft) !important;
}
.cl-theme-dark .cl-bal-pdv-help {
    background: var(--cl-bg-elev-2) !important;
    color: var(--cl-text-soft) !important;
    border-left-color: var(--cl-primary) !important;
}
.cl-bal-qtd-input-lg {
    font-weight: 700 !important;
}

/* ====================================================================
   BALANCO - tabela compacta (suporta listagem grande)
   ==================================================================== */
.cl-bal-tabela {
    font-size: 0.85rem;
}
.cl-bal-tabela > tbody > tr > td,
.cl-bal-tabela > thead > tr > th,
.cl-bal-tabela > tfoot > tr > td {
    padding: 0.4rem 0.65rem;
    vertical-align: middle;
}
.cl-bal-tabela > thead > tr > th {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    font-weight: 600;
    background: #fafafa;
    border-bottom: 1.5px solid var(--cl-border, #e5e7eb);
}
.cl-bal-tabela > tbody > tr {
    transition: background-color 0.08s ease;
}
.cl-bal-tabela > tbody > tr:hover {
    background-color: #f9fafb;
}
.cl-bal-tabela-totais {
    background: #f3f4f6 !important;
    font-size: 0.85rem;
}
.cl-bal-tabela-totais td {
    border-top: 2px solid var(--cl-border, #e5e7eb) !important;
    color: #111827;
}

/* Imagem compacta na linha */
.cl-bal-img {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.cl-bal-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-bal-img-empty { color: #9ca3af; font-size: 0.95rem; }

.cl-bal-nome {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    font-size: 0.86rem;
}
.cl-bal-cod {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    margin-top: 0.1rem;
}

/* ── Dark mode pra tabela de balanço ──────────────────────────────
   No tema claro o nome do produto usa #111827 (quase preto), que
   fica praticamente invisível sobre o fundo escuro do dark mode.
   Aqui forçamos texto branco no nome e tons claros no resto da
   linha (totais, cabeçalho, código de barras) pra manter legibilidade. */
.cl-theme-dark .cl-bal-nome {
    color: var(--cl-text) !important;
}
.cl-theme-dark .cl-bal-cod,
.cl-theme-dark .cl-bal-meta-row .cl-bal-cod {
    color: var(--cl-text-muted) !important;
}
.cl-theme-dark .cl-bal-tabela > thead > tr > th {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text-soft);
    border-bottom-color: var(--cl-border);
}
.cl-theme-dark .cl-bal-tabela > tbody > tr {
    color: var(--cl-text);
}
.cl-theme-dark .cl-bal-tabela > tbody > tr:hover {
    background-color: var(--cl-bg-elev-2);
}
.cl-theme-dark .cl-bal-tabela > tbody > tr > td {
    color: var(--cl-text);
    border-bottom-color: var(--cl-border-soft);
}
.cl-theme-dark .cl-bal-tabela-totais {
    background: var(--cl-bg-elev-2) !important;
}
.cl-theme-dark .cl-bal-tabela-totais td {
    color: var(--cl-text) !important;
    border-top-color: var(--cl-border) !important;
}

.cl-bal-tag {
    background: #f3f4f6;
    color: #4b5563;
    padding: 0.12rem 0.5rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.cl-bal-tag-warning { background: #fef3c7; color: #92400e; }

.cl-bal-qtd-input {
    width: 72px;
    text-align: center;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.2rem 0.4rem;
    height: 28px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}
/* Feedback visual: input fica esmaecido enquanto salva, e flash verde quando salvo */
.cl-bal-qtd-loading {
    opacity: 0.6;
    background-color: #f3f4f6 !important;
}
.cl-bal-qtd-saved {
    background-color: #d1fae5 !important;
    border-color: #10b981 !important;
}

.cl-bal-dif {
    font-weight: 700;
    font-size: 0.78rem;
    padding: 0.1rem 0.55rem;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    display: inline-block;
    min-width: 40px;
    text-align: center;
}
.cl-bal-dif.positive { background: #d1fae5; color: #047857; }
.cl-bal-dif.negative { background: #fee2e2; color: #b91c1c; }

/* O cl-icon-btn padrao e 34px, fica grande na linha compacta - reduz so aqui */
.cl-bal-tabela .cl-icon-btn {
    width: 28px;
    height: 28px;
    font-size: 0.75rem;
}

/* ====================================================================
   OVERLAY DE SELECAO (multiplos resultados de busca em balanco/orcamento)
   ------------------------------------------------------------
   Em vez do modal do Bootstrap (que pode ficar atras do header gov.br
   ou ser clipado por containers com transform), usamos overlay custom
   posicionado em relacao ao viewport com z-index acima de tudo.
   ==================================================================== */
.cl-select-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100000;
    padding: 1rem;
    animation: clOverlayFadeIn 0.15s ease-out;
}
@keyframes clOverlayFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.cl-select-dialog {
    background: #ffffff;
    border-radius: 14px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.30);
    animation: clDialogPopIn 0.18s ease-out;
}
@keyframes clDialogPopIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.cl-select-dialog-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--cl-border, #e5e7eb);
}
.cl-select-dialog-head h5 {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
}
.cl-select-dialog-close {
    background: transparent;
    border: none;
    color: #6b7280;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.cl-select-dialog-close:hover {
    background: #f3f4f6;
    color: #111827;
}
.cl-select-dialog-body {
    padding: 0.85rem 1.25rem 1.1rem;
    overflow-y: auto;
    overflow-x: hidden;     /* impede scroll horizontal do hover translateX */
}

/* Avatar de produto clicavel (abre popup de detalhe) */
.cl-prod-clicavel {
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    position: relative;
}
.cl-prod-clicavel:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 10px rgba(16, 185, 129, 0.25);
}
.cl-prod-clicavel::after {
    content: '\f06e';
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    inset: 0;
    background: rgba(16, 185, 129, 0.85);
    color: #ffffff;
    border-radius: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
}
.cl-prod-clicavel:hover::after { opacity: 1; }

/* ====================================================================
   POPUP DE DETALHE DE PRODUTO (clique no avatar abre)
   ==================================================================== */
.cl-prod-detalhe-dialog {
    max-width: 720px;
}
.cl-prod-detalhe-body {
    padding: 0;
}
.cl-prod-galeria-main {
    width: 100%;
    height: 280px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.cl-prod-galeria-main img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #f9fafb;
}
.cl-prod-galeria-main.empty {
    color: #9ca3af;
    font-size: 4rem;
    background: linear-gradient(135deg, #f0fdf4 0%, #d1fae5 100%);
}
.cl-prod-galeria-thumbs {
    display: flex;
    gap: 0.4rem;
    padding: 0.6rem 1rem;
    overflow-x: auto;
    background: #fafafa;
    border-bottom: 1px solid var(--cl-border, #e5e7eb);
}
.cl-prod-galeria-thumb {
    width: 48px;
    height: 48px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    background: #f3f4f6;
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: border-color 0.15s ease, transform 0.12s ease;
}
.cl-prod-galeria-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cl-prod-galeria-thumb:hover { border-color: #10b981; }
.cl-prod-galeria-thumb.active { border-color: #10b981; transform: scale(1.05); }

.cl-prod-cabecalho {
    padding: 1rem 1.25rem 0.75rem;
    border-bottom: 1px solid var(--cl-border, #e5e7eb);
}
.cl-prod-tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0.55rem;
    font-size: 0.75rem;
}
.cl-prod-categoria-tag {
    background: #e0f2fe;
    color: #075985;
    padding: 0.18rem 0.65rem;
    border-radius: 999px;
    font-weight: 600;
}
.cl-prod-ean {
    font-family: 'JetBrains Mono', monospace;
    color: #6b7280;
    font-size: 0.72rem;
}
.cl-prod-nome {
    margin: 0 0 0.5rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.25;
    font-size: 1.25rem;
}
.cl-prod-meta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 0.6rem;
}
.cl-prod-estoque {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.cl-prod-estoque.ok { color: #047857; }
.cl-prod-estoque.alerta { color: #b45309; }
.cl-prod-estoque.indisponivel { color: #b91c1c; }
.cl-prod-preco {
    font-size: 1.6rem;
    font-weight: 800;
    color: #047857;
    line-height: 1;
}
.cl-prod-preco small {
    font-size: 0.85rem;
    color: #6b7280;
    font-weight: 500;
    margin-left: 0.2rem;
}
.cl-prod-preco-promo {
    font-size: 1.6rem;
    font-weight: 800;
    color: #b91c1c;
    line-height: 1;
}
.cl-prod-preco-original {
    color: #9ca3af;
    font-size: 0.95rem;
    margin-top: 0.15rem;
}
.cl-prod-preco.sob-consulta {
    font-size: 1.05rem;
    color: #6b7280;
    font-style: italic;
    font-weight: 600;
}

.cl-prod-secao-titulo {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    font-weight: 700;
    color: #111827;
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 0.85rem 1.25rem 0.4rem;
}
.cl-prod-secao-titulo i { color: #10b981; }
.cl-prod-descricao {
    padding: 0 1.25rem 0.75rem;
    color: #4b5563;
    font-size: 0.88rem;
    line-height: 1.5;
    margin: 0;
    white-space: pre-wrap;
}
.cl-prod-specs-table {
    width: calc(100% - 2.5rem);
    margin: 0 1.25rem 1rem;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.cl-prod-specs-table tr {
    border-bottom: 1px solid #f3f4f6;
}
.cl-prod-specs-table tr:last-child { border-bottom: none; }
.cl-prod-specs-table td {
    padding: 0.45rem 0.6rem;
}
.cl-prod-specs-table td:first-child {
    color: #6b7280;
    font-weight: 600;
    width: 40%;
    background: #fafafa;
}
.cl-prod-specs-table td:last-child {
    color: #111827;
}

/* ====================================================================
   BALANCO - Modal de selecao (multiplos resultados) [legado, mantido]
   ==================================================================== */
.cl-bal-select-modal { border: none; border-radius: 14px; }
/* Lista nao precisa do proprio scroll - o .cl-select-dialog-body ja faz scroll
   vertical e tem overflow-x: hidden. Manter ambos cria barras conflitantes. */
.cl-bal-select-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cl-bal-select-item {
    margin: 0;
}
.cl-bal-select-btn {
    width: 100%;
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.6rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    text-align: left;
    cursor: pointer;
    transition: background 0.12s ease, border-color 0.12s ease, box-shadow 0.12s ease;
    color: #374151;
}
/* Hover sem transform (que causaria overflow horizontal) - usa box-shadow
   verde para dar feedback de "selecionavel" e desloca apenas a seta interna. */
.cl-bal-select-btn:hover {
    background: #f0fdf4;
    border-color: #10b981;
    box-shadow: inset 3px 0 0 0 #10b981;
}
.cl-bal-select-btn > i.fa-chevron-right {
    transition: transform 0.12s ease, color 0.12s ease;
    color: #9ca3af;
}
.cl-bal-select-btn:hover > i.fa-chevron-right {
    transform: translateX(3px);
    color: #10b981;
}
.cl-bal-select-img {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    color: #9ca3af;
}
.cl-bal-select-img img { width: 100%; height: 100%; object-fit: cover; }
.cl-bal-select-info { flex: 1; min-width: 0; }
.cl-bal-select-nome {
    font-weight: 600;
    color: #111827;
    font-size: 0.92rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-bal-select-meta {
    font-size: 0.74rem;
    color: #6b7280;
    margin-top: 0.15rem;
    display: flex;
    gap: 0.85rem;
}

/* ====================================================================
   GRID DE PUBLICIDADE - cards refinados com banner contido
   ==================================================================== */
.cl-pub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: 1rem;
}
.cl-pub-card {
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 14px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
    transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.cl-pub-card:hover {
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.10);
    transform: translateY(-2px);
}
.cl-pub-banner {
    position: relative;
    width: 100%;
    height: 150px;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #cbd5e1;
}
.cl-pub-banner i { font-size: 2.4rem; }
.cl-pub-banner.empty { background: #f3f4f6; }
.cl-pub-banner-status {
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.25rem 0.65rem;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #ffffff;
    z-index: 2;
}
.cl-pub-body {
    padding: 0.85rem;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.cl-pub-title {
    font-weight: 700;
    color: #111827;
    font-size: 1rem;
    line-height: 1.25;
}
.cl-pub-desc {
    color: #6b7280;
    font-size: 0.84rem;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.cl-pub-meta {
    font-size: 0.78rem;
    color: #4b5563;
}
.cl-pub-footer {
    padding: 0.65rem 0.85rem;
    background: #fafafa;
    border-top: 1px solid var(--cl-border, #e5e7eb);
    display: flex;
    justify-content: space-between;
    gap: 0.5rem;
    align-items: center;
}

/* ====================================================================
   GRID DE CLIENTES (cards mais fit que cl-people-grid)
   ==================================================================== */
.cl-cli-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 0.75rem;
    align-items: stretch;        /* cards na mesma linha viram a mesma altura */
}
.cl-cli-card {
    background: #ffffff;
    border: 1px solid var(--cl-border, #e5e7eb);
    border-radius: 10px;
    padding: 0.85rem;
    transition: box-shadow 0.15s ease, transform 0.15s ease;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    position: relative;          /* base para o FAB de editar */
    height: 100%;                /* ocupa toda altura do slot do grid */
}
/* Botao redondo "editar" no canto superior direito do card de cliente.
   So aparece para stubs (cliente sem app). Posicao absoluta nao quebra
   o flow do card e fica fora da linha do nome (ml-auto natural). */
.cl-cli-edit-fab {
    position: absolute;
    top: 0.55rem;
    right: 0.55rem;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1.5px solid #e5e7eb;
    background: #ffffff;
    color: #047857;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: transform 0.12s ease, background 0.12s ease,
                color 0.12s ease, border-color 0.12s ease;
    font-size: 0.78rem;
    z-index: 2;
    line-height: 1;
}
.cl-cli-edit-fab:hover {
    background: #10b981;
    color: #ffffff;
    border-color: #10b981;
    transform: scale(1.05);
    text-decoration: none;
}
.cl-cli-card:hover {
    box-shadow: 0 4px 14px rgba(16, 24, 40, 0.08);
    transform: translateY(-1px);
}
.cl-cli-head {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.cl-cli-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: linear-gradient(135deg, #10b981 0%, #047857 100%);
    color: #ffffff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.cl-cli-avatar img { width: 100%; height: 100%; object-fit: cover; }
.cl-cli-info {
    flex: 1;
    min-width: 0;
}
.cl-cli-name {
    font-weight: 600;
    color: #111827;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.92rem;
}
.cl-cli-meta {
    font-size: 0.75rem;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cl-cli-extras {
    font-size: 0.78rem;
    color: #6b7280;
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}
.cl-cli-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.4rem;
    flex-wrap: wrap;
}

/* Modificador "stack" — empilha as linhas de acao do card de cliente.
   Linha 1: 2 botoes lado a lado com mesma largura/altura.
   Linha 2: botao de orcamento (largura total).
   margin-top: auto empurra todo o bloco de acoes pro rodape do card,
   garantindo que botoes fiquem alinhados na base independente da
   quantidade de informacoes (email, CPF, telefone, etc) acima. */
.cl-cli-actions-stack {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0.4rem;
    margin-top: auto;
}
.cl-cli-actions-row {
    display: flex;
    gap: 0.4rem;
    width: 100%;
}
/* flex: 1 1 0 + min-width: 0 garante larguras EXATAMENTE iguais — todos
   partem de zero e crescem proporcionalmente, ignorando o tamanho do
   texto interno. Altura igual vem do mesmo .btn-sm + line-height. */
.cl-cli-actions-row > .btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 0.4rem;
    padding-right: 0.4rem;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Botoes de largura total nas linhas seguintes (orcamento, editar) usam
   o mesmo font-size para harmonizar com a linha de cima. */
.cl-cli-actions-stack > .btn,
.cl-cli-actions-stack > form > .btn {
    font-size: 0.78rem;
}

/* Estado "enviando" - bolha esmaecida com icone de relogio enquanto o
   servidor nao confirma. Permite ao usuario perceber atrasos no envio. */
.cl-chat-row.sending .cl-chat-bubble {
    opacity: 0.65;
    animation: cl-chat-pulse 1.6s ease-in-out infinite;
}
.cl-chat-row.sending .cl-chat-bubble-time {
    font-style: italic;
    opacity: 0.85;
}
@keyframes cl-chat-pulse {
    0%, 100% { opacity: 0.65; }
    50%      { opacity: 0.95; }
}

/* Estado "falhou" - destaque vermelho com link de retry */
.cl-chat-row.failed .cl-chat-bubble {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border: 1px solid #fecaca;
}
.cl-chat-row.failed .cl-chat-bubble-time {
    color: #b91c1c;
}
.cl-chat-row.failed .cl-chat-retry {
    color: #b91c1c;
    text-decoration: underline;
    font-weight: 600;
}
.cl-chat-row.failed .cl-chat-retry:hover {
    color: #7f1d1d;
}

/* Card de conversa de chat - reusa cl-cli-card mas com clique que abre messenger */
.cl-chat-card { cursor: pointer; }
.cl-chat-card:hover { border-color: #10b981; }
.cl-chat-prev {
    color: #4b5563;
    font-size: 0.78rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
/* Badge de mensagens nao lidas no card de conversa */
.cl-chat-naolidas-pill {
    background: #ef4444;
    color: #ffffff;
    border-radius: 999px;
    padding: 0.05rem 0.45rem;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1.3;
    min-width: 18px;
    text-align: center;
    flex-shrink: 0;
}

/* Botao WhatsApp (verde oficial). Mesmo padrao visual do app. */
.cl-btn-whatsapp {
    background: #25D366;
    color: #ffffff;
    border: 1px solid #25D366;
    transition: background 0.12s ease, transform 0.12s ease;
    font-weight: 500;
}
.cl-btn-whatsapp:hover {
    background: #1ebe57;
    border-color: #1ebe57;
    color: #ffffff;
    transform: translateY(-1px);
}
.cl-btn-whatsapp.disabled,
.cl-btn-whatsapp:disabled {
    background: #e5e7eb !important;
    color: #9ca3af !important;
    border-color: #e5e7eb !important;
    cursor: not-allowed;
    transform: none;
}

/* ====================================================================
   GALERIA DE IMAGENS DO PRODUTO (1 principal + 4 extras)
   ==================================================================== */
.cl-prod-galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.cl-prod-img-slot {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #f8fafc;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px dashed #cbd5e1;
    border-radius: 12px;
    cursor: pointer;
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.cl-prod-img-slot:hover {
    border-color: #10b981;
    transform: translateY(-1px);
}
.cl-prod-img-slot:not(.empty) {
    border-style: solid;
    border-color: #10b981;
}
.cl-prod-img-slot[data-tipo="principal"]:not(.empty) {
    border-color: #f59e0b;
    border-width: 3px;
}
.cl-prod-img-tag {
    position: absolute;
    top: 6px;
    left: 6px;
    background: #f59e0b;
    color: #ffffff;
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 0.15rem 0.45rem;
    border-radius: 999px;
    z-index: 2;
    letter-spacing: 0.5px;
}
.cl-prod-img-x {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(220, 38, 38, 0.95);
    color: #ffffff;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 2;
    transition: background 0.12s ease, transform 0.12s ease;
}
.cl-prod-img-x:hover {
    background: #b91c1c;
    transform: scale(1.1);
}
.cl-prod-img-empty {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #94a3b8;
}
.cl-prod-img-empty i {
    font-size: 1.5rem;
    margin-bottom: 0.3rem;
}

/* Linha de especificacao (chave/valor) */
.cl-prod-espec-row {
    display: grid;
    grid-template-columns: 1fr 1.5fr auto;
    gap: 0.5rem;
    align-items: center;
}

/* ====================================================================
   UPLOADER DE BANNER (Minha Loja, Publicidade, etc.)
   ==================================================================== */
.cl-banner-uploader {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
.cl-banner-preview {
    width: 100%;
    height: 200px;
    border-radius: 12px;
    background-color: #f3f4f6;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 2px dashed transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: border-color 0.15s ease;
}
.cl-banner-preview.empty {
    border-color: #cbd5e1;
}
.cl-banner-preview-empty {
    text-align: center;
    color: #94a3b8;
}
.cl-banner-preview-empty i {
    font-size: 2.5rem;
    display: block;
    margin-bottom: 0.4rem;
}
.cl-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Icone na celula de categorias (lista em tabela) */
.cl-cat-icon-cell {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #f3f4f6;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    overflow: hidden;
}
.cl-cat-icon-cell img {
    width: 100%; height: 100%; object-fit: cover;
}

/* Bloco de codigo de confirmacao da entrega */
.cl-orc-codigo-bloco {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
}
.cl-orc-codigo-input {
    font-family: 'JetBrains Mono', 'Fira Mono', Menlo, monospace;
    font-size: 1.4rem !important;
    font-weight: 700 !important;
    text-align: center;
    letter-spacing: 0.6rem;
    background: #ffffff !important;
    border: 2px solid #fdba74 !important;
    color: #9a3412;
}
.cl-orc-codigo-input:focus {
    border-color: #ea580c !important;
    box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.15);
}
/* Dark mode: o card de código de confirmação MANTÉM o fundo creme/laranja
   (highlight intencional, igual no claro). O problema é que o reset
   global de .text-muted vira slate-300, que some no fundo cream. Aqui
   forçamos cores ESCURAS (laranja-800) pros textos do card pra continuar
   contrastando bem com o fundo claro. */
.cl-theme-dark .cl-orc-codigo-bloco .form-label,
.cl-theme-dark .cl-orc-codigo-bloco label,
.cl-theme-dark .cl-orc-codigo-bloco label.text-muted,
.cl-theme-dark .cl-orc-codigo-bloco .form-label i {
    color: #7c2d12 !important;     /* orange-900 */
    font-weight: 600;
}
.cl-theme-dark .cl-orc-codigo-bloco small,
.cl-theme-dark .cl-orc-codigo-bloco small.text-muted {
    color: #9a3412 !important;     /* orange-800 */
}

/* Resumo financeiro do orcamento — bloco compacto com subtotal,
   descontos, frete e total geral. Linhas finas separadas por hairline,
   com a linha "Total geral" destacada via borda superior + negrito. */
.cl-orc-resumo {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.6rem 0.85rem;
    background: #fafafa;
}
.cl-orc-resumo-linha {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 0.3rem 0;
    font-size: 0.85rem;
    color: #4b5563;
}
.cl-orc-resumo-linha + .cl-orc-resumo-linha {
    border-top: 1px dashed #e5e7eb;
}
.cl-orc-resumo-lbl { color: #4b5563; }
.cl-orc-resumo-val {
    font-weight: 600;
    color: #111827;
    font-variant-numeric: tabular-nums;
}
/* Valor parcial: sub-total intermediário entre os itens (preço original
   ± ajustes) e os ajustes finais (desconto geral + frete). Borda
   superior fina pra separar visualmente do bloco anterior. */
.cl-orc-resumo-parcial {
    border-top: 1px solid #d1d5db !important;
    margin-top: 0.2rem;
    padding-top: 0.45rem !important;
    font-weight: 600;
    color: #111827 !important;
}
.cl-orc-resumo-parcial .cl-orc-resumo-lbl,
.cl-orc-resumo-parcial .cl-orc-resumo-val {
    color: #111827;
}
.cl-theme-dark .cl-orc-resumo-parcial {
    border-top-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-orc-resumo-parcial .cl-orc-resumo-lbl,
.cl-theme-dark .cl-orc-resumo-parcial .cl-orc-resumo-val {
    color: var(--cl-text);
}
.cl-orc-resumo-total {
    border-top: 2px solid #111827 !important;
    margin-top: 0.2rem;
    padding-top: 0.55rem !important;
    font-size: 0.95rem;
}
.cl-orc-resumo-total .cl-orc-resumo-lbl,
.cl-orc-resumo-total .cl-orc-resumo-val {
    color: var(--cl-primary, #047857);
    font-weight: 700;
    font-size: 1rem;
}
.cl-theme-dark .cl-orc-resumo {
    background: var(--cl-bg-elev-2);
    border-color: var(--cl-border);
}
.cl-theme-dark .cl-orc-resumo-linha { color: var(--cl-text-soft); }
.cl-theme-dark .cl-orc-resumo-linha + .cl-orc-resumo-linha {
    border-top-color: var(--cl-border-soft);
}
.cl-theme-dark .cl-orc-resumo-lbl { color: var(--cl-text-soft); }
.cl-theme-dark .cl-orc-resumo-val { color: var(--cl-text); }
.cl-theme-dark .cl-orc-resumo-total {
    border-top-color: var(--cl-text) !important;
}
.cl-theme-dark .cl-orc-resumo-total .cl-orc-resumo-lbl,
.cl-theme-dark .cl-orc-resumo-total .cl-orc-resumo-val {
    color: var(--cl-primary);
}

/* ════════════════════════════════════════════════════════════════
   DARK MODE — toggle via .cl-theme-dark na <html>
   Estratégia: variáveis CSS reaproveitadas + overrides cirúrgicos
   nos componentes que usam cores fixas (#fff, #f3f4f6, etc).
   ════════════════════════════════════════════════════════════════ */

/* Botão fixo no header pra alternar tema */
.cl-theme-toggle {
    border: 1px solid transparent;
    background: transparent;
    color: #6b7280;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    margin-right: 0.5rem;
    transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease;
    font-size: 0.95rem;
    line-height: 1;
}
.cl-theme-toggle:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #047857;
    transform: rotate(15deg);
}
/* Ícone exibido depende do tema atual: lua no claro, sol no escuro */
.cl-theme-toggle-icon-dark { display: none; }
.cl-theme-dark .cl-theme-toggle-icon-light { display: none; }
.cl-theme-dark .cl-theme-toggle-icon-dark  { display: inline-block; }
.cl-theme-dark .cl-theme-toggle {
    color: #fbbf24;
}
.cl-theme-dark .cl-theme-toggle:hover {
    background: rgba(251, 191, 36, 0.18);
    color: #fde68a;
}

/* ── Variáveis e cores do tema escuro ──────────────────────────── */
/* Paleta calibrada pra alto contraste:
   - texto principal MUITO claro (#f8fafc) pra conforto de leitura
   - muted ainda legível (#cbd5e1) - WCAG AA garantido vs bg
   - primary verde brilhante pra destacar links/ações
   - bg em camadas (3 níveis) pra hierarquia visual sem perder profundidade */
.cl-theme-dark {
    --cl-bg:           #0b1220;  /* mais escuro = mais contraste com cards */
    --cl-bg-elev:      #1e293b;  /* slate-800 - cards */
    --cl-bg-elev-2:    #2d3a52;  /* hover/active - mais claro pra dar destaque */
    --cl-border:       #475569;  /* slate-600 - borda mais visível */
    --cl-border-soft:  #334155;
    --cl-text:         #f8fafc;  /* slate-50 - texto principal MUITO claro */
    --cl-text-soft:    #e2e8f0;  /* slate-200 - secundário ainda forte */
    --cl-text-muted:   #cbd5e1;  /* slate-300 - muted legível, não invisível */
    --cl-primary:      #34d399;  /* emerald-400 - vibrante */
    --cl-primary-soft: #064e3b;
    --cl-danger:       #f87171;
    --cl-warning:      #fbbf24;
}
.cl-theme-dark body,
.cl-theme-dark .template-base {
    background: var(--cl-bg) !important;
    color: var(--cl-text);
}
/* ── Bootstrap alerts no tema dark ─────────────────────────────────
   Bootstrap 5 usa tons "subtle" claros (azul/amarelo/verde/vermelho
   pastel) que ficam ilegiveis em fundo escuro. Aqui sobrescrevemos
   pra cada variante usar fundo escuro tingido + texto claro tingido,
   mantendo a leitura confortavel e a identidade da cor. */
.cl-theme-dark .alert-info {
    background-color: #1e3a5f !important;   /* azul-marinho escuro */
    border-color: #2c5282 !important;
    color: #bfdbfe !important;              /* azul-100 */
}
.cl-theme-dark .alert-info .alert-link,
.cl-theme-dark .alert-info strong { color: #dbeafe !important; }

.cl-theme-dark .alert-warning {
    background-color: #4a2f10 !important;   /* amber-900 dim */
    border-color: #78350f !important;
    color: #fde68a !important;              /* amber-200 */
}
.cl-theme-dark .alert-warning .alert-link,
.cl-theme-dark .alert-warning strong { color: #fef3c7 !important; }

.cl-theme-dark .alert-success {
    background-color: var(--cl-primary-soft) !important; /* emerald-900 */
    border-color: #047857 !important;
    color: #a7f3d0 !important;              /* emerald-200 */
}
.cl-theme-dark .alert-success .alert-link,
.cl-theme-dark .alert-success strong { color: #d1fae5 !important; }

.cl-theme-dark .alert-danger {
    background-color: #450a0a !important;   /* red-950 */
    border-color: #7f1d1d !important;
    color: #fecaca !important;              /* red-200 */
}
.cl-theme-dark .alert-danger .alert-link,
.cl-theme-dark .alert-danger strong { color: #fee2e2 !important; }

.cl-theme-dark .alert-secondary {
    background-color: var(--cl-bg-elev-2) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text-soft) !important;
}
/* Header */
.cl-theme-dark .br-header {
    background: var(--cl-bg-elev) !important;
    color: var(--cl-text);
}
/* Remove o separador interno que o gov-br aplica entre header-top e
   header-bottom — no modo escuro virava uma linha clara extra ao lado
   da borda gradiente verde, dando a aparência de DUAS linhas entre o
   header e o corpo. Aqui suprimimos pra deixar só a linha gradient. */
.cl-theme-dark .br-header .header-top,
.cl-theme-dark .br-header .header-bottom {
    border-top-color: transparent !important;
    border-bottom-color: transparent !important;
    box-shadow: none !important;
}
.cl-theme-dark .header-title {
    color: var(--cl-text) !important;
    font-weight: 600;
}
.cl-theme-dark .header-subtitle {
    color: var(--cl-text-soft) !important;
    opacity: 0.9;
}
.cl-theme-dark .header-sign {
    color: var(--cl-text) !important;
    font-weight: 600;
}
/* Logo do header (icone + nome) — antes apareciam esmaecidos */
.cl-theme-dark .header-logo,
.cl-theme-dark .header-logo * {
    color: var(--cl-text) !important;
}
/* Botao do menu burger */
.cl-theme-dark .br-button {
    color: var(--cl-text) !important;
}
.cl-theme-dark .br-button:hover {
    background: var(--cl-bg-elev-2) !important;
}
/* Footer */
.cl-theme-dark .br-footer {
    background: var(--cl-bg-elev) !important;
    color: var(--cl-text-muted);
    border-top: 1px solid var(--cl-border);
}
/* Cards Bootstrap genéricos */
.cl-theme-dark .card {
    background-color: var(--cl-bg-elev) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text);
}
.cl-theme-dark .card-header {
    background-color: var(--cl-bg-elev-2) !important;
    border-bottom-color: var(--cl-border) !important;
    color: var(--cl-text);
}
.cl-theme-dark .card-footer {
    background-color: var(--cl-bg-elev-2) !important;
    border-top-color: var(--cl-border) !important;
    color: var(--cl-text-soft);
}
/* Inputs / selects / textareas */
.cl-theme-dark .form-control,
.cl-theme-dark .form-select {
    background-color: var(--cl-bg) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text);
}
.cl-theme-dark .form-control::placeholder { color: var(--cl-text-muted); }
.cl-theme-dark .form-control:focus,
.cl-theme-dark .form-select:focus {
    background-color: var(--cl-bg) !important;
    border-color: var(--cl-primary) !important;
    color: var(--cl-text);
    box-shadow: 0 0 0 0.2rem rgba(52, 211, 153, 0.15);
}
.cl-theme-dark .form-control:disabled,
.cl-theme-dark .form-control[readonly] {
    background-color: var(--cl-bg-elev-2) !important;
    color: var(--cl-text-muted) !important;
}
.cl-theme-dark .form-label,
.cl-theme-dark label {
    color: var(--cl-text-soft);
}
/* Tabelas Bootstrap */
.cl-theme-dark .table {
    --bs-table-bg: var(--cl-bg-elev);
    --bs-table-color: var(--cl-text);
    --bs-table-border-color: var(--cl-border);
    --bs-table-striped-bg: var(--cl-bg-elev-2);
    --bs-table-striped-color: var(--cl-text);
    --bs-table-hover-bg: var(--cl-bg-elev-2);
    --bs-table-hover-color: var(--cl-text);
    color: var(--cl-text);
    border-color: var(--cl-border);
}
.cl-theme-dark .table thead th {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text);
    border-color: var(--cl-border);
}
/* Dropdowns */
.cl-theme-dark .dropdown-menu {
    background-color: var(--cl-bg-elev) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text);
}
.cl-theme-dark .dropdown-item {
    color: var(--cl-text);
}
.cl-theme-dark .dropdown-item:hover,
.cl-theme-dark .dropdown-item:focus {
    background-color: var(--cl-bg-elev-2);
    color: var(--cl-text);
}
.cl-theme-dark .dropdown-divider {
    border-color: var(--cl-border) !important;
}
/* Modais */
.cl-theme-dark .modal-content {
    background-color: var(--cl-bg-elev) !important;
    color: var(--cl-text);
    border-color: var(--cl-border);
}
.cl-theme-dark .modal-header,
.cl-theme-dark .modal-footer {
    border-color: var(--cl-border) !important;
}
/* Texto utilitário */
.cl-theme-dark .text-muted { color: var(--cl-text-muted) !important; }
.cl-theme-dark .text-secondary { color: var(--cl-text-muted) !important; }
.cl-theme-dark .text-dark { color: var(--cl-text) !important; }
.cl-theme-dark .text-body { color: var(--cl-text) !important; }
/* Backgrounds Bootstrap */
.cl-theme-dark .bg-light,
.cl-theme-dark .bg-white {
    background-color: var(--cl-bg-elev) !important;
    color: var(--cl-text);
}
.cl-theme-dark .bg-body,
.cl-theme-dark .bg-body-tertiary {
    background-color: var(--cl-bg) !important;
}
/* Bordas */
.cl-theme-dark .border,
.cl-theme-dark .border-top,
.cl-theme-dark .border-bottom,
.cl-theme-dark .border-start,
.cl-theme-dark .border-end {
    border-color: var(--cl-border) !important;
}
/* Mensagens flash (br-message) */
.cl-theme-dark .br-message.success {
    background: #064e3b;
    color: #d1fae5;
}
.cl-theme-dark .br-message.danger {
    background: #7f1d1d;
    color: #fee2e2;
}
.cl-theme-dark .br-message.warning {
    background: #78350f;
    color: #fef3c7;
}
.cl-theme-dark .br-message.info {
    background: #1e3a8a;
    color: #dbeafe;
}
/* Badges */
.cl-theme-dark .badge.bg-success-subtle { background-color: #064e3b !important; color: #6ee7b7 !important; }
.cl-theme-dark .badge.bg-warning-subtle { background-color: #78350f !important; color: #fcd34d !important; }
.cl-theme-dark .badge.bg-danger-subtle  { background-color: #7f1d1d !important; color: #fca5a5 !important; }
.cl-theme-dark .badge.bg-info-subtle    { background-color: #1e3a8a !important; color: #93c5fd !important; }
.cl-theme-dark .badge.bg-secondary       { background-color: var(--cl-border) !important; color: var(--cl-text); }

/* ── Componentes proprietários ConectaLojas ─────────────────── */
/* Drawer (menu lateral) */
.cl-theme-dark .cl-drawer,
.cl-theme-dark .menu-panel {
    background: var(--cl-bg-elev) !important;
    color: var(--cl-text);
}
.cl-theme-dark .cl-drawer-header {
    background: var(--cl-bg-elev-2);
    border-color: var(--cl-border);
}
.cl-theme-dark .cl-menu-item {
    color: var(--cl-text);
    border-color: var(--cl-border-soft);
}
.cl-theme-dark .cl-menu-item:hover {
    background: var(--cl-bg-elev-2);
    color: var(--cl-primary);
}
.cl-theme-dark .cl-menu-item-feature {
    background: var(--cl-bg-elev-2);
}
.cl-theme-dark .cl-section-title {
    color: var(--cl-text-muted);
    border-color: var(--cl-border-soft);
}
/* Header avatar / dropdown — pílula do usuário no canto superior direito.
   No tema claro tem fundo branco; no escuro precisa virar fundo escuro
   com bordas/contrastes pra encaixar visualmente no header. */
.cl-theme-dark .cl-header-avatar-btn {
    background: var(--cl-bg-elev-2) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-header-avatar-btn:hover {
    background: var(--cl-bg-elev) !important;
    border-color: var(--cl-primary) !important;
    box-shadow: 0 2px 6px rgba(52, 211, 153, 0.18);
}
.cl-theme-dark .cl-header-avatar-btn .fa-chevron-down {
    color: var(--cl-text-muted) !important;
}
.cl-theme-dark .cl-header-user-name { color: var(--cl-text) !important; font-weight: 600; }
.cl-theme-dark .cl-header-user-role { color: var(--cl-text-soft) !important; }
.cl-theme-dark .cl-header-dropdown { background: var(--cl-bg-elev) !important; }
.cl-theme-dark .cl-header-dropdown-head {
    background: var(--cl-bg-elev-2) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-header-dropdown-name { color: var(--cl-text) !important; font-weight: 600; }
.cl-theme-dark .cl-header-dropdown-email { color: var(--cl-text-muted) !important; }
.cl-theme-dark .cl-header-dropdown-badge {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
}
/* Banner de boas-vindas no dashboard (gradiente verde) — texto e botões
   já têm fundo escuro próprio, mas o subtitulo ficava muito apagado. */
.cl-theme-dark .cl-dashboard-welcome,
.cl-theme-dark .cl-mon-saudacao {
    border: 1px solid var(--cl-border);
}
.cl-theme-dark .cl-dashboard-welcome *,
.cl-theme-dark .cl-mon-saudacao *,
.cl-theme-dark .cl-mon-saudacao-titulo,
.cl-theme-dark .cl-mon-saudacao-sub {
    color: #ffffff !important;
    opacity: 1;
}
.cl-theme-dark .cl-mon-saudacao-sub,
.cl-theme-dark .cl-dashboard-welcome small {
    opacity: 0.92;
}
/* Links genericos — Bootstrap default vai pra azul fraco no escuro */
.cl-theme-dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.cl-menu-item) {
    color: #6ee7b7;
}
.cl-theme-dark a:not(.btn):not(.dropdown-item):not(.nav-link):not(.cl-menu-item):hover {
    color: var(--cl-primary);
}
/* Botoes outline genericos com texto cinza */
.cl-theme-dark .btn-outline-primary {
    color: #6ee7b7 !important;
    border-color: #34d399 !important;
}
.cl-theme-dark .btn-outline-primary:hover {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
}
/* Inputs em estado focus precisam de outline mais visivel */
.cl-theme-dark .form-control:focus,
.cl-theme-dark .form-select:focus {
    border-color: var(--cl-primary) !important;
    box-shadow: 0 0 0 0.25rem rgba(52, 211, 153, 0.25) !important;
}
/* Textos pequenos genericos (small, .small) — Bootstrap usa #6c757d */
.cl-theme-dark small,
.cl-theme-dark .small {
    color: var(--cl-text-soft) !important;
}
/* Cards de cliente / produtos */
.cl-theme-dark .cl-cli-card {
    background: var(--cl-bg-elev) !important;
    border-color: var(--cl-border) !important;
    color: var(--cl-text);
}
.cl-theme-dark .cl-cli-name { color: var(--cl-text); }
.cl-theme-dark .cl-cli-meta,
.cl-theme-dark .cl-cli-extras {
    color: var(--cl-text-muted);
}
/* Itens do orcamento */
.cl-theme-dark .cl-orc-item { color: var(--cl-text); }
.cl-theme-dark .cl-orc-item:hover { background: var(--cl-bg-elev-2); }
.cl-theme-dark .cl-orc-item-name { color: var(--cl-text); }
.cl-theme-dark .cl-orc-item-meta,
.cl-theme-dark .cl-orc-item-unit { color: var(--cl-text-muted); }
.cl-theme-dark .cl-orc-qtd-form,
.cl-theme-dark .cl-orc-qtd-value {
    background: var(--cl-bg) !important;
    color: var(--cl-text) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-orc-qtd-btn {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text);
}
.cl-theme-dark .cl-orc-qtd-stepper.readonly {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text-soft);
}
.cl-theme-dark .cl-orc-total-footer { background: var(--cl-bg-elev-2); }
.cl-theme-dark .cl-orc-total-value { color: var(--cl-primary); }
.cl-theme-dark .cl-icon-btn {
    background: var(--cl-bg-elev) !important;
}
.cl-theme-dark .cl-icon-btn:hover {
    background: var(--cl-bg-elev-2) !important;
}
/* Timeline */
.cl-theme-dark .cl-timeline-card {
    background: var(--cl-bg-elev-2);
    border-color: var(--cl-border);
}
/* Filtros */
.cl-theme-dark .cl-filtros-bar {
    background: var(--cl-bg-elev) !important;
    border-color: var(--cl-border);
    color: var(--cl-text);
}
.cl-theme-dark .cl-filtros-label,
.cl-theme-dark .cl-filtros-grupo > span {
    color: var(--cl-text-muted) !important;
}
/* Chips/pílulas de filtro de período (Hoje, 7 dias, 15 dias...) — antes
   ficavam quase invisíveis pq usavam fundo branco e texto cinza-claro. */
.cl-theme-dark .cl-chip,
.cl-theme-dark .cl-filtro-chip,
.cl-theme-dark .nav-pills .nav-link,
.cl-theme-dark .btn-group .btn-outline-secondary,
.cl-theme-dark .btn-group .btn-outline-primary {
    background: var(--cl-bg-elev-2) !important;
    color: var(--cl-text-soft) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-chip.ativo,
.cl-theme-dark .cl-chip.active,
.cl-theme-dark .cl-filtro-chip.ativo,
.cl-theme-dark .nav-pills .nav-link.active,
.cl-theme-dark .btn-group .btn.active {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
    border-color: var(--cl-primary) !important;
    font-weight: 600;
}
/* Filtros estilo grupo de botões com bordas arredondadas */
.cl-theme-dark .cl-orc-filtros .cl-orc-filtro,
.cl-theme-dark .cl-orc-filtros button {
    background: var(--cl-bg-elev-2) !important;
    color: var(--cl-text-soft) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-orc-filtros .cl-orc-filtro.ativo,
.cl-theme-dark .cl-orc-filtros button.ativo {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
    border-color: var(--cl-primary) !important;
}
/* Tabs de filtro por status (Todos, Aberto, Em andamento, ...) — mesmo
   padrão visual do filtro de período pra consistência: chips inativos
   com fundo elev-2; ativo VERDE BRILHANTE com texto preto e sombra
   esverdeada. Badge numérica fica clara dentro do verde. */
.cl-theme-dark .cl-orc-tab {
    background: var(--cl-bg-elev-2) !important;
    color: var(--cl-text-soft) !important;
    border-color: var(--cl-border) !important;
}
.cl-theme-dark .cl-orc-tab:hover {
    background: rgba(52, 211, 153, 0.12) !important;
    color: var(--cl-text) !important;
    border-color: var(--cl-primary) !important;
}
.cl-theme-dark .cl-orc-tab.active {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
    border-color: var(--cl-primary) !important;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.35);
    font-weight: 700;
}
.cl-theme-dark .cl-orc-tab-count {
    background: var(--cl-bg-elev) !important;
    color: var(--cl-text-soft) !important;
}
.cl-theme-dark .cl-orc-tab.active .cl-orc-tab-count {
    background: rgba(5, 46, 28, 0.30) !important;
    color: #052e1c !important;
    font-weight: 700;
}

/* Filtro de período (Hoje, 7 dias, 15 dias, 30 dias, 60 dias, 90 dias) —
   pílulas dentro de um track. Antes do override o track ficava invisível
   (fundo cinza-claro), os chips inativos tinham contraste fraco e o ATIVO
   ficava difícil de distinguir do inativo. Agora: track escuro com chips
   text-soft; o ativo vira VERDE BRILHANTE com texto preto-escuro. */
.cl-theme-dark .cl-periodo-quick {
    background: var(--cl-bg-elev-2) !important;
    border: 1px solid var(--cl-border);
}
.cl-theme-dark .cl-periodo-chip {
    color: var(--cl-text-soft) !important;
    background: transparent !important;
}
.cl-theme-dark .cl-periodo-chip:hover {
    background: rgba(52, 211, 153, 0.12) !important;
    color: var(--cl-text) !important;
}
.cl-theme-dark .cl-periodo-chip.active {
    background: var(--cl-primary) !important;
    color: #052e1c !important;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(52, 211, 153, 0.35);
}
.cl-theme-dark .cl-periodo-label {
    color: var(--cl-text-muted) !important;
}
.cl-theme-dark .cl-periodo-custom input {
    background: var(--cl-bg) !important;
    color: var(--cl-text) !important;
    border-color: var(--cl-border) !important;
}
/* KPIs do dashboard (cards grandes coloridos com numero) — preserva o
   gradient colorido; só ajusta o texto pra ficar bem legível */
.cl-theme-dark .cl-mon-kpi {
    border: 1px solid var(--cl-border);
}
.cl-theme-dark .cl-mon-kpi-label,
.cl-theme-dark .cl-mon-kpi-valor {
    color: #ffffff !important;
}
/* Paginação */
.cl-theme-dark .cl-pagination .page-link {
    background: var(--cl-bg-elev);
    color: var(--cl-text);
    border-color: var(--cl-border);
}
.cl-theme-dark .cl-pagination .page-link:hover {
    background: var(--cl-bg-elev-2);
}
/* Empty state */
.cl-theme-dark .cl-empty-state { color: var(--cl-text-muted); }
.cl-theme-dark .cl-empty-title { color: var(--cl-text); }
/* Overlay (popups custom) */
.cl-theme-dark .cl-select-overlay {
    background: rgba(0, 0, 0, 0.7);
}
.cl-theme-dark .cl-select-dialog {
    background: var(--cl-bg-elev) !important;
    color: var(--cl-text);
    border-color: var(--cl-border);
}
.cl-theme-dark .cl-select-dialog-head {
    background: var(--cl-bg-elev-2);
    border-color: var(--cl-border);
}
/* Tabs/abas Bootstrap */
.cl-theme-dark .nav-tabs {
    border-color: var(--cl-border);
}
.cl-theme-dark .nav-tabs .nav-link {
    color: var(--cl-text-soft);
    background: transparent;
    border-color: transparent;
}
.cl-theme-dark .nav-tabs .nav-link.active {
    background: var(--cl-bg-elev);
    color: var(--cl-text);
    border-color: var(--cl-border) var(--cl-border) var(--cl-bg-elev);
}
/* Botões outline / secundários */
.cl-theme-dark .btn-outline-secondary {
    color: var(--cl-text-soft);
    border-color: var(--cl-border);
}
.cl-theme-dark .btn-outline-secondary:hover {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text);
}
.cl-theme-dark .btn-light {
    background: var(--cl-bg-elev-2);
    color: var(--cl-text);
    border-color: var(--cl-border);
}

/* Não aplica dark mode em telas de impressão — ficaria ilegível em
   papel branco. Mantém o tema claro no @media print SEMPRE. */
@media print {
    .cl-theme-dark, .cl-theme-dark * {
        color: #000 !important;
        background: #fff !important;
        border-color: #ccc !important;
    }
    .cl-theme-toggle { display: none !important; }
}

/* Aviso "cliente sem app" no chat — banner discreto entre as mensagens
   e o input, com botão "Enviar" desabilitado. O lojista pode abrir o chat
   e ver histórico, mas não consegue enviar mensagens novas. */
.cl-chat-fab-bloqueio {
    background: #fef3c7;
    border-top: 1px solid #fcd34d;
    color: #92400e;
    font-size: 11.5px;
    line-height: 1.35;
    padding: 8px 12px;
    text-align: center;
}
.cl-chat-fab--sem-app .cl-chat-input,
.cl-chat-fab--sem-app .cl-chat-send {
    opacity: 0.55;
    cursor: not-allowed;
}
.cl-chat-fab--sem-app .cl-chat-send:disabled {
    background: #d1d5db;
    color: #6b7280;
}
.cl-theme-dark .cl-chat-fab-bloqueio {
    background: #78350f;
    border-top-color: #b45309;
    color: #fcd34d;
}

/* Form do detalhe do orçamento — labels e hints com altura fixa pra
   alinhar TODAS as colunas no mesmo Y, mesmo quando o label quebra em
   2 linhas em telas estreitas. Sem isso, "Desconto p/ item" (que pode
   quebrar) deixa o input mais embaixo do que "Frete" (sempre 1 linha). */
.cl-orc-label-1l {
    display: block;
    min-height: 2.6em;          /* reserva espaco pra ate 2 linhas */
    line-height: 1.25;
    margin-bottom: 0.25rem;
}
.cl-orc-hint-line {
    min-height: 1.2em;
    line-height: 1.25;
    font-size: 10px;
}

/* ════════════════════════════════════════════════════════════════
   SPINNER GLOBAL — overlay full-screen disparado em qualquer
   POST/PUT/DELETE. Visual: backdrop escuro com leve blur, anel duplo
   girando em cores complementares + texto "Processando..."
   ════════════════════════════════════════════════════════════════ */
.cl-spinner-overlay {
    position: fixed;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    background: rgba(15, 23, 42, 0.62);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 100000;
    animation: cl-spinner-fade 0.18s ease-out;
}
.cl-spinner-overlay.show { display: flex; }

@keyframes cl-spinner-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Anel duplo: o externo (mais grosso, semi-transparente) e o
   interno (gradient verde, gira em sentido contrário pra dar
   sensação de movimento/profundidade). */
.cl-spinner {
    position: relative;
    width: 64px;
    height: 64px;
}
.cl-spinner::before,
.cl-spinner::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
}
.cl-spinner::before {
    border-top-color: #10b981;
    border-right-color: #10b981;
    animation: cl-spin 1s cubic-bezier(0.55, 0.15, 0.45, 0.85) infinite;
    box-shadow: 0 0 22px rgba(16, 185, 129, 0.35);
}
.cl-spinner::after {
    inset: 8px;
    border-top-color: #6ee7b7;
    border-left-color: #6ee7b7;
    animation: cl-spin 0.7s cubic-bezier(0.55, 0.15, 0.45, 0.85) reverse infinite;
    opacity: 0.85;
}
@keyframes cl-spin {
    to { transform: rotate(360deg); }
}
.cl-spinner-text {
    color: #f8fafc;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}
.cl-spinner-hint {
    color: rgba(248, 250, 252, 0.7);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.3px;
    margin: 0;
}
/* Não imprime — overlay nunca deve ir pro papel. */
@media print {
    .cl-spinner-overlay { display: none !important; }
}

/* ════════════════════════════════════════════════════════════════
   Condição de pagamento (no detalhe do orçamento). Cards radio
   pros 4 modos + preview das parcelas. Mesma identidade visual do
   app mobile pra coerência.
   ════════════════════════════════════════════════════════════════ */
.cl-orc-condpag-bloco h6 { font-weight: 700; color: #1f2937; }
.cl-orc-condpag-modo {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    margin: 0;
    height: 100%;
}
.cl-orc-condpag-modo:hover { border-color: #6ee7b7; }
.cl-orc-condpag-modo.ativo {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.06);
    box-shadow: 0 2px 6px rgba(16, 185, 129, 0.12);
}
.cl-orc-condpag-modo input[type="radio"] { accent-color: #10b981; }
.cl-orc-condpag-modo-info { line-height: 1.2; min-width: 0; }
.cl-orc-condpag-modo-titulo { font-size: 13px; font-weight: 700; color: #1f2937; }
.cl-orc-condpag-modo-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Preview das parcelas calculado em JS — mostra como ficaria a série */
.cl-orc-condpag-preview {
    background: #f9fafb;
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 4px;
}
.cl-orc-condpag-preview-titulo {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    color: #6b7280;
    margin-bottom: 8px;
}
.cl-orc-condpag-preview-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    font-size: 13px;
    border-bottom: 1px dashed #e5e7eb;
}
.cl-orc-condpag-preview-linha:last-child { border-bottom: none; }
.cl-orc-condpag-preview-linha.total {
    font-weight: 700;
    font-size: 14px;
    padding-top: 8px;
    color: #1f2937;
    border-bottom: none;
}
.cl-orc-condpag-preview-data { color: #6b7280; }
.cl-orc-condpag-preview-valor { color: #047857; font-weight: 700; }
.cl-orc-condpag-preview-vazio { color: #9ca3af; font-size: 12px; padding: 4px 0; }

/* Quando cobrancaGerada=true o <fieldset disabled> apaga tudo demais.
   Trazemos os textos pra contraste legível e damos visual de "bloqueado"
   coerente em vez do cinza nativo do navegador. */
.cl-orc-condpag-bloco fieldset:disabled {
    opacity: 1;
}
.cl-orc-condpag-bloco fieldset:disabled .cl-orc-condpag-modo {
    background: #f9fafb;
    border-color: #e5e7eb;
    box-shadow: none;
    cursor: not-allowed;
    opacity: 0.85;
}
.cl-orc-condpag-bloco fieldset:disabled .cl-orc-condpag-modo.ativo {
    background: rgba(16, 185, 129, 0.06);
    border-color: #10b981;
    opacity: 1;
}
.cl-orc-condpag-bloco fieldset:disabled .cl-orc-condpag-modo-titulo,
.cl-orc-condpag-bloco fieldset:disabled .form-label,
.cl-orc-condpag-bloco fieldset:disabled .cl-orc-condpag-preview-titulo {
    color: #1f2937;
}
.cl-orc-condpag-bloco fieldset:disabled .form-control:disabled {
    background: #f3f4f6;
    color: #1f2937;
    opacity: 1;
}

/* ════════════════════════════════════════════════════════════════
   Botão "O que deseja fazer?" + Offcanvas de ações no detalhe.
   Substitui pilha de botões empilhados na sidebar. Espelha o FAB
   do app mobile pra coerência visual.
   ════════════════════════════════════════════════════════════════ */
.cl-orc-fab-acoes {
    font-weight: 600;
    padding: 0.75rem 1rem;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.18);
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    border: none;
    transition: transform 0.12s, box-shadow 0.12s;
}
.cl-orc-fab-acoes:hover,
.cl-orc-fab-acoes:focus {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.32);
    transform: translateY(-1px);
}
.cl-orc-fab-acoes:active { transform: translateY(0); }
/* Modal de ações (popup centralizado com backdrop). Substituiu o
   offcanvas-bottom porque o offcanvas tinha height fixo do Bootstrap
   (30vh) que forçava scroll mesmo com 2 ações. O modal padrão se
   ajusta naturalmente ao conteúdo; só vira scrollable se passar do
   max-height do dialog (modal-dialog-scrollable). */
.cl-orc-modal-acoes .modal-content {
    border-radius: 14px;
    border: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22);
}
.cl-orc-modal-acoes .modal-header {
    border-bottom: 1px solid #e5e7eb;
    padding: 0.85rem 1.25rem;
}
.cl-orc-modal-acoes .modal-body {
    padding: 0.85rem 1.25rem 1.15rem;
}

/* ─────────────────────────────────────────────────────────────────
   Cards de ação dentro do offcanvas. Mesmo padrão do
   det-sheet-acao do app mobile: ícone redondo colorido +
   título bold + descrição muted + chevron. Forms internos
   ficam invisíveis (m-0), o card-button é o submit do form.
   ───────────────────────────────────────────────────────────────── */
.cl-orc-acoes-lista {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.cl-orc-acoes-lista > form,
.cl-orc-acoes-lista > .cl-orc-codigo-bloco,
.cl-orc-acoes-lista > .alert {
    margin: 0;
}
.cl-orc-acoes-lista > .alert { padding: 0.5rem 0.75rem; }
.cl-orc-acao-card {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border-radius: 10px;
    background: #f8fafc;
    border: 1px solid #e5e7eb;
    color: #1f2937;
    text-align: left;
    cursor: pointer;
    transition: transform 0.1s, box-shadow 0.12s, background 0.12s, border-color 0.12s;
    font-family: inherit;
}
.cl-orc-acao-card:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}
.cl-orc-acao-card:active { transform: scale(0.99); }
.cl-orc-acao-card:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
}
.cl-orc-acao-icone {
    flex-shrink: 0;
    width: 34px; height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #2563eb;
    color: #fff;
    font-size: 14px;
}
.cl-orc-acao-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
.cl-orc-acao-label {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #1f2937;
}
.cl-orc-acao-desc {
    font-size: 11.5px;
    color: #6b7280;
    margin-top: 1px;
    line-height: 1.3;
    /* Limita a 2 linhas (clamp) — descrição completa continua acessível
       no dialog de confirmação que abre ao clicar. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cl-orc-acao-chevron {
    color: #94a3b8;
    flex-shrink: 0;
    font-size: 12px;
}
/* Variantes semânticas — cor do ícone redondo (e tom do título) */
.cl-orc-acao-card.cl-orc-acao-primary .cl-orc-acao-icone { background: #2563eb; }
.cl-orc-acao-card.cl-orc-acao-success .cl-orc-acao-icone { background: #059669; }
.cl-orc-acao-card.cl-orc-acao-warning .cl-orc-acao-icone { background: #d97706; }
.cl-orc-acao-card.cl-orc-acao-danger  .cl-orc-acao-icone { background: #dc2626; }
.cl-orc-acao-card.cl-orc-acao-warning .cl-orc-acao-label { color: #b45309; }
.cl-orc-acao-card.cl-orc-acao-danger  .cl-orc-acao-label { color: #b91c1c; }