/**
 * cly-ui.css — Componentes de UI do Fluxo Diário
 *
 * Prefixo: cly-ui-*
 * Sempre declare variáveis em :root e sobrescreva em body.app_theme_dark.
 * Nunca use cores hardcoded em elementos interativos — use as variáveis abaixo.
 *
 * Componentes disponíveis:
 *   cly-ui-vars              — variáveis de tema claro/escuro
 *   cly-ui-section-title     — título de seção com número de passo
 *   cly-ui-info-box          — caixa explicativa contextual
 *   cly-ui-multi-pill        — seleção múltipla via checkbox visual
 *   cly-table-row-multiselect — linha de tabela selecionada (trowseleted)
 *   cly-cancel-toolbar       — toolbar de cancelamento de baixas com resumo de seleção
 */

/* ============================================================
   cly-ui-vars — Variáveis de Tema 
   ============================================================ */
:root {
    --cly-bg:           #ffffff;
    --cly-surface:      #f4f5f7;
    --cly-border:       #dfe1e6;
    --cly-border-focus: #1e88e5;
    --cly-text-main:    #172b4d;
    --cly-text-muted:   #5e6c84;
    --cly-shadow-sm:    0 1px 2px rgba(9, 30, 66, 0.12);
    --cly-shadow-md:    0 4px 8px -2px rgba(9, 30, 66, 0.2);
    --cly-primary:      #1e88e5;
    --cly-primary-bg:   #e3f2fd;
    --cly-primary-text: #1565c0;
}

body.app_theme_dark {
    --cly-bg:           #1e1e1e;
    --cly-surface:      #2d2d2d;
    --cly-border:       #444444;
    --cly-border-focus: #42a5f5;
    --cly-text-main:    #e0e0e0;
    --cly-text-muted:   #9e9e9e;
    --cly-shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.4);
    --cly-shadow-md:    0 5px 10px rgba(0, 0, 0, 0.6);
    --cly-primary:      #42a5f5;
    --cly-primary-bg:   #15324d;
    --cly-primary-text: #64b5f6;
}

/* ============================================================
   cly-ui-section-title — Título de Seção com Passo Numerado
   Uso: <div class="cly-ui-section-title">
            <span class="cly-ui-step">1</span> Título
        </div>
   ============================================================ */
.cly-ui-section-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cly-text-muted);
    margin-top: 24px;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--cly-border);
}

.cly-ui-step {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--cly-primary);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

/* ============================================================
   cly-ui-info-box — Caixa Explicativa Contextual
   Uso: <div class="cly-ui-info-box">
            <i class="material-icons cly-ui-info-icon">info</i>
            <div>
                <strong>Título</strong>
                <p>Descrição...</p>
            </div>
        </div>
   Variantes: cly-ui-info-box--warning (amarelo), --success (verde)
   ============================================================ */
.cly-ui-info-box {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    background: var(--cly-primary-bg);
    border: 1px solid rgba(30, 136, 229, 0.25);
    border-left: 4px solid var(--cly-primary);
    border-radius: 6px;
    padding: 14px 16px;
    margin-bottom: 8px;
}

body.app_theme_dark .cly-ui-info-box {
    border-color: rgba(66, 165, 245, 0.2);
    border-left-color: var(--cly-primary);
}

.cly-ui-info-icon {
    font-size: 20px;
    color: var(--cly-primary);
    flex-shrink: 0;
    margin-top: 1px;
}

.cly-ui-info-box strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--cly-primary-text);
    margin-bottom: 4px;
}

body.app_theme_dark .cly-ui-info-box strong {
    color: var(--cly-primary-text);
}

.cly-ui-info-box p {
    margin: 0;
    font-size: 13px;
    color: var(--cly-text-muted);
    line-height: 1.5;
}

/* Variante aviso */
.cly-ui-info-box--warning {
    background: #fffde7;
    border-color: rgba(255, 179, 0, 0.25);
    border-left-color: #ffb300;
}
body.app_theme_dark .cly-ui-info-box--warning {
    background: #2a2000;
    border-color: rgba(255, 179, 0, 0.2);
    border-left-color: #ffb300;
}
.cly-ui-info-box--warning .cly-ui-info-icon { color: #f9a825; }
.cly-ui-info-box--warning strong { color: #e65100; }
body.app_theme_dark .cly-ui-info-box--warning strong { color: #ffcc02; }

/* ============================================================
   cly-ui-multi-pill — Seleção Múltipla via Checkbox Visual
   Uso: <div class="cly-ui-multi-pill-group">
            <input type="checkbox" id="chk_x" name="tipos[]" value="X" checked>
            <label for="chk_x">
                <i class="material-icons">check</i> Rótulo
            </label>
        </div>
   ============================================================ */
.cly-ui-multi-pill-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.cly-ui-multi-pill-group input[type="checkbox"] {
    display: none;
}

.cly-ui-multi-pill-group label {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 7px 14px;
    border-radius: 6px;
    background: var(--cly-bg);
    color: var(--cly-text-muted);
    border: 1px solid var(--cly-border);
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.cly-ui-multi-pill-group label:hover {
    background: var(--cly-surface);
    border-color: var(--cly-text-muted);
    color: var(--cly-text-main);
}

/* Ícone de check — oculto por padrão, animado ao selecionar */
.cly-ui-multi-pill-group label i.material-icons {
    font-size: 15px;
    opacity: 0;
    width: 0;
    overflow: hidden;
    transition: opacity 0.15s ease, width 0.15s ease, margin-right 0.15s ease;
    margin-right: 0;
}

/* Estado selecionado */
.cly-ui-multi-pill-group input[type="checkbox"]:checked + label {
    background: var(--cly-primary-bg);
    color: var(--cly-primary-text);
    border-color: var(--cly-primary);
    box-shadow: 0 1px 4px rgba(30, 136, 229, 0.15);
}

.cly-ui-multi-pill-group input[type="checkbox"]:checked + label i.material-icons {
    opacity: 1;
    width: 15px;
    margin-right: 5px;
}

/* ============================================================
   cly-modal-produto — Modal fullscreen de busca de produto (F9)
   Criado via JS puro em buscar_modal_produto_custo_e_venda.
   Dark mode automático via body.app_theme_dark + variáveis --cly-*.
   ============================================================ */

.cly-mp-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    z-index: 99990;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.cly-mp-overlay.cly-mp-visible { opacity: 1; }

.cly-mp-box {
    width: 96vw;
    height: 94vh;
    background: var(--cly-bg);
    color: var(--cly-text-main);
    border-radius: 10px;
    box-shadow: var(--cly-shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.97);
    transition: transform 0.18s ease;
}
.cly-mp-overlay.cly-mp-visible .cly-mp-box { transform: scale(1); }

/* Header */
.cly-mp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    border-bottom: 1px solid var(--cly-border);
    flex-shrink: 0;
    background: var(--cly-surface);
}
.cly-mp-header-icon { color: var(--cly-primary); font-size: 22px; }
.cly-mp-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--cly-text-main);
    margin: 0;
}
.cly-mp-close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cly-text-muted);
    font-size: 22px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s;
}
.cly-mp-close:hover { background: var(--cly-border); color: var(--cly-text-main); }

/* Toolbar de filtros */
.cly-mp-toolbar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border-bottom: 1px solid var(--cly-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    background: var(--cly-bg);
}
.cly-mp-toolbar select,
.cly-mp-toolbar input[type="text"],
.cly-mp-toolbar input[type="search"] {
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    color: var(--cly-text-main);
    padding: 6px 10px;
    font-size: 13px;
    outline: none;
    transition: border-color 0.15s;
}
.cly-mp-toolbar select:focus,
.cly-mp-toolbar input:focus { border-color: var(--cly-border-focus); }
.cly-mp-search-wrap { flex: 1; min-width: 200px; }
.cly-mp-search-wrap input { width: 100%; box-sizing: border-box; }
.cly-mp-btn-cols {
    background: none;
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    color: var(--cly-text-muted);
    font-size: 12px;
    padding: 6px 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}
.cly-mp-btn-cols:hover { background: var(--cly-surface); color: var(--cly-text-main); }
.cly-mp-btn-cols i { font-size: 16px; }

/* Barra de selecionados (modo múltiplo) */
.cly-mp-selection-bar {
    display: none;
    padding: 8px 18px;
    background: var(--cly-primary-bg);
    border-bottom: 1px solid var(--cly-border);
    flex-shrink: 0;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--cly-primary-text);
}
.cly-mp-selection-bar.cly-mp-sel-visible { display: flex; }
.cly-mp-sel-label { font-weight: 600; white-space: nowrap; }
.cly-mp-sel-tags { display: flex; flex-wrap: wrap; gap: 5px; flex: 1; }
.cly-mp-sel-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: var(--cly-primary);
    color: #fff;
    border-radius: 12px;
    padding: 2px 8px 2px 10px;
    font-size: 12px;
    max-width: 200px;
}
.cly-mp-sel-tag span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cly-mp-sel-tag button {
    background: none; border: none; color: rgba(255,255,255,0.8);
    cursor: pointer; font-size: 14px; line-height: 1; padding: 0; flex-shrink: 0;
}
.cly-mp-sel-tag button:hover { color: #fff; }
.cly-mp-sel-totals {
    display: flex; gap: 16px; flex-shrink: 0; font-size: 12px; margin-left: auto;
}
.cly-mp-sel-totals span { white-space: nowrap; }
.cly-mp-sel-total-venda { color: var(--cly-primary); font-weight: 600; }
.cly-mp-sel-total-custo { color: var(--cly-text-muted); }

/* Corpo — tabela */
.cly-mp-body {
    flex: 1;
    overflow: auto;
    position: relative;
    padding: 0 18px 8px;
}

/* Spinner de carregamento interno */
.cly-mp-spinner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 100%;
    color: var(--cly-text-muted);
    font-size: 14px;
}
.cly-mp-spinner-ring {
    width: 36px; height: 36px;
    border: 3px solid var(--cly-border);
    border-top-color: var(--cly-primary);
    border-radius: 50%;
    animation: cly-spin 0.7s linear infinite;
}
@keyframes cly-spin { to { transform: rotate(360deg); } }

/* Erro interno */
.cly-mp-error {
    display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 10px; height: 100%;
    color: var(--cly-text-muted); font-size: 14px; text-align: center;
}
.cly-mp-error i { font-size: 36px; color: #e53935; }
.cly-mp-btn-retry {
    background: var(--cly-primary); color: #fff; border: none;
    border-radius: 6px; padding: 8px 18px; font-size: 13px;
    cursor: pointer; margin-top: 6px;
}
.cly-mp-btn-retry:hover { opacity: 0.88; }

/* Linha selecionada por teclado ↑↓ */
.cly-mp-body table tbody tr.cly-row-kb {
    background: var(--cly-primary-bg) !important;
    outline: 2px solid var(--cly-primary);
    outline-offset: -2px;
}

/* Footer */
.cly-mp-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    padding: 10px 18px;
    border-top: 1px solid var(--cly-border);
    flex-shrink: 0;
    background: var(--cly-surface);
}
.cly-mp-btn {
    border: none; border-radius: 6px; padding: 8px 18px;
    font-size: 13px; font-weight: 500; cursor: pointer; transition: opacity 0.15s;
}
.cly-mp-btn:hover { opacity: 0.85; }
.cly-mp-btn-cancel { background: var(--cly-surface); color: var(--cly-text-muted); border: 1px solid var(--cly-border); }
.cly-mp-btn-confirm { background: var(--cly-primary); color: #fff; }
.cly-mp-btn-add { background: #43a047; color: #fff; }

/* Modal de gerenciar colunas (sub-modal) */
.cly-mp-cols-overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,0.45);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
}
.cly-mp-cols-box {
    background: var(--cly-bg); color: var(--cly-text-main);
    border-radius: 8px; box-shadow: var(--cly-shadow-md);
    width: 360px; max-height: 70vh; display: flex; flex-direction: column;
    overflow: hidden;
}
.cly-mp-cols-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--cly-border);
    font-size: 14px; font-weight: 600; flex-shrink: 0;
}
.cly-mp-cols-list {
    overflow-y: auto; padding: 10px 16px; flex: 1; display: flex;
    flex-direction: column; gap: 6px;
}
.cly-mp-col-item {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 10px; border-radius: 6px; cursor: pointer;
    transition: background 0.12s;
}
.cly-mp-col-item:hover { background: var(--cly-surface); }
.cly-mp-col-check {
    width: 18px; height: 18px; border-radius: 4px;
    border: 2px solid var(--cly-border); background: var(--cly-surface);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; transition: background 0.12s, border-color 0.12s;
}
.cly-mp-col-item.cly-mp-col-on .cly-mp-col-check {
    background: var(--cly-primary); border-color: var(--cly-primary);
}
.cly-mp-col-check i { color: #fff; font-size: 13px; display: none; }
.cly-mp-col-item.cly-mp-col-on .cly-mp-col-check i { display: block; }
.cly-mp-col-label { font-size: 13px; color: var(--cly-text-main); }
.cly-mp-cols-footer {
    padding: 10px 16px; border-top: 1px solid var(--cly-border);
    display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0;
}


/* ── Tema escuro: conteudo do DataTable dentro do modal de busca de produto ── */
body.app_theme_dark .cly-mp-body .md-card,
body.app_theme_dark .cly-mp-body .md-card-content,
body.app_theme_dark .cly-mp-body .uk-overflow-container,
body.app_theme_dark .cly-mp-body .dataTables_wrapper,
body.app_theme_dark .cly-mp-body .dataTables_scroll,
body.app_theme_dark .cly-mp-body .dataTables_scrollBody,
body.app_theme_dark .cly-mp-body .dataTables_scrollHead {
    background: var(--cly-bg) !important;
    color: var(--cly-text-main) !important;
}
body.app_theme_dark .cly-mp-body table.dataTable thead th,
body.app_theme_dark .cly-mp-body table.dataTable thead td {
    background: var(--cly-surface) !important;
    color: var(--cly-text-muted) !important;
    border-bottom-color: var(--cly-border) !important;
}
body.app_theme_dark .cly-mp-body table.dataTable tbody tr {
    background: var(--cly-bg) !important;
    color: var(--cly-text-main) !important;
}
body.app_theme_dark .cly-mp-body table.dataTable tbody tr:hover,
body.app_theme_dark .cly-mp-body table.dataTable tbody tr.odd:hover,
body.app_theme_dark .cly-mp-body table.dataTable tbody tr.even:hover {
    background: var(--cly-surface) !important;
}
body.app_theme_dark .cly-mp-body table.dataTable tbody tr.odd {
    background: var(--cly-surface) !important;
}
body.app_theme_dark .cly-mp-body table.dataTable tbody tr.row_checked {
    background: var(--cly-primary-bg) !important;
}
body.app_theme_dark .cly-mp-body .dataTables_info,
body.app_theme_dark .cly-mp-body .dataTables_length label,
body.app_theme_dark .cly-mp-body .dataTables_paginate,
body.app_theme_dark .cly-mp-body .dataTables_paginate .paginate_button {
    color: var(--cly-text-muted) !important;
}
body.app_theme_dark .cly-mp-body .dataTables_length select,
body.app_theme_dark .cly-mp-body .dt-uikit-header select,
body.app_theme_dark .cly-mp-body .dt-uikit-header input,
body.app_theme_dark .cly-mp-body .md-input-wrapper select,
body.app_theme_dark .cly-mp-body .md-input-wrapper input {
    background: var(--cly-surface) !important;
    color: var(--cly-text-main) !important;
    border-color: var(--cly-border) !important;
}
body.app_theme_dark .cly-mp-body .uk-text-muted { color: var(--cly-text-muted) !important; }
body.app_theme_dark .cly-mp-body .uk-grid { background: transparent !important; }
body.app_theme_dark .cly-mp-body .dt-buttons .dt-button { background: var(--cly-surface) !important; color: var(--cly-text-main) !important; border-color: var(--cly-border) !important; }

/* ============================================================
   fd-buscador — Modal de busca de produtos (sem DataTable)
   ============================================================ */

/* Overlay + box */
.fd-b-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.48);
    z-index: 9900;
    display: flex;
    align-items: stretch;
    opacity: 0;
    transition: opacity .18s ease;
}
.fd-b-overlay.fd-b-visible { opacity: 1; }
.fd-b-box {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1;
    background: var(--cly-bg);
    overflow: hidden;
    font-family: inherit;
}
/* Wrapper de escala (zoom de UI via A−/A+). transform scale-to-fit:
   width/height = (100/fator)% + scale(fator) preenchem o box exatamente. */
.fd-b-scale {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    transform-origin: top left;
}

/* Header */
.fd-b-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    height: 52px;
    background: var(--cly-primary);
    color: #fff;
    flex-shrink: 0;
}
.fd-b-titulo { font-size: 16px; font-weight: 600; letter-spacing: .01em; }
.fd-b-header-actions { display: flex; gap: 4px; }

/* Botões base */
.fd-b-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .15s, opacity .15s;
    white-space: nowrap;
}
.fd-b-btn:disabled { opacity: .45; cursor: default; }
.fd-b-btn-primary { background: var(--cly-primary); color: #fff; border-color: var(--cly-primary); }
.fd-b-btn-primary:hover:not(:disabled) { background: #1565c0; border-color: #1565c0; }
.fd-b-btn-ghost { background: transparent; color: var(--cly-text-muted); border-color: var(--cly-border); }
.fd-b-btn-ghost:hover:not(:disabled) { background: var(--cly-surface); }
.fd-b-btn-icon {
    padding: 6px;
    background: transparent;
    border: none;
    color: inherit;
    border-radius: 4px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    opacity: .85;
    transition: opacity .15s, background .15s;
}
.fd-b-btn-icon:hover { opacity: 1; background: rgba(0,0,0,.08); }
.fd-b-btn-icon .material-icons { font-size: 20px; }
/* Header (azul no tema claro): ícones e controles de fonte sempre brancos sólidos */
.fd-b-header .fd-b-btn-icon,
.fd-b-header .fd-b-btn-icon .material-icons { color: #fff; opacity: 1; }
.fd-b-header .fd-b-btn-icon:hover { background: rgba(255,255,255,.18); }

/* Toolbar */
.fd-b-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--cly-surface);
    border-bottom: 1px solid var(--cly-border);
    flex-shrink: 0;
    flex-wrap: wrap;
}
.fd-b-search-wrap {
    flex: 1;
    min-width: 180px;
    position: relative;
}
.fd-b-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cly-text-muted);
    display: inline-flex;
    align-items: center;
    padding: 2px;
    border-radius: 3px;
    line-height: 1;
}
.fd-b-search-clear:hover { color: var(--cly-text-main); background: var(--cly-surface); }
.fd-b-search-clear .material-icons { font-size: 16px; }
.fd-b-input {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 28px 7px 10px;
    border: 1px solid var(--cly-border);
    border-radius: 4px;
    font-size: 13px;
    color: var(--cly-text-main);
    background: var(--cly-bg);
    background-image: none;
    outline: none;
    transition: border-color .15s;
}
.fd-b-input:focus { border-color: var(--cly-border-focus); }
.fd-b-select {
    padding: 6px 8px;
    border: 1px solid var(--cly-border);
    border-radius: 4px;
    font-size: 12px;
    color: var(--cly-text-main);
    background: var(--cly-bg);
    cursor: pointer;
    outline: none;
}
.fd-b-select:focus { border-color: var(--cly-border-focus); }
.fd-b-field-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
}
.fd-b-field-label {
    font-size: 11px;
    font-weight: 500;
    color: var(--cly-text-muted);
    white-space: nowrap;
}

/* Barra de selecionados (modo multiple) */
.fd-b-sel-bar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 10px 16px;
    background: var(--cly-surface);
    border-bottom: 1px solid var(--cly-border);
    flex-shrink: 0;
}
.fd-b-sel-top {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fd-b-sel-count { font-size: 13px; font-weight: 600; color: var(--cly-text-main); white-space: nowrap; }
.fd-b-sel-tags { display: flex; flex-wrap: wrap; gap: 4px; flex: 1; min-width: 0; }
.fd-b-sel-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    background: var(--cly-bg);
    color: var(--cly-text-muted);
    border: 1px solid var(--cly-border);
    border-radius: 20px;
    font-size: 12px;
    max-width: 220px;
}
.fd-b-sel-tag-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.fd-b-sel-tag-rm {
    background: none;
    border: none;
    color: var(--cly-text-muted);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    padding: 0;
    flex-shrink: 0;
}
.fd-b-sel-tag-rm:hover { color: var(--cly-text-main); }
.fd-b-sel-tag-more { background: var(--cly-surface); color: var(--cly-text-muted); }

