/**
 * 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: 14px;
    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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 13px; color: var(--cly-text-muted); }
.mip-und { text-align: center; color: var(--cly-text-muted); }
.mip-errmsg { font-size: 14px; 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: 14px; 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: 13px; 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: 11px; 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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; color: #6b778c; margin-top: 3px; }
.fd-lote-it-disp { text-align: right; flex-shrink: 0; }
.fd-lote-it-disp-lb { font-size: 14px; color: #6b778c; }
.fd-lote-it-disp-vl { font-weight: 600; }
.fd-lote-badge { font-size: 14px; 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: 14px; 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: 14px; 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-cap-base { flex-basis: 100%; width: 100%; font-size: 14px; color: #8993a4; }
.fd-tpv-prev-keep { flex-basis: 100%; width: 100%; font-size: 14px; color: #a32d2d; }
.fd-tpv-descaviso { display: flex; align-items: flex-start; gap: 8px; margin: 12px 16px 0; padding: 10px 12px; background: #fff8e6; border: 1px solid #f6d98a; border-left: 3px solid #d97706; border-radius: 8px; color: #8a5a08; font-size: 12px; line-height: 1.45; }
.fd-tpv-descaviso .material-icons { font-size: 18px; color: #d97706; flex-shrink: 0; }
.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-cap-base { color: #9aa4b2; }
body.app_theme_dark .fd-tpv-prev-keep { color: #f09595; }
body.app_theme_dark .fd-tpv-descaviso { background: rgba(217,119,6,.12); border-color: rgba(217,119,6,.45); border-left-color: #f59e0b; color: #f0c274; }
body.app_theme_dark .fd-tpv-descaviso .material-icons { color: #f59e0b; }
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: 14px; 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: #352626; color: #e6a5a5; border-color: #4a3636; }
body.app_theme_dark .fd-avc-danger .fd-avc-chip { background: rgba(240, 149, 149, .18); color: #f0a5a5; }
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: 14px; 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; }

/* Avisos do cliente — seção de contratos (OS) */
.fd-avc-cont { background: #fff; border: 1px solid #e3e6ea; border-radius: 8px; overflow: hidden; margin-top: 4px; }
.fd-avc-cont-hd { display: flex; align-items: center; gap: 8px; padding: 9px 12px; font-size: 13px; font-weight: 600; color: #172b4d; background: #f7f9fb; border-bottom: 1px solid #eceef0; }
.fd-avc-cont-hd .material-icons { font-size: 18px; color: #1565c0; }
.fd-avc-cont-sub { padding: 7px 12px 0; font-size: 11.5px; color: #5e6c84; }
.fd-avc-cont-row { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-top: 1px solid #f3f3f3; }
.fd-avc-cont-row:first-of-type { border-top: none; }
.fd-avc-cont-main { flex: 1; min-width: 0; }
.fd-avc-cont-nm { font-size: 13px; color: #172b4d; font-weight: 500; }
.fd-avc-cont-tag { font-size: 10.5px; background: #eef4fb; color: #1565c0; padding: 1px 7px; border-radius: 8px; margin-left: 6px; white-space: nowrap; }
.fd-avc-cont-meta { font-size: 11.5px; color: #5e6c84; margin-top: 1px; }
.fd-avc-cont-sel { flex-shrink: 0; }
body.app_theme_dark .fd-avc-cont { background: #333; border-color: #4a4a4a; }
body.app_theme_dark .fd-avc-cont-hd { background: #2a2a2a; color: #e0e0e0; border-color: #444; }
body.app_theme_dark .fd-avc-cont-hd .material-icons { color: #64b5f6; }
body.app_theme_dark .fd-avc-cont-sub, body.app_theme_dark .fd-avc-cont-meta { color: #a5a5a5; }
body.app_theme_dark .fd-avc-cont-row { border-color: #444; }
body.app_theme_dark .fd-avc-cont-nm { color: #e0e0e0; }
body.app_theme_dark .fd-avc-cont-tag { background: #1d3850; color: #9fcbf5; }

@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); }
/* Coluna não ordenável (ex.: Cadastrado em) — sem cursor/hover de clique */
.fd-b-th-static { cursor: default; }
.fd-b-th-static:hover { background: var(--cly-surface); }
.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) */
/* Modal "Gerenciar colunas" (repaginado) — backdrop + caixa centralizada */
.fd-b-cols-modal {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 20px;
}
.fd-b-cols-box {
    width: 420px;
    max-width: 100%;
    max-height: calc(100% - 40px);
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 12px;
    box-shadow: var(--cly-shadow-md);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.fd-b-cols-panel-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-cols-panel-hd > span { display: inline-flex; align-items: center; gap: 7px; }
.fd-b-cols-panel-hd > span .material-icons { font-size: 19px; color: var(--cly-primary); }
.fd-b-cols-body { overflow-y: auto; flex: 1; }
.fd-b-cols-sec { padding: 14px 16px; border-bottom: 1px solid var(--cly-border); }
.fd-b-cols-sec:last-child { border-bottom: none; }
.fd-b-cols-sec-t { font-size: 14px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--cly-text-muted); margin-bottom: 10px; }
.fd-b-cfg-row { display: flex; align-items: center; gap: 12px; cursor: pointer; user-select: none; }
.fd-b-cfg-tx { flex: 1; min-width: 0; }
.fd-b-cfg-tx b { display: block; font-size: 13.5px; font-weight: 600; color: var(--cly-text-main); }
.fd-b-cfg-tx small { display: block; font-size: 11.5px; color: var(--cly-text-muted); margin-top: 2px; line-height: 1.4; }
.fd-b-cfg-sw { position: relative; flex: 0 0 auto; width: 40px; height: 22px; }
.fd-b-cfg-sw input { position: absolute; opacity: 0; width: 0; height: 0; }
.fd-b-cfg-track { position: absolute; inset: 0; border-radius: 20px; background: #888; transition: background .18s; }
.fd-b-cfg-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .18s; }
.fd-b-cfg-sw input:checked + .fd-b-cfg-track { background: var(--cly-primary); }
.fd-b-cfg-sw input:checked + .fd-b-cfg-track::after { left: 20px; }
.fd-b-cols-hint { font-size: 14px; color: var(--cly-text-muted); padding: 0 0 8px; margin: 0; flex-shrink: 0; }
.fd-b-cols-list { overflow-y: auto; }

/* Descrição completa: o nome deixa de cortar e quebra em várias linhas. A LARGURA
   da coluna vem do cabeçalho (JS, via col.largura maior nesse modo) — aqui só
   liberamos o corte/ellipsis; sem min-width !important brigando com o inline. */
.fd-b-desc-full .fd-b-td-nome { max-width: none; white-space: normal; }
.fd-b-desc-full .fd-b-nome-wrap { align-items: flex-start; }
.fd-b-desc-full .fd-b-nome-txt { white-space: normal; overflow: visible; text-overflow: clip; }
.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; }

/* Coluna Empresa (modo coligada) — peça de outra empresa: badge âmbar (pill + ícone store) */
.fd-b-emp-coligada {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: #854f0b;
    background: #faeeda;
    border: .5px solid #f0d9a8;
    border-radius: 999px;
    padding: 1px 8px 1px 6px;
    font-size: .92em;
    line-height: 1.5;
    white-space: nowrap;
}
.fd-b-emp-coligada .material-icons { font-size: 13px; line-height: 1; }
.fd-b-emp-propria  { color: var(--cly-text-muted); }

/* Venda com promoção */
.fd-b-venda-orig { text-decoration: line-through; opacity: .55; font-size: 14px; }
.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: 13px;
    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: 13px;
    font-weight: 700;
    padding: 1px 5px;
    margin-left: 4px;
    vertical-align: middle;
}
.fd-b-badge-promo .material-icons { font-size: 14px; }

/* Countdown hint (debounce) */
.fd-b-countdown {
    font-size: 14px;
    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: 13px;
    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: 14px;
    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; }

/* Filtros extras inline (sem expandir) + toggle de coligada — SYS-118 */
.fd-b-filtros-inline .fd-b-filtros-body { border-top: none; }
.fd-b-filtros-sep { width: 1px; align-self: stretch; min-height: 18px; background: var(--cly-border); margin: 0 2px; }
.fd-b-colig-toggle {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 3px 12px 3px 6px;
    border: 1px solid var(--cly-border); border-radius: 14px;
    background: var(--cly-bg); color: var(--cly-text-main);
    font-size: 12px; cursor: pointer; white-space: nowrap;
    transition: border-color .12s, background .12s, color .12s;
}
.fd-b-colig-toggle:hover { border-color: var(--cly-primary); }
.fd-b-colig-sw { position: relative; width: 30px; height: 16px; border-radius: 10px; background: var(--cly-border); flex: none; transition: background .15s; }
.fd-b-colig-kn { position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: #fff; transition: left .15s; }
.fd-b-colig-on { background: #faeeda; border-color: #d9a441; color: #854f0b; }
.fd-b-colig-on .fd-b-colig-sw { background: #b7791f; }
.fd-b-colig-on .fd-b-colig-kn { left: 16px; }

/* ---- 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; }
body.app_theme_dark .fd-b-emp-coligada { color: #f0b54a; background: rgba(224,140,18,.20); border-color: #6b5a2e; }
/* Controles de zoom de fonte A-/A+ */
.fd-b-font-ctrl {
    font-size: 14px;
    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; }
body.app_theme_dark .fd-b-colig-toggle { background: var(--cly-bg); border-color: var(--cly-border); color: var(--cly-text-main); }
body.app_theme_dark .fd-b-colig-sw { background: rgba(255,255,255,.18); }
body.app_theme_dark .fd-b-colig-on { background: rgba(240,181,74,.16); border-color: #f0b54a; color: #f0b54a; }
body.app_theme_dark .fd-b-colig-on .fd-b-colig-sw { background: #f0b54a; }
body.app_theme_dark .fd-b-colig-on .fd-b-colig-kn { background: #2a2a2a; }

/* ============================================================
   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: 14px; 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: 14px; vertical-align: middle; }

/* Promo line */
.fhist-promo-line { font-size: 14px; 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: 13px; 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: 13px; 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: 14px; 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: 14px; color: var(--cly-text-muted); }
.fhist-price-val { font-size: 13px; font-weight: 500; color: var(--cly-text-main); }
.fhist-price-orig { font-size: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 13px; 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: 13px; 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(268px, 1fr));
    gap: 10px;
    margin-bottom: 18px;
}

/* Card (uma denominação) — linha flexível que quebra no mobile */
.fd-cont-card {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 12px;
    background: var(--cly-surface);
    border: 1px solid var(--cly-border);
    border-left: 4px solid var(--cly-border);
    border-radius: 12px;
    transition: border-color .15s;
}
.fd-cont-card.fd-cont-on { border-left-color: var(--cor); }

/* Chip da denominação — o destaque */
.fd-cont-den {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 78px;
    padding: 9px 12px;
    border-radius: 8px;
    font-size: 18px;
    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:not(.fd-cont-den--svg) { background: var(--corbg); }
.fd-cont-card--cheque .fd-cont-den { font-size: 15px; }
/* Ícone SVG (nota retangular / moeda redonda) no lugar do chip de texto */
.fd-cont-den--svg { min-width: 0; padding: 0; background: none; border-radius: 0; }
.fd-cont-den--svg svg { display: block; }

/* Quantidade — input direto (sem stepper − / +, SYS-123: simplificado a pedido).
   Fundo neutro leve (mesma técnica do chip .fd-cont-den acima) em vez do
   --cly-bg (tom mais escuro do modal) — evita o contraste "preto" duro contra
   o card, que já usa --cly-surface. */
.fd-cont-input {
    width: 92px;
    height: 44px;
    box-sizing: border-box;
    margin: 0;
    padding: 6px 8px;
    text-align: center;
    font-size: 22px;
    font-weight: 700;
    color: var(--cly-text-main);
    background: rgba(128, 128, 128, .10);
    border: 1px solid var(--cly-border);
    border-radius: 10px;
    transition: border-color .15s, box-shadow .15s, background .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; }

/* Subtotal — grande e legível, sem "R$" (rótulo em cima, valor embaixo) */
.fd-cont-sub {
    margin-left: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    min-width: 64px;
}
.fd-cont-sub-lbl {
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    color: var(--cly-text-muted);
}
.fd-cont-sub-val {
    font-size: 20px;
    font-weight: 800;
    white-space: nowrap;
    color: var(--cly-text-muted);
}
.fd-cont-card.fd-cont-on .fd-cont-sub-val { color: #2e7d32; }
body.app_theme_dark .fd-cont-card.fd-cont-on .fd-cont-sub-val { color: #81c784; }

/* Cheque: input ocupa a linha, alinhado à direita */
.fd-cont-card--cheque { max-width: 360px; }
.fd-cont-mid--cheque { display: flex; align-items: center; flex: 1; }
.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; }
    /* 1 coluna e o subtotal desce pra própria linha (largura total, com divisória) */
    .fd-cont-grid { grid-template-columns: 1fr; gap: 9px; }
    .fd-cont-card { gap: 9px 10px; }
    .fd-cont-input { flex: 1; max-width: 140px; }
    .fd-cont-sub {
        flex-basis: 100%;
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        margin-left: 0;
        padding-top: 8px;
        border-top: 1px solid var(--cly-border);
    }
    .fd-cont-sub-val { font-size: 21px; }
}
/* telas bem estreitas (celular pequeno): compacta ainda mais os cards */
@media (max-width: 380px) {
    .fd-cont-den { min-width: 66px; font-size: 16px; padding: 8px 9px; }
    .fd-cont-card { padding: 9px 10px; }
}

/* ============================================================
   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: 14px;
    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: 14px;
    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: 14px;
    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: 14px;
    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: 14px;
    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: 13px; 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);
}
/* Fase 1 do carregamento progressivo (SYS-126): skeleton do corpo enquanto o
   resumo() completo (saldo/formas/crédito/aprovações) ainda não voltou. Reaproveita
   .fd-skel (mesmo shimmer dos datatables, SYS-122) — não cria animação nova. */
.fd-caixa-corpo-skel { padding: 4px 0 8px; }
.fd-caixa-corpo-skel-label {
    display: flex; align-items: center; gap: 6px;
    font-size: 12.5px; color: var(--cly-text-muted);
}
.fd-caixa-corpo-skel-label .material-icons { font-size: 16px; }
.fd-caixa-corpo-erro {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 14px 0; font-size: 13px; color: var(--cly-text-muted);
}
.fd-caixa-corpo-erro .material-icons { color: #c43d2c; }
body.app_theme_dark .fd-caixa-corpo-erro .material-icons { color: #e08576; }
.fd-caixa-corpo-retry {
    background: none; border: 1px solid var(--cly-border); border-radius: 6px;
    padding: 5px 12px; font-size: 12.5px; color: var(--cly-text-main); cursor: pointer;
}
.fd-caixa-corpo-retry:hover { background: var(--cly-surface); }
.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: 14px; 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: 14px; 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: 14px; 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; }

/* cabecalho: nome da conta em destaque + selo do tipo (Banco / Frente de loja).
   O rotulo "Resumo do caixa" vira legenda discreta acima do nome. */
.fd-caixa-card-titlewrap { display: inline-flex; flex-direction: column; gap: 5px; min-width: 0; }
.fd-caixa-card-cap {
    font-size: 14px; font-weight: 700; text-transform: uppercase;
    letter-spacing: .6px; color: var(--cly-text-muted);
}
.fd-caixa-card-nome-row { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-caixa-card-nome {
    font-size: 19px; font-weight: 700; line-height: 1.1; color: var(--cly-text-main);
}
.fd-caixa-tipo {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
    border-radius: 999px; padding: 3px 11px; white-space: nowrap;
}
.fd-caixa-tipo .material-icons { font-size: 14px; line-height: 1; }
.fd-caixa-tipo-banco { color: #1565c0; background: rgba(30, 136, 229, .12); border: 1px solid rgba(30, 136, 229, .38); }
.fd-caixa-tipo-loja  { color: #2e7d32; background: rgba(67, 160, 71, .12);  border: 1px solid rgba(67, 160, 71, .38); }
body.app_theme_dark .fd-caixa-tipo-banco { color: #64b5f6; background: rgba(30, 136, 229, .16); border-color: rgba(30, 136, 229, .40); }
body.app_theme_dark .fd-caixa-tipo-loja  { color: #81c784; background: rgba(67, 160, 71, .16);  border-color: rgba(67, 160, 71, .40); }

/* 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: 14px; 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; }
.fd-caixa-secao-spacer { 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;
}

/* KPI de destaque do cabeçalho — total líquido aprovado + contagem (vem do backend). */
.fd-caixa-secao-kpi {
    display: flex;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    padding: 7px 14px;
    flex-shrink: 0;
}
.fd-caixa-secao-kpi-ic { font-size: 20px; }
.fd-caixa-secao-kpi-valor {
    font-size: 16px;
    font-weight: 600;
    line-height: 1.15;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.fd-caixa-secao-kpi-label {
    font-size: 14px;
    white-space: nowrap;
}
/* cores por tipo — claro (mesma paleta dos ícones circulares do cabeçalho) */
.fd-caixa-secao-kpi-venda {
    background: #eaf5eb; border: 1px solid #b8ddba;
}
.fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-ic,
.fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-valor { color: #2e7d32; }
.fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-label { color: #4b7c50; }

.fd-caixa-secao-kpi-os {
    background: #e3f3fc; border: 1px solid #a9d8f0;
}
.fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-ic,
.fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-valor { color: #0277bd; }
.fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-label { color: #3d7590; }

.fd-caixa-secao-kpi-outras {
    background: #fdf1e0; border: 1px solid #f0cc94;
}
.fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-ic,
.fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-valor { color: #e65100; }
.fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-label { color: #97633a; }

/* cores por tipo — escuro (tons de card do sistema, ver bloco de ajuste dark abaixo) */
body.app_theme_dark .fd-caixa-secao-kpi-venda {
    background: #2f3f30; border-color: #3f6b45;
}
body.app_theme_dark .fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-ic,
body.app_theme_dark .fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-valor { color: #8fd19e; }
body.app_theme_dark .fd-caixa-secao-kpi-venda .fd-caixa-secao-kpi-label { color: #a8c9ae; }

body.app_theme_dark .fd-caixa-secao-kpi-os {
    background: #253846; border-color: #2f5670;
}
body.app_theme_dark .fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-ic,
body.app_theme_dark .fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-valor { color: #5b9be0; }
body.app_theme_dark .fd-caixa-secao-kpi-os .fd-caixa-secao-kpi-label { color: #8fb3d1; }

body.app_theme_dark .fd-caixa-secao-kpi-outras {
    background: #453824; border-color: #6b4f2f;
}
body.app_theme_dark .fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-ic,
body.app_theme_dark .fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-valor { color: #f0b45b; }
body.app_theme_dark .fd-caixa-secao-kpi-outras .fd-caixa-secao-kpi-label { color: #d1b48f; }

@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%; }
    .fd-caixa-secao-spacer { display: none; }
    .fd-caixa-secao-kpi { 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;
}

/* Badge "contagem pendente" no botão da toolbar (SYS-123) — substitui o antigo
   aviso em banner. Botão fica na tela (não em modal), então usa os tons do
   próprio tema em vez dos --cly-* (ver AI_CONTEXT §"Cores/tema"). */
.fd-contagem-pendente-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #f57c00;
    border: 2px solid #fff;
    display: none;
}
body.app_theme_dark .fd-contagem-pendente-badge {
    background: #ffb74d;
    border-color: #303030;
}

/* 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: 14px;
    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: 14px;
    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: 14px;
    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: 13px;
        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: 14px;
    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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; 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: 13px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; color: #79818d; margin-bottom: 2px; }
.fd-aprov-tile-nome { font-size: 14px; font-weight: 500; color: #1f2733; }
.fd-aprov-tile-sub { font-size: 14px; 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: 14px; color: #1f7a44; }
.fd-aprov-total-val { font-size: 20px; font-weight: 500; color: #1f7a44; white-space: nowrap; }

.fd-aprov-sub { font-size: 14px; 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: 14px; 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: 13px; 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: 13px; font-weight: 500; padding: 2px 8px; border-radius: 20px; background: #eaf6ef; color: #1f7a44; white-space: nowrap; }
.fd-aprov-chip-prazo { font-size: 13px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; color: #79818d; }
.fd-aprov-cartao-tab { width: 100%; }

.fd-aprov-reqs { display: flex; gap: 8px; flex-wrap: wrap; }
.fd-aprov-conf-tag { font-size: 13px; 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; }

  /* Autorização de cartão: no mobile a tabela (5 colunas) não cabe e a coluna
     "Número de Autorização" ficava clipada/escondida. Empilha cada linha em card
     (rótulo à esquerda, valor à direita) e o campo de autorização ganha sua própria linha. */
  .fd-aprov-modal .fd-pgto-cartao-tab thead { display: none; }
  .fd-aprov-modal .fd-pgto-cartao-tab,
  .fd-aprov-modal .fd-pgto-cartao-tab tbody,
  .fd-aprov-modal .fd-pgto-cartao-tab tr { display: block; width: 100%; }
  .fd-aprov-modal .fd-pgto-cartao-tab tr {
    border: 1px solid var(--cly-border); border-radius: 9px;
    padding: 6px 11px; margin-bottom: 8px;
  }
  .fd-aprov-modal .fd-pgto-cartao-tab td {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; width: auto; border: 0 !important; padding: 6px 0 !important;
    text-align: right; white-space: normal;
  }
  .fd-aprov-modal .fd-pgto-cartao-tab td.hidden { display: none !important; }
  .fd-aprov-modal .fd-pgto-cartao-tab td[data-label]::before {
    content: attr(data-label); flex: 0 0 auto; text-align: left;
    font-size: 14px; font-weight: 500; color: var(--cly-text-muted);
  }
  .fd-aprov-modal .fd-pgto-cartao-tab td > * { flex: 1 1 auto; min-width: 0; margin: 0 !important; }
  .fd-aprov-modal .fd-pgto-cartao-tab td input,
  .fd-aprov-modal .fd-pgto-cartao-tab td select {
    float: none !important; width: 100% !important; min-width: 0 !important;
    margin: 0 !important; text-align: right;
  }
  .fd-aprov-modal .fd-pgto-cartao-tab td.fd-cartao-td-aut { padding-top: 4px !important; }
}

/* =====================================================================
   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: 14px; 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: 14px; 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: 14px; 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: 13px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px;
  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: 14px; 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: 14px; 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);
  --cly-neg-vm: #e53935;  --cly-neg-vm-bg: rgba(229,57,53,.10);
}
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-neg-vm: #ef5350;  --cly-neg-vm-bg: rgba(239,83,80,.15);
}
.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: min(720px, 96vw); 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: 14px; 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: 14px; }
.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: 14px; 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: 14px; 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: 14px; 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: 14px; 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; }
/* Bloco em 2 colunas: nome no topo (full), parcelamento à esquerda, VALOR à
   direita ocupando a altura (parcelamento + ações), rodapé de ações rente logo
   abaixo do parcelamento. Reduz uma faixa vs. o layout empilhado antigo. */
.cly-neg-forma-main { flex: 1; min-width: 0; display: grid; grid-template-columns: 1fr 132px; grid-template-areas: "top top" "plano valor" "foot valor"; column-gap: 12px; row-gap: 9px; align-items: start; }
.cly-neg-forma.sem-credito .cly-neg-forma-main { grid-template-areas: "top top" "plano valor" "foot foot"; }
.cly-neg-forma-main > .cly-neg-forma-foot { grid-area: foot; }
.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 { grid-area: top; display: flex; align-items: center; gap: 9px; margin-bottom: 0; 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; }
/* chip de limite de crédito do cliente por forma (só aparece se há limite configurado) */
.cly-neg-limite { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; font-weight: 500; color: var(--cly-neg-az); background: var(--cly-neg-az-bg); border: 1px solid var(--cly-neg-az); border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.cly-neg-limite .material-icons { font-size: 13px; color: inherit; }
.cly-neg-limite.over { color: var(--cly-neg-vm); background: var(--cly-neg-vm-bg); border-color: var(--cly-neg-vm); }
/* realce do campo de valor quando a forma ultrapassa o limite */
.cly-neg-forma.limite-over .cly-neg-valor-box { border-color: var(--cly-neg-vm); box-shadow: 0 0 0 3px var(--cly-neg-vm-bg); }
.cly-neg-forma.limite-over .cly-neg-valor-box input { color: var(--cly-neg-vm); }
.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: contents; }
.cly-neg-plano-wrap { grid-area: plano; min-width: 0; }
.cly-neg-valor-wrap { grid-area: valor; align-self: stretch; display: flex; flex-direction: column; }
.cly-neg-valor-wrap .cly-neg-valor-box { flex: 1; }
.cly-neg-plano-wrap label, .cly-neg-valor-wrap label { display: block; font-size: 13px; 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: 14px; 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 { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; }
@media (max-width: 560px) {
    .cly-neg-forma-main,
    .cly-neg-forma.sem-credito .cly-neg-forma-main { grid-template-columns: 1fr; grid-template-areas: "top" "plano" "valor" "foot"; }
    .cly-neg-valor-wrap { align-self: auto; }
    .cly-neg-valor-wrap .cly-neg-valor-box { flex: none; }
    .cly-neg-valor-wrap label { text-align: left; }
    .cly-neg-acts { margin-top: 9px; padding-top: 9px; border-top: 1px dashed var(--cly-border); }
}
.cly-neg-foot-hint { font-size: 14px; 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; }

/* ---- Visualização compacta (tabela) — ADITIVO. Padrão continua "blocos".
   Mesma marcação dos cards (data-key/.cly-neg-plano/.cly-neg-valor/.cly-neg-forma-foot
   intactos): só o wrapper .cly-neg-list.is-tabela reestiliza .cly-neg-forma em linha. ---- */
.cly-neg-viewseg { display: inline-flex; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 7px; padding: 2px; }
.cly-neg-vbtn { border: 0; background: transparent; color: var(--cly-text-muted); font-size: 11.5px; padding: 5px 10px; border-radius: 5px; cursor: pointer; }
.cly-neg-vbtn.on { background: var(--cly-neg-az); color: #fff; }

/* Tabela real: header + linhas achatadas (render dedicado htmlFormaCompacta).
   As 4 colunas do header e das linhas usam o MESMO grid-template p/ alinhar. */
.cly-neg-list.is-tabela { border: 1px solid var(--cly-border); border-radius: 10px; overflow: hidden; }
.cly-neg-trow { display: grid; grid-template-columns: minmax(120px, 1.4fr) minmax(118px, 1.15fr) 118px minmax(140px, 1fr); gap: 10px; align-items: center; }
.cly-neg-thead { padding: 6px 12px 7px; font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--cly-text-muted); border-bottom: 1px solid var(--cly-border); }
.cly-neg-thead .cly-neg-tr-r { text-align: right; }

.cly-neg-list.is-tabela .cly-neg-forma.cly-neg-trow { padding: 7px 12px; margin: 0; border: 0; border-bottom: 1px solid var(--cly-border); border-radius: 0; background: transparent; }
.cly-neg-list.is-tabela .cly-neg-forma.cly-neg-trow:last-child { border-bottom: 0; }
.cly-neg-list.is-tabela .cly-neg-forma.alocado { box-shadow: inset 3px 0 0 var(--cly-neg-vd); }
.cly-neg-list.is-tabela .cly-neg-forma.is-credito { background: var(--cly-neg-cr-bg); box-shadow: inset 3px 0 0 var(--cly-neg-cr); }
.cly-neg-list.is-tabela .cly-neg-forma.limite-over { box-shadow: inset 3px 0 0 var(--cly-neg-vm); }

.cly-neg-tr-nome { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; row-gap: 3px; }
.cly-neg-tr-nome .cly-neg-forma-ic { width: 26px; height: 26px; border-radius: 6px; flex: 0 0 auto; }
.cly-neg-tr-nome .cly-neg-forma-ic .material-icons { font-size: 16px; }
.cly-neg-tr-nome .cly-neg-forma-nome { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1 1 auto; min-width: 0; }
/* O nome fica sozinho na 1ª linha (prioridade); badge/chip de limite quebram
   para a 2ª linha recuada sob o nome — antes o chip "Limite disponível" cobria
   o nome no compacto. Mesmo comportamento dos blocos (.cly-neg-forma-top wrap). */
.cly-neg-tr-nome .cly-neg-limite,
.cly-neg-tr-nome .cly-neg-badge-cred,
.cly-neg-tr-nome .cly-neg-badge-indisp { flex: 0 0 auto; margin-left: 34px; }
.cly-neg-tr-nome .cly-neg-badge-cred ~ .cly-neg-limite,
.cly-neg-tr-nome .cly-neg-badge-indisp ~ .cly-neg-limite { margin-left: 0; }
.cly-neg-tr-plano { min-width: 0; }
.cly-neg-tr-acao { display: flex; align-items: center; justify-content: flex-end; }
.cly-neg-trow .cly-neg-badge-cred, .cly-neg-trow .cly-neg-badge-indisp { font-size: 9.5px; padding: 1px 6px; }
.cly-neg-trow .cly-neg-limite { font-size: 9.5px; }

.cly-neg-tacts { display: flex; align-items: center; gap: 6px; justify-content: flex-end; flex-wrap: nowrap; }
.cly-neg-tfalta { font-size: 10.5px; color: var(--cly-text-muted); white-space: nowrap; }
.cly-neg-tbtn { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--cly-neg-az); color: var(--cly-neg-az); background: transparent; border-radius: 6px; padding: 4px 8px; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cly-neg-tbtn .material-icons { font-size: 15px; }
.cly-neg-tbtn.cred { border-color: var(--cly-neg-cr); color: var(--cly-neg-cr); }
.cly-neg-tbtn:not(.compl):not(.cred) { border-color: var(--cly-border); color: var(--cly-text-muted); }

@media (max-width: 560px) {
    .cly-neg-thead { display: none; }
    .cly-neg-trow { grid-template-columns: 1fr 118px; grid-template-areas: "nome nome" "plano valor" "acao acao"; row-gap: 7px; }
    .cly-neg-tr-nome { grid-area: nome; } .cly-neg-tr-plano { grid-area: plano; }
    .cly-neg-tr-valor { grid-area: valor; } .cly-neg-tr-acao { grid-area: acao; justify-content: flex-start; }
}
.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: 14px; 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: 14px; 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: 14px; }
.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: 14px; 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: 13px; 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: 14px; 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: 13px; 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: 14px; font-weight: 500; padding: 7px 9px; border-radius: 7px; cursor: pointer; white-space: nowrap; }
.cly-dev-qsub { margin-top: 7px; font-size: 14px; 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: 14px; 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: 14px; color: #fff; }
.cly-dev-field { margin-top: 9px; }
.cly-dev-lbl { font-size: 13px; 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: 13px; 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: 14px; 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: 13px; 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: 13px; 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: 13px; 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: 14px; 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: 14px; 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; }

/* Campo digitável (opts.digitavel) — input no lugar do placeholder + dropdown de
   sugestões ancorado no <body> (position:fixed sairia do fluxo em scroll; usamos
   absolute + reposicionamento em scroll/resize). Tema claro/escuro via vars --cly-*. */
.cly-bsc-field.dig { cursor: text; }
.cly-bsc-fi-input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; font-size: 14px; color: var(--cly-text-main); padding: 0; font-family: inherit; }
.cly-bsc-fi-input::placeholder { color: var(--cly-text-muted); }
.cly-bsc-fi-clear { width: 28px; height: 28px; border: 0; border-radius: 7px; background: transparent; color: var(--cly-text-muted); cursor: pointer; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cly-bsc-fi-clear:hover { color: var(--cly-text-main); background: var(--cly-surface); }

/* Campo do gerador type "cly_buscador" (Gen_ClyBuscador). O wrapper é .md-input-wrapper.md-input-filled,
   então o <label> herda o label FLUTUANTE do gerador (position:absolute; md-input-filled -> top:-6px, 12px).
   NÃO forçar static: isso empurrava a caixa ~19px pra baixo e desalinhava dos inputs normais.
   O box em si é o .cly-bsc-field (auto-estilizado pelo cly_buscador.campo). */
.cly-cb-field { position: relative; }
.cly-cb-field > label { left: 4px; right: 0; max-width: calc(100% - 4px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cly-cb-auto { position: relative; }
/* margin-top:10px empurra a caixa pra começar no mesmo Y do input boxed normal (que reserva ~14px
   acima p/ o label flutuante). Sem isso a caixa fica 10px mais alta: desalinha dos vizinhos E o
   fundo sólido do buscador cobre os ~8px de baixo do label flutuante (o label some parcialmente). */
.cly-cb-mount { display: block; margin-top: 10px; }
/* botão "abrir cadastro" DENTRO do campo (ao lado da lupa) — só aparece com valor selecionado */
.cly-bsc-fi-ver { padding:9px 12px; font-size:13px; color:#26a69a; cursor:pointer; display:flex; align-items:center; gap:7px; border-top:1px solid var(--cly-border); }
.cly-bsc-fi-ver:first-child { border-top:0; }
.cly-bsc-fi-ver:hover { background:var(--cly-surface); }
.cly-bsc-fi-ver .material-icons { font-size:17px; }
.cly-bsc-fi-hint { padding:7px 12px; font-size:11.5px; color:var(--cly-text-muted); display:flex; align-items:center; gap:7px; border-top:1px solid var(--cly-border); cursor:default; }
.cly-bsc-fi-hint:first-child { border-top:0; }
.cly-bsc-fi-hint .material-icons { font-size:14px; }
/* linha "Adicionar registro…" dentro do dropdown de sugestões */
.cly-bsc-fi-add { padding:9px 12px; font-size:13px; color:var(--cly-neg-az); cursor:pointer; display:flex; align-items:center; gap:7px; border-top:1px solid var(--cly-border); }
.cly-bsc-fi-add:hover { background:var(--cly-surface); }
.cly-bsc-fi-add .material-icons { font-size:17px; }
/* cly_buscador como CAMPO DO GERADOR (na TELA, não em modal): usar os tons do TEMA do sistema,
   não os --cly-* (que são de modal e ficam pretos/escuros demais na tela). Claro E escuro. */
/* altura FIXA (não min-height) p/ vazio == preenchido e p/ casar com o input boxed do gerador (40px) */
.cly-cb-field .cly-bsc-field { background:#fff; border-color:#d8d6d0; border-width:1px; height:40px; min-height:40px; padding:2px 5px 2px 11px; box-sizing:border-box; }
/* o input herda padding:8px + margin-top:10px de ".bordas_arredondadas input" (!important, especificidade
   0,2,1) que jogavam o texto/placeholder pra baixo do centro. Zera com especificidade maior (0,3,1). */
.cly-cb-field .cly-bsc-field input.cly-bsc-fi-input { padding:0 !important; margin:0 !important; height:auto !important; }
.cly-cb-field .cly-bsc-fi-lupa { width:28px; height:28px; }
.cly-cb-field .cly-bsc-field.on { border-color:#26a69a; }
.cly-cb-field .cly-bsc-fi-txt, .cly-cb-field .cly-bsc-fi-input { color:#333; }
.cly-cb-field .cly-bsc-fi-input::placeholder, .cly-cb-field .cly-bsc-fi-ph { color:#9e9e9e; }
body.app_theme_dark .cly-cb-field .cly-bsc-field { background:#2b2b2b; border-color:#565656; }
body.app_theme_dark .cly-cb-field .cly-bsc-field.on { border-color:#2bbbad; }
body.app_theme_dark .cly-cb-field .cly-bsc-fi-txt, body.app_theme_dark .cly-cb-field .cly-bsc-fi-input { color:#e8e8e8; }
body.app_theme_dark .cly-cb-field .cly-bsc-fi-input::placeholder, body.app_theme_dark .cly-cb-field .cly-bsc-fi-ph { color:#9e9e9e; }

/* KPI de estoque (SYS-170): as células de saldo readonly da seção Estoque viram TILES coloridos.
   Estiliza a CÉLULA (wrapper .uk-width), NÃO o input: o input readonly recebe regras !important do
   tema (".app_theme_dark input[type=text].md-input", ".bordas_arredondadas input") que venciam
   qualquer override direto. Requer :has() (Edge/Chrome modernos). O name real tem prefixo
   "fd_produto_" -> usa [name$="_sdXXX"]. Tinta rgba + accent = tema-safe (claro E escuro).
   OBS: campos estreitos (2-10) truncam o label; refinar largura/labels numa próxima. */
#mod_fd_produto .gen-section[data-fs="estoque"] .gen-section-grid > [class*="uk-width"]:has(input.destaque-readonly) {
    background: rgba(140,140,140,.08); border: 1px solid rgba(140,140,140,.22);
    border-left: 3px solid #9e9e9e; border-radius: 9px; padding: 9px 12px 8px;
    margin-top: 16px; box-sizing: border-box; overflow: hidden;
}
#mod_fd_produto .gen-section[data-fs="estoque"] [class*="uk-width"]:has(input.destaque-readonly) .md-input-wrapper {
    padding: 0 !important; margin: 0 !important; min-height: 0 !important;
}
#mod_fd_produto .gen-section[data-fs="estoque"] [class*="uk-width"]:has(input.destaque-readonly) .md-input-wrapper > label {
    position: static !important; font-size: 11px !important; color: #8f8f8f !important;
    text-transform: uppercase; letter-spacing: .4px; display: block; margin: 0 0 4px !important;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-style: normal !important;
}
#mod_fd_produto .gen-section[data-fs="estoque"] [class*="uk-width"]:has(input.destaque-readonly) input.destaque-readonly {
    background: transparent !important; border: 0 !important; padding: 0 !important; margin: 0 !important;
    height: auto !important; min-height: 0 !important; font-size: 18px !important; font-weight: 700 !important;
    font-style: normal !important; text-align: left !important;
}
#mod_fd_produto .gen-section[data-fs="estoque"] .gen-section-grid > [class*="uk-width"]:has(input[name$="_sdstr"])   { border-left-color:#26a69a !important; background:rgba(38,166,154,.12) !important; }
#mod_fd_produto .gen-section[data-fs="estoque"] .gen-section-grid > [class*="uk-width"]:has(input[name$="_sderes"])  { border-left-color:#c9a227 !important; background:rgba(201,162,39,.12) !important; }
#mod_fd_produto .gen-section[data-fs="estoque"] .gen-section-grid > [class*="uk-width"]:has(input[name$="_sdesretr"]){ border-left-color:#4a90d9 !important; background:rgba(74,144,217,.12) !important; }
.cly-bsc-fi-clear .material-icons { font-size: 16px; }
.cly-bsc-fi-drop { position: absolute; background: var(--cly-bg); border: 1px solid var(--cly-border); border-radius: 10px; box-shadow: 0 12px 34px rgba(0, 0, 0, .26); padding: 5px; max-height: 292px; overflow-y: auto; }
.cly-bsc-fi-item { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.cly-bsc-fi-item .t { flex: 1; font-size: 13.5px; color: var(--cly-text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cly-bsc-fi-item .t small { color: var(--cly-text-muted); }
.cly-bsc-fi-item.on { background: var(--cly-neg-az-bg); }
.cly-bsc-fi-item.on .t { color: var(--cly-neg-az); }
.cly-bsc-fi-mais { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; margin-top: 3px; border-top: 1px solid var(--cly-border); font-size: 12.5px; font-weight: 600; color: var(--cly-neg-az); cursor: pointer; border-radius: 0 0 7px 7px; }
.cly-bsc-fi-mais:hover { background: var(--cly-neg-az-bg); }
.cly-bsc-fi-mais .material-icons { font-size: 15px; }
.cly-bsc-fi-estado { display: flex; align-items: center; gap: 8px; padding: 12px 10px; font-size: 13px; color: var(--cly-text-muted); }
.cly-bsc-fi-estado .material-icons { font-size: 18px; }

/* 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; }

/* Dentro dos modais das O.S. (.cly-os-box), o campo acompanha os demais inputs da tela
   (.cly-osdt-ctl: claro #fff/#cfd5dd, escuro #2e2e2e/#5f5f5f) — var(--cly-bg) ficava
   preto demais no dark. Borda só no estado sem seleção (:not(.on)) pra preservar o realce azul. */
.cly-os-box .cly-bsc-field { background: #fff; }
.cly-os-box .cly-bsc-field:not(.on) { border-color: #cfd5dd; }
body.app_theme_dark .cly-os-box .cly-bsc-field { background: #2e2e2e; }
body.app_theme_dark .cly-os-box .cly-bsc-field:not(.on) { border-color: #5f5f5f; }
body.app_theme_dark .cly-os-box .cly-bsc-fi-input,
body.app_theme_dark .cly-os-box .cly-bsc-fi-txt { color: #f2f2f2; }

@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: 13px; 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: 14px; 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);
}
/* Mobile: dropdown vira modal centralizado (JS adiciona .cly-dp-modal + backdrop). */
.cly-dp-backdrop {
    position: fixed; inset: 0; z-index: 2147482999; background: rgba(0, 0, 0, .5);
}
.cly-dp.cly-dp-modal {
    position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: calc(100vw - 32px); max-width: 360px; padding: 16px;
    max-height: calc(100vh - 32px); overflow: auto;
}
.cly-dp-modal .cly-dp-empty, .cly-dp-modal .cly-dp-day { height: 40px; }
.cly-dp-modal .cly-dp-day { font-size: 15px; }
.cly-dp-modal .cly-dp-chip { padding: 9px 1px; font-size: 14px; }
.cly-dp-modal .cly-dp-prev, .cly-dp-modal .cly-dp-next { width: 36px; height: 36px; }
.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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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: 14px; 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); }
/* [SYS-109] badges de local/origem + chips de códigos secundários (todos condicionais no PHP) */
.fdi-badge-local { background: var(--cly-primary-bg); border-color: transparent; color: var(--cly-primary-text); }
.fdi-badge-orig { background: var(--fdi-amb-soft); border-color: transparent; color: var(--fdi-amb); }
.fdi-badge { max-width: 100%; min-width: 0; }
.fdi-badge b { font-weight: 500; min-width: 0; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdi-det-row { display: flex; flex-wrap: wrap; gap: 5px 16px; margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--cly-border); font-size: 12px; color: var(--cly-text-muted); }
.fdi-det-i { white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.fdi-det-i b { font-weight: 500; color: var(--cly-text-main); }

.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: 14px; 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: 14px; 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: 14px; 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); }

/* tabela: min-width + overflow:auto no wrapper = colunas nunca espremem/quebram
   (em container estreito rola horizontal). border-collapse:separate p/ a borda
   acompanhar o thead sticky; sem padding-top no wrapper p/ linha não vazar acima dele. */
.fdi-tbody { flex: 1; min-height: 0; overflow: auto; padding: 0 16px 13px; }
.fdi-table { width: 100%; min-width: 640px; border-collapse: separate; border-spacing: 0; 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: 12px 8px 9px; border-bottom: 1px solid var(--cly-border); z-index: 2; white-space: nowrap; }
.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 td:first-child, .fdi-table td.fdi-r { white-space: nowrap; }
/* última coluna (Cliente/Nº): uma linha só, com reticências — nome longo não vira parágrafo */
.fdi-table td:last-child { white-space: nowrap; max-width: 240px; overflow: hidden; text-overflow: ellipsis; }
/* scrollbars discretas (box e área da tabela) — a padrão fica branca no tema escuro */
.fdi-box::-webkit-scrollbar, .fdi-tbody::-webkit-scrollbar { width: 8px; height: 8px; }
.fdi-box::-webkit-scrollbar-thumb, .fdi-tbody::-webkit-scrollbar-thumb { background: var(--cly-border); border-radius: 8px; }
.fdi-box::-webkit-scrollbar-track, .fdi-tbody::-webkit-scrollbar-track { background: transparent; }
.fdi-box, .fdi-tbody { scrollbar-width: thin; scrollbar-color: var(--cly-border) transparent; }

/* ADITIVO — modo foco do inspector (.fdi-focus): recolhe o topo de KPIs e o menu
   lateral para a lista ativa (Movimentações / Reservas / Últimas Compras) mostrar
   mais linhas sem rolar tanto. Ligado pelo botão .fdi-hd-expand; Esc/Recolher desliga.
   100% aditivo: sem a classe .fdi-focus, o modal é IDÊNTICO ao atual. */
.fdi-box.fdi-focus .fdi-badges,
.fdi-box.fdi-focus .fdi-stats,
.fdi-box.fdi-focus .fdi-ins,
.fdi-box.fdi-focus .fdi-det-row { display: none; }
.fdi-box.fdi-focus .fdi-top { padding-bottom: 2px; }
.fdi-box.fdi-focus .fdi-hd-expand { background: var(--fdi-teal-soft); border-color: transparent; }
.fdi-box.fdi-focus .fdi-hd-expand .material-icons { color: var(--fdi-teal); }
@media (min-width: 861px) {
    .fdi-box.fdi-focus .fdi-nav { width: 60px; transition: width .18s ease; }
    .fdi-box.fdi-focus .fdi-nav-lbl,
    .fdi-box.fdi-focus .fdi-nav-c,
    .fdi-box.fdi-focus .fdi-nav-foot { display: none; }
    .fdi-box.fdi-focus .fdi-nav-i { justify-content: center; padding: 11px; }
}
.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; white-space: nowrap; }
.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: 14px; 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-overlay { padding: 12px; }
    .fdi-box { width: 96vw; height: 92vh; height: 92dvh; }
    .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; }
}
/* Janela baixa (qualquer largura): compacta o topo fixo p/ sobrar altura útil
   pra tabela. Não afeta desktop com altura folgada. */
@media (max-height: 740px) {
    .fdi-overlay { padding: 12px; }
    .fdi-box { height: 94vh; height: 94dvh; }
    .fdi-hd { padding: 9px 14px; }
    .fdi-top { padding: 10px 14px 0; }
    .fdi-name { font-size: 15.5px; }
    .fdi-badges { margin-top: 5px; }
    .fdi-stats { margin-top: 9px; gap: 10px; }
    .fdi-kpi { padding: 7px 11px; border-radius: 10px; }
    .fdi-kpi-ic { width: 28px; height: 28px; border-radius: 8px; }
    .fdi-kpi-ic .material-icons { font-size: 16px; }
    .fdi-kpi-v { font-size: 18px; }
    .fdi-comm { gap: 12px; padding: 0 12px; }
    .fdi-comm-v { font-size: 13.5px; }
    .fdi-ins { margin: 9px 0 10px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .fdi-ins::-webkit-scrollbar { display: none; }
    .fdi-ins-i { padding: 5px 9px; white-space: nowrap; flex: 0 0 auto; }
    .fdi-main { margin-top: 9px; }
    .fdi-nav-i { padding: 7px 11px; }
    .fdi-filt { padding: 8px 12px; gap: 7px; }
    .fdi-pag { padding: 7px 12px; }
    .fdi-state { min-height: 160px; }
}
/* Janela baixa: o box inteiro rola (header gruda no topo) e a área de
   conteúdo ganha quase uma tela de altura — o topo (KPIs etc.) sai rolando
   pra cima em vez de esmagar a tabela. */
@media (max-height: 620px) {
    .fdi-box { overflow-y: auto; }
    .fdi-hd { position: sticky; top: 0; background: var(--cly-bg); z-index: 6; }
    .fdi-main { min-height: calc(100vh - 140px); min-height: calc(100dvh - 140px); }
}
/* Mobile: modal vira fullscreen; KPIs em faixa tripla compacta; chips de
   período rolam na horizontal; busca e datas em linhas próprias. */
@media (max-width: 560px) {
    .fdi-overlay { padding: 0; }
    .fdi-box { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; border: 0; overflow-y: auto; }
    .fdi-hd { position: sticky; top: 0; background: var(--cly-bg); z-index: 6; padding: 10px 12px; }
    .fdi-main { min-height: calc(100vh - 96px); min-height: calc(100dvh - 96px); }
    .fdi-top { padding: 10px 12px 0; }
    .fdi-name { font-size: 15px; }
    .fdi-badge b { max-width: 62vw; }
    .fdi-det-row { margin-top: 9px; padding-top: 9px; gap: 4px 12px; }
    .fdi-stats { flex-direction: column; gap: 8px; margin-top: 9px; }
    .fdi-kpis { grid-template-columns: repeat(3, 1fr); gap: 7px; }
    .fdi-kpi { flex-direction: column; align-items: flex-start; gap: 3px; padding: 8px 10px; }
    .fdi-kpi-ic { display: none; }
    .fdi-kpi-v { font-size: 17px; }
    .fdi-comm { flex-wrap: wrap; gap: 8px 14px; padding: 10px 12px; }
    .fdi-comm-d { display: none; }
    .fdi-comm-v { font-size: 13.5px; }
    .fdi-ins { margin: 10px 0; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .fdi-ins::-webkit-scrollbar { display: none; }
    .fdi-ins-i { white-space: nowrap; flex: 0 0 auto; }
    .fdi-main { margin-top: 10px; }
    .fdi-filt { padding: 8px 10px; }
    .fdi-filt-row:first-child { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
    .fdi-filt-row:first-child::-webkit-scrollbar { display: none; }
    .fdi-chip { flex: 0 0 auto; }
    .fdi-muted { white-space: nowrap; }
    .fdi-search { flex: 1 1 100%; min-width: 0; }
    .fdi-search-hint { display: none; }
    .fdi-period { width: 100%; }
    .fdi-period .fdi-date { flex: 1; width: auto; min-width: 0; }
    .fdi-tbody { padding: 0 10px 10px; }
    .fdi-table { min-width: 560px; font-size: 12.5px; }
    .fdi-table td { padding: 8px 7px; }
    .fdi-pag { padding: 7px 10px; font-size: 11.5px; }
}

/* ============================================================
 * gen-section — seção colapsável do gerador (type: form_section v2)
 * Agrupa os campos seguintes (até o próximo form_section) numa seção
 * de largura cheia, recolhível, com ícone + cor + descrição.
 * Variantes: subtle | solid | line | card. Cores tema-aware.
 * Estado do form: .gen-form-novo recolhe .gen-adv (via JS) e oculta o banner de topo.
 * Tons do tema do sistema (não usar --cly-*); dark via .app_theme_dark.
 * ============================================================ */
.gen-section { width: 100%; margin: 12px 0 8px; border-radius: 9px; }
.gen-section-head { display: flex; align-items: center; gap: 10px; padding: 11px 14px; cursor: pointer; -webkit-user-select: none; user-select: none; }
.gen-section-tx { display: flex; flex-direction: column; }
.gen-section-ic { width: 30px; height: 30px; border-radius: 7px; display: flex; align-items: center; justify-content: center; background: rgba(140,140,140,.14); }
.gen-section-ic .material-icons { font-size: 18px; line-height: 1; color: #616161; }
.gen-section-ti { font-size: 15px; font-weight: 600; color: #383838; letter-spacing: .2px; }
.gen-section-de { font-size: 12.5px; color: #8a8a8a; margin-top: 2px; }
.gen-section-chev { margin-left: auto; color: #9e9e9e; font-size: 20px; transition: transform .2s; }
.gen-section-body { padding: 4px 14px 12px; }
/* neutraliza o gutter negativo da uk-grid aninhada (evita conteúdo colado/estourando à esquerda) */
.gen-section-body > .gen-section-grid { margin-left: -8px; margin-right: -8px; margin-top: 0; }
.gen-section-body > .gen-section-grid > [class*="uk-width"] { padding-left: 8px; box-sizing: border-box; }
.gen-section.gen-collapsed .gen-section-chev { transform: rotate(180deg); }
.gen-section.gen-collapsed .gen-section-body { display: none; }

/* variantes */
.gen-section.gen-v-solid { background: #f5f5f5; border: 1px solid #e0e0e0; }
.gen-section.gen-v-card { background: #fff; border: 1px solid #e0e0e0; }
.gen-section.gen-v-subtle > .gen-section-head { border-bottom: 1px solid #ededed; }
.gen-section.gen-v-line > .gen-section-head { border-bottom: 1px solid #e0e0e0; }

/* acento de cor (borda esquerda + ícone) */
.gen-section[class*='gen-cor-'] { border-left: 3px solid #b0b0b0; }
.gen-cor-teal  { border-left-color: #26a69a; } .gen-cor-teal  > .gen-section-head .gen-section-ic { background: rgba(38,166,154,.14); } .gen-cor-teal  > .gen-section-head .gen-section-ic .material-icons { color: #1d9e75; }
.gen-cor-amber { border-left-color: #c9a227; } .gen-cor-amber > .gen-section-head .gen-section-ic { background: rgba(201,162,39,.14); } .gen-cor-amber > .gen-section-head .gen-section-ic .material-icons { color: #b07f12; }
.gen-cor-green { border-left-color: #66bb6a; } .gen-cor-green > .gen-section-head .gen-section-ic { background: rgba(102,187,106,.14); } .gen-cor-green > .gen-section-head .gen-section-ic .material-icons { color: #3b8a3f; }
.gen-cor-blue  { border-left-color: #4a90d9; } .gen-cor-blue  > .gen-section-head .gen-section-ic { background: rgba(74,144,217,.14); } .gen-cor-blue  > .gen-section-head .gen-section-ic .material-icons { color: #2a6bb0; }
.gen-cor-gray  { border-left-color: #9e9e9e; } .gen-cor-gray  > .gen-section-head .gen-section-ic { background: rgba(140,140,140,.16); } .gen-cor-gray  > .gen-section-head .gen-section-ic .material-icons { color: #6e6e6e; }

/* tema escuro */
.app_theme_dark .gen-section-ti { color: #e6e6e6; }
.app_theme_dark .gen-section-de { color: #9e9e9e; }
.app_theme_dark .gen-section-ic .material-icons { color: #bdbdbd; }
.app_theme_dark .gen-section.gen-v-solid { background: #383838; border-color: #565656; }
.app_theme_dark .gen-section.gen-v-card { background: #3a3a3a; border-color: #4a4a4a; }
.app_theme_dark .gen-section.gen-v-subtle > .gen-section-head,
.app_theme_dark .gen-section.gen-v-line > .gen-section-head { border-color: #4a4a4a; }
.app_theme_dark .gen-cor-teal  > .gen-section-head .gen-section-ic .material-icons { color: #2bbbad; }
.app_theme_dark .gen-cor-amber > .gen-section-head .gen-section-ic .material-icons { color: #d4a92a; }
.app_theme_dark .gen-cor-green > .gen-section-head .gen-section-ic .material-icons { color: #66bb6a; }
.app_theme_dark .gen-cor-blue  > .gen-section-head .gen-section-ic .material-icons { color: #5b9bdf; }
.app_theme_dark .gen-cor-gray  > .gen-section-head .gen-section-ic .material-icons { color: #aaa; }

/* estado do formulário: novo oculta o banner de topo (recolher .gen-adv é via JS, p/ continuar clicável) */
.gen-form-novo .gen-banner-topo { display: none; }

@media (max-width: 600px) {
    .gen-section { margin: 10px 0 6px; }
    .gen-section-body { padding: 2px 8px 10px; }
}

/* ============================================================
 * fd_produto — elementos premium do cadastro (injetados por fd_produto_navigation.js)
 * Visibilidade por estado: hero e controla-estoque só aparecem em .gen-form-novo.
 * ============================================================ */
/* alinhamento: os campos do fd_produto só têm cards full-width -> remove o gutter
 * negativo da uk-grid raiz para o fundo dos cards não vazar 25px à esquerda */
#mod_fd_produto .fd_produto_campos { margin-left: 0; margin-right: 0; }
#mod_fd_produto .fd_produto_campos > [class*="uk-width"] { padding-left: 0; padding-right: 0; }

/* topo do novo produto: hero + controla estoque COMPACTO lado a lado (só em .gen-form-novo) */
.fd-ptop { display: none; }
.gen-form-novo .fd-ptop { display: flex; gap: 12px; align-items: stretch; flex-wrap: wrap; margin: 8px 0 12px; }
.fd-pnovo-hero { flex: 1; min-width: 240px; display: flex; align-items: center; gap: 12px; background: #eef7f5; border: 1px solid #b6e0d8; border-radius: 11px; padding: 12px 15px; }
.fd-pnovo-hero .fd-ph-ic { width: 36px; height: 36px; border-radius: 10px; background: #26a69a; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-pnovo-hero .fd-ph-ic .material-icons { color: #fff; font-size: 20px; }
.fd-pnovo-hero .fd-ph-t { font-size: 15px; font-weight: 500; color: #1d6b60; }
.fd-pnovo-hero .fd-ph-s { font-size: 14px; color: #4f8a82; }
.fd-pctrl { display: flex; align-items: center; gap: 14px; background: #f1f8f1; border: 1px solid #c3e6c4; border-radius: 11px; padding: 10px 14px; flex: 0 0 auto; }
.fd-pctrl-q { display: flex; align-items: center; gap: 9px; }
.fd-pctrl-ic { width: 30px; height: 30px; border-radius: 8px; background: rgba(102,187,106,.18); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-pctrl-ic .material-icons { color: #3b8a3f; font-size: 18px; }
.fd-pctrl-q b { font-size: 13px; color: #2c2c2a; display: block; }
.fd-pctrl-q span { font-size: 13px; color: #5f5e5a; }
.fd-pctrl-seg { display: flex; gap: 6px; }
.fd-pctrl-seg button { font-size: 12px; padding: 7px 13px; border-radius: 8px; border: 1px solid #d3d1c7; background: #fff; color: #5f5e5a; cursor: pointer; }
.fd-pctrl-seg button.on { background: #66bb6a; color: #10240f; border-color: #66bb6a; font-weight: 500; }
.app_theme_dark .fd-pnovo-hero { background: #343d3d; border-color: #2bbbad55; }
.app_theme_dark .fd-pnovo-hero .fd-ph-t { color: #fff; }
.app_theme_dark .fd-pnovo-hero .fd-ph-s { color: #bfd8d3; }
.app_theme_dark .fd-pctrl { background: #2f3a30; border-color: #3f5a40; }
.app_theme_dark .fd-pctrl-q b { color: #fff; }
.app_theme_dark .fd-pctrl-q span { color: #9e9e9e; }
.app_theme_dark .fd-pctrl-ic { background: rgba(102,187,106,.16); }
.app_theme_dark .fd-pctrl-ic .material-icons { color: #66bb6a; }
.app_theme_dark .fd-pctrl-seg button { background: #2a2a2a; border-color: #4d4d4d; color: #bbb; }
.app_theme_dark .fd-pctrl-seg button.on { background: #66bb6a; color: #10240f; border-color: #66bb6a; }
@media (max-width: 600px) {
    .gen-form-novo .fd-ptop { flex-direction: column; }
    .fd-pctrl { justify-content: space-between; }
}

/* ============================================================
 * CABEÇALHO DA TELA (fd-pghead) — gerado por gerador.php no lugar do
 * antigo <ul id="breadcrumbs">. Ícone do módulo (Modulo.IconeMaterial) +
 * nome do módulo (eyebrow) + título da tela. Genérico p/ todas as telas.
 * ============================================================ */
.fd-pghead { display: flex; align-items: center; gap: 11px; padding: 11px 14px 11px 8px; }
.fd-pghead .fd-pghead-ic { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 11px; display: flex; align-items: center; justify-content: center; background: rgba(38,166,154,.12); box-shadow: inset 0 0 0 1px rgba(38,166,154,.22); }
.fd-pghead .fd-pghead-ic .material-icons { color: #1d8a7e; font-size: 23px; }
.fd-pghead .fd-pghead-crumb { display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: #98a0ab; line-height: 1; margin-bottom: 6px; }
.fd-pghead .fd-pghead-crumb a { color: #5b6270; text-decoration: none; }
.fd-pghead .fd-pghead-crumb a:hover { color: #1d8a7e; }
.fd-pghead .fd-pghead-sep { font-size: 15px; color: #b7bcc4; }
.fd-pghead .fd-pghead-title { font-size: 19px; font-weight: 700; letter-spacing: -.2px; line-height: 1.1; color: #262a30; }
.app_theme_dark .fd-pghead .fd-pghead-ic { background: rgba(43,187,173,.16); box-shadow: inset 0 0 0 1px rgba(43,187,173,.28); }
.app_theme_dark .fd-pghead .fd-pghead-ic .material-icons { color: #2ec9bd; }
.app_theme_dark .fd-pghead .fd-pghead-crumb a { color: #b7b7b7; }
.app_theme_dark .fd-pghead .fd-pghead-crumb a:hover { color: #2ec9bd; }
.app_theme_dark .fd-pghead .fd-pghead-title { color: #e6e6e6; }
.app_theme_dark .fd-pghead .fd-pghead-sep { color: #6f6f6f; }
@media (max-width: 600px) {
    .fd-pghead .fd-pghead-ic { width: 36px; height: 36px; }
    .fd-pghead .fd-pghead-title { font-size: 17px; }
    #page_content_inner { padding-left: 6px; padding-right: 6px; }
}

/* ============================================================
 * TELA DE LISTAGEM DO GERADOR — header e datatable em CARDS separados,
 * com respiro e leve destaque. Marcador .fd-list-card no .md-card da lista
 * (application/views/site_template/page_content.php).
 * ============================================================ */
/* Fonte: o sistema pede Roboto mas ela não está carregada (sem @font-face) e
 * caía num fallback defasado. Stack nativa (Segoe UI no Windows). Ícones têm
 * font-family própria ('Material Icons'/fa/uk-icon) e NÃO são afetados. */
body, input, select, textarea, button, .md-input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important; }
/* fundo sutil da área de conteúdo p/ os cards saltarem (claro); no escuro a
 * página #303030 já contrasta com os cards #424242 */
#page_content_inner { background: #f0f1f3; padding: 6px 8px 20px; }
.app_theme_dark #page_content_inner { background: #303030; }
/* o .md-card da lista deixa de ser card (container transparente) e neutraliza o
 * border-left:outset legado; toolbar (header) e content (datatable) viram cards */
.fd-list-card { background: transparent !important; box-shadow: none !important; border: 0 !important; }
.fd-list-card > .md-card-toolbar,
.fd-list-card > .md-card-content { background: #fff; border: 1px solid #e6e8ec; border-radius: 12px; box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 3px 10px rgba(0,0,0,.035); }
.app_theme_dark .fd-list-card > .md-card-toolbar,
.app_theme_dark .fd-list-card > .md-card-content { background: #424242; border-color: #565656; box-shadow: 0 1px 2px rgba(0,0,0,.25), 0 3px 10px rgba(0,0,0,.2); }
.fd-list-card > .md-card-toolbar { margin-bottom: 6px; }
.fd-list-card > .md-card-toolbar .md-card-toolbar-heading-text { margin: 0; }
.fd-list-card > .md-card-content { padding: 6px 10px 4px; overflow: hidden; }
/* paginação em pills (escopada à lista, não afeta tabelas-detalhe em formulários) */
.fd-list-card .uk-pagination { display: flex; gap: 5px; justify-content: flex-end; padding: 0; margin: 0; }
.fd-list-card .uk-pagination > li { margin: 0; }
.fd-list-card .uk-pagination > li > a { min-width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; border: 1px solid #e6e8ec; background: #fff; color: #5b6270; font-size: 12.5px; padding: 0 9px; line-height: 1; }
.fd-list-card .uk-pagination > li > a:hover { border-color: #127e78; color: #127e78; }
.fd-list-card .uk-pagination > li.uk-active > a { background: #127e78; color: #fff; border-color: #127e78; font-weight: 600; }
.fd-list-card .uk-pagination > li.uk-disabled > a { color: #c2c7ce; border-color: transparent; background: transparent; }
.app_theme_dark .fd-list-card .uk-pagination > li > a { background: #424242; border-color: #565656; color: #c9c9c9; }
.app_theme_dark .fd-list-card .uk-pagination > li.uk-active > a { background: #2ec9bd; color: #0d2b28; border-color: #2ec9bd; }
.app_theme_dark .fd-list-card .uk-pagination > li.uk-disabled > a { color: #6f6f6f; background: transparent; }

/* ============================================================
 * SKELETON DE CARREGAMENTO DO DATATABLE — injetado no tbody por
 * cly_datatables.js durante o processing.dt. Só as linhas (o chrome
 * nasce do servidor). Substitui o spinner central nas telas do gerador.
 * ============================================================ */
.dt-uikit .dataTables_processing { display: none !important; }
.fd-skel-row td { padding: 12px 14px !important; border-bottom: 1px solid rgba(0,0,0,.05) !important; }
.app_theme_dark .fd-skel-row td { border-bottom-color: rgba(255,255,255,.06) !important; }
.fd-skel { display: block; height: 12px; width: 70%; border-radius: 6px; background: #e9edf1; position: relative; overflow: hidden; }
.fd-skel-row td:first-child .fd-skel { width: 45%; }
.fd-skel-row td:nth-child(4) .fd-skel { width: 90%; }
.fd-skel-row:nth-child(odd) .fd-skel { width: 60%; }
.fd-skel-row:nth-child(odd) td:nth-child(4) .fd-skel { width: 78%; }
.app_theme_dark .fd-skel { background: #4a4a4a; }
.fd-skel::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: fd-skel-shimmer 1.2s infinite; }
.app_theme_dark .fd-skel::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent); }
@keyframes fd-skel-shimmer { 100% { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { .fd-skel::after { animation: none; } }

/* bloco de preço PREMIUM (custo -> markup -> venda) — recebe os CAMPOS REAIS realocados */
.fd-pprice { background: #f7f6f3; border: 1px solid #e4e1da; border-left: 3px solid #c9a227; border-radius: 9px; padding: 12px 14px; margin: 0 0 14px; }
.fd-pprice.loss { border-left-color: #e53935; }
.fd-pprice .fd-pp-row { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.fd-pprice .fd-pp-i { display: flex; flex-direction: column; gap: 5px; }
.fd-pprice .fd-pp-lb { font-size: 14px; color: #8a8780; display: flex; align-items: center; gap: 4px; }
.fd-pprice .fd-pp-edit { font-size: 13px; color: #26a69a; }
.fd-pprice .fd-pp-slot { flex: 0 0 auto; width: auto !important; padding: 0 !important; margin: 0 !important; }
/* limpa o chrome dos campos reais realocados */
.fd-pprice .fd-pp-slot label { display: none !important; }
.fd-pprice .fd-pp-slot .md-input-bar { display: none !important; }
.fd-pprice .fd-pp-slot .md-input-wrapper { margin: 0 !important; padding: 0 !important; min-height: 0 !important; display: block !important; }
.fd-pprice .fd-pp-slot .md-input-wrapper:empty { display: none !important; }
.fd-pprice .fd-pp-slot .parsley-row, .fd-pprice .fd-pp-slot .uk-input-group { margin: 0 !important; }
.fd-pprice .fd-pp-slot .btn_desconto_mod_item { display: none !important; }
.fd-pprice .fd-pp-slot input.md-input { width: 128px; height: 40px; background: #fff; border: 1px solid #d8d6d0; border-radius: 6px; padding: 6px 10px; color: #333; font-size: 15px; box-sizing: border-box; }
.fd-pprice .fd-pp-slot.big input.md-input { width: 150px; background: #26a69a; border-color: #26a69a; color: #fff; font-weight: 600; font-size: 16px; }
.fd-pprice.loss .fd-pp-slot.big input.md-input { background: #e53935; border-color: #e53935; }
.fd-pprice .fd-pp-mkin { width: 96px; height: 40px; padding: 6px 10px; border: 1px solid #d8d6d0; border-radius: 6px; background: #fff; color: #333; font-size: 15px; text-align: right; box-sizing: border-box; }
.fd-pprice .fd-pp-op { color: #a8a6a0; padding-bottom: 9px; }
/* resultados (margem/lucro/saúde) colados na venda */
.fd-pprice .fd-pp-res { display: flex; align-items: center; gap: 14px; margin-left: 6px; padding-left: 14px; border-left: 1px dashed #dcdcd6; }
.fd-pprice .fd-pp-rl { font-size: 14px; color: #8a8780; display: block; }
.fd-pprice .fd-pp-rv { font-size: 17px; font-weight: 500; color: #3b8a3f; }
.fd-pprice .fd-pp-health { font-size: 14px; padding: 4px 10px; border-radius: 12px; display: inline-flex; align-items: center; gap: 5px; }
.fd-pprice .fd-pp-health .material-icons { font-size: 14px; }
.fd-pprice .fd-pp-health.ok { background: rgba(102,187,106,.16); color: #3b8a3f; }
.fd-pprice .fd-pp-health.warn { background: rgba(201,162,39,.16); color: #b07f12; }
.fd-pprice .fd-pp-health.bad { background: rgba(229,57,53,.16); color: #c0392b; }
/* aviso (prejuízo / margem baixa) */
.fd-pprice .fd-pp-warn { display: none; margin-top: 11px; font-size: 12px; border-radius: 8px; padding: 9px 12px; background: rgba(229,57,53,.12); color: #c0392b; border: 1px solid #e7a9a4; align-items: center; gap: 7px; }
.fd-pprice .fd-pp-warn.show { display: flex; }
.fd-pprice .fd-pp-warn .material-icons { font-size: 16px; }
/* barra de zonas (prejuízo / baixa / saudável) */
.fd-pprice .fd-pp-bar { position: relative; height: 8px; border-radius: 5px; margin: 12px 0 4px; overflow: hidden; display: flex; }
.fd-pprice .fd-pp-bar .z { height: 100%; }
.fd-pprice .fd-pp-bar .z1 { width: 18%; background: rgba(229,115,115,.45); }
.fd-pprice .fd-pp-bar .z2 { width: 22%; background: rgba(201,162,39,.45); }
.fd-pprice .fd-pp-bar .z3 { flex: 1; background: rgba(102,187,106,.35); }
.fd-pprice .fd-pp-barfill { position: absolute; left: 0; top: 0; height: 8px; border-radius: 5px; width: 2%; background: #66bb6a; transition: width .15s, background .15s; }
/* ferramentas (atalhos, markup x margem, preço mínimo) */
.fd-pprice .fd-pp-tools { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #e4e1da; padding-top: 11px; margin-top: 8px; }
.fd-pprice .fd-pp-tr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fd-pprice .fd-pp-tr.alt { gap: 16px; }
.fd-pprice .fd-pp-tlb { font-size: 14px; color: #8a8780; }
.fd-pprice .fd-pp-chip { font-size: 14px; border-radius: 14px; padding: 6px 12px; cursor: pointer; border: 1px solid #dcdad4; background: #fff; color: #555; }
.fd-pprice .fd-pp-alt { font-size: 12.5px; color: #7c7a73; display: inline-flex; align-items: center; gap: 5px; }
.fd-pprice .fd-pp-alt b { color: #3a3a3a; font-weight: 600; }
.fd-pprice .fd-pp-alt .material-icons { font-size: 15px; color: #a8a6a0; }
/* sugestão pela tabela do grupo */
.fd-pprice .fd-pp-sug { background: rgba(38,166,154,.08); border: 1px solid #b6e0d8; border-radius: 8px; padding: 7px 11px; align-items: center; }
.fd-pprice .fd-pp-sugtxt { font-size: 12px; color: #1d6b60; }
.fd-pprice .fd-pp-sugtxt b { color: #0f6e56; }
.fd-pprice .fd-pp-chip.apply { background: #26a69a; border-color: #26a69a; color: #fff; margin-left: auto; }
.app_theme_dark .fd-pprice .fd-pp-sug { background: rgba(38,166,154,.12); border-color: #2bbbad44; }
.app_theme_dark .fd-pprice .fd-pp-sugtxt { color: #a7e3db; }
.app_theme_dark .fd-pprice .fd-pp-sugtxt b { color: #2bbbad; }

/* PRODUTO NOVO: precificação reduzida a UMA linha (custo -> markup = venda + resultado).
   Esconde barra de zonas, ferramentas (atalhos / markup x margem / preço mínimo), sugestão e aviso.
   Produto já cadastrado mantém o card completo. */
.gen-form-novo .fd-pprice .fd-pp-bar,
.gen-form-novo .fd-pprice .fd-pp-tools,
.gen-form-novo .fd-pprice .fd-pp-sug,
.gen-form-novo .fd-pprice .fd-pp-warn { display: none !important; }
.gen-form-novo .fd-pprice { padding: 10px 14px; }

/* ============================================================
 * Header compacto de KPIs do produto (topo — só produto existente)
 * ============================================================ */
.fd-resumo-prod { background: #f4f5f6; border: 1px solid #e3e3e3; border-radius: 10px; padding: 16px 20px; margin: 8px 0 14px; }
/* restaura o padding lateral do card (a regra de alinhamento da grid zera padding-left/right dos filhos uk-width) */
#mod_fd_produto .fd_produto_campos > .fd-resumo-prod { padding-left: 20px; padding-right: 20px; }
/* Id do produto — badge maior/legível (escopado ao fd_produto; o .uk-badge do Id é genérico) */
#mod_fd_produto .span_id_campo_gen .uk-badge { font-size: 12px; font-weight: 600; padding: 4px 10px; line-height: 1.4; border-radius: 6px; }
.fd-resumo-prod .fd-rp-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.fd-resumo-prod .fd-rp-ic { width: 28px; height: 28px; border-radius: 7px; background: rgba(38,166,154,.16); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-resumo-prod .fd-rp-ic .material-icons { color: #1d9e75; font-size: 16px; }
.fd-resumo-prod .fd-rp-tt { font-size: 14px; font-weight: 500; color: #222; }
.fd-resumo-prod .fd-rp-sub { font-size: 12px; color: #9e9e9e; font-weight: 400; }
.fd-resumo-prod .fd-rp-chips { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.fd-resumo-prod .fd-rp-chip { font-size: 12px; padding: 4px 11px; border-radius: 20px; display: inline-flex; align-items: center; gap: 5px; background: #eceef0; color: #5f5e5a; }
.fd-resumo-prod .fd-rp-chip .material-icons { font-size: 14px; }
.fd-resumo-prod .fd-rp-chip.ok { background: rgba(38,166,154,.16); color: #0f6e56; }
.fd-resumo-prod .fd-rp-chip.warn { background: rgba(201,162,39,.18); color: #8a6d10; }
.fd-resumo-prod .fd-rp-chip.bad { background: rgba(229,57,53,.16); color: #c0392b; }
.fd-resumo-prod .fd-rp-strip { display: flex; align-items: center; gap: 16px 26px; margin-top: 14px; padding-top: 13px; border-top: 1px solid #e8e8e8; flex-wrap: wrap; }
.fd-resumo-prod .fd-rp-seg { display: flex; align-items: center; gap: 18px; }
.fd-resumo-prod .fd-rp-dts { margin-left: auto; }
.fd-resumo-prod .fd-rp-div { display: none; }
.fd-resumo-prod .fd-rp-segl { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: #9e9e9e; }
.fd-resumo-prod .fd-rp-kpi { display: flex; flex-direction: column; gap: 2px; }
.fd-resumo-prod .fd-rp-kl { font-size: 11.5px; color: #8f8f8f; }
.fd-resumo-prod .fd-rp-kv { font-size: 18px; font-weight: 600; color: #222; }
.fd-resumo-prod .fd-rp-kv.pos { color: #3b8a3f; }
.fd-resumo-prod .fd-rp-kv.ok { color: #0f6e56; }
.fd-resumo-prod .fd-rp-kv.warn { color: #b07f12; }
.fd-resumo-prod .fd-rp-kv.neg { color: #c0392b; }
.fd-resumo-prod .fd-rp-div { width: 1px; align-self: stretch; background: #e3e3e3; }
.fd-resumo-prod .fd-rp-dts { flex-direction: column; align-items: flex-start; gap: 3px; }
.fd-resumo-prod .fd-rp-dt { font-size: 14px; color: #9e9e9e; }
.fd-resumo-prod .fd-rp-dt b { color: #555; }
.fd-resumo-prod .fd-rp-dt .material-icons { font-size: 12px; vertical-align: -1px; }
.fd-resumo-prod .fd-rp-skel { display: inline-block; width: 46px; height: 14px; border-radius: 4px; background: linear-gradient(90deg, #e0e0e0 25%, #eee 37%, #e0e0e0 63%); background-size: 400% 100%; animation: fdRpShimmer 1.2s ease infinite; vertical-align: middle; }
.fd-resumo-prod .fd-rp-skel.sm { width: 36px; height: 11px; }
@keyframes fdRpShimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.app_theme_dark .fd-resumo-prod { background: #383838; border-color: #4d4d4d; }
.app_theme_dark .fd-resumo-prod .fd-rp-tt { color: #fff; }
.app_theme_dark .fd-resumo-prod .fd-rp-ic .material-icons { color: #2bbbad; }
.app_theme_dark .fd-resumo-prod .fd-rp-chip { background: #2e2e2e; color: #9e9e9e; }
.app_theme_dark .fd-resumo-prod .fd-rp-chip.ok { color: #2bbbad; }
.app_theme_dark .fd-resumo-prod .fd-rp-chip.warn { color: #d4a92a; }
.app_theme_dark .fd-resumo-prod .fd-rp-chip.bad { color: #e57373; }
.app_theme_dark .fd-resumo-prod .fd-rp-strip { border-color: #4a4a4a; }
.app_theme_dark .fd-resumo-prod .fd-rp-kv { color: #e8e8e8; }
.app_theme_dark .fd-resumo-prod .fd-rp-kv.pos, .app_theme_dark .fd-resumo-prod .fd-rp-kv.ok { color: #66bb6a; }
.app_theme_dark .fd-resumo-prod .fd-rp-kv.warn { color: #d4a92a; }
.app_theme_dark .fd-resumo-prod .fd-rp-kv.neg { color: #e57373; }
.app_theme_dark .fd-resumo-prod .fd-rp-div { background: #4a4a4a; }
.app_theme_dark .fd-resumo-prod .fd-rp-dt b { color: #bdbdbd; }
.app_theme_dark .fd-resumo-prod .fd-rp-skel { background: linear-gradient(90deg, #3a3a3a 25%, #474747 37%, #3a3a3a 63%); background-size: 400% 100%; }
@media (max-width: 600px) {
    .fd-resumo-prod .fd-rp-chips { margin-left: 0; width: 100%; }
    .fd-resumo-prod .fd-rp-div { display: none; }
    .fd-resumo-prod .fd-rp-strip, .fd-resumo-prod .fd-rp-seg { gap: 10px 14px; flex-wrap: wrap; }
}
.app_theme_dark .fd-pprice { background: #343331; border-color: #4a4844; border-left-color: #c9a227; }
.app_theme_dark .fd-pprice.loss { border-left-color: #e53935; }
.app_theme_dark .fd-pprice .fd-pp-lb, .app_theme_dark .fd-pprice .fd-pp-rl, .app_theme_dark .fd-pprice .fd-pp-tlb, .app_theme_dark .fd-pprice .fd-pp-alt { color: #9e9e9e; }
.app_theme_dark .fd-pprice .fd-pp-slot input.md-input { background: #262626; color: #e8e8e8; border-color: #565656; }
.app_theme_dark .fd-pprice .fd-pp-slot.big input.md-input { background: #26a69a; border-color: #26a69a; color: #fff; }
.app_theme_dark .fd-pprice.loss .fd-pp-slot.big input.md-input { background: #e53935; border-color: #e53935; }
.app_theme_dark .fd-pprice .fd-pp-mkin { background: #262626; color: #e8e8e8; border-color: #565656; }
.app_theme_dark .fd-pprice .fd-pp-res { border-color: #555; }
.app_theme_dark .fd-pprice .fd-pp-chip { background: #2a2a2a; border-color: #4d4d4d; color: #cfcfcf; }
.app_theme_dark .fd-pprice .fd-pp-alt b { color: #e8e8e8; }
.app_theme_dark .fd-pprice .fd-pp-tools { border-color: #4a4844; }
.app_theme_dark .fd-pprice .fd-pp-health.ok { color: #66bb6a; }
.app_theme_dark .fd-pprice .fd-pp-health.warn { color: #d4a92a; }
.app_theme_dark .fd-pprice .fd-pp-health.bad { color: #e57373; }
.app_theme_dark .fd-pprice .fd-pp-warn { color: #e57373; border-color: #7a3b3b; }
@media (max-width: 600px) {
    .fd-pnovo-hero, .fd-pctrl-seg { flex-direction: column; align-items: stretch; }
    .gen-form-novo .fd-pctrl { align-items: stretch; }
    .fd-pctrl-seg { margin-left: 0; }
    .fd-pprice .fd-pp-row { flex-direction: column; align-items: stretch; }
    .fd-pprice .fd-pp-op { display: none; }
    .fd-pprice .fd-pp-res { margin-left: 0; padding-left: 0; border-left: none; border-top: 1px dashed #e0d29a; padding-top: 10px; }
    .fd-pprice .fd-pp-slot input.md-input, .fd-pprice .fd-pp-slot.big input.md-input, .fd-pprice .fd-pp-mkin { width: 100%; }
    .fd-pprice .fd-pp-tr.alt { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* =========================================================================
   Boletos CrediSIS — repaginação da listagem (SYS) — escopo .fd-bol-*
   Componentes na própria tela: usam tons do TEMA do sistema (não --cly-*).
   ========================================================================= */
.fd-bol-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 10px; margin: 0 0 12px; }
.fd-bol-kpi { background: #fafafa; border: 1px solid #e6e6e6; border-radius: 8px; padding: 10px 14px; }
.fd-bol-kpi .fd-bol-kpi-lbl { font-size: 12px; color: #777; margin-bottom: 2px; }
.fd-bol-kpi .fd-bol-kpi-val { font-size: 22px; font-weight: 500; color: #303030; line-height: 1.1; }
.fd-bol-kpi.is-ok   .fd-bol-kpi-val { color: #2e7d32; }
.fd-bol-kpi.is-info .fd-bol-kpi-val { color: #1565c0; }
.fd-bol-kpi.is-bad  .fd-bol-kpi-val { color: #c62828; }
.app_theme_dark .fd-bol-kpi { background: #424242; border-color: #565656; }
.app_theme_dark .fd-bol-kpi .fd-bol-kpi-lbl { color: #9e9e9e; }
.app_theme_dark .fd-bol-kpi .fd-bol-kpi-val { color: #e0e0e0; }
.app_theme_dark .fd-bol-kpi.is-ok   .fd-bol-kpi-val { color: #81c784; }
.app_theme_dark .fd-bol-kpi.is-info .fd-bol-kpi-val { color: #64b5f6; }
.app_theme_dark .fd-bol-kpi.is-bad  .fd-bol-kpi-val { color: #e57373; }

/* Badge de status na grade */
.fd-bol-badge { display: inline-block; font-size: 14px; font-weight: 500; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.fd-bol-badge.st-gerado    { background: #e8f5e9; color: #2e7d32; }
.fd-bol-badge.st-baixado   { background: #e3f2fd; color: #1565c0; }
.fd-bol-badge.st-cancelado { background: #eeeeee; color: #555; }
.fd-bol-badge.st-rejeitado { background: #ffebee; color: #c62828; }
.fd-bol-badge.st-pendente  { background: #fff8e1; color: #8d6e00; }
.app_theme_dark .fd-bol-badge.st-gerado    { background: #1b3a1e; color: #a5d6a7; }
.app_theme_dark .fd-bol-badge.st-baixado   { background: #0c2b4c; color: #90caf9; }
.app_theme_dark .fd-bol-badge.st-cancelado { background: #3a3a3a; color: #bdbdbd; }
.app_theme_dark .fd-bol-badge.st-rejeitado { background: #4a1c1c; color: #ef9a9a; }
.app_theme_dark .fd-bol-badge.st-pendente  { background: #4a3c12; color: #ffd54f; }

/* Código único truncado + copiar */
.fd-bol-cod { font-family: monospace; color: #555; }
.fd-bol-cod-copy { font-size: 15px; vertical-align: middle; color: #9e9e9e; cursor: pointer; margin-left: 4px; }
.fd-bol-cod-copy:hover { color: #1565c0; }
.app_theme_dark .fd-bol-cod { color: #bdbdbd; }
.app_theme_dark .fd-bol-cod-copy { color: #8a8a8a; }
.app_theme_dark .fd-bol-cod-copy:hover { color: #64b5f6; }

/* =========================================================================
   cly.loading_etapas — overlay de loading robusto (modal): usa --cly-* tokens
   ========================================================================= */
.cly-le-overlay { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(8,10,14,.70); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); padding: 20px; }
.cly-le-box { width: 340px; max-width: 92vw; background: var(--cly-surface, #2d2d2d); color: var(--cly-text, #e0e0e0); border: 1px solid var(--cly-border, #444); border-radius: 12px; padding: 22px 22px 18px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
body:not(.app_theme_dark) .cly-le-box { background: #fff; color: #303030; border-color: #e0e0e0; }
.cly-le-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.cly-le-main.material-icons { font-size: 26px; color: #1e88e5; }
.cly-le-htxt { min-width: 0; }
.cly-le-title { font-size: 15px; font-weight: 500; }
.cly-le-sub { font-size: 12px; opacity: .7; margin-top: 1px; min-height: 14px; }
.cly-le-steps { display: flex; flex-direction: column; gap: 10px; }
.cly-le-step { display: flex; align-items: center; gap: 10px; font-size: 13px; opacity: .55; }
.cly-le-step.is-active { opacity: 1; font-weight: 500; }
.cly-le-step.is-done { opacity: .85; }
.cly-le-ic.material-icons { font-size: 18px; color: inherit; }
.cly-le-step.is-active .cly-le-ic.material-icons { color: #1e88e5; }
.cly-le-step.is-done .cly-le-ic.material-icons { color: #2e7d32; }
.app_theme_dark .cly-le-step.is-done .cly-le-ic.material-icons { color: #81c784; }
.cly-le-spin { animation: clyLeSpin 1.05s linear infinite; }
@keyframes clyLeSpin { to { transform: rotate(360deg); } }

/* =========================================================================
   cly_lista — listagem genérica (extensão do gerador, sem DataTable).
   Chrome renderizado pelo servidor; cly_lista é o motor (dados via ajax).
   ========================================================================= */
.clylt { margin: 6px 0 10px; }
.clylt * { box-sizing: border-box; }
.clylt-panel { background: #fff; border: 1px solid #d4d9e0; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(16,24,40,.05); font-size: 13px; }
.clylt-head { display: flex; align-items: center; gap: 10px; padding: 13px 14px 9px; flex-wrap: wrap; }
.clylt-ic { width: 26px; height: 26px; border-radius: 7px; background: #e3f2fd; color: #1565c0; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.clylt-ic .material-icons { font-size: 16px; }
.clylt-tit { font-size: 14.5px; font-weight: 700; color: #101828; }
.clylt-tag { font-size: 14px; color: #667085; border: 1px solid #d6dbe2; border-radius: 5px; padding: 1px 7px; letter-spacing: .4px; }
.clylt-sp { flex: 1; }
.clylt-btns { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.clylt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 38px; padding: 0 16px; border-radius: 9px; border: 1px solid transparent; font-size: 13px; font-weight: 600; cursor: pointer; line-height: 1; white-space: nowrap; transition: background .15s ease, box-shadow .15s ease, transform .05s ease, border-color .15s ease; }
.clylt-btn .material-icons { font-size: 18px; }
.clylt-btn:active { transform: translateY(1px); }
.clylt-btn-primary { background: #1c6fd0; color: #fff; font-weight: 500; border-color: #1a63bd; box-shadow: 0 2px 5px rgba(28,111,208,.28), inset 0 1px 0 rgba(255,255,255,.20); }
.clylt-btn-primary:hover { background: #1862bd; border-color: #17579f; box-shadow: 0 4px 10px rgba(28,111,208,.30), inset 0 1px 0 rgba(255,255,255,.18); }
.clylt-btn-ghost { border-color: #d4dae2; color: #344054; background: #fff; box-shadow: 0 1px 1px rgba(16,24,40,.04); }
.clylt-btn-ghost:hover { background: #f5f8fc; border-color: #b9c2ce; }
.clylt-btn-ghost .material-icons { color: #1c6fd0; }
/* OS Detalhada — botoes de pecas/desconto (DataTables .md-btn) alinhados ao mesmo visual
   das listas novas (.clylt-btn-primary): tira o material uppercase/glossy e o radius 2px.
   Escopado nas classes dos botoes para nao afetar o .md-btn usado no resto do sistema. */
.md-btn.btnPecas, .md-btn.btnInserirDesconto {
    background: #1c6fd0; color: #fff; border: 1px solid #1a63bd; border-radius: 8px;
    min-height: 38px; min-width: 0; padding: 0 17px;
    text-transform: none !important; font-size: 13px !important; font-weight: 500 !important; line-height: 36px !important;
    box-shadow: 0 2px 5px rgba(28,111,208,.28), inset 0 1px 0 rgba(255,255,255,.20);
    transition: background .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.md-btn.btnPecas:hover, .md-btn.btnPecas:focus,
.md-btn.btnInserirDesconto:hover, .md-btn.btnInserirDesconto:focus {
    background: #1862bd; color: #fff; border-color: #17579f;
    box-shadow: 0 4px 10px rgba(28,111,208,.30), inset 0 1px 0 rgba(255,255,255,.18);
}
.md-btn.btnPecas .material-icons, .md-btn.btnInserirDesconto .material-icons { color: #fff; }
body.app_theme_dark .md-btn.btnPecas, body.app_theme_dark .md-btn.btnInserirDesconto {
    background: #3f82cc; border-color: #356fb0;
    box-shadow: 0 2px 7px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16);
}
body.app_theme_dark .md-btn.btnPecas:hover, body.app_theme_dark .md-btn.btnPecas:focus,
body.app_theme_dark .md-btn.btnInserirDesconto:hover, body.app_theme_dark .md-btn.btnInserirDesconto:focus {
    background: #4a8ed6; border-color: #3f82cc;
    box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16);
}
.clylt-tools { display: flex; align-items: center; gap: 12px; padding: 0 14px 11px; }
.clylt-search { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 11px; border: 1px solid #cfd5dd; border-radius: 8px; background: #fff; flex: 1; max-width: 320px; }
.clylt-search .material-icons { font-size: 17px; color: #98a2b3; }
.clylt-search input { border: 0; outline: 0; background: transparent; font-size: 13px; color: #101828; flex: 1; min-width: 100px; }
.clylt-search input::placeholder { color: #98a2b3; }
.clylt-count { font-size: 12px; color: #667085; white-space: nowrap; margin-left: auto; }
.clylt-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.clylt-tbl th { text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #667085; padding: 9px 10px; background: #f2f4f7; border-top: 1px solid #e4e7ec; border-bottom: 1px solid #e4e7ec; }
.clylt-tbl th.r, .clylt-tbl td.r { text-align: right; }
.clylt-tbl td { padding: 10px; border-bottom: 1px solid #eceef1; color: #1d2433; vertical-align: middle; }
.clylt-tbl tbody tr:hover { background: #f8fafc; }
.clylt-num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.clylt-td-sub { font-weight: 700; color: #101828; }
.clylt-nm { font-weight: 600; color: #101828; }
.clylt-mut { font-size: 14px; color: #98a2b3; margin-top: 1px; }
.clylt-chip { display: inline-flex; align-items: center; font-size: 14px; font-weight: 600; padding: 2px 9px; border-radius: 20px; background: #eef1f5; color: #475467; }
.clylt-chip.azul { background: #e6f0fb; color: #175cd3; }
.clylt-chip.verde { background: #e7f6ec; color: #157347; }
.clylt-chip.ambar { background: #fdf3e2; color: #92510a; }
.clylt-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 600; padding: 2px 8px; border-radius: 6px; background: #fdf3e2; color: #92510a; border: 1px solid #f0dcb6; }
.clylt-badge .material-icons { font-size: 13px; }
.clylt-ref { font-size: 12px; color: #98a2b3; }
.clylt-tbl tr.clylt-amber td { color: #92510a; }
.clylt-acts { display: flex; gap: 5px; }
.clylt-act { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #d4d9e0; background: #fff; color: #475467; cursor: pointer; }
.clylt-act:hover { background: #eef4fb; color: #1c6fd0; border-color: #b9d4f3; }
.clylt-act.danger { color: #b42318; border-color: #f0c6c0; }
.clylt-act.danger:hover { background: #fdecea; border-color: #e6a59c; }
.clylt-act .material-icons { font-size: 16px; }
.clylt-cards { display: none; padding: 4px 12px 2px; }
.clylt-card { border: 1px solid #e4e7ec; border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; }
.clylt-card.clylt-amber { border-color: #f0dcb6; background: #fffaf0; }
.clylt-card-top { display: flex; align-items: flex-start; gap: 10px; }
.clylt-card-tt { flex: 1; font-size: 13.5px; font-weight: 600; color: #101828; }
.clylt-card.clylt-amber .clylt-card-tt { color: #92510a; }
.clylt-card-vw { text-align: right; }
.clylt-card-vl { font-size: 13px; color: #98a2b3; text-transform: uppercase; letter-spacing: .3px; }
.clylt-card-vv { font-size: 16px; font-weight: 700; color: #101828; }
.clylt-card.clylt-amber .clylt-card-vv { color: #92510a; }
.clylt-card-dt { font-size: 12px; color: #5e6c84; margin-top: 6px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.clylt-card-ac { margin-top: 9px; }
.clylt-foot { display: flex; align-items: center; justify-content: flex-end; gap: 12px; padding: 11px 14px; border-top: 2px solid #e4e7ec; background: #fafbfc; }
.clylt-foot-l { font-size: 14px; font-weight: 600; color: #475467; text-transform: uppercase; letter-spacing: .3px; }
.clylt-foot-v { font-size: 16px; font-weight: 700; color: #101828; font-variant-numeric: tabular-nums; }
.clylt-state { display: flex; align-items: center; gap: 14px; padding: 20px 16px; color: #667085; }
.clylt-state-ic { width: 42px; height: 42px; border-radius: 10px; background: #f1f3f6; color: #98a2b3; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.clylt-state-ic .material-icons { font-size: 22px; }
.clylt-state .t { font-size: 13px; font-weight: 600; color: #344054; }
.clylt-state .s { font-size: 12px; color: #667085; margin-top: 2px; }
.clylt-sk { position: relative; overflow: hidden; background: #e7eaee; border-radius: 6px; height: 12px; }
.clylt-sk::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent); animation: clylt-sh 1.25s infinite; }
@keyframes clylt-sh { 100% { transform: translateX(100%); } }
.clylt-skchk { width: 16px; height: 16px; border-radius: 5px; background: #e7eaee; display: inline-block; margin-right: 5px; }
.clylt-pg { display: flex; align-items: center; gap: 6px; }
.clylt-pgi { font-size: 12px; color: #667085; }
.clylt-pgb { width: 30px; height: 30px; border-radius: 7px; border: 1px solid #d4d9e0; background: #fff; color: #475467; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.clylt-pgb[disabled] { opacity: .4; cursor: default; }
.clylt-pgb .material-icons { font-size: 18px; }
/* dark */
body.app_theme_dark .clylt-panel { background: #3f3f3f; border-color: #5a5a5a; box-shadow: none; }
body.app_theme_dark .clylt-ic { background: #1d3a57; color: #7ab8f5; }
body.app_theme_dark .clylt-tit { color: #f3f4f6; }
body.app_theme_dark .clylt-tag { color: #9aa6b4; border-color: #5a5a5a; }
body.app_theme_dark .clylt-btn-primary { background: #3f82cc; color: #fff; border-color: #356fb0; box-shadow: 0 2px 7px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.16); }
body.app_theme_dark .clylt-btn-primary:hover { background: #4a8ed6; border-color: #3f82cc; box-shadow: 0 4px 12px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.16); }
body.app_theme_dark .clylt-btn-ghost { background: #4a4a4a; border-color: #646464; color: #e6e6e6; box-shadow: none; }
body.app_theme_dark .clylt-btn-ghost:hover { background: #545454; border-color: #767676; }
body.app_theme_dark .clylt-btn-ghost .material-icons { color: #8fbef0; }
body.app_theme_dark .clylt-search { background: #4a4a4a; border-color: #646464; }
body.app_theme_dark .clylt-search input { color: #e6e6e6; }
body.app_theme_dark .clylt-search .material-icons { color: #9aa6b4; }
body.app_theme_dark .clylt-count { color: #9aa6b4; }
body.app_theme_dark .clylt-tbl th { color: #9aa6b4; background: #363636; border-color: #525252; }
body.app_theme_dark .clylt-tbl td { color: #e4e7ec; border-bottom-color: #4a4a4a; }
body.app_theme_dark .clylt-tbl tbody tr:hover { background: #474747; }
body.app_theme_dark .clylt-td-sub, body.app_theme_dark .clylt-nm { color: #f3f4f6; }
body.app_theme_dark .clylt-mut, body.app_theme_dark .clylt-ref { color: #8b97a6; }
body.app_theme_dark .clylt-chip { background: #525252; color: #cdd3dc; }
body.app_theme_dark .clylt-chip.azul { background: #28384a; color: #84bcf7; }
body.app_theme_dark .clylt-chip.verde { background: #26402f; color: #6cc985; }
body.app_theme_dark .clylt-chip.ambar { background: #473f2c; color: #f2bd55; }
body.app_theme_dark .clylt-badge { background: #473f2c; color: #f2bd55; border-color: #5c4f33; }
body.app_theme_dark .clylt-tbl tr.clylt-amber td { color: #f2bd55; }
body.app_theme_dark .clylt-act { background: #4a4a4a; border-color: #646464; color: #c6ccd4; }
body.app_theme_dark .clylt-act:hover { background: #3a4a5e; color: #84bcf7; border-color: #3a5573; }
body.app_theme_dark .clylt-act.danger { color: #ef9a8d; border-color: #6a4540; }
body.app_theme_dark .clylt-act.danger:hover { background: #4a3531; border-color: #7d4f48; }
body.app_theme_dark .clylt-card { border-color: #4f4f4f; background: #454545; }
body.app_theme_dark .clylt-card.clylt-amber { border-color: #5c4f33; background: #46402e; }
body.app_theme_dark .clylt-card-tt, body.app_theme_dark .clylt-card-vv { color: #f3f4f6; }
body.app_theme_dark .clylt-card.clylt-amber .clylt-card-tt, body.app_theme_dark .clylt-card.clylt-amber .clylt-card-vv { color: #f2bd55; }
body.app_theme_dark .clylt-card-dt { color: #aab2bd; }
body.app_theme_dark .clylt-foot { background: #363636; border-top-color: #525252; }
body.app_theme_dark .clylt-foot-l { color: #9aa6b4; }
body.app_theme_dark .clylt-foot-v { color: #f3f4f6; }
body.app_theme_dark .clylt-state, body.app_theme_dark .clylt-state .s { color: #9aa6b4; }
body.app_theme_dark .clylt-state-ic { background: #4a4a4a; color: #aab0ba; }
body.app_theme_dark .clylt-state .t { color: #e9ebef; }
body.app_theme_dark .clylt-sk, body.app_theme_dark .clylt-skchk { background: #4d4d4d; }
body.app_theme_dark .clylt-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent); }
body.app_theme_dark .clylt-pgi { color: #9aa6b4; }
body.app_theme_dark .clylt-pgb { background: #4a4a4a; border-color: #646464; color: #c6ccd4; }
@media (max-width: 640px) { .clylt-tblwrap { display: none; } .clylt-cards { display: block; } .clylt-search { max-width: none; } }

/* =====================================================================
 * cly_aut — modal de autorização (Fase 3 · piloto). Escopado em .fd-aut.
 * Vive dentro do cly.mostrar_modal (que já dá bg/tema/z-index). Cores fixas
 * dos botões funcionam sobre claro e escuro; tints têm override no dark.
 * ===================================================================== */
.fd-aut { font-size: 13px; line-height: 1.5; }
.fd-aut .fd-aut-sub { color: #6a6a6a; margin: 0 0 12px; }
.fd-aut .fd-aut-secao-tit { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin: 4px 0 8px; }
.fd-aut .fd-aut-hint { font-size: 11.5px; color: #8a8a8a; margin-top: 6px; }
.fd-aut .fd-aut-ctx { display: flex; gap: 8px; align-items: baseline; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: 8px 10px; margin: 0 0 12px; }
.fd-aut .fd-aut-ctx-lab { font-size: 14px; color: #9a9a9a; }
.fd-aut .fd-aut-msg { font-size: 12.5px; line-height: 1.5; color: #4a4a4a; background: rgba(0,0,0,.03); border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: 9px 11px; margin: 0 0 12px; }
.fd-aut .fd-aut-msg b { font-weight: 500; color: #1a1a1a; }
body.app_theme_dark .fd-aut .fd-aut-msg { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); color: #cfcfcf; }
body.app_theme_dark .fd-aut .fd-aut-msg b { color: #f0f0f0; }
.fd-aut .fd-aut-ctx-val { font-weight: 600; }
.fd-aut .fd-aut-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.fd-aut .fd-aut-field { display: block; }
.fd-aut .fd-aut-field > span { display: block; font-size: 11.5px; color: #7a7a7a; margin-bottom: 3px; }
.fd-aut .fd-aut-input { width: 100%; box-sizing: border-box; border: 1px solid var(--cly-border, #cfcfcf); border-radius: 8px; padding: 9px 10px; font-size: 13px; background: transparent; color: inherit; }
.fd-aut .fd-aut-input:focus { outline: none; border-color: var(--cly-border-focus, #185fa5); }
.fd-aut .fd-aut-textarea { min-height: 54px; resize: vertical; }
.fd-aut .fd-aut-btn { width: 100%; border: none; border-radius: 9px; padding: 11px 14px; font-size: 13px; font-weight: 600; cursor: pointer; margin-top: 12px; transition: filter .12s ease; }
.fd-aut .fd-aut-btn:hover { filter: brightness(1.05); }
.fd-aut .fd-aut-btn:disabled { opacity: .6; cursor: default; }
.fd-aut .fd-aut-btn-success { background: #2e9e5b; color: #fff; }
.fd-aut .fd-aut-btn-primary { background: #185fa5; color: #fff; }
.fd-aut .fd-aut-btn-ghost { background: transparent; color: inherit; border: 1px solid var(--cly-border, #cfcfcf); }
.fd-aut .fd-aut-divisor { display: flex; align-items: center; gap: 10px; margin: 16px 0; color: #9a9a9a; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; }
.fd-aut .fd-aut-divisor::before, .fd-aut .fd-aut-divisor::after { content: ""; flex: 1; height: 1px; background: var(--cly-border, #e0e0e0); }
.fd-aut .fd-aut-acoes { display: flex; gap: 8px; margin-top: 14px; }
.fd-aut .fd-aut-acoes .fd-aut-btn { margin-top: 0; flex: 1; }
.fd-aut .fd-aut-alert { background: rgba(214,69,69,.10); border: 1px solid rgba(214,69,69,.30); color: #a32d2d; border-radius: 8px; padding: 8px 10px; font-size: 12px; margin: 8px 0; }
.fd-aut .fd-aut-alert-erro { background: rgba(214,69,69,.10); }
.fd-aut .fd-aut-status { display: flex; align-items: center; gap: 8px; margin: 2px 0 10px; }
.fd-aut .fd-aut-status-tit { font-weight: 600; font-size: 15px; }
.fd-aut .fd-aut-badge { font-size: 14px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.fd-aut .fd-aut-badge-pend { background: #fdecc8; color: #8a5a00; }
.fd-aut .fd-aut-badge-ok { background: #e3f4e9; color: #0f6e56; }
.fd-aut .fd-aut-badge-rej { background: #fcecec; color: #a32d2d; }
.fd-aut .fd-aut-badge-exp { background: #f0ece0; color: #6b5d2f; }
.fd-aut .fd-aut-timeline { list-style: none; margin: 12px 0; padding: 0 0 0 22px; position: relative; }
.fd-aut .fd-aut-timeline::before { content: ""; position: absolute; left: 6px; top: 6px; bottom: 10px; width: 2px; background: var(--cly-border, #e0e0e0); }
.fd-aut .fd-aut-timeline li { position: relative; margin-bottom: 12px; }
.fd-aut .fd-aut-timeline li::before { content: ""; position: absolute; left: -22px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #c7c7c7; border: 2px solid var(--cly-surface, #fff); }
.fd-aut .fd-aut-timeline li.ok::before { background: #2e9e5b; }
.fd-aut .fd-aut-timeline li.wait::before { background: #f59e0b; }
.fd-aut .fd-aut-timeline li b { display: block; font-weight: 600; }
.fd-aut .fd-aut-timeline li span { display: block; font-size: 11.5px; color: #8a8a8a; }

body.app_theme_dark .fd-aut .fd-aut-sub { color: #a8a8a8; }
body.app_theme_dark .fd-aut .fd-aut-ctx { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.10); }
body.app_theme_dark .fd-aut .fd-aut-badge-pend { background: #5a4718; color: #f5d488; }
body.app_theme_dark .fd-aut .fd-aut-badge-ok { background: #1f3a2c; color: #9fe1cb; }
body.app_theme_dark .fd-aut .fd-aut-badge-rej { background: #3a2323; color: #f4c0c0; }
body.app_theme_dark .fd-aut .fd-aut-badge-exp { background: #33301f; color: #f0dfa0; }
body.app_theme_dark .fd-aut .fd-aut-alert { background: rgba(240,149,149,.12); border-color: rgba(240,149,149,.28); color: #f0a0a0; }
body.app_theme_dark .fd-aut .fd-aut-timeline li span { color: #9a9a9a; }
@media (max-width: 480px) { .fd-aut .fd-aut-grid2 { grid-template-columns: 1fr; } }

/* =====================================================================
 * cly_aut — Autorizações / "Minhas solicitações" (Fase 5 · refino, Opção A).
 * Botão PRÓPRIO no header (#fd_btn_autorizacoes) + dropdown compacto, painel
 * "Ver todas" (overlay, abas) e botão contextual na toolbar do modal fullscreen.
 * Sem balão flutuante. Tema do app (claro; override em body.app_theme_dark).
 * ===================================================================== */

/* Badge do botão próprio de Autorizações no header */
#fd_btn_autorizacoes { position: relative; }
.fdaut-navbadge { position: absolute; top: 4px; right: 2px; min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; border-radius: 8px; background: #d64545; color: #fff; font-size: 13px; font-weight: 700; text-align: center; box-sizing: border-box; pointer-events: none; }
.fd-nav-vertodas { font-size: 12px; color: #1c6fd0; text-decoration: none; font-weight: 500; }
.fd-nav-vertodas:hover { text-decoration: underline; }

/* Linha em acordeão (compartilhada por dropdown, painel e contexto) */
.fdaut-row { border-bottom: 1px solid #f1f5f9; border-left: 3px solid #d8d8d8; }
.fdaut-row:last-child { border-bottom: none; }
.fdaut-row.pend { border-left-color: #f59e0b; }
.fdaut-row.ok { border-left-color: #2e9e5b; }
.fdaut-row.rej { border-left-color: #d64545; }
.fdaut-row.exp { border-left-color: #9e8a4a; }
.fdaut-row.novo.ok { background: #f7fbf8; }
.fdaut-row.novo.rej { background: #fdf7f7; }
.fdaut-row-head { display: flex; align-items: center; gap: 10px; padding: 11px 16px; cursor: pointer; }
.fdaut-row-head:hover { background: rgba(0,0,0,.025); }
.fdaut-row-main { flex: 1 1 auto; min-width: 0; }
.fdaut-item-top { display: flex; align-items: center; gap: 6px; }
.fdaut-item-tit { font-size: 13px; font-weight: 600; color: #1a2230; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdaut-item-dot { width: 8px; height: 8px; border-radius: 50%; background: #2e9e5b; flex: 0 0 auto; }
.fdaut-row.rej .fdaut-item-dot { background: #d64545; }
.fdaut-item-sub { font-size: 11.5px; color: #7b8493; margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fdaut-pill { font-size: 13px; font-weight: 600; padding: 1px 8px; border-radius: 20px; }
.fdaut-pill.pend { background: #fdecc8; color: #8a5a00; }
.fdaut-pill.ok { background: #e3f4e9; color: #0f6e56; }
.fdaut-pill.rej { background: #fcecec; color: #a32d2d; }
.fdaut-pill.exp { background: #f0ece0; color: #6b5d2f; }
.fdaut-chev { font-size: 18px; color: #94a3b8; flex: 0 0 auto; transition: transform .15s ease; }
.fdaut-chev.is-open { transform: rotate(180deg); }
.fdaut-detail { padding: 0 16px 12px 16px; font-size: 12px; }
.fdaut-detail-info, .fdaut-detail-motivo, .fdaut-detail-ctx { border-radius: 8px; padding: 8px 10px; margin-top: 6px; }
.fdaut-detail-info { background: #f4f6f8; color: #5b6472; }
.fdaut-detail-info .material-icons { font-size: 13px; vertical-align: -2px; margin-right: 3px; }
.fdaut-detail-motivo { background: #fdf1f1; color: #a32d2d; }
.fdaut-detail-motivo .material-icons { font-size: 13px; vertical-align: -2px; margin-right: 3px; }
.fdaut-detail-ctx { background: #f4f6f8; color: #3a4250; line-height: 1.5; }
.fdaut-detail-acoes { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.fdaut-skel-row { padding: 11px 16px; }
.fdaut-skel { background: #eef1f4; border-radius: 6px; animation: fdautPulse 1.1s ease-in-out infinite; }
.fdaut-skel-tit { height: 12px; width: 55%; }
.fdaut-skel-sub { height: 10px; width: 35%; margin-top: 6px; }
@keyframes fdautPulse { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.fdaut-more-wrap { padding: 10px 16px; text-align: center; }
.fdaut-vazio { padding: 30px 20px; text-align: center; color: #94a3b8; }
.fdaut-vazio .material-icons { font-size: 40px; opacity: .5; margin-bottom: 6px; }
.fdaut-vazio p { margin: 0; font-size: 13px; }
.fdaut-vazio span { display: block; margin-top: 4px; font-size: 11.5px; opacity: .8; }

/* Dropdown compacto (#fd_dropdown_autorizacoes) */
.fdaut-dd-foot { display: flex; align-items: center; justify-content: space-between; padding: 8px 16px; border-top: 1px solid #f1f5f9; }
.fdaut-linkbtn { border: none; background: none; color: #1c6fd0; font-size: 12px; font-weight: 500; cursor: pointer; padding: 0; }
.fdaut-linkbtn:hover { text-decoration: underline; }

/* Painel "Ver todas" (overlay via cly.mostrar_modal — abas + mais contexto) */
.fdaut-painel-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -4px 0 10px; flex-wrap: wrap; }
.fdaut-tabs { display: flex; gap: 6px; }
.fdaut-tab { border: 1px solid #d6dbe2; background: #fff; color: #3a4250; font-size: 12px; font-weight: 500; padding: 4px 12px; border-radius: 20px; cursor: pointer; }
.fdaut-tab:hover { background: #f1f6fd; }
.fdaut-tab.is-active { background: #1c6fd0; border-color: #1c6fd0; color: #fff; }
.fdaut-tab-n { font-size: 13px; opacity: .85; }
.fdaut-painel-list { max-height: 64vh; overflow: auto; margin: 0 -20px -20px; }
.fdaut-painel-list .fdaut-row-head { padding: 13px 20px; }
.fdaut-painel-list .fdaut-detail { padding: 0 20px 14px 20px; }
.fdaut-ctx .fdaut-painel-list { margin: -4px -20px -20px; }

/* Botão contextual na toolbar do modal fullscreen */
.fdaut-ctxbtn { position: relative; cursor: pointer; }
.fdaut-ctxbtn .material-icons { vertical-align: middle; }
.fdaut-ctxbtn-badge { position: absolute; top: -2px; right: -4px; min-width: 15px; height: 15px; line-height: 15px; padding: 0 3px; border-radius: 8px; background: #d64545; color: #fff; font-size: 11px; font-weight: 700; text-align: center; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; }

/* Fallback discreto (só quando NÃO existe o botão do header) */
.fdaut-fallback { position: fixed; bottom: 16px; left: 16px; z-index: 9000; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: #fff; border: 1px solid #e0e0e0; box-shadow: 0 1px 4px rgba(0,0,0,.12); cursor: pointer; padding: 0; }
.fdaut-fallback .material-icons { font-size: 20px; color: #5b636e; }
.fdaut-fallback-badge { position: absolute; top: -4px; right: -4px; min-width: 17px; height: 17px; line-height: 17px; padding: 0 4px; border-radius: 9px; background: #d64545; color: #fff; font-size: 13px; font-weight: 600; text-align: center; box-sizing: border-box; font-family: Roboto, Arial, sans-serif; }

/* --- Tema escuro --- */
body.app_theme_dark .fdaut-row { border-bottom-color: #3c3c3c; }
body.app_theme_dark .fdaut-row.novo.ok { background: #28352e; }
body.app_theme_dark .fdaut-row.novo.rej { background: #382a2a; }
body.app_theme_dark .fdaut-row-head:hover { background: rgba(255,255,255,.04); }
body.app_theme_dark .fdaut-item-tit { color: #f0f0f0; }
body.app_theme_dark .fdaut-item-sub { color: #9aa5b1; }
body.app_theme_dark .fdaut-chev { color: #7a8494; }
body.app_theme_dark .fdaut-detail-info { background: #333; color: #b8c0cc; }
body.app_theme_dark .fdaut-detail-motivo { background: #3a2626; color: #e2b8b6; }
body.app_theme_dark .fdaut-detail-ctx { background: #333; color: #d0d4da; }
body.app_theme_dark .fdaut-skel { background: #3a3a3a; }
body.app_theme_dark .fdaut-dd-foot { border-top-color: #3c3c3c; }
body.app_theme_dark .fdaut-linkbtn,
body.app_theme_dark .fd-nav-vertodas { color: #85b7eb; }
body.app_theme_dark .fdaut-tab { background: #2b2b2b; border-color: #454545; color: #cbd5e1; }
body.app_theme_dark .fdaut-tab:hover { background: #333; }
body.app_theme_dark .fdaut-tab.is-active { background: #1c6fd0; border-color: #1c6fd0; color: #fff; }
body.app_theme_dark .fdaut-vazio { color: #8a94a2; }
body.app_theme_dark .fdaut-fallback { background: #424242; border-color: #565656; }
body.app_theme_dark .fdaut-fallback .material-icons { color: #e0e0e0; }

/* ============================================================
   fd-pcr — Pessoa: Consulta Rápida (componente cly_pessoas.js)
   Overlay + card tema-aware. Sem estilo inline no JS.
   Tokens semânticos escopados ao componente (.fd-pcr-overlay).
   ============================================================ */
.fd-pcr-overlay {
    --pcr-soft:      #8993a4;
    --pcr-surf2:     #eceef1;
    --pcr-ok:        #1f8a4c; --pcr-ok-bg:  #e7f5ec; --pcr-ok-rail:  #38a169;
    --pcr-warn:      #b26a00; --pcr-warn-bg:#fff4e2; --pcr-warn-rail:#e8912a;
    --pcr-danger:    #c62828; --pcr-dg-bg:  #fdeceb; --pcr-dg-rail:  #e15241;
    --pcr-pj:        #4f46e5; --pcr-pj-bg:  #eef0fe;
    --pcr-pf:        #0d9488; --pcr-pf-bg:  #e6f6f3;
    --pcr-band1:     #28323d; --pcr-band2:  #37485a;

    position: fixed; inset: 0;
    background: rgba(9, 16, 28, 0.62);
    -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
    display: flex; align-items: flex-start; justify-content: center;
    overflow-y: auto; padding: 40px 16px;
    opacity: 0; transition: opacity .18s ease;
}
.fd-pcr-overlay.is-open { opacity: 1; }

body.app_theme_dark .fd-pcr-overlay {
    --pcr-soft:      #7d7d7d;
    --pcr-surf2:     #333333;
    --pcr-ok:        #6ecb8f; --pcr-ok-bg:  #18261c; --pcr-ok-rail:  #3f9d62;
    --pcr-warn:      #f0b45e; --pcr-warn-bg:#2c2313; --pcr-warn-rail:#c98a3a;
    --pcr-danger:    #ef9a9a; --pcr-dg-bg:  #2e1a1a; --pcr-dg-rail:  #c15e54;
    --pcr-pj:        #a5b4fc; --pcr-pj-bg:  #20223a;
    --pcr-pf:        #5eead4; --pcr-pf-bg:  #0f2b28;
    --pcr-band1:     #1c242d; --pcr-band2:  #28343f;
    background: rgba(0, 0, 0, 0.68);
}

.fd-pcr-card {
    width: 600px; max-width: 100%;
    background: var(--cly-bg);
    border: 1px solid var(--cly-border);
    border-radius: 16px;
    box-shadow: 0 24px 60px rgba(9, 30, 66, .30);
    overflow: hidden;
    display: flex; flex-direction: column;
    transform: translateY(8px) scale(.985);
    transition: transform .18s ease;
}
.fd-pcr-overlay.is-open .fd-pcr-card { transform: none; }
body.app_theme_dark .fd-pcr-card { box-shadow: 0 24px 60px rgba(0, 0, 0, .65); }

.fd-pcr-ic { display: inline-flex; width: 1em; height: 1em; }
.fd-pcr-ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* header band */
.fd-pcr-head { background: linear-gradient(135deg, var(--pcr-band1), var(--pcr-band2)); color: #eef2f6; padding: 18px 20px; }
.fd-pcr-head-top { display: flex; gap: 14px; align-items: flex-start; }
.fd-pcr-avatar {
    flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 22px; color: #fff;
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .22);
}
.fd-pcr-avatar.pj { background: linear-gradient(140deg, #5b52e6, #4f46e5); }
.fd-pcr-avatar.pf { background: linear-gradient(140deg, #12b3a0, #0d9488); }
.fd-pcr-who { flex: 1; min-width: 0; }
.fd-pcr-toprow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 3px; }
.fd-pcr-nome { font-size: 17.5px; font-weight: 700; line-height: 1.25; word-break: break-word; margin: 0; color: #fff; }
.fd-pcr-usual { font-size: 12.5px; color: #b9c6d3; margin: 0 0 8px; }
.fd-pcr-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    padding: 3px 9px; border-radius: 20px; white-space: nowrap;
}
.fd-pcr-pill .fd-pcr-ic { width: 12px; height: 12px; }
.fd-pcr-pill.tipo { background: rgba(255, 255, 255, .18); color: #fff; }
.fd-pcr-pill.ok   { background: rgba(84, 214, 127, .22); color: #c9f7d8; }
.fd-pcr-pill.blk  { background: rgba(240, 120, 110, .24); color: #ffd6d1; }
.fd-pcr-doc { display: inline-flex; align-items: center; gap: 8px; font-size: 14.5px; font-variant-numeric: tabular-nums; color: #eaeff4; margin-top: 4px; }
.fd-pcr-doc-k { font-size: 13px; letter-spacing: .07em; text-transform: uppercase; color: #9fb0c1; border: 1px solid rgba(255, 255, 255, .22); border-radius: 5px; padding: 1px 5px; }
.fd-pcr-miniact { display: flex; gap: 6px; flex: 0 0 auto; }
.fd-pcr-mini {
    width: 34px; height: 34px; border-radius: 9px; border: 0;
    background: rgba(255, 255, 255, .12); color: #fff; cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 16px;
    transition: background .12s;
}
.fd-pcr-mini .fd-pcr-ic { width: 17px; height: 17px; }
.fd-pcr-mini:hover { background: rgba(255, 255, 255, .26); }

/* KPIs */
.fd-pcr-kpis { display: grid; gap: 10px; padding: 16px 20px 6px; }
.fd-pcr-cols-3 { grid-template-columns: repeat(3, 1fr); }
.fd-pcr-cols-4 { grid-template-columns: repeat(4, 1fr); }
.fd-pcr-kpi {
    background: var(--cly-surface); border: 1px solid var(--cly-border);
    border-radius: 13px; padding: 12px 13px 13px;
    display: flex; flex-direction: column; gap: 9px;
}
.fd-pcr-kpi-top { display: flex; align-items: center; gap: 8px; }
.fd-pcr-kchip { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.fd-pcr-kchip .fd-pcr-ic { width: 15px; height: 15px; }
.fd-pcr-kchip.t-blue   { background: var(--cly-primary-bg); color: var(--cly-primary); }
.fd-pcr-kchip.t-violet { background: var(--pcr-pj-bg); color: var(--pcr-pj); }
.fd-pcr-kchip.t-teal   { background: var(--pcr-pf-bg); color: var(--pcr-pf); }
.fd-pcr-kchip.t-red    { background: var(--pcr-dg-bg); color: var(--pcr-danger); }
.fd-pcr-kl { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--pcr-soft); font-weight: 700; line-height: 1.2; }
.fd-pcr-kv { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--cly-text-main); line-height: 1; letter-spacing: -.01em; }
.fd-pcr-ksub { font-size: 13px; color: var(--pcr-soft); font-variant-numeric: tabular-nums; line-height: 1.3; }

/* avisos */
.fd-pcr-alerts { display: flex; flex-direction: column; }
.fd-pcr-al {
    display: flex; gap: 11px; align-items: flex-start;
    padding: 10px 20px; font-size: 12.5px;
    border-left: 4px solid transparent; border-top: 1px solid var(--cly-border);
}
.fd-pcr-al:first-child { border-top: 0; }
.fd-pcr-al-ic { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 8px; display: flex; align-items: center; justify-content: center; margin-top: 1px; }
.fd-pcr-al-ic .fd-pcr-ic { width: 15px; height: 15px; }
.fd-pcr-al-m { flex: 1; min-width: 0; }
.fd-pcr-al-h { font-weight: 700; }
.fd-pcr-al-p { color: var(--cly-text-muted); margin-top: 1px; }
.fd-pcr-al-go { flex: 0 0 auto; font-size: 11.5px; font-weight: 700; text-decoration: none; white-space: nowrap; padding: 4px 10px; border-radius: 7px; align-self: center; }
.fd-pcr-al.d { border-left-color: var(--pcr-dg-rail); background: var(--pcr-dg-bg); }
.fd-pcr-al.d .fd-pcr-al-ic { background: rgba(225, 82, 65, .18); color: var(--pcr-danger); }
.fd-pcr-al.d .fd-pcr-al-h, .fd-pcr-al.d .fd-pcr-al-go { color: var(--pcr-danger); }
.fd-pcr-al.d .fd-pcr-al-go { background: rgba(225, 82, 65, .14); }
.fd-pcr-al.w { border-left-color: var(--pcr-warn-rail); background: var(--pcr-warn-bg); }
.fd-pcr-al.w .fd-pcr-al-ic { background: rgba(232, 145, 42, .18); color: var(--pcr-warn); }
.fd-pcr-al.w .fd-pcr-al-h, .fd-pcr-al.w .fd-pcr-al-go { color: var(--pcr-warn); }
.fd-pcr-al.w .fd-pcr-al-go { background: rgba(232, 145, 42, .14); }
.fd-pcr-al.o { border-left-color: var(--pcr-ok-rail); background: var(--pcr-ok-bg); }
.fd-pcr-al.o .fd-pcr-al-ic { background: rgba(56, 161, 105, .18); color: var(--pcr-ok); }
.fd-pcr-al.o .fd-pcr-al-h { color: var(--pcr-ok); }
.fd-pcr-al.i { border-left-color: var(--cly-primary); background: var(--cly-primary-bg); }
.fd-pcr-al.i .fd-pcr-al-ic { background: rgba(30, 136, 229, .16); color: var(--cly-primary); }
.fd-pcr-al.i .fd-pcr-al-h, .fd-pcr-al.i .fd-pcr-al-go { color: var(--cly-primary-text); }
.fd-pcr-al.i .fd-pcr-al-go { background: rgba(30, 136, 229, .12); }

/* corpo: contato + endereço (somente leitura) */
.fd-pcr-body { padding: 16px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.fd-pcr-sec h4 { margin: 0 0 9px; font-size: 10.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--cly-text-muted); display: flex; align-items: center; gap: 7px; font-weight: 700; }
.fd-pcr-sec h4 .fd-pcr-ic { width: 13px; height: 13px; }
.fd-pcr-cnt { margin-left: auto; background: var(--pcr-surf2); color: var(--cly-text-muted); border-radius: 20px; padding: 0 8px; font-size: 10.5px; line-height: 17px; font-weight: 700; }
.fd-pcr-item { display: flex; gap: 11px; align-items: flex-start; padding: 9px 0; border-top: 1px solid var(--cly-border); }
.fd-pcr-item:first-of-type { border-top: 0; }
.fd-pcr-iico { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: flex; align-items: center; justify-content: center; background: var(--cly-surface); color: var(--cly-primary); }
.fd-pcr-iico .fd-pcr-ic { width: 16px; height: 16px; }
.fd-pcr-imain { flex: 1; min-width: 0; }
.fd-pcr-it { font-size: 13.5px; color: var(--cly-text-main); word-break: break-word; }
.fd-pcr-is { font-size: 10.5px; color: var(--pcr-soft); text-transform: uppercase; letter-spacing: .03em; margin-top: 1px; }
.fd-pcr-ebadge { display: inline-block; font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; padding: 1px 7px; border-radius: 5px; margin-bottom: 4px; }
.fd-pcr-ebadge.p { background: var(--cly-primary-bg); color: var(--cly-primary-text); }
.fd-pcr-ebadge.a { background: var(--pcr-surf2); color: var(--cly-text-muted); }
.fd-pcr-empty { display: flex; flex-direction: column; align-items: center; gap: 7px; text-align: center; padding: 18px 10px; color: var(--pcr-soft); border: 1px dashed var(--cly-border); border-radius: 11px; font-size: 12.5px; }
.fd-pcr-ei { width: 36px; height: 36px; border-radius: 11px; background: var(--cly-surface); display: flex; align-items: center; justify-content: center; }
.fd-pcr-ei .fd-pcr-ic { width: 18px; height: 18px; }

/* rodapé */
.fd-pcr-foot { margin-top: auto; display: flex; gap: 10px; align-items: center; justify-content: flex-end; padding: 13px 18px; border-top: 1px solid var(--cly-border); background: var(--cly-surface); }
.fd-pcr-btn { font-size: 13px; font-weight: 600; border-radius: 9px; padding: 8px 15px; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; border: 1px solid transparent; white-space: nowrap; }
.fd-pcr-btn .fd-pcr-ic { width: 15px; height: 15px; }
.fd-pcr-btn-ghost { background: transparent; border-color: var(--cly-border); color: var(--cly-text-main); }
.fd-pcr-btn-ghost:hover { background: var(--cly-bg); }
.fd-pcr-btn-primary { background: var(--cly-primary); color: #fff; }
.fd-pcr-btn-primary:hover { filter: brightness(1.07); }

/* responsivo */
@media (max-width: 620px) {
    .fd-pcr-overlay { padding: 20px 10px; }
    .fd-pcr-cols-3, .fd-pcr-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .fd-pcr-body { grid-template-columns: 1fr; gap: 18px; }
}
@media (prefers-reduced-motion: reduce) {
    .fd-pcr-overlay, .fd-pcr-card { transition: none; }
}

/* ===== Reprocessar estoque (cly_produto.reprocessar_estoque) — usa chrome cly-pcc; tema-aware + responsivo ===== */
.cly-pcc-ov.cly-rep-ov { background: rgba(0,0,0,.72); backdrop-filter: blur(2px); }
.cly-rep-ov .fd-btn:disabled { opacity: .45; cursor: not-allowed; }
/* blindagem contra estilos globais de button (UIkit/Altair) que desalinham o rodapé */
.cly-rep-ov .cly-pcc-foot { align-items: center; }
.cly-rep-ov .cly-pcc-foot .fd-btn { margin: 0; vertical-align: middle; box-sizing: border-box; float: none; }

.cly-rep-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; font-size: 12px; }
.cly-rep-step { display: flex; align-items: center; gap: 7px; color: var(--cly-text-muted); white-space: nowrap; }
.cly-rep-step > b { display: inline-flex; width: 22px; height: 22px; border-radius: 50%; background: var(--cly-border); color: var(--cly-text-muted); align-items: center; justify-content: center; font-size: 14px; font-weight: 600; }
.cly-rep-step.on { color: var(--cly-text-main); }
.cly-rep-step.on > b { background: #26a69a; color: #fff; }
.cly-rep-step.ok > b { background: #43a047; color: #fff; }
.cly-rep-sl { flex: 1; height: 1px; background: var(--cly-border); }

.cly-rep-note { display: flex; gap: 11px; align-items: flex-start; background: rgba(196,61,44,.12); border: 1px solid rgba(196,61,44,.4); border-radius: 8px; padding: 12px 13px; margin-bottom: 14px; }
.cly-rep-note > i { color: #d9534f; font-size: 24px; flex: none; }
.cly-rep-note-t { font-size: 13.5px; font-weight: 600; color: var(--cly-text-main); line-height: 1.4; margin-bottom: 4px; }
.cly-rep-note-s { font-size: 12px; line-height: 1.55; color: var(--cly-text-muted); }

.cly-rep-intro { font-size: 12.5px; line-height: 1.6; color: var(--cly-text-muted); margin: 0 0 13px; }
.cly-rep-info { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.cly-rep-info li { display: flex; gap: 11px; font-size: 12.5px; line-height: 1.55; color: var(--cly-text-main); }
.cly-rep-info li > div { padding-top: 4px; }
.cly-rep-ic { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.cly-rep-ic > i { font-size: 17px; }
.cly-rep-ic.red { background: rgba(196,61,44,.14); } .cly-rep-ic.red > i { color: #d9534f; }
.cly-rep-ic.teal { background: rgba(38,166,154,.16); } .cly-rep-ic.teal > i { color: #26a69a; }
.cly-rep-ic.amber { background: rgba(240,173,78,.18); } .cly-rep-ic.amber > i { color: #d69b2d; }
.cly-rep-ic.blue { background: rgba(53,138,221,.16); } .cly-rep-ic.blue > i { color: #4a90d9; }
.cly-rep-next { margin-top: 14px; font-size: 12px; line-height: 1.55; color: var(--cly-text-muted); background: rgba(38,166,154,.1); border: 1px solid rgba(38,166,154,.32); border-radius: 8px; padding: 10px 12px; display: flex; gap: 9px; align-items: flex-start; }
.cly-rep-next > i { color: #26a69a; font-size: 18px; flex: none; }

.cly-rep-simhead { font-size: 12px; color: var(--cly-text-muted); display: flex; align-items: center; gap: 6px; margin-bottom: 9px; }
.cly-rep-simhead > i { color: #26a69a; font-size: 16px; }
.cly-rep-cmp { border: 1px solid var(--cly-border); border-radius: 9px; overflow: hidden; }
.cly-rep-crow { display: grid; grid-template-columns: 1fr auto 26px auto 128px; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--cly-border); font-size: 13px; }
.cly-rep-crow:last-child { border-bottom: none; }
.cly-rep-crow.big { background: rgba(127,127,127,.05); }
.cly-rep-clbl { color: var(--cly-text-muted); }
.cly-rep-choje { text-align: right; color: var(--cly-text-muted); font-variant-numeric: tabular-nums; }
.cly-rep-arr { color: var(--cly-text-muted); font-size: 16px; opacity: .5; text-align: center; }
.cly-rep-csim { text-align: right; font-weight: 600; color: var(--cly-text-main); font-variant-numeric: tabular-nums; font-size: 15px; }
.cly-rep-crow.chg .cly-rep-csim { color: #d9534f; }
.cly-rep-cdelta { font-size: 14px; text-align: right; color: #43a047; }
.cly-rep-cdelta.chg { color: #d9534f; font-weight: 600; }

.cly-rep-verdict { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px; line-height: 1.55; border-radius: 8px; padding: 11px 13px; margin-top: 14px; color: var(--cly-text-main); }
.cly-rep-verdict > i { font-size: 20px; flex: none; }
.cly-rep-verdict.ok { background: rgba(67,160,71,.12); border: 1px solid rgba(67,160,71,.4); }
.cly-rep-verdict.ok > i { color: #43a047; }
.cly-rep-verdict.div { background: rgba(196,61,44,.12); border: 1px solid rgba(196,61,44,.42); }
.cly-rep-verdict.div > i { color: #d9534f; }

.cly-rep-reminder { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; line-height: 1.5; color: var(--cly-text-muted); background: rgba(127,127,127,.06); border: 1px solid var(--cly-border); border-radius: 7px; padding: 9px 11px; margin-top: 12px; }
.cly-rep-reminder > i { color: #d9534f; font-size: 15px; flex: none; }
.cly-rep-det { margin-top: 12px; font-size: 11.5px; color: var(--cly-text-muted); line-height: 1.6; }
.cly-rep-det .pos { color: #43a047; }
.cly-rep-det .neg { color: #d9534f; }

.cly-rep-confirm { margin-top: 15px; padding-top: 14px; border-top: 1px solid var(--cly-border); }
.cly-rep-lbl { display: block; font-size: 12.5px; color: var(--cly-text-muted); margin: 0 0 7px; }
.cly-rep-lbl b { color: var(--cly-text-main); letter-spacing: .5px; }
.cly-rep-input { width: 100%; box-sizing: border-box; background: var(--cly-surface); border: 1px solid var(--cly-border); border-radius: 7px; padding: 10px 12px; color: var(--cly-text-main); font-size: 13px; letter-spacing: .5px; }
.cly-rep-input:focus { outline: none; border-color: var(--cly-border-focus); }
.cly-rep-input.ok { border-color: #43a047; }
.cly-rep-hint { font-size: 14px; color: var(--cly-text-muted); margin-top: 6px; line-height: 1.5; }

.cly-rep-loading, .cly-rep-erro { padding: 30px 10px; text-align: center; color: var(--cly-text-muted); font-size: 12.5px; display: flex; align-items: center; justify-content: center; gap: 10px; }
.cly-rep-spin { width: 20px; height: 20px; border: 2px solid var(--cly-border); border-top-color: var(--cly-primary); border-radius: 50%; animation: cly-rep-sp .7s linear infinite; display: inline-block; }
@keyframes cly-rep-sp { to { transform: rotate(360deg); } }

@media (max-width: 560px) {
    .cly-rep-crow { grid-template-columns: 1fr auto 22px auto; gap: 8px; }
    .cly-rep-cdelta { grid-column: 1 / -1; text-align: left; padding-left: 2px; }
    .cly-rep-ov .cly-pcc-foot { flex-wrap: wrap; }
    .cly-rep-ov .cly-pcc-foot .fd-btn { flex: 1; justify-content: center; min-width: 120px; }
}

/* ============================================================
   Progresso de inclusão em lote — cly_faturamento.progresso_inclusao
   Span "Incluindo produtos X de N" + Ver restantes, dentro do card da tela.
   Doc: docs/componentes/progresso_inclusao.md
   ============================================================ */
.cly-prog-inclusao { background: #eef4fb; border: 1px solid #d3e2f3; border-left: 4px solid #1e88e5; border-radius: 8px; padding: 12px 14px; margin-bottom: 10px; }
body.app_theme_dark .cly-prog-inclusao { background: rgba(91, 155, 224, 0.12); border-color: rgba(91, 155, 224, 0.28); border-left-color: #5b9be0; }
.cly-prog-main { display: flex; align-items: center; gap: 12px; }
.cly-prog-ic { color: var(--cly-primary); font-size: 22px; flex-shrink: 0; }
.cly-prog-txt { flex: 1; min-width: 0; }
.cly-prog-t1 { font-size: 13px; color: var(--cly-text-muted); }
.cly-prog-t1 b { color: var(--cly-primary-text); font-weight: 600; }
.cly-prog-prod { font-size: 12px; color: var(--cly-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.cly-prog-track { height: 5px; background: rgba(30, 136, 229, 0.18); border-radius: 4px; overflow: hidden; margin-top: 7px; }
body.app_theme_dark .cly-prog-track { background: rgba(66, 165, 245, 0.18); }
.cly-prog-fill { height: 100%; background: var(--cly-primary); border-radius: 4px; width: 0; transition: width 0.3s ease; }
.cly-prog-ver { flex-shrink: 0; border: 1px solid var(--cly-border); background: var(--cly-bg); color: var(--cly-text-main); border-radius: 8px; padding: 7px 12px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cly-prog-ver:hover { border-color: var(--cly-primary); color: var(--cly-primary); }
.cly-prog-cancelar { flex-shrink: 0; border: 1px solid transparent; background: transparent; color: var(--cly-text-muted); border-radius: 8px; padding: 7px 10px; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.cly-prog-cancelar:hover { color: #c43d2c; }
.cly-prog-lista { margin-top: 10px; border-top: 1px solid var(--cly-border); padding-top: 8px; max-height: 160px; overflow-y: auto; }
.cly-prog-li { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--cly-text-main); padding: 4px 0; }
.cly-prog-li-n { font-size: 14px; color: var(--cly-text-muted); min-width: 18px; text-align: right; }
.cly-prog-vazio { color: var(--cly-text-muted); }
@media (max-width: 560px) {
    .cly-prog-ver { padding: 6px 9px; }
    .cly-prog-prod { display: none; }
}

/* ===== Galeria de fotos do produto (cly_produto.fotos) — tons da tela, tema-aware + responsivo ===== */
.cly-fotos { --fbg:#ffffff; --fcard:#f4f5f7; --fbd:#e2e5ea; --ftx:#26313f; --fmut:#6b7480; --ftl:#009688; font-size:13px; color:var(--ftx); padding:8px 16px 18px; }
body.app_theme_dark .cly-fotos { --fbg:#424242; --fcard:#383838; --fbd:#565656; --ftx:#e6e6e6; --fmut:#9e9e9e; --ftl:#26a69a; }
.cly-fotos-load, .cly-fotos-erro { padding:26px 10px; text-align:center; color:#9e9e9e; font-size:12.5px; display:flex; align-items:center; justify-content:center; gap:10px; }
.cly-fotos-spin { width:20px; height:20px; border:3px solid rgba(127,127,127,.3); border-top-color:#26a69a; border-radius:50%; animation:cly-fotos-sp .8s linear infinite; display:inline-block; flex:none; }
@keyframes cly-fotos-sp { to { transform:rotate(360deg); } }

.cly-fotos-h { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.cly-fotos-t { font-size:15px; font-weight:600; }
.cly-fotos-s { font-size:12px; color:var(--fmut); margin-top:2px; }
.cly-fotos-s b, .cly-fotos-cnt b { color:var(--ftl); }
.cly-fotos-meta { display:flex; align-items:center; gap:10px; }
.cly-fotos-chip { font-size:14px; color:var(--fmut); display:inline-flex; align-items:center; gap:5px; background:var(--fcard); border:1px solid var(--fbd); padding:4px 10px; border-radius:20px; }
.cly-fotos-chip .material-icons { font-size:14px; color:var(--fmut); }
.cly-fotos-cnt { font-size:12px; color:var(--fmut); white-space:nowrap; }
.cly-fotos-cnt b { font-size:14px; }

.cly-fotos-drop { display:flex; align-items:center; gap:12px; border:2px dashed var(--fbd); border-radius:11px; padding:14px 16px; background:var(--fcard); flex-wrap:wrap; transition:border-color .15s, background .15s; }
.cly-fotos-drop.on { border-color:var(--ftl); background:rgba(38,166,154,.08); }
.cly-fotos-drop > .material-icons { font-size:30px; color:var(--ftl); flex:none; }
.cly-fotos-drop-tx { flex:1; min-width:180px; }
.cly-fotos-drop-tx > div { font-size:13px; }
.cly-fotos-drop-s { font-size:14px; color:var(--fmut); margin-top:2px; }
.cly-fotos .fd-btn .material-icons { color:inherit; }
.cly-fotos-cheio { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--fmut); background:var(--fcard); border:1px solid var(--fbd); border-radius:10px; padding:12px 14px; }
.cly-fotos-cheio .material-icons { font-size:18px; color:#c99a12; }

.cly-fotos-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-top:16px; }
.cly-fotos-ph { position:relative; aspect-ratio:4/3; border:1px solid var(--fbd); border-radius:11px; overflow:hidden; background:var(--fcard); }
.cly-fotos-ph img { width:100%; height:100%; object-fit:cover; display:block; }
.cly-fotos-ph.cly-fotos-capa { border:2px solid var(--ftl); }
.cly-fotos-badge { position:absolute; left:8px; top:8px; font-size:13px; padding:5px 10px; border-radius:12px; display:inline-flex; align-items:center; gap:4px; z-index:2; color:#fff; }
.cly-fotos-badge .material-icons { font-size:13px; color:#fff; }
.cly-fotos-badge.capa { background:var(--ftl); color:#04231f; }
.cly-fotos-badge.capa .material-icons { color:#04231f; }
.cly-fotos-badge.ro { background:rgba(18,18,18,.62); }
.cly-fotos-cap { position:absolute; left:8px; top:8px; z-index:2; display:inline-flex; align-items:center; gap:4px; font-size:13px; padding:5px 10px; border-radius:12px; cursor:pointer; border:1px solid rgba(255,255,255,.55); background:rgba(18,18,18,.6); color:#fff; }
.cly-fotos-cap .material-icons { font-size:13px; color:#fff; }
.cly-fotos-cap:hover { background:rgba(18,18,18,.85); }
.cly-fotos-acts { position:absolute; right:8px; top:8px; display:flex; gap:6px; z-index:2; }
.cly-fotos-ic { width:30px; height:30px; border-radius:8px; border:none; background:rgba(18,18,18,.62); color:#fff; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cly-fotos-ic .material-icons { font-size:16px; color:#fff; }
.cly-fotos-ic:hover { background:rgba(18,18,18,.85); }
.cly-fotos-ic.del:hover { background:rgba(196,61,44,.92); }
.cly-fotos-add { aspect-ratio:4/3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border:2px dashed var(--fbd); border-radius:11px; background:var(--fcard); color:var(--fmut); font-size:12px; cursor:pointer; }
.cly-fotos-add .material-icons { font-size:26px; color:var(--fmut); }

.cly-fotos-up { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; padding:14px; border:1px solid var(--fbd); border-radius:11px; background:var(--fcard); }
.cly-fotos-up-tx { font-size:11.5px; color:var(--fmut); }
.cly-fotos-bar { width:100%; height:5px; background:var(--fbd); border-radius:3px; overflow:hidden; }
.cly-fotos-bar > div { width:0; height:100%; background:var(--ftl); transition:width .2s; }

.cly-fotos-lb { position:fixed; inset:0; background:rgba(0,0,0,.9); display:flex; align-items:center; justify-content:center; gap:14px; }
.cly-fotos-lb-bar { position:absolute; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:14px 18px; }
.cly-fotos-lb-n { color:#ddd; font-size:13px; }
.cly-fotos-lb-a { display:flex; gap:10px; }
.cly-fotos-lb-a button, .cly-fotos-lb-nav { background:rgba(255,255,255,.14); border:none; color:#fff; border-radius:50%; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cly-fotos-lb-a button { width:36px; height:36px; }
.cly-fotos-lb-a .material-icons { font-size:19px; color:#fff; }
.cly-fotos-lb-nav { width:46px; height:46px; flex:none; }
.cly-fotos-lb-nav .material-icons { font-size:24px; color:#fff; }
.cly-fotos-lb-img { max-width:78%; max-height:82%; border-radius:8px; }

@media (max-width:720px) { .cly-fotos-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:520px) { .cly-fotos-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .cly-fotos-lb-img { max-width:92%; } }

/* ===== Imprimir etiquetas (cly_produto.etiquetas) — modal, tokens --cly-*, responsivo ===== */
.cly-et { font-size:13px; }
.cly-et-prod { display:flex; align-items:center; gap:7px; font-size:13px; color:var(--cly-text-main); padding-bottom:12px; margin-bottom:14px; border-bottom:1px solid var(--cly-border); }
.cly-et-prod .material-icons { font-size:18px; color:#26a69a; }
.cly-et-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.cly-et-lb { font-size:14px; color:var(--cly-text-muted); margin-bottom:7px; display:flex; align-items:center; gap:5px; }
.cly-et-lb .material-icons { font-size:15px; color:var(--cly-text-muted); }
.cly-et-lb2 { margin-top:16px; }
.cly-et-qtd { display:flex; align-items:center; gap:8px; }
.cly-et-step { width:34px; height:34px; border:1px solid var(--cly-border); background:var(--cly-bg); color:var(--cly-text-main); border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; }
.cly-et-step .material-icons { font-size:18px; color:var(--cly-text-main); }
.cly-et-step:hover { border-color:var(--cly-primary); }
.cly-et-qtd-in { width:64px; text-align:center; background:var(--cly-bg); border:1px solid var(--cly-border); border-radius:7px; padding:8px; color:var(--cly-text-main); font-size:15px; }
.cly-et-chips { display:flex; gap:6px; margin-top:8px; }
.cly-et-chip { font-size:14px; background:var(--cly-surface); border:1px solid var(--cly-border); color:var(--cly-text-muted); padding:4px 10px; border-radius:14px; cursor:pointer; }
.cly-et-chip:hover { border-color:var(--cly-primary); color:var(--cly-primary); }
.cly-et-mods { display:flex; flex-direction:column; gap:8px; }
.cly-et-mod { display:flex; gap:9px; align-items:flex-start; border:1px solid var(--cly-border); border-radius:9px; padding:10px 12px; cursor:pointer; background:var(--cly-bg); }
.cly-et-mod.on { border-color:#26a69a; background:rgba(38,166,154,.1); }
.cly-et-rd { width:16px; height:16px; border-radius:50%; border:2px solid var(--cly-text-muted); flex:none; margin-top:1px; }
.cly-et-mod.on .cly-et-rd { border-color:#26a69a; background:radial-gradient(circle, #26a69a 0 4px, transparent 5px); }
.cly-et-mod-tx { display:flex; flex-direction:column; }
.cly-et-mod-t { font-size:12.5px; color:var(--cly-text-main); }
.cly-et-mod-s { font-size:10.5px; color:var(--cly-text-muted); }
.cly-et-prev-wrap { background:#f5f5f5; border-radius:8px; padding:12px 14px; color:#111; }
.cly-et-prev-nome { font-size:14px; font-weight:600; line-height:1.3; }
.cly-et-prev-bars { height:42px; margin:8px 0 5px; background-image:repeating-linear-gradient(90deg, #111 0 2px, transparent 2px 4px, #111 4px 5px, transparent 5px 9px, #111 9px 12px, transparent 12px 14px); }
.cly-et-prev-foot { display:flex; justify-content:space-between; align-items:flex-end; }
.cly-et-prev-foot span { font-size:13px; letter-spacing:1px; }
.cly-et-prev-foot b { font-size:14px; font-weight:700; }
.cly-et-note { font-size:10.5px; color:var(--cly-text-muted); margin-top:8px; line-height:1.5; }

@media (max-width:560px) {
    .cly-et-grid { grid-template-columns:1fr; gap:14px; }
}

/* ===== Desmembrar produto (cly_produto.desmembrar) — wizard modal, tokens --cly-* ===== */
.cly-dsm-steps { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:12px; }
.cly-dsm-step { display:flex; align-items:center; gap:7px; color:var(--cly-text-muted); white-space:nowrap; }
.cly-dsm-step > b { display:inline-flex; width:22px; height:22px; border-radius:50%; background:var(--cly-border); color:var(--cly-text-muted); align-items:center; justify-content:center; font-size:14px; font-weight:600; }
.cly-dsm-step.on { color:var(--cly-text-main); }
.cly-dsm-step.on > b { background:#26a69a; color:#fff; }
.cly-dsm-step.ok > b { background:#43a047; color:#fff; }
.cly-dsm-sl { flex:1; height:1px; background:var(--cly-border); }
.cly-dsm-orig { font-size:12px; color:var(--cly-text-main); background:var(--cly-surface); border-left:3px solid #4a90d9; border-radius:0 6px 6px 0; padding:9px 12px; margin-bottom:12px; }
.cly-dsm-tb { width:100%; border-collapse:collapse; font-size:12px; }
.cly-dsm-tb th { text-align:left; color:var(--cly-text-muted); font-weight:400; font-size:14px; padding:4px 6px; border-bottom:1px solid var(--cly-border); }
.cly-dsm-tb th.r { text-align:right; }
.cly-dsm-tb td { padding:5px 6px; }
.cly-dsm-in { width:100%; box-sizing:border-box; background:var(--cly-bg); border:1px solid var(--cly-border); border-radius:6px; padding:7px 8px; color:var(--cly-text-main); font-size:12px; }
.cly-dsm-in.r { text-align:right; }
/* Desmembrar (SYS-166): modal mais largo + colunas dimensionadas (Descrição respira) */
.cly-pcc-box.cly-dsm-box { width:940px; max-width:96vw; }
/* Desktop/tablet: continua TABELA (linha), com min-width -> rola na horizontal quando aperta (Descrição/campos não espremem) */
.cly-dsm-tbwrap { overflow-x:auto; }
.cly-dsm-tb { table-layout:fixed; font-size:13px; min-width:720px; }
.cly-dsm-tb th:nth-child(2), .cly-dsm-tb td:nth-child(2) { width:74px; }
.cly-dsm-tb th:nth-child(3), .cly-dsm-tb td:nth-child(3) { width:98px; }
.cly-dsm-tb th:nth-child(4), .cly-dsm-tb td:nth-child(4) { width:120px; }
.cly-dsm-tb th:nth-child(5), .cly-dsm-tb td:nth-child(5) { width:120px; }
.cly-dsm-tb th:nth-child(6), .cly-dsm-tb td:nth-child(6) { width:42px; text-align:center; }
.cly-dsm-in { font-size:13px; padding:8px 9px; }
@media (max-width:680px) {
    /* SÓ no mobile: cada linha vira um CARD empilhado e numerado (sem scroll horizontal) */
    .cly-pcc-box.cly-dsm-box { width:96vw; }
    .cly-dsm-tbwrap { overflow-x:visible; }
    .cly-dsm-tb { table-layout:auto; min-width:0; display:block; }
    .cly-dsm-tb thead { display:none; }
    .cly-dsm-tb tbody { display:block; counter-reset:dsmitem; }
    .cly-dsm-tb tr { display:grid; grid-template-columns:1fr 1fr; gap:9px 10px; position:relative; counter-increment:dsmitem;
        border:1px solid var(--cly-border); border-radius:9px; padding:11px 12px; margin-bottom:10px; }
    .cly-dsm-tb tr::before { content:"Item " counter(dsmitem); grid-column:1 / -1; font-size:11px; font-weight:600;
        text-transform:uppercase; letter-spacing:.5px; color:#3fae9f; margin-bottom:2px; }
    .cly-dsm-tb td { display:block; width:auto !important; padding:0; text-align:left; }
    .cly-dsm-tb td[data-lb="Descrição"] { grid-column:1 / -1; padding-right:32px; }
    .cly-dsm-tb td::before { content:attr(data-lb); display:block; font-size:11px; color:var(--cly-text-muted); margin-bottom:4px; }
    .cly-dsm-tb td.cly-dsm-delc { position:absolute; top:9px; right:9px; padding:0; }
    .cly-dsm-tb td.cly-dsm-delc::before { display:none; }
    .cly-dsm-in { font-size:14px; padding:9px 10px; }
    .cly-dsm-in.r { text-align:right; }
    .cly-dsm-orig { font-size:12px; }
}
.cly-dsm-delc { text-align:center; width:34px; }
.cly-dsm-del { color:#e5534b; cursor:pointer; font-size:18px; }
.cly-dsm-add { margin-top:10px; font-size:12px; background:transparent; border:1px dashed var(--cly-border); color:var(--cly-text-muted); border-radius:7px; padding:7px 12px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.cly-dsm-add .material-icons { font-size:16px; color:var(--cly-text-muted); }
.cly-dsm-conf { font-size:13px; color:var(--cly-text-main); margin-bottom:12px; display:flex; gap:8px; align-items:center; }
.cly-dsm-conf .material-icons { color:#26a69a; font-size:18px; }
.cly-dsm-cards { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.cly-dsm-card { background:var(--cly-surface); border:1px solid var(--cly-border); border-radius:9px; padding:12px; }
.cly-dsm-card-t { font-size:14px; color:var(--cly-text-main); margin-bottom:7px; }
.cly-dsm-cchips { display:flex; gap:6px; margin-bottom:9px; flex-wrap:wrap; }
.cly-dsm-cchips span { font-size:13px; background:var(--cly-bg); border:1px solid var(--cly-border); color:var(--cly-text-muted); padding:2px 8px; border-radius:10px; }
.cly-dsm-cpr { display:flex; align-items:center; gap:10px; font-size:12px; color:var(--cly-text-muted); }
.cly-dsm-cpr b { color:#26a69a; }
.cly-dsm-cpr .mg { margin-left:auto; color:#43a047; }
.cly-dsm-note { margin-top:14px; font-size:11.5px; line-height:1.6; color:var(--cly-text-main); background:rgba(240,173,78,.1); border:1px solid rgba(240,173,78,.4); border-radius:8px; padding:10px 12px; display:flex; gap:8px; }
.cly-dsm-note .material-icons { color:#d69b2d; flex:none; font-size:18px; }
.cly-dsm-done { text-align:center; padding:22px 0; }
.cly-dsm-done > .material-icons { font-size:52px; color:#66bb6a; }
.cly-dsm-done-t { font-size:17px; color:var(--cly-text-main); margin-top:8px; }
.cly-dsm-done-s { font-size:13px; color:var(--cly-text-muted); }
@media (max-width:560px) { .cly-dsm-cards { grid-template-columns:1fr; } }

/* ===================================================================
 * cly_ordem_servico — Linha do tempo + E-mail de confirmação
 * Componentes de modal/overlay: usam os tokens --cly-* (fundo escuro).
 * Semânticas (ok/warn/bad/info) scoped em .fd-os. Sem style inline por JS.
 * =================================================================== */
.fd-os { --fdos-ok:#1f9d57; --fdos-warn:#ef9f27; --fdos-bad:#e24b4a; --fdos-info:#1e88e5; --fdos-okbg:#e6f6ee; --fdos-badbg:#fbe9e9; }
body.app_theme_dark .fd-os { --fdos-ok:#34c77b; --fdos-warn:#f0a933; --fdos-bad:#ef5350; --fdos-info:#42a5f5; --fdos-okbg:#123726; --fdos-badbg:#3a1615; }

/* ---- Linha do tempo ----
 * Layout dentro do body rolável do cly.mostrar_modal (JS zera o padding do body).
 * Cabeçalho (resumo+filtros) sticky no topo e composer sticky no rodapé = "fixos". */
.fd-os-tl { position:relative; }
.fd-os-tl-head { position:sticky; top:0; z-index:3; background:var(--cly-bg); padding:0 16px; }
.fd-os-tl-resumo { display:flex; flex-wrap:wrap; gap:6px 16px; padding:9px 0; font-size:12px; color:var(--cly-text-muted); border-bottom:1px solid var(--cly-border); }
.fd-os-tl-resumo .material-icons { font-size:15px; vertical-align:-3px; margin-right:3px; color:var(--cly-text-muted); }
.fd-os-tl-status { display:inline-flex; align-items:center; gap:5px; font-size:14px; font-weight:500; padding:3px 10px; border-radius:20px; }
.fd-os-tl-status .material-icons { font-size:14px; }
.fd-os-tl-status.warn { background:rgba(239,159,39,.16); color:var(--fdos-warn); }
.fd-os-tl-status.ok { background:var(--fdos-okbg); color:var(--fdos-ok); }
.fd-os-tl-status.bad { background:var(--fdos-badbg); color:var(--fdos-bad); }
.fd-os-tl-status.neutro { background:var(--cly-surface); color:var(--cly-text-muted); }
.fd-os-tl-filtros { display:flex; gap:7px; padding:10px 0 4px; overflow-x:auto; }
.fd-os-tl-chip { font-size:12px; padding:5px 12px; border-radius:20px; border:1px solid var(--cly-border); color:var(--cly-text-muted); background:transparent; cursor:pointer; white-space:nowrap; }
.fd-os-tl-chip.on { background:var(--cly-primary-bg); color:var(--cly-primary-text); border-color:transparent; }
.fd-os-tl-body { padding:2px 16px 4px; }
.fd-os-tl-rail { position:relative; }
.fd-os-tl-rail:before { content:''; position:absolute; left:16px; top:8px; bottom:8px; width:2px; background:var(--cly-border); }
.fd-os-tl-item { display:flex; gap:14px; margin:12px 0; }
.fd-os-tl-node { width:34px; height:34px; flex:0 0 34px; border-radius:50%; display:flex; align-items:center; justify-content:center; z-index:1; }
.fd-os-tl-node .material-icons { font-size:18px; color:#fff; }
.fd-os-tl-node.neutro { background:var(--cly-text-muted); }
.fd-os-tl-node.ok { background:var(--fdos-ok); }
.fd-os-tl-node.warn { background:var(--fdos-warn); }
.fd-os-tl-node.bad { background:var(--fdos-bad); }
.fd-os-tl-node.info { background:var(--fdos-info); }
.fd-os-tl-card { flex:1; min-width:0; background:var(--cly-surface); border:1px solid var(--cly-border); border-radius:12px; padding:11px 13px; }
.fd-os-tl-card.atual { outline:1.5px solid var(--fdos-ok); }
.fd-os-tl-card.comentario { border-left:3px solid var(--fdos-info); border-radius:0 12px 12px 0; }
.fd-os-tl-chead { display:flex; align-items:center; gap:8px; }
.fd-os-tl-ctit { font-size:13.5px; font-weight:500; color:var(--cly-text-main); flex:1; }
.fd-os-tl-card.comentario .fd-os-tl-ctit { color:var(--cly-primary-text); font-size:13px; }
.fd-os-tl-cdata { font-size:11.5px; color:var(--cly-text-muted); white-space:nowrap; }
.fd-os-tl-cdesc { font-size:12px; color:var(--cly-text-muted); line-height:1.5; margin-top:5px; }
.fd-os-tl-cdesc b { color:var(--cly-text-main); font-weight:500; }
.fd-os-tl-card.comentario .fd-os-tl-cdesc { font-style:italic; }
.fd-os-tl-atualpill { font-size:13px; font-weight:500; padding:2px 8px; border-radius:20px; background:var(--fdos-okbg); color:var(--fdos-ok); }
.fd-os-tl-composer { position:sticky; bottom:0; z-index:3; border-top:1px solid var(--cly-border); background:var(--cly-surface); padding:11px 16px; }
.fd-os-tl-composer-lab { font-size:12px; color:var(--cly-text-muted); margin-bottom:6px; display:flex; align-items:center; gap:5px; }
.fd-os-tl-composer-lab .material-icons { font-size:15px; color:var(--cly-primary); }
.fd-os-tl-composer-row { display:flex; gap:8px; align-items:flex-end; }
.fd-os-tl-composer textarea { flex:1; background:var(--cly-bg); border:1px solid var(--cly-border); border-radius:8px; color:var(--cly-text-main); padding:9px 11px; font-size:13px; resize:none; font-family:inherit; }
.fd-os-tl-composer textarea:focus { border-color:var(--cly-border-focus); outline:none; }
.fd-os-tl-vazio, .fd-os-tl-erro { text-align:center; color:var(--cly-text-muted); padding:34px 12px; font-size:13px; }
.fd-os-tl-vazio .material-icons, .fd-os-tl-erro .material-icons { font-size:40px; display:block; margin:0 auto 8px; opacity:.6; color:var(--cly-text-muted); }
.fd-os-tl-skel { height:60px; border-radius:12px; background:var(--cly-surface); margin:12px 0 12px 48px; opacity:.6; }

/* ---- E-mail de confirmação ---- */
.fd-os-mail-info { display:flex; gap:9px; background:var(--cly-primary-bg); border-radius:10px; padding:10px 12px; margin-bottom:14px; }
.fd-os-mail-info .material-icons { color:var(--cly-primary-text); font-size:18px; flex:none; }
.fd-os-mail-info span { font-size:12.5px; color:var(--cly-primary-text); line-height:1.5; }
.fd-os-mail-lab { font-size:12.5px; font-weight:500; color:var(--cly-text-main); display:block; margin-bottom:6px; }
.fd-os-mail-add { display:flex; gap:8px; margin-bottom:6px; }
.fd-os-mail-add input { flex:1; min-width:0; background:var(--cly-bg); border:1px solid var(--cly-border); border-radius:9px; color:var(--cly-text-main); padding:10px 12px; font-size:13.5px; }
.fd-os-mail-add input:focus { border-color:var(--cly-border-focus); outline:none; }
.fd-os-mail-hint { font-size:11.5px; color:var(--cly-text-muted); margin-bottom:14px; display:flex; align-items:center; gap:5px; }
.fd-os-mail-hint .material-icons { font-size:14px; }
.fd-os-mail-sub { font-size:12px; font-weight:500; color:var(--cly-text-muted); margin:0 0 8px; }
.fd-os-mail-chips { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.fd-os-mail-chip { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; padding:6px 8px 6px 11px; border-radius:20px; border:1px solid var(--cly-border); background:var(--cly-surface); color:var(--cly-text-main); }
.fd-os-mail-chip .material-icons { font-size:15px; }
.fd-os-mail-chip .rm { cursor:pointer; opacity:.7; }
.fd-os-mail-invalido { display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fdos-bad); background:var(--fdos-badbg); border-radius:8px; padding:8px 10px; margin-bottom:8px; }
.fd-os-mail-invalido .material-icons { font-size:15px; }
.fd-os-mail-invalido .rm { margin-left:auto; cursor:pointer; opacity:.7; }
.fd-os-mail-sug { display:flex; align-items:center; gap:9px; border:1px solid var(--cly-border); border-radius:9px; padding:9px 11px; background:var(--cly-bg); margin-bottom:7px; }
.fd-os-mail-sug .material-icons { color:var(--cly-text-muted); }
.fd-os-mail-sug .nome { flex:1; min-width:0; font-size:13px; color:var(--cly-text-main); }
.fd-os-mail-sug .sub { font-size:11.5px; color:var(--cly-text-muted); }
.fd-os-mail-foot { display:flex; align-items:center; gap:10px; margin-top:4px; }
.fd-os-mail-cont { flex:1; font-size:12px; color:var(--cly-text-muted); }


/* ============================================================
   cly_infra — Tela de seleção de empresa (fd-selemp)
   Boas-vindas premium + "continuar de onde parou" + grade de
   empresas, renderizada inline no login (usuário com 2+ empresas).
   Tema claro/escuro via body.app_theme_dark com os tons do sistema
   (não usa --cly-*, pois aparece direto na tela). Responsivo.
   ============================================================ */
.fd-selemp {
    --fdse-card:   #ffffff;
    --fdse-cardbd: #e7eaee;
    --fdse-head:   #ffffff;
    --fdse-cur:    #edf7ee;
    --fdse-curbd:  #7cc47f;
    --fdse-tp:     #1f2530;
    --fdse-ts:     #667085;
    --fdse-tm:     #98a2b3;
    --fdse-acc:    #3d8b40;
    --fdse-accs:   #2e7d32;
    --fdse-inp:    #f7f8fa;
    --fdse-inpbd:  #dde1e6;
    --fdse-metabg: #f3f5f8;
    --fdse-shadow: 0 6px 22px rgba(16, 24, 40, 0.10);
    --fdse-ring:   rgba(102, 187, 106, 0.18);
    padding: 16px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
body.app_theme_dark .fd-selemp {
    --fdse-card:   #262626;
    --fdse-cardbd: #3a3a3a;
    --fdse-head:   #242424;
    --fdse-cur:    #1c2a1d;
    --fdse-curbd:  #4c8a50;
    --fdse-tp:     #f1f2f4;
    --fdse-ts:     #a9b0bb;
    --fdse-tm:     #7f8792;
    --fdse-acc:    #66bb6a;
    --fdse-accs:   #83ca86;
    --fdse-inp:    #2c2c2c;
    --fdse-inpbd:  #454545;
    --fdse-metabg: #333333;
    --fdse-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    --fdse-ring:   rgba(102, 187, 106, 0.22);
}

.fd-selemp .material-icons { color: inherit; }

.fd-selemp-host { max-width: 1360px; margin: 0 auto; }
.fd-selemp-host .fd-selemp { padding: 24px 28px; }

/* ---- hero de boas-vindas ---- */
.fd-selemp-hero {
    display: flex;
    align-items: center;
    gap: 24px;
    background: var(--fdse-head);
    border: 1px solid var(--fdse-cardbd);
    border-radius: 16px;
    padding: 24px 28px;
    margin-bottom: 28px;
    box-shadow: var(--fdse-shadow);
}
.fd-selemp-hero-brand { display: flex; align-items: center; gap: 13px; flex: 0 0 auto; }
.fd-selemp-logo { width: 50px; height: 50px; flex: 0 0 auto; }
.fd-selemp-word { font-size: 19px; font-weight: 600; line-height: 1.05; letter-spacing: -0.3px; }
.fd-selemp-word .w1 { color: var(--fdse-tp); }
.fd-selemp-word .w2 { color: var(--fdse-ts); }
.fd-selemp-hero-msg { flex: 1; min-width: 0; border-left: 1px solid var(--fdse-cardbd); padding-left: 24px; }
.fd-selemp-saud { font-size: 25px; font-weight: 600; color: var(--fdse-tp); line-height: 1.15; letter-spacing: -0.4px; }
.fd-selemp-frase { font-size: 14px; color: var(--fdse-ts); margin-top: 6px; }
.fd-selemp-hero-stat {
    flex: 0 0 auto;
    text-align: center;
    background: var(--fdse-cur);
    border: 1px solid var(--fdse-curbd);
    border-radius: 14px;
    padding: 12px 22px;
    min-width: 98px;
}
.fd-selemp-hero-stat .n { display: block; font-size: 28px; font-weight: 600; color: var(--fdse-accs); line-height: 1; letter-spacing: -0.5px; }
.fd-selemp-hero-stat .l { display: block; font-size: 13px; color: var(--fdse-ts); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.6px; }

/* ---- seções e barra de busca ---- */
.fd-selemp-sec {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.7px;
    text-transform: uppercase;
    color: var(--fdse-tm);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.fd-selemp-sec .material-icons { font-size: 15px; }
.fd-selemp-destaque-wrap { margin: 10px 0 28px; }
.fd-selemp-barra {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.fd-selemp-busca { flex: 1; min-width: 220px; max-width: 420px; }
.fd-selemp-busca input {
    width: 100%;
    box-sizing: border-box;
    height: 42px;
    background: var(--fdse-inp);
    border: 1px solid var(--fdse-inpbd);
    border-radius: 11px;
    color: var(--fdse-tp);
    font-size: 13.5px;
    padding: 0 16px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.fd-selemp-busca input::placeholder { color: var(--fdse-tm); }
.fd-selemp-busca input:focus { border-color: var(--fdse-curbd); box-shadow: 0 0 0 3px var(--fdse-ring); }
.fd-selemp-contador { font-size: 11.5px; color: var(--fdse-tm); margin: 0 2px 16px; }

/* ---- grade + cards ---- */
.fd-selemp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.fd-selemp-card {
    position: relative;
    background: var(--fdse-card);
    border: 1px solid var(--fdse-cardbd);
    border-radius: 14px;
    padding: 17px 18px;
    cursor: pointer;
    transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease;
}
.fd-selemp-card:hover { border-color: var(--fdse-curbd); transform: translateY(-2px); box-shadow: var(--fdse-shadow); }

/* card da grade — vertical, com bloco de informações completo */
.fd-selemp-grid .fd-selemp-card { display: flex; flex-direction: column; min-height: 160px; }
.fd-selemp-card-head { display: flex; align-items: flex-start; gap: 13px; }
.fd-selemp-head-txt { min-width: 0; flex: 1; }
.fd-selemp-info {
    margin-top: 14px;
    padding-top: 13px;
    border-top: 1px solid var(--fdse-cardbd);
    display: flex;
    flex-direction: column;
    gap: 7px;
}
.fd-selemp-linha { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fdse-ts); min-width: 0; }
.fd-selemp-linha .material-icons { font-size: 16px; color: var(--fdse-tm); flex: 0 0 auto; }
.fd-selemp-linha span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fd-selemp-linha .cnpj-val { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }

.fd-selemp-avatar {
    flex: 0 0 auto;
    position: relative;
    overflow: hidden;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 16px;
    letter-spacing: 0.3px;
    color: #ffffff;
}
.fd-selemp-avatar-lg { width: 52px; height: 52px; font-size: 18px; }
.fd-selemp-avatar-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #ffffff;
}
.fd-selemp-nome {
    font-size: 16px;
    font-weight: 600;
    color: var(--fdse-tp);
    letter-spacing: -0.2px;
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.fd-selemp-sub {
    font-size: 12.5px;
    color: var(--fdse-ts);
    margin-top: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.fd-selemp-id {
    flex: 0 0 auto;
    align-self: flex-start;
    font-size: 14px;
    font-weight: 600;
    color: var(--fdse-tm);
    background: var(--fdse-metabg);
    border-radius: 6px;
    padding: 2px 7px;
}
.fd-selemp-badge {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(102, 187, 106, 0.16);
    color: var(--fdse-accs);
    font-size: 14px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
}
.fd-selemp-badge .material-icons { font-size: 13px; }
.fd-selemp-seta {
    position: absolute;
    right: 15px;
    bottom: 15px;
    font-size: 20px;
    color: var(--fdse-accs);
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity 0.16s ease, transform 0.16s ease;
}
.fd-selemp-card:hover .fd-selemp-seta { opacity: 1; transform: translateX(0); }

/* card destaque — última empresa (horizontal, com botão Entrar) */
.fd-selemp-destaque {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    background: var(--fdse-cur);
    border-color: var(--fdse-curbd);
}
.fd-selemp-destaque:hover { transform: none; box-shadow: none; }
.fd-selemp-destaque .fd-selemp-body { min-width: 0; flex: 1; }
.fd-selemp-destaque-topo { display: flex; align-items: center; gap: 10px; }
.fd-selemp-destaque .fd-selemp-nome { font-size: 17px; -webkit-line-clamp: 1; }
.fd-selemp-meta {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 7px;
    font-size: 12.5px;
    color: var(--fdse-ts);
    white-space: nowrap;
    overflow: hidden;
}
.fd-selemp-meta .cnpj-val { font-variant-numeric: tabular-nums; letter-spacing: 0.2px; }
.fd-selemp-dot { color: var(--fdse-tm); opacity: 0.7; }
.fd-selemp-entrar {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fdse-acc);
    color: #ffffff;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    padding: 10px 20px;
    cursor: pointer;
    transition: filter 0.15s ease;
}
.fd-selemp-entrar:hover { filter: brightness(1.06); }
.fd-selemp-entrar .material-icons { font-size: 17px; color: #ffffff; }
.fd-selemp-vazio, .fd-selemp-erro { text-align: center; color: var(--fdse-tm); font-size: 13px; padding: 30px; }

@media (max-width: 860px) {
    .fd-selemp-hero { flex-wrap: wrap; gap: 16px; }
    .fd-selemp-hero-brand { order: 1; }
    .fd-selemp-hero-stat { order: 2; margin-left: auto; }
    .fd-selemp-hero-msg { order: 3; flex-basis: 100%; border-left: none; padding-left: 0; }
}
@media (max-width: 600px) {
    .fd-selemp-host .fd-selemp { padding: 16px; }
    .fd-selemp-grid { grid-template-columns: 1fr; }
    .fd-selemp-busca { max-width: none; }
    .fd-selemp-saud { font-size: 21px; }
    .fd-selemp-destaque { flex-wrap: wrap; }
    .fd-selemp-destaque .fd-selemp-body { flex-basis: 100%; }
    .fd-selemp-entrar { width: 100%; justify-content: center; }
}

/* ============================================================
   pref-hub — Tela de Preferências repaginada
   Busca fixa, seções recolhíveis, 1 campo por linha, ajuda
   (pra que serve / onde é usado / mais detalhes), barra de salvar fixa.
   Usa tons do TEMA DA TELA (não os --cly-* de modal). Tema-aware.
   ============================================================ */
.pref-hub {
    --pref-page:#f0f1f3; --pref-card:#ffffff; --pref-field:#f6f7f9;
    --pref-border:#e2e5ea; --pref-border2:#edeff2; --pref-text:#26313d; --pref-muted:#6b7683;
    --pref-teal:#0f8f7f; --pref-blu:#1c6fd0; --pref-amber:#b8730a;
    --pref-amber-bg:#fff6e6; --pref-grn:#2e7d32;
}
body.app_theme_dark .pref-hub {
    --pref-page:#303030; --pref-card:#424242; --pref-field:#383838;
    --pref-border:#565656; --pref-border2:#4a4a4a; --pref-text:#e6e6e6; --pref-muted:#9e9e9e;
    --pref-teal:#3fb8a8; --pref-blu:#7fb0e8; --pref-amber:#efa02a;
    --pref-amber-bg:rgba(239,160,42,.14); --pref-grn:#43a047;
}
.pref-hub { color: var(--pref-text); padding-bottom: 84px; }

/* barra fixa de busca (gruda abaixo do header fixo de 48px) */
.pref-topbar {
    position: sticky; top: 48px; z-index: 30;
    background: var(--pref-page);
    padding: 12px 0 10px; margin-bottom: 4px;
    border-bottom: 1px solid var(--pref-border);
}
.pref-search {
    display: flex; align-items: center; gap: 10px;
    background: var(--pref-card); border: 1px solid var(--pref-border);
    border-radius: 10px; padding: 10px 14px;
}
.pref-search .material-icons { font-size: 20px; color: var(--pref-muted); }
.pref-search input { flex: 1; border: 0; outline: 0; background: transparent; color: var(--pref-text); font-size: 15px; }
.pref-search input::placeholder { color: var(--pref-muted); }

/* seção recolhível */
.pref-sec { background: var(--pref-card); border: 1px solid var(--pref-border); border-radius: 12px; margin-bottom: 12px; overflow: hidden; }
.pref-sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px; cursor: pointer; user-select: none; }
.pref-sec-hd .pref-sec-tt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.pref-sec-hd .pref-chev { color: var(--pref-muted); transition: transform .15s; }
.pref-sec.pref-closed .pref-chev { transform: rotate(-90deg); }
.pref-sec.pref-closed .pref-sec-bd { display: none; }
.pref-sec-bd { padding: 8px 16px 16px; border-top: 1px solid var(--pref-border2); }
.pref-badge { font-size: 14px; padding: 2px 9px; border-radius: 20px; background: var(--pref-field); color: var(--pref-muted); border: 1px solid var(--pref-border2); white-space: nowrap; }
.pref-badge.pref-badge-alt { background: var(--pref-amber-bg); color: var(--pref-amber); border-color: var(--pref-amber); }

/* campo (1 por linha) */
.pref-fld { background: var(--pref-field); border: 1px solid var(--pref-border2); border-radius: 10px; padding: 13px 14px; margin-top: 11px; }
.pref-fld.pref-dirty { border-color: var(--pref-amber); box-shadow: inset 3px 0 0 var(--pref-amber); }
.pref-fld-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.pref-fld-lab { font-size: 13.5px; font-weight: 500; color: var(--pref-text); }
.pref-fld-dot { margin-left: auto; font-size: 14px; color: var(--pref-amber); white-space: nowrap; }
/* neutraliza o espaçamento do wrapper de input dentro do card */
.pref-fld .md-input-wrapper { margin: 0 !important; }
.pref-fld .uk-grid { margin: 0; }

/* bloco de ajuda */
.pref-info { margin-top: 11px; background: var(--pref-card); border: 1px solid var(--pref-border2); border-radius: 8px; padding: 11px 13px; display: flex; flex-direction: column; gap: 10px; }
.pref-info-row { display: flex; gap: 9px; font-size: 12.5px; color: var(--pref-muted); line-height: 1.5; }
.pref-info-row .material-icons { font-size: 16px; margin-top: 1px; flex-shrink: 0; }
.pref-info-row.pref-serve .material-icons { color: var(--pref-blu); }
.pref-info-row.pref-onde .material-icons { color: var(--pref-teal); }
.pref-k { display: block; font-size: 14px; text-transform: uppercase; letter-spacing: .04em; color: var(--pref-muted); margin-bottom: 2px; }
.pref-mais { color: var(--pref-blu); cursor: pointer; white-space: nowrap; }
.pref-det { margin-top: 7px; padding: 9px 11px; background: var(--pref-field); border: 1px solid var(--pref-border2); border-radius: 7px; color: var(--pref-text); display: none; }
.pref-det.pref-open { display: block; }

/* barra de salvar flutuante (fixed, padrão do antigo FAB — não interfere no scroll) */
.pref-savebar {
    position: fixed; bottom: 18px; right: 24px; z-index: 1000;
    display: flex; align-items: center; gap: 14px;
    background: var(--pref-card); border: 1px solid var(--pref-border);
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .35);
    padding: 10px 14px;
}
.pref-savebar .pref-count { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--pref-muted); }
.pref-savebar .pref-count.pref-has .material-icons { color: var(--pref-amber); }
.pref-savebar .pref-count.pref-has { color: var(--pref-amber); }
.pref-savebar .material-icons { font-size: 18px; }

.pref-empty { text-align: center; color: var(--pref-muted); padding: 30px; font-size: 13px; }

/* grid responsivo dentro das seções: 2-3 colunas em telas largas, 1 no mobile */
.pref-sec-bd {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(420px, 100%), 1fr));
    gap: 11px;
    align-items: start;
}
.pref-sec-bd .pref-fld { margin-top: 0; }
.pref-sec-bd > :not(.pref-fld) { grid-column: 1 / -1; }
.pref-fld.pref-full { grid-column: 1 / -1; }
.pref-sec.pref-closed .pref-sec-bd { display: none; }
@media (max-width: 900px) {
    .pref-sec-bd { grid-template-columns: 1fr; }
}

/* Dentro do card, o label do md-input deixa de ser absoluto (feito p/ 1 linha)
   e passa a fluir acima do campo — rótulos longos quebram sem sobrepor o controle */
.pref-fld .md-input-wrapper { padding-top: 0; }
.pref-fld .md-input-wrapper > label {
    position: static;
    top: auto; left: auto; right: auto;
    display: block;
    font-size: 12px;
    line-height: 1.45;
    white-space: normal;
    margin: 0 0 6px;
    color: var(--pref-muted);
}
/* EXCEÇÃO: o IdFinder/buscador tem layout próprio calibrado p/ label absoluto
   (botões com margin-top fixo) — restaura o comportamento original dentro dele */
.pref-fld .IdFinder .md-input-wrapper,
.pref-fld .buscador_storage .md-input-wrapper { padding-top: 4px; }
.pref-fld .IdFinder .md-input-wrapper > label,
.pref-fld .buscador_storage .md-input-wrapper > label {
    position: absolute;
    top: -6px; left: 4px; right: 0;
    margin: 0;
    white-space: nowrap;
}

@media (max-width: 600px) {
    .pref-sec-hd { padding: 12px 13px; }
    .pref-sec-bd { padding: 6px 12px 13px; }
}

/* ============================================================
   fd-select — Select customizado (substitui o <select> nativo)
   O select original fica escondido (fonte da verdade p/ salvar
   e pré-preenchimento). JS: assets/js/fd_select.js
   ============================================================ */
:root {
    --fdsel-bg:        #ffffff;
    --fdsel-border:    #cfd6de;
    --fdsel-text:      #26313d;
    --fdsel-muted:     #8a94a0;
    --fdsel-hover:     #eef2f6;
    --fdsel-sel-bg:    #e3f2fd;
    --fdsel-sel-text:  #1565c0;
    --fdsel-panel:     #ffffff;
    --fdsel-shadow:    0 8px 24px rgba(9, 30, 66, 0.18);
}
body.app_theme_dark {
    --fdsel-bg:        #2b2b2b;
    --fdsel-border:    #565656;
    --fdsel-text:      #e6e6e6;
    --fdsel-muted:     #9e9e9e;
    --fdsel-hover:     #3d3d3d;
    --fdsel-sel-bg:    #15324d;
    --fdsel-sel-text:  #7fb0e8;
    --fdsel-panel:     #383838;
    --fdsel-shadow:    0 8px 24px rgba(0, 0, 0, 0.55);
}

select.fd-select-native { display: none !important; }

.fd-select-btn {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    width: 100%;
    background: var(--fdsel-bg);
    border: 1px solid var(--fdsel-border);
    border-radius: 8px;
    padding: 9px 8px 9px 12px;
    font-size: 14px;
    color: var(--fdsel-text);
    text-align: left;
    cursor: pointer;
    transition: border-color .12s;
}
.fd-select-btn:hover,
.fd-select-btn:focus,
.fd-select-btn.fd-select-aberto { border-color: var(--cly-border-focus); outline: none; }
.fd-select-btn .fd-select-txt {
    flex: 1; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.fd-select-btn.fd-select-vazio .fd-select-txt { color: var(--fdsel-muted); }
.fd-select-btn .fd-select-seta { font-size: 22px; color: var(--fdsel-muted); flex-shrink: 0; }
.fd-select-btn.fd-select-aberto .fd-select-seta { transform: rotate(180deg); }

.fd-select-panel {
    background: var(--fdsel-panel);
    border: 1px solid var(--fdsel-border);
    border-radius: 10px;
    box-shadow: var(--fdsel-shadow);
    overflow: hidden;
    max-width: min(560px, calc(100vw - 16px));
}
.fd-select-busca-wrap { padding: 8px; border-bottom: 1px solid var(--fdsel-border); }
.fd-select-busca {
    width: 100%;
    background: var(--fdsel-bg);
    border: 1px solid var(--fdsel-border);
    border-radius: 7px;
    padding: 7px 10px;
    font-size: 13px;
    color: var(--fdsel-text);
    outline: none;
}
.fd-select-busca:focus { border-color: var(--cly-border-focus); }
.fd-select-lista { max-height: 280px; overflow-y: auto; padding: 5px; }
.fd-select-opt {
    padding: 9px 11px;
    border-radius: 7px;
    font-size: 13.5px;
    color: var(--fdsel-text);
    cursor: pointer;
    line-height: 1.4;
}
.fd-select-opt:hover,
.fd-select-opt-ativo { background: var(--fdsel-hover); }
.fd-select-opt-sel {
    background: var(--fdsel-sel-bg);
    color: var(--fdsel-sel-text);
    font-weight: 500;
}

/* ---------- formato CHIPS (badges agrupados em tela, escolha única) ---------- */
.fd-select-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 2px 0;
}
.fd-select-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--fdsel-bg);
    border: 1px solid var(--fdsel-border);
    border-radius: 18px;
    padding: 7px 15px;
    font-size: 13px;
    color: var(--fdsel-text);
    cursor: pointer;
    line-height: 1.2;
    transition: border-color .12s, background .12s;
}
.fd-select-chip:hover,
.fd-select-chip:focus { border-color: var(--cly-border-focus); outline: none; }
.fd-select-chip .fd-select-chip-check {
    display: none;
    font-size: 15px;
}
.fd-select-chip.fd-select-chip-sel {
    background: var(--fdsel-sel-bg);
    border-color: var(--cly-border-focus);
    color: var(--fdsel-sel-text);
    font-weight: 500;
}
.fd-select-chip.fd-select-chip-sel .fd-select-chip-check { display: inline-block; }
.fd-select-chip.fd-select-chip-vazio {
    border-style: dashed;
    color: var(--fdsel-muted);
}
.fd-select-chip.fd-select-chip-vazio.fd-select-chip-sel {
    background: transparent;
    border-color: var(--fdsel-border);
    color: var(--fdsel-muted);
    font-weight: 400;
}

/* ============================================================
   DOCUMENTOS FISCAIS DA O.S. (cly_ordem_servico.documentos_fiscais)
   Modal NFS-e / NF-e / NFC-e. Reaproveita o chrome cly-os-* (box, head,
   step, ctx, body, acts). Aqui só o conteúdo específico (cly-osdf-*).
   Tema-aware (claro/escuro via body.app_theme_dark) + mobile.
   ============================================================ */
.cly-osdf-ctx { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.cly-osdf-cli { font-weight:500; color:#172b4d; }
.cly-osdf-tot { color:#5e6c84; }
.cly-osdf-tot b { color:#15803d; font-size:14px; font-variant-numeric:tabular-nums; margin-left:3px; }
.cly-osdf-chips { display:inline-flex; gap:7px; flex-wrap:wrap; margin-left:auto; }
.cly-osdf-body { padding:15px 18px; }

.cly-osdf-card { background:#fff; border:.5px solid #e6e8ec; border-radius:11px; margin-bottom:12px; overflow:hidden; }
.cly-osdf-card.col { border-color:#f0d9a8; }
.cly-osdf-card.amb { border-color:#f0d9a8; }
.cly-osdf-chd { display:flex; align-items:center; gap:10px; padding:12px 15px; border-bottom:.5px solid #eceef0; }
.cly-osdf-card.col .cly-osdf-chd { background:#fffaf0; border-bottom-color:#f0e2c7; }
.cly-osdf-av { width:32px; height:32px; border-radius:9px; background:#eef1f4; color:#3d4757; display:inline-flex; align-items:center; justify-content:center; font-size:12.5px; font-weight:500; flex:0 0 auto; }
.cly-osdf-av.col { background:#faeeda; color:#8a5a12; }
.cly-osdf-chd .t { font-size:14px; font-weight:500; color:#172b4d; }
.cly-osdf-card.col .cly-osdf-chd .t { color:#8a5a12; }
.cly-osdf-chd .s { font-size:12px; color:#8993a4; margin-top:1px; }
.cly-osdf-colbadge { margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:11.5px; font-weight:500; color:#8a5a12; background:#faeeda; border:1px solid #f0e2c7; border-radius:11px; padding:3px 10px; }
.cly-osdf-colbadge .material-icons { font-size:14px; }

.cly-osdf-row { padding:12px 15px; }
.cly-osdf-row + .cly-osdf-row { border-top:1px dashed #eceef0; }
.cly-osdf-rline { display:flex; align-items:center; gap:11px; flex-wrap:wrap; }
.cly-osdf-ic { width:34px; height:34px; border-radius:9px; display:inline-flex; align-items:center; justify-content:center; font-size:18px; flex:0 0 auto; background:#eef1f4; color:#8993a4; }
.cly-osdf-ic.run { background:#e8f1fb; color:#1c5f9e; }
.cly-osdf-ic.warn { background:#faeeda; color:#8a5a12; }
.cly-osdf-ic.err { background:#fdecec; color:#b03434; }
.cly-osdf-rline .t { font-size:14px; font-weight:500; color:#172b4d; }
.cly-osdf-rline .s { font-size:12px; color:#8993a4; margin-top:1px; }

.cly-osdf-stt { font-size:12px; font-weight:500; display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:11px; white-space:nowrap; }
.cly-osdf-stt .material-icons { font-size:14px; }
.cly-osdf-stt.neu { background:#f1f1ef; color:#5e6c84; }
.cly-osdf-stt.ok { background:#e7f4ec; color:#2f7d46; }
.cly-osdf-stt.warn { background:#faeeda; color:#8a5a12; }
.cly-osdf-stt.run { background:#e8f1fb; color:#1c5f9e; }

.cly-osdf-act { margin-left:auto; display:flex; gap:7px; flex-wrap:wrap; }
.cly-osdf-btn { display:inline-flex; align-items:center; gap:6px; border:.5px solid #d5dae1; background:#fff; color:#42526e; height:32px; padding:0 13px; border-radius:8px; font-size:12.5px; font-weight:500; cursor:pointer; transition:background .12s, border-color .12s; }
.cly-osdf-btn:hover { background:#f5f8fc; border-color:#c2cbd6; }
.cly-osdf-btn .material-icons { font-size:15px; }
.cly-osdf-btn.pri, .cly-osdf-btn.go { border-color:#1a63bd; background:#1c6fd0; color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.18); }
.cly-osdf-btn.pri:hover, .cly-osdf-btn.go:hover { background:#1862bd; border-color:#17579f; }
.cly-osdf-btn.dgr { border-color:#e6c3c3; color:#b03434; }
.cly-osdf-btn.dgr:hover { background:#fdf2f2; border-color:#dca9a9; }
.cly-osdf-btn.red { border-color:#b83c30; background:#c74a3c; color:#fff; }
.cly-osdf-btn.red:hover { background:#b83c30; }

.cly-osdf-emitrow { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; padding-left:45px; }
.cly-osdf-emitrow .sp { flex:1; }

/* barra de ações padrão (documento não emitido): card de pré-visualizar compacto + Emitir em destaque */
.cly-osdf-acts { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:13px 0 2px; padding-left:45px; }
.cly-osdf-acts .sp { flex:1; min-width:0; }
.cly-osdf-prevcard { display:inline-flex; align-items:center; gap:6px; border:.5px solid #e2e5ea; border-radius:10px; background:#f7f9fb; padding:5px 8px 5px 10px; }
.cly-osdf-pvlbl { display:inline-flex; align-items:center; gap:5px; font-size:11.5px; color:#8993a4; margin-right:2px; }
.cly-osdf-pvlbl .material-icons { font-size:15px; }
.cly-osdf-pvi { display:inline-flex; align-items:center; gap:5px; border:.5px solid #d5dae1; background:#fff; color:#42526e; height:30px; padding:0 11px; border-radius:7px; font-size:12px; font-weight:500; cursor:pointer; transition:background .12s, border-color .12s; }
.cly-osdf-pvi:hover { background:#eef4fb; border-color:#b9c6d6; }
.cly-osdf-pvi .material-icons { font-size:15px; }
.cly-osdf-pvi.pdf .material-icons { color:#c5544a; }
.cly-osdf-pvi.xml .material-icons { color:#3f7cae; }
.cly-osdf-emitbtn { display:inline-flex; align-items:center; gap:9px; border:none; background:#2f9d57; color:#fff; height:46px; padding:0 26px; border-radius:11px; font-size:14.5px; font-weight:500; letter-spacing:.2px; cursor:pointer; box-shadow:0 4px 12px rgba(31,157,87,.34), inset 0 1px 0 rgba(255,255,255,.22); transition:background .12s, box-shadow .12s, transform .06s; }
.cly-osdf-emitbtn:hover { background:#2a9050; box-shadow:0 6px 16px rgba(31,157,87,.4); }
.cly-osdf-emitbtn:active { transform:translateY(1px); }
.cly-osdf-emitbtn .material-icons { font-size:19px; }

.cly-osdf-mrow { display:flex; gap:10px; flex-wrap:wrap; margin:12px 0 0 45px; }
.cly-osdf-mcard { flex:1; min-width:180px; display:flex; align-items:center; gap:10px; border:1.5px solid #e0e3e8; border-radius:10px; padding:11px 13px; background:#fff; cursor:pointer; transition:border-color .12s, background .12s; }
.cly-osdf-mcard:hover { border-color:#9cc4ee; }
.cly-osdf-mcard.on { border-color:#2f9d57; background:#eaf7ef; }
.cly-osdf-mcard > .material-icons { font-size:20px; color:#9aa1ad; flex:0 0 auto; }
.cly-osdf-mcard.on > .material-icons { color:#2f9d57; }
.cly-osdf-mcard .t { font-size:13.5px; font-weight:500; color:#172b4d; }
.cly-osdf-mcard .s { font-size:12px; color:#8993a4; margin-top:1px; }

.cly-osdf-panel { margin:12px 0 0 45px; border:.5px solid #e0e3e8; border-radius:10px; padding:12px 14px; background:#fbfcfd; }
.cly-osdf-panel .pt { font-size:13.5px; font-weight:500; color:#172b4d; display:flex; align-items:center; gap:7px; margin-bottom:9px; }
.cly-osdf-panel .pt .material-icons { font-size:17px; color:#1976d2; }
.cly-osdf-panel .pt .ps { font-weight:400; font-size:12px; color:#8993a4; }
.cly-osdf-fgrid { display:flex; gap:10px; flex-wrap:wrap; }
.cly-osdf-fgrid > div { flex:1; min-width:150px; }
.cly-osdf-fgrid label { display:block; font-size:12px; color:#5e6c84; margin-bottom:4px; }
.cly-osdf-inp { width:100%; height:38px; border:1px solid #cfd5dd; border-radius:8px; padding:0 11px; font-size:14px; color:#172b4d; background:#fff; box-sizing:border-box; }
.cly-osdf-inp:focus { border-color:#3f82cc; outline:none; box-shadow:0 0 0 3px rgba(63,130,204,.16); }
.cly-osdf-chk { display:flex; align-items:center; gap:8px; margin-top:10px; font-size:12.5px; color:#5e6c84; cursor:pointer; }

.cly-osdf-table { width:100%; border-collapse:collapse; font-size:13.5px; }
.cly-osdf-table td { padding:6px 0; color:#5e6c84; }
.cly-osdf-table td.vl { text-align:right; color:#172b4d; font-variant-numeric:tabular-nums; }
.cly-osdf-table td.vl.neg { color:#b03434; }
.cly-osdf-table tr + tr td { border-top:1px dashed #e6e8ec; }
.cly-osdf-newtot-w { display:flex; justify-content:flex-end; margin-top:11px; }
.cly-osdf-newtot { background:#e7f4ec; border:1px solid #c3e4cf; border-radius:10px; padding:9px 18px; text-align:right; }
.cly-osdf-newtot .l { font-size:14px; letter-spacing:.5px; color:#2f7d46; }
.cly-osdf-newtot .v { font-size:19px; font-weight:600; color:#2f7d46; font-variant-numeric:tabular-nums; }

.cly-osdf-note { display:flex; gap:11px; align-items:center; padding:12px 15px; }
.cly-osdf-note .material-icons { font-size:19px; color:#b9821f; flex:0 0 auto; }
.cly-osdf-note .t { font-size:14px; font-weight:500; color:#8a5a12; }
.cly-osdf-note .s { font-size:12.5px; color:#a5762a; margin-top:1px; }

.cly-osdf-pad { padding:13px 15px; }
.cly-osdf-load { display:flex; align-items:center; gap:13px; padding:16px 14px; }
.cly-osdf-load .t { font-size:14px; font-weight:500; color:#1c5f9e; }
.cly-osdf-load .s { font-size:12.5px; color:#8993a4; margin-top:2px; }
.cly-osdf-load .material-icons { font-size:24px; color:#1c5f9e; }
.cly-osdf-track { height:4px; background:#e6e8ec; border-radius:2px; overflow:hidden; margin-top:2px; }
.cly-osdf-bar { height:100%; background:#1c6fd0; }
.cly-osdf-bar.ind { width:40%; border-radius:2px; animation:clyOsdfInd 1.1s ease-in-out infinite; }
@keyframes clyOsdfInd { 0%{margin-left:-40%;} 100%{margin-left:100%;} }
.cly-osdf-spin { animation:clyOsdfSpin .9s linear infinite; }
@keyframes clyOsdfSpin { to { transform:rotate(360deg); } }

.cly-osdf-errbox { margin:11px 0 0 45px; background:#fdecec; border:1px solid #f2c6c6; border-radius:9px; padding:9px 13px; font-size:13px; color:#b03434; }
.cly-osdf-void { font-size:12.5px; color:#8993a4; padding:4px 4px 6px; display:flex; align-items:center; gap:6px; }
.cly-osdf-void .material-icons { font-size:16px; }

.cly-osdf-danger { width:100%; background:#fdecec; border:1px solid #f2c6c6; border-radius:10px; padding:13px 15px; }
.cly-osdf-danger .dt { font-size:14px; font-weight:500; color:#b03434; display:flex; align-items:center; gap:7px; }
.cly-osdf-danger .dt .material-icons { font-size:18px; }
.cly-osdf-danger .ds { font-size:12.5px; color:#a5762a; margin:3px 0 10px; }
.cly-osdf-danger label { display:block; font-size:12.5px; color:#8993a4; margin-bottom:5px; }
.cly-osdf-just { width:100%; min-height:56px; border:1px solid #cfd5dd; border-radius:8px; padding:8px 11px; font-size:13.5px; color:#172b4d; background:#fff; box-sizing:border-box; resize:vertical; font-family:inherit; }
.cly-osdf-just:focus { border-color:#c74a3c; outline:none; box-shadow:0 0 0 3px rgba(199,74,60,.14); }
.cly-osdf-danger .da { display:flex; gap:8px; justify-content:flex-end; margin-top:11px; flex-wrap:wrap; }

/* ---- dark ---- */
body.app_theme_dark .cly-osdf-cli { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-tot { color:#a5a5a5; }
body.app_theme_dark .cly-osdf-tot b { color:#66c97a; }
body.app_theme_dark .cly-osdf-card { background:#424242; border-color:#565656; }
body.app_theme_dark .cly-osdf-card.col, body.app_theme_dark .cly-osdf-card.amb { border-color:#6b5a2e; }
body.app_theme_dark .cly-osdf-chd { border-bottom-color:#4f4f4f; }
body.app_theme_dark .cly-osdf-card.col .cly-osdf-chd { background:#4a4226; border-bottom-color:#6b5a2e; }
body.app_theme_dark .cly-osdf-av { background:#4f4f4f; color:#d4d4d4; }
body.app_theme_dark .cly-osdf-av.col { background:rgba(224,140,18,.22); color:#f0b54a; }
body.app_theme_dark .cly-osdf-chd .t { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-card.col .cly-osdf-chd .t { color:#f0b54a; }
body.app_theme_dark .cly-osdf-chd .s { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-colbadge { color:#f0b54a; background:rgba(224,140,18,.22); border-color:#6b5a2e; }
body.app_theme_dark .cly-osdf-row + .cly-osdf-row { border-top-color:#4a4a4a; }
body.app_theme_dark .cly-osdf-ic { background:#4f4f4f; color:#b7bcc4; }
body.app_theme_dark .cly-osdf-ic.run { background:#2c3c50; color:#9fcbf5; }
body.app_theme_dark .cly-osdf-ic.warn { background:#4a4226; color:#f0b54a; }
body.app_theme_dark .cly-osdf-ic.err { background:#3a2626; color:#f09595; }
body.app_theme_dark .cly-osdf-rline .t { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-rline .s { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-stt.neu { background:#3a3a37; color:#b5b5ad; }
body.app_theme_dark .cly-osdf-stt.ok { background:#28402f; color:#7ed996; }
body.app_theme_dark .cly-osdf-stt.warn { background:#4a4226; color:#f0b54a; }
body.app_theme_dark .cly-osdf-stt.run { background:#2c3c50; color:#9fcbf5; }
body.app_theme_dark .cly-osdf-btn { background:#383838; border-color:#565656; color:#d4d4d4; }
body.app_theme_dark .cly-osdf-btn:hover { background:#454545; border-color:#666; }
body.app_theme_dark .cly-osdf-btn.pri, body.app_theme_dark .cly-osdf-btn.go { background:#3f82cc; border-color:#356fb0; color:#fff; }
body.app_theme_dark .cly-osdf-btn.pri:hover, body.app_theme_dark .cly-osdf-btn.go:hover { background:#4a8ed6; }
body.app_theme_dark .cly-osdf-btn.dgr { border-color:#5c3030; color:#f09595; }
body.app_theme_dark .cly-osdf-btn.dgr:hover { background:#3a2626; }
body.app_theme_dark .cly-osdf-mcard { background:#383838; border-color:#565656; }
body.app_theme_dark .cly-osdf-mcard:hover { border-color:#4d7fb5; }
body.app_theme_dark .cly-osdf-mcard.on { border-color:#3fae6a; background:#22352a; }
body.app_theme_dark .cly-osdf-mcard > .material-icons { color:#8a8a8a; }
body.app_theme_dark .cly-osdf-mcard.on > .material-icons { color:#5bc481; }
body.app_theme_dark .cly-osdf-mcard .t { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-mcard .s { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-panel { background:#383838; border-color:#565656; }
body.app_theme_dark .cly-osdf-panel .pt { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-panel .pt .material-icons { color:#7ab8f5; }
body.app_theme_dark .cly-osdf-panel .pt .ps { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-fgrid label { color:#c2c8d2; }
body.app_theme_dark .cly-osdf-inp { background:#2e2e2e; border-color:#5f5f5f; color:#f2f2f2; }
body.app_theme_dark .cly-osdf-chk { color:#c2c8d2; }
body.app_theme_dark .cly-osdf-table td { color:#a5a5a5; }
body.app_theme_dark .cly-osdf-table td.vl { color:#e0e0e0; }
body.app_theme_dark .cly-osdf-table td.vl.neg { color:#f09595; }
body.app_theme_dark .cly-osdf-table tr + tr td { border-top-color:#4a4a4a; }
body.app_theme_dark .cly-osdf-newtot { background:#28402f; border-color:#37543f; }
body.app_theme_dark .cly-osdf-newtot .l, body.app_theme_dark .cly-osdf-newtot .v { color:#66c97a; }
body.app_theme_dark .cly-osdf-note .material-icons { color:#f0b54a; }
body.app_theme_dark .cly-osdf-note .t { color:#f0b54a; }
body.app_theme_dark .cly-osdf-note .s { color:#c9a24e; }
body.app_theme_dark .cly-osdf-load .t { color:#9fcbf5; }
body.app_theme_dark .cly-osdf-load .s { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-load .material-icons { color:#9fcbf5; }
body.app_theme_dark .cly-osdf-track { background:#4a4a4a; }
body.app_theme_dark .cly-osdf-bar { background:#3f82cc; }
body.app_theme_dark .cly-osdf-errbox { background:#3a2626; border-color:#5c3030; color:#f09595; }
body.app_theme_dark .cly-osdf-void { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-danger { background:#3a2626; border-color:#5c3030; }
body.app_theme_dark .cly-osdf-danger .dt { color:#f09595; }
body.app_theme_dark .cly-osdf-danger .ds { color:#c9a24e; }
body.app_theme_dark .cly-osdf-danger label { color:#9a9a9a; }
body.app_theme_dark .cly-osdf-just { background:#2e2e2e; border-color:#5f5f5f; color:#f2f2f2; }
body.app_theme_dark .cly-osdf-prevcard { background:#383838; border-color:#565656; }
body.app_theme_dark .cly-osdf-pvlbl { color:#9aa1ad; }
body.app_theme_dark .cly-osdf-pvi { background:#2e2e2e; border-color:#565656; color:#d4d4d4; }
body.app_theme_dark .cly-osdf-pvi:hover { background:#3a3a3a; border-color:#666; }
body.app_theme_dark .cly-osdf-pvi.pdf .material-icons { color:#e08279; }
body.app_theme_dark .cly-osdf-pvi.xml .material-icons { color:#7fb0dd; }
body.app_theme_dark .cly-osdf-emitbtn { box-shadow:0 4px 13px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16); }

/* ---- mobile ---- */
@media (max-width:600px) {
    .cly-osdf-chips { margin-left:0; width:100%; }
    .cly-osdf-act { margin-left:0; width:100%; margin-top:8px; }
    .cly-osdf-emitrow { padding-left:0; }
    .cly-osdf-emitrow .sp { display:none; }
    .cly-osdf-mrow, .cly-osdf-panel { margin-left:0; }
    .cly-osdf-errbox { margin-left:0; }
    .cly-osdf-mcard { min-width:100%; }
    .cly-osdf-acts { padding-left:0; }
    .cly-osdf-acts .sp { display:none; }
    .cly-osdf-prevcard { width:100%; box-sizing:border-box; justify-content:space-between; }
    .cly-osdf-prevcard .cly-osdf-pvi { flex:1; justify-content:center; }
    .cly-osdf-emitbtn { width:100%; justify-content:center; }
}

/* ===================================================================
   Badges de topo da O.S. (Status / Atendente / Documento) — "badge-moderno".
   Antes injetados inline no JS da O.S. Detalhada; movidos para cá para reuso
   (Detalhada, Simplificada, Externa) sem injeção de <style> via JS. Tema-aware.
   =================================================================== */
.badge-moderno { display:inline-flex; align-items:center; padding:6px 12px; border-radius:50px; font-size:12px; font-weight:600; line-height:1; box-shadow:0 1px 3px rgba(0,0,0,0.1); transition:all 0.2s ease; }
.badge-moderno i.material-icons { font-size:14px; margin-right:6px; }
.badge-blue { background:#e0f2fe; color:#0284c7; border:1px solid #bae6fd; }
.badge-green { background:#dcfce7; color:#16a34a; border:1px solid #bbf7d0; }
.badge-orange { background:#ffedd5; color:#ea580c; border:1px solid #fed7aa; }
.badge-red { background:#fee2e2; color:#dc2626; border:1px solid #fecaca; }
.badge-purple { background:#f3e8ff; color:#9333ea; border:1px solid #e9d5ff; }
.badge-teal { background:#ccfbf1; color:#0d9488; border:1px solid #99f6e4; }
.badge-dark { background:#f1f5f9; color:#334155; border:1px solid #e2e8f0; }
.app_theme_dark .badge-moderno { box-shadow:none; }
.app_theme_dark .badge-blue { background:#0c4a6e; color:#7dd3fc; border-color:#0284c7; }
.app_theme_dark .badge-green { background:#14532d; color:#86efac; border-color:#16a34a; }
.app_theme_dark .badge-orange { background:#7c2d12; color:#fdba74; border-color:#ea580c; }
.app_theme_dark .badge-red { background:#7f1d1d; color:#fca5a5; border-color:#dc2626; }
.app_theme_dark .badge-purple { background:#581c87; color:#d8b4fe; border-color:#9333ea; }
.app_theme_dark .badge-teal { background:#134e4a; color:#5eead4; border-color:#0d9488; }
.app_theme_dark .badge-dark { background:#334155; color:#e2e8f0; border-color:#475569; }


/* =========================================================================
   MENU LATERAL — fd-nav-v2 (redesign opt-in do sidebar)
   Ativado pela classe .fd-nav-v2 em #sidebar_main (application/views/site_template/menu.php).
   Todo o estilo e escopado nesse seletor: remover a classe = volta 100% ao legado.
   Theme-aware por variaveis: claro por padrao, escuro sob body.app_theme_dark.
   Ver docs/componentes/menu_lateral_ESTUDO.md
   ========================================================================= */
#sidebar_main.fd-nav-v2{
    --fdn-bg:#ffffff; --fdn-panel:#f3f4f5; --fdn-hover:#e9eaec;
    --fdn-text:#212121; --fdn-muted:rgba(0,0,0,.55); --fdn-faint:rgba(0,0,0,.42);
    --fdn-icon:rgba(0,0,0,.6); --fdn-line:rgba(0,0,0,.12);
    --fdn-rowhover:rgba(0,0,0,.05); --fdn-guide:rgba(0,0,0,.14);
    --fdn-green:#7cb342; --fdn-green-txt:#4e7a29;
    --fdn-blue:#546e7a; --fdn-cyan:#0277bd;
    background:var(--fdn-bg);
}
body.app_theme_dark #sidebar_main.fd-nav-v2{
    --fdn-bg:#424242; --fdn-panel:#3a3a3a; --fdn-hover:#4d4d4d;
    --fdn-text:#fefefe; --fdn-muted:rgba(255,255,255,.55); --fdn-faint:rgba(255,255,255,.4);
    --fdn-icon:rgba(255,255,255,.85); --fdn-line:rgba(255,255,255,.10);
    --fdn-rowhover:rgba(255,255,255,.06); --fdn-guide:rgba(255,255,255,.13);
    --fdn-green:#7cb342; --fdn-green-txt:#a5d66d;
    --fdn-blue:#546e7a; --fdn-cyan:#01d1e7;
}
#sidebar_main.fd-nav-v2 .menu_title{ font-family:Roboto,sans-serif; }

/* ---- Cabecalho / empresa ---- */
#sidebar_main.fd-nav-v2 .sidebar_main_header.fd-nav-header{
    height:auto !important; background:none !important; padding:0; border-bottom:1px solid var(--fdn-line);
}
#sidebar_main.fd-nav-v2 .fd-nav-empresa{ display:flex; align-items:center; gap:11px; padding:13px 14px 11px; }
#sidebar_main.fd-nav-v2 .fd-nav-logo{ width:40px; height:40px; border-radius:50%; flex:0 0 auto; }
#sidebar_main.fd-nav-v2 .fd-nav-empresa-info{ min-width:0; flex:1; }
#sidebar_main.fd-nav-v2 .fd-nav-empresa-nome{ display:block; font-size:14px; font-weight:500; color:var(--fdn-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sidebar_main.fd-nav-v2 .fd-nav-empresa-sub{ display:block; font-size:14px; color:var(--fdn-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

#sidebar_main.fd-nav-v2 a.fd-nav-trocar{
    display:flex; align-items:center; justify-content:center; gap:8px;
    margin:0 14px 12px; padding:8px 10px; border:1px solid var(--fdn-line); border-radius:8px;
    background:var(--fdn-panel); color:var(--fdn-text); font-size:12px; font-weight:500; text-decoration:none;
    transition:border-color .15s ease, background .15s ease;
}
#sidebar_main.fd-nav-v2 a.fd-nav-trocar:hover{ border-color:var(--fdn-green); background:var(--fdn-hover); }
#sidebar_main.fd-nav-v2 a.fd-nav-trocar .material-icons{ font-size:17px; color:var(--fdn-green); }

/* ---- Usuario ---- */
#sidebar_main.fd-nav-v2 .fd-nav-user{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-top:1px solid var(--fdn-line); }
#sidebar_main.fd-nav-v2 .fd-nav-user-avatar .material-icons{ font-size:32px; color:var(--fdn-blue); }
#sidebar_main.fd-nav-v2 .fd-nav-user-info{ min-width:0; flex:1; }
#sidebar_main.fd-nav-v2 .fd-nav-user-nome{ display:block; font-size:13px; font-weight:500; color:var(--fdn-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#sidebar_main.fd-nav-v2 .fd-nav-user-email{ display:block; font-size:14px; color:var(--fdn-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ---- Data ---- */
#sidebar_main.fd-nav-v2 .fd-nav-data{
    display:flex; align-items:center; gap:11px; margin:11px 14px 4px; padding:9px 12px;
    background:var(--fdn-panel); border-radius:10px; border-left:3px solid var(--fdn-green);
}
#sidebar_main.fd-nav-v2 .fd-nav-data > .material-icons{ font-size:23px; color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 .fd-nav-data-txt{ flex:1; min-width:0; font-size:12px; line-height:1.35; color:var(--fdn-text); text-transform:none; }
#sidebar_main.fd-nav-v2 .fd-nav-data-txt::first-line{ text-transform:capitalize; }
#sidebar_main.fd-nav-v2 .fd-nav-data-hora{ font-size:17px; font-weight:500; color:var(--fdn-text); }

/* ---- Secao do menu ---- */
#sidebar_main.fd-nav-v2 .menu_section{ margin-bottom:16px !important; }
#sidebar_main.fd-nav-v2 .menu_section ul{ list-style:none; }

/* Consulta Produto = campo de busca (F9) */
#sidebar_main.fd-nav-v2 li.fd-nav-busca-item{ margin:12px 14px 6px; }
#sidebar_main.fd-nav-v2 a.fd-nav-busca{
    display:flex !important; align-items:center; gap:9px; padding:9px 11px !important;
    background:var(--fdn-panel); border:1px solid rgba(124,179,66,.45); border-radius:9px; height:auto !important; line-height:normal !important;
}
#sidebar_main.fd-nav-v2 a.fd-nav-busca:hover{ border-color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 a.fd-nav-busca .menu_icon{ min-width:0; width:auto; }
#sidebar_main.fd-nav-v2 a.fd-nav-busca .menu_icon .material-icons{ font-size:18px; color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 a.fd-nav-busca .menu_title{ flex:1; font-size:13px; color:var(--fdn-muted) !important; }
#sidebar_main.fd-nav-v2 .fd-nav-kbd{
    font-size:13px; font-weight:500; padding:1px 6px; border-radius:4px;
    background:var(--fdn-hover); color:var(--fdn-muted); border:1px solid var(--fdn-line);
}

/* ---- Itens de menu (Ultimos acessos + FlexMenu) ---- */
#sidebar_main.fd-nav-v2 .menu_section > ul > li > a,
#sidebar_main.fd-nav-v2 li.submenu_trigger > a{
    display:flex; align-items:center; gap:0; padding:0 16px; height:42px; font-size:14px; font-weight:500;
    color:var(--fdn-text); text-decoration:none; position:relative; transition:background .12s ease;
}
#sidebar_main.fd-nav-v2 .menu_section > ul > li > a:hover,
#sidebar_main.fd-nav-v2 li.submenu_trigger > a:hover{ background:var(--fdn-rowhover); }
#sidebar_main.fd-nav-v2 li.submenu_trigger > a .menu_icon{ width:32px; flex:0 0 auto; }
#sidebar_main.fd-nav-v2 li.submenu_trigger > a .menu_icon .material-icons{ font-size:21px; color:var(--fdn-icon); }
#sidebar_main.fd-nav-v2 li.submenu_trigger > a .menu_title{ flex:1; color:var(--fdn-text); }
#sidebar_main.fd-nav-v2 li.submenu_trigger > a:after{ margin-left:auto; }

/* PAGINA ABERTA = destaque (mecanismo do sistema: .act_item na folha, .current_section no grupo).
   :not(.fd-nav-ultimos) evita verdejar o cabecalho "Ultimos acessos" caso o SPA marque por la */
#sidebar_main.fd-nav-v2 li.submenu_trigger.act_item > a{
    background:rgba(124,179,66,.16); box-shadow:inset 3px 0 0 var(--fdn-green);
}
#sidebar_main.fd-nav-v2 li.submenu_trigger.act_item > a .menu_title{ color:var(--fdn-green-txt); }
#sidebar_main.fd-nav-v2 li.submenu_trigger.act_item > a .menu_icon .material-icons{ color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 li.submenu_trigger.current_section:not(.fd-nav-ultimos) > a .menu_title{ color:var(--fdn-green-txt); }
#sidebar_main.fd-nav-v2 li.submenu_trigger.current_section:not(.fd-nav-ultimos) > a .menu_icon .material-icons{ color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 .menu_section ul ul li.act_item > a{
    background:rgba(124,179,66,.16); box-shadow:inset 3px 0 0 var(--fdn-green);
}
#sidebar_main.fd-nav-v2 .menu_section ul ul li.act_item > a .menu_title{ color:var(--fdn-green-txt); }

#sidebar_main.fd-nav-v2 .fd-nav-ultimos > a .menu_icon .material-icons{ color:var(--fdn-icon); }

/* ---- Submenus (ChildOf*) com fio-guia ---- */
#sidebar_main.fd-nav-v2 .menu_section ul ul{ margin-left:26px; border-left:2px solid var(--fdn-guide); padding-left:0; }
#sidebar_main.fd-nav-v2 .menu_section ul ul li > a{
    display:flex; align-items:flex-start; gap:9px; padding:8px 12px 8px 18px; font-size:13px; color:var(--fdn-text); text-decoration:none;
}
#sidebar_main.fd-nav-v2 .menu_section ul ul li > a:hover{ background:var(--fdn-rowhover); }
#sidebar_main.fd-nav-v2 .menu_section ul ul .menu_title{ flex:1; font-size:13px; color:var(--fdn-text); white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }
#sidebar_main.fd-nav-v2 .fd-nav-tempo{ font-size:13px; color:var(--fdn-faint); flex:0 0 auto; }
#sidebar_main.fd-nav-v2 .fd-nav-ultimo-link:first-child .fd-nav-tempo{ color:var(--fdn-green); }

/* ---- Rodape de suporte ---- */
#sidebar_main.fd-nav-v2 .fd-nav-footer{ margin:8px 12px 14px; }
#sidebar_main.fd-nav-v2 a.fd-nav-suporte{
    display:flex; align-items:center; gap:8px; padding:10px 12px; background:var(--fdn-panel);
    border-radius:10px 10px 0 0; text-decoration:none; border-bottom:1px solid var(--fdn-line);
}
#sidebar_main.fd-nav-v2 a.fd-nav-suporte:hover{ background:var(--fdn-hover); }
#sidebar_main.fd-nav-v2 .fd-nav-suporte-ic{ font-size:20px; color:var(--fdn-green); }
#sidebar_main.fd-nav-v2 .fd-nav-suporte-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
#sidebar_main.fd-nav-v2 .fd-nav-suporte-label{ font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--fdn-muted); }
#sidebar_main.fd-nav-v2 .fd-nav-suporte-tel{ font-size:13px; font-weight:500; color:var(--fdn-text); }
#sidebar_main.fd-nav-v2 .fd-nav-wa{ width:26px; height:26px; border-radius:6px; background:#25543a; display:flex; align-items:center; justify-content:center; }
#sidebar_main.fd-nav-v2 .fd-nav-wa .material-icons{ font-size:16px; color:#4ee07a; }
#sidebar_main.fd-nav-v2 .fd-nav-footer-bottom{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:9px 12px; background:var(--fdn-panel); border-radius:0 0 10px 10px;
}
#sidebar_main.fd-nav-v2 a.fd-nav-portal{ display:flex; align-items:center; gap:5px; font-size:12px; color:var(--fdn-cyan); text-decoration:none; min-width:0; }
#sidebar_main.fd-nav-v2 a.fd-nav-portal .material-icons{ font-size:14px; }
#sidebar_main.fd-nav-v2 .fd-nav-versao{ font-size:13px; padding:2px 8px; border-radius:4px; background:var(--fdn-hover); color:var(--fdn-muted); flex:0 0 auto; }

/* ============================================================
   Badges de status + busca com countdown — compartilhado entre
   transp_mdfe (SYS-131) e transp_cte (SYS-132).
   Mesmo padrão visual/UX da tela de Vendas (fd_fluxo_mercadoria_venda_datatable.js):
   pill arredondada com ícone, ativa = azul sólido com leve elevação, inativa =
   fundo neutro com hover. Diferença: aqui o CSS vive em cly-ui.css (não injetado
   via <style> pelo JS) — AI_CONTEXT proíbe injeção de CSS por JS pra componente
   reutilizável; a venda faz isso, mas não é o padrão a seguir.
   Renomeado de fd-mdfe-status-group/fd-mdfe-busca-hint (SYS-131) pra
   fd-status-badges-group/fd-busca-hint (SYS-132) ao virar compartilhado.
   ============================================================ */
.fd-status-badges-group {
    display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none;
}
.fd-status-badges-group .item_status a.status-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 30px;
    background-color: #ffffff; border: 1px solid #e0e0e0; color: #555555;
    font-size: 13px; font-weight: 500; text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    transition: all .2s ease; cursor: pointer;
}
.fd-status-badges-group .item_status a.status-btn .material-icons { font-size: 18px; color: #888888; transition: color .2s ease; }
.fd-status-badges-group .item_status:not(.uk-active) a.status-btn:hover {
    background-color: #f9f9f9; border-color: #cccccc;
    transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.08);
}
.fd-status-badges-group .item_status.uk-active a.status-btn {
    background-color: #1e88e5; border-color: #1e88e5; color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(30,136,229,.4); transform: translateY(-1px);
}
.fd-status-badges-group .item_status.uk-active a.status-btn .material-icons { color: #ffffff !important; }

body.app_theme_dark .fd-status-badges-group .item_status a.status-btn {
    background-color: #333333; border: 1px solid #444444; color: #cccccc;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
body.app_theme_dark .fd-status-badges-group .item_status a.status-btn .material-icons { color: #999999; }
body.app_theme_dark .fd-status-badges-group .item_status:not(.uk-active) a.status-btn:hover {
    background-color: #424242; border-color: #555555; box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
body.app_theme_dark .fd-status-badges-group .item_status.uk-active a.status-btn {
    background-color: #1976d2; border-color: #1976d2; color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(25,118,210,.4);
}

/* mensagem de countdown da busca ("Pesquisa iniciando em Ns ou tecle Enter") */
.fd-busca-hint { font-size: 12px; color: var(--cly-primary); font-weight: 500; min-height: 18px; margin-top: 4px; }

/* ============================================================
   SYS-168 — Filtro de PERÍODO genérico (opt-in por datatable.json "filtro_periodo").
   Renderizado pelo cly_datatables.js dentro de #<tabela>_filter, logo abaixo da
   busca. Pills com CLASSE PRÓPRIA (.fd-periodo-item / .is-active) — NÃO reusam
   .item_status: telas custom (ex.: CT-e) têm handler global $('.item_status')
   que apagaria o período; grupos precisam ser independentes.
   Estado --inativo: quando um campo custom da tela está preenchido (ex.: Chave/
   Número do CT-e), o período vira "todo período" -> esmaece e trava o clique.
   Visual espelha o kit fd-status-badges-group (tema-aware, pill ativa azul).
   ============================================================ */
.fd-filtro-periodo { margin: 10px 0 4px; }
.fd-filtro-periodo--inativo { opacity: .45; pointer-events: none; }

.fd-filtro-periodo-pills { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fd-filtro-periodo-pills .fd-periodo-item a.fd-periodo-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 18px; border-radius: 30px;
    background-color: #ffffff; border: 1px solid #e0e0e0; color: #555555;
    font-size: 13px; font-weight: 500; text-decoration: none;
    box-shadow: 0 2px 4px rgba(0,0,0,.04);
    transition: all .2s ease; cursor: pointer;
}
.fd-filtro-periodo-pills .fd-periodo-item:not(.is-active) a.fd-periodo-btn:hover {
    background-color: #f9f9f9; border-color: #cccccc;
    transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,.08);
}
.fd-filtro-periodo-pills .fd-periodo-item.is-active a.fd-periodo-btn {
    background-color: #1e88e5; border-color: #1e88e5; color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(30,136,229,.4); transform: translateY(-1px);
}

body.app_theme_dark .fd-filtro-periodo-pills .fd-periodo-item a.fd-periodo-btn {
    background-color: #333333; border: 1px solid #444444; color: #cccccc;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
}
body.app_theme_dark .fd-filtro-periodo-pills .fd-periodo-item:not(.is-active) a.fd-periodo-btn:hover {
    background-color: #424242; border-color: #555555; box-shadow: 0 4px 8px rgba(0,0,0,.4);
}
body.app_theme_dark .fd-filtro-periodo-pills .fd-periodo-item.is-active a.fd-periodo-btn {
    background-color: #1976d2; border-color: #1976d2; color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(25,118,210,.4);
}

/* Modo INLINE (SYS-171): pills na MESMA linha do "Pesquisar" pra economizar espaço.
   .dataTables_filter vira relative; o bloco fica absoluto e centrado na linha da busca
   (top:10 + translateY(-50%)), com respiro pra não bater na engrenagem. Fica DEPOIS do
   bloco base pra vencer por ordem de fonte (mesma/maior especificidade). No mobile
   (≤959px) reseta tudo (top/right/transform) e desce pra linha própria abaixo da busca. */
.dataTables_filter.fd-has-periodo { position: relative; }
.fd-filtro-periodo--inline {
    position: absolute; top: 10px; right: 40px; transform: translateY(-50%);
    margin: 0; display: flex; align-items: center; gap: 6px; z-index: 5;
}
.fd-filtro-periodo--inline .fd-filtro-periodo-ic { font-size: 16px; color: #888888; }
.fd-filtro-periodo--inline .fd-filtro-periodo-pills { gap: 6px; }
.fd-filtro-periodo--inline .fd-filtro-periodo-pills .fd-periodo-item a.fd-periodo-btn {
    padding: 3px 12px; font-size: 12px; line-height: 18px; box-shadow: none;
}
.fd-filtro-periodo--inline .fd-filtro-periodo-pills .fd-periodo-item:not(.is-active) a.fd-periodo-btn:hover { transform: none; }
body.app_theme_dark .fd-filtro-periodo--inline .fd-filtro-periodo-ic { color: #999999; }

@media (max-width: 959px) {
    .dataTables_filter.fd-has-periodo { position: static; }
    .fd-filtro-periodo--inline {
        position: static; top: auto; right: auto; transform: none;
        margin: 8px 0 4px; justify-content: flex-start;
    }
}

/* Wrapper horizontal da tabela-detalhe do item da venda (fd_fluxo_mercadoria_venda_item).
   Substitui .uk-overflow-container só aqui: essa classe também é lida pelo UIkit como o
   container oficial de overflow do modal, que recalculava height/max-height nela conforme a
   quantidade de itens e desestabilizava a rolagem vertical principal da venda. Mantém só a
   rolagem horizontal da tabela — overflow-y:visible de propósito, não usar auto (recriaria um
   scroll vertical aninhado). Ver cly_datatables.js (dom() dos datatables "detail"). */
.cly-datatable-overflow {
    overflow-x: auto;
    overflow-y: visible;
    max-height: none;
    height: auto;
    -webkit-overflow-scrolling: touch;
}
.cly-datatable-overflow > :last-child {
    margin-bottom: 0;
}

/* ============================================================
   cly_registro_modal — modal vanilla (fora do UIkit) que carrega o formulário
   de um registro (view/edit existente ou "novo") via AJAX dentro de um overlay
   próprio, com loading interno até os dados carregarem. SYS-144.
   Usado hoje pelo campo type:"buscar" ("..."/"+" — assets/js/buscador.js),
   registrado em cly_request.js (OVERLAYS) pro z-index dinâmico funcionar.
   Cores escuras alinhadas ao --cly-bg/--cly-surface globais (definição no
   topo deste arquivo) e ao padrão já validado em .cly-wizard-* — SYS-145.
   ============================================================ */
.cly-registro-modal-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity .15s ease; padding: 20px; box-sizing: border-box;
}
.cly-registro-modal-overlay.cly-rm-show { opacity: 1; }
body.app_theme_dark .cly-registro-modal-overlay { background: rgba(0, 0, 0, .72); }

.cly-registro-modal-box {
    background: #fff; color: #333; border-radius: 10px;
    width: 100%; max-width: 1150px; height: 100%; max-height: 92vh;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    transform: scale(.97); transition: transform .15s ease;
    overflow: hidden;
}
.cly-registro-modal-overlay.cly-rm-show .cly-registro-modal-box { transform: scale(1); }
/* Dark = cinza do sistema (#424242), não o #1e1e1e (preto demais). Alinhado ao
   modal de busca (SYS-148). SÓ a cor do box/header — os inputs (underline) ficam
   como no resto do sistema (não mexer neles). */
body.app_theme_dark .cly-registro-modal-box { background: #424242; color: #f0f0f0; }

.cly-registro-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 18px; border-bottom: 1px solid #e5e5e5; background: #fafafa;
    flex: 0 0 auto; gap: 12px;
}
body.app_theme_dark .cly-registro-modal-header { border-bottom-color: #565656; background: #383838; }

.cly-registro-modal-titulo { font-size: 15px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cly-registro-modal-header-acoes { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

.cly-registro-modal-novaaba {
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 6px; color: #888;
    text-decoration: none; opacity: .75;
}
.cly-registro-modal-novaaba:hover { background: rgba(0, 0, 0, .06); opacity: 1; }
.cly-registro-modal-novaaba .material-icons { font-size: 18px; }
body.app_theme_dark .cly-registro-modal-novaaba { color: #ccc; }
body.app_theme_dark .cly-registro-modal-novaaba:hover { background: rgba(255, 255, 255, .08); }

.cly-registro-modal-fechar {
    background: transparent; border: none; font-size: 22px; line-height: 1;
    cursor: pointer; color: #888; padding: 0 4px; border-radius: 6px;
    width: 30px; height: 30px;
}
.cly-registro-modal-fechar:hover { background: rgba(0, 0, 0, .06); }
body.app_theme_dark .cly-registro-modal-fechar { color: #ccc; }
body.app_theme_dark .cly-registro-modal-fechar:hover { background: rgba(255, 255, 255, .08); }

.cly-registro-modal-body { position: relative; overflow: auto; flex: 1 1 auto; min-height: 200px; }
.cly-registro-modal-conteudo { display: none; padding: 18px; }
.cly-registro-modal-conteudo.cly-rm-show { display: block; }

.cly-registro-modal-loading {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 12px; color: #888; font-size: 13px;
}
body.app_theme_dark .cly-registro-modal-loading { color: #aaa; }
.cly-registro-modal-loading.cly-rm-hide { display: none; }

.cly-registro-modal-spinner {
    width: 34px; height: 34px; border-radius: 50%;
    border: 3px solid #e5e5e5; border-top-color: #2196f3;
    animation: cly-registro-modal-spin .8s linear infinite;
}
body.app_theme_dark .cly-registro-modal-spinner { border-color: #333; border-top-color: #42a5f5; }

@keyframes cly-registro-modal-spin { from { transform: rotate(0); } to { transform: rotate(360deg); } }

@media (max-width: 760px) {
    .cly-registro-modal-overlay { padding: 2.5vh 2.5vw; }
    .cly-registro-modal-box { width: 95vw; height: 95vh; max-height: 95vh; border-radius: 8px; }
    .cly-registro-modal-header { padding: 12px 14px; }
    .cly-registro-modal-conteudo { padding: 14px; }
}

/* ============================================================
   Modal de BUSCA (buscadores legados) — casca vanilla que substitui
   o antigo showmodal_buscar (UIkit). Usada por cly.buscar / buscar_modal /
   buscar_modal_multi / buscar_modal_no_index / buscar_multiple / buscar_datatable
   e pelas variantes buscar_storage*. z-index é setado inline (dinâmico) pelo JS.
   Largura larga (aproveita a tela) e altura AUTO (footer colado na tabela, sem
   espaço morto — igual ao modal UIkit original). Dark usa os tons do SISTEMA
   (#424242, como o modal original), NÃO o --cly-bg (#1e1e1e), que fica preto demais —
   isso é feito redefinindo as variáveis --cly-* só no escopo do diálogo, o que
   recolore de uma vez todo o .cly-mp-body reusado. Mobile: 95%.
   ============================================================ */
.cly-buscar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(2px);
    display: none;               /* revelado via .show() (display:flex) */
    align-items: center;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.18s ease;
}
.cly-buscar-overlay.cly-buscar-visible { opacity: 1; }

.cly-buscar-dialog {
    width: 96vw;                 /* largo — aproveita a tela, como o original */
    max-width: 1600px;
    height: auto;                /* AUTO — footer colado na tabela, sem espaço morto */
    max-height: 92vh;            /* rola quando a lista é grande */
    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-buscar-overlay.cly-buscar-visible .cly-buscar-dialog { transform: scale(1); }

/* Dark = tons do sistema (não o preto do --cly-bg). Redefinir as variáveis aqui
   recolore o header/rows/paginação do .cly-mp-body reusado de uma só vez. */
body.app_theme_dark .cly-buscar-dialog {
    --cly-bg:         #424242;
    --cly-surface:    #4d4d4d;
    --cly-border:     #565656;
    --cly-text-main:  #f0f0f0;
    --cly-text-muted: #c8d0d6;
    background: #424242;
}

/* padding enxuto p/ aproveitar a tela */
.cly-buscar-dialog .cly-mp-header { padding: 10px 16px; }
/* content: área rolável. flex:0 1 auto (não CRESCE) → sem espaço morto abaixo da
   tabela; encolhe e rola quando a lista passa da altura. */
.cly-buscar-dialog > .content { padding: 2px 10px 8px; flex: 0 1 auto; }

/* Sem ZEBRA no dark (igual ao modal UIkit original): o .cly-mp-body reusado pinta
   tr.odd com --cly-surface (zebra do FD Buscador de produto). Revertemos p/ linhas
   uniformes, PRESERVANDO hover e seleções (trowseleted/row_checked/row-selected-multi). */
body.app_theme_dark .cly-buscar-dialog .cly-mp-body table.dataTable tbody tr.odd:not(:hover):not(.trowseleted):not(.row_checked):not(.row-selected-multi),
body.app_theme_dark .cly-buscar-dialog .cly-mp-body table.dataTable tbody tr.even:not(:hover):not(.trowseleted):not(.row_checked):not(.row-selected-multi) {
    background: var(--cly-bg) !important;
}

/* Paginação/rodapé do DataTable legíveis no dark */
body.app_theme_dark .cly-buscar-dialog .dataTables_paginate .paginate_button { color: #c8d0d6 !important; }
body.app_theme_dark .cly-buscar-dialog .dataTables_paginate .paginate_button.current,
body.app_theme_dark .cly-buscar-dialog .dataTables_paginate .paginate_button:hover { color: #ffffff !important; }

/* Footer: botões planos padronizados (fd-btn). Fechar (+ Novo registro) à esquerda,
   sem destaque; ações de confirmação (multi) à direita. Sem FAB material. */
.cly-buscar-dialog .uk-modal-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--cly-border);
    padding: 8px 12px;
    margin: 0;
    background: var(--cly-surface);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 0;
}
.cly-buscar-footer-side { display: flex; align-items: center; gap: 8px; }
.cly-buscar-footer-right { margin-left: auto; }
.cly-buscar-fbtn { text-decoration: none; }

/* Mobile: 95% de largura */
@media (max-width: 640px) {
    .cly-buscar-overlay { padding: 10px; }
    .cly-buscar-dialog {
        width: 95vw;
        max-width: 95vw;
        max-height: 92vh;
    }
}