/* ============================================================
   PDV Adega — Estilos principais
   Layout responsivo, sem framework externo.
   Cor principal controlada por --cor-principal (definida inline no header.php)
   ============================================================ */

/* ----- Reset mínimo ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; font-size: 15px; background: #f4f5f7; color: #222; min-height: 100vh; display: flex; flex-direction: column; }
a { color: var(--cor-principal); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }

/* ----- Variáveis ----- */
:root {
    --cor-principal: #722F37;
    --cor-secundaria: #a04050;
    --cor-bg: #f4f5f7;
    --cor-card: #ffffff;
    --cor-borda: #dde1e7;
    --cor-texto: #222;
    --cor-muted: #666;
    --cor-success: #2e7d32;
    --cor-error: #c62828;
    --cor-warning: #e65100;
    --cor-info: #1565c0;
    --radius: 8px;
    --shadow: 0 2px 8px rgba(0,0,0,.08);
    --transition: .15s ease;
}

/* ----- Topbar ----- */
.topbar {
    background: var(--cor-principal);
    color: #fff;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .6rem 1.2rem;
    position: sticky;
    top: 0;
    z-index: 100;
    box-shadow: 0 2px 6px rgba(0,0,0,.25);
    flex-wrap: wrap;
}
.topbar-brand { display: flex; align-items: center; gap: .6rem; flex-shrink: 0; }
.topbar-logo  { height: 40px; width: 40px; object-fit: contain; border-radius: 4px; background: rgba(255,255,255,.15); padding: 2px; }
.topbar-nome  { font-size: 1.1rem; font-weight: 700; white-space: nowrap; }
.topbar-nav   { display: flex; align-items: center; gap: .25rem; flex-wrap: wrap; flex: 1; }
.nav-link     { color: rgba(255,255,255,.85); padding: .35rem .7rem; border-radius: 5px; font-size: .88rem; transition: background var(--transition); }
.nav-link:hover, .nav-link.active { background: rgba(255,255,255,.22); color: #fff; text-decoration: none; }
.nav-pdv      { font-weight: 700; background: rgba(255,255,255,.15); }
.topbar-user  { display: flex; align-items: center; gap: .6rem; margin-left: auto; flex-shrink: 0; }
.user-badge   { font-size: .82rem; color: rgba(255,255,255,.8); }
.user-badge em { font-style: normal; font-size: .75rem; opacity: .7; }
.btn-logout   { background: rgba(255,255,255,.2); color: #fff; border: 1px solid rgba(255,255,255,.4); padding: .3rem .8rem; border-radius: 5px; font-size: .82rem; cursor: pointer; transition: background var(--transition); }
.btn-logout:hover { background: rgba(255,255,255,.35); text-decoration: none; }

/* ----- Main content ----- */
.main-content { flex: 1; padding: 1.5rem; max-width: 1400px; width: 100%; margin: 0 auto; }

/* ----- Page footer ----- */
.page-footer { text-align: center; padding: .8rem; font-size: .78rem; color: var(--cor-muted); border-top: 1px solid var(--cor-borda); background: var(--cor-card); margin-top: auto; }

/* ----- Flash messages ----- */
.flash { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.2rem; margin-bottom: 1rem; border-radius: var(--radius); font-size: .92rem; }
.flash-success { background: #e8f5e9; color: var(--cor-success); border-left: 4px solid var(--cor-success); }
.flash-error   { background: #ffebee; color: var(--cor-error);   border-left: 4px solid var(--cor-error); }
.flash-warning { background: #fff3e0; color: var(--cor-warning); border-left: 4px solid var(--cor-warning); }
.flash-info    { background: #e3f2fd; color: var(--cor-info);    border-left: 4px solid var(--cor-info); }
.flash-close   { background: none; border: none; font-size: 1.3rem; cursor: pointer; opacity: .6; line-height: 1; }
.flash-close:hover { opacity: 1; }

/* ----- Títulos de página ----- */
.page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; flex-wrap: wrap; gap: .5rem; }
.page-header h1 { font-size: 1.4rem; color: var(--cor-principal); }
.page-title { font-size: 1.4rem; font-weight: 700; color: var(--cor-principal); margin-bottom: 1.2rem; }

/* ----- Cards / Panels ----- */
.card { background: var(--cor-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; margin-bottom: 1.2rem; }
.card-title { font-size: 1rem; font-weight: 700; color: var(--cor-principal); margin-bottom: .8rem; border-bottom: 2px solid var(--cor-principal); padding-bottom: .4rem; }

/* ----- Grid de KPIs (dashboard) ----- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.kpi-card { background: var(--cor-card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .3rem; }
.kpi-label { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-muted); }
.kpi-value { font-size: 1.7rem; font-weight: 700; color: var(--cor-principal); }
.kpi-sub   { font-size: .82rem; color: var(--cor-muted); }

/* ----- Tabelas ----- */
.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .9rem; }
thead th { background: var(--cor-principal); color: #fff; padding: .6rem .8rem; text-align: left; font-weight: 600; white-space: nowrap; }
tbody tr { border-bottom: 1px solid var(--cor-borda); transition: background var(--transition); }
tbody tr:hover { background: #f9f0f1; }
tbody td { padding: .55rem .8rem; vertical-align: middle; }
.text-right { text-align: right; }
.text-center { text-align: center; }

/* ----- Badges ----- */
.badge { display: inline-block; padding: .2rem .55rem; border-radius: 20px; font-size: .75rem; font-weight: 600; line-height: 1.3; }
.badge-cerveja      { background: #DAA520; color: #fff; }
.badge-dose         { background: #c0392b; color: #fff; }
.badge-destilado    { background: #8B4513; color: #fff; }
.badge-refrigerante { background: #2980b9; color: #fff; }
.badge-salgadinho   { background: #e67e22; color: #fff; }
.badge-doce         { background: #e91e8c; color: #fff; }
.badge-ficha        { background: #27ae60; color: #fff; }
.badge-outros       { background: #888;    color: #fff; }
.badge-success   { background: #e8f5e9; color: var(--cor-success); }
.badge-error     { background: #ffebee; color: var(--cor-error); }
.badge-warning   { background: #fff3e0; color: var(--cor-warning); }
.badge-info      { background: #e3f2fd; color: var(--cor-info); }
.badge-din       { background: #e8f5e9; color: #2e7d32; }
.badge-pix       { background: #e3f2fd; color: #1565c0; }
.badge-deb       { background: #f3e5f5; color: #6a1b9a; }
.badge-cred      { background: #fff3e0; color: #e65100; }

/* ----- Chips de pagamento nas tabelas de venda ----- */
.pag-chip        { display:inline-block; padding:.1rem .42rem; border-radius:4px; font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; white-space:nowrap; }
.pag-chip-din    { background:#e8f5e9; color:#2e7d32; }
.pag-chip-pix    { background:#e3f2fd; color:#1565c0; }
.pag-chip-deb    { background:#f3e5f5; color:#6a1b9a; }
.pag-chip-cred   { background:#fff3e0; color:#e65100; }
.pag-split       { display:flex; flex-direction:column; gap:.18rem; line-height:1.45; }
.vd-pag-val      { font-size:.82rem; }
.vd-troco        { font-size:.74rem; color:var(--cor-muted); font-style:italic; }

/* ----- Formulários ----- */
.form-group  { margin-bottom: 1rem; }
.form-row    { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-row .form-group { flex: 1; min-width: 180px; }
label        { display: block; font-size: .85rem; font-weight: 600; margin-bottom: .3rem; color: #444; }
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], input[type="date"], select, textarea {
    width: 100%; padding: .55rem .75rem; border: 1px solid var(--cor-borda);
    border-radius: 6px; font-size: .93rem; font-family: inherit;
    transition: border-color var(--transition), box-shadow var(--transition);
    background: #fff; color: var(--cor-texto);
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(114,47,55,.15);
}
textarea { resize: vertical; min-height: 80px; }
.form-hint { font-size: .78rem; color: var(--cor-muted); margin-top: .2rem; }
.form-error { font-size: .8rem; color: var(--cor-error); margin-top: .2rem; }

/* ----- Botões ----- */
.btn { display: inline-flex; align-items: center; gap: .4rem; padding: .5rem 1.1rem; border-radius: 6px; font-size: .9rem; font-weight: 600; cursor: pointer; border: none; transition: all var(--transition); white-space: nowrap; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-primary  { background: var(--cor-principal); color: #fff; }
.btn-primary:hover  { background: var(--cor-secundaria); text-decoration: none; }
.btn-secondary{ background: #eee; color: #333; border: 1px solid #ccc; }
.btn-secondary:hover{ background: #ddd; text-decoration: none; }
.btn-success  { background: var(--cor-success); color: #fff; }
.btn-success:hover  { background: #1b5e20; text-decoration: none; }
.btn-danger   { background: var(--cor-error); color: #fff; }
.btn-danger:hover   { background: #b71c1c; text-decoration: none; }
.btn-warning  { background: var(--cor-warning); color: #fff; }
.btn-warning:hover  { background: #bf360c; text-decoration: none; }
.btn-sm       { padding: .3rem .65rem; font-size: .8rem; }
.btn-xs       { padding: .2rem .45rem; font-size: .75rem; }
.btn-block    { width: 100%; justify-content: center; }

/* ----- Filtros / Busca ----- */
.filter-bar { display: flex; gap: .7rem; flex-wrap: wrap; margin-bottom: 1.2rem; align-items: flex-end; }
.filter-bar .form-group { margin-bottom: 0; flex: 1; min-width: 180px; }

/* ----- Status toggles ----- */
.status-ativo   { color: var(--cor-success); font-weight: 600; }
.status-inativo { color: var(--cor-error); font-weight: 600; }

/* ----- Alertas inline ----- */
.alert { padding: .75rem 1rem; border-radius: 6px; margin-bottom: 1rem; font-size: .9rem; }
.alert-warning { background: #fff3e0; border-left: 4px solid var(--cor-warning); color: var(--cor-warning); }
.alert-danger  { background: #ffebee; border-left: 4px solid var(--cor-error);   color: var(--cor-error); }
.alert-info    { background: #e3f2fd; border-left: 4px solid var(--cor-info);    color: var(--cor-info); }

/* ----- Login page ----- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--cor-bg); }
.login-box  { background: var(--cor-card); border-radius: var(--radius); box-shadow: 0 4px 24px rgba(0,0,0,.12); padding: 2.5rem 2rem; width: 100%; max-width: 400px; }
.login-logo { text-align: center; margin-bottom: 1.5rem; }
.login-logo img  { height: 72px; }
.login-logo h1   { font-size: 1.3rem; color: var(--cor-principal); margin-top: .5rem; }
.login-box h2    { font-size: 1.05rem; font-weight: 600; margin-bottom: 1.2rem; color: #444; text-align: center; }

/* ─────────────────────────────────────────────────
   PDV — layout e componentes
   ───────────────────────────────────────────────── */
.pdv-layout {
    display: grid;
    grid-template-columns: 1fr 460px;
    gap: 1rem;
    height: calc(100vh - 100px);
}

/* Coluna esquerda: scroll interno */
.pdv-col-esq {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

/* Coluna direita (card): flex column sem padding externo */
.pdv-col-dir {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    min-height: 0;
}

/* Busca */
.pdv-busca { display: flex; gap: .5rem; margin-bottom: .6rem; flex-shrink: 0; }
.pdv-busca input { flex: 1; }

/* Pílulas de categoria */
.pdv-cats { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .5rem; flex-shrink: 0; }
.btn-cat {
    background: var(--cor-bg); border: 1px solid var(--cor-borda);
    color: var(--cor-muted); border-radius: 20px;
    padding: .22rem .7rem; font-size: .78rem; font-weight: 600;
    cursor: pointer; transition: all var(--transition);
    display: flex; align-items: center; gap: .25rem;
}
.btn-cat:hover  { border-color: var(--cor-principal); color: var(--cor-principal); }
.btn-cat.active { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }
.cat-cnt { font-size: .68rem; opacity: .75; }

/* Grid de produtos — scroll interno */
.produtos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px,1fr));
    gap: .6rem;
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding-bottom: .5rem;
    align-content: start;
}
.pdv-grid-vazio { grid-column: 1/-1; text-align: center; color: var(--cor-muted); padding: 2.5rem 1rem; }

/* Barra de atalhos de teclado */
.pdv-shortcuts {
    display: flex;
    gap: 1.2rem;
    padding: .3rem .1rem;
    font-size: .71rem;
    color: var(--cor-muted);
    border-top: 1px solid var(--cor-borda);
    margin-top: .35rem;
    flex-shrink: 0;
}
.pdv-shortcuts span { opacity: .8; }

/* Cards de produto */
.produto-card-pdv {
    background: var(--cor-card);
    border: 1.5px solid var(--cor-borda);
    border-radius: 8px;
    padding: .75rem .65rem;
    cursor: pointer;
    transition: all var(--transition);
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.produto-card-pdv:hover {
    border-color: var(--cor-principal);
    box-shadow: 0 3px 10px rgba(114,47,55,.18);
    transform: translateY(-1px);
}
.produto-card-pdv:has(.p-opcoes) { cursor: default; }
.produto-card-pdv.sem-estoque { opacity: .45; cursor: default; }
.produto-card-pdv .pnome {
    font-size: .85rem; font-weight: 700;
    line-height: 1.2; color: var(--cor-texto);
}
.produto-card-pdv .ppreco {
    font-size: 1.05rem; font-weight: 700;
    color: var(--cor-principal);
}
.produto-card-pdv .pest { font-size: .73rem; }
.pest.est-ok    { color: var(--cor-success); }
.pest.est-baixo { color: var(--cor-warning); }
.pest.est-zero  { color: var(--cor-error); }

/* Opções unidade / caixa no card */
.p-opcoes { display: flex; gap: .3rem; margin-top: .35rem; }
.btn-p-unid,
.btn-p-caixa {
    flex: 1;
    padding: .32rem .2rem;
    border-radius: 6px;
    border: 1.5px solid var(--cor-borda);
    background: var(--cor-bg);
    cursor: pointer;
    font-size: .7rem;
    line-height: 1.35;
    text-align: center;
    transition: all var(--transition);
    font-family: inherit;
}
.btn-p-unid:hover  { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); }
.btn-p-caixa:hover { background: var(--cor-info); color: #fff; border-color: var(--cor-info); }
.sem-estoque .btn-p-unid,
.sem-estoque .btn-p-caixa { pointer-events: none; }

/* ── Cabeçalho do carrinho ── */
.pdv-cart-header {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 1.1rem .6rem;
    font-weight: 700;
    font-size: .95rem;
    color: var(--cor-principal);
    border-bottom: 2px solid var(--cor-borda);
    flex-shrink: 0;
}
.pdv-badge {
    background: var(--cor-principal);
    color: #fff;
    border-radius: 12px;
    padding: .08rem .42rem;
    font-size: .72rem;
    font-weight: 700;
    min-width: 22px;
    text-align: center;
    line-height: 1.5;
}

/* ── Lista do carrinho ── */
.pdv-carrinho-list {
    flex: 1;
    overflow-y: auto;
    padding: .2rem 1rem;
    min-height: 0;
}

/* Estado vazio */
.pdv-vazio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 120px;
    text-align: center;
    padding: 1.5rem 1rem;
    color: var(--cor-muted);
}
.pdv-vazio-msg  { font-size: .92rem; font-weight: 600; margin-bottom: .3rem; }
.pdv-vazio-hint { font-size: .78rem; opacity: .75; }

/* ── Itens do carrinho: nome completo + controles abaixo ── */
.carrinho-item {
    padding: .3rem 0 .35rem;
    border-bottom: 1px solid var(--cor-borda);
}

/* Linha 1 — nome completo + botão remover */
.ci-r1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: .25rem;
    margin-bottom: .22rem;
}
.ci-nome {
    font-size: .87rem;
    font-weight: 700;
    color: var(--cor-texto);
    line-height: 1.3;
    flex: 1;
    min-width: 0;
    word-break: break-word;
}
.ci-rem {
    width: 18px; height: 18px;
    border: none; background: none; cursor: pointer;
    color: #bbb; font-size: .65rem;
    border-radius: 3px; transition: all var(--transition);
    flex-shrink: 0; margin-top: .15rem;
    display: flex; align-items: center; justify-content: center;
}
.ci-rem:hover { background: #ffebee; color: var(--cor-error); }

/* Linha 2 — preço unitário + controles + subtotal */
.ci-r2 {
    display: flex;
    align-items: center;
    gap: .3rem;
}
.ci-unit {
    font-size: .71rem;
    color: var(--cor-muted);
    flex: 1;
    white-space: nowrap;
}
.ci-desc-tag {
    display: inline-block;
    margin-left: .35rem;
    padding: .05rem .35rem;
    background: #e3f2fd;
    color: #1565c0;
    border-radius: 4px;
    font-size: .65rem;
    font-weight: 600;
    white-space: nowrap;
}
.ci-ctrl {
    display: flex;
    align-items: center;
    gap: .12rem;
    flex-shrink: 0;
}
.ci-btn {
    width: 22px; height: 22px;
    border: 1px solid var(--cor-borda);
    border-radius: 4px;
    background: var(--cor-bg);
    cursor: pointer;
    font-size: .85rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: all var(--transition);
    flex-shrink: 0; font-family: inherit;
}
.ci-btn:hover { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); }
.ci-qty {
    width: 32px; text-align: center;
    padding: .12rem .05rem;
    border: 1px solid var(--cor-borda);
    border-radius: 4px; font-size: .82rem;
    -moz-appearance: textfield;
}
.ci-qty::-webkit-inner-spin-button { display: none; }
.ci-sub {
    font-weight: 700; font-size: .88rem;
    color: var(--cor-principal);
    min-width: 64px; text-align: right;
    flex-shrink: 0;
}

/* ── Totais ── */
.pdv-totais {
    padding: .55rem 1.1rem;
    border-top: 2px solid var(--cor-borda);
    flex-shrink: 0;
}
.pdv-tot-row {
    display: flex; justify-content: space-between;
    align-items: center; padding: .18rem 0; font-size: .9rem;
}
.pdv-tot-label { color: var(--cor-muted); font-size: .82rem; }
.pdv-tot-val   { font-weight: 600; }
.pdv-tot-final {
    font-size: 1.2rem; font-weight: 700;
    color: var(--cor-principal);
    padding-top: .35rem;
    border-top: 1px solid var(--cor-borda); margin-top: .18rem;
}
.pdv-desconto-inp {
    width: 80px; padding: .22rem .4rem;
    text-align: right; border: 1px solid var(--cor-borda);
    border-radius: 5px; font-size: .85rem;
}

/* ── Seção de pagamento ── */
.pdv-pag-section {
    padding: .45rem 1.1rem;
    border-top: 1px solid var(--cor-borda);
    flex-shrink: 0;
}
.pdv-pag-header {
    display: flex; align-items: center;
    justify-content: space-between;
    margin-bottom: .45rem;
    font-weight: 700; font-size: .87rem;
}

/* Botões de método de pagamento */
.pdv-met-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .28rem;
    margin-bottom: .35rem;
}
.pdv-met-btn {
    padding: .45rem .25rem;
    border: 2px solid var(--cor-borda);
    border-radius: 6px; background: #fff;
    cursor: pointer; font-size: .79rem; font-weight: 600;
    color: var(--cor-muted); transition: all var(--transition);
    text-align: center; font-family: inherit;
}
.pdv-met-btn:hover { border-color: var(--cor-principal); color: var(--cor-principal); }
.pdv-met-btn.active { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

/* Atalhos rápidos de valor */
.pdv-rapido {
    display: flex; align-items: center;
    gap: .28rem; margin-bottom: .3rem; flex-wrap: wrap;
}
.pdv-rapido-label { font-size: .73rem; color: var(--cor-muted); white-space: nowrap; }
.pdv-rapido-btn {
    padding: .22rem .5rem;
    border: 1px solid var(--cor-borda);
    border-radius: 5px; background: var(--cor-bg);
    cursor: pointer; font-size: .77rem; font-weight: 600;
    color: var(--cor-texto); transition: all var(--transition);
    font-family: inherit;
}
.pdv-rapido-btn:hover    { background: #e8f5e9; border-color: var(--cor-success); color: var(--cor-success); }
.pdv-rapido-exato        { color: var(--cor-muted); }
.pdv-rapido-exato:hover  { background: #e3f2fd; border-color: var(--cor-info); color: var(--cor-info); }

/* Linha de valor */
.pag-row { display: flex; gap: .4rem; align-items: center; margin-bottom: .28rem; }
.pag-row select {
    flex: 1; padding: .3rem .5rem;
    border: 1px solid var(--cor-borda); border-radius: 4px;
    font-size: .83rem; background: #fff; color: var(--cor-texto);
}
.pag-valor-wrap {
    display: flex; align-items: center;
    border: 1px solid var(--cor-borda); border-radius: 4px;
    padding: 0 .4rem; flex: 1; background: #fff;
}
.pag-rs { font-size: .78rem; color: var(--cor-muted); white-space: nowrap; }
.pag-valor {
    border: none; padding: .3rem .2rem;
    width: 100%; text-align: right;
    font-size: .85rem; background: transparent; color: var(--cor-texto);
}
.pag-valor:focus { outline: none; }

/* Status de pagamento */
.pdv-pag-info { min-height: 1.4rem; }
.pag-status {
    display: inline-block; padding: .18rem .65rem;
    border-radius: 5px; font-size: .81rem; font-weight: 700;
}
.pag-status-ok     { background: #e8f5e9; color: var(--cor-success); }
.pag-status-troco  { background: #e3f2fd; color: var(--cor-info); }
.pag-status-falta  { background: #ffebee; color: var(--cor-error); }

/* Botão de finalizar */
.pdv-btn-finalizar {
    margin: .45rem 1.1rem .75rem;
    padding: .85rem 1rem;
    border: none; border-radius: 8px;
    font-size: .97rem; font-weight: 700;
    cursor: pointer;
    background: #ccc; color: #666;
    transition: all var(--transition);
    flex-shrink: 0; font-family: inherit;
    display: flex; align-items: center; justify-content: center; gap: .4rem;
    width: calc(100% - 2.2rem);
}
.pdv-btn-finalizar:disabled { opacity: .5; cursor: not-allowed; }
.pdv-btn-ok  { background: var(--cor-success) !important; color: #fff !important; }
.pdv-btn-ok:hover:not(:disabled) { background: #1b5e20 !important; }
.pdv-btn-bloq { background: #ffeaea !important; color: var(--cor-error) !important; }
.pdv-btn-fin-sub { font-size: .73rem; font-weight: 400; opacity: .75; }

/* ── Botão Saque ── */
.pdv-btn-saque {
    margin: 0 1.1rem .6rem;
    padding: .55rem 1rem;
    border: 2px solid var(--cor-principal); border-radius: 8px;
    font-size: .88rem; font-weight: 700;
    cursor: pointer; background: transparent;
    color: var(--cor-principal); font-family: inherit;
    transition: all var(--transition);
    width: calc(100% - 2.2rem);
}
.pdv-btn-saque:hover:not(:disabled) { background: var(--cor-principal); color: #fff; }
.pdv-btn-saque:disabled { opacity: .4; cursor: not-allowed; }

/* ── Modal de Saque ── */
.saque-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.52);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 1rem;
    animation: overlayIn .15s ease;
}
.saque-box {
    background: #fff; border-radius: 14px;
    padding: 1.6rem 1.5rem;
    width: 100%; max-width: 420px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    animation: modalIn .2s cubic-bezier(.34,1.56,.64,1);
}
.saque-titulo {
    font-size: 1.12rem; font-weight: 800; color: var(--cor-principal);
    margin-bottom: .2rem; display: flex; align-items: center; gap: .5rem;
}
.saque-sub {
    font-size: .8rem; color: var(--cor-muted); margin-bottom: 1rem;
    padding-bottom: .75rem; border-bottom: 1px solid var(--cor-borda);
}
.saque-formas {
    display: flex; gap: .5rem; margin-bottom: .9rem;
}
.saque-forma-btn {
    flex: 1; padding: .5rem .4rem;
    border: 2px solid var(--cor-borda); border-radius: 8px;
    background: #fff; font-size: .85rem; font-weight: 700;
    cursor: pointer; font-family: inherit;
    transition: all var(--transition); text-align: center; color: var(--cor-texto);
}
.saque-forma-btn.active {
    border-color: var(--cor-principal);
    background: var(--cor-principal); color: #fff;
}
.saque-field { margin-bottom: .75rem; }
.saque-field label {
    font-size: .78rem; font-weight: 700; color: var(--cor-muted);
    text-transform: uppercase; letter-spacing: .04em;
    display: block; margin-bottom: .28rem;
}
.saque-field input[type="number"],
.saque-field input[type="text"] {
    width: 100%; padding: .55rem .8rem;
    border: 1.5px solid var(--cor-borda); border-radius: 8px;
    font-size: 1rem; font-family: inherit; box-sizing: border-box;
    transition: border-color var(--transition);
}
.saque-field input:focus {
    outline: none; border-color: var(--cor-principal);
    box-shadow: 0 0 0 3px rgba(114,47,55,.1);
}
.saque-resumo {
    background: var(--cor-bg); border-radius: 8px;
    padding: .6rem .85rem; margin-bottom: .9rem; font-size: .85rem;
}
.saque-resumo-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: .22rem 0;
}
.saque-resumo-row + .saque-resumo-row { border-top: 1px solid var(--cor-borda); }
.saque-resumo-lbl { color: var(--cor-muted); }
.saque-resumo-val { font-weight: 700; }
.saque-resumo-val.neg { color: var(--cor-error); }
.saque-resumo-val.pos { color: var(--cor-success); }
.saque-erro {
    background: #ffebee; color: var(--cor-error); border-radius: 6px;
    padding: .45rem .8rem; font-size: .84rem; font-weight: 600;
    margin-bottom: .7rem; display: none;
}
.saque-acoes { display: flex; gap: .6rem; margin-top: .5rem; }
.saque-btn-confirmar {
    flex: 1; padding: .65rem 1rem; border-radius: 8px; border: none;
    background: var(--cor-principal); color: #fff;
    font-size: .95rem; font-weight: 700; cursor: pointer; font-family: inherit;
    transition: filter var(--transition);
}
.saque-btn-confirmar:hover { filter: brightness(1.1); }
.saque-btn-cancelar {
    padding: .65rem 1.1rem; border-radius: 8px;
    border: 1.5px solid var(--cor-borda); background: #fff;
    font-size: .88rem; font-weight: 600; cursor: pointer; font-family: inherit;
    color: var(--cor-muted); transition: all var(--transition);
}
.saque-btn-cancelar:hover { background: var(--cor-bg); }

/* Flash de feedback ao adicionar item */
@keyframes pdv-flash-anim {
    0%   { box-shadow: var(--shadow); }
    40%  { box-shadow: 0 0 0 4px rgba(46,125,50,.35); }
    100% { box-shadow: var(--shadow); }
}
.pdv-flash { animation: pdv-flash-anim .35s ease; }

/* ── Busca aprimorada ── */
.pdv-busca-wrap { flex: 1; position: relative; }
.pdv-busca-wrap input { padding-right: 2.8rem; }
.pdv-busca-hint {
    position: absolute; right: .55rem; top: 50%;
    transform: translateY(-50%);
    font-size: .68rem; color: var(--cor-muted);
    background: var(--cor-bg); border: 1px solid var(--cor-borda);
    border-radius: 3px; padding: .05rem .28rem;
    pointer-events: none; line-height: 1.4;
}
.pdv-busca-clear {
    background: none; border: 1px solid var(--cor-borda);
    border-radius: 6px; cursor: pointer;
    color: var(--cor-muted); font-size: .82rem;
    padding: .45rem .65rem; transition: all var(--transition);
    flex-shrink: 0; line-height: 1;
}
.pdv-busca-clear:hover { background: #ffebee; color: var(--cor-error); border-color: var(--cor-error); }

/* ── Badge "Último!" no card ── */
.produto-card-pdv { position: relative; }
.pdv-ultimo-badge {
    position: absolute; top: .3rem; right: .3rem;
    background: var(--cor-warning); color: #fff;
    font-size: .6rem; font-weight: 700;
    border-radius: 4px; padding: .05rem .32rem;
    text-transform: uppercase; letter-spacing: .04em; line-height: 1.5;
}

/* ── Cart: título + limpar ── */
.pdv-cart-title { font-weight: 700; font-size: .95rem; color: var(--cor-principal); }
.pdv-limpar-btn {
    margin-left: auto;
    background: none; border: 1px solid var(--cor-borda);
    border-radius: 5px; cursor: pointer;
    color: var(--cor-muted); font-size: .73rem;
    padding: .15rem .5rem; transition: all var(--transition);
    font-family: inherit;
}
.pdv-limpar-btn:hover { background: #ffebee; color: var(--cor-error); border-color: var(--cor-error); }

/* ── Botões unid/caixa – rótulos internos ── */
.btn-p-tipo  { display: block; font-size: .67rem; color: var(--cor-muted); margin-bottom: .1rem; }
.btn-p-preco { display: block; font-size: .82rem; }

/* ── Status de pagamento (nomes curtos) ── */
.pag-ok    { background: #e8f5e9; color: var(--cor-success); }
.pag-troco { background: #e3f2fd; color: var(--cor-info); }
.pag-falta { background: #ffebee; color: var(--cor-error); }

/* ── kbd hint ── */
kbd {
    display: inline-block;
    background: #f0f0f0; border: 1px solid #bbb;
    border-bottom-width: 2px; border-radius: 3px;
    padding: .05rem .32rem; font-size: .68rem;
    font-family: monospace; line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════
   MODAL GLOBAL DO PDV
   ══════════════════════════════════════════════════════════ */
.pdv-modal-overlay {
    position: fixed; inset: 0;
    background: rgba(0,0,0,.5);
    display: flex; align-items: center; justify-content: center;
    z-index: 9999; padding: 1rem;
    animation: overlayIn .15s ease;
}
@keyframes overlayIn { from { opacity: 0; } to { opacity: 1; } }

.pdv-modal-box {
    background: #fff; border-radius: 14px;
    padding: 1.8rem 1.6rem;
    width: 100%; max-width: 420px;
    box-shadow: 0 16px 48px rgba(0,0,0,.22);
    animation: modalIn .2s cubic-bezier(.34,1.56,.64,1);
    text-align: center;
}
@keyframes modalIn {
    from { transform: translateY(16px) scale(.95); opacity: 0; }
    to   { transform: translateY(0)    scale(1);   opacity: 1; }
}

.pdv-modal-icone  { margin-bottom: .4rem; line-height: 1; }
.modal-check      { font-size: 2.8rem; color: var(--cor-success); display: block; }
.pdv-modal-titulo { font-size: 1.15rem; font-weight: 700; color: var(--cor-texto); margin-bottom: .65rem; }
.pdv-modal-corpo  { color: var(--cor-muted); font-size: .9rem; margin-bottom: 1.2rem; line-height: 1.55; }
.pdv-modal-acoes  { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.pdv-modal-btn {
    padding: .6rem 1.2rem; border-radius: 8px;
    font-size: .9rem; font-weight: 600;
    cursor: pointer; border: none;
    font-family: inherit; transition: all var(--transition); white-space: nowrap;
}
.pdv-modal-btn-prim   { background: var(--cor-success); color: #fff; }
.pdv-modal-btn-prim:hover  { background: #1b5e20; }
.pdv-modal-btn-sec    { background: #eee; color: #444; border: 1px solid #ccc; }
.pdv-modal-btn-sec:hover   { background: #ddd; }
.pdv-modal-btn-danger { background: var(--cor-error); color: #fff; }
.pdv-modal-btn-danger:hover { background: #b71c1c; }

/* Conteúdo: venda concluída */
.modal-check-circle {
    width: 72px; height: 72px;
    background: var(--cor-success);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto .75rem;
    animation: checkPop .45s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 4px 18px rgba(46,125,50,.35);
}
@keyframes checkPop {
    from { transform: scale(0); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}
.modal-check {
    font-size: 2rem; color: #fff; font-weight: 700; display: block; line-height: 1;
}
.modal-venda-info {
    background: var(--cor-bg); border-radius: 10px;
    padding: .75rem 1rem; margin: .3rem 0 .5rem;
    text-align: left;
}
.modal-venda-num   { font-size: .75rem; color: var(--cor-muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: .15rem; }
.modal-venda-total { font-size: 2.1rem; font-weight: 800; color: var(--cor-principal); line-height: 1.05; }
.modal-venda-forma { font-size: .8rem; color: var(--cor-muted); margin-top: .25rem; }
.modal-venda-troco {
    display: inline-flex; align-items: center; gap: .3rem;
    background: #e8f5e9; color: var(--cor-success);
    border-radius: 20px; padding: .2rem .8rem;
    font-size: .83rem; font-weight: 700; margin-top: .45rem;
}
.modal-venda-divider {
    border: none; border-top: 1px solid var(--cor-borda); margin: .65rem 0;
}
.modal-nota-pergunta {
    font-size: .92rem; font-weight: 700; color: var(--cor-texto); margin-bottom: .2rem;
}
.modal-nota-hint {
    font-size: .8rem; color: var(--cor-muted); margin-bottom: .9rem;
}
.pdv-modal-btn-comprovante {
    width: 100%; font-size: .97rem; padding: .72rem 1.2rem;
    background: var(--cor-principal); color: #fff;
    border-radius: 8px; cursor: pointer; border: none;
    font-family: inherit; font-weight: 700;
    transition: filter var(--transition);
    display: flex; align-items: center; justify-content: center; gap: .4rem;
}
.pdv-modal-btn-comprovante:hover { filter: brightness(1.12); }

/* Conteúdo: erro de pagamento */
.modal-pag-err { font-size: .9rem; line-height: 1.8; }
.modal-pag-falta {
    display: inline-block; padding: .22rem .75rem;
    background: #ffebee; color: var(--cor-error);
    border-radius: 6px; font-weight: 700; margin-top: .35rem;
}

/* ══════════════════════════════════════════════════════════
   TOASTS
   ══════════════════════════════════════════════════════════ */
.pdv-toast-wrap {
    position: fixed; bottom: 1.5rem; right: 1.5rem;
    z-index: 9998;
    display: flex; flex-direction: column-reverse;
    gap: .4rem; pointer-events: none;
}
.pdv-toast {
    background: #333; color: #fff;
    padding: .6rem 1.1rem; border-radius: 10px;
    font-size: .85rem; font-weight: 500;
    pointer-events: all;
    box-shadow: 0 4px 18px rgba(0,0,0,.25);
    animation: toastIn .22s ease; max-width: 340px;
    line-height: 1.4;
}
.pdv-toast-error   { background: var(--cor-error); }
.pdv-toast-success {
    background: var(--cor-success);
    border-left: 4px solid rgba(255,255,255,.4);
    padding-left: .85rem;
}
.pdv-toast-info    { background: var(--cor-info); }
.pdv-toast-out     { opacity: 0; transform: translateX(14px); transition: all .3s ease; }
@keyframes toastIn {
    from { opacity: 0; transform: translateX(14px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* ----- Estoque mínimo alerta ----- */
.estoque-critico { color: var(--cor-error); font-weight: 700; }
.estoque-ok      { color: var(--cor-success); }

/* ----- Tabs ----- */
.tabs       { display: flex; gap: 0; border-bottom: 2px solid var(--cor-borda); margin-bottom: 1.2rem; }
.tab-link   { padding: .55rem 1.2rem; cursor: pointer; font-size: .9rem; font-weight: 600; color: var(--cor-muted); border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all var(--transition); }
.tab-link:hover   { color: var(--cor-principal); }
.tab-link.active  { color: var(--cor-principal); border-bottom-color: var(--cor-principal); }
.tab-content      { display: none; }
.tab-content.active { display: block; }

/* ----- Paginação ----- */
.pagination { display: flex; gap: .3rem; margin-top: 1rem; flex-wrap: wrap; }
.pagination a, .pagination span { padding: .3rem .65rem; border: 1px solid var(--cor-borda); border-radius: 4px; font-size: .85rem; }
.pagination a:hover { background: var(--cor-bg); }
.pagination .current { background: var(--cor-principal); color: #fff; border-color: var(--cor-principal); }

/* ----- Comprovante (impressão) ----- */
@media print {
    .topbar, .page-footer, .no-print { display: none !important; }
    .main-content { padding: 0; }
    .comprovante { max-width: 80mm; margin: 0 auto; font-size: 11px; }
}
.comprovante { max-width: 380px; margin: 1rem auto; background: #fff; padding: 1.2rem; border: 1px dashed #ccc; font-size: .88rem; }
.comprovante .comp-header { text-align: center; margin-bottom: 1rem; }
.comprovante .comp-logo   { height: 50px; margin-bottom: .3rem; }
.comprovante h3 { font-size: 1rem; }
.comprovante table { font-size: .82rem; }
.comprovante .comp-footer { text-align: center; margin-top: 1rem; font-size: .8rem; color: #555; border-top: 1px dashed #ccc; padding-top: .7rem; }
.comp-divider { border: none; border-top: 1px dashed #ccc; margin: .5rem 0; }

/* ─────────────────────────────────────────────────
   Formulário de Produto — layout didático
   ───────────────────────────────────────────────── */
.pf-section { margin-bottom: .9rem; }

.pf-sec-header {
    display: flex; align-items: center; gap: .8rem;
    padding-bottom: .75rem;
    border-bottom: 2px solid var(--cor-borda);
    margin-bottom: 1rem;
}
.pf-num {
    width: 30px; height: 30px; flex-shrink: 0;
    background: var(--cor-principal); color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: .88rem;
}
.pf-num-sm {
    display: inline-flex; width: 22px; height: 22px; flex-shrink: 0;
    background: var(--cor-borda); color: var(--cor-muted);
    border-radius: 50%;
    align-items: center; justify-content: center;
    font-size: .75rem; font-weight: 700;
}
.pf-sec-title { font-weight: 700; font-size: .95rem; color: var(--cor-texto); }
.pf-sec-sub   { font-size: .78rem; color: var(--cor-muted); margin-top: .1rem; }

.pf-req { color: var(--cor-error); font-weight: 700; }

/* ── Seletor de categoria (pills) ── */
.pf-cat-picker { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .2rem; }
.pf-cat-pill {
    padding: .35rem .8rem;
    border: 2px solid var(--cor-borda);
    border-radius: 20px;
    cursor: pointer;
    font-size: .82rem; font-weight: 600;
    color: var(--cor-muted);
    transition: all var(--transition);
    user-select: none;
}
.pf-cat-pill:hover  { border-color: var(--cor-principal); color: var(--cor-principal); background: rgba(114,47,55,.05); }
.pf-cat-pill.active { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

/* ── Indicador de margem ── */
.pf-margem {
    display: inline-block;
    padding: .18rem .55rem;
    border-radius: 4px;
    font-size: .78rem; font-weight: 700;
    background: #e8f5e9; color: var(--cor-success);
}
.pf-margem.pf-margem-neg { background: #ffebee; color: var(--cor-error); }

/* ── Toggle de embalagem ── */
.pf-emb-toggle {
    display: flex; align-items: flex-start; gap: .7rem;
    cursor: pointer; padding: .2rem 0;
}
.pf-emb-toggle input[type="checkbox"] {
    width: 18px; height: 18px; flex-shrink: 0; margin-top: .2rem;
    cursor: pointer; accent-color: var(--cor-principal);
}
.pf-emb-fields {
    display: none;
    padding-top: .7rem; margin-top: .7rem;
    border-top: 1px dashed var(--cor-borda);
}
.pf-emb-fields.visible { display: block; }

.pf-emb-preview {
    background: var(--cor-bg);
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    padding: .7rem 1rem;
    font-size: .82rem;
    margin-top: .6rem;
}
.pf-prev-card {
    display: inline-block;
    background: #fff;
    border: 1px solid var(--cor-borda);
    border-radius: 6px;
    padding: .5rem .7rem;
    margin-top: .35rem;
    min-width: 180px;
    text-align: center;
}
.pf-prev-btn {
    display: inline-block;
    padding: .28rem .4rem;
    border-radius: 5px;
    border: 1px solid var(--cor-borda);
    font-size: .7rem; line-height: 1.35;
    background: var(--cor-bg);
    min-width: 64px;
}
.pf-prev-btn-cx { border-color: var(--cor-info); color: var(--cor-info); }

/* ── Accordion (Detalhes / Foto) ── */
.pf-accordion-btn {
    display: flex; align-items: center; gap: .5rem; width: 100%;
    border: none; background: none; cursor: pointer; padding: .3rem 0;
    font-size: .9rem; font-weight: 600; color: var(--cor-texto);
    font-family: inherit; text-align: left;
}
.pf-accordion-btn small { font-weight: 400; }
.pf-arrow { margin-left: auto; font-size: .65rem; color: var(--cor-muted); transition: transform var(--transition); }
.pf-accordion-btn.open .pf-arrow { transform: rotate(180deg); }
.pf-accordion-body { display: none; }
.pf-accordion-body.visible { display: block; }

/* ── Botões de ação ── */
.pf-actions { display: flex; gap: .7rem; margin-top: .5rem; padding-bottom: 1.5rem; }
.pf-btn-submit { padding: .65rem 1.6rem; font-size: .95rem; }

/* ─────────────────────────────────────────────────
   Módulo Estoque — entrada com suporte a embalagem
   ───────────────────────────────────────────────── */

/* Info box de saldo atual */
.estq-info-box {
    background: var(--cor-bg);
    border: 1px solid var(--cor-borda);
    border-radius: 7px;
    padding: .6rem .9rem;
    margin-bottom: .7rem;
    display: flex;
    flex-direction: column;
    gap: .25rem;
}
.estq-info-row { display: flex; justify-content: space-between; align-items: center; font-size: .88rem; }
.estq-info-label { color: var(--cor-muted); }

/* Toggle de modo: Unidades / Caixas */
.estq-modo-label { font-size: .82rem; color: var(--cor-muted); margin-bottom: .35rem; font-weight: 600; }
.estq-modo-btns  { display: flex; gap: .4rem; flex-wrap: wrap; }
.estq-modo-btn {
    padding: .4rem 1rem;
    border: 2px solid var(--cor-borda);
    border-radius: 6px;
    background: var(--cor-bg);
    cursor: pointer;
    font-size: .84rem; font-weight: 600;
    color: var(--cor-muted);
    transition: all var(--transition);
    font-family: inherit;
}
.estq-modo-btn:hover  { border-color: var(--cor-principal); color: var(--cor-principal); }
.estq-modo-btn.active { background: var(--cor-principal); border-color: var(--cor-principal); color: #fff; }

/* Card da calculadora de caixas */
.estq-cx-card {
    background: #f0f7ff;
    border: 1px solid #b3d4f5;
    border-radius: 8px;
    padding: .9rem 1rem;
    margin: .5rem 0;
}
.estq-cx-titulo { font-weight: 700; font-size: .9rem; margin-bottom: .7rem; color: var(--cor-info); }
.estq-cx-calc-row { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; }
.estq-cx-campo { text-align: center; }
.estq-cx-op {
    font-size: 1.5rem; font-weight: 700;
    color: var(--cor-muted);
    padding: 0 .2rem;
}
.estq-cx-fator-val {
    font-size: 1.8rem; font-weight: 700;
    color: var(--cor-info);
    line-height: 1;
}
.estq-cx-campo-total { min-width: 70px; }
.estq-cx-total-val {
    font-size: 1.8rem; font-weight: 700;
    color: var(--cor-success);
    line-height: 1;
}

/* Resumo da operação */
.estq-resumo {
    background: #f4f5f7;
    border-left: 4px solid var(--cor-principal);
    border-radius: 0 7px 7px 0;
    padding: .6rem .9rem;
    margin: .7rem 0;
    font-size: .86rem;
}
.estq-resumo-op   { color: var(--cor-texto); font-weight: 600; margin-bottom: .2rem; }
.estq-resumo-novo { color: var(--cor-success); font-weight: 700; }
.estq-resumo-novo.estq-resumo-neg  { color: var(--cor-error); }
.estq-resumo-novo.estq-resumo-zero { color: var(--cor-muted); }

/* Hint de unidade na coluna de estoque (index) */
.estq-unid-hint { font-size: .72rem; font-weight: 400; color: var(--cor-muted); line-height: 1.3; }

/* ----- Responsivo ----- */
@media (max-width: 768px) {
    .topbar-nav  { order: 3; width: 100%; }
    .main-content { padding: 1rem; }
    .pdv-layout  { grid-template-columns: 1fr; height: auto; }
    .kpi-grid    { grid-template-columns: 1fr 1fr; }
    .form-row    { flex-direction: column; }
    .filter-bar  { flex-direction: column; }
}
@media (max-width: 480px) {
    .kpi-grid { grid-template-columns: 1fr; }
    .topbar-user .user-badge { display: none; }
}

/* ----- Utilitários ----- */
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mb-1 { margin-bottom: .5rem; }
.mb-2 { margin-bottom: 1rem; }
.d-flex { display: flex; }
.gap-1  { gap: .5rem; }
.gap-2  { gap: 1rem; }
.align-center { align-items: center; }
.justify-between { justify-content: space-between; }
.text-muted { color: var(--cor-muted); font-size: .85rem; }
.fw-bold { font-weight: 700; }
.w-100  { width: 100%; }
.hidden { display: none; }
.text-success { color: var(--cor-success) !important; }
.text-error   { color: var(--cor-error)   !important; }

/* ─────────────────────────────────────────────────
   Relatórios e Caixa — componentes visuais
   ───────────────────────────────────────────────── */

/* KPI com cor de destaque */
.kpi-card-success .kpi-value { color: var(--cor-success); }
.kpi-card-error   .kpi-value { color: var(--cor-error); }
.kpi-card-info    .kpi-value { color: var(--cor-info); }
.kpi-card-warning .kpi-value { color: var(--cor-warning); }

/* Barra de porcentagem (pagamentos) */
.pct-bar-wrap { display: flex; align-items: center; gap: .6rem; }
.pct-bar { flex: 1; height: 8px; background: var(--cor-borda); border-radius: 4px; overflow: hidden; min-width: 60px; }
.pct-bar-fill { height: 100%; border-radius: 4px; background: var(--cor-principal); }
.pct-bar-fill-din  { background: #2e7d32; }
.pct-bar-fill-cred { background: #e65100; }
.pct-bar-fill-deb  { background: #0277bd; }
.pct-bar-fill-pix  { background: #7b1fa2; }
.pct-val { font-size: .78rem; color: var(--cor-muted); white-space: nowrap; min-width: 48px; text-align: right; }

/* Lista de pagamentos com barra */
.pag-list { display: flex; flex-direction: column; gap: .65rem; }
.pag-list-item { display: flex; flex-direction: column; gap: .2rem; }
.pag-list-header { display: flex; justify-content: space-between; align-items: baseline; }
.pag-list-label  { font-size: .86rem; font-weight: 600; color: var(--cor-texto); }
.pag-list-val    { font-size: .95rem; font-weight: 700; color: var(--cor-principal); }

/* Ranking — posição com medalha */
.rank-pos { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; font-weight: 700; font-size: .78rem; flex-shrink: 0; }
.rank-1 { background: #FFD700; color: #7a5800; }
.rank-2 { background: #C0C0C0; color: #5a5a5a; }
.rank-3 { background: #CD7F32; color: #5a2d0c; }
.rank-n { background: var(--cor-bg); color: var(--cor-muted); border: 1px solid var(--cor-borda); }

/* Barra de quantidade (mais vendidos) */
.qtd-bar { height: 5px; background: var(--cor-borda); border-radius: 3px; overflow: hidden; margin-top: 5px; }
.qtd-bar-fill { height: 100%; background: var(--cor-principal); border-radius: 3px; }

/* Barras de estoque crítico */
.estq-sev-zerado  { background: #fce4ec !important; }
.estq-sev-critico { background: #fff8f8 !important; }
.estq-sev-bar-wrap { display: flex; align-items: center; gap: .45rem; }
.estq-sev-bar      { flex: 1; height: 7px; background: var(--cor-borda); border-radius: 4px; overflow: hidden; min-width: 48px; }
.estq-sev-bar-fill { height: 100%; border-radius: 4px; }
.estq-sev-bar-ok   { background: var(--cor-success); }
.estq-sev-bar-low  { background: var(--cor-warning); }
.estq-sev-bar-zero { background: var(--cor-error); }

/* Caixa — badge de status */
.cx-status-badge { display: inline-flex; align-items: center; gap: .4rem; padding: .28rem .75rem; border-radius: 20px; font-size: .82rem; font-weight: 700; }
.cx-status-aberto  { background: #e8f5e9; color: var(--cor-success); border: 1px solid #a5d6a7; }
.cx-status-fechado { background: #ffebee; color: var(--cor-error);   border: 1px solid #ffcdd2; }

/* Caixa — barra de informações */
.cx-info-bar {
    background: var(--cor-card);
    border: 1px solid #a5d6a7;
    border-left: 4px solid var(--cor-success);
    border-radius: var(--radius);
    padding: .75rem 1.2rem;
    margin-bottom: 1.2rem;
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.cx-info-item { display: flex; flex-direction: column; gap: .1rem; }
.cx-info-lbl  { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: var(--cor-muted); }
.cx-info-val  { font-size: .9rem; font-weight: 700; color: var(--cor-texto); }

/* Caixa — preview do esperado no fechamento */
.cx-fechar-preview {
    background: var(--cor-bg);
    border: 1px dashed var(--cor-borda);
    border-radius: 6px;
    padding: .65rem .9rem;
    font-size: .87rem;
    margin-bottom: 1rem;
}
.cx-fp-row  { display: flex; justify-content: space-between; padding: .15rem 0; }
.cx-fp-total { border-top: 1px solid var(--cor-borda); padding-top: .3rem; margin-top: .2rem; font-weight: 700; color: var(--cor-principal); }