/* ══ LISTA DE VENDAS (compartilhada backoffice + PDV) ══
   CSS próprio e autocontido, sempre claro — mesmo princípio de
   modal-documentos-gerados.css: não depende de .card/.badge/.table do
   backoffice nem das variáveis --pdv-* (tema escuro) do PDV. Prefixo "lv-". */

:root {
    --lv-red:        #dc2626;
    --lv-amber:      #d97706;
    --lv-green:      #16a34a;
    --lv-blue:       #2563eb;
    --lv-text-main:  #0f172a;
    --lv-text-muted: #64748b;
    --lv-border:     #e2e8f0;
    --lv-bg-card:    #ffffff;
    --lv-bg-hover:   #f8fafc;
    --lv-bg-sunken:  #f1f5f9;
}

.lv-root {
    background: #ffffff;
    color: var(--lv-text-main);
    font-family: 'Inter', 'Segoe UI', -apple-system, Roboto, Arial, sans-serif;
    font-size: 13px;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-sizing: border-box;
}
.lv-root * { box-sizing: border-box; }

/* ── Header ───────────────────────────────────────────────────────────── */
.lv-header {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--lv-border);
    flex-shrink: 0;
}
.lv-header-icon {
    width: 38px; height: 38px; border-radius: 10px;
    background: color-mix(in srgb, var(--lv-red) 12%, transparent);
    color: var(--lv-red);
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; flex-shrink: 0;
}
.lv-header-info { flex: 1; min-width: 0; }
.lv-header-titulo { font-size: 16px; font-weight: 700; }
.lv-header-sub { font-size: 12px; color: var(--lv-text-muted); }
.lv-close-btn {
    width: 32px; height: 32px; border-radius: 8px; border: none;
    background: var(--lv-bg-sunken); color: var(--lv-text-muted);
    cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.lv-close-btn:hover { background: var(--lv-border); color: var(--lv-text-main); }

/* ── Body ─────────────────────────────────────────────────────────────── */
.lv-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ── Filtros ──────────────────────────────────────────────────────────── */
.lv-filtros {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
}
.lv-filtro-grupo { display: flex; flex-direction: column; gap: 3px; }
.lv-filtro-cliente { flex: 1; min-width: 200px; }
.lv-filtro-label { font-size: 11px; font-weight: 600; color: var(--lv-text-muted); text-transform: uppercase; letter-spacing: .02em; }
.lv-filtro-acoes { display: flex; gap: 6px; }

.lv-input {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--lv-border);
    border-radius: 8px;
    background: #fff;
    color: var(--lv-text-main);
    font-size: 13px;
    width: 140px;
}
.lv-input:focus { outline: none; border-color: var(--lv-blue); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv-blue) 15%, transparent); }

.lv-btn-icone {
    width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--lv-border);
    background: #fff; color: var(--lv-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}
.lv-btn-icone:hover { background: var(--lv-bg-sunken); color: var(--lv-text-main); }

/* ── Cards (tabela + detalhe) ─────────────────────────────────────────── */
.lv-tabela-card, .lv-detalhe-card {
    border: 1px solid var(--lv-border);
    border-radius: 12px;
    overflow: hidden;
    background: var(--lv-bg-card);
}
.lv-detalhe-header, .lv-detalhe-header {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--lv-border);
    background: var(--lv-bg-sunken);
    font-size: 12px; font-weight: 700; color: var(--lv-text-muted);
    text-transform: uppercase; letter-spacing: .02em;
}
.lv-detalhe-body { padding: 0; }

.lv-tabela-scroll { overflow-x: auto; }

/* ── Tabela ───────────────────────────────────────────────────────────── */
.lv-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lv-table thead th {
    text-align: left;
    padding: 10px 14px;
    background: var(--lv-bg-sunken);
    color: var(--lv-text-muted);
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
    border-bottom: 1px solid var(--lv-border);
    white-space: nowrap;
}
.lv-table tbody td {
    padding: 10px 14px;
    border-bottom: 1px solid var(--lv-border);
    vertical-align: middle;
}
.lv-table tbody tr { cursor: pointer; transition: background .1s; }
.lv-table tbody tr:hover { background: var(--lv-bg-hover); }
.lv-table tbody tr.lv-row-ativa { background: color-mix(in srgb, var(--lv-blue) 8%, transparent); }
.lv-table tbody tr:last-child td { border-bottom: none; }

.lv-text-right { text-align: right; }
.lv-col-mono { font-family: 'JetBrains Mono', 'Courier New', monospace; font-weight: 700; }
.lv-col-total { font-weight: 700; }
.lv-col-truncate { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── Badges de status ─────────────────────────────────────────────────── */
.lv-badge {
    display: inline-flex; align-items: center;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700;
}
.lv-badge-success { background: color-mix(in srgb, var(--lv-green) 15%, transparent); color: var(--lv-green); }
.lv-badge-danger  { background: color-mix(in srgb, var(--lv-red) 15%, transparent); color: var(--lv-red); }
.lv-badge-warning { background: color-mix(in srgb, var(--lv-amber) 15%, transparent); color: var(--lv-amber); }
.lv-badge-info    { background: color-mix(in srgb, var(--lv-blue) 15%, transparent); color: var(--lv-blue); }
.lv-badge-neutral { background: var(--lv-bg-sunken); color: var(--lv-text-muted); }

/* ── Botão mini (imprimir, na linha) ──────────────────────────────────── */
.lv-btn-mini {
    width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--lv-border);
    background: #fff; color: var(--lv-text-muted); cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
}
.lv-btn-mini:hover:not(:disabled) { background: var(--lv-bg-sunken); color: var(--lv-text-main); }
.lv-btn-mini:disabled { opacity: .5; cursor: not-allowed; }