/* Badge do valor total de venda (verde, distinto do azul dos botões) */
.fd-b-sel-total {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: #e6f4ea;
    border: 1px solid #b7dfc2;
    border-radius: 6px;
    white-space: nowrap;
}
.fd-b-sel-total-icon { font-size: 20px; color: #2e7d32; }
.fd-b-sel-total-txt { display: flex; flex-direction: column; line-height: 1.15; }
.fd-b-sel-total-label { font-size: 11px; color: #2e7d32; }
.fd-b-sel-total-val { font-size: 17px; font-weight: 600; color: #2e7d32; }

/* Ações operacionais — alinhadas à direita, "Limpar" discreto à esquerda */
.fd-b-sel-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    border-top: 1px solid var(--cly-border);
    padding-top: 10px;
}
.fd-b-sel-prod .material-icons,
.fd-b-sel-lote .material-icons { font-size: 16px; }
.fd-b-btn-secondary {
    background: var(--cly-bg);
    color: var(--cly-primary-text);
    border-color: var(--cly-primary);
}
.fd-b-btn-secondary:hover:not(:disabled) { background: var(--cly-primary-bg); }
.fd-b-sel-limpar {
    background: none;
    border: none;
    color: var(--cly-text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 6px 8px;
    border-radius: 4px;
}
.fd-b-sel-limpar:hover { color: var(--cly-text-main); text-decoration: underline; }
.fd-b-sel-actions .fd-b-sel-limpar { margin-right: auto; }
.fd-b-sel-limpar-inline { margin-left: auto; }

/* Hint explicativo das duas ações */
.fd-b-sel-hint {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin: 0;
    font-size: 12px;
    line-height: 1.5;
    color: var(--cly-text-muted);
}
.fd-b-sel-hint .material-icons { font-size: 15px; flex-shrink: 0; margin-top: 1px; }
.fd-b-sel-hint strong { font-weight: 600; color: var(--cly-text-main); }

/* ===== F9 buscador — mobile (<=600px): barra de seleção vira rodapé fixo =====
   Desktop permanece inalterado. No mobile a barra sai do topo (onde espremia a
   lista) e vai para o rodapé do modal; a lista volta a ocupar a tela. */
@media (max-width: 600px) {
    .fd-b-sel-bar {
        order: 1;                 /* move para o fim da coluna flex (.fd-b-scale) */
        gap: 8px;
        padding: 8px 12px;
        border-bottom: none;
        border-top: 1px solid var(--cly-border);
    }
    .fd-b-sel-top { gap: 8px; }
    /* Chips em faixa rolável horizontal — não acumulam altura */
    .fd-b-sel-tags {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .fd-b-sel-tags::-webkit-scrollbar { display: none; }
    .fd-b-sel-tag { flex: 0 0 auto; }
    /* Ações: sem separador superior; os dois botões dividem a largura */
    .fd-b-sel-actions {
        border-top: none;
        padding-top: 0;
        gap: 6px;
    }
    .fd-b-sel-prod,
    .fd-b-sel-lote { flex: 1; justify-content: center; }
    /* Texto explicativo longo só no desktop (economiza altura no mobile) */
    .fd-b-sel-hint { display: none; }
}

/* ===== Modal incluir produtos em lote (mip-*) ===== */
.mip-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.66); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 9950; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .18s ease; }
.mip-overlay.mip-visible { opacity: 1; }
.mip-box { display: flex; flex-direction: column; width: 100%; max-width: 1100px; max-height: 90vh; background: var(--cly-bg); color: var(--cly-text-main); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,.35); transform: scale(.97); transition: transform .18s ease; font-size: 13px; }
.mip-overlay.mip-visible .mip-box { transform: scale(1); }
.mip-hidden { display: none !important; }

.mip-header { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1px solid var(--cly-border); flex-shrink: 0; }
.mip-header-main { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.mip-header-icon { width: 36px; height: 36px; border-radius: 9px; background: var(--cly-primary-bg); color: var(--cly-primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.mip-header-icon .material-icons { font-size: 20px; }
.mip-title { font-size: 16px; font-weight: 600; }
.mip-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.mip-badge { font-size: 11px; border-radius: 5px; padding: 2px 9px; background: var(--cly-surface); color: var(--cly-text-muted); }
.mip-badge-fluxo { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.mip-badge-tipo { background: #e6f4ea; color: #2e7d32; }
.mip-header-actions { display: flex; gap: 6px; flex-shrink: 0; }
.mip-icon-btn { width: 34px; height: 34px; border-radius: 7px; border: 1px solid var(--cly-border); background: none; color: var(--cly-text-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.mip-icon-btn:hover { color: var(--cly-text-main); background: var(--cly-surface); }
.mip-icon-btn .material-icons { font-size: 19px; }

.mip-help { margin: 12px 18px 0; padding: 11px 14px; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 9px; font-size: 12px; color: var(--cly-text-muted); flex-shrink: 0; }
.mip-help h4 { margin: 0 0 6px; font-size: 12px; font-weight: 600; color: var(--cly-text-main); }
.mip-help ul { margin: 0; padding-left: 16px; }
.mip-help li { margin: 3px 0; }
.mip-help b { color: var(--cly-text-main); font-weight: 600; }

.mip-totais { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; padding: 12px 18px; flex-shrink: 0; }
.mip-tot-card { background: var(--cly-surface); border-radius: 9px; padding: 8px 12px; display: flex; flex-direction: column; gap: 2px; }
.mip-tot-label { font-size: 11px; color: var(--cly-text-muted); display: flex; align-items: center; gap: 5px; }
.mip-tot-label .material-icons { font-size: 15px; }
.mip-tot-val { font-size: 17px; font-weight: 600; color: var(--cly-text-main); }
.mip-tot-card .mip-tot-qtd { font-size: 13px; }
.mip-tot-card-venda { background: #e6f4ea; }
.mip-tot-card-venda .mip-tot-label, .mip-tot-card-venda .mip-tot-val { color: #2e7d32; }
.mip-tot-card-desc { background: #faf1ec; }
.mip-tot-card-desc .mip-tot-label, .mip-tot-card-desc .mip-tot-val { color: #a4541f; }
.mip-tot-card-sub { background: var(--cly-primary-bg); outline: 2px solid var(--cly-primary); outline-offset: -2px; }
.mip-tot-card-sub .mip-tot-label, .mip-tot-card-sub .mip-tot-val { color: var(--cly-primary-text); }
.mip-tot-card-sub .mip-tot-val { font-size: 19px; }
.mip-desc-input { width: 100%; border: 1px solid var(--cly-border); background: var(--cly-bg); color: var(--cly-text-main); border-radius: 6px; padding: 4px 8px; text-align: right; font-size: 16px; font-weight: 600; }
.mip-desc-input:focus { border-color: var(--cly-primary); box-shadow: 0 0 0 3px var(--cly-primary-bg); outline: none; }
.mip-desc-input.mip-in-err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.mip-desc-hint { font-size: 10px; color: var(--cly-text-muted); margin-top: 3px; line-height: 1.3; }

.mip-table-wrap { flex: 1; overflow: auto; border-top: 1px solid var(--cly-border); }
.mip-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.mip-table thead th { position: sticky; top: 0; z-index: 2; background: var(--cly-surface); color: var(--cly-text-muted); font-weight: 600; padding: 9px 14px; text-align: left; border-bottom: 1px solid var(--cly-border); white-space: nowrap; }
.mip-table tbody td { padding: 8px 14px; border-bottom: 1px solid var(--cly-border); }
.mip-table .md-input { width: 100%; min-width: 70px; border: 1px solid var(--cly-border); background: var(--cly-bg); color: var(--cly-text-main); border-radius: 7px; padding: 6px 9px; }
.mip-table .md-input[readonly], .mip-table .md-input[disabled] { background: var(--cly-surface); color: var(--cly-text-muted); }
.mip-table .md-input:focus { border-color: var(--cly-primary); box-shadow: 0 0 0 3px var(--cly-primary-bg); outline: none; }
.mip-table .md-input.mip-in-err { border-color: #dc2626; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }
.mip-col-produto { min-width: 190px; }
.mip-pn { display: flex; flex-direction: column; line-height: 1.25; }
.mip-pid { font-size: 10px; color: var(--cly-text-muted); }
.mip-und { text-align: center; color: var(--cly-text-muted); }
.mip-errmsg { font-size: 11px; color: #dc2626; margin-top: 4px; }

.mip-frac-wrap { background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 8px; padding: 10px 12px; margin: 2px 0 2px 22px; }
.mip-frac-title { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--cly-primary-text); margin-bottom: 8px; }
.mip-frac-title .material-icons { font-size: 15px; }
.mip-frac-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; padding: 4px 0; }
.mip-frac-field { display: flex; flex-direction: column; gap: 3px; }
.mip-frac-field label { font-size: 10px; color: var(--cly-text-muted); }
.mip-frac-field .md-input { width: 130px; border: 1px solid var(--cly-border); background: var(--cly-bg); color: var(--cly-text-main); border-radius: 7px; padding: 6px 9px; }
.mip-frac-field .fd-btn .material-icons { font-size: 15px; vertical-align: -3px; }

.mip-lote-wrap { margin: 2px 0 2px 22px; }
.mip-lote-pend { display: flex; align-items: center; gap: 10px; padding: 8px 11px; background: #fff7e6; border: 1px solid #f0c36d; border-radius: 8px; }
.mip-lote-pend .material-icons { font-size: 18px; color: #b9770e; }
.mip-lote-pend-tit { font-size: 12px; font-weight: 600; color: #8a5a08; }
.mip-lote-pend-sub { font-size: 12px; color: var(--cly-text-muted); }
.mip-lote-pend .fd-btn { margin-left: auto; }
.mip-lote-pend .fd-btn .material-icons, .mip-lote-sel .fd-btn .material-icons { font-size: 15px; vertical-align: -3px; color: inherit; }
.mip-lote-sel { display: flex; align-items: center; gap: 11px; padding: 7px 11px; background: #e6f4ea; border: 1px solid #9cd2ad; border-radius: 8px; }
.mip-lote-numbox { min-width: 60px; text-align: center; background: var(--cly-surface); border-radius: 7px; padding: 4px 7px; flex-shrink: 0; }
.mip-lote-num-lb { display: block; font-size: 9px; color: var(--cly-text-muted); letter-spacing: .06em; }
.mip-lote-num-vl { display: block; font-size: 17px; font-weight: 600; line-height: 1.05; color: var(--cly-text-main); }
.mip-lote-sel-ic { font-size: 18px; color: #2e7d32; flex-shrink: 0; }
.mip-lote-sel-info { min-width: 0; flex: 1; }
.mip-lote-sel-nm { font-size: 13px; font-weight: 600; color: var(--cly-text-main); }
.mip-lote-sel-meta { font-size: 11px; color: var(--cly-text-muted); margin-top: 2px; }
.mip-lote-sel .mip-lote-trocar { margin-left: auto; }

.mip-footer { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: 12px 18px; border-top: 1px solid var(--cly-border); background: var(--cly-surface); flex-shrink: 0; }
.mip-khint { margin-right: auto; font-size: 11px; color: var(--cly-text-muted); display: flex; align-items: center; gap: 6px; }
.mip-khint .material-icons { font-size: 16px; }
.mip-khint b { font-weight: 600; color: var(--cly-text-main); }
.mip-confirmar .material-icons, .mip-btn-cancelar .material-icons { font-size: 16px; vertical-align: -3px; }

body.app_theme_dark .mip-badge-tipo { background: rgba(46,125,50,.22); color: #81c784; }
body.app_theme_dark .mip-tot-card-venda { background: rgba(46,125,50,.18); }
body.app_theme_dark .mip-tot-card-venda .mip-tot-label, body.app_theme_dark .mip-tot-card-venda .mip-tot-val { color: #81c784; }
body.app_theme_dark .mip-tot-card-desc { background: rgba(216,90,48,.16); }
body.app_theme_dark .mip-tot-card-desc .mip-tot-label, body.app_theme_dark .mip-tot-card-desc .mip-tot-val { color: #ffab91; }
body.app_theme_dark .mip-frac-title { color: #64b5f6; }
body.app_theme_dark .mip-lote-pend { background: rgba(255,167,38,.12); border-color: #6b5320; }
body.app_theme_dark .mip-lote-pend .material-icons, body.app_theme_dark .mip-lote-pend-tit { color: #ffb74d; }
body.app_theme_dark .mip-lote-sel { background: rgba(46,125,50,.16); border-color: #2f6b3f; }
body.app_theme_dark .mip-lote-sel-ic { color: #81c784; }
body.app_theme_dark .mip-lote-numbox { background: #4a4a4a; }

/* Repintura escopada ao modal "Incluir itens" no tema escuro — tons do template
   (#2b2b2b/#383838/#424242) em vez do --cly-bg (#1e1e1e), sem mexer no token global. */
body.app_theme_dark .mip-box { background: #2b2b2b; color: #ececec; }
body.app_theme_dark .mip-header,
body.app_theme_dark .mip-table-wrap,
body.app_theme_dark .mip-footer,
body.app_theme_dark .mip-table tbody td { border-color: #4a4a4a; }
body.app_theme_dark .mip-footer { background: #383838; }
body.app_theme_dark .mip-table thead th { background: #383838; border-bottom-color: #4a4a4a; }
body.app_theme_dark .mip-help { background: #383838; border-color: #4a4a4a; }
body.app_theme_dark .mip-tot-card { background: #424242; }
body.app_theme_dark .mip-badge { background: #424242; color: #cfcfcf; }
body.app_theme_dark .mip-icon-btn { border-color: #565656; }
body.app_theme_dark .mip-icon-btn:hover { background: #424242; }
body.app_theme_dark .mip-frac-wrap { background: #383838; border-color: #4a4a4a; }
body.app_theme_dark .mip-table .md-input,
body.app_theme_dark .mip-desc-input,
body.app_theme_dark .mip-frac-field .md-input { background: #4a4a4a; border-color: #5c5c5c; color: #ececec; }
body.app_theme_dark .mip-table .md-input[readonly],
body.app_theme_dark .mip-table .md-input[disabled] { background: #383838; color: #a6a6a6; }

/* ============================================================
   cly.selecionar_lote — componente de seleção de lote (vanilla)
   Abre acima do modal de conferência (z-index 100000 > .mip-overlay 9950).
   ============================================================ */
.fd-lote-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; opacity: 0; transition: opacity .15s ease; }
.fd-lote-ov.fd-lote-vis { opacity: 1; }
.fd-lote-hidden { display: none !important; }
.fd-lote-box { display: flex; flex-direction: column; width: 100%; max-width: 520px; max-height: 85vh; background: #fff; color: #172b4d; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.4); font-size: 13px; transform: scale(.97); transition: transform .15s ease; }
.fd-lote-ov.fd-lote-vis .fd-lote-box { transform: scale(1); }
.fd-lote-hd { display: flex; align-items: center; gap: 11px; padding: 12px 16px; border-bottom: 1px solid #e4e8ee; flex-shrink: 0; }
.fd-lote-hd-ic { width: 34px; height: 34px; border-radius: 9px; background: #e6f4ea; color: #2e7d32; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-lote-hd-ic .material-icons { font-size: 19px; }
.fd-lote-hd-tx { flex: 1; min-width: 0; }
.fd-lote-hd-tit { font-size: 15px; font-weight: 600; }
.fd-lote-hd-sub { font-size: 11px; color: #6b778c; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-lote-search { display: flex; align-items: center; gap: 8px; margin: 12px 16px 6px; padding: 6px 11px; background: #f4f5f7; border: 1px solid #e4e8ee; border-radius: 8px; flex-shrink: 0; }
.fd-lote-search .material-icons { font-size: 18px; color: #6b778c; }
.fd-lote-q { flex: 1; border: 0; background: transparent; color: inherit; font-size: 13px; outline: none; }
.fd-lote-body { flex: 1; overflow: auto; padding: 6px 16px 16px; }
.fd-lote-loading, .fd-lote-empty { padding: 22px 6px; text-align: center; color: #6b778c; font-size: 13px; }
.fd-lote-item { display: flex; align-items: center; gap: 12px; padding: 11px; border: 1px solid #e4e8ee; border-radius: 9px; margin-top: 8px; }
.fd-lote-num { min-width: 78px; text-align: center; background: #eef2f7; border-radius: 9px; padding: 8px 6px; flex-shrink: 0; }
.fd-lote-num-lb { display: block; font-size: 10px; color: #6b778c; letter-spacing: .06em; }
.fd-lote-num-vl { display: block; font-size: 20px; font-weight: 600; line-height: 1.05; color: #172b4d; }
body.app_theme_dark .fd-lote-num { background: #4a4a4a; }
body.app_theme_dark .fd-lote-num-lb { color: #a6a6a6; }
body.app_theme_dark .fd-lote-num-vl { color: #ececec; }
.fd-lote-it-main { flex: 1; min-width: 0; }
.fd-lote-it-tit { font-weight: 600; }
.fd-lote-it-sub { font-size: 11px; color: #6b778c; margin-top: 3px; }
.fd-lote-it-disp { text-align: right; flex-shrink: 0; }
.fd-lote-it-disp-lb { font-size: 11px; color: #6b778c; }
.fd-lote-it-disp-vl { font-weight: 600; }
.fd-lote-badge { font-size: 11px; padding: 3px 9px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.fd-lote-badge-ok { background: #e6f4ea; color: #2e7d32; }
.fd-lote-badge-aviso { background: #fff7e6; color: #8a5a08; }
.fd-lote-badge-venc { background: #fdecea; color: #c0392b; }
.fd-lote-pick { flex-shrink: 0; }
.fd-lote-pick .material-icons { font-size: 15px; vertical-align: -3px; color: inherit; }
body.app_theme_dark .fd-lote-box { background: #2b2b2b; color: #ececec; }
body.app_theme_dark .fd-lote-hd { border-color: #4a4a4a; }
body.app_theme_dark .fd-lote-hd-ic { background: rgba(46,125,50,.18); color: #81c784; }
body.app_theme_dark .fd-lote-hd-sub,
body.app_theme_dark .fd-lote-it-sub,
body.app_theme_dark .fd-lote-it-disp-lb,
body.app_theme_dark .fd-lote-loading,
body.app_theme_dark .fd-lote-empty,
body.app_theme_dark .fd-lote-search .material-icons { color: #a6a6a6; }
body.app_theme_dark .fd-lote-search { background: #383838; border-color: #4a4a4a; }
body.app_theme_dark .fd-lote-item { background: #424242; border-color: #565656; }
body.app_theme_dark .fd-lote-badge-ok { background: rgba(46,125,50,.2); color: #81c784; }
body.app_theme_dark .fd-lote-badge-aviso { background: rgba(255,167,38,.18); color: #ffb74d; }
body.app_theme_dark .fd-lote-badge-venc { background: rgba(192,57,43,.22); color: #ef9a9a; }

/* ===== cly.aplicar_tabela_preco — componente de tabela de preço de venda ===== */
.fd-tpv-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; opacity: 0; transition: opacity .15s ease; }
.fd-tpv-ov.fd-tpv-vis { opacity: 1; }
.fd-tpv-hidden { display: none !important; }
.fd-tpv-box { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; background: #fff; color: #172b4d; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.4); font-size: 13px; transform: scale(.97); transition: transform .15s ease; }
.fd-tpv-ov.fd-tpv-vis .fd-tpv-box { transform: scale(1); }
.fd-tpv-hd { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e4e8ee; flex-shrink: 0; }
.fd-tpv-hd-ic { width: 38px; height: 38px; border-radius: 50%; background: #e6f1fb; color: #185fa5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-tpv-hd-ic .material-icons { font-size: 20px; }
.fd-tpv-hd-tx { flex: 1; min-width: 0; }
.fd-tpv-hd-tit { font-size: 15px; font-weight: 600; }
.fd-tpv-hd-sub { font-size: 12px; color: #6b778c; margin-top: 2px; }
.fd-tpv-help { margin: 12px 16px 0; padding: 13px 14px; background: #f2f8fe; border: 1px solid #cfe3f8; border-radius: 10px; }
.fd-tpv-help-tit { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #185fa5; margin-bottom: 7px; }
.fd-tpv-help-tit .material-icons { font-size: 16px; }
.fd-tpv-help-tit:not(:first-child) { margin-top: 11px; }
.fd-tpv-help-tx { font-size: 12.5px; color: #44505f; line-height: 1.6; }
.fd-tpv-help-step { display: flex; gap: 9px; margin-top: 7px; font-size: 12.5px; color: #44505f; line-height: 1.5; }
.fd-tpv-help-n { flex-shrink: 0; width: 18px; height: 18px; border-radius: 50%; background: #e6f1fb; color: #185fa5; font-size: 11px; display: flex; align-items: center; justify-content: center; }
.fd-tpv-help-cad { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding-top: 11px; border-top: 1px solid #cfe3f8; font-size: 12px; color: #6b778c; }
.fd-tpv-search-wrap { padding: 12px 16px 0; flex-shrink: 0; }
.fd-tpv-search { display: flex; align-items: center; gap: 8px; border: 1px solid #d6dce4; border-radius: 8px; padding: 0 10px; height: 38px; }
.fd-tpv-search .material-icons { font-size: 18px; color: #97a0af; }
.fd-tpv-search input { border: none; outline: none; height: 36px; flex: 1; background: transparent; color: #172b4d; font-size: 13px; }
.fd-tpv-meta { font-size: 11.5px; color: #97a0af; margin: 7px 2px 0; }
.fd-tpv-body { padding: 8px 16px 4px; overflow-y: auto; flex: 1; }
.fd-tpv-loading, .fd-tpv-empty, .fd-tpv-blocked { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 28px 14px; color: #6b778c; }
.fd-tpv-loading { padding: 32px 14px; }
.fd-tpv-empty .material-icons, .fd-tpv-blocked .material-icons { font-size: 28px; color: #97a0af; }
.fd-tpv-blocked { color: #c0392b; }
.fd-tpv-blocked .material-icons { color: #c0392b; }
.fd-tpv-item { display: flex; align-items: center; gap: 11px; padding: 11px; border: 1px solid #e4e8ee; border-radius: 10px; margin-top: 9px; position: relative; }
.fd-tpv-item-aplicado { border: 2px solid #378add; background: #eaf3fc; margin-top: 16px; }
.fd-tpv-ribbon { position: absolute; top: -9px; left: 12px; font-size: 10.5px; background: #185fa5; color: #fff; font-weight: 600; padding: 1px 8px; border-radius: 8px; display: inline-flex; align-items: center; gap: 3px; }
.fd-tpv-ribbon .material-icons { font-size: 12px; }
.fd-tpv-ic { width: 34px; height: 34px; border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-tpv-ic-up { background: #e1f5ee; color: #0f6e56; }
.fd-tpv-ic-down { background: #fcebeb; color: #a32d2d; }
.fd-tpv-ic-info { background: #e6f1fb; color: #185fa5; }
.fd-tpv-it-main { flex: 1; min-width: 0; }
.fd-tpv-it-tit { font-weight: 600; }
.fd-tpv-it-sub { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 3px; }
.fd-tpv-badge { font-size: 11px; padding: 2px 8px; border-radius: 8px; white-space: nowrap; }
.fd-tpv-badge-up { background: #e1f5ee; color: #0f6e56; }
.fd-tpv-badge-down { background: #fcebeb; color: #a32d2d; }
.fd-tpv-badge-info { background: #e6f1fb; color: #185fa5; }
.fd-tpv-prev { font-size: 12px; color: #6b778c; }
.fd-tpv-prev-up { color: #0f6e56; font-weight: 600; }
.fd-tpv-prev-down { color: #a32d2d; font-weight: 600; }
.fd-tpv-prev-info { color: #185fa5; font-weight: 600; }
.fd-tpv-act { flex-shrink: 0; }
.fd-tpv-act .material-icons { font-size: 15px; vertical-align: -3px; color: inherit; }
.fd-tpv-act-armed { background: #a32d2d !important; color: #fff !important; border-color: #a32d2d !important; }
.fd-tpv-more { width: 100%; margin-top: 10px; border-style: dashed !important; justify-content: center; }
.fd-tpv-more .material-icons { font-size: 16px; vertical-align: -3px; }
.fd-tpv-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e4e8ee; flex-shrink: 0; }
.fd-tpv-ajuda .material-icons, .fd-tpv-cadastrar .material-icons { font-size: 15px; vertical-align: -3px; }
/* Dark mode */
body.app_theme_dark .fd-tpv-box { background: #2d2d2d; color: #ececec; }
body.app_theme_dark .fd-tpv-hd { border-color: #454545; }
body.app_theme_dark .fd-tpv-hd-ic { background: rgba(24,95,165,.22); color: #85b7eb; }
body.app_theme_dark .fd-tpv-hd-sub, body.app_theme_dark .fd-tpv-meta, body.app_theme_dark .fd-tpv-loading, body.app_theme_dark .fd-tpv-empty, body.app_theme_dark .fd-tpv-prev, body.app_theme_dark .fd-tpv-search .material-icons { color: #a6a6a6; }
body.app_theme_dark .fd-tpv-help { background: #262f38; border-color: #2f4055; }
body.app_theme_dark .fd-tpv-help-tit { color: #85b7eb; }
body.app_theme_dark .fd-tpv-help-tx, body.app_theme_dark .fd-tpv-help-step { color: #c8c8c8; }
body.app_theme_dark .fd-tpv-help-n { background: #12304f; color: #85b7eb; }
body.app_theme_dark .fd-tpv-help-cad { border-color: #2f4055; color: #a6a6a6; }
body.app_theme_dark .fd-tpv-search { background: #383838; border-color: #4a4a4a; }
body.app_theme_dark .fd-tpv-search input { color: #ececec; }
body.app_theme_dark .fd-tpv-item { background: #424242; border-color: #565656; }
body.app_theme_dark .fd-tpv-item-aplicado { background: #1c2b3a; border-color: #378add; }
body.app_theme_dark .fd-tpv-ic-up { background: rgba(15,110,86,.25); color: #5dcaa5; }
body.app_theme_dark .fd-tpv-ic-down { background: rgba(163,45,45,.25); color: #f09595; }
body.app_theme_dark .fd-tpv-ic-info { background: #12304f; color: #85b7eb; }
body.app_theme_dark .fd-tpv-badge-up { background: rgba(15,110,86,.25); color: #5dcaa5; }
body.app_theme_dark .fd-tpv-badge-down { background: rgba(163,45,45,.25); color: #f09595; }
body.app_theme_dark .fd-tpv-badge-info { background: #12304f; color: #85b7eb; }
body.app_theme_dark .fd-tpv-prev-up { color: #5dcaa5; }
body.app_theme_dark .fd-tpv-prev-down { color: #f09595; }
body.app_theme_dark .fd-tpv-prev-info { color: #85b7eb; }
body.app_theme_dark .fd-tpv-ft { border-color: #454545; }
/* Mobile */
@media (max-width: 600px) {
    .fd-tpv-ov { padding: 0; align-items: stretch; }
    .fd-tpv-box { max-width: 100%; max-height: 100%; border-radius: 0; }
    .fd-tpv-hd-ic { display: none; }
    .fd-tpv-ajuda span, .fd-tpv-ajuda { font-size: 12px; }
    .fd-tpv-item { flex-wrap: wrap; }
    .fd-tpv-it-main { flex: 1 1 100%; order: 2; }
    .fd-tpv-ic { order: 1; }
    .fd-tpv-act { order: 3; flex: 1 1 100%; justify-content: center; margin-top: 4px; }
    .fd-tpv-help-cad { flex-direction: column; align-items: flex-start; }
}

/* ===== cly_banners.plano_preco — banner "Plano de preço aplicado" (na tela) ===== */
.fd-banner-pp { display: flex; align-items: center; gap: 12px; background: #fff; border: 1px solid #e0e0e0; border-left: 4px solid #185fa5; border-radius: 0; padding: 11px 14px; margin: 8px 0; font-size: 13px; }
.fd-banner-pp-ic { width: 34px; height: 34px; border-radius: 8px; background: #e6f1fb; color: #185fa5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fd-banner-pp-ic .material-icons { font-size: 20px; }
.fd-banner-pp-tx { flex: 1; min-width: 0; }
.fd-banner-pp-tit { color: #1f1f1f; }
.fd-banner-pp-obs { display: flex; align-items: center; gap: 5px; font-size: 12px; color: #854f0b; margin-top: 2px; }
.fd-banner-pp-obs .material-icons { font-size: 14px; }
.fd-banner-pp-rev { flex-shrink: 0; }
.fd-banner-pp-rev .material-icons { font-size: 15px; vertical-align: -3px; color: inherit; }
body.app_theme_dark .fd-banner-pp { background: #383838; border-color: #565656; border-left-color: #378add; }
body.app_theme_dark .fd-banner-pp-ic { background: #12304f; color: #85b7eb; }
body.app_theme_dark .fd-banner-pp-tit { color: #ececec; }
body.app_theme_dark .fd-banner-pp-obs { color: #ef9f27; }
@media (max-width: 600px) {
    .fd-banner-pp { flex-wrap: wrap; }
    .fd-banner-pp-rev { flex: 1 1 100%; justify-content: center; margin-top: 6px; }
}

/* ===== cly_banners.avisos_cliente — badge + modal "Análise do cliente" ===== */
.fd-avc-hidden { display: none !important; }
.fd-avc-badge-col { margin-top: 6px; }
.fd-avc-badge { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; font-size: 12.5px; font-weight: 500; padding: 6px 12px; border-radius: 8px; cursor: pointer; border: 0.5px solid transparent; white-space: nowrap; }
.fd-avc-badge .material-icons { font-size: 16px; flex-shrink: 0; }
.fd-avc-badge .fd-avc-badge-arrow { font-size: 15px; opacity: .75; flex-shrink: 0; }
/* em telas estreitas o texto encolhe com reticências; ícone, chip e seta ficam intactos (sem espremer) */
.fd-avc-badge > span:not(.fd-avc-chip) { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.fd-avc-chip { flex-shrink: 0; border-radius: 10px; padding: 1px 8px; font-size: 11px; line-height: 1.5; white-space: nowrap; }
.fd-avc-danger { background: #fcebeb; color: #a32d2d; border-color: #e0a0a0; }
.fd-avc-danger .fd-avc-chip { background: #a32d2d; color: #fff; }
.fd-avc-warning { background: #faeeda; color: #854f0b; border-color: #e9c982; }
.fd-avc-warning .fd-avc-chip { background: #854f0b; color: #fff; }
.fd-avc-info { background: #e6f1fb; color: #185fa5; border-color: #afd2f2; }
.fd-avc-info .fd-avc-chip { background: #185fa5; color: #fff; }
body.app_theme_dark .fd-avc-danger { background: #3a1717; color: #f09595; border-color: #6e2a2a; }
body.app_theme_dark .fd-avc-danger .fd-avc-chip { background: #f09595; color: #3a1717; }
body.app_theme_dark .fd-avc-warning { background: #3a2a0e; color: #ef9f27; border-color: #5e4716; }
body.app_theme_dark .fd-avc-warning .fd-avc-chip { background: #ef9f27; color: #3a2a0e; }
body.app_theme_dark .fd-avc-info { background: #142a3b; color: #85b7eb; border-color: #2f4f6e; }
body.app_theme_dark .fd-avc-info .fd-avc-chip { background: #85b7eb; color: #142a3b; }

.fd-avc-ov { position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); z-index: 100000; display: flex; align-items: flex-start; justify-content: center; padding: 24px; overflow-y: auto; opacity: 0; transition: opacity .15s ease; }
.fd-avc-ov.fd-avc-vis { opacity: 1; }
.fd-avc-box { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: 90vh; background: #fff; color: #172b4d; border-radius: 12px; overflow: hidden; box-shadow: 0 12px 34px rgba(0,0,0,.4); font-size: 13px; transform: scale(.97); transition: transform .15s ease; }
.fd-avc-ov.fd-avc-vis .fd-avc-box { transform: scale(1); }
.fd-avc-hd { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #e4e8ee; flex-shrink: 0; }
.fd-avc-hd-ic { width: 40px; height: 40px; border-radius: 50%; background: #e6f1fb; color: #185fa5; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 14px; flex-shrink: 0; }
.fd-avc-hd-ic-warn { background: #faeeda; color: #b45309; }
.fd-avc-hd-ic .material-icons { font-size: 21px; }
.fd-avc-hd-tx { flex: 1; min-width: 0; }
.fd-avc-hd-tit { font-size: 15px; font-weight: 600; }
.fd-avc-hd-sub { font-size: 12px; color: #6b778c; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-avc-body { padding: 12px 16px; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 9px; }
.fd-avc-ft { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 16px; border-top: 1px solid #e4e8ee; flex-shrink: 0; }
body.app_theme_dark .fd-avc-box { background: #2d2d2d; color: #ececec; }
body.app_theme_dark .fd-avc-hd { border-color: #454545; }
body.app_theme_dark .fd-avc-hd-ic { background: #12304f; color: #85b7eb; }
body.app_theme_dark .fd-avc-hd-ic-warn { background: rgba(186,117,23,.22); color: #ef9f27; }
body.app_theme_dark .fd-avc-hd-sub { color: #a6a6a6; }
body.app_theme_dark .fd-avc-ft { border-color: #454545; }

.fd-avc-card { border-radius: 0; border: 1px solid; border-left-width: 4px; }
.fd-avc-card-top { display: flex; align-items: center; gap: 11px; padding: 11px 13px; }
.fd-avc-card-ic { font-size: 20px; flex-shrink: 0; }
.fd-avc-card-main { flex: 1; min-width: 0; }
.fd-avc-card-tit { font-size: 13.5px; font-weight: 500; }
.fd-avc-card-tx { font-size: 12.5px; margin-top: 1px; opacity: .85; }
.fd-avc-act { flex-shrink: 0; }
.fd-avc-caret { font-size: 20px; flex-shrink: 0; opacity: .8; }
.fd-avc-card-danger { background: #fcebeb; border-color: #f0c0c0; border-left-color: #a32d2d; color: #a32d2d; }
.fd-avc-card-warning { background: #faeeda; border-color: #e9c982; border-left-color: #854f0b; color: #854f0b; }
.fd-avc-card-info { background: #e6f1fb; border-color: #c5dbf3; border-left-color: #185fa5; color: #185fa5; }
body.app_theme_dark .fd-avc-card-danger { background: #3a1717; border-color: #5a2222; border-left-color: #f09595; color: #f09595; }
body.app_theme_dark .fd-avc-card-warning { background: #3a2a0e; border-color: #5e4716; border-left-color: #ef9f27; color: #ef9f27; }
body.app_theme_dark .fd-avc-card-info { background: #142a3b; border-color: #2f4f6e; border-left-color: #85b7eb; color: #85b7eb; }

.fd-avc-det { padding: 0 13px 11px; display: flex; flex-direction: column; gap: 8px; }
.fd-avc-cond { background: #fff; border: 1px solid #eadfc4; border-radius: 6px; overflow: hidden; }
.fd-avc-cond-head { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f0e8d6; }
.fd-avc-cond-info { flex: 1; font-size: 12.5px; color: #444; font-weight: 500; }
.fd-avc-cond-stat { font-size: 11px; background: #faeeda; color: #854f0b; padding: 1px 7px; border-radius: 8px; white-space: nowrap; }
.fd-avc-cond-print { flex-shrink: 0; }
.fd-avc-cond-print .material-icons { font-size: 16px; }
.fd-avc-cond-item { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; font-size: 12px; color: #555; }
.fd-avc-cond-item-vl { font-weight: 500; white-space: nowrap; }
.fd-avc-cond-tot { display: flex; justify-content: space-between; padding: 7px 10px; font-size: 12px; font-weight: 600; background: #f8fafc; color: #166534; }
.fd-avc-cond-vazio { padding: 7px 10px; font-size: 12px; color: #10b981; }
body.app_theme_dark .fd-avc-cond { background: #333; border-color: #4a4a4a; }
body.app_theme_dark .fd-avc-cond-head { border-color: #444; }
body.app_theme_dark .fd-avc-cond-info { color: #ddd; }
body.app_theme_dark .fd-avc-cond-stat { background: #3a2a0e; color: #ef9f27; }
body.app_theme_dark .fd-avc-cond-item { color: #bbb; }
body.app_theme_dark .fd-avc-cond-tot { background: #2a2a2a; color: #5dcaa5; }

@media (max-width: 600px) {
    .fd-avc-ov { padding: 0; align-items: stretch; }
    .fd-avc-box { max-width: 100%; max-height: 100%; border-radius: 0; }
    .fd-avc-card-top { flex-wrap: wrap; }
    .fd-avc-act { margin-left: 31px; }
}

/* Body — área da tabela */
.fd-b-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}
.fd-b-table-wrap {
    flex: 1;
    overflow: auto;
}
.fd-b-spinner {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,255,255,.7);
    z-index: 10;
}
.fd-b-spin {
    width: 36px;
    height: 36px;
    border: 3px solid var(--cly-border);
    border-top-color: var(--cly-primary);
    border-radius: 50%;
    animation: fd-b-spin .7s linear infinite;
}
@keyframes fd-b-spin { to { transform: rotate(360deg); } }
.fd-b-error-msg {
    padding: 10px 16px;
    background: #fff3cd;
    color: #856404;
    font-size: 13px;
    border-bottom: 1px solid #ffc107;
}

/* Tabela */
.fd-b-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.fd-b-th {
    position: sticky;
    top: 0;
    background: var(--cly-surface);
    color: var(--cly-text-muted);
    text-align: left;
    padding: 6px 6px;
    border-bottom: 2px solid var(--cly-border);
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    transition: background .12s;
}
.fd-b-th:hover { background: var(--cly-primary-bg); }
.fd-b-th.fd-b-sorted { color: var(--cly-primary); }
.fd-b-th-chk, .fd-b-th-hist {
    width: 36px;
    min-width: 36px !important;
    text-align: center;
    cursor: default;
}
.fd-b-th-hist { cursor: default; }
.fd-b-sort-ico { font-size: 14px; vertical-align: middle; }
.fd-b-td {
    padding: 5px 6px;
    border-bottom: 1px solid var(--cly-border);
    color: var(--cly-text-main);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
}
.fd-b-td-hist { text-align: center; width: 40px; }
.fd-b-row { cursor: pointer; }
.fd-b-row:hover .fd-b-td { background: var(--cly-primary-bg); }
.fd-b-row-selected .fd-b-td { background: #dbeafe !important; }
.fd-b-row-selected .fd-b-td:first-child { box-shadow: inset 4px 0 0 #2563eb !important; }
.fd-b-row-selected:hover .fd-b-td { background: #bfdbfe !important; }
.fd-b-row-focus .fd-b-td { outline: 2px solid var(--cly-primary); outline-offset: -1px; }
.fd-b-empty {
    text-align: center;
    padding: 40px;
    color: var(--cly-text-muted);
    font-size: 14px;
}
.fd-b-hist-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cly-text-muted);
    padding: 2px;
    display: inline-flex;
    align-items: center;
    border-radius: 4px;
    transition: color .15s, background .15s;
}
.fd-b-hist-btn:hover { color: var(--cly-primary); background: var(--cly-primary-bg); }
.fd-b-hist-btn .material-icons { font-size: 18px; }

/* Footer */
.fd-b-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--cly-surface);
    border-top: 1px solid var(--cly-border);
    flex-shrink: 0;
    gap: 12px;
    flex-wrap: wrap;
}
.fd-b-info { font-size: 12px; color: var(--cly-text-muted); }
.fd-b-pag { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.fd-b-pag-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--cly-text-main);
    transition: background .12s;
}
.fd-b-pag-btn:hover:not(:disabled):not(.fd-b-pag-active) { background: var(--cly-surface); }
.fd-b-pag-btn:disabled { opacity: .4; cursor: default; }
.fd-b-pag-btn.fd-b-pag-active { background: var(--cly-primary); color: #fff; border-color: var(--cly-primary); cursor: default; }
.fd-b-pag-btn .material-icons { font-size: 16px; }
.fd-b-pag-ellipsis { font-size: 12px; color: var(--cly-text-muted); padding: 0 4px; }

/* Painel de colunas (posicionado dentro do .fd-b-box) */
.fd-b-cols-panel {
    position: absolute;
    top: 52px;
    right: 0;
    width: 260px;
    max-height: calc(100% - 52px);
    background: var(--cly-bg);
    border-left: 1px solid var(--cly-border);
    box-shadow: var(--cly-shadow-md);
    display: flex;
    flex-direction: column;
    z-index: 100;
    overflow: hidden;
}
.fd-b-cols-panel-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--cly-border);
    font-weight: 600;
    font-size: 13px;
    color: var(--cly-text-main);
    flex-shrink: 0;
}
.fd-b-cols-hint { font-size: 11px; color: var(--cly-text-muted); padding: 4px 12px 0; margin: 0; flex-shrink: 0; }
.fd-b-cols-list { overflow-y: auto; padding: 8px; flex: 1; }
.fd-b-col-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-radius: 4px;
    cursor: grab;
    transition: background .12s;
}
.fd-b-col-item:hover { background: var(--cly-surface); }
.fd-b-col-item.fd-b-dragging { opacity: .4; }
.fd-b-col-item.fd-b-drag-over { background: var(--cly-primary-bg); }
.fd-b-col-drag { font-size: 18px; color: var(--cly-text-muted); flex-shrink: 0; cursor: grab; }
.fd-b-col-label { display: flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; color: var(--cly-text-main); user-select: none; }

/* Histórico modal (sub-modal sobre o buscador) */
.fd-b-hist-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9950;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}
.fd-b-hist-overlay.fd-b-hist-open { opacity: 1; }
.fd-b-hist-box {
    background: var(--cly-bg);
    border-radius: 6px;
    width: min(900px, 96vw);
    max-height: 86vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    transform: translateY(12px);
    transition: transform .2s ease;
}
.fd-b-hist-overlay.fd-b-hist-open .fd-b-hist-box { transform: translateY(0); }
.fd-b-hist-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cly-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--cly-text-main);
    flex-shrink: 0;
}
.fd-b-hist-body {
    overflow-y: auto;
    padding: 16px;
    flex: 1;
}
.fd-b-hist-error { color: #c0392b; font-size: 13px; padding: 20px; text-align: center; }

/* Modal de Ajuda */
.fd-b-help-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    z-index: 9960;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s ease;
}
.fd-b-help-overlay.fd-b-help-open { opacity: 1; }
.fd-b-help-box {
    background: var(--cly-bg);
    border-radius: 6px;
    width: min(560px, 94vw);
    max-height: 82vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 8px 32px rgba(0,0,0,.28);
    transform: translateY(14px);
    transition: transform .2s ease;
}
.fd-b-help-overlay.fd-b-help-open .fd-b-help-box { transform: translateY(0); }
.fd-b-help-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cly-border);
    font-weight: 600;
    font-size: 14px;
    color: var(--cly-text-main);
    flex-shrink: 0;
}
.fd-b-help-body {
    overflow-y: auto;
    padding: 14px 18px 18px;
    flex: 1;
    font-size: 13px;
    color: var(--cly-text-main);
    line-height: 1.6;
}
.fd-b-help-body p { margin: 0 0 8px; }
.fd-b-help-sec {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--cly-primary);
    margin: 16px 0 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--cly-border);
}
.fd-b-help-sec:first-child { margin-top: 0; }
.fd-b-help-legenda { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 10px; }
.fd-b-help-leg-item { display: flex; align-items: center; gap: 10px; font-size: 12px; }
/* Swatch = barra sólida de 4px, idêntica à borda lateral da tabela */
.fd-b-help-leg-sq {
    width: 4px;
    height: 18px;
    border-radius: 2px;
    flex-shrink: 0;
    border: none;
}
.fd-b-leg-selected   { background: #2563eb; }
.fd-b-leg-danger     { background: #dc2626; }
.fd-b-leg-zero       { background: #db2777; }
.fd-b-leg-warning-hi { background: #f97316; }
body.app_theme_dark .fd-b-leg-selected   { background: #60a5fa; }
body.app_theme_dark .fd-b-leg-danger     { background: #f87171; }
body.app_theme_dark .fd-b-leg-zero       { background: #f472b6; }
body.app_theme_dark .fd-b-leg-warning-hi { background: #fb923c; }

/* Texto da legenda na cor do status */
.fd-b-leg-txt-selected   { color: #2563eb; font-weight: 500; }
.fd-b-leg-txt-danger     { color: #b91c1c; font-weight: 500; }
.fd-b-leg-txt-zero       { color: #db2777; font-weight: 500; }
.fd-b-leg-txt-warning-hi { color: #c2410c; font-weight: 500; }
body.app_theme_dark .fd-b-leg-txt-selected   { color: #60a5fa; }
body.app_theme_dark .fd-b-leg-txt-danger     { color: #f87171; }
body.app_theme_dark .fd-b-leg-txt-zero       { color: #f472b6; }
body.app_theme_dark .fd-b-leg-txt-warning-hi { color: #fb923c; }
.fd-b-help-list {
    margin: 4px 0 8px 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1.7;
}
.fd-b-help-note {
    font-size: 12px;
    color: var(--cly-text-muted);
    background: var(--cly-surface);
    border-left: 3px solid var(--cly-border);
    padding: 6px 10px;
    border-radius: 0 4px 4px 0;
    margin: 6px 0 8px;
}
body.app_theme_dark .fd-b-help-box { background: var(--cly-bg); }
body.app_theme_dark .fd-b-help-hd { border-color: var(--cly-border); }
body.app_theme_dark .fd-b-help-sec { border-color: var(--cly-border); }

/* Utilitário */
.fd-b-hidden { display: none !important; }

/* Row color states — prioridade: selecionado > negativo > zerado > comprometido.
   Reserva parcial e reserva de entrada são neutras na lista; detalhe no modal de histórico. */
.fd-b-row-danger     .fd-b-td { color: #b91c1c; }
.fd-b-row-danger     .fd-b-td:first-child { box-shadow: inset 4px 0 0 #dc2626; }
.fd-b-row-zero       .fd-b-td { color: #db2777; }
.fd-b-row-zero       .fd-b-td:first-child { box-shadow: inset 4px 0 0 #db2777; }
.fd-b-row-warning-hi .fd-b-td { color: #c2410c; }
.fd-b-row-warning-hi .fd-b-td:first-child { box-shadow: inset 4px 0 0 #f97316; }

/* Copy button */
.fd-b-copy-btn {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--cly-text-muted);
    padding: 1px 3px;
    display: inline-flex;
    align-items: center;
    border-radius: 3px;
    opacity: 0.45;
    transition: opacity .15s, color .15s, background .15s;
    vertical-align: middle;
}
.fd-b-row:hover .fd-b-copy-btn { opacity: 1; }
.fd-b-copy-btn:hover { color: var(--cly-primary); background: var(--cly-primary-bg); }
.fd-b-copy-btn.fd-b-copied { color: #2e7d32; opacity: 1; }
.fd-b-copy-btn .material-icons { font-size: 14px; }
.fd-b-td-nome { }
.fd-b-nome-wrap { display: flex; align-items: center; gap: 4px; min-width: 0; width: 100%; }
.fd-b-nome-txt { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-b-copy-btn { flex: 0 0 auto; }

/* Alinhamento à direita para colunas numéricas */
.fd-b-td-num { text-align: right; padding-left: 3px; padding-right: 10px; }
.fd-b-th-num { text-align: right; padding-left: 3px; padding-right: 10px; }

/* Reveal custo */
.fd-b-reveal { cursor: pointer; border-bottom: 1px dotted currentColor; }

/* Reservado — valor com sinal, sem rótulo */
.fd-b-muted-dash { color: var(--cly-text-muted); opacity: .5; }
.fd-b-res-saida  { color: #c62828; }
.fd-b-res-entrada { color: #1565c0; }

/* Venda com promoção */
.fd-b-venda-orig { text-decoration: line-through; opacity: .55; font-size: 11px; }
.fd-b-promo-ico  { font-size: 13px !important; vertical-align: middle; color: #e65100; }

/* Badges */
.fd-b-badge-recente {
    display: inline-block;
    background: #e8f5e9;
    color: #1b5e20;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    margin-left: 3px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: .04em;
}
.fd-b-badge-promo {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    background: rgba(230,81,0,.1);
    color: #bf360c;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}
.fd-b-badge-promo .material-icons { font-size: 11px; }

/* Countdown hint (debounce) */
.fd-b-countdown {
    font-size: 11px;
    color: var(--cly-text-muted);
    white-space: nowrap;
    align-self: center;
    padding: 0 2px;
}

/* ============================================================
   Filtros extras — bloco colapsível abaixo do toolbar
   ============================================================ */
.fd-b-filtros-extras {
    background: var(--cly-surface);
    border-bottom: 1px solid var(--cly-border);
}
.fd-b-filtros-toggle {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 5px 12px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 12px;
    color: var(--cly-text-muted);
    text-align: left;
    transition: color .15s;
}
.fd-b-filtros-toggle:hover { color: var(--cly-text-main); }
.fd-b-filtros-chevron {
    display: inline-block;
    font-style: normal;
    margin-left: 6px;
    font-size: 10px;
    transition: transform .18s;
    line-height: 1;
}
.fd-b-filtros-toggle-open .fd-b-filtros-chevron { transform: rotate(180deg); }
.fd-b-filtros-body {
    padding: 6px 12px 8px;
    border-top: 1px solid var(--cly-border);
}
.fd-b-filtros-row {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fd-b-filtros-label {
    font-size: 11px;
    color: var(--cly-text-muted);
    white-space: nowrap;
    min-width: 56px;
}
.fd-b-pills {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.fd-b-pill {
    padding: 3px 10px;
    border: 1px solid var(--cly-border);
    border-radius: 12px;
    background: var(--cly-bg);
    color: var(--cly-text-main);
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .12s, color .12s;
}
.fd-b-pill:hover:not(.fd-b-pill-active) { border-color: var(--cly-primary); color: var(--cly-primary); }
.fd-b-pill-active { background: var(--cly-primary); border-color: var(--cly-primary); color: #fff; }

/* ---- Dark mode ---- */
body.app_theme_dark .fd-b-box { background: var(--cly-bg); color: var(--cly-text-main); }
body.app_theme_dark .fd-b-toolbar { background: var(--cly-surface); border-color: var(--cly-border); }
body.app_theme_dark .fd-b-field-label { color: var(--cly-text-muted); }
body.app_theme_dark .fd-b-input {
    background: var(--cly-surface);
    background-image: none;
    color: var(--cly-text-main);
    border-color: var(--cly-border);
}
body.app_theme_dark .fd-b-select {
    background: var(--cly-surface);
    color: var(--cly-text-main);
    border-color: var(--cly-border);
}
body.app_theme_dark .fd-b-th { background: var(--cly-surface); color: var(--cly-text-muted); border-color: var(--cly-border); }
body.app_theme_dark .fd-b-td { color: var(--cly-text-main); border-color: var(--cly-border); background: var(--cly-bg); }
body.app_theme_dark .fd-b-row:hover .fd-b-td { background: rgba(25,118,210,.12) !important; }
body.app_theme_dark .fd-b-row-selected .fd-b-td { background: rgba(37,99,235,.30) !important; }
body.app_theme_dark .fd-b-row-selected .fd-b-td:first-child { box-shadow: inset 4px 0 0 #60a5fa !important; }
body.app_theme_dark .fd-b-row-selected:hover .fd-b-td { background: rgba(37,99,235,.45) !important; }
body.app_theme_dark .fd-b-empty { color: var(--cly-text-muted); }
body.app_theme_dark .fd-b-error-msg { background: #3a2a00; color: #ffc107; border-color: #856404; }
body.app_theme_dark .fd-b-footer { background: var(--cly-surface); border-color: var(--cly-border); }
body.app_theme_dark .fd-b-cols-panel,
body.app_theme_dark .fd-b-cols-panel-hd { background: var(--cly-bg); border-color: var(--cly-border); color: var(--cly-text-main); }
body.app_theme_dark .fd-b-col-label { color: var(--cly-text-main); }
body.app_theme_dark .fd-b-pag-btn { background: var(--cly-surface); color: var(--cly-text-main); border-color: var(--cly-border); }
body.app_theme_dark .fd-b-sel-total { background: rgba(46,125,50,.18); border-color: rgba(46,125,50,.45); }
body.app_theme_dark .fd-b-sel-total-icon,
body.app_theme_dark .fd-b-sel-total-label,
body.app_theme_dark .fd-b-sel-total-val { color: #81c784; }
body.app_theme_dark .fd-b-spinner { background: rgba(0,0,0,.6); }
body.app_theme_dark .fd-b-hist-box { background: var(--cly-bg); }
body.app_theme_dark .fd-b-hist-hd { border-color: var(--cly-border); color: var(--cly-text-main); }
body.app_theme_dark .fd-b-hist-body { color: var(--cly-text-main); }
body.app_theme_dark .fd-b-hist-btn { color: var(--cly-text-muted); }
body.app_theme_dark .fd-b-badge-recente { background: #1b5e20; color: #a5d6a7; }
body.app_theme_dark .fd-b-badge-promo   { background: rgba(255,112,67,.12); color: #ff8a65; }
body.app_theme_dark .fd-b-copy-btn:hover { background: var(--cly-primary-bg); }
body.app_theme_dark .fd-b-copy-btn.fd-b-copied { color: #81c784; }
/* Dark: status usa texto colorido (versão clara de cada cor) + border lateral */
body.app_theme_dark .fd-b-row-danger     .fd-b-td { color: #f87171; }
body.app_theme_dark .fd-b-row-danger     .fd-b-td:first-child { box-shadow: inset 4px 0 0 #f87171; }
body.app_theme_dark .fd-b-row-zero       .fd-b-td { color: #f472b6; }
body.app_theme_dark .fd-b-row-zero       .fd-b-td:first-child { box-shadow: inset 4px 0 0 #f472b6; }
body.app_theme_dark .fd-b-row-warning-hi .fd-b-td { color: #fb923c; }
body.app_theme_dark .fd-b-row-warning-hi .fd-b-td:first-child { box-shadow: inset 4px 0 0 #fb923c; }
body.app_theme_dark .fd-b-res-saida  { color: #ef9a9a; }
body.app_theme_dark .fd-b-res-entrada { color: #90caf9; }
/* Controles de zoom de fonte A-/A+ */
.fd-b-font-ctrl {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    min-width: 26px;
    letter-spacing: -.5px;
    line-height: 1;
}
/* Badge de filtro ativo no botão Filtros extras */
.fd-b-filtros-toggle.fd-b-filtros-has-filter::after {
    content: '';
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--cly-primary);
    margin-left: 5px;
    vertical-align: middle;
    flex-shrink: 0;
}
body.app_theme_dark .fd-b-filtros-extras { background: var(--cly-surface); border-color: var(--cly-border); }
body.app_theme_dark .fd-b-filtros-body { border-color: var(--cly-border); }
body.app_theme_dark .fd-b-pill { background: var(--cly-bg); border-color: var(--cly-border); color: var(--cly-text-main); }
body.app_theme_dark .fd-b-pill-active { background: var(--cly-primary); border-color: var(--cly-primary); color: #fff; }

/* ============================================================
   cly-table-row-multiselect — Linha de tabela multi-seleção
   Uso: adicionar classe `trowseleted` na <tr> ao selecionar a linha.
   A classe é gerenciada pelo JS (clyscript.js e módulos de cancelamento).
   ============================================================ */
tr.trowseleted td:first-child {
    border-top: 3px solid silver;
    border-bottom: 3px solid silver;
    border-left: 3px solid silver;
}
tr.trowseleted td:last-child {
    border-top: 3px solid silver;
    border-bottom: 3px solid silver;
    border-right: 3px solid silver;
}
tr.trowseleted td {
    border-top: 3px solid silver;
    border-bottom: 3px solid silver;
    background-color: #72c02c !important;
    color: white;
}

/* ============================================================
   cly-cancel-toolbar — Toolbar de cancelamento de baixas
   Uso:
     <div class="cly-cancel-toolbar">
       <div class="cly-cancel-summary-area">
         <span class="cly-cancel-hint">
           <i class="material-icons">touch_app</i> Clique nas linhas...
         </span>
         <div class="cly-cancel-summary hidden">
           <span><strong class="cly-cancel-count">0</strong> título(s)</span>
           <span class="cly-cancel-divider">|</span>
           <span>Soma: <strong class="cly-cancel-sum-value">R$ 0,00</strong></span>
           <span class="cly-cancel-divider">|</span>
           <span class="cly-cancel-label">Nº Baixas:
             <span class="cly-cancel-ids-text"></span>
           </span>
         </div>
       </div>
     </div>
   Nota: o botão de ação usa a classe `cly-cancel-btn` via DataTables `button().add()`.
   ============================================================ */
.cly-cancel-toolbar {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    margin-bottom: 15px !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}
.cly-cancel-btn {
    background-color: #f44336 !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    padding: 6px 20px !important;
    font-weight: 500 !important;
    display: inline-flex;
    align-items: center;
    transition: all 0.2s ease;
    box-shadow: 0 4px 10px rgba(244, 67, 54, 0.3) !important;
    border: none;
    margin: 0 !important;
}
.cly-cancel-btn:hover:not(.disabled) {
    background-color: #d32f2f !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(244, 67, 54, 0.4) !important;
}
.cly-cancel-btn.disabled {
    background-color: #e0e0e0 !important;
    color: #9e9e9e !important;
    box-shadow: none !important;
    cursor: not-allowed;
    transform: none;
}
.cly-cancel-summary-area {
    flex-grow: 1;
    text-align: left;
    margin-right: 15px;
}
.cly-cancel-hint {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--cly-text-muted);
}
.cly-cancel-summary {
    padding: 6px 14px;
    background-color: rgba(30, 136, 229, 0.08);
    border-left: 3px solid var(--cly-primary);
    border-radius: 4px;
    color: var(--cly-primary);
    font-weight: 500;
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
}
.cly-cancel-sum-value { color: #4caf50; }
.cly-cancel-divider   { color: #ccc; }
.cly-cancel-label     { color: var(--cly-text-muted); }
.cly-cancel-ids-text  { color: var(--cly-text-main); }

body.app_theme_dark .cly-cancel-btn.disabled {
    background-color: #2d2d2d !important;
    color: #666666 !important;
    border: 1px solid #444444 !important;
}
body.app_theme_dark .cly-cancel-hint    { color: #999999 !important; }
body.app_theme_dark .cly-cancel-summary {
    background-color: rgba(30, 136, 229, 0.15) !important;
    color: #64b5f6 !important;
}
body.app_theme_dark .cly-cancel-sum-value { color: #81c784 !important; }
body.app_theme_dark .cly-cancel-divider   { color: #555 !important; }
body.app_theme_dark .cly-cancel-label     { color: #aaaaaa !important; }
body.app_theme_dark .cly-cancel-ids-text  { color: #cccccc !important; }

@media (max-width: 767px) {
    .cly-cancel-toolbar { flex-direction: column-reverse !important; align-items: flex-start !important; }
    .cly-cancel-summary-area { margin-right: 0; }
}
body.app_theme_dark .fd-b-hist-body .md-card { background: var(--cly-surface) !important; }
body.app_theme_dark .fd-b-header { background: var(--cly-surface); color: var(--cly-text-main); border-bottom: 1px solid var(--cly-border); }
body.app_theme_dark .fd-b-header .fd-b-btn-icon,
body.app_theme_dark .fd-b-header .fd-b-btn-icon .material-icons { color: var(--cly-text-main); }
body.app_theme_dark .fd-b-header .fd-b-btn-icon:hover { background: rgba(255,255,255,.08); }

/* ============================================================
   fhist-* — Modal de histórico/movimentação de produto
   Conteúdo injetado via AJAX em .fd-b-hist-body pelo fd-buscador.js
   CSS inline removido de estoque.php::consulta_produto_movimentacao()
   ============================================================ */
.fhist-wrap { font-size: 13px; }

/* Header */
.fhist-hd { padding: 14px 16px 0; border-bottom: 1px solid var(--cly-border); }
.fhist-hd-title-row { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 6px; }
.fhist-name { font-size: 15px; font-weight: 500; margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; color: var(--cly-text-main); }
.fhist-hd-actions { display: flex; gap: 4px; flex-shrink: 0; }
.fhist-hd-btn { background: none; border: 1px solid var(--cly-border); border-radius: 4px; padding: 3px 6px; cursor: pointer; color: var(--cly-text-muted); display: inline-flex; align-items: center; line-height: 1; }
.fhist-hd-btn:hover { color: var(--cly-primary); background: var(--cly-primary-bg); }
.fhist-hd-btn .material-icons { font-size: 16px; }

/* Meta line */
.fhist-meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 9px; }
.fhist-meta-txt { font-size: 12px; color: var(--cly-text-muted); }
.fhist-meta-sep { font-size: 12px; color: var(--cly-border); }

/* Badges inline (na linha de meta e labels de status) */
.fhist-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 500; padding: 2px 8px; border-radius: 20px; }
.fhist-badge-info    { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.fhist-badge-warning { background: #fff8e1; color: #e65100; }
.fhist-badge-success { background: #e8f5e9; color: #2e7d32; }
.fhist-badge-danger  { background: #fce4ec; color: #c62828; }
.fhist-badge-primary { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.fhist-badge .material-icons { font-size: 11px; vertical-align: middle; }

/* Promo line */
.fhist-promo-line { font-size: 11px; color: #e65100; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 4px; }
.fhist-promo-line .material-icons { font-size: 13px; flex-shrink: 0; }

/* Stock cards */
.fhist-cards { display: flex; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.fhist-card { flex: 1; min-width: 100px; padding: 9px 11px; border-radius: 6px; border: .5px solid var(--cly-border); background: var(--cly-bg); }
.fhist-card-main { border: 1px solid var(--cly-border); }
.fhist-card-ico { font-size: 13px; color: var(--cly-text-muted); margin-bottom: 3px; display: block; line-height: 1; }
.fhist-card-ico .material-icons { font-size: 13px; }
.fhist-card-lbl { font-size: 10px; color: var(--cly-text-muted); margin: 0 0 3px; text-transform: uppercase; letter-spacing: .05em; display: block; }
.fhist-card-val { font-size: 17px; font-weight: 500; margin: 0 0 5px; color: var(--cly-text-main); line-height: 1.1; }
.fhist-card-main .fhist-card-val { font-size: 20px; }
.fhist-card-badge { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; display: inline-block; }
.fhist-card-badge-success { background: #e8f5e9; color: #2e7d32; }
.fhist-card-badge-warning { background: #fff8e1; color: #e65100; }
.fhist-card-badge-danger  { background: #fce4ec; color: #c62828; }
.fhist-card-badge-neutral { background: var(--cly-surface); color: var(--cly-text-muted); }
.fhist-card-badge-info    { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.fhist-card-aux { font-size: 11px; color: var(--cly-text-muted); margin-bottom: 9px; line-height: 1.5; }

/* Prices */
.fhist-prices { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 9px; align-items: flex-end; }
.fhist-price-item { display: flex; flex-direction: column; gap: 1px; }
.fhist-price-lbl { font-size: 11px; color: var(--cly-text-muted); }
.fhist-price-val { font-size: 13px; font-weight: 500; color: var(--cly-text-main); }
.fhist-price-orig { font-size: 11px; color: var(--cly-text-muted); text-decoration: line-through; }
.fhist-reveal { cursor: pointer; border-bottom: 1px dotted currentColor; color: var(--cly-text-muted); transition: color .15s; }
.fhist-reveal:hover { color: var(--cly-text-main); }

/* Secondary details */
.fhist-details { display: flex; gap: 14px; flex-wrap: wrap; padding-bottom: 10px; }
.fhist-det { font-size: 11px; color: var(--cly-text-muted); }
.fhist-det b { font-weight: 400; color: var(--cly-text-main); }

/* Badge origem (produto transferido) */
.fhist-badge-origem { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 6px; background: #e0f7fa; color: #00796b; margin-top: 4px; }

/* Tabs */
.fhist-tabs-nav { display: flex; overflow-x: auto; margin: 0; padding: 0 16px; border-top: 1px solid var(--cly-border); scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.fhist-tabs-nav::-webkit-scrollbar { display: none; }
.fhist-tab-btn { font-size: 12px; padding: 8px 10px; border: none; border-bottom: 2px solid transparent; background: transparent; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; color: var(--cly-text-muted); transition: color .15s, border-color .15s; }
.fhist-tab-btn:hover { color: var(--cly-text-main); }
.fhist-tab-btn.fhist-tab-active { color: var(--cly-primary); border-bottom-color: var(--cly-primary); }
.fhist-tab-btn .material-icons { font-size: 15px; }
.fhist-tab-count { font-size: 10px; padding: 1px 5px; border-radius: 20px; background: var(--cly-surface); color: var(--cly-text-muted); }
.fhist-tab-count-warn { background: #fff8e1; color: #e65100; }

/* Panels */
.fhist-panels { padding: 8px 12px 14px; }
.fhist-panel { display: none; }
.fhist-panel.fhist-panel-active {
    display: block;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    padding: 12px 14px;
}

/* Table */
.fhist-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.fhist-table th { text-align: left; padding: 0 10px 7px 0; border-bottom: 1px solid var(--cly-border); font-size: 10px; font-weight: 500; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .05em; white-space: nowrap; }
.fhist-table td { padding: 7px 10px 7px 0; border-top: 1px solid var(--cly-border); vertical-align: middle; color: var(--cly-text-main); }
.fhist-table tbody tr:hover td { background: var(--cly-surface); }
.fhist-tr { text-align: right; }
.fhist-muted { color: var(--cly-text-muted) !important; }
.fhist-italic { font-style: italic; }
.fhist-row-estorno td { color: #c62828 !important; }
.fhist-empty { padding: 24px; text-align: center; color: var(--cly-text-muted); font-size: 13px; }

/* Movimentações — destaque de entrada/saída */
.fhist-row-entrada .fhist-tr { color: #2e7d32; }
.fhist-row-saida   .fhist-tr { color: #c62828; }

/* Tipo badges nas tabelas */
.fhist-type-badge { font-size: 10px; padding: 1px 6px; border-radius: 20px; font-weight: 500; white-space: nowrap; display: inline-block; }
.fhist-type-badge-entrada { background: #e8f5e9; color: #2e7d32; }
.fhist-type-badge-saida   { background: #fce4ec; color: #c62828; }
.fhist-type-badge-estorno { background: #fce4ec; color: #c62828; }

/* Fotos */
.fhist-fotos { display: flex; flex-wrap: wrap; gap: 10px; padding: 8px 0; }
.fhist-foto-item { border-radius: 6px; overflow: hidden; border: 1px solid var(--cly-border); }
.fhist-foto-item img { display: block; width: 160px; height: 120px; object-fit: cover; }

/* Centro de custo */
.fhist-cc-wrap { max-width: 520px; }
.fhist-cc-total td { border-top: 2px solid var(--cly-border) !important; font-size: 13px; }
.fhist-cc-resumo { margin-top: 10px; padding: 10px 12px; background: var(--cly-surface); border-radius: 6px; font-size: 12px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fhist-cc-empty { padding: 20px; text-align: center; color: var(--cly-text-muted); }
.fhist-cc-empty ul { text-align: left; display: inline-block; margin-top: 8px; }

/* Dark mode */
body.app_theme_dark .fhist-hd { border-bottom-color: var(--cly-border); }
body.app_theme_dark .fhist-tabs-nav { border-top-color: var(--cly-border); }
body.app_theme_dark .fhist-table th { border-bottom-color: var(--cly-border); }
body.app_theme_dark .fhist-table td { border-top-color: var(--cly-border); }
body.app_theme_dark .fhist-table tbody tr:hover td { background: var(--cly-surface); }
body.app_theme_dark .fhist-badge-warning { background: #4a2800; color: #ffcc80; }
body.app_theme_dark .fhist-badge-success { background: #1b5e20; color: #a5d6a7; }
body.app_theme_dark .fhist-badge-danger  { background: #b71c1c; color: #ffcdd2; }
body.app_theme_dark .fhist-card-badge-success { background: #1b5e20; color: #a5d6a7; }
body.app_theme_dark .fhist-card-badge-warning { background: #4a2800; color: #ffcc80; }
body.app_theme_dark .fhist-card-badge-danger  { background: #b71c1c; color: #ffcdd2; }
body.app_theme_dark .fhist-promo-line { color: #ffcc80; }
body.app_theme_dark .fhist-foto-item { border-color: var(--cly-border); }
body.app_theme_dark .fhist-type-badge-entrada { background: #1b5e20; color: #a5d6a7; }
body.app_theme_dark .fhist-type-badge-saida   { background: #b71c1c; color: #ffcdd2; }
body.app_theme_dark .fhist-badge-origem { background: #004d40; color: #80cbc4; }
body.app_theme_dark .fhist-panel.fhist-panel-active { background: rgba(255,255,255,.03); border-color: var(--cly-border); }
body.app_theme_dark .fhist-row-entrada .fhist-tr { color: #81c784; }
body.app_theme_dark .fhist-row-saida   .fhist-tr { color: #ef9a9a; }

@media (max-width: 480px) {
    .fhist-card { min-width: 120px; }
    .fhist-prices { gap: 12px; }
}

/* ============================================================
   fd-modal — Modal fixo (não-destrutivo) controlado por cly.modal_fixo
   Substitui UIkit.modal() para modais estáticos do PHP/HTML.
   Controle de exibição via classe .fd-open (JS apenas alterna classes).
   ============================================================ */
.fd-modal { display: none; }

.fd-modal.fd-open {
    display: flex;
    position: fixed;
    inset: 0;
    align-items: center;
    justify-content: center;
    z-index: 999999999; /* acima dos preloaders globais (até 99999999) para o modal nunca ficar atrás do overlay de carregamento */
    background: rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
    padding: 20px;
}
body.app_theme_dark .fd-modal.fd-open { background: rgba(0, 0, 0, .55); }

/* trava o scroll do body enquanto um modal fixo estiver aberto */
body.fd-modal-aberto { overflow: hidden; }

/* Caixa de diálogo */
.fd-modal .fd-modal-dialog {
    background: #fff;
    color: #333;
    border-radius: 8px;
    max-height: 92vh;
    overflow: auto;
    width: 100%;
    box-shadow: 0 10px 25px rgba(0, 0, 0, .35);
    display: flex;
    flex-direction: column;
}
body.app_theme_dark .fd-modal .fd-modal-dialog { background: #222; color: #eee; }

/* Cabeçalho / corpo / rodapé fixos */
.fd-modal .fd-modal-header {
    padding: 16px 22px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex: 0 0 auto;
}
.fd-modal .fd-modal-header h2,
.fd-modal .fd-modal-header h3 { margin: 0; font-size: 18px; font-weight: 600; }

.fd-modal .fd-modal-body {
    padding: 20px 22px;
    overflow: auto;
    flex: 1 1 auto;
}

.fd-modal .fd-modal-footer {
    padding: 14px 22px;
    border-top: 1px solid #e5e5e5;
    text-align: right;
    flex: 0 0 auto;
}
body.app_theme_dark .fd-modal .fd-modal-header,
body.app_theme_dark .fd-modal .fd-modal-footer { border-color: #3a3a3a; }

/* Botão X de fechar do cabeçalho */
.fd-modal .fd-modal-x {
    background: none;
    border: none;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: #888;
    padding: 0 4px;
}
.fd-modal .fd-modal-x:hover { color: #000; }
body.app_theme_dark .fd-modal .fd-modal-x { color: #aaa; }
body.app_theme_dark .fd-modal .fd-modal-x:hover { color: #fff; }

/* larguras utilitárias do dialog */
.fd-modal .fd-modal-dialog.fd-modal-sm { max-width: 440px; }
.fd-modal .fd-modal-dialog.fd-modal-md { max-width: 640px; }
.fd-modal .fd-modal-dialog.fd-modal-lg { max-width: 900px; }

/* ============================================================
   fd-contagem — cards de contagem de cédulas/moedas
   ============================================================ */
.fd-contagem-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}
.fd-contagem-card {
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 10px;
    background: var(--cly-surface);
    text-align: center;
}
.fd-contagem-card img { max-width: 100%; height: auto; border-radius: 4px; margin-bottom: 6px; }
.fd-contagem-card .fd-contagem-label { font-weight: 600; font-size: 13px; margin-bottom: 6px; color: var(--cly-text-main); }
.fd-contagem-card input.fd-contagem-input {
    font-size: 20px !important;
    height: 42px !important;
    text-align: right;
    width: 100%;
}
.fd-contagem-card .fd-contagem-subtotal {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--cly-primary);
}
body.app_theme_dark .fd-contagem-card .fd-contagem-subtotal { color: var(--cly-border-focus); }

/* Rodapé de totais da contagem */
.fd-contagem-totais {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    width: 100%;
    justify-content: flex-end;
    align-items: center;
}
.fd-contagem-totais .fd-total-item { font-size: 14px; color: var(--cly-text-muted); }
.fd-contagem-totais .fd-total-item b { color: var(--cly-text-main); }
.fd-contagem-totais .fd-total-geral {
    font-size: 20px;
    font-weight: 700;
    color: var(--cly-primary);
    margin-left: auto;
}

/* ============================================================
   fd-cont — Contagem de dinheiro (redesign, escopo fi_caixa)
   Card compacto: chip da denominação (destaque, altura do card) +
   quantidade centralizada + "total:" discreto no canto inferior.
   Classes próprias (fd-cont-*) para NÃO afetar fi_caixa_adm /
   fi_conciliacao, que seguem usando .fd-contagem-*.
   ============================================================ */
.fd-cont-hint { font-size: 13.5px; color: var(--cly-text-muted); margin: 0 0 16px; }
.fd-cont-sec {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cly-text-muted);
    margin: 0 0 8px;
}
.fd-cont-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
    gap: 8px;
    margin-bottom: 18px;
}

/* Card (uma denominação) */
.fd-cont-card {
    display: flex;
    align-items: stretch;
    gap: 9px;
    min-height: 48px;
    padding: 7px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-left: 3px solid var(--cly-border);
    border-radius: 8px;
    transition: border-color .15s;
}
.fd-cont-card.fd-cont-on { border-left-color: var(--cor); }

/* Chip da denominação — o destaque (ocupa a altura do card) */
.fd-cont-den {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 74px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 17px;
    font-weight: 700;
    color: var(--cly-text-main);
    background: rgba(128, 128, 128, .12);
    white-space: nowrap;
}
.fd-cont-card.fd-cont-on .fd-cont-den { background: var(--corbg); }
.fd-cont-card--coin .fd-cont-den,
.fd-cont-card--cheque .fd-cont-den { font-size: 15px; }

/* Miolo: quantidade centralizada | "total:" no canto inferior direito */
.fd-cont-mid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: 6px;
}
.fd-cont-input {
    justify-self: center;
    width: 66px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--cly-text-main);
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    transition: border-color .15s, box-shadow .15s;
}
.fd-cont-input:focus {
    outline: none;
    border-color: var(--cly-border-focus);
    box-shadow: 0 0 0 3px rgba(30, 136, 229, .15);
}
/* sem as setinhas feias do input[type=number] */
.fd-cont-input::-webkit-outer-spin-button,
.fd-cont-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fd-cont-input[type=number] { -moz-appearance: textfield; }

.fd-cont-sub {
    justify-self: end;
    align-self: end;
    padding-bottom: 1px;
    font-size: 11.5px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--cly-text-muted);
}

/* Cheque: input ocupa a linha, alinhado à direita */
.fd-cont-card--cheque { max-width: 360px; }
.fd-cont-mid--cheque { display: flex; align-items: center; }
.fd-cont-input--cheque { width: 100%; text-align: right; }

/* Resumo fixo no rodapé (tiles) */
.fd-cont-resumo {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.5fr;
    gap: 11px;
    margin-bottom: 14px;
    text-align: left;
}
.fd-cont-tile {
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 7px;
    padding: 10px 13px;
}
.fd-cont-tile-lbl { font-size: 12px; color: var(--cly-text-muted); margin-bottom: 4px; }
.fd-cont-tile-val { font-size: 18px; font-weight: 700; color: var(--cly-text-main); }
.fd-cont-tile--total { background: var(--cly-primary-bg); border-color: var(--cly-primary); }
.fd-cont-tile--total .fd-cont-tile-lbl,
.fd-cont-tile--total .fd-cont-tile-val { color: var(--cly-primary-text); }
.fd-cont-tile--total .fd-cont-tile-val { font-size: 24px; }

/* Ações do rodapé (escopadas — neutralizam o hover azul global do .md-btn) */
#modal_contagem_cedulas .fd-modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
}
#modal_contagem_cedulas .fd-modal-footer-actions .md-btn {
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#modal_contagem_cedulas .fd-modal-footer-actions .md-btn .material-icons {
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
}
#modal_contagem_cedulas .md-btn-flat { color: var(--cly-text-muted); }
#modal_contagem_cedulas .md-btn-flat:hover { background: var(--cly-surface); color: var(--cly-text-main); }
#modal_contagem_cedulas .md-btn-success:hover { background: #43a047; color: #fff; }

@media (max-width: 640px) {
    .fd-cont-resumo { grid-template-columns: 1fr 1fr; }
    .fd-cont-card--cheque { max-width: none; }
}

/* ============================================================
   fd-fechar-caixa — destaque da diferença
   ============================================================ */
.fd-diferenca-box {
    background: #fff3cd;
    color: #8a6d3b;
    border: 1px solid #ffeeba;
    border-radius: 8px;
    padding: 16px 18px;
    text-align: center;
    margin-bottom: 16px;
}
.fd-diferenca-box .fd-diferenca-valor { font-size: 28px; font-weight: 700; display: block; }
body.app_theme_dark .fd-diferenca-box { background: #4a3a00; color: #ffe082; border-color: #6b5400; }

/* ============================================================
   fd-emitir — cards de ação (NFC-e / NF-e)
   ============================================================ */
.fd-emitir-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.fd-emitir-card {
    flex: 1 1 160px;
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 22px 14px;
    background: var(--cly-surface);
    text-align: center;
    cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
    color: var(--cly-text-main);
}
.fd-emitir-card:hover { border-color: var(--cly-primary); box-shadow: var(--cly-shadow-md); }
.fd-emitir-card > .material-icons { font-size: 40px; color: var(--cly-primary); display: block; margin-bottom: 8px; }
.fd-emitir-card .fd-emitir-titulo { font-size: 16px; font-weight: 600; }
.fd-emitir-card .fd-emitir-sub { font-size: 12px; color: var(--cly-text-muted); margin-top: 4px; min-height: 30px; }

/* botão Transmitir (1 clique) + links secundários PDF/XML */
.fd-emitir-card .fd-emitir-transmitir {
    width: 100%;
    margin: 12px 0 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
}
.fd-emitir-card .fd-emitir-transmitir .material-icons { font-size: 18px; margin: 0; color: inherit; }
.fd-emitir-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: 13px;
}
.fd-emitir-link {
    color: var(--cly-primary);
    text-decoration: none;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
}
.fd-emitir-link:hover { text-decoration: underline; background: var(--cly-primary-bg); }
.fd-emitir-sep { color: var(--cly-text-muted); }

/* contexto (Nº / cliente / valor) no topo do modal de emissão */
.fd-emitir-contexto {
    display: none;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    font-size: 13px;
}
.fd-emitir-contexto.fd-tem-contexto { display: flex; }
.fd-emitir-contexto .fd-emitir-ctx-item { color: var(--cly-text-muted); }
.fd-emitir-contexto .fd-emitir-ctx-item b { color: var(--cly-text-main); font-weight: 600; }

/* status de documento já emitido (Nº/série/data) + ações Imprimir/XML/Eventos */
.fd-emitir-emitida {
    text-align: left;
}
.fd-emitir-emitida .fd-emitir-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(67, 160, 71, .10);
    border: 1px solid rgba(67, 160, 71, .30);
    border-radius: 8px;
    margin-bottom: 16px;
}
.fd-emitir-emitida .fd-emitir-status .material-icons { font-size: 32px; color: #43a047; margin: 0; }
.fd-emitir-emitida .fd-emitir-status-txt { display: flex; flex-direction: column; }
.fd-emitir-emitida .fd-emitir-status-tit { font-size: 15px; font-weight: 600; color: var(--cly-text-main); }
.fd-emitir-emitida .fd-emitir-status-sub { font-size: 12px; color: var(--cly-text-muted); }
.fd-emitir-emitida .fd-emitir-acoes-doc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* ============================================================
   fd-fila — modal de consulta de fila (spinner)
   ============================================================ */
.fd-fila-body { text-align: center; padding: 26px 18px; }
.fd-fila-spinner {
    width: 46px; height: 46px;
    border: 4px solid var(--cly-border);
    border-top-color: var(--cly-primary);
    border-radius: 50%;
    margin: 0 auto 16px;
    animation: fd-spin 0.9s linear infinite;
}
@keyframes fd-spin { to { transform: rotate(360deg); } }
.fd-fila-msg { font-size: 15px; color: var(--cly-text-main); }

/* cronômetro de tempo decorrido */
.fd-fila-cronometro {
    font-size: 13px;
    color: var(--cly-text-muted);
    margin-bottom: 18px;
}
.fd-fila-cronometro b { color: var(--cly-text-main); font-variant-numeric: tabular-nums; }

/* etapas da emissão (Enviado -> SEFAZ -> Gerando) */
.fd-fila-etapas {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    text-align: left;
}
.fd-fila-etapa {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    color: var(--cly-text-muted);
    transition: color .2s ease;
}
.fd-fila-etapa-ic {
    width: 30px; height: 30px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    flex-shrink: 0;
}
.fd-fila-etapa-ic .material-icons { font-size: 18px; color: var(--cly-text-muted); }
.fd-fila-etapa-txt { font-size: 14px; }

/* etapa ativa */
.fd-fila-etapa.fd-etapa-ativa { color: var(--cly-text-main); font-weight: 600; }
.fd-fila-etapa.fd-etapa-ativa .fd-fila-etapa-ic {
    background: var(--cly-primary-bg);
    border-color: var(--cly-primary);
}
.fd-fila-etapa.fd-etapa-ativa .fd-fila-etapa-ic .material-icons {
    color: var(--cly-primary);
    animation: fd-spin 1.2s linear infinite;
}
/* etapa concluída */
.fd-fila-etapa.fd-etapa-ok { color: var(--cly-text-main); }
.fd-fila-etapa.fd-etapa-ok .fd-fila-etapa-ic { background: #43a047; border-color: #43a047; }
.fd-fila-etapa.fd-etapa-ok .fd-fila-etapa-ic .material-icons { color: #fff; animation: none; }

.fd-fila-aviso {
    font-size: 12px;
    color: #e65100;
    background: rgba(230, 81, 0, .08);
    border: 1px solid rgba(230, 81, 0, .25);
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 4px;
}
body.app_theme_dark .fd-fila-aviso { color: #ffb74d; }

/* ============================================================
   fd-emis — Componente único cly.emissao_doc_fiscal (NF-e 55 / NFC-e 65)
   Modais criados em runtime sobre a estrutura .fd-modal. Tema claro/escuro
   via variáveis --cly-*. Reaproveita o visual de fd-emitir / fd-fila.
   ============================================================ */

/* contexto (Nº / cliente / valor) no topo */
.fd-emis-contexto {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 18px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    font-size: 13px;
}
.fd-emis-contexto .fd-emis-ctx-item { color: var(--cly-text-muted); }
.fd-emis-contexto .fd-emis-ctx-item b { color: var(--cly-text-main); font-weight: 600; }

/* grade de cards (NFC-e / NF-e) */
.fd-emis-grid {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.fd-emis-card {
    flex: 1 1 180px;
    display: flex;
    flex-direction: column;
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 20px 16px;
    background: var(--cly-surface);
    text-align: center;
    color: var(--cly-text-main);
}
.fd-emis-card > .material-icons {
    font-size: 40px;
    color: var(--cly-primary);
    display: block;
    margin-bottom: 8px;
}
.fd-emis-card .fd-emis-card-titulo { font-size: 16px; font-weight: 600; }
.fd-emis-card .fd-emis-card-sub {
    font-size: 12px;
    color: var(--cly-text-muted);
    margin-top: 4px;
    min-height: 30px;
}

/* card de hook futuro (NFS-e) — desabilitado visualmente */
.fd-emis-card.fd-emis-card-disabled {
    opacity: .5;
    cursor: not-allowed;
}
.fd-emis-card.fd-emis-card-disabled > .material-icons { color: var(--cly-text-muted); }

/* botão Transmitir (1 clique) — ação primária */
.fd-emis-card .fd-emis-transmitir {
    width: 100%;
    margin: 14px 0 0;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
}
.fd-emis-card .fd-emis-transmitir .material-icons { font-size: 18px; margin: 0; color: inherit; }

/* bloco de pré-visualização — separado e rotulado (não transmite) */
.fd-emis-preview {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cly-border);
}
.fd-emis-preview-lbl {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .02em;
    color: var(--cly-text-muted);
    margin-bottom: 8px;
}
.fd-emis-preview-lbl .material-icons { font-size: 14px; }
.fd-emis-preview-btns {
    display: flex;
    gap: 8px;
}
.fd-emis-card .fd-emis-prev-btn {
    flex: 1;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 13px;
}
.fd-emis-card .fd-emis-prev-btn .material-icons { font-size: 16px; margin: 0; color: inherit; }

.fd-emis-vazio { color: var(--cly-text-muted); text-align: center; padding: 20px 0; }

/* documento já emitido: status + ações */
.fd-emis-emitida { text-align: left; }
.fd-emis-emitida .fd-emis-status {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(67, 160, 71, .10);
    border: 1px solid rgba(67, 160, 71, .30);
    border-radius: 8px;
    margin-bottom: 16px;
}
.fd-emis-emitida .fd-emis-status .material-icons { font-size: 32px; color: #43a047; margin: 0; }
.fd-emis-emitida .fd-emis-status-txt { display: flex; flex-direction: column; }
.fd-emis-emitida .fd-emis-status-tit { font-size: 15px; font-weight: 600; color: var(--cly-text-main); }
.fd-emis-emitida .fd-emis-status-sub { font-size: 12px; color: var(--cly-text-muted); }
.fd-emis-emitida .fd-emis-acoes-doc {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

/* modal de identificação do consumidor (NFC-e) */
.fd-emis-consumidor .fd-emis-consumidor-ajuda {
    color: var(--cly-text-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.fd-emis-consumidor .fd-emis-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cly-text-muted);
    margin: 10px 0 4px;
}
.fd-emis-consumidor input.md-input { width: 100%; }

/* rodapé de ações (consumidor / fila) */
.fd-emis-acoes { display: flex; gap: 8px; justify-content: flex-end; }

/* ---- Eventos (cancelamento / carta de correção) ---- */
.fd-emis-eventos-bar {
    display: flex;
    justify-content: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--cly-border);
}
.fd-emis-evento-btn { display: inline-flex; align-items: center; gap: 6px; }
.fd-emis-evento-btn .material-icons { font-size: 18px; margin: 0; }

/* modais próprios de evento / carta de correção */
.fd-emis-evento .fd-emis-evento-ajuda,
.fd-emis-cce .fd-emis-cce-ajuda {
    color: var(--cly-text-muted);
    font-size: 13px;
    margin: 0 0 14px;
}
.fd-emis-evento .fd-emis-label,
.fd-emis-cce .fd-emis-label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--cly-text-muted);
    margin: 10px 0 4px;
}
.fd-emis-evento textarea.md-input,
.fd-emis-cce textarea.md-input,
.fd-emis-cce input.md-input { width: 100%; }
.fd-emis-evento textarea.md-input,
.fd-emis-cce textarea.md-input { resize: vertical; min-height: 64px; }
.fd-emis-contador {
    font-size: 11px;
    color: var(--cly-text-muted);
    text-align: right;
    margin-top: 4px;
}
/* aguarde de evento — reusa estilos .fd-fila-* já existentes */
.fd-emis-evento-aguarde { /* placeholder semântico, herda .fd-fila-body */ }

/* aviso de operação interestadual (topo do modal de emissão) */
.fd-emis-aviso-inter {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-bottom: 14px;
    background: #fff8e1;
    border: 1px solid #ffe082;
    border-radius: 8px;
    font-size: 12px;
    color: #8d6e00;
}
.fd-emis-aviso-inter .material-icons { font-size: 17px; }
.app_theme_dark .fd-emis-aviso-inter { background: #332b16; border-color: #5e4f1f; color: #ffd54f; }

/* consumidor exibido no estado emitida (NFC-e) */
.fd-emis-consumidor-info {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding: 8px 12px;
    background: var(--cly-surface);
    border: 1px dashed var(--cly-border);
    border-radius: 8px;
    font-size: 12px;
    color: var(--cly-text-muted);
}
.fd-emis-consumidor-info .material-icons { font-size: 16px; }

/* painel de identificação do documento (cancelamento robusto) */
.fd-emis-doc-info {
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 12px;
    font-size: 12px;
    color: var(--cly-text-main);
}
.fd-emis-doc-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 16px;
    margin-bottom: 8px;
}
.fd-emis-doc-item i { font-style: normal; color: var(--cly-text-muted); }
.fd-emis-doc-item b { font-weight: 600; color: var(--cly-text-main); }
.fd-emis-doc-chave-lbl { color: var(--cly-text-muted); margin-bottom: 2px; }
.fd-emis-doc-chave code {
    display: block;
    font-family: monospace;
    font-size: 11px;
    color: var(--cly-text-main);
    word-break: break-all;
}
.fd-emis-doc-prot { margin-top: 6px; }
.fd-emis-doc-prot i { font-style: normal; color: var(--cly-text-muted); }
.fd-emis-doc-prot b { font-weight: 600; color: var(--cly-text-main); }

/* alerta de irreversibilidade no cancelamento */
.fd-emis-evento-alerta {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 12px;
    margin-bottom: 12px;
    background: #fdecec;
    border: 1px solid #f5c6c6;
    border-radius: 8px;
    font-size: 12px;
    color: #c62828;
}
.fd-emis-evento-alerta .material-icons { font-size: 16px; }
.app_theme_dark .fd-emis-evento-alerta { background: #2a1a1a; border-color: #5c2b2b; color: #ef9a9a; }

/* ============================================================
   fd-aprov — Modal único de aprovação de movimento no caixa
   (#modal_aprovacao_caixa). Claro/escuro via variáveis --cly-*.
   ============================================================ */

/* Badge de status no header */
.fd-modal .fd-aprov-status {
    margin-left: auto;
    margin-right: 12px;
    background: var(--cly-primary-bg);
    color: var(--cly-primary-text);
    font-weight: 600;
}

/* Resumo (cliente / valores) */
.fd-aprov-resumo {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 16px;
}
.fd-aprov-resumo-col {
    flex: 1 1 240px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 12px 14px;
}
.fd-aprov-linha {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
    font-size: 14px;
    color: var(--cly-text-main);
}
.fd-aprov-linha span { color: var(--cly-text-muted); }
.fd-aprov-linha b { color: var(--cly-text-main); }
.fd-aprov-linha.fd-aprov-liquido b { color: #2e7d32; font-size: 16px; }
body.app_theme_dark .fd-aprov-linha.fd-aprov-liquido b { color: #81c784; }

/* Bloco de negociações */
.fd-aprov-nego {
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
}
.fd-aprov-nego-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--cly-surface);
    font-weight: 600;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cly-text-muted);
    border-bottom: 1px solid var(--cly-border);
}
.fd-aprov-nego-head b { color: var(--cly-text-main); font-size: 15px; }

/* Seção de pagamentos */
.fd-aprov-pgto-sec { margin-top: 4px; }

/* Barra de progresso */
.fd-aprov-progresso {
    height: 8px;
    background: var(--cly-border);
    border-radius: 6px;
    overflow: hidden;
    margin-bottom: 14px;
}
.fd-aprov-progresso-bar {
    height: 100%;
    width: 0;
    border-radius: 6px;
    transition: width .25s ease, background .25s ease;
    background: var(--cly-primary);
}
.fd-aprov-progresso-bar.fd-prog-pend { background: #f0ad4e; }
.fd-aprov-progresso-bar.fd-prog-ok { background: #2e7d32; }
body.app_theme_dark .fd-aprov-progresso-bar.fd-prog-ok { background: #66bb6a; }

/* Linha de item (negociação / pagamento) */
.fd-pgto-item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    margin-bottom: 8px;
    background: var(--cly-bg);
}
.fd-aprov-nego .fd-pgto-item { border: 0; border-bottom: 1px solid var(--cly-border); border-radius: 0; margin-bottom: 0; }
.fd-aprov-nego .fd-pgto-item:last-child { border-bottom: 0; }
.fd-pgto-forma { font-weight: 600; color: var(--cly-text-main); flex: 1 1 140px; }
.fd-pgto-plano { color: var(--cly-text-muted); font-size: 13px; flex: 0 1 auto; }
.fd-pgto-tipo {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cly-text-muted);
    background: var(--cly-surface);
    border-radius: 4px;
    padding: 2px 6px;
}
.fd-pgto-valor { font-weight: 600; color: var(--cly-text-main); margin-left: auto; }

/* Chips de estado */
.fd-pgto-chip {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    border-radius: 12px;
    padding: 3px 9px;
    white-space: nowrap;
}
.fd-pgto-chip.fd-chip-ok { background: #e6f4ea; color: #1e7e34; }
.fd-pgto-chip.fd-chip-info { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.fd-pgto-chip.fd-chip-warn { background: #fff3cd; color: #8a6d3b; margin: 0 6px 6px 0; }
body.app_theme_dark .fd-pgto-chip.fd-chip-ok { background: rgba(46,125,50,.22); color: #81c784; }
body.app_theme_dark .fd-pgto-chip.fd-chip-warn { background: #4a3a00; color: #ffe082; }

/* Área extra (data creditar / form de cheque) */
.fd-pgto-extra { flex: 1 1 100%; }
.fd-pgto-creditar { margin-top: 8px; display: flex; flex-direction: column; max-width: 220px; }
.fd-pgto-creditar label { font-size: 12px; color: var(--cly-text-muted); margin-bottom: 2px; }

/* Painel inline (cartão / cheque) */
.fd-pgto-panel {
    flex: 1 1 100%;
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    margin-top: 8px;
    background: var(--cly-surface);
    overflow: hidden;
}
.fd-pgto-panel-titulo {
    padding: 10px 14px;
    font-weight: 600;
    color: var(--cly-text-main);
    border-bottom: 1px solid var(--cly-border);
    background: var(--cly-bg);
}
.fd-pgto-panel-titulo.fd-pgto-panel-erro { color: #c0392b; }
body.app_theme_dark .fd-pgto-panel-titulo.fd-pgto-panel-erro { color: #ff8a80; }
.fd-pgto-panel-corpo { padding: 14px; }
.fd-pgto-cartao-data { display: flex; flex-direction: column; max-width: 220px; padding: 10px 14px; }
.fd-pgto-cartao-data label { font-size: 12px; color: var(--cly-text-muted); }
.fd-pgto-cartao-tab { margin: 0; }
.fd-pgto-cartao-tab th { color: var(--cly-text-muted); font-size: 12px; }
.fd-pgto-cartao-tab td, .fd-pgto-cartao-tab th { color: var(--cly-text-main); }

/* legibilidade de inputs/selects no tema escuro dentro do modal */
body.app_theme_dark #modal_aprovacao_caixa input,
body.app_theme_dark #modal_aprovacao_caixa select,
body.app_theme_dark #modal_aprovacao_caixa textarea {
    background: var(--cly-bg);
    color: var(--cly-text-main);
    border-color: var(--cly-border);
}

/* Recebido / troco */
.fd-aprov-dinheiro { margin-top: 8px; }

/* Pendências */
.fd-aprov-pendencias {
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed #f0ad4e;
    border-radius: 8px;
    background: #fff8e1;
}
body.app_theme_dark .fd-aprov-pendencias { background: rgba(240,173,78,.10); border-color: #6b5400; }
.fd-aprov-pend-titulo { font-weight: 600; font-size: 12px; color: #8a6d3b; margin-bottom: 6px; }
body.app_theme_dark .fd-aprov-pend-titulo { color: #ffe082; }

/* Contador no footer */
.fd-aprov-contador { margin-right: auto; color: var(--cly-text-muted); font-size: 13px; float: left; }

/* Footer da aprovação alinhado (badge à esquerda, botões à direita) */
.fd-modal .fd-aprov-footer {
    display: flex;
    align-items: center;
    gap: 10px;
}
.fd-modal .fd-aprov-footer .md-btn { margin-bottom: 0; }

/* Badge discreto de status (substitui o texto do contador) */
.fd-aprov-badge {
    margin-right: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 6px 12px;
    border-radius: 14px;
    white-space: nowrap;
}
.fd-aprov-badge::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: currentColor;
    display: inline-block;
}
/* Pronto (verde) */
.fd-aprov-badge.fd-aprov-badge-ok { background: #e6f4ea; color: #1e7e34; }
body.app_theme_dark .fd-aprov-badge.fd-aprov-badge-ok { background: rgba(46,125,50,.22); color: #81c784; }
/* Pendência (âmbar) */
.fd-aprov-badge.fd-aprov-badge-pend { background: #fff3cd; color: #8a6d3b; }
body.app_theme_dark .fd-aprov-badge.fd-aprov-badge-pend { background: #4a3a00; color: #ffe082; }

/* Ícone alinhado dentro dos botões dos modais do caixa */
.fd-modal .md-btn .material-icons {
    font-size: 18px;
    vertical-align: middle;
    margin-right: 2px;
    line-height: 1;
}

/* Campo somente-leitura (ex.: troco — sempre calculado) */
.fd-input-readonly,
input.fd-input-readonly[readonly] {
    cursor: default;
    background: var(--cly-surface) !important;
    opacity: .95;
}
body.app_theme_dark .fd-input-readonly,
body.app_theme_dark input.fd-input-readonly[readonly] {
    background: var(--cly-surface) !important;
}

/* ============================================================
   Botões com ícone nos rodapés dos modais do caixa
   (contagem de cédulas / transferência). Alinhamento + espaçamento.
   ============================================================ */
.fd-modal-footer-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.fd-modal-footer-actions .md-btn { margin-bottom: 0; }

/* ============================================================
   Modal de transferência entre caixas (#modal_transferencia)
   Espaçamento do formulário gerado (escopado, não altera o gerador).
   ============================================================ */
#modal_transferencia .fd-modal-body .uk-grid { margin-bottom: 4px; }
#modal_transferencia .md-input-wrapper {
    margin-top: 6px;
    margin-bottom: 14px;
}
#modal_transferencia .fd-modal-body .uk-form-row,
#modal_transferencia .fd-modal-body .parsley-row { margin-bottom: 6px; }

/* =============================================================
   cly-wizard — Componente de wizard em etapas (modal overlay)
   Reutilizável. Primeira adoção: condicional (baixa total / parcial).
   Variantes via modifiers: alert (--danger/--aviso), config (--2col).
   Variáveis escopadas no overlay (não vazam para :root).
   Aplicado por enquanto SOMENTE no condicional.
   ============================================================= */
.cly-wizard-overlay {
    --modal-zindex: 2147483647;
    --bg-color: #ffffff; --text-color: #333333; --text-muted: #777777; --border-color: #eeeeee;
    --header-bg: #fafafa; --panel-bg: #fdfdfd;
    --th-bg: #f8f9fa; --th-color: #444444; --hover-bg: #f9f9f9;
    --input-bg: #ffffff; --input-color: #333333; --input-border: #cccccc;
    --btn-border: #cccccc; --btn-text: #555555; --btn-hover: #eeeeee;
    --card-blue-bg: rgba(0,123,255,0.05); --card-blue-border: rgba(0,123,255,0.15); --card-blue-text: #007bff;
    --card-green-bg: rgba(40,167,69,0.05); --card-green-border: rgba(40,167,69,0.15); --card-green-text: #28a745;
    --card-orange-bg: rgba(255,152,0,0.05); --card-orange-border: rgba(255,152,0,0.15); --card-orange-text: #e65100;
    --alert-danger-bg: rgba(220,53,69,0.05); --alert-danger-border: rgba(220,53,69,0.2); --alert-danger-text: #c82333;
    --alert-warning-bg: rgba(255,152,0,0.05); --alert-warning-border: rgba(255,152,0,0.2); --alert-warning-text: #e65100;

    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7); backdrop-filter: blur(5px);
    z-index: var(--modal-zindex) !important;
    align-items: center; justify-content: center; padding: 20px; box-sizing: border-box;
}
body.app_theme_dark .cly-wizard-overlay {
    --bg-color: #1e1e1e; --text-color: #eeeeee; --text-muted: #aaaaaa; --border-color: #333333;
    --header-bg: #151515; --panel-bg: #1a1a1a;
    --th-bg: #222222; --th-color: #cccccc; --hover-bg: #2a2a2a;
    --input-bg: #333333; --input-color: #ffffff; --input-border: #555555;
    --btn-border: #555555; --btn-text: #cccccc; --btn-hover: #333333;
    --card-blue-bg: rgba(0,123,255,0.1); --card-blue-border: rgba(0,123,255,0.2); --card-blue-text: #66b2ff;
    --card-green-bg: rgba(40,167,69,0.1); --card-green-border: rgba(40,167,69,0.2); --card-green-text: #4caf50;
    --card-orange-bg: rgba(255,152,0,0.1); --card-orange-border: rgba(255,152,0,0.2); --card-orange-text: #ffb74d;
    --alert-danger-bg: rgba(220,53,69,0.1); --alert-danger-border: rgba(220,53,69,0.3); --alert-danger-text: #ff8a80;
    --alert-warning-bg: rgba(255,152,0,0.1); --alert-warning-border: rgba(255,152,0,0.3); --alert-warning-text: #ffb74d;
}
.cly-wizard-overlay.active { display: flex; }

.cly-wizard-box {
    background: var(--bg-color); color: var(--text-color);
    border-radius: 12px; width: 100%; max-width: 1100px; max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4); overflow: hidden;
}
.cly-wizard-header { flex: 0 0 auto; display: flex; justify-content: space-between; align-items: center; padding: 15px 25px; border-bottom: 1px solid var(--border-color); background: var(--header-bg); }
.cly-wizard-body { flex: 1 1 0% !important; overflow-y: auto; min-height: 0 !important; padding: 20px 25px; -webkit-overflow-scrolling: touch; }
.cly-wizard-footer { flex: 0 0 auto; padding: 15px 25px; border-top: 1px solid var(--border-color); background: var(--header-bg); display: flex; align-items: center; justify-content: space-between; gap: 15px; }

.cly-wizard-stepper { display: flex; gap: 30px; align-items: center; }
.cly-wizard-step { font-weight: 600; color: var(--text-muted); padding-bottom: 5px; transition: 0.3s; display: flex; align-items: center; gap: 8px; font-size: 15px; }
.cly-wizard-step.active { color: #007bff; border-bottom: 3px solid #007bff; }

.cly-wizard-panel { display: none; }
.cly-wizard-panel.active { display: block; animation: clyWizardFadeIn 0.4s ease; }

.cly-wizard-table-wrap { overflow-x: auto; border: 1px solid var(--border-color); border-radius: 8px; margin-top: 15px; }
.cly-wizard-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.cly-wizard-table th, .cly-wizard-table td { padding: 12px 15px; text-align: left; border-bottom: 1px solid var(--border-color); }
.cly-wizard-table th { background: var(--th-bg); font-weight: 600; font-size: 13px; color: var(--th-color); white-space: nowrap; }
.cly-wizard-table tbody tr:hover { background: var(--hover-bg); }

.cly-wizard-input { width: 90px; padding: 8px; border-radius: 6px; border: 1px solid var(--input-border); background: var(--input-bg); color: var(--input-color); text-align: right; font-size: 14px; transition: 0.3s; }
.cly-wizard-input:focus { border-color: #007bff; outline: none; box-shadow: 0 0 0 3px rgba(0,123,255,0.1); }

.cly-wizard-btn { padding: 10px 20px; border-radius: 6px; border: none; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; transition: 0.2s; }
.cly-wizard-btn--outline { background: transparent; border: 1px solid var(--btn-border); color: var(--btn-text); }
.cly-wizard-btn--outline:hover { background: var(--btn-hover); }
.cly-wizard-btn--primary { background: #007bff; color: white; box-shadow: 0 2px 6px rgba(0,123,255,0.3); }
.cly-wizard-btn--primary:hover { background: #0056b3; }
.cly-wizard-btn--success { background: #28a745; color: white; box-shadow: 0 2px 6px rgba(40,167,69,0.3); }
.cly-wizard-btn--success:hover { background: #218838; }

.cly-wizard-info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-top: 20px; }
.cly-wizard-card { padding: 15px; border-radius: 8px; display: flex; align-items: center; justify-content: space-between; }
.cly-wizard-card-h { display: flex; align-items: center; gap: 6px; font-weight: bold; color: var(--text-muted); font-size: 14px; }
.cly-wizard-card-v { font-size: 22px; font-weight: 800; }
.cly-wizard-card--azul { background: var(--card-blue-bg); border: 1px solid var(--card-blue-border); }
.cly-wizard-card--azul .cly-wizard-card-v { color: var(--card-blue-text); }
.cly-wizard-card--verde { background: var(--card-green-bg); border: 1px solid var(--card-green-border); }
.cly-wizard-card--verde .cly-wizard-card-v { color: var(--card-green-text); }
.cly-wizard-card--laranja { background: var(--card-orange-bg); border: 1px solid var(--card-orange-border); }
.cly-wizard-card--laranja .cly-wizard-card-v { color: var(--card-orange-text); }

.cly-wizard-alert { display: flex; gap: 15px; padding: 15px; border-radius: 8px; margin-bottom: 20px; align-items: flex-start; }
.cly-wizard-alert--danger { background: var(--alert-danger-bg); border: 1px solid var(--alert-danger-border); color: var(--alert-danger-text); }
.cly-wizard-alert--danger h4 { color: var(--alert-danger-text); }
.cly-wizard-alert--aviso { background: var(--alert-warning-bg); border: 1px solid var(--alert-warning-border); color: var(--alert-warning-text); }

.cly-wizard-config { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; background: var(--panel-bg); border: 1px solid var(--border-color); padding: 20px; border-radius: 8px; }
.cly-wizard-config--2col { grid-template-columns: 1fr 1fr; }
.cly-wizard-config-box { border: 1px solid var(--border-color); border-radius: 6px; padding: 10px; background: var(--input-bg); }
.cly-wizard-avisos { border: 1px dashed var(--border-color); border-radius: 6px; padding: 15px; background: var(--header-bg); font-size: 13px; min-height: 52px; display: flex; flex-direction: column; align-items: flex-start; color: var(--text-muted); }

@media (max-width: 768px) {
    .cly-wizard-overlay { padding: 0 !important; align-items: flex-start !important; height: 100dvh !important; width: 100vw !important; }
    .cly-wizard-box { position: relative !important; width: 100% !important; height: 100% !important; max-height: 100% !important; border-radius: 0 !important; margin: 0 !important; display: flex !important; flex-direction: column !important; }
    .cly-wizard-header { flex: 0 0 auto !important; padding: 12px 15px; }
    .cly-wizard-stepper { gap: 15px; }
    .cly-wizard-step { font-size: 13px; }
    .cly-wizard-body { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; padding: 15px; -webkit-overflow-scrolling: touch !important; }
    .cly-wizard-footer { flex: 0 0 auto !important; padding: 12px 15px !important; padding-bottom: calc(12px + env(safe-area-inset-bottom)) !important; box-shadow: 0 -4px 12px rgba(0,0,0,0.1); z-index: 10; }
    #bloco_bipagem, #bloco_bipagem_parcial { flex-direction: column; align-items: stretch !important; gap: 10px !important; }
    #bloco_bipagem > div, #bloco_bipagem_parcial > div { max-width: 100% !important; min-width: 100% !important; }
    .cly-wizard-info { display: flex; gap: 8px; margin-top: 15px; }
    .cly-wizard-card { flex: 1; flex-direction: column; padding: 10px 4px; text-align: center; justify-content: center; gap: 4px; }
    .cly-wizard-card-h { font-size: 10px; flex-direction: column; gap: 2px; }
    .cly-wizard-card-h .material-icons { font-size: 18px; }
    .cly-wizard-card-v { font-size: 16px; }
    .cly-wizard-config, .cly-wizard-config--2col { grid-template-columns: 1fr; padding: 12px; gap: 12px; margin-bottom: 15px; }
    .cly-wizard-alert { padding: 12px; gap: 10px; }
    .cly-wizard-alert i { font-size: 24px; }
    .cly-wizard-footer > div { display: flex; flex-direction: row !important; gap: 8px; width: 100%; }
    .cly-wizard-btn { flex: 1; padding: 12px 5px; font-size: 13px; text-align: center; white-space: normal; line-height: 1.2; }
    .cly-wizard-btn .material-icons { display: none; }
}
@keyframes clyWizardFadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }

/* ============================================================
   fd-caixa-card — Mini-dashboard de resumo do caixa (ITEM 6)
   Card injetado via cly.caixa_card_resumo(). Tema claro + escuro
   por variáveis --cly-*. Saldo colorido por sinal; cards-métrica
   clicáveis; botões circulares de aprovação.
   ============================================================ */
.fd-caixa-card {
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 12px;
    box-shadow: var(--cly-shadow-sm);
    padding: 16px 18px;
    margin-bottom: 14px;
}
.fd-caixa-card-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 10px; margin-bottom: 14px;
}
.fd-caixa-card-title {
    font-size: 12px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--cly-text-muted);
}
.fd-caixa-card-status {
    display: inline-flex; align-items: center; gap: 9px;
    font-size: 16px; font-weight: 600;
    color: #2e7d32; background: #e7f4e9;
    border-radius: 999px; padding: 9px 18px; white-space: nowrap;
}
.fd-caixa-card-status::before {
    content: ''; width: 10px; height: 10px; border-radius: 50%;
    background: currentColor; display: inline-block;
}
body.app_theme_dark .fd-caixa-card-status { color: #81c784; background: rgba(102, 187, 106, .16); }

/* tons utilitarios */
.fd-pos   { color: #2e7d32; }
.fd-neg   { color: #c62828; }
.fd-warn  { color: #b9770f; }
.fd-muted { color: var(--cly-text-muted); }
body.app_theme_dark .fd-pos  { color: #81c784; }
body.app_theme_dark .fd-neg  { color: #ef9a9a; }
body.app_theme_dark .fd-warn { color: #e0a73a; }

/* subtitulos de secao dentro do card */
.fd-caixa-sub {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .5px; color: var(--cly-text-muted); margin-bottom: 9px;
}
.fd-caixa-sub-mt { margin-top: 4px; }

/* grid: saldo | formas */
.fd-caixa-grid2 {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px; margin-bottom: 14px;
}

/* bloco do saldo + composicao */
.fd-caixa-saldo-block {
    border-radius: 11px; padding: 15px 17px;
    background: rgba(67, 160, 71, .10); border: 1px solid rgba(67, 160, 71, .28);
}
.fd-caixa-saldo-block.fd-saldo-neg { background: rgba(229, 57, 53, .10); border-color: rgba(229, 57, 53, .28); }
body.app_theme_dark .fd-caixa-saldo-block { background: rgba(129, 199, 132, .08); border-color: rgba(129, 199, 132, .22); }
body.app_theme_dark .fd-caixa-saldo-block.fd-saldo-neg { background: rgba(239, 154, 154, .08); border-color: rgba(239, 154, 154, .22); }

.fd-caixa-saldo { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.fd-caixa-saldo-icon {
    font-size: 23px; width: 44px; height: 44px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0;
}
.fd-saldo-pos .fd-caixa-saldo-icon { background: #43a047; }
.fd-saldo-neg .fd-caixa-saldo-icon { background: #e53935; }
body.app_theme_dark .fd-saldo-pos .fd-caixa-saldo-icon { background: #2e7d32; }
body.app_theme_dark .fd-saldo-neg .fd-caixa-saldo-icon { background: #c62828; }
.fd-caixa-saldo-txt { display: flex; flex-direction: column; }
.fd-caixa-saldo-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--cly-text-muted); }
.fd-caixa-saldo-valor { font-size: 25px; font-weight: 700; line-height: 1.1; }
.fd-saldo-pos .fd-caixa-saldo-valor { color: #2e7d32; }
.fd-saldo-neg .fd-caixa-saldo-valor { color: #c62828; }
body.app_theme_dark .fd-saldo-pos .fd-caixa-saldo-valor { color: #81c784; }
body.app_theme_dark .fd-saldo-neg .fd-caixa-saldo-valor { color: #ef9a9a; }

/* composicao (linhas) */
.fd-caixa-comp { border-top: 1px solid var(--cly-border); padding-top: 4px; }
.fd-caixa-comp-row { display: flex; justify-content: space-between; align-items: baseline; padding: 5px 0; }
.fd-caixa-comp-lbl { font-size: 12px; color: var(--cly-text-muted); }
.fd-caixa-comp-val { font-size: 13.5px; font-weight: 600; color: var(--cly-text-main); }
.fd-caixa-comp-strong { border-top: 1px solid var(--cly-border); margin-top: 3px; padding-top: 8px; }
.fd-caixa-comp-strong .fd-caixa-comp-lbl { font-weight: 600; color: var(--cly-text-main); }
.fd-caixa-comp-strong .fd-caixa-comp-val { font-size: 15px; font-weight: 700; }

/* formas de pagamento */
.fd-caixa-formas {
    background: var(--cly-surface); border: 1px solid var(--cly-border);
    border-radius: 11px; padding: 15px 17px;
}
.fd-caixa-forma-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; margin-bottom: 12px; gap: 2px; }
.fd-caixa-forma-bar:empty { display: none; }
.fd-caixa-forma-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.fd-caixa-forma-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.fd-caixa-forma-nome { font-size: 12.5px; color: var(--cly-text-main); flex: 1; min-width: 0; }
.fd-caixa-forma-pct { font-size: 11px; color: var(--cly-text-muted); margin-right: 8px; }
.fd-caixa-forma-val { font-size: 13px; font-weight: 600; color: var(--cly-text-main); }
.fd-caixa-forma-vazio { font-size: 12.5px; color: var(--cly-text-muted); }

/* data de abertura por extenso (linha discreta sob o status, sem cor) */
.fd-caixa-card-statuswrap { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.fd-caixa-card-dataext { font-size: 12.5px; color: var(--cly-text-muted); padding-right: 4px; }

/* atalhos "Nova entrada" / "Nova saida" no rodape do bloco de saldo.
   Fundo neutro (destaca sobre o verde/vermelho do bloco) + chip de icone
   colorido preenchido (contraste no claro). */
.fd-caixa-lancmini { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; padding-top: 13px; border-top: 1px solid var(--cly-border); }
.fd-caixa-lm {
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 8px 11px; border-radius: 9px; text-align: left;
    background: #ffffff; border: 1px solid; font-family: inherit;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
}
body.app_theme_dark .fd-caixa-lm { background: #4d4d4d; box-shadow: none; }
.fd-caixa-lm-ic { width: 27px; height: 27px; border-radius: 7px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; }
.fd-caixa-lm-ic .material-icons { font-size: 16px; }
.fd-caixa-lm-tt { font-size: 12.5px; font-weight: 600; }
.fd-caixa-lm-in { border-color: #a5d6a7; }
.fd-caixa-lm-in .fd-caixa-lm-ic { background: #43a047; }
.fd-caixa-lm-in .fd-caixa-lm-tt { color: #2e7d32; }
.fd-caixa-lm-in:hover { border-color: #43a047; }
.fd-caixa-lm-out { border-color: #f3b4b4; }
.fd-caixa-lm-out .fd-caixa-lm-ic { background: #e53935; }
.fd-caixa-lm-out .fd-caixa-lm-tt { color: #c62828; }
.fd-caixa-lm-out:hover { border-color: #e53935; }
body.app_theme_dark .fd-caixa-lm-in { border-color: rgba(129, 199, 132, .34); }
body.app_theme_dark .fd-caixa-lm-in .fd-caixa-lm-ic { background: #66bb6a; }
body.app_theme_dark .fd-caixa-lm-in .fd-caixa-lm-tt { color: #a5d6a7; }
body.app_theme_dark .fd-caixa-lm-out { border-color: rgba(229, 115, 115, .34); }
body.app_theme_dark .fd-caixa-lm-out .fd-caixa-lm-ic { background: #ef5350; }
body.app_theme_dark .fd-caixa-lm-out .fd-caixa-lm-tt { color: #ef9a9a; }

/* card informativo quando o caixa nao tem entradas (chamada p/ novo lancamento) */
.fd-caixa-formas-cta { display: flex; align-items: center; }
.fd-caixa-cta { display: flex; gap: 13px; align-items: flex-start; }
.fd-caixa-cta-ic {
    width: 46px; height: 46px; border-radius: 11px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    background: rgba(67, 160, 71, .12); color: #43a047;
}
.fd-caixa-cta-ic .material-icons { font-size: 25px; }
body.app_theme_dark .fd-caixa-cta-ic { background: rgba(129, 199, 132, .14); color: #81c784; }
.fd-caixa-cta-txt { display: flex; flex-direction: column; gap: 4px; }
.fd-caixa-cta-tit { font-size: 14px; font-weight: 600; color: var(--cly-text-main); }
.fd-caixa-cta-sub { font-size: 12.5px; color: var(--cly-text-muted); line-height: 1.5; margin-bottom: 7px; }
.fd-caixa-cta-btn {
    align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
    background: #1976d2; color: #fff; border: 0; border-radius: 8px;
    padding: 8px 14px; font-size: 13px; cursor: pointer;
}
.fd-caixa-cta-btn .material-icons { font-size: 17px; }
.fd-caixa-cta-btn:hover { background: #1565c0; }
body.app_theme_dark .fd-caixa-cta-btn { background: #1e88e5; }
body.app_theme_dark .fd-caixa-cta-btn:hover { background: #1976d2; }

/* painel de orientacao do NOVO caixa (some quando o caixa ja existe).
   Tons de tela (system theme), nao os --cly-* de modal: claro = card cinza
   claro com passos brancos; escuro = #383838 com passos #424242. */
#fd_caixa_orient_novo { margin-bottom: 8px; }
.fd-caixa-orient {
    background: #f4f5f7; border: 1px solid #e6e8ec;
    border-radius: 12px; padding: 15px 17px;
}
body.app_theme_dark .fd-caixa-orient { background: #383838; border-color: #4a4a4a; }
.fd-caixa-orient-head {
    display: flex; align-items: center; gap: 9px; margin-bottom: 13px;
    font-size: 15px; font-weight: 600; color: var(--cly-text-main);
}
.fd-caixa-orient-head .material-icons { font-size: 20px; color: #1976d2; }
body.app_theme_dark .fd-caixa-orient-head .material-icons { color: #64b5f6; }
.fd-caixa-orient-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.fd-caixa-orient-step {
    display: flex; flex-direction: column; gap: 9px; align-items: flex-start;
    background: #ffffff; border: 1px solid #e6e8ec;
    border-radius: 10px; padding: 14px 15px;
}
body.app_theme_dark .fd-caixa-orient-step { background: #424242; border-color: #565656; }
.fd-caixa-orient-n {
    flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: #1976d2; color: #fff; font-size: 13px; font-weight: 600;
}
body.app_theme_dark .fd-caixa-orient-n { background: #1e88e5; }
.fd-caixa-orient-step p { margin: 0; font-size: 13px; line-height: 1.55; color: var(--cly-text-muted); }
.fd-caixa-orient-step b { color: var(--cly-text-main); font-weight: 600; }

/* movimento de credito */
.fd-caixa-credito { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.fd-caixa-cred-card {
    flex: 1; min-width: 150px;
    background: var(--cly-surface); border: 1px solid var(--cly-border);
    border-radius: 9px; padding: 10px 13px;
}
.fd-caixa-cred-lbl { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; color: var(--cly-text-muted); margin-bottom: 3px; }
.fd-caixa-cred-val { font-size: 16px; font-weight: 700; }
.fd-caixa-cred-sub { font-size: 10.5px; color: var(--cly-text-muted); margin-top: 1px; }

/* cards-metrica de aprovacao */
.fd-caixa-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin-bottom: 4px; }
.fd-caixa-metric {
    display: flex; flex-direction: column; gap: 13px;
    background: var(--cly-surface); border: 1px solid var(--cly-border);
    border-radius: 11px; padding: 14px 15px; cursor: pointer;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.fd-caixa-metric:hover, .fd-caixa-metric:focus {
    box-shadow: var(--cly-shadow-md); transform: translateY(-2px);
    border-color: var(--cly-border-focus); outline: none;
}
.fd-caixa-metric-top { display: flex; align-items: flex-start; gap: 12px; }
.fd-caixa-metric-ic { width: 40px; height: 40px; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; }
.fd-caixa-metric-ic .material-icons { font-size: 20px; }
.fd-caixa-metric-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.fd-caixa-metric-label { font-size: 15px; font-weight: 600; color: var(--cly-text-main); margin-bottom: 3px; }
.fd-caixa-metric-cx { font-size: 12.5px; color: var(--cly-text-muted); margin-bottom: 3px; }
.fd-caixa-metric-hoje { font-size: 12.5px; }
.fd-caixa-aprovar { display: inline-flex; align-items: center; gap: 5px; color: #b9770f; font-weight: 600; }
.fd-caixa-aprovar .material-icons { font-size: 14px; }
body.app_theme_dark .fd-caixa-aprovar { color: #e0a73a; }
.fd-caixa-emdia { display: inline-flex; align-items: center; gap: 5px; color: #2e7d32; }
.fd-caixa-emdia .material-icons { font-size: 14px; }
body.app_theme_dark .fd-caixa-emdia { color: #81c784; }
/* botão CTA do card de aprovação (largura total) */
.fd-caixa-metric-btn {
    display: flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 0; border-radius: 8px; font-size: 13px; font-weight: 600;
}
.fd-caixa-metric-btn .material-icons { font-size: 16px; }
.fd-caixa-metric-btn-aprovar { color: #fff; } /* fundo (cor do tipo) vem inline */
.fd-caixa-metric-btn-abrir { border: 1px solid var(--cly-border); color: var(--cly-text-main); }
body.app_theme_dark .fd-caixa-metric-btn-abrir { border-color: #6f6f6f; }
/* card com pendência: borda + anel na cor do tipo vêm inline (.fd-caixa-metric-pend) */

/* atalho "Ir para as listas completas" (rolagem até as seções abaixo) */
.fd-caixa-ir-listas-wrap { display: flex; justify-content: center; margin-top: 14px; }
.fd-caixa-ir-listas {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 12.5px; font-weight: 600; color: var(--cly-primary-text);
    cursor: pointer; padding: 8px 14px; border-radius: 8px;
    transition: background .15s ease;
}
.fd-caixa-ir-listas:hover { background: var(--cly-surface); }
body.app_theme_dark .fd-caixa-ir-listas:hover { background: #454545; }
.fd-caixa-ir-listas .material-icons { font-size: 16px; }

/* nota de rodape */
.fd-caixa-nota {
    margin-top: 12px; font-size: 11.5px; color: var(--cly-text-muted);
    display: flex; align-items: center; gap: 6px;
}
.fd-caixa-nota .material-icons { font-size: 14px; }

/* ------------------------------------------------------------------
   Correção de cor dos ícones (tema claro e escuro).
   A base .material-icons (main.css) aplica color: rgba(0,0,0,.54) DIRETO
   no glifo, vencendo por especificidade o color definido nos chips/pais.
   Resultado: ícones saíam "pretos / apagados" mesmo sobre fundo colorido.
   Solução: os glifos do caixa herdam a cor do pai (chip branco, "em dia"
   verde, "a aprovar" âmbar, botões etc. passam a exibir a cor correta).
   ------------------------------------------------------------------ */
.fd-caixa-card .material-icons,
.fd-caixa-secao .material-icons { color: inherit; }
/* o ícone do saldo é o próprio glifo (classe na tag <i>) e deve seguir branco */
.fd-caixa-card .fd-caixa-saldo-icon.material-icons { color: #fff; }
/* não deixar o ícone encolher quando o texto ("Nenhuma ... pendente de aprovação") quebra em 2 linhas */
.fd-caixa-emdia, .fd-caixa-aprovar { align-items: flex-start; }
.fd-caixa-emdia .material-icons, .fd-caixa-aprovar .material-icons { flex-shrink: 0; }

/* Tema ESCURO: alinhar aos tons da tela do caixa (página #303030 / cards #424242 /
   borda #565656), e NÃO aos tokens --cly-* do cly-ui (#1e1e1e/#2d2d2d), que são mais
   escuros e fazem os cards "sumirem" em preto sobre a tela. */
body.app_theme_dark .fd-caixa-card { background: #383838; border-color: #565656; }
body.app_theme_dark .fd-caixa-formas,
body.app_theme_dark .fd-caixa-cred-card,
body.app_theme_dark .fd-caixa-metric { background: #454545; border-color: #565656; }
body.app_theme_dark .fd-caixa-comp,
body.app_theme_dark .fd-caixa-comp-strong { border-top-color: #565656; }

@media (max-width: 600px) {
    .fd-caixa-grid2 { grid-template-columns: 1fr; }
    .fd-caixa-metrics { grid-template-columns: 1fr; }
    .fd-caixa-credito { flex-direction: column; }
}

/* ============================================================
   fd-caixa-secao — Seções empilhadas (Vendas / OS / Outras)
   Reorganizam os 3 datatables de aprovação como seções com
   cabeçalho (ícone + título + contador + botão Aprovar) em vez
   de abas. Aplicado via JS no wrapper do datatable do gerador.
   Tema claro + escuro por variáveis --cly-*.
   ============================================================ */
/* alvo do atalho "Ir para as listas": folga p/ não ficar sob header fixo + flash ao chegar */
#fd_caixa_secoes_wrap { scroll-margin-top: 80px; }
.fd-caixa-secao-flash { animation: fd-caixa-secao-flash 1.2s ease; }
@keyframes fd-caixa-secao-flash {
    0%, 100% { box-shadow: var(--cly-shadow-sm); }
    25%      { box-shadow: 0 0 0 3px rgba(30, 136, 229, .45); }
}

.fd-caixa-secao {
    border: 1px solid var(--cly-border);
    border-radius: 10px;
    background: var(--cly-bg);
    box-shadow: var(--cly-shadow-sm);
    margin-bottom: 16px;
    overflow: hidden;
}
.fd-caixa-secao-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--cly-border);
    background: var(--cly-surface);
}
.fd-caixa-secao-ic {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #fff;
    flex-shrink: 0;
}
.fd-caixa-secao-ic .material-icons { font-size: 22px; }
/* cores por tipo (consistentes com o card/_aprov_cfg) */
.fd-caixa-secao-ic-venda  { background: #43a047; } /* success  */
.fd-caixa-secao-ic-os     { background: #039be5; } /* info     */
.fd-caixa-secao-ic-outras { background: #fb8c00; } /* warning  */

.fd-caixa-secao-titwrap { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.fd-caixa-secao-titulo {
    font-size: 15px;
    font-weight: 600;
    color: var(--cly-text-main);
}
.fd-caixa-secao-contador {
    font-size: 12px;
    color: var(--cly-text-muted);
}
.fd-caixa-secao-acao {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}
/* botão Aprovar (movido do toolbar do datatable) dentro do cabeçalho */
.fd-caixa-secao-acao .dt-button,
.fd-caixa-secao-acao .md-btn,
.fd-caixa-secao-acao .fd-btn {
    margin: 0 !important;
    float: none !important;
}

/* o corpo (md-card do datatable) já vem logo abaixo do cabeçalho.
   removemos a margem/sombra dupla do md-card interno para o card da seção
   "abraçar" a tabela; mantemos o scroll horizontal das tabelas largas. */
.fd-caixa-secao > .md-card {
    margin: 0 !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
}
.fd-caixa-secao .md-card-content { overflow-x: auto; }

/* barra de busca client-side da seção */
.fd-caixa-secao-busca {
    padding: 10px 16px 0 16px;
}
.fd-caixa-secao-busca .md-input {
    width: 100%;
    max-width: 320px;
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    padding: 6px 10px;
    background: var(--cly-bg);
    color: var(--cly-text-main);
    font-size: 13px;
}
.fd-caixa-secao-busca .md-input:focus {
    outline: none;
    border-color: var(--cly-border-focus);
}

/* corpo da seção: tabela com scroll horizontal */
.fd-caixa-secao-body {
    padding: 10px 16px 14px 16px;
    overflow-x: auto;
}
.fd-caixa-secao-vazio {
    padding: 18px 4px;
    color: var(--cly-text-muted);
    font-size: 13px;
    text-align: center;
}

/* tabela das seções (colunas fiéis ao datatable.json) */
.fd-caixa-secao-tabela {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    white-space: nowrap;
}
.fd-caixa-secao-tabela th {
    text-align: left;
    font-weight: 600;
    color: var(--cly-text-muted);
    border-bottom: 2px solid var(--cly-border);
    padding: 8px 10px;
    background: var(--cly-surface);
}
.fd-caixa-secao-tabela td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--cly-border);
    color: var(--cly-text-main);
}
.fd-caixa-secao-tabela tbody tr:hover td {
    background: var(--cly-surface);
}
/* regra linha azul (tem endereço de entrega) — equivalente a uk-text-primary */
.fd-caixa-secao-tabela tbody tr.uk-text-primary td {
    color: var(--cly-primary);
}

/* coluna de ações por linha */
.fd-secao-acoes { white-space: nowrap; }
.fd-secao-acao {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    border-radius: 4px;
    cursor: pointer;
    color: #54637a;            /* neutro firme (Documento fiscal) — não mais o cinza apagado */
    transition: background .15s ease, color .15s ease;
}
.fd-secao-acao:hover { background: var(--cly-surface); }
.fd-secao-acao .material-icons { font-size: 19px; }
/* cor por função (o glifo herda a cor do <a> — ver bloco "Correção de cor dos ícones") */
.fd-secao-acao-view   { color: #1c6fd0; }   /* Visualizar = azul     */
.fd-secao-acao-danger { color: #c43d2c; }   /* Estornar   = vermelho */
.fd-secao-acao:hover        { color: #1c6fd0; }
.fd-secao-acao-danger:hover { color: #ad3526; }
body.app_theme_dark .fd-secao-acao        { color: #a6b0c0; }
body.app_theme_dark .fd-secao-acao-view   { color: #5b9be0; }
body.app_theme_dark .fd-secao-acao-danger { color: #e08576; }
body.app_theme_dark .fd-secao-acao:hover        { color: #5b9be0; }
body.app_theme_dark .fd-secao-acao-danger:hover { color: #ef9a9a; }

/* botão "Ver todas" */
.fd-caixa-secao-vertodas {
    text-align: center;
    padding-top: 8px;
}

@media (max-width: 600px) {
    .fd-caixa-secao-head { flex-wrap: wrap; }
    .fd-caixa-secao-acao { width: 100%; }
    .fd-caixa-secao-acao .dt-button,
    .fd-caixa-secao-acao .md-btn,
    .fd-caixa-secao-acao .fd-btn { width: 100%; }
}

/* ============================================================
   Ajuste de cores (alinhar ao tema REAL do sistema) + alinhamentos.
   Dark do sistema: página #303030, md-card #424242, borda ~#565656.
   As classes acima usavam --cly-bg (#1e1e1e, "pretão") — aqui sobrepomos
   no dark com o tom de card do sistema (cards mais claros que a página).
   ============================================================ */
body.app_theme_dark .fd-caixa-card,
body.app_theme_dark .fd-caixa-secao {
    background: #424242;
    border-color: #565656;
}
body.app_theme_dark .fd-caixa-card-status,
body.app_theme_dark .fd-caixa-secao-head,
body.app_theme_dark .fd-caixa-secao-tabela th {
    background: #4a4a4a;
    border-color: #565656;
}
body.app_theme_dark .fd-caixa-secao-tabela th { border-bottom-color: #5a5a5a; }
body.app_theme_dark .fd-caixa-secao-tabela td { border-bottom-color: #4f4f4f; }
body.app_theme_dark .fd-caixa-secao-tabela tbody tr:hover td,
body.app_theme_dark .fd-secao-acao:hover { background: #4f4f4f; }
body.app_theme_dark .fd-caixa-secao-busca .md-input {
    background: #383838;
    border-color: #565656;
}

/* alinhamentos das seções */
.fd-caixa-secao-tabela th,
.fd-caixa-secao-tabela td { vertical-align: middle; }
.fd-secao-acoes { display: flex; align-items: center; gap: 4px; }
.fd-caixa-secao-tabela th.fd-col-num,
.fd-caixa-secao-tabela td.fd-col-num { text-align: right; }

/* coluna ÚNICA: card de resumo e cada seção ocupam 100% da largura, um por linha
   (evita o card estreito + seção encostada por float dentro de grid do gerador) */
#fd_caixa_card_resumo_wrap,
#fd_caixa_secoes_wrap {
    width: 100%;
    display: block;
    float: none;
    clear: both;
}
#fd_caixa_card_resumo_wrap .fd-caixa-card,
#fd_caixa_secoes_wrap .fd-caixa-secao {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    float: none;
    clear: both;
    display: block;
}

/* ============================================================
   fd-conf — Conferência do caixa (ITEM 4)
   Tabela Forma | Apurado | Conferido | Diferença + total + alerta.
   Tema claro + escuro via variáveis --cly-*.
   ============================================================ */
.fd-conf {
    /* padding-bottom 0: o footer fixo encosta no rodapé do modal */
    padding: 22px 24px 0;
    color: var(--cly-text-main);
    /* preenche a altura do modal e permite que SÓ a lista de cards role por
       dentro (cabeçalho de colunas fixo no topo, resumo + footer fixos embaixo) */
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ---- Cabeçalho: título + subtítulo à esquerda, badge à direita ---- */
.fd-conf-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    flex: 0 0 auto;
}
.fd-conf-head-text { display: flex; flex-direction: column; gap: 3px; }
.fd-conf-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--cly-text-main);
}
.fd-conf-help {
    font-size: 18px;
    vertical-align: -4px;
    margin-left: 6px;
    color: var(--cly-text-muted);
    cursor: pointer;
    transition: color .15s;
    user-select: none;
}
.fd-conf-help:hover { color: #1e88e5; }

/* Painel de ajuda inline */
.fd-conf-ajuda {
    position: relative;
    flex: 0 0 auto;
    margin: 0 0 18px;
    padding: 14px 40px 14px 16px;
    border-radius: 8px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-left: 4px solid #1e88e5;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cly-text-main);
}
.fd-conf-ajuda-tit {
    font-weight: 600;
    margin: 0 0 6px;
    color: var(--cly-text-main);
}
.fd-conf-ajuda-lista { margin: 0 0 12px; padding-left: 18px; }
.fd-conf-ajuda-lista li { margin-bottom: 4px; }
.fd-conf-ajuda-x {
    position: absolute;
    top: 8px;
    right: 8px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 2px;
    line-height: 1;
    color: var(--cly-text-muted);
}
.fd-conf-ajuda-x:hover { color: var(--cly-text-main); }
.fd-conf-ajuda-x .material-icons { font-size: 18px; }
.fd-conf-subtitle {
    font-size: 12.5px;
    color: var(--cly-text-muted);
}
.fd-conf-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 6px 12px;
    border-radius: 14px;
    background: #e6f4ea;
    color: #1e7e34;
    white-space: nowrap;
}
.fd-conf-badge .material-icons { font-size: 15px; }
body.app_theme_dark .fd-conf-badge { background: rgba(46,125,50,.22); color: #81c784; }

/* ---- Lista de cards COMPACTA (1 forma por linha) ----
   Labels ficam num cabeçalho único (não se repetem por linha) e cada card é
   uma única linha em grid alinhado — escala bem com muitas formas (10+). */
/* Área rolável: só a lista de cards rola; cabeçalho de colunas fica fixo no topo */
.fd-conf-cards-wrap { flex: 1 1 auto; min-height: 0; position: relative; }
.fd-conf-cards {
    height: 100%;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 2px;
}

/* Cabeçalho de colunas (uma vez só, grudado no topo ao rolar) */
.fd-conf-cards-head,
.fd-conf-card {
    display: grid;
    grid-template-columns: minmax(110px, 1.7fr) 1fr 1.15fr 1fr 124px;
    align-items: center;
    gap: 12px;
}
.fd-conf-cards-head {
    position: sticky;
    top: 0;
    z-index: 2;
    background: var(--cly-bg);
    padding: 2px 14px 8px;
    border-left: 3px solid transparent; /* alinha com a borda de estado dos cards */
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cly-text-muted);
}
.fd-conf-col-num { text-align: right; }

/* Indício de "tem mais itens" — fade + seta no rodapé da lista, só quando há scroll */
.fd-conf-scroll-hint {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 38px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 3px;
    padding-bottom: 3px;
    pointer-events: none;
    background: linear-gradient(to bottom, rgba(0,0,0,0), var(--cly-bg) 88%);
    font-size: 11px;
    font-weight: 600;
    color: var(--cly-text-muted);
}
.fd-conf-scroll-hint .material-icons { font-size: 15px; }

.fd-conf-card {
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-left: 3px solid var(--cly-border);
    border-radius: 7px;
    padding: 7px 14px;
    transition: border-color .15s;
}
.fd-conf-card--ok   { border-left-color: #43a047; }
.fd-conf-card--bad  { border-left-color: #e53935; }
.fd-conf-card--pend { border-left-color: var(--cly-border); }

.fd-conf-card-nome {
    font-size: 13px;
    font-weight: 600;
    color: var(--cly-text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-conf-apurado { font-size: 13.5px; font-weight: 600; color: var(--cly-text-main); }
.fd-conf-dif     { font-size: 13.5px; font-weight: 600; }

/* Chip de estado (Confere / Diverge / Não conferido) */
.fd-conf-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 11px;
    white-space: nowrap;
    justify-self: start;
}
.fd-conf-chip .material-icons { font-size: 13px; }
.fd-conf-chip--ok   { background: #e6f4ea; color: #1e7e34; }
.fd-conf-chip--bad  { background: #fdecea; color: #c62828; }
.fd-conf-chip--pend { background: #eceef0; color: #5e6c84; }
body.app_theme_dark .fd-conf-chip--ok   { background: rgba(46,125,50,.22); color: #81c784; }
body.app_theme_dark .fd-conf-chip--bad  { background: rgba(229,57,53,.20); color: #ef9a9a; }
body.app_theme_dark .fd-conf-chip--pend { background: rgba(255,255,255,.07); color: #9e9e9e; }

/* Input de valor conferido (compacto) */
.fd-conf-card input.cx_valor_conferencia {
    width: 100%;
    margin: 0;
    padding: 5px 9px;
    text-align: right;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--cly-text-main);
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.fd-conf-card input.cx_valor_conferencia:focus {
    outline: none;
    border-color: #1e88e5;
    box-shadow: 0 0 0 3px rgba(30,136,229,.15);
}
.fd-conf-card input.cx_valor_conferencia::placeholder { color: var(--cly-text-muted); font-weight: 400; }
.fd-conf-ok-inp  { border-color: #43a047 !important; }
.fd-conf-bad-inp { border-color: #e53935 !important; }

/* Mobile: empilha (cabeçalho some, rótulos voltam por linha via ::before) */
@media (max-width: 640px) {
    .fd-conf-cards-head { display: none; }
    .fd-conf-card {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
            "nome  chip"
            "apur  conf"
            "dif   dif";
        gap: 6px 12px;
        padding: 10px 14px;
    }
    .fd-conf-card-nome { grid-area: nome; }
    .fd-conf-chip      { grid-area: chip; justify-self: end; }
    .fd-conf-apurado   { grid-area: apur; text-align: left; }
    .fd-conf-conf      { grid-area: conf; }
    .fd-conf-dif       { grid-area: dif;  text-align: left; }
    .fd-conf-apurado::before,
    .fd-conf-conf::before,
    .fd-conf-dif::before {
        display: block;
        font-size: 10px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: .4px;
        color: var(--cly-text-muted);
        margin-bottom: 2px;
    }
    .fd-conf-apurado::before { content: "Apurado"; }
    .fd-conf-conf::before    { content: "Conferido"; }
    .fd-conf-dif::before     { content: "Diferença"; }
}

/* Diferença por card */
.fd-conf-dif { font-weight: 600; }
.fd-conf-ok       { color: #2e7d32 !important; }
.fd-conf-bad      { color: #c62828 !important; }
.fd-conf-dif-pend { color: var(--cly-text-muted) !important; }
body.app_theme_dark .fd-conf-ok  { color: #81c784 !important; }
body.app_theme_dark .fd-conf-bad { color: #ef9a9a !important; }

/* ---- Resumo da conferência (fixo, sempre visível abaixo da lista) ---- */
.fd-conf-resumo {
    flex: 0 0 auto;
    margin-top: 14px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-radius: 8px;
    padding: 14px 16px;
}
.fd-conf-resumo-tit {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--cly-text-muted);
    margin-bottom: 12px;
}
.fd-conf-resumo-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr 1.3fr;
    gap: 12px;
}
.fd-conf-tile {
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 6px;
    padding: 10px 12px;
}
.fd-conf-tile-lbl { font-size: 11px; color: var(--cly-text-muted); margin-bottom: 4px; }
.fd-conf-tile-val { font-size: 18px; font-weight: 700; color: var(--cly-text-main); }
/* Tile de diferença em destaque (muda de cor conforme bate / diverge) */
.fd-conf-tile-dif .fd-conf-tile-val { font-size: 22px; }
.fd-conf-tile-dif-ok  { background: #e6f4ea; border-color: rgba(46,125,50,.30); }
.fd-conf-tile-dif-ok  .fd-conf-tile-lbl,
.fd-conf-tile-dif-ok  .fd-conf-tile-val { color: #1e7e34; }
.fd-conf-tile-dif-bad { background: #fdecea; border-color: rgba(229,57,53,.30); }
.fd-conf-tile-dif-bad .fd-conf-tile-lbl,
.fd-conf-tile-dif-bad .fd-conf-tile-val { color: #c62828; }
body.app_theme_dark .fd-conf-tile-dif-ok  { background: rgba(46,125,50,.14); border-color: rgba(46,125,50,.35); }
body.app_theme_dark .fd-conf-tile-dif-ok  .fd-conf-tile-lbl,
body.app_theme_dark .fd-conf-tile-dif-ok  .fd-conf-tile-val { color: #81c784; }
body.app_theme_dark .fd-conf-tile-dif-bad { background: rgba(229,57,53,.12); border-color: rgba(229,57,53,.35); }
body.app_theme_dark .fd-conf-tile-dif-bad .fd-conf-tile-lbl,
body.app_theme_dark .fd-conf-tile-dif-bad .fd-conf-tile-val { color: #ef9a9a; }

/* Contadores de status */
.fd-conf-resumo-status {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin-top: 12px;
    font-size: 12.5px;
    color: var(--cly-text-muted);
}
.fd-conf-st { display: inline-flex; align-items: center; gap: 5px; }
.fd-conf-st .material-icons { font-size: 15px; }
.fd-conf-st-ok   .material-icons { color: #43a047; }
.fd-conf-st-bad  .material-icons { color: #e53935; }
.fd-conf-st-pend .material-icons { color: var(--cly-text-muted); }
body.app_theme_dark .fd-conf-st-ok  .material-icons { color: #81c784; }
body.app_theme_dark .fd-conf-st-bad .material-icons { color: #ef9a9a; }

/* ---- Footer fixo no rodapé do modal ---- */
.fd-conf-footer {
    /* a lista de cards é que rola (flex:1); footer e resumo ficam fixos (flex:0) */
    flex: 0 0 auto;
    margin: 14px -24px 0;
    padding: 14px 24px;
    background: var(--cly-bg);
    border-top: 1px solid var(--cly-border);
}
.fd-conf-footer .md-btn { margin-bottom: 0; display: inline-flex; align-items: center; gap: 6px; }
/* Ícones dos botões do footer: este modal NÃO fica dentro de .fd-modal, então a
   regra geral de alinhamento não o alcança — escopamos aqui. */
.fd-conf-footer .md-btn .material-icons {
    font-size: 17px;
    line-height: 1;
    vertical-align: middle;
    margin: 0;
}
/* "Fechar" (flat) legível nos dois temas — o md-btn-flat padrão some no escuro.
   IDs vencem o hover global ".md-btn:hover{background:#1976d2}" (main.css) que
   pintava todos os botões de azul. */
.fd-conf-footer #fd_conf_fechar.md-btn-flat { color: var(--cly-text-muted); }
.fd-conf-footer #fd_conf_fechar.md-btn-flat:hover { background: var(--cly-surface); color: var(--cly-text-main); }

/* "Imprimir" como secundário (ghost) — Salvar é o único sólido (primário) */
.fd-conf-footer #imprimir.md-btn {
    background: transparent;
    box-shadow: none;
    border: 1px solid var(--cly-border);
    color: var(--cly-text-main);
}
.fd-conf-footer #imprimir.md-btn:hover { background: var(--cly-surface); color: var(--cly-text-main); }

/* "Salvar" mantém o verde no hover (não vira azul) */
.fd-conf-footer #salvar_dados.md-btn-success:hover { background: #43a047; color: #fff; }

@media (max-width: 600px) {
    .fd-conf { padding: 16px 14px 0; }
    .fd-conf-footer { margin: 12px -14px 0; padding: 12px 14px; }
    .fd-conf-footer .md-btn { flex: 1; }
    .fd-conf-resumo-tiles { grid-template-columns: 1fr; }
}

/* =====================================================================
   Kit de botões cly (fd-btn) — use em componentes NOVOS no lugar de md-btn.
   Variantes: primary | success | danger | ghost | flat. Agrupar com .fd-btn-group.
   ===================================================================== */
.fd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 8px; border: 1px solid transparent; font-size: 13px; font-weight: 500; line-height: 1; cursor: pointer; background: transparent; color: #1f2733; user-select: none; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap; }
.fd-btn .material-icons { font-size: 17px; }
.fd-btn:focus { outline: none; box-shadow: 0 0 0 3px rgba(28,111,208,.25); }
.fd-btn:active { transform: translateY(1px); }
.fd-btn:disabled { opacity: .55; cursor: default; transform: none; box-shadow: none; }
.fd-btn-sm { height: 30px; padding: 0 11px; font-size: 12px; gap: 5px; }
.fd-btn-sm .material-icons { font-size: 15px; }
.fd-btn-ghost { border-color: #d6dbe2; color: #3a4250; background: #fff; }
.fd-btn-ghost:hover { background: #f1f6fd; border-color: #c2ccd8; }
.fd-btn-flat { color: #5b636e; }
.fd-btn-flat:hover { background: #eef1f5; }
.fd-btn-primary { background: #1c6fd0; color: #fff; }
.fd-btn-primary:hover { background: #1862bd; }
.fd-btn-success { background: #1f9d57; color: #fff; }
.fd-btn-success:hover { background: #1b8c4e; }
.fd-btn-cc { background: #009688; color: #fff; }
.fd-btn-cc:hover { background: #00897b; }
body.app_theme_dark .fd-btn-cc { background: #26a69a; color: #04231f; }
body.app_theme_dark .fd-btn-cc:hover { background: #2bbbad; }
.fd-btn-danger { background: #c43d2c; color: #fff; }
.fd-btn-danger:hover { background: #ad3526; }
.fd-btn-group { display: flex; align-items: center; gap: 10px; }
.fd-btn-group .fd-btn-spacer { flex: 1; }

body.app_theme_dark .fd-btn { color: #ececec; }
body.app_theme_dark .fd-btn:focus { box-shadow: 0 0 0 3px rgba(91,155,224,.3); }
body.app_theme_dark .fd-btn-ghost { background: #4a4a4a; border-color: #5f5f5f; color: #e6e6e6; }
body.app_theme_dark .fd-btn-ghost:hover { background: #545454; border-color: #6b6b6b; }
body.app_theme_dark .fd-btn-flat { color: #b3b3b3; }
body.app_theme_dark .fd-btn-flat:hover { background: #4a4a4a; }
body.app_theme_dark .fd-btn-primary { background: #5b9be0; color: #fff; }
body.app_theme_dark .fd-btn-primary:hover { background: #4d8bd0; }
body.app_theme_dark .fd-btn-success { background: #43a047; }
body.app_theme_dark .fd-btn-success:hover { background: #3b8f3f; }
body.app_theme_dark .fd-btn-danger { background: #c2503f; }
body.app_theme_dark .fd-btn-danger:hover { background: #ad4636; }

/* =====================================================================
   Buscador inline (cly.buscar_inline) — claro/escuro
   ===================================================================== */
.fd-busca-inline { position: relative; width: 100%; }
.fd-bi-box { display: flex; align-items: center; height: 40px; border: 1px solid #e4e8ee; border-radius: 7px; background: #fff; overflow: hidden; width: 100%; box-sizing: border-box; }
.fd-bi-box.fd-bi-selecionado { border-color: #1c6fd0; }
.fd-bi-chip { flex: 0 0 auto; margin: 0 7px; font-size: 11px; font-weight: 500; color: #1c6fd0; background: #e8f1fc; padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.fd-bi-input { flex: 1 1 auto; min-width: 0; width: 0; border: 0; background: transparent; color: #1f2733; padding: 0 10px; font-size: 13px; outline: none; height: 100%; text-overflow: ellipsis; }
.fd-bi-input::placeholder { color: #9aa0a8; }
.fd-bi-clear, .fd-bi-toggle { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 32px; height: 100%; border: 0; cursor: pointer; padding: 0; background: transparent; }
.fd-bi-clear { color: #79818d; border-left: 1px solid #e4e8ee; }
.fd-bi-toggle { color: #79818d; }
.fd-bi-toggle:hover { color: #1c6fd0; }
.fd-bi-clear .material-icons { font-size: 16px; }
.fd-bi-toggle .material-icons { font-size: 22px; }
.fd-bi-drop { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 12000; background: #fff; border: 1px solid #e4e8ee; border-radius: 8px; box-shadow: 0 6px 24px rgba(0,0,0,.12); max-height: 260px; overflow-y: auto; }
.fd-bi-item { display: flex; align-items: center; gap: 8px; padding: 8px 11px; cursor: pointer; font-size: 13px; color: #1f2733; }
.fd-bi-item:hover, .fd-bi-item.fd-bi-ativo { background: #f1f6fd; }
.fd-bi-item-id { font-size: 11px; color: #1c6fd0; background: #e8f1fc; padding: 1px 7px; border-radius: 20px; flex: 0 0 auto; }
.fd-bi-item-txt { flex: 1; }
.fd-bi-vazio, .fd-bi-loading { padding: 10px 12px; font-size: 12.5px; color: #79818d; display: flex; align-items: center; gap: 6px; }
.fd-bi-spin { animation: fd-bi-rot 0.8s linear infinite; font-size: 16px; }
@keyframes fd-bi-rot { to { transform: rotate(360deg); } }
.fd-bi-valor { display: none !important; }

body.app_theme_dark .fd-bi-box { border-color: #565656; background: #484848; }
body.app_theme_dark .fd-bi-box.fd-bi-selecionado { border-color: #5b9be0; }
body.app_theme_dark .fd-bi-chip { color: #cfe0f5; background: #3a4a5c; }
body.app_theme_dark .fd-bi-input { color: #ececec; }
body.app_theme_dark .fd-bi-input::placeholder { color: #8a8a8a; }
body.app_theme_dark .fd-bi-clear { color: #9e9e9e; border-left-color: #565656; }
body.app_theme_dark .fd-bi-toggle { color: #9e9e9e; }
body.app_theme_dark .fd-bi-toggle:hover { color: #8ab4e8; }
body.app_theme_dark .fd-bi-drop { background: #424242; border-color: #565656; box-shadow: 0 6px 24px rgba(0,0,0,.4); }
body.app_theme_dark .fd-bi-item { color: #ececec; }
body.app_theme_dark .fd-bi-item:hover, body.app_theme_dark .fd-bi-item.fd-bi-ativo { background: #3d4651; }
body.app_theme_dark .fd-bi-item-id { color: #cfe0f5; background: #3a4a5c; }
body.app_theme_dark .fd-bi-vazio, body.app_theme_dark .fd-bi-loading { color: #9e9e9e; }

/* =====================================================================
   Transferência entre caixas (cly.transferencia_caixa) — claro/escuro
   ===================================================================== */
.fd-transf-dialog { max-width: 620px; width: 94%; }
.fd-transf-header { display: flex; align-items: center; gap: 11px; background: #f8fafc; }
.fd-transf-icone { width: 36px; height: 36px; border-radius: 9px; background: #e8f1fc; color: #1c6fd0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-transf-icone .material-icons { font-size: 20px; }
.fd-transf-tit { flex: 1; }
.fd-transf-tit h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fd-transf-tit span { font-size: 11px; color: #79818d; }
.fd-transf-ajuda { border: 0; background: transparent; color: #79818d; cursor: pointer; padding: 2px; }
.fd-transf-ajuda .material-icons { font-size: 20px; }
.fd-transf-help { background: #f1f6fd; border-bottom: 1px solid #e4e8ee; padding: 12px 18px; display: flex; gap: 18px; flex-wrap: wrap; }
.fd-transf-help > div { flex: 1; min-width: 150px; font-size: 11.5px; color: #79818d; }
.fd-transf-help b { color: #1f2733; }

.fd-transf-stepper { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.fd-step { display: flex; align-items: center; gap: 8px; }
.fd-step-num { width: 24px; height: 24px; border-radius: 50%; border: 1px solid #e4e8ee; background: #fff; color: #79818d; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 500; }
.fd-step-num .material-icons { font-size: 15px; }
.fd-step-txt { font-size: 12.5px; font-weight: 500; color: #79818d; }
.fd-step-ativo .fd-step-num { background: #1c6fd0; border-color: #1c6fd0; color: #fff; }
.fd-step-ativo .fd-step-txt { color: #1c6fd0; }
.fd-step-ok .fd-step-num { background: #1f9d57; border-color: #1f9d57; color: #fff; }
.fd-step-ok .fd-step-txt { color: #1f9d57; }
.fd-step-linha { flex: 1; height: 1px; background: #e4e8ee; }

.fd-transf-fluxo { display: flex; align-items: stretch; margin-bottom: 15px; }
.fd-transf-card { flex: 1; border: 1px solid #e4e8ee; border-radius: 10px; padding: 12px 14px; display: flex; flex-direction: column; min-width: 0; }
.fd-transf-origem { background: #f7f9fb; }
.fd-transf-destino { background: #f3f8fe; border-color: #1c6fd0; gap: 9px; }
.fd-transf-rotulo { font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: #79818d; display: flex; align-items: center; gap: 4px; }
.fd-transf-rotulo .material-icons { font-size: 13px; }
.fd-transf-origem .fd-transf-rotulo .material-icons { color: #c43d2c; }
.fd-transf-destino .fd-transf-rotulo .material-icons { color: #1f7a44; }
.fd-transf-nome { font-size: 15px; font-weight: 500; color: #1f2733; margin-top: 5px; }
.fd-transf-sub { font-size: 11px; color: #79818d; margin-top: 2px; }
.fd-transf-saldo-wrap { margin-top: auto; padding-top: 10px; }
.fd-transf-origem .fd-transf-saldo-wrap { border-top: 1px dashed #e4e8ee; margin-top: 9px; }
.fd-transf-saldo-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #79818d; }
.fd-transf-saldo { font-size: 20px; font-weight: 500; color: #1f7a44; }
.fd-transf-saldo.fd-neg { color: #c43d2c; }
.fd-transf-seta { display: flex; align-items: center; justify-content: center; width: 46px; flex: 0 0 auto; }
.fd-transf-seta span { width: 32px; height: 32px; border-radius: 50%; background: #1c6fd0; color: #fff; display: flex; align-items: center; justify-content: center; }
.fd-transf-seta .material-icons { font-size: 17px; }
.fd-transf-data-wrap label, .fd-transf-grid2 label, .fd-transf-hist label { display: block; font-size: 11px; color: #79818d; margin-bottom: 4px; }
.fd-transf-input { width: 100%; height: 40px; border: 1px solid #e4e8ee; border-radius: 7px; background: #fff; padding: 0 11px; font-size: 13px; color: #1f2733; outline: none; box-sizing: border-box; }
.fd-transf-input:focus { border-color: #1c6fd0; }
.fd-transf-grid2 > div { min-width: 0; }
.fd-transf-data-box { position: relative; }
.fd-transf-data-input { padding-right: 36px; }
.fd-transf-data-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #79818d; cursor: pointer; }
.fd-transf-data-ic:hover { color: #1c6fd0; }
/* popup do datepicker (UIkit) precisa ficar acima do modal fixo */
.uk-datepicker { z-index: 9999999999 !important; }

.fd-transf-pill { display: flex; align-items: center; gap: 8px; border-radius: 7px; padding: 7px 10px; border: 1px solid; }
.fd-transf-pill .material-icons { font-size: 16px; flex: 0 0 auto; }
.fd-transf-pill > div { line-height: 1.25; }
.fd-transf-pill b { font-size: 12px; font-weight: 500; display: block; }
.fd-transf-pill span { font-size: 10.5px; color: #79818d; }
.fd-pill-ok { background: #eaf6ef; border-color: #c4e6d3; }
.fd-pill-ok .material-icons, .fd-pill-ok b { color: #1f7a44; }
.fd-pill-dg { background: #fdeeec; border-color: #f4d0ca; }
.fd-pill-dg .material-icons, .fd-pill-dg b { color: #c43d2c; }
.fd-pill-am { background: #fcf4e1; border-color: #eedfb2; }
.fd-pill-am .material-icons, .fd-pill-am b { color: #97670f; }
.fd-pill-load { background: #f7f9fb; border-color: #e4e8ee; color: #79818d; font-size: 12px; }

.fd-transf-valor-box { border: 1px solid #e4e8ee; border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; background: #fff; }
.fd-transf-valor-top { display: flex; align-items: center; gap: 14px; }
.fd-transf-valor-lab { font-size: 11px; color: #79818d; margin-bottom: 2px; }
.fd-transf-valor-in { display: flex; align-items: baseline; gap: 6px; }
.fd-transf-valor-in span { font-size: 15px; color: #79818d; }
.fd-transf-valor-input { font-size: 30px; font-weight: 500; color: #1f2733; border: 0; background: transparent; outline: none; width: 220px; max-width: 100%; letter-spacing: -.5px; padding: 0; }
.fd-transf-chips { margin-left: auto; display: flex; gap: 6px; }
.fd-transf-chip { font-size: 12px; color: #1c6fd0; border: 1px solid #e4e8ee; border-radius: 20px; padding: 4px 12px; cursor: pointer; user-select: none; }
.fd-transf-chip:hover { background: #f1f6fd; }
.fd-transf-chip-cheio { color: #fff; background: #1c6fd0; border-color: #1c6fd0; }
.fd-transf-chip-cheio:hover { background: #1862bd; }
.fd-transf-valor-aviso { margin-top: 8px; font-size: 11px; display: flex; align-items: center; gap: 5px; min-height: 14px; }
.fd-transf-valor-aviso .material-icons { font-size: 13px; }
.fd-aviso-ok { color: #1f7a44; }
.fd-aviso-warn { color: #97670f; }

.fd-transf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.fd-transf-hist { margin-bottom: 4px; }

.fd-transf-footer { display: flex; align-items: center; gap: 10px; background: #f8fafc; }
.fd-transf-foot-msg { flex: 1; font-size: 11px; color: #79818d; display: flex; align-items: center; gap: 5px; }
.fd-transf-foot-msg .material-icons { font-size: 14px; }

.fd-transf-conf-titulo { text-align: center; font-size: 11px; color: #79818d; letter-spacing: .4px; text-transform: uppercase; margin-bottom: 8px; }
.fd-transf-conf-fluxo { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 6px 0; }
.fd-transf-conf-fluxo > div { flex: 1; text-align: center; min-width: 0; }
.fd-transf-conf-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #79818d; }
.fd-transf-conf-nome { font-size: 15px; font-weight: 500; color: #1f2733; }
.fd-transf-conf-seta { width: 34px; height: 34px; border-radius: 50%; background: #1c6fd0; color: #fff; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-transf-conf-valor { text-align: center; margin: 14px 0; }
.fd-transf-conf-valnum { font-size: 34px; font-weight: 500; color: #1f2733; letter-spacing: -.5px; }
.fd-transf-conf-valnum span { font-size: 16px; color: #79818d; margin-right: 6px; }
.fd-transf-conf-lista { border: 1px solid #e4e8ee; border-radius: 10px; padding: 4px 14px; background: #f7f9fb; margin-bottom: 14px; }
.fd-transf-conf-linha { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; border-top: 1px solid #e4e8ee; gap: 12px; }
.fd-transf-conf-linha:first-child { border-top: 0; }
.fd-transf-conf-linha span { font-size: 12.5px; color: #79818d; }
.fd-transf-conf-linha b { font-size: 13px; color: #1f2733; font-weight: 500; text-align: right; }
.fd-transf-conf-aviso { display: flex; align-items: center; gap: 9px; background: #f3f8fe; border: 1px solid #cfe2f7; border-radius: 8px; padding: 10px 13px; font-size: 12px; color: #1f2733; }
.fd-transf-conf-aviso .material-icons { font-size: 17px; color: #1c6fd0; flex: 0 0 auto; }
.fd-transf-conf-aviso span { flex: 1; min-width: 0; line-height: 1.5; }

/* Tema escuro do componente — fiel ao mockup (dialog #424242, header/footer #3a3a3a) */
body.app_theme_dark .fd-modal .fd-transf-dialog { background: #424242; color: #ececec; }
body.app_theme_dark .fd-transf-header,
body.app_theme_dark .fd-transf-footer { background: #3a3a3a; border-color: #565656; }
body.app_theme_dark .fd-transf-data-ic { color: #9e9e9e; }
body.app_theme_dark .fd-transf-data-ic:hover { color: #8ab4e8; }
body.app_theme_dark .fd-transf-icone { background: #3a4a5c; color: #5b9be0; }
body.app_theme_dark .fd-transf-tit span,
body.app_theme_dark .fd-transf-sub,
body.app_theme_dark .fd-transf-rotulo,
body.app_theme_dark .fd-transf-saldo-lab,
body.app_theme_dark .fd-transf-valor-lab,
body.app_theme_dark .fd-transf-valor-in span,
body.app_theme_dark .fd-transf-data-wrap label,
body.app_theme_dark .fd-transf-grid2 label,
body.app_theme_dark .fd-transf-hist label,
body.app_theme_dark .fd-transf-foot-msg,
body.app_theme_dark .fd-transf-conf-titulo,
body.app_theme_dark .fd-transf-conf-lab,
body.app_theme_dark .fd-transf-conf-linha span,
body.app_theme_dark .fd-transf-conf-valnum span,
body.app_theme_dark .fd-transf-pill span,
body.app_theme_dark .fd-transf-ajuda,
body.app_theme_dark .fd-transf-help > div { color: #9e9e9e; }
body.app_theme_dark .fd-transf-nome,
body.app_theme_dark .fd-transf-valor-input,
body.app_theme_dark .fd-transf-conf-nome,
body.app_theme_dark .fd-transf-conf-valnum,
body.app_theme_dark .fd-transf-conf-linha b,
body.app_theme_dark .fd-transf-conf-aviso,
body.app_theme_dark .fd-transf-help b,
body.app_theme_dark .fd-transf-input { color: #ececec; }
body.app_theme_dark .fd-transf-help { background: #3d4651; border-color: #565656; }
body.app_theme_dark .fd-transf-card { border-color: #565656; }
body.app_theme_dark .fd-transf-origem { background: #474747; }
body.app_theme_dark .fd-transf-destino { background: #3d4651; border-color: #5b9be0; }
body.app_theme_dark .fd-transf-origem .fd-transf-saldo-wrap { border-color: #565656; }
body.app_theme_dark .fd-transf-conf-linha,
body.app_theme_dark .fd-step-linha { border-color: #565656; }
body.app_theme_dark .fd-transf-saldo { color: #7fc784; }
body.app_theme_dark .fd-transf-saldo.fd-neg { color: #e08576; }
body.app_theme_dark .fd-transf-input { background: #484848; border-color: #565656; }
body.app_theme_dark .fd-transf-input:focus { border-color: #5b9be0; }
body.app_theme_dark .fd-transf-valor-box,
body.app_theme_dark .fd-transf-conf-lista { background: #474747; border-color: #565656; }
body.app_theme_dark .fd-transf-seta span,
body.app_theme_dark .fd-transf-conf-seta { background: #5b9be0; }
body.app_theme_dark .fd-step-num { background: #484848; border-color: #565656; color: #9e9e9e; }
body.app_theme_dark .fd-step-ativo .fd-step-num { background: #5b9be0; border-color: #5b9be0; color: #fff; }
body.app_theme_dark .fd-step-ativo .fd-step-txt { color: #5b9be0; }
body.app_theme_dark .fd-step-ok .fd-step-num { background: #43a047; border-color: #43a047; }
body.app_theme_dark .fd-step-ok .fd-step-txt { color: #7fc784; }
body.app_theme_dark .fd-transf-chip { color: #5b9be0; border-color: #565656; }
body.app_theme_dark .fd-transf-chip:hover { background: #3d4651; }
body.app_theme_dark .fd-transf-chip-cheio { color: #fff; background: #5b9be0; border-color: #5b9be0; }
body.app_theme_dark .fd-transf-conf-aviso { background: #3d4651; border-color: #4f6075; }
body.app_theme_dark .fd-transf-conf-aviso .material-icons { color: #5b9be0; }
body.app_theme_dark .fd-aviso-ok { color: #7fc784; }
body.app_theme_dark .fd-aviso-warn { color: #e0c07f; }
body.app_theme_dark .fd-pill-ok { background: #324a39; border-color: #456b4f; }
body.app_theme_dark .fd-pill-ok .material-icons, body.app_theme_dark .fd-pill-ok b { color: #7fc784; }
body.app_theme_dark .fd-pill-dg { background: #4d3633; border-color: #6b4742; }
body.app_theme_dark .fd-pill-dg .material-icons, body.app_theme_dark .fd-pill-dg b { color: #e08576; }
body.app_theme_dark .fd-pill-am { background: #4d4630; border-color: #6b6240; }
body.app_theme_dark .fd-pill-am .material-icons, body.app_theme_dark .fd-pill-am b { color: #e0c07f; }
body.app_theme_dark .fd-pill-load { background: #474747; border-color: #565656; color: #9e9e9e; }

@media (max-width: 640px) {
  .fd-transf-fluxo { flex-direction: column; gap: 10px; }
  .fd-transf-seta { width: auto; height: 24px; }
  .fd-transf-seta span { transform: rotate(90deg); }
  .fd-transf-grid2 { grid-template-columns: 1fr; }
  .fd-transf-valor-top { flex-direction: column; align-items: flex-start; gap: 10px; }
  .fd-transf-chips { margin-left: 0; }
  .fd-transf-valor-input { width: 100%; }

  /* full screen no mobile: o modal de transferência ocupa a tela inteira */
  .fd-modal.fd-transf-modal.fd-open { padding: 0; align-items: stretch; justify-content: stretch; }
  .fd-modal.fd-transf-modal .fd-transf-dialog {
    width: 100%; max-width: none; height: 100%; max-height: 100%;
    border-radius: 0;
  }
  .fd-modal.fd-transf-modal .fd-transf-body { flex: 1 1 auto; }
  .fd-modal.fd-transf-modal .fd-transf-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }
}

/* =====================================================================
   Aprovação no caixa (cly.aprovar_no_caixa) — assistente em passos.
   Reaproveita: fd-transf-header/footer/stepper/step, fd-transf-conf-*,
   fd-transf-input, fd-btn, fd-bi-*. Só o específico da aprovação fica aqui.
   ===================================================================== */
.fd-aprov-dialog { max-width: 680px; width: 95%; }
.fd-aprov-step { display: none; }
.fd-aprov-step.fd-aprov-on { display: block; }
/* Linhas estruturais mantidas no DOM (coletores) mas sem UI própria:
   dinheiro já aparece no bloco de recebido/troco; cartão na tabela de autorização. */
.fd-aprov-modal .fd-pgto-item[data-tipo="Dinheiro"],
.fd-aprov-modal .fd-pgto-item[data-step="cartoes"] { display: none !important; }

.fd-aprov-resumo2 { display: grid; grid-template-columns: 1fr auto; gap: 10px; margin-bottom: 12px; }
.fd-aprov-tile { border: 1px solid #e4e8ee; border-radius: 10px; padding: 10px 13px; background: #fff; min-width: 0; }
.fd-aprov-tile-lab { font-size: 11px; color: #79818d; margin-bottom: 2px; }
.fd-aprov-tile-nome { font-size: 14px; font-weight: 500; color: #1f2733; }
.fd-aprov-tile-sub { font-size: 11px; color: #79818d; margin-top: 3px; }
.fd-aprov-total { background: #eaf6ef; border-radius: 10px; padding: 10px 16px; display: flex; flex-direction: column; justify-content: center; align-items: flex-end; }
.fd-aprov-total-lab { font-size: 11px; color: #1f7a44; }
.fd-aprov-total-val { font-size: 20px; font-weight: 500; color: #1f7a44; white-space: nowrap; }

.fd-aprov-sub { font-size: 11px; color: #79818d; margin: 0 0 6px; }
.fd-aprov-nego { border: 1px solid #e4e8ee; border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.fd-aprov-nego-item { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.fd-aprov-nego-item + .fd-aprov-nego-item { border-top: 1px solid #e4e8ee; }
.fd-aprov-nego-f { font-size: 13px; font-weight: 500; flex: 1; min-width: 0; }
.fd-aprov-nego-p { font-size: 11px; color: #79818d; font-weight: 400; }
.fd-aprov-nego-v { font-size: 13px; font-weight: 500; }

.fd-aprov-pgline { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border: 1px solid #e4e8ee; border-radius: 9px; margin-bottom: 10px; background: #fff; }
.fd-aprov-pgline .material-icons { font-size: 18px; color: #79818d; flex: 0 0 auto; }
.fd-aprov-pgline-nome { font-size: 13px; font-weight: 500; }
.fd-aprov-pgline-tipo { font-size: 10px; font-weight: 500; padding: 2px 7px; border-radius: 20px; background: #f1f3f6; color: #5b636e; }
.fd-aprov-pgline-val { margin-left: auto; font-size: 14px; font-weight: 500; }
.fd-aprov-chip-ent { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: #eaf6ef; color: #1f7a44; white-space: nowrap; }
.fd-aprov-chip-prazo { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: #eef2f7; color: #5b636e; white-space: nowrap; }

.fd-aprov-card { border: 1px solid #e4e8ee; border-radius: 10px; padding: 12px; background: #fff; margin-bottom: 10px; }
.fd-aprov-card-head { display: flex; align-items: center; gap: 8px; margin-bottom: 11px; }
.fd-aprov-card-head > .material-icons { font-size: 16px; color: #1c6fd0; }
.fd-aprov-card-tit { font-size: 13px; font-weight: 500; }
.fd-aprov-card-tit.fd-aprov-erro { color: #c43d2c; }
.fd-aprov-card-meta { margin-left: auto; font-size: 11px; color: #79818d; display: flex; align-items: center; gap: 4px; }
.fd-aprov-card-meta .material-icons { font-size: 13px; }
.fd-aprov-card-meta b { color: #1f2733; font-weight: 500; }

.fd-aprov-g4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 8px; }
.fd-aprov-g3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 8px; }
.fd-aprov-g2 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 8px; }
.fd-aprov-fld { min-width: 0; }
.fd-aprov-fld label { display: block; font-size: 11px; color: #79818d; margin-bottom: 4px; }
.fd-aprov-fld .fd-transf-input { height: 36px; }
.fd-aprov-banco { margin-bottom: 9px; }
.fd-aprov-banco label { display: block; font-size: 11px; color: #79818d; margin-bottom: 4px; }

.fd-aprov-dup { font-size: 12px; color: #1c6fd0; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e4e8ee; border-radius: 20px; padding: 3px 11px; background: #fff; }
.fd-aprov-dup:hover { background: #f1f6fd; border-color: #c2ccd8; }
.fd-aprov-dup .material-icons { font-size: 14px; }

.fd-aprov-din { border: 1px solid #1c6fd0; border-radius: 10px; padding: 12px; margin-bottom: 11px; background: #fff; }
.fd-aprov-din-head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.fd-aprov-din-head .material-icons { font-size: 17px; color: #1c6fd0; }
.fd-aprov-din-head span { font-size: 13px; font-weight: 500; }
.fd-aprov-din-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-aprov-din-troco { height: 36px; border-radius: 7px; background: #f1f3f6; display: flex; align-items: center; justify-content: flex-end; padding: 0 11px; font-size: 16px; font-weight: 500; color: #1f7a44; }

.fd-aprov-cartao-row { border: 1px solid #e4e8ee; border-radius: 9px; padding: 10px; }
.fd-aprov-cartao-row + .fd-aprov-cartao-row { margin-top: 8px; }
.fd-aprov-cartao-emi { margin-left: auto; display: flex; align-items: center; gap: 6px; font-size: 11px; color: #79818d; }
.fd-aprov-cartao-tab { width: 100%; }

.fd-aprov-reqs { display: flex; gap: 8px; flex-wrap: wrap; }
.fd-aprov-conf-tag { font-size: 10px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: #eaf6ef; color: #1f7a44; }

/* dark — só o específico; inputs/btn/bi/conf herdam do fd-transf/fd-btn/fd-bi */
body.app_theme_dark .fd-modal .fd-aprov-dialog { background: #424242; color: #ececec; }
body.app_theme_dark .fd-aprov-tile,
body.app_theme_dark .fd-aprov-nego,
body.app_theme_dark .fd-aprov-pgline,
body.app_theme_dark .fd-aprov-card,
body.app_theme_dark .fd-aprov-cartao-row,
body.app_theme_dark .fd-aprov-din { background: #474747; border-color: #565656; }
body.app_theme_dark .fd-aprov-nego-item + .fd-aprov-nego-item { border-color: #565656; }
body.app_theme_dark .fd-aprov-tile-lab,
body.app_theme_dark .fd-aprov-tile-sub,
body.app_theme_dark .fd-aprov-sub,
body.app_theme_dark .fd-aprov-nego-p,
body.app_theme_dark .fd-aprov-card-meta,
body.app_theme_dark .fd-aprov-fld label,
body.app_theme_dark .fd-aprov-banco label,
body.app_theme_dark .fd-aprov-cartao-emi { color: #9e9e9e; }
body.app_theme_dark .fd-aprov-tile-nome,
body.app_theme_dark .fd-aprov-card-meta b { color: #ececec; }
body.app_theme_dark .fd-aprov-total { background: #324a39; }
body.app_theme_dark .fd-aprov-total-lab,
body.app_theme_dark .fd-aprov-total-val { color: #7fc784; }
body.app_theme_dark .fd-aprov-din { border-color: #5b9be0; }
body.app_theme_dark .fd-aprov-din-troco { background: #3d3d3d; color: #7fc784; }
body.app_theme_dark .fd-aprov-pgline-tipo,
body.app_theme_dark .fd-aprov-chip-prazo { background: #3d4651; color: #c3cad3; }
body.app_theme_dark .fd-aprov-chip-ent,
body.app_theme_dark .fd-aprov-conf-tag { background: #324a39; color: #7fc784; }
body.app_theme_dark .fd-aprov-card-tit.fd-aprov-erro { color: #e08576; }
body.app_theme_dark .fd-aprov-dup { background: #4a4a4a; border-color: #5f5f5f; color: #8ab4e8; }
body.app_theme_dark .fd-aprov-dup:hover { background: #545454; }

/* Elementos legados (fd-pgto-*) dentro do wizard: neutralizar o visual próprio (fundo
   --cly-bg quase preto). A linha de pagamento vira .fd-aprov-pgline e o cheque é .fd-aprov-card. */
.fd-aprov-modal .fd-pgto-item { background: transparent; border: 0; padding: 0; margin: 0 0 10px; }
.fd-aprov-modal .fd-pgto-panel-titulo { background: transparent; border-bottom: 0; padding: 0; }
.fd-aprov-modal .fd-pgto-cartao-data { padding: 0; }
body.app_theme_dark .fd-aprov-modal .fd-pgto-cartao-data label { color: #9e9e9e; }
body.app_theme_dark .fd-aprov-modal .fd-pgto-cartao-tab th,
body.app_theme_dark .fd-aprov-modal .fd-pgto-cartao-tab td { border-color: #565656; color: #ececec; }

@media (max-width: 640px) {
  .fd-aprov-resumo2 { grid-template-columns: 1fr; }
  .fd-aprov-g4, .fd-aprov-g3, .fd-aprov-g2, .fd-aprov-din-grid { grid-template-columns: 1fr 1fr; }
}

/* =====================================================================
   Lançamento no caixa (cly.lancamento_caixa) — claro/escuro
   Reaproveita: fd-transf-stepper/step, fd-transf-pill, fd-transf-conf-*, fd-btn.
   ===================================================================== */
.fd-lanc-dialog { max-width: 600px; width: 94%; }
.fd-lanc-header { display: flex; align-items: center; gap: 11px; background: #f8fafc; }
.fd-lanc-icone { width: 36px; height: 36px; border-radius: 9px; background: #e8f1fc; color: #1c6fd0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-lanc-icone .material-icons { font-size: 20px; }
.fd-lanc-tit { flex: 1; min-width: 0; }
.fd-lanc-tit h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fd-lanc-tit span { font-size: 11px; color: #79818d; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-lanc-ajuda { border: 0; background: transparent; color: #79818d; cursor: pointer; padding: 2px; }
.fd-lanc-ajuda .material-icons { font-size: 20px; }
.fd-lanc-help { background: #f1f6fd; border-bottom: 1px solid #e4e8ee; padding: 11px 18px; font-size: 11.5px; color: #79818d; line-height: 1.55; }
.fd-lanc-help b { color: #1f2733; }
.fd-lanc-body { padding: 18px; }

/* gateway de tipo */
.fd-lanc-gateway { padding: 10px 4px 14px; }
.fd-lanc-gateway-q { text-align: center; font-size: 19px; font-weight: 500; color: #1f2733; }
.fd-lanc-gateway-s { text-align: center; font-size: 13px; color: #79818d; margin-top: 4px; margin-bottom: 20px; }
.fd-lanc-tipo-cards { display: flex; gap: 14px; }
.fd-lanc-tipo-card { flex: 1; border: 1.5px solid #e4e8ee; border-radius: 12px; padding: 22px 16px; cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.fd-lanc-tipo-card.fd-lanc-entrada { border-color: #c4e6d3; background: #eaf6ef; }
.fd-lanc-tipo-card.fd-lanc-saida { border-color: #f4d0ca; background: #fdeeec; }
.fd-lanc-tipo-ic { width: 54px; height: 54px; border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.fd-lanc-tipo-ic .material-icons { font-size: 28px; }
.fd-lanc-entrada .fd-lanc-tipo-ic { background: #1c7a44; }
.fd-lanc-saida .fd-lanc-tipo-ic { background: #c43d2c; }
.fd-lanc-tipo-l { font-size: 17px; font-weight: 500; margin-bottom: 4px; }
.fd-lanc-entrada .fd-lanc-tipo-l { color: #1c7a44; }
.fd-lanc-saida .fd-lanc-tipo-l { color: #c43d2c; }
.fd-lanc-tipo-d { font-size: 12px; color: #79818d; line-height: 1.45; }
.fd-lanc-tipo-d b { color: #1f2733; }

/* barra do tipo (no passo dados) */
.fd-lanc-tipobar { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.fd-lanc-tipopill { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 20px; }
.fd-lanc-tipopill .material-icons { font-size: 16px; }
.fd-lanc-tipobar.fd-lanc-entrada .fd-lanc-tipopill { color: #1c7a44; background: #eaf6ef; border: 1px solid #c4e6d3; }
.fd-lanc-tipobar.fd-lanc-saida .fd-lanc-tipopill { color: #c43d2c; background: #fdeeec; border: 1px solid #f4d0ca; }
.fd-lanc-trocar { font-size: 12px; color: #1c6fd0; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; }
.fd-lanc-trocar .material-icons { font-size: 14px; }

/* valor */
.fd-lanc-valor-wrap { margin-bottom: 14px; }
.fd-lanc-valor-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.fd-lanc-valor-top > span:first-child { font-size: 11px; color: #79818d; }
.fd-lanc-valor-hint { font-size: 10.5px; color: #79818d; }
.fd-lanc-valor-hint .material-icons { font-size: 13px; vertical-align: -2px; }
.fd-lanc-valor-box { display: flex; align-items: center; gap: 9px; height: 56px; border: 1.5px solid #1c6fd0; border-radius: 10px; background: #fff; padding: 0 15px; box-shadow: 0 0 0 3px #e8f1fc; cursor: text; }
.fd-lanc-valor-box.fd-lanc-entrada { border-color: #1c7a44; box-shadow: 0 0 0 3px #eaf6ef; }
.fd-lanc-valor-box.fd-lanc-saida { border-color: #c43d2c; box-shadow: 0 0 0 3px #fdeeec; }
.fd-lanc-sinal { font-size: 22px; font-weight: 500; }
.fd-lanc-rs { font-size: 16px; color: #79818d; }
.fd-lanc-valor-box.fd-lanc-entrada .fd-lanc-sinal, .fd-lanc-valor-box.fd-lanc-entrada .fd-lanc-valor-input { color: #1c7a44; }
.fd-lanc-valor-box.fd-lanc-saida .fd-lanc-sinal, .fd-lanc-valor-box.fd-lanc-saida .fd-lanc-valor-input { color: #c43d2c; }
.fd-lanc-valor-input { flex: 1; min-width: 0; border: 0; background: transparent; outline: none; font-size: 30px; font-weight: 500; letter-spacing: -.5px; padding: 0; }
.fd-lanc-saldo { margin-top: 8px; font-size: 11px; color: #79818d; display: flex; align-items: center; gap: 5px; }
.fd-lanc-saldo .material-icons { font-size: 13px; }
.fd-lanc-saldo b.fd-neg { color: #c43d2c; }

/* caixa (fixo / avulso) */
.fd-lanc-caixa-fixo { display: flex; align-items: center; gap: 11px; border: 1px solid #e4e8ee; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: #f7f9fb; }
.fd-lanc-caixa-ic { width: 34px; height: 34px; border-radius: 8px; background: #eaf6ef; color: #1c7a44; display: flex; align-items: center; justify-content: center; }
.fd-lanc-caixa-ic .material-icons { font-size: 18px; }
.fd-lanc-caixa-info { flex: 1; min-width: 0; }
.fd-lanc-caixa-lab { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: #79818d; }
.fd-lanc-caixa-nome { font-size: 14px; font-weight: 500; color: #1f2733; }
.fd-lanc-caixa-badge { font-size: 11px; color: #1c7a44; background: #eaf6ef; border: 1px solid #c4e6d3; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fd-lanc-caixa-badge .material-icons { font-size: 12px; vertical-align: -1px; }
.fd-lanc-caixa-avulso { border: 1px solid #1c6fd0; border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; background: #f3f8fe; }
.fd-lanc-caixa-avulso .fd-lanc-caixa-lab { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.fd-lanc-caixa-avulso .fd-lanc-caixa-lab .material-icons { font-size: 12px; }
.fd-lanc-caixa-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }

/* campos */
.fd-lanc-field { margin-bottom: 14px; min-width: 0; }
.fd-lanc-field label { display: block; font-size: 11px; color: #79818d; margin-bottom: 4px; }
.fd-lanc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 0; }
.fd-lanc-grid2 > .fd-lanc-field { margin-bottom: 14px; }
.fd-lanc-input { width: 100%; height: 40px; border: 1px solid #e4e8ee; border-radius: 7px; background: #fff; padding: 0 11px; font-size: 13px; color: #1f2733; outline: none; box-sizing: border-box; }
.fd-lanc-input:focus { border-color: #1c6fd0; }
.fd-lanc-data-box { position: relative; }
.fd-lanc-data-box .fd-lanc-input { padding-right: 36px; }
.fd-lanc-data-ic { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); font-size: 18px; color: #79818d; cursor: pointer; }
.fd-lanc-data-ic:hover { color: #1c6fd0; }

/* confirmação */
.fd-lanc-conf-valor { text-align: center; margin: 8px 0 14px; }
.fd-lanc-conf-tipo { font-size: 11px; color: #79818d; display: block; }
.fd-lanc-conf-num { font-size: 34px; font-weight: 500; letter-spacing: -.5px; }
.fd-lanc-conf-num > span:first-child { font-size: 20px; margin-right: 4px; }
.fd-lanc-conf-rs { font-size: 16px; color: #79818d; margin-right: 6px; }
.fd-lanc-conf-valor.fd-lanc-entrada .fd-lanc-conf-num { color: #1c7a44; }
.fd-lanc-conf-valor.fd-lanc-saida .fd-lanc-conf-num { color: #c43d2c; }
.fd-lanc-data-warn { color: #97670f; font-weight: 500; }
.fd-lanc-aviso-data { display: flex; align-items: center; gap: 9px; background: #fcf4e1; border: 1px solid #eedfb2; border-radius: 8px; padding: 10px 13px; font-size: 12px; color: #1f2733; }
.fd-lanc-aviso-data .material-icons { font-size: 17px; color: #97670f; flex: 0 0 auto; }
.fd-lanc-hint { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #79818d; background: #f3f8fe; border: 1px dashed #cfe2f7; border-radius: 8px; padding: 8px 11px; margin-bottom: 14px; }
.fd-lanc-hint .material-icons { font-size: 15px; color: #1c6fd0; flex: 0 0 auto; }
.fd-lanc-hint span { flex: 1; }
.fd-lanc-hint-link { color: #1c6fd0; cursor: pointer; font-weight: 500; white-space: nowrap; }
.fd-lanc-hint-link:hover { text-decoration: underline; }
body.app_theme_dark .fd-lanc-hint { background: #3d4651; border-color: #4f6075; color: #9e9e9e; }
body.app_theme_dark .fd-lanc-hint .material-icons, body.app_theme_dark .fd-lanc-hint-link { color: #5b9be0; }
/* link discreto "Ajustar padrões" (quando já configurados) */
.fd-lanc-ajustar { display: flex; align-items: center; justify-content: flex-end; gap: 5px; margin-bottom: 14px; font-size: 11px; color: #79818d; }
.fd-lanc-ajustar .material-icons { font-size: 14px; }
.fd-lanc-ajustar .fd-lanc-hint-link { color: #79818d; font-weight: 400; }
.fd-lanc-ajustar .fd-lanc-hint-link:hover { color: #1c6fd0; }
body.app_theme_dark .fd-lanc-ajustar, body.app_theme_dark .fd-lanc-ajustar .fd-lanc-hint-link { color: #9e9e9e; }
body.app_theme_dark .fd-lanc-ajustar .fd-lanc-hint-link:hover { color: #5b9be0; }

/* footer */
.fd-lanc-footer { display: flex; align-items: center; gap: 10px; background: #f8fafc; }

/* capa (caixa fechado) */
.fd-lanc-capa { max-width: 460px; width: 92%; text-align: center; padding: 26px 24px; }
.fd-lanc-capa-ic { width: 48px; height: 48px; border-radius: 50%; background: #fdeeec; color: #c43d2c; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; }
.fd-lanc-capa-ic .material-icons { font-size: 25px; }
.fd-lanc-capa-tit { font-size: 16px; font-weight: 500; color: #1f2733; margin-bottom: 6px; }
.fd-lanc-capa-msg { font-size: 13px; color: #79818d; line-height: 1.5; }
.fd-lanc-capa-ok { margin-top: 16px; }

/* ----- tema escuro ----- */
body.app_theme_dark .fd-modal .fd-lanc-dialog,
body.app_theme_dark .fd-modal .fd-lanc-capa { background: #424242; color: #ececec; }
body.app_theme_dark .fd-lanc-header, body.app_theme_dark .fd-lanc-footer { background: #3a3a3a; border-color: #565656; }
body.app_theme_dark .fd-lanc-icone { background: #3a4a5c; color: #5b9be0; }
body.app_theme_dark .fd-lanc-help { background: #3d4651; border-color: #565656; }
body.app_theme_dark .fd-lanc-tit span,
body.app_theme_dark .fd-lanc-ajuda,
body.app_theme_dark .fd-lanc-help,
body.app_theme_dark .fd-lanc-gateway-s,
body.app_theme_dark .fd-lanc-tipo-d,
body.app_theme_dark .fd-lanc-valor-top > span:first-child,
body.app_theme_dark .fd-lanc-valor-hint,
body.app_theme_dark .fd-lanc-rs,
body.app_theme_dark .fd-lanc-saldo,
body.app_theme_dark .fd-lanc-caixa-lab,
body.app_theme_dark .fd-lanc-field label,
body.app_theme_dark .fd-lanc-conf-tipo,
body.app_theme_dark .fd-lanc-conf-rs,
body.app_theme_dark .fd-lanc-capa-msg,
body.app_theme_dark .fd-lanc-data-ic { color: #9e9e9e; }
body.app_theme_dark .fd-lanc-gateway-q,
body.app_theme_dark .fd-lanc-tit h3,
body.app_theme_dark .fd-lanc-tipo-d b,
body.app_theme_dark .fd-lanc-help b,
body.app_theme_dark .fd-lanc-caixa-nome,
body.app_theme_dark .fd-lanc-valor-input,
body.app_theme_dark .fd-lanc-input,
body.app_theme_dark .fd-lanc-aviso-data,
body.app_theme_dark .fd-lanc-capa-tit { color: #ececec; }
body.app_theme_dark .fd-lanc-input { background: #484848; border-color: #565656; }
body.app_theme_dark .fd-lanc-input:focus { border-color: #5b9be0; }
body.app_theme_dark .fd-lanc-valor-box { background: #484848; }
body.app_theme_dark .fd-lanc-caixa-fixo { background: #474747; border-color: #565656; }
body.app_theme_dark .fd-lanc-caixa-avulso { background: #3d4651; border-color: #5b9be0; }
body.app_theme_dark .fd-lanc-tipo-card { border-color: #565656; }
body.app_theme_dark .fd-lanc-tipo-card.fd-lanc-entrada { background: #324a39; border-color: #456b4f; }
body.app_theme_dark .fd-lanc-tipo-card.fd-lanc-saida { background: #4d3633; border-color: #6b4742; }
body.app_theme_dark .fd-lanc-entrada .fd-lanc-tipo-l, body.app_theme_dark .fd-lanc-valor-box.fd-lanc-entrada .fd-lanc-sinal, body.app_theme_dark .fd-lanc-valor-box.fd-lanc-entrada .fd-lanc-valor-input, body.app_theme_dark .fd-lanc-conf-valor.fd-lanc-entrada .fd-lanc-conf-num { color: #7fc784; }
body.app_theme_dark .fd-lanc-saida .fd-lanc-tipo-l, body.app_theme_dark .fd-lanc-valor-box.fd-lanc-saida .fd-lanc-sinal, body.app_theme_dark .fd-lanc-valor-box.fd-lanc-saida .fd-lanc-valor-input, body.app_theme_dark .fd-lanc-conf-valor.fd-lanc-saida .fd-lanc-conf-num { color: #e08576; }
body.app_theme_dark .fd-lanc-tipobar.fd-lanc-entrada .fd-lanc-tipopill { color: #7fc784; background: #324a39; border-color: #456b4f; }
body.app_theme_dark .fd-lanc-tipobar.fd-lanc-saida .fd-lanc-tipopill { color: #e08576; background: #4d3633; border-color: #6b4742; }
body.app_theme_dark .fd-lanc-caixa-ic, body.app_theme_dark .fd-lanc-caixa-badge { background: #324a39; color: #7fc784; border-color: #456b4f; }
body.app_theme_dark .fd-lanc-capa-ic { background: #4d3633; color: #e08576; }
body.app_theme_dark .fd-lanc-aviso-data { background: #4d4630; border-color: #6b6240; }
body.app_theme_dark .fd-lanc-aviso-data .material-icons, body.app_theme_dark .fd-lanc-data-warn { color: #e0c07f; }
body.app_theme_dark .fd-lanc-trocar { color: #5b9be0; }
body.app_theme_dark .fd-lanc-saldo b.fd-neg, body.app_theme_dark .fd-lanc-valor-box.fd-lanc-saida .fd-lanc-valor-input { }

@media (max-width: 640px) {
  .fd-lanc-tipo-cards { flex-direction: column; }
  .fd-lanc-caixa-grid, .fd-lanc-grid2 { grid-template-columns: 1fr; }

  /* full screen no mobile: o modal de lançamento ocupa a tela inteira */
  .fd-modal.fd-lanc-modal.fd-open { padding: 0; align-items: stretch; justify-content: stretch; }
  .fd-modal.fd-lanc-modal .fd-lanc-dialog {
    width: 100%; max-width: none; height: 100%; max-height: 100%;
    border-radius: 0;
  }
  /* corpo rola; header e footer ficam fixos (já são flex:0 0 auto no base) */
  .fd-modal.fd-lanc-modal .fd-lanc-body { flex: 1 1 auto; }
  /* footer sempre visível, respeitando a safe-area do mobile */
  .fd-modal.fd-lanc-modal .fd-lanc-footer { padding-bottom: calc(14px + env(safe-area-inset-bottom)); }

  /* a capa (caixa fechado) continua centralizada como card */
  .fd-modal.fd-lanc-modal.fd-open:has(.fd-lanc-capa) { padding: 20px; align-items: center; justify-content: center; }
}

/* =====================================================================
   Hierarquia de camadas (z-index) — loader e alertas SEMPRE acima dos modais.
   Ordem: conteúdo < modais (fd-modal = 999999999) < loader < alertas/toasts.
   O fd-modal foi setado em 9 noves (acima dos modais UIkit); aqui subimos o
   loader global e os alertas acima dele, sem tocar em JS/template.
   Teto do z-index em CSS = 2147483647.
   ===================================================================== */
#background_div_central_aguarde { z-index: 1500000000 !important; }
#preloader_central { z-index: 1500000001 !important; }
.cly-msg-overlay,
.cly-confirm-overlay { z-index: 2000000000 !important; }
.uk-notify { z-index: 2000000001 !important; }

/* =====================================================================
   FD-CLY — skin leve para os templates novos do gerador:
     formulario_fdcly.php  (classe .fd-cly-form)
     datatable_in_form_fdcly.php (classe .fd-cly-dt)
   Aditivo e tema-aware. SOMENTE layout/visual — nao altera markup util,
   nomes de campos, hooks de navegacao nem comportamento. Escopado nas
   classes fd-cly-* para nao vazar para nenhuma outra tela.
   Cores: claro por padrao + override em body.app_theme_dark (tons do
   tema do sistema, conforme AI_CONTEXT: cards #424242, borda #565656).
   ===================================================================== */

/* ---- Cards: cantos suaves e borda discreta ---- */
.fd-cly-dt.md-card,
.fd-cly-form.md-card {
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.04);
}
body.app_theme_dark .fd-cly-dt.md-card,
body.app_theme_dark .fd-cly-form.md-card {
  border-color: #565656;
  background: #424242;
  box-shadow: none;
}
/* aninhamento: card de abas dentro do form nao precisa de borda dupla */
.fd-cly-form .fd-cly-tabs.md-card {
  border: none;
  box-shadow: none;
  background: transparent;
}

/* ---- Cabecalho do card ---- */
.fd-cly-form-head {
  padding: 14px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
}
body.app_theme_dark .fd-cly-form-head {
  border-bottom-color: #565656;
}
.fd-cly-form-head .md-card-toolbar-heading-text,
.fd-cly-dt .md-card-toolbar-heading-text {
  font-weight: 500;
  letter-spacing: .2px;
}

/* ---- Toolbar de navegacao: preserva o espacamento original do template ---- */
.fd-cly-toolbar {
  margin-bottom: 60px !important;
}

/* ---- Grade de campos: respiro vertical um pouco maior ---- */
.fd-cly-fields {
  margin-top: 6px;
}
.fd-cly-fields > [class*="uk-width"] {
  margin-bottom: 6px;
}

/* ---- DataTable: cabecalho em caixa-alta discreta ---- */
.fd-cly-dt table.uk-table thead th {
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: .5px;
  font-weight: 500;
  color: #8a8a8a;
  border-bottom: 1px solid rgba(0,0,0,.10);
  padding-top: 12px;
  padding-bottom: 12px;
}
body.app_theme_dark .fd-cly-dt table.uk-table thead th {
  color: #9a9a9a;
  border-bottom-color: #565656;
}

/* ---- DataTable: linhas com separador suave, respiro e hover ---- */
.fd-cly-dt table.uk-table tbody td {
  padding-top: 11px;
  padding-bottom: 11px;
  border-top: 1px solid rgba(0,0,0,.06);
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.fd-cly-dt table.uk-table.uk-table-hover tbody tr:hover td {
  background: rgba(33,150,243,.06);
}
body.app_theme_dark .fd-cly-dt table.uk-table tbody td {
  border-top-color: #4d4d4d;
}
body.app_theme_dark .fd-cly-dt table.uk-table.uk-table-hover tbody tr:hover td {
  background: #4a4a4a;
}

/* ---- Busca e paginacao: cantos suaves ---- */
.fd-cly-dt .dataTables_filter input {
  border-radius: 8px;
}
.fd-cly-dt .dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: 6px;
}

/* =====================================================================
   Editor de preferências (cly.preferencia_editar) — claro/escuro
   ===================================================================== */
.fd-pref-dialog { max-width: 560px; width: 94%; }
.fd-pref-header { display: flex; align-items: center; gap: 11px; background: #f8fafc; }
.fd-pref-icone { width: 36px; height: 36px; border-radius: 9px; background: #e8f1fc; color: #1c6fd0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-pref-icone .material-icons { font-size: 20px; }
.fd-pref-tit { flex: 1; min-width: 0; }
.fd-pref-tit h3 { margin: 0; font-size: 16px; font-weight: 600; }
.fd-pref-tit span { font-size: 11px; color: #79818d; display: block; }
.fd-pref-body { padding: 18px; display: flex; flex-direction: column; gap: 14px; }
.fd-pref-grupo { border: 1px solid #e4e8ee; border-radius: 10px; padding: 14px; background: #f7f9fb; }
.fd-pref-grupo-tit { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; font-size: 13px; font-weight: 500; color: #1f2733; }
.fd-pref-grupo-ic { width: 28px; height: 28px; border-radius: 7px; background: #e8f1fc; color: #1c6fd0; display: flex; align-items: center; justify-content: center; }
.fd-pref-grupo-ic .material-icons { font-size: 16px; }
.fd-pref-entrada .fd-pref-grupo-ic { background: #eaf6ef; color: #1c7a44; }
.fd-pref-entrada .fd-pref-grupo-tit { color: #1c7a44; }
.fd-pref-saida .fd-pref-grupo-ic { background: #fdeeec; color: #c43d2c; }
.fd-pref-saida .fd-pref-grupo-tit { color: #c43d2c; }
.fd-pref-campo { margin-bottom: 10px; min-width: 0; }
.fd-pref-campo:last-child { margin-bottom: 0; }
.fd-pref-campo label { display: block; font-size: 11px; color: #79818d; margin-bottom: 4px; }
.fd-pref-aviso { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: #79818d; background: #f3f8fe; border: 1px solid #cfe2f7; border-radius: 8px; padding: 9px 12px; }
.fd-pref-aviso .material-icons { font-size: 15px; color: #1c6fd0; flex: 0 0 auto; }
.fd-pref-footer { display: flex; align-items: center; gap: 10px; background: #f8fafc; }

body.app_theme_dark .fd-modal .fd-pref-dialog { background: #424242; color: #ececec; }
body.app_theme_dark .fd-pref-header, body.app_theme_dark .fd-pref-footer { background: #3a3a3a; border-color: #565656; }
body.app_theme_dark .fd-pref-icone { background: #3a4a5c; color: #5b9be0; }
body.app_theme_dark .fd-pref-tit span,
body.app_theme_dark .fd-pref-campo label,
body.app_theme_dark .fd-pref-aviso { color: #9e9e9e; }
body.app_theme_dark .fd-pref-tit h3, body.app_theme_dark .fd-pref-grupo-tit { color: #ececec; }
body.app_theme_dark .fd-pref-grupo { background: #474747; border-color: #565656; }
body.app_theme_dark .fd-pref-grupo-ic { background: #3a4a5c; color: #5b9be0; }
body.app_theme_dark .fd-pref-entrada .fd-pref-grupo-ic { background: #324a39; color: #7fc784; }
body.app_theme_dark .fd-pref-entrada .fd-pref-grupo-tit { color: #7fc784; }
body.app_theme_dark .fd-pref-saida .fd-pref-grupo-ic { background: #4d3633; color: #e08576; }
body.app_theme_dark .fd-pref-saida .fd-pref-grupo-tit { color: #e08576; }
body.app_theme_dark .fd-pref-aviso { background: #3d4651; border-color: #4f6075; }
body.app_theme_dark .fd-pref-aviso .material-icons { color: #5b9be0; }

@media (max-width: 640px) {
  .fd-pref-grupo .fd-pref-campo { margin-bottom: 12px; }
}

/* ============================================================
   cly_financeiro.negociacao — wizard de negociação/renegociação
   Modal/overlay (tokens --cly-*). Tema claro/escuro automático.
   Mobile: fullscreen com header/rodapé fixos e corpo rolável.
   ============================================================ */
:root {
  --cly-neg-az: #1e88e5;  --cly-neg-az-bg: rgba(30,136,229,.08);
  --cly-neg-vd: #3f9c46;  --cly-neg-vd-bg: rgba(63,156,70,.10);
  --cly-neg-lr: #e08c12;  --cly-neg-lr-bg: rgba(224,140,18,.10);
  --cly-neg-cr: #6d5dd3;  --cly-neg-cr-bg: rgba(109,93,211,.08);
}
body.app_theme_dark {
  --cly-neg-az: #5aa6f5;  --cly-neg-az-bg: rgba(90,166,245,.12);
  --cly-neg-vd: #5fc46c;  --cly-neg-vd-bg: rgba(95,196,108,.13);
  --cly-neg-lr: #f0b54a;  --cly-neg-lr-bg: rgba(240,181,74,.13);
  --cly-neg-cr: #a99cf2;  --cly-neg-cr-bg: rgba(169,156,242,.13);
}
.cly-azul   { color: var(--cly-neg-az) !important; }
.cly-verde  { color: var(--cly-neg-vd) !important; }
.cly-laranja{ color: var(--cly-neg-lr) !important; }
.cly-roxo   { color: var(--cly-neg-cr) !important; }

.cly-neg-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(8, 10, 14, .72); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cly-neg-box { background: var(--cly-bg); color: var(--cly-text-main); border: 1px solid var(--cly-border); border-radius: 14px; width: 600px; max-width: 100%; max-height: calc(100vh - 48px); box-shadow: 0 16px 50px rgba(0,0,0,.45); display: flex; flex-direction: column; overflow: hidden; }

.cly-neg-head { padding: 15px 18px 13px; flex-shrink: 0; }
.cly-neg-head-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.cly-neg-title { font-size: 16px; font-weight: 500; display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.cly-neg-badge { background: var(--cly-neg-az-bg); color: var(--cly-neg-az); font-size: 11px; font-weight: 500; padding: 3px 10px; border-radius: 20px; }
.cly-neg-x { background: none; border: 0; color: var(--cly-text-muted); cursor: pointer; padding: 2px; line-height: 0; }
.cly-neg-x:hover { color: #e53935; }

.cly-neg-stepper { display: flex; gap: 8px; align-items: center; }
.cly-neg-step { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--cly-text-muted); }
.cly-neg-step span { width: 21px; height: 21px; border-radius: 50%; border: 1.5px solid var(--cly-text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; }
.cly-neg-step .material-icons { font-size: 13px; }
.cly-neg-step.active { color: var(--cly-neg-az); font-weight: 500; }
.cly-neg-step.active span { border-color: var(--cly-neg-az); }
.cly-neg-step.done { color: var(--cly-neg-vd); }
.cly-neg-step.done span { border-color: var(--cly-neg-vd); }
.cly-neg-step-sep { flex: 0 0 24px; height: 1.5px; background: var(--cly-border); }

.cly-neg-ctx { display: flex; align-items: center; gap: 14px; padding: 8px 18px; background: var(--cly-surface); border-top: 1px solid var(--cly-border); border-bottom: 1px solid var(--cly-border); overflow: hidden; }
.cly-neg-ctx span { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--cly-text-muted); min-width: 0; }
.cly-neg-ctx span b { color: var(--cly-text-main); font-weight: 500; }
.cly-neg-ctx .material-icons { font-size: 14px; }
.cly-neg-ctx-cli { flex: 1; min-width: 0; }
.cly-neg-ctx-cli span, .cly-neg-ctx-cli { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* sub-cabeçalho fixo (métricas + barra; no passo 2, totais + aviso) — não rola */
.cly-neg-fixo { padding: 14px 18px 12px; flex-shrink: 0; background: var(--cly-bg); border-bottom: 1px solid var(--cly-border); }
.cly-neg-fixo > :last-child { margin-bottom: 0; }
.cly-neg-body { padding: 16px 18px; overflow-y: auto; flex: 1; }
.cly-neg-foot { padding: 14px 18px; border-top: 1px solid var(--cly-border); flex-shrink: 0; }
.cly-neg-foot-btns { display: flex; gap: 14px; justify-content: flex-end; flex-wrap: wrap; }
.cly-neg-foot-tip { font-size: 11px; color: var(--cly-text-muted); text-align: right; margin-top: 9px; display: flex; align-items: center; gap: 5px; justify-content: flex-end; }
.cly-neg-foot-tip .material-icons { font-size: 14px; }
.cly-neg-foot-help { background: var(--cly-surface); border-radius: 9px; padding: 10px 13px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 8px; }
.cly-neg-foot-help-row { display: flex; gap: 8px; align-items: flex-start; font-size: 11px; color: var(--cly-text-muted); line-height: 1.45; }
.cly-neg-foot-help-row .material-icons { font-size: 15px; margin-top: 1px; flex-shrink: 0; }
.cly-neg-foot-help-row b { color: var(--cly-text-main); font-weight: 500; }

.cly-neg-metrics { display: flex; gap: 8px; margin-bottom: 11px; }
.cly-neg-mc { flex: 1; background: var(--cly-surface); border-radius: 10px; padding: 10px 13px; min-width: 0; }
.cly-neg-mc-l { display: block; font-size: 11.5px; color: var(--cly-text-muted); margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cly-neg-mc-v { display: block; font-size: 19px; font-weight: 500; }
.cly-neg-bar { height: 7px; background: var(--cly-border); border-radius: 5px; overflow: hidden; margin-bottom: 16px; }
.cly-neg-bar > div { height: 100%; background: var(--cly-neg-az); width: 0; transition: width .2s ease; }

.cly-neg-credito { background: var(--cly-neg-cr-bg); border: 1px solid var(--cly-neg-cr); border-radius: 11px; padding: 12px 14px; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
.cly-neg-credito-ic { width: 38px; height: 38px; border-radius: 10px; background: var(--cly-bg); border: 1px solid var(--cly-neg-cr); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-neg-credito-ic .material-icons { color: var(--cly-neg-cr); }
.cly-neg-credito-tx { flex: 1; min-width: 0; }
.cly-neg-credito-tx b { display: block; font-size: 12.5px; font-weight: 500; color: var(--cly-neg-cr); }
.cly-neg-credito-tx small { font-size: 11px; color: var(--cly-text-muted); }
.cly-neg-credito-vl { text-align: right; }
.cly-neg-credito-vl b { display: block; font-size: 20px; font-weight: 500; color: var(--cly-neg-cr); }
.cly-neg-credito-vl small { font-size: 10.5px; color: var(--cly-text-muted); }
/* desktop (>768px): crédito do cliente acompanha a rolagem grudado no topo da lista,
   logo abaixo das métricas fixas. No mobile (≤768px) ele rola junto com as formas.
   top:-16px compensa o padding-top do .cly-neg-body (pina rente ao topo).
   O fundo translúcido (--cly-neg-cr-bg, .08) é composto sobre --cly-bg para ficar
   opaco quando fixo, senão as linhas apareceriam por trás. */
@media (min-width: 769px) {
  .cly-neg-body > .cly-neg-credito {
    position: sticky; top: -16px; z-index: 3;
    background: linear-gradient(var(--cly-neg-cr-bg), var(--cly-neg-cr-bg)), var(--cly-bg);
  }
}

.cly-neg-formas-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 9px; flex-wrap: wrap; }
.cly-neg-formas-head > span { font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--cly-text-muted); }
.cly-neg-formas-acts { display: flex; gap: 6px; }
.cly-neg-mini { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cly-border); background: transparent; color: var(--cly-text-muted); font-size: 11.5px; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.cly-neg-mini .material-icons { font-size: 15px; }
.cly-neg-mini.on { border-color: var(--cly-neg-az); background: var(--cly-neg-az-bg); color: var(--cly-neg-az); }

.cly-neg-ajuda { background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 10px; padding: 4px 14px; margin-bottom: 12px; }
.cly-neg-ajuda-item { display: flex; gap: 9px; align-items: flex-start; padding: 9px 0; }
.cly-neg-ajuda-item + .cly-neg-ajuda-item { border-top: 1px solid var(--cly-border); }
.cly-neg-ajuda-item .material-icons { font-size: 18px; margin-top: 1px; flex-shrink: 0; }
.cly-neg-ajuda-item b { display: block; font-size: 12.5px; font-weight: 500; }
.cly-neg-ajuda-item span { font-size: 11.5px; color: var(--cly-text-muted); line-height: 1.5; }

.cly-neg-reorder-banner { display: flex; align-items: center; gap: 8px; background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); border-radius: 9px; padding: 8px 12px; font-size: 11.5px; color: var(--cly-neg-lr); margin-bottom: 12px; flex-wrap: wrap; }
.cly-neg-reorder-banner .material-icons { font-size: 15px; }
.cly-neg-reorder-banner a { margin-left: auto; text-decoration: underline; cursor: pointer; white-space: nowrap; color: var(--cly-neg-lr); }

.cly-neg-forma { background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 11px; padding: 12px 13px; margin-bottom: 9px; display: flex; gap: 10px; align-items: stretch; }
.cly-neg-forma.alocado { border-color: var(--cly-neg-vd); }
.cly-neg-forma.is-credito { border-color: var(--cly-neg-cr); background: var(--cly-neg-cr-bg); }
.cly-neg-forma.drag-over { border-color: var(--cly-neg-az); border-style: dashed; }
.cly-neg-forma-main { flex: 1; min-width: 0; }
.cly-neg-grip { display: flex; align-items: center; color: var(--cly-neg-az); cursor: grab; }
.cly-neg-grip .material-icons { font-size: 20px; }
.cly-neg-forma-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; }
.cly-neg-forma-ic { width: 32px; height: 32px; border-radius: 8px; background: var(--cly-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-neg-forma-ic .material-icons { font-size: 18px; color: var(--cly-text-muted); }
.cly-neg-forma-ic.sm { width: 30px; height: 30px; }
.cly-neg-forma.is-credito .cly-neg-forma-ic .material-icons { color: var(--cly-neg-cr); }
.cly-neg-forma.alocado .cly-neg-forma-ic .material-icons { color: var(--cly-neg-vd); }
.cly-neg-forma-nome { font-size: 13.5px; font-weight: 500; }
.cly-neg-badge-cred { font-size: 10.5px; font-weight: 500; color: var(--cly-neg-cr); background: var(--cly-neg-cr-bg); border: 1px solid var(--cly-neg-cr); border-radius: 20px; padding: 2px 9px; }
.cly-neg-remover { margin-left: auto; background: none; border: 0; color: var(--cly-text-muted); cursor: pointer; line-height: 0; padding: 2px; }
.cly-neg-remover:hover { color: #e53935; }
.cly-neg-remover .material-icons { font-size: 16px; }

.cly-neg-forma-grid { display: flex; gap: 11px; align-items: flex-start; }
.cly-neg-plano-wrap { flex: 1; min-width: 0; }
.cly-neg-valor-wrap { width: 118px; flex-shrink: 0; }
.cly-neg-plano-wrap label, .cly-neg-valor-wrap label { display: block; font-size: 10px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 3px; }
.cly-neg-valor-wrap label { text-align: right; }
.cly-neg-select { position: relative; }
.cly-neg-select select { width: 100%; appearance: none; -webkit-appearance: none; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 7px; padding: 7px 28px 7px 10px; font-size: 12.5px; color: var(--cly-text-main); cursor: pointer; }
.cly-neg-select .material-icons { position: absolute; right: 7px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--cly-text-muted); pointer-events: none; }
.cly-neg-valor-box { display: flex; align-items: center; gap: 5px; background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 7px; padding: 7px 10px; }
.cly-neg-valor-box span { font-size: 11px; color: var(--cly-text-muted); }
.cly-neg-valor-box input { flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; font-size: 15px; font-weight: 500; color: var(--cly-text-main); outline: none; padding: 0; }

.cly-neg-forma-foot:empty { display: none; }
.cly-neg-acts { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cly-border); display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
.cly-neg-foot-hint { font-size: 11px; color: var(--cly-text-muted); flex: 1; min-width: 90px; }
.cly-neg-btn-compl, .cly-neg-btn-outro, .cly-neg-btn-cred { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 500; padding: 7px 11px; border-radius: 7px; cursor: pointer; }
.cly-neg-btn-compl .material-icons, .cly-neg-btn-outro .material-icons, .cly-neg-btn-cred .material-icons { font-size: 15px; }
.cly-neg-btn-compl { border: 1px solid var(--cly-neg-az); background: var(--cly-neg-az-bg); color: var(--cly-neg-az); }
.cly-neg-btn-outro { border: 1px dashed var(--cly-border); background: transparent; color: var(--cly-text-muted); font-weight: 400; }
.cly-neg-btn-cred { border: 1px solid var(--cly-neg-cr); background: var(--cly-neg-cr-bg); color: var(--cly-neg-cr); }

/* forma que abate crédito mas o cliente está sem saldo → desabilitada + informativo */
.cly-neg-forma.sem-credito { border-style: dashed; border-color: var(--cly-border); background: var(--cly-surface); }
.cly-neg-forma.sem-credito .cly-neg-forma-nome,
.cly-neg-forma.sem-credito .cly-neg-valor-box,
.cly-neg-forma.sem-credito .cly-neg-select select { color: var(--cly-text-muted); }
.cly-neg-forma.sem-credito .cly-neg-valor-box,
.cly-neg-forma.sem-credito .cly-neg-select { opacity: .6; }
.cly-neg-badge-indisp { font-size: 10.5px; font-weight: 500; color: var(--cly-neg-lr); background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); border-radius: 20px; padding: 2px 9px; }
.cly-neg-credinfo { margin-top: 11px; padding-top: 11px; border-top: 1px dashed var(--cly-border); display: flex; gap: 9px; align-items: flex-start; }
.cly-neg-credinfo > .material-icons { font-size: 16px; color: var(--cly-neg-az); margin-top: 1px; flex-shrink: 0; }
.cly-neg-credinfo p { margin: 0; font-size: 11.5px; color: var(--cly-text-muted); line-height: 1.55; }
.cly-neg-credinfo p b { color: var(--cly-text-main); font-weight: 500; }
.cly-neg-credinfo-actions { margin-top: 9px; text-align: right; }
.cly-neg-btn-extrato { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--cly-neg-az); background: var(--cly-neg-az-bg); color: var(--cly-neg-az); font-size: 11.5px; font-weight: 500; padding: 7px 12px; border-radius: 7px; cursor: pointer; }
.cly-neg-btn-extrato .material-icons { font-size: 14px; }

.cly-neg-ok { display: flex; align-items: center; gap: 6px; background: var(--cly-neg-vd-bg); border: 1px solid var(--cly-neg-vd); border-radius: 9px; padding: 8px 12px; font-size: 12px; color: var(--cly-neg-vd); margin-bottom: 16px; }
.cly-neg-warn { display: flex; align-items: center; gap: 6px; background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); border-radius: 9px; padding: 8px 12px; font-size: 12px; color: var(--cly-neg-lr); margin-bottom: 16px; }
.cly-neg-ok .material-icons, .cly-neg-warn .material-icons { font-size: 16px; }

.cly-neg-grupo { border: 1px solid var(--cly-border); border-radius: 11px; overflow: hidden; margin-bottom: 10px; }
.cly-neg-grupo-head { display: flex; align-items: center; gap: 9px; padding: 10px 13px 10px 11px; background: var(--cly-surface); border-left: 3px solid var(--cly-neg-az); }
.cly-neg-grupo-tx { flex: 1; min-width: 0; }
.cly-neg-grupo-tx b { display: block; font-size: 13px; font-weight: 500; }
.cly-neg-grupo-tx small { font-size: 11px; color: var(--cly-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.cly-neg-grupo-tot { text-align: right; }
.cly-neg-grupo-tot small { display: block; font-size: 9.5px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .04em; }
.cly-neg-grupo-tot b { font-size: 13.5px; font-weight: 500; }
.cly-neg-parc { display: grid; grid-template-columns: 42px 1fr auto; align-items: center; gap: 10px; padding: 9px 13px; }
.cly-neg-parc.bd { border-bottom: 1px solid var(--cly-border); }
.cly-neg-parc-et { font-size: 11px; font-weight: 500; color: var(--cly-text-muted); background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 6px; padding: 3px 0; text-align: center; }
.cly-neg-parc-dt { font-size: 12px; display: inline-flex; align-items: center; gap: 5px; min-width: 0; }
.cly-neg-parc-dt .material-icons { font-size: 14px; color: var(--cly-text-muted); }
.cly-neg-parc-dt b { color: var(--cly-neg-az); font-weight: 500; }
.cly-neg-parc-vl { font-size: 13.5px; font-weight: 500; text-align: right; }
.cly-neg-vazio { padding: 24px; text-align: center; color: var(--cly-text-muted); font-size: 13px; }

@media (max-width: 768px) {
  .cly-neg-overlay { padding: 0; }
  .cly-neg-box { width: 100%; height: 100%; max-height: 100%; border-radius: 0; border: 0; }
  .cly-neg-ctx { flex-direction: column; align-items: flex-start; gap: 5px; }
  .cly-neg-foot-btns { justify-content: stretch; gap: 10px; }
  .cly-neg-foot-btns .fd-btn { flex: 1; min-width: 110px; }
  .cly-neg-foot-tip { text-align: center; justify-content: center; }
}

/* botões de reordenar (funciona no toque, ≠ drag nativo) */
.cly-neg-grip { flex-direction: column; gap: 2px; }
.cly-neg-grip .material-icons { font-size: 18px; }
.cly-neg-move { background: none; border: 0; color: var(--cly-neg-az); cursor: pointer; padding: 0; line-height: 0; }
.cly-neg-move:disabled { color: var(--cly-text-muted); opacity: .4; cursor: default; }
.cly-neg-move .material-icons { font-size: 18px; }

/* ============================================================
   cly_request — loader central robusto (z-index dinâmico via JS)
   ============================================================ */
.cly-req-loader { position: fixed; inset: 0; background: rgba(0, 0, 0, .28); display: flex; align-items: center; justify-content: center; }
.cly-req-spin { width: 46px; height: 46px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .35); border-top-color: var(--cly-neg-az, #1e88e5); animation: cly-req-spin .8s linear infinite; box-shadow: 0 2px 12px rgba(0, 0, 0, .25); }
@keyframes cly-req-spin { to { transform: rotate(360deg); } }

/* ============================================================
   cly_faturamento.devolucao — wizard de devolução de venda
   Reaproveita .cly-neg-* (overlay/box/head/ctx/body/foot/stepper/metrics)
   e os tokens --cly-neg-*. Tema claro/escuro automático.
   ============================================================ */
.cly-dev-box { width: 800px; }
.cly-dev-badge { background: var(--cly-neg-vd-bg) !important; color: var(--cly-neg-vd) !important; }

.cly-dev-head1 { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.cly-dev-head1-t { font-size: 14px; font-weight: 500; }
.cly-dev-head1-acts { display: flex; gap: 7px; }
.cly-dev-btn-todos { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--cly-neg-az); background: var(--cly-neg-az-bg); color: var(--cly-neg-az); font-size: 11.5px; font-weight: 500; padding: 6px 10px; border-radius: 7px; cursor: pointer; }
.cly-dev-btn-todos .material-icons { font-size: 14px; }
.cly-dev-help { margin: 0 0 12px; padding: 11px 13px; background: var(--cly-neg-az-bg); border: 1px solid var(--cly-neg-az); border-radius: 9px; font-size: 11.5px; line-height: 1.6; }
.cly-dev-help b { color: var(--cly-neg-az); }

/* campo de bipe */
.cly-dev-bc { display: flex; align-items: center; gap: 11px; border: 2px solid var(--cly-neg-az); background: var(--cly-bg); border-radius: 11px; padding: 11px 13px; box-shadow: 0 0 0 4px var(--cly-neg-az-bg); margin-bottom: 10px; }
.cly-dev-bc > .material-icons { font-size: 24px; color: var(--cly-neg-az); }
.cly-dev-bc-input { flex: 1; min-width: 0; border: 0; background: transparent; font-size: 14px; color: var(--cly-text-main); outline: none; }
.cly-dev-bc-badge { font-size: 10.5px; font-weight: 500; color: var(--cly-neg-vd); background: var(--cly-neg-vd-bg); border: 1px solid var(--cly-neg-vd); border-radius: 20px; padding: 3px 10px; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.cly-dev-bc-badge .material-icons { font-size: 11px; }
.cly-dev-bc-ok, .cly-dev-bc-erro { display: flex; align-items: center; gap: 8px; border-radius: 9px; padding: 8px 12px; font-size: 11.5px; margin-bottom: 14px; }
.cly-dev-bc-ok { background: var(--cly-neg-vd-bg); border: 1px solid var(--cly-neg-vd); color: var(--cly-text-main); }
.cly-dev-bc-ok .material-icons { color: var(--cly-neg-vd); font-size: 16px; }
.cly-dev-bc-erro { background: var(--cly-neg-vm-bg, rgba(216,69,63,.08)); border: 1px solid var(--cly-neg-vm); color: var(--cly-neg-vm); }
.cly-dev-bc-ok span, .cly-dev-bc-erro span { margin-left: auto; color: var(--cly-text-muted); }

/* lista de itens */
.cly-dev-list { border: 1px solid var(--cly-border); border-radius: 11px; overflow: hidden; }
.cly-dev-list-scroll { max-height: 250px; overflow-y: auto; }
.cly-dev-item { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-bottom: 1px solid var(--cly-border); border-left: 3px solid transparent; transition: background .15s, border-color .15s; }
.cly-dev-item.done { opacity: .55; }
.cly-dev-item.completa { border-left-color: var(--cly-neg-vd); background: var(--cly-neg-vd-bg); }
.cly-dev-item-main { flex: 1; min-width: 0; }
.cly-dev-item-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; }
.cly-dev-id { font-size: 11px; font-weight: 500; color: var(--cly-neg-az); background: var(--cly-neg-az-bg); border: 1px solid var(--cly-neg-az); border-radius: 6px; padding: 1px 7px; }
.cly-dev-nome { font-size: 13.5px; font-weight: 500; }
.cly-dev-status { font-size: 10px; font-weight: 500; border-radius: 20px; padding: 1px 8px; white-space: nowrap; }
.cly-dev-status.ok { color: var(--cly-neg-vd); background: var(--cly-neg-vd-bg); border: 1px solid var(--cly-neg-vd); }
.cly-dev-status.parc { color: var(--cly-neg-lr); background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); }
.cly-dev-status.mut { color: var(--cly-text-muted); background: var(--cly-surface); border: 1px solid var(--cly-border); }
.cly-dev-item-cb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.cly-dev-mono { font-family: var(--font-mono, monospace); font-size: 11px; color: var(--cly-text-muted); }
.cly-dev-mono.sm { font-size: 10.5px; }
.cly-dev-chip { font-size: 10.5px; color: var(--cly-text-muted); background: var(--cly-surface); border-radius: 5px; padding: 1px 7px; }
.cly-dev-pills { display: flex; gap: 6px; flex-wrap: wrap; }
.cly-dev-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--cly-text-muted); background: var(--cly-surface); border-radius: 6px; padding: 2px 8px; }
.cly-dev-pill b { font-size: 12px; color: var(--cly-text-main); font-weight: 600; }
.cly-dev-pill.emph { color: var(--cly-neg-az); background: var(--cly-neg-az-bg); border: 1.5px solid var(--cly-neg-az); padding: 3px 10px; }
.cly-dev-pill.emph b { color: var(--cly-neg-az); font-size: 13px; font-weight: 700; }
.cly-dev-pill.emph .material-icons { font-size: 13px; color: var(--cly-neg-az); }

/* controle de quantidade */
.cly-dev-qty { text-align: right; flex-shrink: 0; }
.cly-dev-qty-l { font-size: 10px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.cly-dev-qty-done { font-size: 12.5px; color: var(--cly-text-muted); padding: 7px 0; }
.cly-dev-qty-ctrl { display: flex; align-items: center; gap: 6px; justify-content: flex-end; }
.cly-dev-qbtn { width: 30px; height: 34px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cly-dev-qbtn .material-icons { font-size: 16px; }
.cly-dev-qbox { display: flex; align-items: center; border: 1.5px solid var(--cly-border); background: var(--cly-bg); border-radius: 8px; padding: 6px 10px; width: 84px; }
.cly-dev-qbox.on { border-color: var(--cly-neg-az); box-shadow: 0 0 0 3px var(--cly-neg-az-bg); }
.cly-dev-qinput { width: 100%; border: 0; background: transparent; text-align: center; font-size: 17px; font-weight: 600; color: var(--cly-text-main); outline: none; }
.cly-dev-qtudo { border: 1px solid var(--cly-neg-az); background: var(--cly-neg-az-bg); color: var(--cly-neg-az); font-size: 11px; font-weight: 500; padding: 7px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cly-dev-qsub { margin-top: 7px; font-size: 11px; color: var(--cly-text-muted); }
.cly-dev-qsub b { font-size: 13.5px; font-weight: 600; }

/* resumo (tabela compacta minimizável) */
.cly-dev-resumo { border: 1px solid var(--cly-border); border-radius: 10px; overflow: hidden; margin-bottom: 12px; }
.cly-dev-resumo-head { display: flex; align-items: center; gap: 8px; padding: 9px 13px; background: var(--cly-surface); cursor: pointer; }
.cly-dev-resumo-head > .material-icons { color: var(--cly-neg-az); font-size: 16px; }
.cly-dev-resumo-head span { font-size: 12px; font-weight: 500; }
.cly-dev-resumo-head small { font-size: 11px; color: var(--cly-text-muted); }
.cly-dev-resumo-chev { margin-left: auto; color: var(--cly-text-muted); }
.cly-dev-resumo-row { display: grid; grid-template-columns: 1fr auto auto auto; gap: 8px; padding: 6px 13px; font-size: 11.5px; align-items: center; border-top: 1px solid var(--cly-border); }
.cly-dev-resumo-row span:nth-child(2) { text-align: center; font-weight: 500; }
.cly-dev-resumo-row span:nth-child(3), .cly-dev-resumo-row span:nth-child(4) { text-align: right; }
.cly-dev-resumo-row.th { font-size: 9.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--cly-text-muted); }
.cly-dev-resumo-row.th span { font-weight: 400 !important; }
.cly-dev-resumo-row.tot { font-weight: 600; background: var(--cly-bg); }
.cly-dev-resumo-vazio { padding: 9px 13px; font-size: 11.5px; color: var(--cly-text-muted); border-top: 1px solid var(--cly-border); }

/* passo 2 — destino */
.cly-dev-dest-head { margin-bottom: 14px; }
.cly-dev-dest-t { font-size: 15px; font-weight: 500; }
.cly-dev-dest-s { font-size: 11.5px; color: var(--cly-text-muted); }
.cly-dev-card { background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 11px; padding: 12px 13px; margin-bottom: 8px; cursor: pointer; }
.cly-dev-card.sel { border-color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }
.cly-dev-card-top { display: flex; align-items: flex-start; gap: 11px; }
.cly-dev-card-ic { width: 34px; height: 34px; border-radius: 9px; background: var(--cly-surface); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-dev-card-ic .material-icons { font-size: 18px; color: var(--cly-text-muted); }
.cly-dev-card.sel .cly-dev-card-ic .material-icons { color: var(--cly-neg-az); }
.cly-dev-card-tx { flex: 1; min-width: 0; }
.cly-dev-card-t { font-size: 13.5px; font-weight: 500; margin-bottom: 2px; }
.cly-dev-card-d { font-size: 11.5px; color: var(--cly-text-muted); line-height: 1.5; }
.cly-dev-card-d b { color: var(--cly-text-main); font-weight: 500; }
.cly-dev-radio { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--cly-border); flex-shrink: 0; margin-top: 2px; }
.cly-dev-radio.on { border-color: var(--cly-neg-az); box-shadow: inset 0 0 0 3px var(--cly-bg), inset 0 0 0 9px var(--cly-neg-az); }
.cly-dev-card-extra { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--cly-border); }
.cly-dev-card-info { font-size: 11.5px; color: var(--cly-text-muted); }
.cly-dev-check { display: flex; align-items: center; gap: 7px; margin-top: 9px; font-size: 12px; cursor: pointer; }
.cly-dev-checkbox { width: 15px; height: 15px; border: 1.5px solid var(--cly-border); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; }
.cly-dev-check.on .cly-dev-checkbox { border-color: var(--cly-neg-az); background: var(--cly-neg-az); }
.cly-dev-check.on .cly-dev-checkbox .material-icons { font-size: 11px; color: #fff; }
.cly-dev-field { margin-top: 9px; }
.cly-dev-lbl { font-size: 10px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.cly-req { color: var(--cly-neg-vm); }
.cly-dev-busca { width: 100%; display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--cly-border); background: var(--cly-bg); border-radius: 7px; padding: 8px 10px; font-size: 12.5px; color: var(--cly-text-main); cursor: pointer; }
.cly-dev-busca .mut { color: var(--cly-text-muted); }
.cly-dev-busca .material-icons { font-size: 15px; color: var(--cly-text-muted); }
.cly-dev-motivo-box { margin-top: 14px; border: 1px solid var(--cly-border); border-radius: 11px; padding: 12px 13px; background: var(--cly-surface); }
.cly-dev-motivo-head { display: flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 500; color: var(--cly-text-main); margin-bottom: 9px; }
.cly-dev-motivo-head .material-icons { font-size: 17px; color: var(--cly-neg-az); }
.cly-dev-motivo-input { width: 100%; box-sizing: border-box; border: 1.5px solid var(--cly-border); background: var(--cly-bg); border-radius: 8px; padding: 10px 12px; font-size: 13px; color: var(--cly-text-main); outline: none; }
.cly-dev-motivo-input:focus { border-color: var(--cly-neg-az); box-shadow: 0 0 0 3px var(--cly-neg-az-bg); }

/* passo 3 — conferência */
.cly-dev-conf-tab { border: 1px solid var(--cly-border); border-radius: 11px; overflow: hidden; margin-bottom: 12px; }
.cly-dev-conf-row { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; padding: 9px 13px; border-bottom: 1px solid var(--cly-border); }
.cly-dev-conf-row.th { background: var(--cly-surface); font-size: 10px; text-transform: uppercase; letter-spacing: .04em; color: var(--cly-text-muted); }
.cly-dev-conf-row.th span:nth-child(2), .cly-dev-conf-row.th span:nth-child(3) { text-align: right; }
.cly-dev-conf-row.tot { background: var(--cly-surface); font-weight: 600; font-size: 13px; }
.cly-dev-conf-prod { font-size: 12.5px; font-weight: 500; }
.cly-dev-conf-q { text-align: center; font-size: 12.5px; font-weight: 500; }
.cly-dev-conf-s { text-align: right; font-size: 12.5px; font-weight: 500; }
.cly-dev-conf-row.tot span:nth-child(2) { text-align: center; }
.cly-dev-conf-row.tot span:nth-child(3) { text-align: right; }
.cly-dev-conf-dest { display: flex; gap: 9px; align-items: flex-start; background: var(--cly-neg-vd-bg); border: 1px solid var(--cly-neg-vd); border-radius: 10px; padding: 10px 13px; margin-bottom: 12px; }
.cly-dev-conf-dest > .material-icons { color: var(--cly-neg-vd); font-size: 18px; }
.cly-dev-conf-dest b { font-size: 12px; }
.cly-dev-conf-dest span { font-size: 12px; color: var(--cly-text-muted); }
.cly-dev-conf-obs { font-size: 11px; color: var(--cly-text-muted); display: flex; gap: 5px; align-items: center; }
.cly-dev-parc-box { border: 1px solid var(--cly-border); border-radius: 11px; overflow: hidden; margin-bottom: 12px; }
.cly-dev-parc-h { padding: 9px 13px; background: var(--cly-surface); font-size: 12px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.cly-dev-parc-th, .cly-dev-parc { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; padding: 8px 13px; align-items: center; }
.cly-dev-parc-th { font-size: 10px; text-transform: uppercase; color: var(--cly-text-muted); border-bottom: 1px solid var(--cly-border); }
.cly-dev-parc-th span:nth-child(3), .cly-dev-parc-th span:nth-child(4) { text-align: right; }
.cly-dev-parc { font-size: 12px; border-bottom: 1px solid var(--cly-border); }
.cly-dev-parc b { color: var(--cly-neg-az); font-weight: 500; }
.cly-dev-parc span:nth-child(3) { text-align: right; font-weight: 500; }
.cly-dev-parc span:nth-child(4) { text-align: right; }
.cly-dev-parc .mut, .cly-dev-conf-dest span.mut { color: var(--cly-text-muted); }
.cly-vm { color: var(--cly-neg-vm); }
.cly-dev-aviso { display: flex; gap: 8px; align-items: center; background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); border-radius: 9px; padding: 9px 12px; font-size: 11.5px; color: var(--cly-neg-lr); margin-bottom: 12px; }

/* valor escolhido no campo de destino (cliente/caixa) */
.cly-dev-busca-val { flex: 1; text-align: left; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cly-dev-busca-val small { color: var(--cly-text-muted); font-size: 11.5px; }
.cly-dev-aviso-caixa { display: flex; gap: 7px; align-items: flex-start; margin-top: 9px; padding: 8px 11px; border-radius: 8px; font-size: 11.5px; line-height: 1.45; background: var(--cly-neg-lr-bg); border: 1px solid var(--cly-neg-lr); color: var(--cly-neg-lr); }
.cly-dev-aviso-caixa .material-icons { font-size: 16px; flex-shrink: 0; }
.cly-dev-aviso-caixa b { font-weight: 600; }

/* conferência — destino com caixa/cliente evidente */
.cly-dev-conf-dest-main { flex: 1; min-width: 0; }
.cly-dev-conf-dest-info { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--cly-neg-vd); display: flex; flex-direction: column; gap: 5px; }
.cly-dev-conf-kv { font-size: 12px; display: flex; align-items: center; gap: 6px; color: var(--cly-text-main); }
.cly-dev-conf-kv .material-icons { font-size: 15px; color: var(--cly-neg-vd); }
.cly-dev-conf-kv b { font-weight: 500; display: inline-flex; align-items: center; gap: 5px; }
.cly-dev-conf-kv .cly-dev-busca-val { display: inline-flex; }
.cly-dev-conf-kv.aviso { color: var(--cly-neg-lr); }
.cly-dev-conf-kv.aviso .material-icons { color: var(--cly-neg-lr); }

/* diálogo de confirmação de saída */
.cly-dev-confirm { position: absolute; inset: 0; background: rgba(15, 20, 28, .5); display: flex; align-items: center; justify-content: center; border-radius: inherit; z-index: 5; padding: 18px; }
.cly-dev-confirm-box { width: 340px; max-width: 100%; background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 13px; padding: 20px; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .3); }
.cly-dev-confirm-ic { font-size: 30px; color: var(--cly-neg-lr); }
.cly-dev-confirm-t { font-size: 15px; font-weight: 500; color: var(--cly-text-main); margin: 8px 0 5px; }
.cly-dev-confirm-d { font-size: 12.5px; line-height: 1.5; color: var(--cly-text-muted); margin-bottom: 16px; }
.cly-dev-confirm-btns { display: flex; gap: 9px; }
.cly-dev-confirm-btns .fd-btn { flex: 1; justify-content: center; }
.cly-dev-btn-danger { background: var(--cly-neg-vm, #d8453f); border: 1px solid var(--cly-neg-vm, #d8453f); color: #fff; }
.cly-dev-btn-danger:hover { filter: brightness(.95); }

/* aviso inline no modal (substitui os toasts no fluxo) */
.cly-dev-alert { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border-radius: 9px; font-size: 12.5px; line-height: 1.45; border: 1px solid; margin-bottom: 11px; }
.cly-dev-alert .material-icons { font-size: 17px; flex-shrink: 0; }
.cly-dev-alert span { flex: 1; }
.cly-dev-alert b { font-weight: 600; }
.cly-dev-alert-x { border: 0; background: transparent; cursor: pointer; padding: 0; display: flex; align-items: center; opacity: .55; color: inherit; }
.cly-dev-alert-x:hover { opacity: 1; }
.cly-dev-alert-x .material-icons { font-size: 15px; }
.cly-dev-alert.danger { background: var(--cly-neg-vm-bg, rgba(216, 69, 63, .1)); border-color: var(--cly-neg-vm); color: var(--cly-neg-vm); }
.cly-dev-alert.warning { background: var(--cly-neg-lr-bg); border-color: var(--cly-neg-lr); color: var(--cly-neg-lr); }
.cly-dev-alert.info { background: var(--cly-neg-az-bg); border-color: var(--cly-neg-az); color: var(--cly-neg-az); }
.cly-dev-alert.success { background: var(--cly-neg-vd-bg); border-color: var(--cly-neg-vd); color: var(--cly-neg-vd); }

@media (max-width: 768px) {
  .cly-dev-box { width: 100%; }
  .cly-dev-item { flex-wrap: wrap; }
  .cly-dev-qty { width: 100%; }
  .cly-dev-qty-ctrl { justify-content: flex-start; }
}

/* ============================================================
   cly_buscador — campo inline + modal de busca (sem UIkit/DataTable)
   ============================================================ */
.cly-bsc-overlay { position: fixed; inset: 0; z-index: 1300; background: rgba(15, 20, 28, .55); backdrop-filter: blur(2px); display: flex; align-items: center; justify-content: center; padding: 24px; }
/* altura FIXA: topo (cabeçalho + busca) e rodapé ficam parados; só a lista muda */
.cly-bsc-box { width: 1100px; max-width: 94vw; height: min(680px, 88vh); display: flex; flex-direction: column; background: var(--cly-bg, #fff); border: 1px solid var(--cly-border, #e3e6ea); border-radius: 14px; overflow: hidden; box-shadow: 0 18px 60px rgba(0, 0, 0, .3); }
.cly-bsc-head { display: flex; align-items: center; justify-content: space-between; padding: 13px 16px; border-bottom: 1px solid var(--cly-border); }
.cly-bsc-title { font-size: 15px; font-weight: 500; display: flex; align-items: center; gap: 9px; color: var(--cly-text-main); }
.cly-bsc-title .material-icons { font-size: 19px; color: var(--cly-neg-az, #1e88e5); }
.cly-bsc-x { width: 30px; height: 30px; border: 0; background: transparent; color: var(--cly-text-muted); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cly-bsc-x:hover { background: var(--cly-surface); }

.cly-bsc-tools { display: flex; gap: 9px; padding: 12px 16px; align-items: center; position: relative; flex-wrap: wrap; }
.cly-bsc-search { flex: 1; min-width: 180px; display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--cly-neg-az); background: var(--cly-bg); border-radius: 9px; padding: 0 12px; height: 40px; box-shadow: 0 0 0 3px var(--cly-neg-az-bg); }
.cly-bsc-search > .material-icons { font-size: 17px; color: var(--cly-neg-az); }
.cly-bsc-search-input { flex: 1; border: 0; background: transparent; outline: none; font-size: 13.5px; color: var(--cly-text-main); }
.cly-bsc-spin { animation: cly-bsc-rot 1s linear infinite; font-size: 16px !important; color: var(--cly-text-muted); }
@keyframes cly-bsc-rot { to { transform: rotate(360deg); } }
.cly-bsc-tipo { height: 40px; border: 1px solid var(--cly-border); background: var(--cly-bg); color: var(--cly-text-main); border-radius: 9px; padding: 0 8px; font-size: 12.5px; }
.cly-bsc-chip { height: 40px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); border-radius: 9px; padding: 0 11px; font-size: 12.5px; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.cly-bsc-chip .material-icons { font-size: 15px; }
.cly-bsc-chip-cv { color: var(--cly-text-muted); }
.cly-bsc-gear { width: 40px; height: 40px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-muted); border-radius: 9px; cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-bsc-gear .material-icons { font-size: 18px; }
.cly-bsc-colmenu { position: absolute; top: 56px; right: 16px; z-index: 5; background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 10px; padding: 6px; min-width: 180px; box-shadow: 0 10px 30px rgba(0, 0, 0, .2); max-height: 260px; overflow-y: auto; }
.cly-bsc-colitem { display: flex; align-items: center; gap: 8px; padding: 6px 9px; font-size: 12.5px; color: var(--cly-text-main); border-radius: 6px; cursor: pointer; }
.cly-bsc-colitem:hover { background: var(--cly-surface); }

.cly-bsc-body { flex: 1 1 0; overflow: auto; min-height: 0; }
/* auto + min-width:100%: colunas dimensionam pelo conteúdo e a tabela rola na
   horizontal quando há muitas colunas. (table-layout:fixed colapsava p/ 0px as
   colunas sem largura — ex.: Cliente/Negociação — quando a soma das larguras
   fixas passava da largura do modal.) */
.cly-bsc-table { width: auto; min-width: 100%; border-collapse: collapse; }
.cly-bsc-table th { position: sticky; top: 0; background: var(--cly-surface); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; text-align: left; padding: 9px 13px; font-weight: 500; color: var(--cly-text-muted); border-bottom: 1px solid var(--cly-border); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cly-bsc-table th.ord { cursor: pointer; }
.cly-bsc-table th.ord:hover, .cly-bsc-table th.ord.on { color: var(--cly-neg-az); }
.cly-bsc-table th .material-icons { font-size: 12px; vertical-align: -1px; }
.cly-bsc-table td { font-size: 12.5px; padding: 9px 13px; border-bottom: 1px solid var(--cly-border); color: var(--cly-text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cly-bsc-row { cursor: pointer; }
.cly-bsc-row.sel { background: var(--cly-neg-az-bg); }
.cly-bsc-sec td { padding: 6px 13px; font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; color: var(--cly-text-muted); background: var(--cly-surface); border-bottom: 1px solid var(--cly-border); }
.cly-bsc-sec.destaque td { color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }
.cly-bsc-sec td .material-icons { font-size: 13px; vertical-align: -2px; margin-right: 3px; }
.cly-bsc-row.destaque td:first-child { box-shadow: inset 3px 0 0 var(--cly-neg-az); }
.cly-bsc-id { font-size: 11px; font-weight: 500; color: var(--cly-neg-az); background: var(--cly-neg-az-bg); border-radius: 5px; padding: 1px 7px; }
.cly-bsc-badge { font-size: 10.5px; padding: 1px 9px; border-radius: 20px; }
.cly-bsc-badge.cor-success { color: var(--cly-neg-vd); background: var(--cly-neg-vd-bg); }
.cly-bsc-badge.cor-muted { color: var(--cly-text-muted); background: var(--cly-surface); }
.cly-bsc-badge.cor-danger { color: var(--cly-neg-vm); background: var(--cly-neg-vm-bg, rgba(216,69,63,.1)); }
.cly-bsc-badge.cor-warning { color: var(--cly-neg-lr); background: var(--cly-neg-lr-bg); }
.cly-bsc-badge.cor-info { color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }

.cly-bsc-estado { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 44px 20px; min-height: 100%; box-sizing: border-box; color: var(--cly-text-muted); font-size: 13px; }
.cly-bsc-estado .material-icons { font-size: 30px; }
.cly-bsc-estado.erro { color: var(--cly-neg-vm); }

.cly-bsc-foot { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-top: 1px solid var(--cly-border); }
.cly-bsc-count { font-size: 11.5px; color: var(--cly-text-muted); }
.cly-bsc-pg { display: flex; align-items: center; gap: 6px; }
.cly-bsc-pgb { width: 28px; height: 28px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); border-radius: 7px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cly-bsc-pgb:disabled { opacity: .4; cursor: default; }
.cly-bsc-pgb .material-icons { font-size: 16px; }
.cly-bsc-pgn { font-size: 12px; color: var(--cly-text-muted); min-width: 54px; text-align: center; }

.cly-bsc-fmenu { background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 10px; padding: 5px; min-width: 150px; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.cly-bsc-fitem { padding: 7px 11px; font-size: 12.5px; color: var(--cly-text-main); border-radius: 6px; cursor: pointer; }
.cly-bsc-fitem:hover { background: var(--cly-surface); }
.cly-bsc-fitem.on { color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }

.cly-bsc-field { display: flex; align-items: center; border: 1.5px solid var(--cly-border); background: var(--cly-bg); border-radius: 9px; padding: 4px 6px 4px 12px; gap: 8px; min-height: 42px; cursor: pointer; }
.cly-bsc-field.on { border-color: var(--cly-neg-az); }
.cly-bsc-fi-txt { flex: 1; font-size: 14px; color: var(--cly-text-main); }
.cly-bsc-fi-txt small { color: var(--cly-text-muted); }
.cly-bsc-fi-id { flex: 0 0 auto; font-size: 11px; font-weight: 600; color: var(--cly-neg-az); background: var(--cly-neg-az-bg); padding: 2px 8px; border-radius: 20px; white-space: nowrap; }
.cly-bsc-fi-ph { flex: 1; font-size: 14px; color: var(--cly-text-muted); }
.cly-bsc-fi-lupa { width: 32px; height: 32px; border: 0; border-radius: 7px; background: var(--cly-neg-az-bg); color: var(--cly-neg-az); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-bsc-fi-lupa .material-icons { font-size: 17px; }

/* Dentro de um modal .fd-modal (ex.: lançamento no caixa), o campo cly_buscador
   herda o MESMO tom de fundo dos demais inputs inline (.fd-bi-box) — claro e
   escuro — para não destoar (var(--cly-bg) deixava o campo escuro demais no tema
   dark). Só o fundo/texto: a borda base e o realce .on (selecionado) ficam intactos. */
.fd-modal .cly-bsc-field { background: #fff; }
body.app_theme_dark .fd-modal .cly-bsc-field { background: #484848; }
body.app_theme_dark .fd-modal .cly-bsc-fi-txt { color: #ececec; }

@media (max-width: 768px) {
  .cly-bsc-overlay { padding: 0; }
  .cly-bsc-box { width: 100%; max-width: 100%; height: 100%; max-height: 100%; border-radius: 0; }
}

/* ---- cly_buscador: cor de linha (regra de negócio) ---- */
.cly-bsc-row.corlinha td:first-child { box-shadow: inset 3px 0 0 var(--cly-neg-az); }
.cly-bsc-row.corlinha.cor-success td:first-child { box-shadow: inset 3px 0 0 var(--cly-neg-vd); }
.cly-bsc-row.corlinha.cor-warning td:first-child { box-shadow: inset 3px 0 0 var(--cly-neg-lr); }
.cly-bsc-row.corlinha.cor-danger td:first-child { box-shadow: inset 3px 0 0 var(--cly-neg-vm); }

/* ---- cly_buscador: ações por linha (imprimir/abrir) ---- */
.cly-bsc-acoes-td { white-space: nowrap; }
.cly-bsc-acao { width: 30px; height: 30px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-muted); border-radius: 7px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; margin-right: 4px; }
.cly-bsc-acao:hover { border-color: var(--cly-neg-az); color: var(--cly-neg-az); }
.cly-bsc-acao .material-icons { font-size: 16px; }

/* ---- cly_buscador: legenda (rodapé informativo) ---- */
.cly-bsc-legenda { display: flex; align-items: flex-start; gap: 8px; padding: 9px 16px; border-top: 1px solid var(--cly-border); font-size: 11.5px; line-height: 1.45; color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }
.cly-bsc-legenda.cor-success { color: var(--cly-neg-vd); background: var(--cly-neg-vd-bg); }
.cly-bsc-legenda.cor-warning { color: var(--cly-neg-lr); background: var(--cly-neg-lr-bg); }
.cly-bsc-legenda .material-icons { font-size: 15px; flex: 0 0 auto; margin-top: 1px; }

/* ---- cly_buscador: layout em card (mobile, opt-in via meta.card) ---- */
.cly-bsc-cards { padding: 10px 12px; }
.cly-bsc-csec { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; font-weight: 500; color: var(--cly-text-muted); padding: 8px 2px 7px; }
.cly-bsc-csec.destaque { color: var(--cly-neg-az); }
.cly-bsc-csec .material-icons { font-size: 13px; vertical-align: -2px; margin-right: 3px; }
.cly-bsc-card { border: 1px solid var(--cly-border); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; cursor: pointer; background: var(--cly-bg); }
.cly-bsc-card.sel { border-color: var(--cly-neg-az); background: var(--cly-neg-az-bg); }
.cly-bsc-card.corlinha { border-left: 3px solid var(--cly-neg-az); border-radius: 0 10px 10px 0; }
.cly-bsc-card.corlinha.cor-success { border-left-color: var(--cly-neg-vd); }
.cly-bsc-card.corlinha.cor-warning { border-left-color: var(--cly-neg-lr); }
.cly-bsc-card.corlinha.cor-danger { border-left-color: var(--cly-neg-vm); }
.cly-bsc-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.cly-bsc-card-main { min-width: 0; }
.cly-bsc-card-tit { font-size: 13.5px; font-weight: 500; color: var(--cly-text-main); }
.cly-bsc-card-det { font-size: 11px; color: var(--cly-text-muted); margin-top: 1px; }
.cly-bsc-card-val { text-align: right; flex: 0 0 auto; }
.cly-bsc-card-val span { display: block; font-size: 9.5px; color: var(--cly-text-muted); }
.cly-bsc-card-val b { font-size: 14px; font-weight: 500; color: var(--cly-text-main); }
.cly-bsc-card-acoes { display: flex; justify-content: flex-end; gap: 6px; margin-top: 9px; }

/* ============================================================
 * cly.datepicker — seletor de data (dropdown flutuante, tema-aware)
 * ============================================================ */
.cly-dp {
    position: absolute; z-index: 2147483000; width: 320px;
    background: var(--cly-surface); border: 1px solid var(--cly-border);
    border-radius: 12px; padding: 13px; box-shadow: 0 8px 28px rgba(0, 0, 0, .22);
    font-size: 13px; color: var(--cly-text-main);
}
.cly-dp-chips { display: flex; gap: 5px; margin-bottom: 11px; }
.cly-dp-chip { flex: 1; min-width: 0; text-align: center; padding: 7px 1px; font-size: 10.5px; border: 1px solid var(--cly-border); border-radius: 8px; color: var(--cly-text-muted); cursor: pointer; white-space: nowrap; }
.cly-dp-chip:hover { border-color: #1976d2; color: #1976d2; }
.cly-dp-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.cly-dp-mes { font-size: 14px; font-weight: 600; color: var(--cly-text-main); }
.cly-dp-prev, .cly-dp-next { width: 30px; height: 30px; border: 1px solid var(--cly-border); background: transparent; border-radius: 7px; color: var(--cly-text-muted); cursor: pointer; font-size: 18px; line-height: 1; }
.cly-dp-prev:hover, .cly-dp-next:hover { border-color: #1976d2; color: #1976d2; }
.cly-dp-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; margin-bottom: 2px; }
.cly-dp-dow span { text-align: center; font-size: 11px; color: var(--cly-text-muted); padding: 3px 0; }
.cly-dp-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.cly-dp-empty { height: 34px; }
.cly-dp-day { height: 34px; border: 0; background: transparent; border-radius: 8px; font-size: 13px; color: var(--cly-text-main); cursor: pointer; }
.cly-dp-day:hover { background: rgba(25, 118, 210, .12); }
.cly-dp-today { border: 1px solid #1976d2; }
.cly-dp-sel { background: #1976d2; color: #fff; font-weight: 600; }
.cly-dp-sel:hover { background: #1565c0; }
.cly-dp-foot { display: flex; align-items: center; gap: 7px; margin-top: 11px; padding-top: 10px; border-top: 1px solid var(--cly-border); font-size: 12.5px; color: var(--cly-text-muted); }
.cly-dp-foot .material-icons { font-size: 17px; color: #43a047; }
body.app_theme_dark .cly-dp-day:hover { background: rgba(100, 181, 246, .18); }
body.app_theme_dark .cly-dp-sel { background: #1e88e5; }
body.app_theme_dark .cly-dp-sel:hover { background: #1976d2; }
body.app_theme_dark .cly-dp-today { border-color: #64b5f6; }
body.app_theme_dark .cly-dp-chip:hover,
body.app_theme_dark .cly-dp-prev:hover,
body.app_theme_dark .cly-dp-next:hover { border-color: #64b5f6; color: #64b5f6; }

/* =========================================================================
   Estoque por Centro de Custo (departamento) — cly_produto / cly_banners
   Banner NA TELA = tons do tema do sistema (não --cly-*).
   Modais = --cly-* (overlay). material-icons com cor no próprio ícone.
   ========================================================================= */

/* ---- Banner na tela (cadastro) — recolhível, com estados ---- */
.fd-banner-cc { background: #fff; border: 1px solid #e2e5e9; border-left: 3px solid #009688; border-radius: 8px; overflow: hidden; margin: 6px 0; font-size: 14px; }
.fd-banner-cc.is-warn { border-color: #f0c987; border-left-color: #f39c12; }
.fd-banner-cc.is-empty { border-left-color: #b4b9c0; }
.fd-banner-cc-head { display: flex; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; }
.fd-banner-cc-ic { display: flex; flex-shrink: 0; }
.fd-banner-cc-ic .material-icons { font-size: 22px; color: #009688; }
.fd-banner-cc.is-warn .fd-banner-cc-ic .material-icons { color: #c9870f; }
.fd-banner-cc.is-empty .fd-banner-cc-ic .material-icons { color: #9aa0a7; }
.fd-banner-cc-tx { flex: 1; min-width: 0; }
.fd-banner-cc-tit { display: block; color: #2c3338; }
.fd-banner-cc-sub { display: block; font-size: 12px; color: #7a818a; margin-top: 2px; }
.fd-banner-cc-help { width: 24px; height: 24px; border-radius: 50%; background: #e3f2fd; color: #1862ab; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; cursor: pointer; }
.fd-banner-cc-help .material-icons { font-size: 14px; color: #1862ab; }
.fd-banner-cc-chev { flex-shrink: 0; }
.fd-banner-cc-chev .material-icons { font-size: 20px; color: #8a9098; }
.fd-banner-cc-body { border-top: 1px solid #f1f2f4; padding: 8px 14px 12px; }
.fd-banner-cc-body.cc-collapsed { display: none; }
.fd-banner-cc-info { display: flex; gap: 9px; background: #e3f2fd; border: 1px solid #bbdcf5; border-radius: 8px; padding: 10px 13px; margin-bottom: 10px; font-size: 12.5px; color: #194e7e; line-height: 1.55; }
.fd-banner-cc-info .material-icons { font-size: 17px; color: #1862ab; flex-shrink: 0; }
.fd-banner-cc-info.cc-hidden { display: none; }
.fd-banner-cc-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-top: 1px solid #f1f2f4; }
.fd-banner-cc-row.cc-first { border-top: 0; }
.fd-banner-cc-row-name { color: #2c3338; }
.fd-banner-cc-row-val { display: flex; align-items: center; gap: 12px; font-weight: 500; color: #2c3338; }
.fd-banner-cc-row-edit { cursor: pointer; }
.fd-banner-cc-row-edit .material-icons { font-size: 17px; color: #9aa0a7; }
.fd-banner-cc-reco { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding-top: 11px; border-top: 1px solid #f1f2f4; }
.fd-banner-cc-reco-tx { font-size: 13px; color: #2e7d32; }
.fd-banner-cc.is-warn .fd-banner-cc-reco-tx { color: #b9770e; }
.fd-banner-cc-reco-tx .material-icons { font-size: 15px; vertical-align: -3px; margin-right: 4px; color: #2e7d32; }
.fd-banner-cc.is-warn .fd-banner-cc-reco-tx .material-icons { color: #c9870f; }
.fd-banner-cc-foot { display: flex; gap: 8px; }
.fd-banner-cc-empty-tx { font-style: italic; color: #7a818a; padding: 8px 0 4px; font-size: 13px; }
body.app_theme_dark .fd-banner-cc { background: #424242; border-color: #565656; }
body.app_theme_dark .fd-banner-cc.is-warn { border-color: #7a6322; border-left-color: #f39c12; }
body.app_theme_dark .fd-banner-cc-body { border-top-color: #4e4e4e; }
body.app_theme_dark .fd-banner-cc-tit { color: #ececec; }
body.app_theme_dark .fd-banner-cc-sub { color: #9a9a9a; }
body.app_theme_dark .fd-banner-cc-row { border-top-color: #4e4e4e; }
body.app_theme_dark .fd-banner-cc-row-name,
body.app_theme_dark .fd-banner-cc-row-val { color: #ececec; }
body.app_theme_dark .fd-banner-cc-reco { border-top-color: #4e4e4e; }
body.app_theme_dark .fd-banner-cc-reco-tx { color: #a6cf6a; }
body.app_theme_dark .fd-banner-cc.is-warn .fd-banner-cc-reco-tx { color: #fac775; }
body.app_theme_dark .fd-banner-cc-info { background: #12304f; border-color: #1c4a78; color: #bcd9f5; }
body.app_theme_dark .fd-banner-cc-info .material-icons { color: #85b7eb; }
body.app_theme_dark .fd-banner-cc-help { background: #12304f; }
body.app_theme_dark .fd-banner-cc-help .material-icons { color: #85b7eb; }

/* ---- Banner compacto na venda (déficit) ---- */
.fd-banner-cc-vd { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; background: rgba(0,150,136,.10); border: 1px solid rgba(0,150,136,.30); border-left: 3px solid #009688; border-radius: 7px; padding: 8px 12px; margin: 6px 0; }
.fd-banner-cc-vd-tx { font-size: 12px; color: #00695c; }
.fd-banner-cc-vd-tx .material-icons { font-size: 15px; vertical-align: -3px; margin-right: 5px; color: #00897b; }
.fd-banner-cc-vd-tx .cc-muted { opacity: .8; }
body.app_theme_dark .fd-banner-cc-vd-tx { color: #7fd4cb; }

/* ---- Modal de transferência / ajuste (overlay → --cly-*) ---- */
.cly-pcc-ov { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 16px; }
.cly-pcc-box { width: 560px; max-width: 100%; max-height: 92vh; overflow: auto; background: var(--cly-bg); color: var(--cly-text-main); border: 1px solid var(--cly-border); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,.4); }
.cly-pcc-box.cly-pcc-sm { width: 440px; }
.cly-pcc-hd { display: flex; align-items: center; justify-content: space-between; gap: 9px; padding: 15px 20px; border-bottom: 1px solid var(--cly-border); }
.cly-pcc-hd-tit { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 500; color: var(--cly-text-main); }
.cly-pcc-hd-tit .material-icons { font-size: 20px; color: #4db6ac; }
.cly-pcc-hd-actions { display: flex; align-items: center; gap: 10px; }
.cly-pcc-help-ic { width: 26px; height: 26px; border-radius: 50%; background: rgba(53,138,221,.18); color: #85b7eb; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.cly-pcc-help-ic .material-icons { font-size: 15px; color: #85b7eb; }
.cly-pcc-body { padding: 16px 20px; }
.cly-pcc-info { display: flex; gap: 9px; background: rgba(53,138,221,.08); border: 1px solid rgba(53,138,221,.18); border-radius: 8px; padding: 8px 12px; margin-bottom: 14px; font-size: 12px; color: #bcd9f5; line-height: 1.5; }
.cly-pcc-info .material-icons { font-size: 18px; color: #85b7eb; flex-shrink: 0; }
.cly-pcc-info.cc-hidden { display: none; }
.cly-pcc-ctx { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--cly-text-muted); margin-bottom: 14px; }
.cly-pcc-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 16px; }
.cly-pcc-metric { background: var(--cly-surface); border-radius: 8px; padding: 9px 12px; }
.cly-pcc-metric-lb { font-size: 11px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.cly-pcc-metric-vl { font-size: 17px; font-weight: 500; color: var(--cly-text-main); }
.cly-pcc-metric.is-warn { background: rgba(239,159,39,.16); }
.cly-pcc-metric.is-warn .cly-pcc-metric-lb,
.cly-pcc-metric.is-warn .cly-pcc-metric-vl { color: #fac775; }
.cly-pcc-hint { font-size: 13px; color: var(--cly-text-muted); margin: 0 0 8px; }
.cly-pcc-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cly-pcc-table th { text-align: left; font-weight: 500; font-size: 11px; text-transform: uppercase; color: var(--cly-text-muted); padding: 6px 0; }
.cly-pcc-table td { padding: 10px 0; border-top: 1px solid var(--cly-border); color: var(--cly-text-main); }
.cly-pcc-table th.cly-pcc-r, .cly-pcc-table td.cly-pcc-r { text-align: right; }
.cly-pcc-q { width: 118px; text-align: right; height: 34px; padding: 0 10px; border-radius: 7px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); }
.cly-pcc-q.cc-err { border-color: #e24b4a; }
.cly-pcc-sel { width: 100%; height: 36px; border-radius: 7px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); padding: 0 10px; }
.cly-pcc-resumo { display: flex; align-items: center; justify-content: space-between; margin-top: 14px; padding: 9px 13px; border-radius: 8px; font-size: 13px; background: rgba(239,159,39,.14); color: #fac775; }
.cly-pcc-resumo.is-ok { background: rgba(99,153,34,.16); color: #a6cf6a; }
.cly-pcc-resumo .material-icons { font-size: 15px; vertical-align: -2px; margin-right: 5px; color: inherit; }
.cly-pcc-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 13px 20px; border-top: 1px solid var(--cly-border); }
.cly-pcc-field-lb { font-size: 12px; color: var(--cly-text-muted); }
.cly-pcc-aj { width: 100%; height: 38px; margin-top: 6px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); text-align: right; }
@media (max-width: 600px) { .cly-pcc-metrics { grid-template-columns: 1fr; } }

/* ---- Histórico (aba CC) — métricas + barras ---- */
.fhist-cc-metrics { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.fhist-cc-metric { flex: 1; min-width: 120px; border: 1px solid var(--cly-border); border-radius: 8px; padding: 9px 12px; }
.fhist-cc-metric-lb { font-size: 11px; opacity: .7; text-transform: uppercase; letter-spacing: .4px; }
.fhist-cc-metric-vl { font-size: 18px; font-weight: 500; }
.fhist-cc-metric.is-ok { border-color: rgba(46,125,50,.4); }
.fhist-cc-metric.is-warn { border-color: rgba(211,151,15,.4); }
.fhist-cc-line { padding: 9px 0; border-top: 1px solid var(--cly-border); }
.fhist-cc-line-top { display: flex; justify-content: space-between; align-items: center; }
.fhist-cc-line-pct { opacity: .6; font-weight: 400; font-size: 12px; }
.fhist-cc-bar { height: 5px; border-radius: 3px; background: rgba(127,127,127,.22); margin-top: 6px; overflow: hidden; }
.fhist-cc-bar-fill { height: 100%; background: #009688; }
.fhist-cc-empty-ic { width: 52px; height: 52px; border-radius: 50%; background: rgba(127,127,127,.15); display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; }
.fhist-cc-empty-ic .material-icons { font-size: 25px; opacity: .55; }
.fhist-cc-empty-tit { font-size: 14px; font-weight: 500; margin-bottom: 6px; }

/* ---- Ajuste multi-departamento (modal largo) ---- */
.cly-pcc-box.cly-pcc-wide { width: 680px; }
.cly-pcc-metric.is-ok { background: rgba(99,153,34,.16); }
.cly-pcc-metric.is-ok .cly-pcc-metric-lb, .cly-pcc-metric.is-ok .cly-pcc-metric-vl { color: #639922; }
body.app_theme_dark .cly-pcc-metric.is-ok .cly-pcc-metric-lb, body.app_theme_dark .cly-pcc-metric.is-ok .cly-pcc-metric-vl { color: #a6cf6a; }
.cly-pcc-adj-head, .cly-pcc-adj-row { display: grid; grid-template-columns: minmax(0,1fr) 92px 230px 120px; column-gap: 18px; align-items: center; }
.cly-pcc-adj-head > span, .cly-pcc-adj-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cly-pcc-adj-head { color: var(--cly-text-muted); font-size: 11px; text-transform: uppercase; letter-spacing: .4px; padding: 4px 0 8px; }
.cly-pcc-adj-row { border-top: 1px solid var(--cly-border); padding: 9px 0; font-size: 14px; color: var(--cly-text-main); }
.cly-pcc-adj-row.cc-focus { background: rgba(0,150,136,.06); border-radius: 6px; }
.cly-pcc-adj-saldo { color: var(--cly-text-main); }
.cly-pcc-adj-qtd { display: flex; align-items: center; gap: 10px; justify-content: flex-end; }
.cly-pcc-adj-input { width: 110px; }
.cly-pcc-completar { font-size: 11px; background: transparent; border: 1px solid rgba(0,150,136,.5); color: #00897b; padding: 6px 11px; border-radius: 6px; white-space: nowrap; cursor: pointer; }
.cly-pcc-completar:hover { background: rgba(0,150,136,.1); }
body.app_theme_dark .cly-pcc-completar { color: #7fd4cb; border-color: rgba(77,182,172,.5); }
.cly-pcc-mov { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; padding: 3px 9px; border-radius: 6px; white-space: nowrap; }
.cly-pcc-mov .material-icons { font-size: 13px; }
.cly-pcc-mov.is-in { background: rgba(0,150,136,.14); color: #00695c; }
.cly-pcc-mov.is-out { background: rgba(239,159,39,.16); color: #b9770e; }
.cly-pcc-mov.is-none { background: rgba(127,127,127,.12); color: var(--cly-text-muted); }
body.app_theme_dark .cly-pcc-mov.is-in { color: #7fd4cb; }
body.app_theme_dark .cly-pcc-mov.is-out { color: #fac775; }
.cly-pcc-add { margin-top: 14px; border: 1px solid rgba(0,150,136,.3); border-radius: 9px; padding: 11px 13px; background: rgba(0,150,136,.05); }
.cly-pcc-add-tit { font-size: 12px; color: #00897b; margin-bottom: 8px; }
.cly-pcc-add-tit .material-icons { font-size: 14px; vertical-align: -2px; }
body.app_theme_dark .cly-pcc-add-tit { color: #7fd4cb; }
.cly-pcc-conf { margin-top: 14px; border-radius: 8px; padding: 11px 13px; border: 1px solid; }
.cly-pcc-conf.is-ok { background: rgba(99,153,34,.10); border-color: rgba(99,153,34,.3); }
.cly-pcc-conf.is-warn { background: rgba(239,159,39,.10); border-color: rgba(239,159,39,.35); }
.cly-pcc-conf-tit { font-size: 12px; font-weight: 500; margin-bottom: 6px; }
.cly-pcc-conf.is-ok .cly-pcc-conf-tit { color: #3b6d11; }
.cly-pcc-conf.is-warn .cly-pcc-conf-tit { color: #854f0b; }
body.app_theme_dark .cly-pcc-conf.is-ok .cly-pcc-conf-tit { color: #a6cf6a; }
body.app_theme_dark .cly-pcc-conf.is-warn .cly-pcc-conf-tit { color: #fac775; }
.cly-pcc-conf-tit .material-icons { font-size: 15px; vertical-align: -2px; margin-right: 4px; }
.cly-pcc-conf-body { font-size: 12.5px; color: var(--cly-text-main); line-height: 1.7; }
.cly-pcc-conf-body .cc-mv-in { color: #00695c; }
.cly-pcc-conf-body .cc-mv-out { color: #b9770e; }
body.app_theme_dark .cly-pcc-conf-body .cc-mv-in { color: #7fd4cb; }
body.app_theme_dark .cly-pcc-conf-body .cc-mv-out { color: #fac775; }
.cc-conf-ok { color: #3b6d11; } .cc-conf-ok .material-icons { font-size: 13px; vertical-align: -2px; }
.cc-conf-warn { color: #854f0b; } .cc-conf-warn .material-icons { font-size: 13px; vertical-align: -2px; }
body.app_theme_dark .cc-conf-ok { color: #a6cf6a; }
body.app_theme_dark .cc-conf-warn { color: #fac775; }
@media (max-width: 600px) {
    .cly-pcc-adj-head { display: none; }
    .cly-pcc-adj-row { grid-template-columns: 1fr; row-gap: 8px; border: 1px solid var(--cly-border); border-radius: 9px; padding: 10px 12px; margin-top: 9px; }
    .cly-pcc-adj-saldo { text-align: left; font-size: 12px; color: var(--cly-text-muted); }
    .cly-pcc-adj-saldo::before { content: 'Saldo atual: '; }
    .cly-pcc-adj-qtd { justify-content: space-between; }
    .cly-pcc-adj-input { flex: 1; }
    .cly-pcc-adj-mov { text-align: left; }
}

/* ---- Banner PREMIUM (cadastro): status + cards + donut + legenda ---- */
.fd-banner-cc-status { font-size: 12px; padding: 3px 11px; border-radius: 20px; font-weight: 500; white-space: nowrap; flex-shrink: 0; }
.fd-banner-cc-status-ok { background: #e6f5f3; color: #00695c; }
.fd-banner-cc-status-div, .fd-banner-cc-status-neg { background: #fff4e5; color: #9a6a0b; }
.fd-banner-cc-status-vazio { background: rgba(127,127,127,.14); color: #5b6470; }
body.app_theme_dark .fd-banner-cc-status-ok { background: rgba(38,166,154,.22); color: #5fdccf; }
body.app_theme_dark .fd-banner-cc-status-div, body.app_theme_dark .fd-banner-cc-status-neg { background: rgba(240,163,42,.22); color: #f7c067; }
body.app_theme_dark .fd-banner-cc-status-vazio { background: rgba(255,255,255,.1); color: #bdbdbd; }

.fd-banner-cc-print-wrap { position: relative; flex-shrink: 0; }
.fd-banner-cc-print-menu { position: absolute; right: 0; top: calc(100% + 4px); min-width: 210px; max-height: 240px; overflow: auto; background: #fff; border: 1px solid #e2e5e9; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,.18); z-index: 50; padding: 4px; }
.fd-banner-cc-print-menu.cc-hidden { display: none; }
.fd-banner-cc-print-item { display: block; padding: 8px 10px; font-size: 13px; color: #2c3338; border-radius: 6px; cursor: pointer; }
.fd-banner-cc-print-item:hover { background: #eef6f5; }
body.app_theme_dark .fd-banner-cc-print-menu { background: #383838; border-color: #565656; }
body.app_theme_dark .fd-banner-cc-print-item { color: #e8e8e8; }
body.app_theme_dark .fd-banner-cc-print-item:hover { background: #4a4a4a; }

.fd-cc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.fd-cc-card { background: #f5f6f8; border-radius: 9px; padding: 9px 12px; display: flex; flex-direction: column; }
.fd-cc-card-lb { font-size: 11px; color: #7a818a; text-transform: uppercase; letter-spacing: .4px; }
.fd-cc-card-vl { font-size: 18px; font-weight: 500; color: #2c3338; }
.fd-cc-card.is-ok .fd-cc-card-vl { color: #2e7d32; }
.fd-cc-card.is-ok .fd-cc-card-aux { color: #2e7d32; }
.fd-cc-card.is-warn { background: #fff4e5; }
.fd-cc-card.is-warn .fd-cc-card-lb, .fd-cc-card.is-warn .fd-cc-card-vl { color: #b9770e; }
.fd-cc-card-aux { font-size: 11px; color: #9a6a0b; margin-top: 2px; }
body.app_theme_dark .fd-cc-card { background: #454545; }
body.app_theme_dark .fd-cc-card-lb { color: #a8a8a8; }
body.app_theme_dark .fd-cc-card-vl { color: #f3f3f3; }
body.app_theme_dark .fd-cc-card.is-ok .fd-cc-card-vl { color: #a6cf6a; }
body.app_theme_dark .fd-cc-card.is-ok .fd-cc-card-aux { color: #a6cf6a; }
body.app_theme_dark .fd-cc-card.is-warn { background: rgba(240,163,42,.2); }
body.app_theme_dark .fd-cc-card.is-warn .fd-cc-card-lb, body.app_theme_dark .fd-cc-card.is-warn .fd-cc-card-vl { color: #f7c067; }
body.app_theme_dark .fd-cc-card-aux { color: #f7c067; }

.fd-cc-neg { display: flex; align-items: center; gap: 8px; background: rgba(239,159,39,.1); border: 1px solid rgba(239,159,39,.3); border-radius: 8px; padding: 9px 12px; margin-bottom: 12px; font-size: 12.5px; color: #9a6a0b; }
.fd-cc-neg .material-icons { font-size: 16px; color: #c9870f; }
body.app_theme_dark .fd-cc-neg { color: #f7c067; }
body.app_theme_dark .fd-cc-neg .material-icons { color: #f7c067; }

.fd-cc-graf { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.fd-cc-donut { position: relative; width: 150px; height: 150px; border-radius: 50%; flex-shrink: 0; }
.fd-cc-donut-hole { position: absolute; inset: 26px; border-radius: 50%; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.fd-cc-donut-vl { font-size: 17px; font-weight: 500; color: #2c3338; }
.fd-cc-donut-lb { font-size: 11px; color: #7a818a; }
body.app_theme_dark .fd-cc-donut-hole { background: #424242; }
body.app_theme_dark .fd-cc-donut-vl { color: #f3f3f3; }
body.app_theme_dark .fd-cc-donut-lb { color: #a8a8a8; }

.fd-cc-legend { flex: 1; min-width: 240px; max-height: 176px; overflow: auto; }
.fd-cc-leg-row { display: grid; grid-template-columns: 14px minmax(0,1fr) auto 48px auto; align-items: center; gap: 10px; padding: 8px 2px; border-bottom: 1px solid #f1f2f4; }
.fd-cc-leg-row:last-child { border-bottom: 0; }
.fd-cc-leg-dot { width: 11px; height: 11px; border-radius: 3px; }
.fd-cc-leg-nome { font-size: 13px; color: #2c3338; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-cc-leg-qtd { font-size: 14px; font-weight: 500; color: #2c3338; text-align: right; }
.fd-cc-leg-qtd.is-neg { color: #d8412f; }
.fd-cc-leg-pct { font-size: 12px; color: #9aa0a7; text-align: right; }
.fd-cc-leg-acoes { display: flex; gap: 2px; }
.fd-cc-leg-acoes .material-icons { font-size: 17px; color: #9aa0a7; cursor: pointer; padding: 4px; border-radius: 6px; transition: background .15s ease, color .15s ease; }
.fd-cc-leg-acoes .material-icons:hover { color: #009688; background: rgba(0,150,136,.1); }
.fd-cc-vertodos { font-size: 12px; color: #009688; cursor: pointer; }
body.app_theme_dark .fd-cc-leg-row { border-bottom-color: #4e4e4e; }
body.app_theme_dark .fd-cc-leg-nome, body.app_theme_dark .fd-cc-leg-qtd { color: #e8e8e8; }
body.app_theme_dark .fd-cc-leg-qtd.is-neg { color: #f2a0a0; }
body.app_theme_dark .fd-cc-leg-pct { color: #a8a8a8; }
body.app_theme_dark .fd-cc-leg-acoes .material-icons { color: #8a8a8a; }
body.app_theme_dark .fd-cc-leg-acoes .material-icons:hover { color: #4db6ac; background: rgba(77,182,172,.15); }
body.app_theme_dark .fd-cc-vertodos { color: #4db6ac; }

@media (max-width: 760px) {
    .fd-cc-cards { grid-template-columns: 1fr 1fr; }
    .fd-cc-graf { justify-content: center; }
    .fd-cc-donut { margin: 0 auto; }
    .fd-cc-legend { flex: 1 1 100%; max-height: none; }
    .fd-banner-cc-print-menu { right: auto; left: 0; }
}
@media (max-width: 480px) {
    .fd-cc-cards { grid-template-columns: 1fr; }
}

/* ============================================================
   FDI — Detalhes do Produto (Product Inspector) — shell premium
   Estrutura: overlay > box > [header | top(identidade/KPIs/comercial/insights) | main(nav | content)]
   Usa tokens --cly-* (tema) + acentos --fdi-* (com override no dark).
   ============================================================ */
.fdi-overlay {
    position: fixed; inset: 0; z-index: 9950; display: flex; align-items: center; justify-content: center; padding: 22px;
    background: rgba(9,30,66,.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    opacity: 0; transition: opacity .18s ease;
    --fdi-teal: #00897b; --fdi-teal-soft: rgba(0,137,123,.12);
    --fdi-amb: #b5790c; --fdi-amb-soft: rgba(240,163,42,.16);
    --fdi-ok: #2e9e4f; --fdi-ok-soft: rgba(46,158,79,.13); --fdi-ok-bg: #e6f4ea;
    --fdi-warn: #b06f0c; --fdi-warn-bg: #fdf0dd;
    --fdi-dang: #d8412f; --fdi-dang-bg: #fdeceb;
    --fdi-nav-tx: #3b4350; --fdi-surf2: #e8ebf0;
}
.fdi-overlay.fdi-open { opacity: 1; }
body.app_theme_dark .fdi-overlay {
    background: rgba(0,0,0,.62);
    --fdi-teal: #2bbbad; --fdi-teal-soft: rgba(38,166,154,.18);
    --fdi-amb: #f0b65a; --fdi-amb-soft: rgba(240,163,42,.18);
    --fdi-ok: #7cc47f; --fdi-ok-soft: rgba(124,196,127,.16); --fdi-ok-bg: rgba(99,153,34,.20);
    --fdi-warn: #f4bf6a; --fdi-warn-bg: rgba(240,163,42,.18);
    --fdi-dang: #f2a0a0; --fdi-dang-bg: rgba(216,65,47,.18);
    --fdi-nav-tx: #cfcfcf; --fdi-surf2: #3a3a3a;
}
.fdi-box {
    width: min(1240px, 92vw); height: min(840px, 90vh);
    background: var(--cly-bg); color: var(--cly-text-main);
    border: 1px solid var(--cly-border); border-radius: 14px;
    display: flex; flex-direction: column; overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,.34);
    transform: translateY(14px) scale(.99); transition: transform .18s ease;
}
.fdi-overlay.fdi-open .fdi-box { transform: none; }

.fdi-hd { display: flex; align-items: center; justify-content: space-between; padding: 13px 18px; border-bottom: 1px solid var(--cly-border); flex-shrink: 0; }
.fdi-hd-title { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 14.5px; }
.fdi-hd-title .material-icons { font-size: 20px; color: var(--fdi-teal); }
.fdi-hd-actions { display: flex; align-items: center; gap: 7px; }
.fdi-hbtn { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; height: 32px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); cursor: pointer; }
.fdi-hbtn:hover { border-color: var(--cly-text-muted); }
.fdi-hbtn .material-icons { font-size: 16px; }
.fdi-hbtn-ic { padding: 0; width: 32px; justify-content: center; color: var(--cly-text-muted); }

.fdi-top { padding: 14px 18px 0; flex-shrink: 0; }
.fdi-id { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.fdi-name { margin: 0; font-weight: 500; font-size: 18px; }
.fdi-id-meta { font-size: 13px; color: var(--cly-text-muted); }
.fdi-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px; }
.fdi-badge { display: inline-flex; align-items: center; gap: 4px; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 7px; padding: 2px 9px; color: var(--cly-text-muted); font-size: 11.5px; }
.fdi-badge .material-icons { font-size: 13px; }
.fdi-badge-on { background: var(--fdi-teal-soft); border-color: transparent; color: var(--fdi-teal); }
.fdi-badge-danger { background: var(--fdi-dang-bg); border-color: transparent; color: var(--fdi-dang); }

.fdi-stats { display: flex; gap: 14px; margin-top: 13px; align-items: stretch; flex-wrap: wrap; }
.fdi-kpis { display: grid; grid-template-columns: repeat(3, minmax(130px, 1fr)); gap: 10px; flex: 1; min-width: 400px; }
.fdi-kpi { display: flex; align-items: center; gap: 11px; background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 12px; padding: 11px 14px; }
.fdi-kpi-ic { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.fdi-kpi-ic .material-icons { font-size: 19px; }
.fdi-kpi-t { display: flex; flex-direction: column; line-height: 1.15; }
.fdi-kpi-l { font-size: 10.5px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.fdi-kpi-v { font-size: 23px; font-weight: 500; }
.fdi-kpi-atual .fdi-kpi-ic { background: var(--fdi-teal-soft); color: var(--fdi-teal); }
.fdi-kpi-res .fdi-kpi-ic { background: var(--fdi-amb-soft); color: var(--fdi-amb); }
.fdi-kpi-disp { background: var(--fdi-ok-bg); border-color: transparent; }
.fdi-kpi-disp .fdi-kpi-ic { background: var(--fdi-ok-soft); color: var(--fdi-ok); }
.fdi-kpi-disp .fdi-kpi-v { color: var(--fdi-ok); }

.fdi-comm { display: flex; align-items: center; gap: 16px; padding: 0 16px; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 12px; }
.fdi-comm-d { width: 1px; height: 30px; background: var(--cly-border); }
.fdi-comm-i { display: flex; flex-direction: column; justify-content: center; }
.fdi-comm-l { font-size: 10.5px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .4px; }
.fdi-comm-v { font-size: 15px; font-weight: 500; }
.fdi-reveal { cursor: pointer; position: relative; padding-left: 19px; }
.fdi-reveal .fdi-lock { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--cly-text-muted); }
.fdi-reveal .fdi-rv { letter-spacing: 2px; color: var(--cly-text-muted); }
.fdi-reveal.fdi-shown .fdi-rv { letter-spacing: 0; color: var(--fdi-teal); }
.fdi-reveal.fdi-shown .fdi-lock { color: var(--fdi-teal); }
.fdi-reveal-mini { padding-left: 0; cursor: pointer; }
.fdi-reveal-mini .fdi-rv { border-bottom: 1px dotted var(--cly-border); letter-spacing: 1px; }
.fdi-reveal-mini.fdi-shown .fdi-rv { border-bottom-color: transparent; letter-spacing: 0; font-weight: 500; }

.fdi-ins { display: flex; flex-wrap: wrap; gap: 8px; margin: 13px 0 14px; }
.fdi-ins-i { display: flex; align-items: center; gap: 7px; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 9px; padding: 7px 11px; font-size: 12px; color: var(--cly-text-main); cursor: pointer; }
.fdi-ins-i:hover { border-color: var(--cly-text-muted); }
.fdi-ins-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.fdi-ins-l { color: var(--cly-text-muted); }
.fdi-ins-i b { font-weight: 500; }
.fdi-ins-warn { background: var(--fdi-warn-bg); border-color: transparent; }
.fdi-ins-warn b { color: var(--fdi-warn); }

.fdi-main { flex: 1; display: flex; min-height: 0; border-top: 1px solid var(--cly-border); margin-top: 14px; }
.fdi-nav { width: 222px; flex-shrink: 0; border-right: 1px solid var(--cly-border); padding: 13px 11px; display: flex; flex-direction: column; gap: 4px; }
.fdi-nav-i { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: transparent; border: 0; border-radius: 9px; padding: 11px 12px; color: var(--fdi-nav-tx); font-size: 13.5px; cursor: pointer; font-family: inherit; }
.fdi-nav-i .material-icons { font-size: 19px; flex-shrink: 0; color: var(--cly-text-muted); }
.fdi-nav-lbl { flex: 1; white-space: nowrap; }
.fdi-nav-i:hover { background: var(--cly-surface); color: var(--cly-text-main); }
.fdi-nav-i:hover .material-icons { color: var(--cly-text-main); }
.fdi-nav-i.fdi-on { background: var(--fdi-teal-soft); color: var(--fdi-teal); font-weight: 500; }
.fdi-nav-i.fdi-on .material-icons { color: var(--fdi-teal); }
.fdi-nav-c { background: var(--fdi-surf2); border-radius: 20px; padding: 1px 8px; font-size: 11px; color: var(--cly-text-muted); }
.fdi-nav-i.fdi-on .fdi-nav-c { background: var(--fdi-teal-soft); color: var(--fdi-teal); }
.fdi-nav-foot { margin-top: auto; padding: 10px 11px; font-size: 11px; color: var(--cly-text-muted); line-height: 1.5; border-top: 1px solid var(--cly-border); }

.fdi-content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.fdi-panel { flex: 1; min-height: 0; }
.fdi-panel.fdi-scroll { overflow-y: auto; padding: 15px 20px; }
.fdi-panel.fdi-col { display: flex; flex-direction: column; }

.fdi-filt { padding: 11px 16px; border-bottom: 1px solid var(--cly-border); display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; }
.fdi-filt-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fdi-chip { font-size: 12px; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); cursor: pointer; font-family: inherit; }
.fdi-chip:hover { border-color: var(--cly-text-muted); }
.fdi-chip.fdi-on { background: var(--fdi-teal-soft); border-color: transparent; color: var(--fdi-teal); font-weight: 500; }
.fdi-sel { height: 28px; border: 1px solid var(--cly-border); border-radius: 7px; background: var(--cly-bg); color: var(--cly-text-main); font-size: 12px; padding: 0 4px; font-family: inherit; }
.fdi-search { display: flex; align-items: center; gap: 7px; border: 1px solid var(--cly-border); border-radius: 8px; padding: 0 10px; height: 32px; background: var(--cly-bg); min-width: 180px; flex: 1; }
.fdi-search .material-icons { font-size: 18px; color: var(--cly-text-muted); }
.fdi-search input { border: 0; background: transparent; outline: none; color: var(--cly-text-main); font-size: 12.5px; flex: 1; font-family: inherit; }
.fdi-date { width: 122px; height: 28px; border: 1px solid var(--cly-border); border-radius: 7px; background: var(--cly-bg); color: var(--cly-text-main); font-size: 11.5px; padding: 0 7px; font-family: inherit; }
.fdi-muted { font-size: 11.5px; color: var(--cly-text-muted); }
.fdi-search-go { cursor: pointer; }
.fdi-search-go:hover { color: var(--fdi-teal); }
.fdi-search-hint { font-size: 11px; color: var(--cly-text-muted); white-space: nowrap; padding-left: 6px; }
.fdi-search.fdi-counting { border-color: var(--fdi-teal); }
.fdi-period { display: inline-flex; align-items: center; gap: 6px; color: var(--cly-text-muted); }
.fdi-period .material-icons { font-size: 16px; }
.fdi-period .fdi-date { width: 108px; }
.fdi-period-sep { color: var(--cly-text-muted); }
.fdi-filt-err { font-size: 11.5px; color: var(--fdi-dang); font-weight: 500; }
.fdi-date.fdi-invalid { border-color: var(--fdi-dang); }

.fdi-tbody { flex: 1; min-height: 0; overflow-y: auto; padding: 13px 16px; }
.fdi-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.fdi-table thead th { position: sticky; top: 0; background: var(--cly-bg); text-align: left; font-weight: 500; color: var(--cly-text-muted); padding: 9px 8px; border-bottom: 1px solid var(--cly-border); z-index: 1; }
.fdi-table th.fdi-r, .fdi-table td.fdi-r { text-align: right; }
.fdi-table td { padding: 9px 8px; border-bottom: 1px solid var(--cly-border); }
.fdi-table tbody tr:hover { background: var(--cly-surface); }
.fdi-table tr.fdi-row-est { opacity: .66; }
.fdi-chip-link { background: var(--cly-surface); border-radius: 6px; padding: 2px 9px; color: var(--fdi-teal); font-size: 12px; text-decoration: none; }
.fdi-chip-link:hover { text-decoration: underline; }
.fdi-mv-in { color: var(--fdi-ok); font-weight: 500; }
.fdi-mv-out { color: var(--fdi-dang); font-weight: 500; }
.fdi-tag-est { background: var(--cly-surface); color: var(--cly-text-muted); border-radius: 6px; padding: 1px 8px; font-size: 11px; text-decoration: line-through; }

.fdi-pag { display: flex; align-items: center; justify-content: space-between; padding: 9px 16px; border-top: 1px solid var(--cly-border); font-size: 12px; color: var(--cly-text-muted); flex-shrink: 0; }
.fdi-pag b { color: var(--cly-text-main); }
.fdi-pag-btns { display: flex; align-items: center; gap: 6px; }
.fdi-pag-b { width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--cly-border); background: var(--cly-surface); color: var(--cly-text-main); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.fdi-pag-b:disabled { opacity: .45; cursor: default; }
.fdi-pag-b .material-icons { font-size: 16px; }

.fdi-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 240px; height: 100%; padding: 20px; }
.fdi-state-ic { width: 60px; height: 60px; border-radius: 50%; background: var(--cly-surface); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; color: var(--cly-text-muted); }
.fdi-state-ic .material-icons { font-size: 29px; }
.fdi-state-ic.fdi-state-err { color: var(--fdi-dang); }
.fdi-state-t { margin: 0; font-size: 15px; font-weight: 500; }
.fdi-state-s { margin: 6px 0 0; font-size: 13px; color: var(--cly-text-muted); max-width: 340px; line-height: 1.55; }
.fdi-sk { height: 34px; border-radius: 8px; background: var(--cly-surface); margin-bottom: 9px; }
.fdi-spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--cly-border); border-top-color: var(--fdi-teal); border-radius: 50%; animation: fdi-spin .7s linear infinite; vertical-align: -2px; }
@keyframes fdi-spin { to { transform: rotate(360deg); } }

.fdi-cc-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.fdi-cc-card { background: var(--cly-surface); border-radius: 11px; padding: 10px 13px; display: flex; flex-direction: column; gap: 3px; }
.fdi-cc-card-l { font-size: 10.5px; color: var(--cly-text-muted); text-transform: uppercase; letter-spacing: .5px; }
.fdi-cc-card-v { font-size: 19px; font-weight: 500; }
.fdi-cc-card.fdi-warn { background: var(--fdi-warn-bg); }
.fdi-cc-card.fdi-warn .fdi-cc-card-l, .fdi-cc-card.fdi-warn .fdi-cc-card-v { color: var(--fdi-warn); }
.fdi-status { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 500; padding: 4px 12px; border-radius: 20px; }
.fdi-status .material-icons { font-size: 14px; }
.fdi-status-ok { background: var(--fdi-ok-bg); color: var(--fdi-ok); }
.fdi-status-warn { background: var(--fdi-warn-bg); color: var(--fdi-warn); }
.fdi-status-neg { background: var(--fdi-dang-bg); color: var(--fdi-dang); }
.fdi-cc-line { padding: 9px 0; border-bottom: 1px solid var(--cly-border); }
.fdi-cc-line-top { display: flex; justify-content: space-between; font-size: 13px; }
.fdi-cc-neg { color: var(--fdi-dang); font-weight: 500; }
.fdi-cc-pct { color: var(--cly-text-muted); font-weight: 400; font-size: 11.5px; }
.fdi-cc-bar { height: 8px; background: var(--fdi-surf2); border-radius: 5px; overflow: hidden; margin-top: 6px; }
.fdi-cc-bar > i { display: block; height: 100%; border-radius: 5px; }
.fdi-cc-msg { margin-top: 12px; padding: 9px 12px; border-radius: 9px; font-size: 12.5px; }
.fdi-cc-msg .material-icons { font-size: 14px; vertical-align: -2px; }
.fdi-cc-msg.fdi-warn { background: var(--fdi-warn-bg); color: var(--fdi-warn); }
.fdi-cc-msg.fdi-ok { background: var(--fdi-ok-bg); color: var(--fdi-ok); }
.fdi-cc-msg.fdi-neg { background: var(--fdi-dang-bg); color: var(--fdi-dang); }

.fdi-fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 11px; }
.fdi-foto { position: relative; overflow: hidden; aspect-ratio: 1; border: 1px solid var(--cly-border); border-radius: 11px; cursor: pointer; background: var(--cly-surface); }
.fdi-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fdi-foto-zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); opacity: 0; transition: .15s; color: #fff; }
.fdi-foto-zoom .material-icons { font-size: 24px; }
.fdi-foto:hover .fdi-foto-zoom { opacity: 1; background: rgba(0,0,0,.34); }
.fdi-foto-broken { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center; color: var(--cly-text-muted); cursor: default; }
.fdi-foto-broken .material-icons { font-size: 30px; }
.fdi-foto-broken span { font-size: 10.5px; }

.fdi-lightbox { position: fixed; inset: 0; background: rgba(0,0,0,.82); z-index: 9970; display: flex; align-items: center; justify-content: center; padding: 30px; opacity: 0; transition: opacity .15s ease; }
.fdi-lightbox.fdi-open { opacity: 1; }
.fdi-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 8px; }
.fdi-lightbox-x { position: absolute; top: 18px; right: 22px; color: #fff; cursor: pointer; font-size: 30px; }

@media (max-width: 900px) {
    .fdi-box { width: 96vw; height: 92vh; }
    .fdi-main { flex-direction: column; }
    .fdi-nav { width: auto; flex-direction: row; border-right: 0; border-bottom: 1px solid var(--cly-border); overflow-x: auto; gap: 4px; padding: 8px 10px; scrollbar-width: none; }
    .fdi-nav::-webkit-scrollbar { display: none; }
    .fdi-nav-i { width: auto; white-space: nowrap; padding: 8px 11px; }
    .fdi-nav-lbl { flex: 0 0 auto; }
    .fdi-nav-foot { display: none; }
    .fdi-kpis { min-width: 0; }
}
@media (max-width: 560px) {
    .fdi-kpis { grid-template-columns: 1fr; }
    .fdi-stats { flex-direction: column; }
    .fdi-comm { flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
}

/* ============================================================
 * fd-form-section — cabeçalho de seção do gerador (type: form_section)
 * Componente estrutural para organizar formulários em blocos.
 * Variantes: subtle (padrão) | solid | line. Auto-contido (full-width),
 * não encapsula campos — não altera a matemática de larguras.
 * Tons do tema do sistema (não usar --cly-*); dark via .app_theme_dark.
 * ============================================================ */
.fd-form-section { display: flex; align-items: center; gap: 10px; width: 100%; margin: 18px 0 6px; }
.fd-form-section .fd-fs-tx { display: flex; flex-direction: column; }
.fd-form-section .fd-fs-ic { display: inline-flex; align-items: center; }
.fd-form-section .fd-fs-ic .material-icons { font-size: 18px; line-height: 1; color: #616161; }
.fd-form-section .fd-fs-ti { font-size: 13px; font-weight: 500; color: #424242; letter-spacing: .2px; }
.fd-form-section .fd-fs-de { font-size: 11px; color: #9e9e9e; margin-top: 1px; }
.fd-form-section .fd-fs-line { flex: 1; height: 1px; background: #e0e0e0; }

/* variante solid — cabeçalho com leve fundo/box */
.fd-form-section.fd-fs-solid { background: #f5f5f5; border: 1px solid #e0e0e0; border-radius: 6px; padding: 8px 12px; margin: 18px 0 10px; }
.fd-form-section.fd-fs-solid .fd-fs-line { display: none; }

/* variante line — título com divisória embaixo */
.fd-form-section.fd-fs-line-v { border-bottom: 1px solid #e0e0e0; padding-bottom: 6px; }
.fd-form-section.fd-fs-line-v .fd-fs-line { display: none; }

/* tema escuro */
.app_theme_dark .fd-form-section .fd-fs-ti { color: #e0e0e0; }
.app_theme_dark .fd-form-section .fd-fs-ic .material-icons { color: #9e9e9e; }
.app_theme_dark .fd-form-section .fd-fs-de { color: #9e9e9e; }
.app_theme_dark .fd-form-section .fd-fs-line { background: #565656; }
.app_theme_dark .fd-form-section.fd-fs-solid { background: #383838; border-color: #565656; }
.app_theme_dark .fd-form-section.fd-fs-line-v { border-color: #565656; }

@media (max-width: 600px) {
    .fd-form-section { margin: 14px 0 4px; }
    .fd-form-section.fd-fs-solid { margin: 14px 0 8px; }
}