.lv-text-muted { color: var(--lv-text-muted); }

/* Badges de documento fiscal na coluna "Fiscal" — mais de um por linha
   quando a venda tem NFe E NFCe, por isso empilham com gap pequeno. */
.lv-badge-fiscal { display: inline-flex; margin: 1px 3px 1px 0; font-size: 10px; }

/* ── Ações da venda (Fase 2) — painel abaixo da tabela de itens ───────── */
.lv-acoes-venda {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid var(--lv-border);
}
.lv-btn-acao {
    display: inline-flex; align-items: center; gap: 6px;
    height: 32px; padding: 0 12px;
    border: 1px solid var(--lv-border); border-radius: 8px;
    background: #fff; color: var(--lv-text-main);
    font-size: 12px; font-weight: 600;
    cursor: pointer; text-decoration: none;
}
.lv-btn-acao:hover:not(:disabled) { background: var(--lv-bg-sunken); }
.lv-btn-acao:disabled { opacity: .5; cursor: not-allowed; }
.lv-btn-acao--sm { height: 28px; width: 28px; padding: 0; justify-content: center; }
.lv-btn-acao--primario { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; }
.lv-btn-acao--primario:hover:not(:disabled) { filter: brightness(1.08); }
.lv-btn-acao--warning { background: color-mix(in srgb, var(--lv-amber) 12%, #fff); border-color: var(--lv-amber); color: var(--lv-amber); }
.lv-btn-acao--danger { background: color-mix(in srgb, var(--lv-red) 10%, #fff); border-color: var(--lv-red); color: var(--lv-red); }

/* ── Modais (DANFE, e-mail, cancelamento, confirmação) ────────────────── */
.lv-modal-overlay {
    position: fixed; inset: 0; z-index: 1400;
    background: rgba(15, 23, 42, 0.65);
    display: flex; align-items: center; justify-content: center;
    padding: 16px;
}
.lv-modal-form {
    background: #fff; color: var(--lv-text-main);
    border-radius: 12px; box-shadow: 0 20px 60px rgba(15,23,42,.25);
    width: 100%; max-width: 440px;
    padding: 20px;
    display: flex; flex-direction: column; gap: 8px;
}
.lv-modal-titulo { margin: 0 0 6px; font-size: 15px; font-weight: 700; }
.lv-modal-mensagem { margin: 0 0 4px; font-size: 13px; color: var(--lv-text-muted); }
.lv-textarea { height: auto; padding: 8px 10px; resize: vertical; font-family: inherit; }
.lv-modal-erro { color: var(--lv-red); font-size: 12px; display: flex; align-items: center; gap: 6px; }
.lv-modal-rodape { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }

.lv-modal-danfe {
    background: #fff; border-radius: 12px; overflow: hidden;
    width: 100%; max-width: 900px; height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: 0 20px 60px rgba(15,23,42,.25);
}
.lv-modal-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 16px; border-bottom: 1px solid var(--lv-border);
    background: var(--lv-bg-sunken); font-weight: 700; font-size: 13px;
}
.lv-modal-header-acoes { display: flex; gap: 6px; }
.lv-modal-danfe-frame { flex: 1; border: none; width: 100%; }

/* ── Estados vazios / loading ─────────────────────────────────────────── */
.lv-estado-vazio {
    padding: 40px 20px;
    text-align: center;
    color: var(--lv-text-muted);
    display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.lv-estado-vazio i { font-size: 22px; opacity: .35; }
.lv-estado-vazio--compacto { padding: 20px; }
.lv-estado-vazio.lv-erro { color: var(--lv-red); }

.lv-spinner {
    width: 28px; height: 28px; border-radius: 50%;
    border: 3px solid var(--lv-border); border-top-color: var(--lv-blue);
    animation: lv-spin .7s linear infinite;
}
.lv-spinner--sm { width: 18px; height: 18px; border-width: 2px; }
@keyframes lv-spin { to { transform: rotate(360deg); } }

/* ── Paginação ────────────────────────────────────────────────────────── */
.lv-paginacao {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px;
    border-top: 1px solid var(--lv-border);
}
.lv-paginacao-info { font-size: 12px; color: var(--lv-text-muted); }
.lv-paginacao-botoes { display: flex; gap: 4px; }
.lv-page-btn {
    min-width: 28px; height: 28px; padding: 0 6px;
    border: 1px solid var(--lv-border); border-radius: 6px;
    background: #fff; color: var(--lv-text-main); cursor: pointer; font-size: 12px;
}
.lv-page-btn:hover:not(:disabled) { background: var(--lv-bg-sunken); }
.lv-page-btn:disabled { opacity: .4; cursor: not-allowed; }
.lv-page-btn.active { background: var(--lv-blue); border-color: var(--lv-blue); color: #fff; }

/* ── Responsivo ───────────────────────────────────────────────────────── */
@media (max-width: 720px) {
    .lv-filtros { flex-direction: column; align-items: stretch; }
    .lv-input { width: 100%; }
    .lv-col-truncate { max-width: 140px; }
}